/* ═══════════════════════════════════════════════════════════════
   TIER 1 TACTICAL — GUN DEPO & EQUIPMENT CENTER, MARGATE FLORIDA
   "Brass & Bourbon" — deep oxblood, antique brass, warm near-black,
   big photography, metallic type. Rich, not tactical-generic.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* grounds */
  --void:     #000000;
  --ink:      #050404;
  --ink-2:    #0C0A09;
  --ink-3:    #151110;
  --wine-dk:  #000000;
  --wine:     #0A0806;
  --wine-lt:  #12100B;

  /* metals */
  --brass:    #C09A4E;
  --brass-hi: #EBD096;
  --brass-lo: #7A5E28;
  --copper:   #B87333;
  --amber:    #E3A85C;

  /* paper (inverted sections) */
  --bone:     #F1EBDF;
  --bone-2:   #E4DBC9;
  --bone-3:   #D3C7AF;

  /* text */
  --tx:       #F3EEE4;
  --tx-2:     #C3B8A4;
  --tx-3:     #8E836F;
  --line:     #241C18;
  --line-2:   #3A2E24;

  --max: 1220px;
  --gut: clamp(20px, 4.4vw, 60px);

  --f-disp: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --f-text: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-lab:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --foil: linear-gradient(100deg, #8A6B2F 0%, #C09A4E 22%, #EBD096 46%, #C09A4E 64%, #9A7838 100%);
}

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:#000; color:var(--tx);
  font-family:var(--f-text); font-size:20px; line-height:1.6;
  font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; font-family:var(--f-disp);
  line-height:1.02; letter-spacing:-.014em; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
hr{border:0; height:1px; background:var(--line); margin:0}
::selection{background:var(--brass); color:var(--ink)}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* warm grain over everything */
body::after{
  content:''; position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--brass); color:var(--ink); padding:12px 20px; font-family:var(--f-lab)}
.skip:focus{left:0}

/* ── TYPE ──────────────────────────────────────────────── */
.lab{
  font-family:var(--f-lab); font-size:10.5px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass);
  font-variant-numeric:normal; display:inline-flex; align-items:center; gap:12px;
}
.lab::before{content:''; width:26px; height:1px; background:var(--brass); opacity:.8; flex:none}
.lab--bare::before{display:none}

.d1{font-size:clamp(3rem, 8.2vw, 7rem); line-height:.94; letter-spacing:-.024em}
.d2{font-size:clamp(2.3rem, 5.2vw, 4.2rem); line-height:1}
.d3{font-size:clamp(1.7rem, 3vw, 2.5rem)}
.d4{font-size:1.42rem; line-height:1.18}

/* brass foil headline */
.foil{
  background:var(--foil); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.italic{font-style:italic}

.lede{font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.55; color:var(--tx-2)}
.sm{font-size:.94rem; line-height:1.58}
.xs{font-size:.82rem; line-height:1.5; color:var(--tx-3)}
.muted{color:var(--tx-3)}
.brass{color:var(--brass)}
.measure{max-width:60ch}
.measure-s{max-width:46ch}
.center{text-align:center}

.dropcap::first-letter{
  font-family:var(--f-disp); float:left; font-size:4.2em; line-height:.8;
  padding:.07em .1em 0 0; background:var(--foil);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ── LAYOUT ────────────────────────────────────────────── */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(66px, 8.6vw, 132px); position:relative}
.sec--tight{padding-block:clamp(42px,5vw,72px)}

/* section grounds */
.leaf{background:#000}
.leaf--deep{background:#000}
.leaf--wine{background:
  radial-gradient(120% 80% at 50% 0%, rgba(192,154,78,.10), transparent 60%), #000}
.leaf--paper{background:var(--bone); color:var(--ink-2)}
.leaf--paper h1,.leaf--paper h2,.leaf--paper h3,.leaf--paper h4{color:var(--ink)}
.leaf--paper .lede{color:#4A4034}
.leaf--paper .muted,.leaf--paper .xs{color:#6E6353}
.leaf--paper .lab{color:var(--wine)}
.leaf--paper .lab::before{background:var(--wine)}
.leaf--paper hr,.leaf--paper .rule{background:var(--bone-3)}
.leaf--paper .foil{background:linear-gradient(100deg,#6E2320,#A8452F 45%,#7E2E26);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}

/* hairline top ornament */
.orn{display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,3.4vw,44px)}
.orn::after{content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--brass-lo), transparent)}
.leaf--paper .orn::after{background:linear-gradient(90deg, var(--bone-3), transparent)}

.grid{display:grid; gap:clamp(28px,3.4vw,54px)}
.grid>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.stack{display:flex; flex-direction:column; gap:22px}
.stack>*{min-width:0}
.mt{margin-top:clamp(30px,3.6vw,52px)}
.mt-s{margin-top:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.head{margin-bottom:clamp(36px,4.4vw,62px)}
.head .lab{margin-bottom:22px}
.head h2{margin-bottom:22px}
.head .lede{max-width:58ch}

/* ── MASTHEAD ──────────────────────────────────────────── */
.masthead{background:var(--void); border-bottom:1px solid var(--line); position:relative}
.masthead::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--foil); opacity:.75}
.masthead .wrap{padding-block:16px 0; text-align:center}
.mast__over{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--f-lab); font-size:9.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-3); padding-bottom:15px;
}
.mast__over a:hover{color:var(--brass)}
@media (max-width:800px){ .mast__over span:first-child{display:none} .mast__over{justify-content:center} }

.mast__name{font-family:var(--f-disp); font-size:clamp(1.9rem,5vw,3.4rem);
  line-height:1; padding-block:20px 0; display:block; color:var(--tx)}
.mast__name b{font-weight:400; background:var(--foil);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.mast__sub{font-family:var(--f-lab); font-size:10px; font-weight:600; letter-spacing:.36em;
  text-transform:uppercase; color:var(--brass); margin-top:13px}
.mast__rule{height:1px; background:linear-gradient(90deg,transparent,var(--brass-lo),transparent);
  margin-top:20px}
.mast__nav{display:flex; justify-content:center; flex-wrap:wrap; padding-block:13px}
.mast__nav a{font-family:var(--f-lab); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-2); padding:7px 22px; transition:color .2s}
.mast__nav a+a{border-left:1px solid var(--line)}
.mast__nav a:hover,.mast__nav a[aria-current="page"]{color:var(--brass)}
@media (max-width:640px){
  .mast__nav{gap:2px 4px}
  .mast__nav a{padding:6px 10px; font-size:9.5px}
  .mast__nav a+a{border-left:0}
}

.railbar{
  position:fixed; top:0; left:0; right:0; z-index:120;
  background:rgba(0,0,0,.94); backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border-bottom:1px solid var(--line-2);
  transform:translateY(-101%); transition:transform .42s var(--ease);
}
.railbar.is-on{transform:none}
.railbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; height:58px}
.railbar__name{font-family:var(--f-disp); font-size:1.1rem; white-space:nowrap; color:var(--tx)}
.railbar__nav{display:flex; align-items:center; gap:26px}
.railbar__nav a{font-family:var(--f-lab); font-size:10px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--tx-2)}
.railbar__nav a:hover{color:var(--brass)}
@media (max-width:800px){ .railbar__nav a:not(.btn){display:none} }
@media (prefers-reduced-motion:reduce){ .railbar{transition:none} }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:11px; padding:16px 30px;
  font-family:var(--f-lab); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; cursor:pointer; position:relative;
  background:var(--foil); color:#170F06; border:0; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  box-shadow:0 6px 26px rgba(192,154,78,.16);
}
.btn{background-size:180% 100%; background-position:0% 50%;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-position .5s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(192,154,78,.32);
  background-position:100% 50%}
.btn--line{background:transparent; color:var(--tx); border:1px solid var(--line-2); box-shadow:none}
.btn--line:hover{border-color:var(--brass); color:var(--brass); box-shadow:none; transform:translateY(-2px)}
.leaf--paper .btn--line{color:var(--ink); border-color:var(--bone-3)}
.leaf--paper .btn--line:hover{border-color:var(--wine); color:var(--wine)}
.btn--wide{width:100%; justify-content:center; padding-block:19px}
.btn--sm{padding:11px 20px; font-size:9.5px}
.btns{display:flex; flex-wrap:wrap; gap:14px}

/* ── HERO ──────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--void);
  min-height:clamp(560px,84vh,860px); display:flex; align-items:flex-end}
.hero__bg{position:absolute; inset:0; z-index:1}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:45% 50%;
  filter:saturate(.9) contrast(1.08)}
.hero__bg::after{content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--void) 4%, rgba(0,0,0,.74) 36%, rgba(0,0,0,.3) 66%, rgba(0,0,0,.58) 100%),
    radial-gradient(85% 65% at 18% 78%, rgba(192,154,78,.12), transparent 68%);
}
.hero .wrap{position:relative; z-index:2; padding-block:clamp(48px,6vw,92px)}
.hero h1{margin-block:22px 26px; max-width:15ch}
.hero__stand{font-size:clamp(1.12rem,1.6vw,1.4rem); line-height:1.5; font-style:italic;
  color:var(--tx-2); max-width:44ch}
.hero__foot{display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); align-items:center;
  margin-top:clamp(30px,3.4vw,46px)}

/* key facts strip */
.facts{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2); background:rgba(0,0,0,.55)}
.facts div{flex:1 1 190px; padding:17px 22px; border-right:1px solid var(--line-2)}
.facts div:last-child{border-right:0}
.facts dt{font-family:var(--f-lab); font-size:9px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-3); margin-bottom:7px}
.facts dd{margin:0; font-size:1.06rem; color:var(--tx)}
.facts dd b{font-family:var(--f-disp); font-size:1.5rem; color:var(--brass);
  font-variant-numeric:lining-nums; font-weight:400}

/* ── MARQUEE ───────────────────────────────────────────── */
.marquee{overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,#000,#0A0806 50%,#000);
  padding-block:13px}
.marquee__t{display:flex; gap:0; width:max-content; animation:slide 46s linear infinite}
@keyframes slide{ to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee__t{animation:none} }
.marquee span{font-family:var(--f-lab); font-size:10.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tx-2); padding-inline:22px; white-space:nowrap}
.marquee span::after{content:'◆'; color:var(--brass); margin-left:22px; font-size:7px; vertical-align:3px}

/* ── ANNOUNCEMENT ──────────────────────────────────────── */
.notice{background:linear-gradient(90deg, rgba(192,154,78,.12), rgba(16,12,10,.4) 70%);
  border-block:1px solid var(--line-2)}
.notice .wrap{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px);
  padding-block:19px; flex-wrap:wrap}
.notice__d{font-family:var(--f-lab); font-size:9.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#170F06; flex:none; background:var(--foil); padding:7px 13px}
.notice p{flex:1 1 320px; font-size:1.02rem; line-height:1.5; color:var(--tx-2)}
.notice a{color:var(--brass); border-bottom:1px solid var(--brass-lo); white-space:nowrap}
.notice a:hover{border-bottom-color:var(--brass)}

/* ── STATS ─────────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-2)}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .stats{grid-template-columns:1fr} }
.stat{padding:clamp(24px,2.8vw,36px); border-right:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(192,154,78,.06), transparent)}
.stat:last-child{border-right:0}
@media (max-width:860px){
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
}
@media (max-width:480px){ .stat{border-right:0; border-bottom:1px solid var(--line-2)} .stat:last-child{border-bottom:0} }
.stat b{display:block; font-family:var(--f-disp); font-size:clamp(2.2rem,4vw,3.1rem);
  background:var(--foil); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  font-variant-numeric:lining-nums; line-height:1; margin-bottom:12px; font-weight:400}
.stat span{display:block; font-size:.96rem; color:var(--tx-2); line-height:1.5}

/* ── PHOTO CARDS ───────────────────────────────────────── */
.pcard{position:relative; overflow:hidden; border:1px solid var(--line-2);
  display:block; background:#050404; height:100%}
.pcard__img{aspect-ratio:4/3; overflow:hidden}
.pcard__img img{width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.06); transition:transform .9s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard__body{padding:clamp(22px,2.4vw,30px); position:relative}
.pcard__body::before{content:''; position:absolute; top:0; left:0; width:44px; height:2px;
  background:var(--foil)}
.pcard h3{font-size:1.34rem; margin:12px 0 10px}
.pcard p{color:var(--tx-2); font-size:.98rem; line-height:1.56}
.pcard .lab{font-size:9.5px; letter-spacing:.22em}
.pcard .lab::before{width:16px}

/* ── FULL-BLEED BAND ───────────────────────────────────── */
.band{position:relative; overflow:hidden; background:var(--void)}
.band__img{height:clamp(300px,44vw,580px); overflow:hidden}
.band__img img{width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.07)}
.band::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.93) 0%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.62) 100%)}
.band__cap{position:absolute; inset:0; z-index:2; display:flex; align-items:center}
.band__cap .wrap{width:100%}
.band__cap p{font-family:var(--f-disp); font-size:clamp(1.5rem,3.4vw,2.9rem);
  line-height:1.12; max-width:22ch; color:var(--tx)}
.band__cap .lab{margin-bottom:18px}

/* framed plate */
figure.plate-fig{margin:0}
.plate-fig__frame{border:1px solid var(--line-2); padding:9px; background:var(--ink-2);
  position:relative; overflow:hidden}
.plate-fig__frame::after{content:''; position:absolute; top:0; left:0; width:52px; height:2px;
  background:var(--foil)}
figure.plate-fig img{width:100%; filter:saturate(.88) contrast(1.05)}
.plate-row figure.plate-fig img{aspect-ratio:4/3; object-fit:cover}
figure.plate-fig figcaption{margin-top:13px; font-family:var(--f-lab); font-size:9.5px;
  font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--tx-3);
  display:flex; gap:10px}
figure.plate-fig figcaption b{color:var(--brass); flex:none; font-weight:700}
.leaf--paper figure.plate-fig figcaption{color:#6E6353}
.leaf--paper figure.plate-fig figcaption b{color:var(--wine)}
.leaf--paper .plate-fig__frame{border-color:var(--bone-3); background:var(--bone-2)}

/* ── LEDGER ────────────────────────────────────────────── */
.ledger{border-top:2px solid transparent;
  border-image:var(--foil) 1; background:linear-gradient(180deg, rgba(192,154,78,.05), transparent 40%)}
.leaf--paper .ledger{background:linear-gradient(180deg, rgba(211,199,175,.4), transparent 40%)}
.ledger__head{display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; padding:16px clamp(16px,2vw,24px); border-bottom:1px solid var(--line-2)}
.leaf--paper .ledger__head{border-bottom-color:var(--bone-3)}
.ledger__head h3{font-size:1.36rem}
.ledger__head span{font-family:var(--f-lab); font-size:9.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--tx-3)}
.leaf--paper .ledger__head span{color:#6E6353}
.line{display:flex; align-items:baseline; gap:14px;
  padding:16px clamp(16px,2vw,24px); border-bottom:1px solid var(--line);
  transition:background .25s var(--ease)}
.line:hover{background:rgba(192,154,78,.07)}
.leaf--paper .line{border-bottom-color:var(--bone-3)}
.leaf--paper .line:hover{background:rgba(211,199,175,.45)}
.line__t{flex:0 1 auto; min-width:0}
.line__t b{display:block; font-weight:600; font-size:1.08rem}
.line__t i{display:block; font-style:italic; color:var(--tx-3); font-size:.93rem;
  line-height:1.45; margin-top:2px}
.leaf--paper .line__t i{color:#6E6353}
.line__d{flex:1 1 24px; min-width:12px; margin-bottom:.32em; height:1px;
  background-image:radial-gradient(circle, var(--line-2) .9px, transparent .9px);
  background-size:5px 1px; background-repeat:repeat-x}
.leaf--paper .line__d{background-image:radial-gradient(circle, var(--bone-3) .9px, transparent .9px)}
@media (max-width:540px){ .line__d{display:none} }
.line__p{flex:none; font-family:var(--f-disp); font-size:1.5rem; color:var(--brass);
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; line-height:1}
.leaf--paper .line__p{color:var(--wine)}
.line__p em{font-style:italic; font-family:var(--f-text); font-size:.6em; color:var(--tx-3)}
.line--incl .line__p{font-family:var(--f-text); font-style:italic; font-size:1.04rem; color:var(--tx-2)}
.line--lead{padding-block:24px; background:rgba(192,154,78,.09)}
.leaf--paper .line--lead{background:rgba(211,199,175,.5)}
.line--lead .line__t b{font-family:var(--f-disp); font-size:1.6rem; font-weight:400}
.line--lead .line__p{font-size:2.5rem; background:var(--foil);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.leaf--paper .line--lead .line__p{background:linear-gradient(100deg,#6E2320,#A8452F);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.ledger__foot{padding:16px clamp(16px,2vw,24px)}

/* ── COMPARISON ────────────────────────────────────────── */
.cmp{border-top:2px solid transparent; border-image:var(--foil) 1}
.cmp__hd{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.4vw,52px);
  padding-block:12px; border-bottom:1px solid var(--line-2)}
.cmp__hd span{font-family:var(--f-lab); font-size:9.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--tx-3)}
.cmp__hd span:last-child{color:var(--brass)}
.cmp__row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.4vw,52px);
  padding-block:20px; border-bottom:1px solid var(--line); align-items:baseline;
  transition:background .25s}
.cmp__row:hover{background:rgba(192,154,78,.06)}
.cmp__row i{font-style:italic; color:var(--tx-3); font-size:1rem; line-height:1.5}
.cmp__row b{font-weight:600; font-size:1.06rem; line-height:1.5}
@media (max-width:740px){
  .cmp__hd{display:none}
  .cmp__row{grid-template-columns:1fr; gap:8px; padding-block:18px}
  .cmp__row i::before{content:'“'} .cmp__row i::after{content:'”'}
  .cmp__row b::before{content:'→ '; color:var(--brass)}
}

/* ── STEPS ─────────────────────────────────────────────── */
.steps{counter-reset:s; border-top:2px solid transparent; border-image:var(--foil) 1}
.step{counter-increment:s; display:grid; grid-template-columns:96px 1fr;
  gap:clamp(16px,3vw,44px); padding-block:clamp(28px,3.2vw,42px);
  border-bottom:1px solid var(--line); align-items:start}
@media (max-width:620px){ .step{grid-template-columns:54px 1fr; gap:16px} }
.step__n{font-family:var(--f-disp); font-size:clamp(2rem,3.8vw,3.2rem); line-height:.86;
  background:var(--foil); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}
.step__n::before{content:counter(s, upper-roman)}
.step h3{font-size:1.5rem; margin-bottom:11px}
.step p{color:var(--tx-2); max-width:58ch}
.step .aside{margin-top:14px; padding-left:15px; border-left:2px solid var(--brass-lo);
  font-style:italic; color:var(--tx-3); font-size:.96rem; line-height:1.5}

/* ── ENTRY / NOTE ──────────────────────────────────────── */
.entry{border-top:1px solid var(--line-2); padding-top:22px}
.entry .lab{margin-bottom:13px}
.entry h3{font-size:1.5rem; margin-bottom:12px}
.entry p{color:var(--tx-2); font-size:1rem; line-height:1.56}
.entry p+p{margin-top:9px}
.leaf--paper .entry{border-top-color:var(--bone-3)}
.leaf--paper .entry p{color:#4A4034}

.note{border:1px solid var(--line-2); border-left:3px solid var(--brass);
  padding:clamp(20px,2.3vw,28px); background:rgba(192,154,78,.045)}
.note h4{font-family:var(--f-disp); font-size:1.26rem; margin-bottom:11px}
.note p{color:var(--tx-2); font-size:.99rem; line-height:1.56}
.note p+p{margin-top:10px}
.leaf--paper .note{border-color:var(--bone-3); border-left-color:var(--wine);
  background:var(--bone-2)}
.leaf--paper .note p{color:#4A4034}
.cite{display:block; margin-top:13px; font-family:var(--f-lab); font-size:9px;
  font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--brass); line-height:1.7}
.leaf--paper .cite{color:var(--wine)}

/* ── ZIPS ──────────────────────────────────────────────── */
.zips{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0;
  border-top:1px solid var(--line-2); border-left:1px solid var(--line-2)}
.zips li{padding:15px 18px; border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2); transition:background .25s}
.zips li:hover{background:rgba(192,154,78,.08)}
.zips b{display:block; font-weight:600; font-size:1.04rem; margin-bottom:3px}
.zips span{font-family:var(--f-lab); font-size:9.5px; letter-spacing:.11em; color:var(--tx-3);
  font-variant-numeric:lining-nums}

/* ── FORM ──────────────────────────────────────────────── */
.form{display:grid; gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-family:var(--f-lab); font-size:9.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--tx-3)}
.field label .rq{color:var(--brass)}
.field input,.field select,.field textarea{
  font-family:var(--f-text); font-size:17px; color:var(--tx);
  background:rgba(0,0,0,.55); border:1px solid var(--line-2);
  padding:13px 15px; width:100%; appearance:none; border-radius:0;
  transition:border-color .22s, background .22s}
.field textarea{min-height:110px; resize:vertical; line-height:1.55}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C09A4E' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brass); background:rgba(192,154,78,.07)}
.field input::placeholder,.field textarea::placeholder{color:#6B6152; font-style:italic}
.field small{font-size:.84rem; color:var(--tx-3); font-style:italic}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:620px){ .frow{grid-template-columns:1fr} }
.consent{display:flex; gap:12px; align-items:flex-start}
.consent input{width:16px; height:16px; margin-top:5px; flex:none; accent-color:var(--brass)}
.consent label{font-family:var(--f-text); font-size:.93rem; letter-spacing:0;
  text-transform:none; color:var(--tx-3); line-height:1.5; font-style:italic}
.result{border:1px solid var(--brass); border-left-width:3px; padding:17px 19px;
  font-size:.96rem; line-height:1.55; color:var(--tx-2); background:rgba(192,154,78,.06)}

.copyblock{border:1px solid var(--line-2); display:flex; align-items:stretch;
  background:rgba(0,0,0,.55)}
.copyblock code{font-family:var(--f-lab); font-size:12px; font-weight:500; letter-spacing:.02em;
  padding:14px 16px; flex:1 1 auto; min-width:0; line-height:1.75; color:var(--brass-hi);
  white-space:normal; overflow-wrap:anywhere}
.copyblock button{flex:none; background:transparent; border:0; border-left:1px solid var(--line-2);
  padding:0 18px; cursor:pointer; font-family:var(--f-lab); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass); transition:background .2s,color .2s}
.copyblock button:hover{background:var(--brass); color:var(--ink)}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{border-top:2px solid transparent; border-image:var(--foil) 1}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--f-disp); font-size:1.3rem; line-height:1.28; transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass)}
.faq summary::after{content:''; position:absolute; right:6px; top:50%; width:13px; height:1px;
  background:var(--brass)}
.faq summary::before{content:''; position:absolute; right:12px; top:50%; width:1px; height:13px;
  margin-top:-6px; background:var(--brass); transition:transform .3s var(--ease), opacity .25s}
.faq details[open] summary::before{transform:rotate(90deg); opacity:0}
.faq .ans{padding-bottom:24px; max-width:66ch}
.faq .ans p{color:var(--tx-2); font-size:1.01rem; line-height:1.58}
.faq .ans p+p{margin-top:11px}
.leaf--paper .faq details{border-bottom-color:var(--bone-3)}
.leaf--paper .faq .ans p{color:#4A4034}

/* ── COLOPHON ──────────────────────────────────────────── */
.colophon{background:var(--void); border-top:1px solid var(--line-2); position:relative}
.colophon::before{content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--foil); opacity:.7}
.colophon .wrap{padding-block:clamp(50px,5.6vw,80px) 26px}
.colo__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,46px);
  padding-bottom:36px; border-bottom:1px solid var(--line)}
@media (max-width:880px){ .colo__top{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .colo__top{grid-template-columns:1fr} }
.colo__top h4{font-family:var(--f-lab); font-size:9.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin-bottom:16px}
.colo__top li{margin-bottom:8px; font-size:.99rem; color:var(--tx-2)}
.colo__top li a:hover{color:var(--brass)}
.colo__mark{font-family:var(--f-disp); font-size:1.6rem; line-height:1.15; margin-bottom:13px; color:var(--tx)}
.colo__disc{padding-top:26px; font-size:.87rem; line-height:1.6; color:var(--tx-3); font-style:italic}
.colo__foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--f-lab); font-size:9px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tx-3)}

/* ── REVEAL ────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1!important; transform:none!important; transition:none} }

/* ═══════════════════════════════════════════════════════════════
   SCROLL-SCRUB HERO — the film plays as the visitor scrolls.
   Track scrolls; stage is pinned; video currentTime follows progress.
   ═══════════════════════════════════════════════════════════════ */
.scrub{position:relative; background:#000}
.scrub__track{height:340vh}
.scrub__stage{position:sticky; top:0; height:100svh; overflow:hidden; background:#000}
.scrub__media{position:absolute; inset:0}
.scrub__media video,.scrub__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.08);
}
.scrub__media video{opacity:0; transition:opacity .6s var(--ease)}
.scrub.is-live .scrub__media video{opacity:1}
.scrub.is-live .scrub__media img{opacity:0; transition:opacity .6s var(--ease)}
.scrub__veil{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, #000 3%, rgba(0,0,0,.72) 30%, rgba(0,0,0,.22) 62%, rgba(0,0,0,.62) 100%),
    radial-gradient(80% 60% at 16% 74%, rgba(192,154,78,.13), transparent 70%);
}
.scrub__copy{position:absolute; inset:0; z-index:3; display:flex; align-items:center}
.scrub__copy .wrap{width:100%; position:relative}
.beat{opacity:0; transform:translateY(26px); pointer-events:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.beat:not(:first-child){position:absolute; inset:0}
.beat.is-on{opacity:1; transform:none; pointer-events:auto}
.beat h1,.beat h2{margin-block:20px 22px}
.beat p{max-width:42ch; font-size:clamp(1.08rem,1.5vw,1.34rem); line-height:1.5;
  color:var(--tx-2); font-style:italic}
.beat .btns{margin-top:clamp(24px,3vw,38px)}

/* progress rail + scroll cue */
.scrub__rail{position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background:rgba(255,255,255,.08)}
.scrub__rail i{display:block; height:100%; width:0; background:var(--foil)}
.scrub__cue{position:absolute; z-index:4; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--f-lab); font-size:9px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--tx-3); display:flex; flex-direction:column;
  align-items:center; gap:9px; transition:opacity .5s}
.scrub__cue::after{content:''; width:1px; height:26px;
  background:linear-gradient(180deg,var(--brass),transparent); animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.scrub.is-past .scrub__cue{opacity:0}
@media (prefers-reduced-motion:reduce){ .scrub__cue::after{animation:none} }

/* short screens and no-scrub fallback: one screen, no pinning */
@media (max-width:760px), (prefers-reduced-motion:reduce){
  .scrub__track{height:auto}
  .scrub__stage{position:relative; height:auto; min-height:86svh}
  .scrub__copy{position:relative; padding-block:clamp(70px,18vw,120px)}
  .beat:not(:first-child){position:relative; inset:auto; margin-top:clamp(34px,8vw,56px)}
  .beat{opacity:1; transform:none}
  .scrub__cue{display:none}
}