/* ============================================================
   Fortuna — elite demo base
   One token system, two variants (A cool-product / B warm-elite),
   light + dark themes. Surfaces sit up an elevation scale, never
   at pure black — the fix for "too dark".
   ============================================================ */

/* ---------- DARK (default) · variant A: cool graphite ---------- */
:root{
  --bg:#101013;
  --surf-1:#17171B;
  --surf-2:#1D1D22;
  --surf-3:#26262C;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --fg:#ECECEE;
  --fg-muted:#A6A6AE;
  --fg-faint:#71717B;
  --gold:#C6A265;
  --gold-strong:#D9BC82;
  --gold-dim:#93794A;
  --gold-tint:rgba(198,162,101,.10);
  --gold-line:rgba(198,162,101,.32);
  --ok:#63BE8B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -12px rgba(0,0,0,.6);
  --glow:radial-gradient(80% 60% at 78% -8%, rgba(198,162,101,.09), transparent 60%);

  --display:'Manrope',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --data:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --h1-weight:800;
  --h1-tracking:-.028em;
  --radius:12px;
  --radius-sm:9px;
  --radius-lg:18px;
  --pad-sec:clamp(56px,8vw,104px);
  --maxw:1200px;
}

/* ---------- DARK · variant B: warm espresso, serif headline ---------- */
:root[data-variant="b"]{
  --bg:#141210;
  --surf-1:#1C1915;
  --surf-2:#231F19;
  --surf-3:#2C271F;
  --line:rgba(255,246,230,.08);
  --line-2:rgba(255,246,230,.15);
  --fg:#F4EFE5;
  --fg-muted:#BCB2A2;
  --fg-faint:#8B8173;
  --gold:#BE9A5A;
  --gold-strong:#DAC49A;
  --gold-dim:#8C7345;
  --gold-tint:rgba(190,154,90,.10);
  --gold-line:rgba(190,154,90,.34);
  --glow:radial-gradient(90% 70% at 82% -12%, rgba(190,154,90,.11), transparent 62%);

  --display:'Playfair Display',Georgia,serif;
  --data:'Manrope',system-ui,sans-serif;
  --h1-weight:500;
  --h1-tracking:-.012em;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --pad-sec:clamp(64px,9vw,128px);
  --maxw:1180px;
}

/* ---------- LIGHT (shared warm ivory) ---------- */
:root[data-theme="light"]{
  --bg:#F6F3EE;
  --surf-1:#FFFFFF;
  --surf-2:#FBFAF6;
  --surf-3:#EFEBE3;
  --line:rgba(26,20,12,.11);
  --line-2:rgba(26,20,12,.18);
  --fg:#1B1712;
  --fg-muted:#57514A;
  --fg-faint:#8A8176;
  --gold:#9C7833;
  --gold-strong:#84631F;
  --gold-dim:#B79B62;
  --gold-tint:rgba(156,120,51,.10);
  --gold-line:rgba(156,120,51,.30);
  --shadow:0 1px 2px rgba(60,45,20,.06),0 14px 34px -16px rgba(60,45,20,.22);
  --glow:radial-gradient(80% 60% at 78% -8%, rgba(156,120,51,.07), transparent 60%);
}
:root[data-theme="light"][data-variant="b"]{
  --bg:#F7F2E9;
  --surf-3:#EFE7D8;
  --gold:#93701F;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--glow),var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .3s ease,color .3s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.section{padding-block:var(--pad-sec)}
.section + .section{padding-top:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;color:var(--fg)}
h1{font-weight:var(--h1-weight);letter-spacing:var(--h1-tracking);font-size:clamp(2.3rem, 1.5rem + 3.4vw, 4rem);line-height:1.04}
h2{font-weight:var(--h1-weight);letter-spacing:var(--h1-tracking);font-size:clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem);line-height:1.1}
h3{font-weight:700;font-size:1.16rem;line-height:1.25}
:root[data-variant="b"] h3{font-weight:600}
p{margin:0}
.lede{font-size:clamp(1.08rem, 1rem + .4vw, 1.28rem);color:var(--fg-muted);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--data);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-line)}
.data{font-family:var(--data);font-variant-numeric:tabular-nums}

.sec-head{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background-color .3s ease,border-color .3s ease}
.hdr__in{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:54px;height:54px;border-radius:50%;object-fit:contain}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:'Cinzel',var(--display);font-weight:700;letter-spacing:.16em;font-size:1.02rem}
.brand__sub{font-family:var(--data);font-size:.58rem;letter-spacing:.44em;color:var(--gold);margin-top:4px}

/* transparent chrome over the dark brand hero, solidify on scroll */
.has-brandhero .hdr{background:transparent;border-bottom-color:transparent}
.has-brandhero .hdr.is-solid{background:color-mix(in srgb,var(--bg) 85%,transparent);border-bottom-color:var(--line)}
/* the sticky header sits ABOVE the hero (not over it), so it's transparent
   over the PAGE bg — force light chrome only in dark theme (dark page). */
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .brand__name{color:#F4EFE5}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav a{color:rgba(244,239,229,.84)}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav a:hover{color:#fff}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .ttoggle{border-color:rgba(244,239,229,.28)}
.nav{display:none;gap:26px;margin-left:12px}
.nav a{font-size:.92rem;color:var(--fg-muted);transition:color .15s}
.nav a:hover{color:var(--fg)}
.hdr__act{margin-left:auto;display:flex;align-items:center;gap:12px}
@media(min-width:900px){.nav{display:flex}}

/* theme toggle */
.ttoggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:20px;padding:3px;background:var(--surf-1)}
.ttoggle button{border:0;background:transparent;color:var(--fg-faint);width:30px;height:26px;border-radius:16px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.ttoggle button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.ttoggle button[aria-pressed="true"]{background:var(--gold-tint);color:var(--gold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:.96rem;padding:13px 22px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none}
.btn--gold{background:var(--gold);color:#17130B;border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-strong);border-color:var(--gold-strong)}
:root[data-theme="light"] .btn--gold{color:#fff}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:9px 16px;font-size:.88rem}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:600;font-size:.94rem}
.link svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .15s}
.link:hover svg{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(44px,7vw,88px);padding-bottom:var(--pad-sec)}
.hero__grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media(min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__copy{display:flex;flex-direction:column;gap:22px;max-width:38ch}
.hero h1 em{font-style:normal;color:var(--gold)}
:root[data-variant="b"] .hero h1{position:relative}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* console widget */
.console{border:1px solid var(--line-2);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surf-2),var(--surf-1));box-shadow:var(--shadow);overflow:hidden}
.console__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surf-3)}
.console__dots{display:flex;gap:6px}
.console__dots span{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.console__file{font-family:var(--data);font-size:.76rem;color:var(--fg-faint)}
.console__live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--data);font-size:.72rem;color:var(--gold)}
.console__live .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(99,190,139,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(99,190,139,.5)}70%{box-shadow:0 0 0 7px rgba(99,190,139,0)}100%{box-shadow:0 0 0 0 rgba(99,190,139,0)}}
@media (prefers-reduced-motion:reduce){.console__live .dot{animation:none}}
.console__body{padding:20px}
.console__cap{font-family:var(--data);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:14px}
.rc{display:none;flex-direction:column;gap:11px}
.rc.on{display:flex;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rc__tag{align-self:flex-start;font-family:var(--data);font-size:.72rem;color:var(--gold);background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:20px;padding:4px 11px}
.cline{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cline .k{font-family:var(--data);font-size:.72rem;letter-spacing:.1em;color:var(--fg-faint)}
.cline .v{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:.98rem;color:var(--fg);text-align:right}
.rc__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.rc__total .k{font-size:.82rem;color:var(--fg-muted)}
.rc__total .v{font-family:var(--data);font-weight:700;font-size:1.5rem;color:var(--gold-strong);font-variant-numeric:tabular-nums}
.rc-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.rc-dots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:.2s}
.rc-dots button.on{background:var(--gold);width:22px;border-radius:4px}
.console__note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--fg-faint);line-height:1.5}
.console__note svg{width:15px;height:15px;flex:none;stroke:var(--gold);stroke-width:1.8;fill:none;margin-top:2px}

/* ---------- trust / proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:720px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof__cell{background:var(--bg);padding:24px 22px;display:flex;flex-direction:column;gap:5px}
.proof__n{font-family:var(--data);font-weight:700;font-size:clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem);color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.proof__n em{font-style:normal;color:var(--gold);font-size:.68em}
.proof__l{font-size:.86rem;color:var(--fg-muted)}

/* client logo strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,5vw,52px);opacity:.9}
.logos__lbl{width:100%;text-align:center;font-family:var(--data);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:4px}
.logos span{font-family:var(--data);font-weight:600;letter-spacing:.06em;font-size:1.02rem;color:var(--fg-muted)}

/* ---------- command ---------- */
.cmd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;justify-content:center;padding:18px 24px;border:1px solid var(--gold-line);border-radius:var(--radius);background:var(--gold-tint);margin-bottom:26px}
.cmd-bar .rank{font-family:var(--data);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cmd-bar .who{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.25rem}
.cmd-bar .who em{font-style:normal;color:var(--fg-muted);font-size:.72em;font-weight:400}
.cmd-bar .note{font-size:.88rem;color:var(--fg-muted)}
.cmd-grid{display:grid;gap:16px}
@media(min-width:760px){.cmd-grid{grid-template-columns:1fr auto 1fr;align-items:center}}
.gen{background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.gen__role{font-family:var(--data);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.gen__role em{font-style:normal;color:var(--fg-faint)}
.gen__name{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.5rem;margin:6px 0 4px}
.gen__meta{font-family:var(--data);font-size:.78rem;color:var(--fg-faint)}
.gen__team{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gen__team span{font-size:.82rem;color:var(--fg-muted);background:var(--surf-3);border:1px solid var(--line);border-radius:16px;padding:5px 12px}
.cmd-link{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--gold);font-family:var(--data);font-size:.72rem;text-align:center}
.cmd-link svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ---------- cards / segments ---------- */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .18s,background .18s,transform .18s}
.card:hover{border-color:var(--line-2);background:var(--surf-2);transform:translateY(-3px)}
.card__ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--gold-tint);border:1px solid var(--gold-line);margin-bottom:16px}
.card__ic svg{width:21px;height:21px;stroke:var(--gold);stroke-width:1.8;fill:none}
.card__meta{font-family:var(--data);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);margin:2px 0 10px}
.card p{color:var(--fg-muted);font-size:.94rem}
.card .link{margin-top:auto;padding-top:16px}
.card--flag{border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-tint),var(--surf-1))}
.flag-badge{position:absolute;top:-11px;left:22px;font-family:var(--data);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#17130B;background:var(--gold);padding:4px 11px;border-radius:14px;font-weight:700}
:root[data-theme="light"] .flag-badge{color:#fff}

/* ---------- zones teaser ---------- */
.zones{display:grid;gap:16px}
@media(min-width:680px){.zones{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.zones{grid-template-columns:repeat(3,1fr)}}
.zone{background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:border-color .18s,background .18s}
.zone:hover{border-color:var(--gold-line);background:var(--surf-2)}
.zone__code{font-family:var(--data);font-size:.7rem;letter-spacing:.06em;color:var(--fg-faint)}
.zone h3{margin:8px 0 12px;font-size:1.08rem}
.zone__by{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--fg-muted);padding-top:12px;border-top:1px solid var(--line)}
.zone__by b{color:var(--fg);font-weight:600}
.zone__by .yrs{margin-left:auto;font-family:var(--data);font-size:.74rem;color:var(--gold)}

/* ---------- CTA band ---------- */
.cta{position:relative;text-align:center;border:1px solid var(--gold-line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surf-2),var(--surf-1));padding:clamp(40px,6vw,72px) 24px;display:flex;flex-direction:column;align-items:center;gap:18px;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.cta>*{position:relative}
.cta .hero__ctas{justify-content:center;margin-top:6px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);margin-top:var(--pad-sec);padding-block:44px 28px}
.ft__top{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:820px){.ft__top{grid-template-columns:1.6fr 1fr 1fr}}
.ft p{color:var(--fg-muted);font-size:.92rem;max-width:40ch;margin-top:14px}
.ft h4{font-family:var(--data);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 14px}
.ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft__col a{color:var(--fg-muted);font-size:.92rem}
.ft__col a:hover{color:var(--gold)}
.ft__bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--data);font-size:.78rem;color:var(--fg-faint)}
.ft__mono{font-family:var(--data);font-size:.8rem;color:var(--fg-faint);margin-top:14px}
.tbd{color:var(--gold);border-bottom:1px dotted var(--gold-line)}

/* demo ribbon */
.ribbon{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;padding:9px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--gold-line);font-family:var(--data);font-size:.78rem;color:var(--fg-muted)}
.ribbon b{color:var(--gold)}
.ribbon a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.ribbon a:hover{color:var(--gold);border-color:var(--gold)}
body{padding-bottom:52px}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============================================================
   CREST / EMBLEM FURNITURE  (logo used across the site, never
   hijacking the functional hero — per the objective judge panel)
   ============================================================ */
.hero{overflow:hidden}
.hero .container{position:relative;z-index:2}
.hero__crest{position:absolute;z-index:0;pointer-events:none;top:50%;right:-5%;transform:translateY(-50%);width:min(560px,50vw);opacity:.05}
:root[data-variant="b"] .hero__crest{top:-6%;right:auto;left:50%;transform:translateX(-50%);width:min(640px,86vw);opacity:.045}
:root[data-theme="light"] .hero__crest{opacity:.07}

/* small crest divider between major blocks */
.crest-div{display:flex;align-items:center;justify-content:center;gap:20px;margin-block:6px}
.crest-div::before,.crest-div::after{content:"";height:1px;flex:0 1 140px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.crest-div::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.crest-div img{width:38px;height:38px;opacity:.92;flex:none}

/* signature brand band — the ONE place the full ornate emblem leads */
.emblemband__plaque{position:relative;border:1px solid var(--gold-line);border-radius:var(--radius-lg);background:radial-gradient(130% 150% at 50% -25%,#211a11,#0f0c08 62%);padding:clamp(38px,6vw,72px) 24px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;overflow:hidden}
.emblemband__plaque::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,rgba(198,162,101,.10),transparent 70%);pointer-events:none}
.emblemband__eyebrow{font-family:var(--data);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.emblemband__img{width:min(760px,94%);height:auto;position:relative;z-index:1;filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
.emblemband__motto{font-family:var(--display);font-style:italic;color:var(--gold-strong);font-size:clamp(1.15rem, .95rem + .8vw, 1.6rem);letter-spacing:.01em}
:root[data-variant="a"] .emblemband__motto{font-style:normal;font-weight:700}
.emblemband__sub{max-width:52ch;color:#C9BEA8;font-size:.96rem}

/* footer seal */
.ft__brand{display:flex;align-items:center;gap:18px}
.ft__seal{flex:none;width:116px;height:116px;border-radius:50%;border:1px solid var(--gold-line);display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#1b160e,#0d0b08);overflow:hidden}
.ft__seal img{width:100%;height:100%;object-fit:contain;padding:8px}

/* ============================================================
   ORG TREE  (family-tree chain of command: connectors + two-way
   arrows for effective communication + drop-in photo medallions)
   ============================================================ */
.org{display:flex;flex-direction:column;align-items:center;width:100%}
.node{display:flex;align-items:center;gap:15px;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:15px 20px;transition:border-color .18s,background .18s}
.node:hover{border-color:var(--gold-line);background:var(--surf-2)}
.node__photo{flex:none;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 50% 32%,var(--surf-3),var(--surf-2));border:1.5px solid var(--gold-line);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 3px rgba(0,0,0,.22)}
.node__photo span{font-family:var(--data);font-weight:700;color:var(--gold);font-size:1.05rem}
.node__photo img{width:100%;height:100%;object-fit:cover}
.node__body{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.node__rank{font-family:var(--data);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.node__rank em{font-style:normal;color:var(--fg-faint)}
.node__name{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.1rem;line-height:1.15}
.node__name em{font-style:normal;color:var(--fg-muted);font-size:.74em;font-weight:400}
.node__meta{font-family:var(--data);font-size:.7rem;color:var(--fg-muted)}
.org__node--cmd.node{max-width:440px;border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-tint),var(--surf-1))}
.org__node--cmd .node__photo{width:74px;height:74px}
.org__node--cmd .node__name{font-size:1.28rem}

/* connectors + two-way arrows */
.org__conn{position:relative;display:flex;align-items:center;justify-content:center;height:44px;width:100%}
.org__conn::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:1.5px;background:var(--gold-line)}
.arrow2{position:relative;z-index:1;width:24px;height:24px;stroke:var(--gold);stroke-width:1.7;fill:none;background:var(--bg);border:1px solid var(--gold-line);border-radius:7px;padding:3px}

/* generals row */
.org__generals{display:grid;grid-template-columns:1fr;gap:20px;width:100%}
.branch{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0}
.branch>.node{width:100%;max-width:400px}
.org__cross{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}
.org__cross .arrow2{transform:rotate(90deg)}
.org__cross span{font-family:var(--data);font-size:.66rem;letter-spacing:.06em;color:var(--gold);text-align:center;max-width:120px}

/* officers under a general */
.spokes{display:none;width:100%;max-width:480px;margin:0 auto;overflow:visible}
.spokes path{stroke:var(--gold-line);stroke-width:2;fill:none}
.branch__vconn{display:flex}
.branch__officers{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
.node--sm.node{position:relative;flex-direction:column;text-align:center;align-items:center;gap:9px;padding:16px 12px}
.node--sm .node__photo{width:50px;height:50px}
.node--sm .node__photo span{font-size:.9rem}
.node--sm .node__body{text-align:center;align-items:center}
.node--sm .node__name{font-size:.98rem}
.photo-note{font-family:var(--data);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);opacity:.75}

@media(min-width:600px){
  .branch__officers{grid-template-columns:repeat(3,1fr)}
  .spokes{display:block}
  .branch__vconn{display:none}
}
@media(min-width:820px){
  .org__generals{grid-template-columns:1fr auto 1fr;align-items:start;gap:14px}
  .org__cross{align-self:stretch;justify-content:flex-start;padding-top:26px}
  .org__cross .arrow2{transform:none}
}

/* ============================================================
   BRAND HERO — full-screen "act 1": the full emblem leads, with
   the motto + value + call CTA. Always a dark cinematic ground.
   ============================================================ */
/* full-screen brand hero — always a dark stage (both themes); emblem
   flex-grows to fill the whole viewport height, foot stays compact */
.brandhero{position:relative;height:calc(100svh - 74px);background:#080A0D;overflow:hidden;padding:6px 8px 34px}
.brandhero__emblem{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.brandhero__cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(244,239,229,.55);font-family:var(--data);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.brandhero__cue svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;animation:cuebob 1.8s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.brandhero__cue svg{animation:none}}
@media(max-width:640px){.brandhero{padding:10px 8px 38px}}
/* Act 2 opens with tagline + value line + CTAs */
.pitch{text-align:center;max-width:44ch;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center}
.pitch__tagline{font-family:'Cinzel',var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(.82rem, .72rem + .5vw, 1.08rem);color:var(--gold)}
.pitch h1{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem, 1.2rem + 2vw, 2.7rem);line-height:1.1;color:var(--fg)}
:root[data-variant="a"] .pitch h1{font-weight:700}
.pitch__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}

/* money-proof section wrapper (relocated rate-con console) */
.moneyproof{display:flex;flex-direction:column;align-items:center;gap:28px}
.moneyproof .console{width:100%;max-width:640px}

/* pricing red-flags accordion (native, no JS) */
.rflags{display:flex;flex-direction:column;gap:10px;margin-top:20px}
details.rf{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surf-1);overflow:hidden;transition:border-color .18s}
details.rf[open]{border-color:var(--gold-line)}
details.rf summary{cursor:pointer;list-style:none;padding:15px 18px;display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem}
details.rf summary::-webkit-details-marker{display:none}
details.rf summary svg{flex:none;width:18px;height:18px;stroke:var(--gold);stroke-width:1.8;fill:none}
details.rf summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
details.rf[open] summary::after{transform:rotate(-135deg)}
details.rf .rf__a{padding:0 18px 16px 48px;color:var(--fg-muted);font-size:.9rem}

/* ============================================================
   Multi-page chrome: skip-link, language switcher, active nav,
   contact form  (added for the full elite site)
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#17130B;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.nav a.is-active{color:var(--gold)}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav a.is-active{color:var(--gold-strong)}

.lang{position:relative}
.lang__toggle{display:inline-flex;align-items:center;gap:6px;background:var(--surf-1);border:1px solid var(--line-2);border-radius:20px;padding:7px 11px;cursor:pointer;color:var(--fg);font-family:var(--data);font-weight:600;font-size:.78rem;letter-spacing:.04em}
.lang__chev{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s}
.lang[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}
.lang__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:158px;background:var(--surf-1);border:1px solid var(--line-2);border-radius:12px;padding:6px;list-style:none;margin:0;box-shadow:var(--shadow);z-index:70}
.lang__menu[hidden]{display:none}
.lang__menu li{margin:0}
.lang__menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--fg-muted);font-size:.92rem}
.lang__menu a:hover{background:var(--surf-3);color:var(--fg)}
.lang__menu [aria-selected="true"] a{color:var(--gold);font-weight:600}

.contact-grid{display:grid;gap:26px;margin-top:32px;align-items:start}
@media(min-width:820px){.contact-grid{grid-template-columns:.9fr 1.1fr}}
.contact-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact-actions .btn{min-width:260px;justify-content:center}
.contact-actions .ft__mono{margin-top:4px}
.cform{display:flex;flex-direction:column;gap:12px;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.cinput{width:100%;background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:13px 14px;color:var(--fg);font-family:var(--body);font-size:.98rem;transition:border-color .15s}
.cinput::placeholder{color:var(--fg-faint)}
.cinput:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
textarea.cinput{resize:vertical;min-height:88px}

/* ============================================================
   CRITIQUE-FLEET FIXES (P0/P1/P2)  — 2026-07-19
   ============================================================ */
/* P0: no-JS fallback so .reveal never leaves the page blank */
html:not(.js) .reveal{opacity:1 !important;transform:none !important}

/* token contrast: lift dark microcopy to ~5.2:1 */
:root[data-variant="b"]{--fg-faint:#968C7C}
/* light theme: darker gold-ink for text (gold on cream failed AA) */
:root[data-theme="light"][data-variant="b"]{--gold-ink:#7A5D18}
:root[data-theme="light"]{--gold-ink:#7A5D18}
:root{--gold-ink:var(--gold)}
.eyebrow,.pitch__tagline,.node__rank,.gen__role,.zone__by .yrs,.console__live,.link,.card .link{color:var(--gold-ink)}
:root[data-theme="light"] .link,:root[data-theme="light"] .ft__col a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--gold-ink) 45%,transparent)}
:root[data-theme="light"] .rc__total .v{color:#5E4611}

/* P1: H1 must dominate the repeating h2 scale */
.pitch h1{font-size:clamp(2.4rem, 1.8rem + 2.6vw, 3.4rem);line-height:1.04}

/* P1: pitch tagline is a Manrope eyebrow, not Cinzel (legibility + Cinzel=wordmark-only) */
.pitch__tagline{font-family:var(--data);letter-spacing:.18em;font-weight:600;font-size:.8rem}

/* P1: wordmark + brand sub legibility (Cinzel needs air) */
.brand__name{letter-spacing:.2em}
.brand__sub{letter-spacing:.3em;font-size:.66rem}

/* P1: trust-stats read as one elevated plaque + stop mashing the CTA row */
.proof{margin-top:clamp(28px,4vw,52px);box-shadow:var(--shadow);border-radius:var(--radius)}
.proof__cell{background:var(--surf-1)}
.proof__n em{color:var(--gold-ink)}

/* P1: reassurance strip under primary CTAs */
.reassure{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:14px;font-family:var(--data);font-size:.78rem;color:var(--fg-muted)}
.reassure span{display:inline-flex;align-items:center;gap:6px}
.reassure span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hero-subline{font-family:var(--data);font-size:.86rem;letter-spacing:.02em;color:var(--fg-muted);margin-top:2px}

/* quick win: warm the 'live' dot to gold (strict gold palette) */
.console__live{color:var(--gold-ink)}
.console__live .dot{background:var(--gold);box-shadow:0 0 0 0 rgba(190,154,90,.6);animation:pulseg 2.4s infinite}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(190,154,90,.5)}70%{box-shadow:0 0 0 7px rgba(190,154,90,0)}100%{box-shadow:0 0 0 0 rgba(190,154,90,0)}}

/* P2: equipment strip as gold-hairline chips (was a placeholder-looking text row) */
.logos{gap:12px 12px}
.logos span{border:1px solid var(--gold-line);border-radius:20px;padding:7px 15px;color:var(--fg-muted);font-size:.86rem;background:var(--surf-1)}
.logos__lbl{border:0;background:none;padding:0}

/* P2: org spokes span the full officer-grid width so arrows hit the cards */
.spokes{max-width:none}
/* P2: demote structural gold in the crew (reserve gold for ranks/commander) */
.spokes path{stroke:var(--line-2)}
.arrow2{stroke:var(--fg-faint);border-color:var(--line-2)}
.node{border-color:var(--line)}
.branch__vconn .arrow2,.org__conn .arrow2{stroke:var(--gold-ink)}

/* P2: kill the double gap between final CTA and footer */
.ft{margin-top:0}

/* P2: measure caps so prose/accordion don't run 100+ ch */
.rf__a,.pitch .lede,.sec-head .lede{max-width:66ch}
.sec-head.center .lede{margin-inline:auto}

/* P2: touch targets */
@media(max-width:900px){.ttoggle button{min-width:40px;min-height:38px}}

/* P1: phone hero — stop forcing 100svh of mostly-empty black */
@media(max-width:640px){
  .brandhero{height:auto;min-height:0;padding:28px 8px 24px}
  .brandhero__emblem{position:static;height:auto;width:100%;max-height:56svh}
  .brandhero__cue{display:none}
}

/* P1: mobile nav (hamburger) — full 8-section site needs navigation on phones */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--fg);border-radius:2px;transition:.2s}
.has-brandhero .hdr:not(.is-solid) .nav-toggle span{background:#F4EFE5}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav-toggle span{background:#F4EFE5}
.mobilenav{position:fixed;inset:74px 0 auto 0;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .28s ease;z-index:49;padding:8px 0 14px}
.mobilenav.open{transform:none}
.mobilenav a{display:block;padding:14px 22px;color:var(--fg);font-size:1.05rem;border-bottom:1px solid var(--line-soft)}
.mobilenav a.is-active{color:var(--gold)}
.mobilenav .btn{margin:14px 22px 0;justify-content:center}
@media(max-width:900px){.nav-toggle{display:flex}}

/* mobile sticky action bar (persistent Call) */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--gold-line)}
.actionbar .btn{flex:1;justify-content:center;min-height:48px}
.actionbar .btn--ghost{flex:0 0 auto;min-width:52px}
@media(max-width:820px){.actionbar{display:flex}body{padding-bottom:70px}}

/* ============================================================
   PREMIUM PASS (redesign-skill) — kill AI-slop rounded blocks,
   go editorial/engraved: hairline rules, no floating pills,
   grain texture, warm-tinted shadows.  2026-07-19
   ============================================================ */
/* warm-tinted, softer shadow (was near-black generic) */
:root{--shadow:0 1px 2px rgba(20,12,4,.35), 0 18px 46px -18px rgba(0,0,0,.55)}
:root[data-theme="light"]{--shadow:0 1px 2px rgba(80,60,20,.06), 0 20px 44px -22px rgba(80,60,20,.20)}

/* subtle film grain to break digital flatness (fixed, non-blocking) */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] body::after{opacity:.02;mix-blend-mode:multiply}

/* ---- reassurance: one quiet engraved line, NOT floating chips ---- */
.reassure{gap:0 22px;font-size:.76rem;letter-spacing:.02em;color:var(--fg-faint);margin-top:20px}
.reassure span{position:relative}
.reassure span::before{display:none}
.reassure span+span::before{content:"";display:inline-block;width:1px;height:11px;margin-right:22px;background:var(--gold-line);vertical-align:-1px}

/* ---- equipment: editorial line, not a full-width pill + badge row ---- */
.logos{flex-direction:column;gap:12px}
.logos .logos__lbl{width:auto;border:0;background:none;padding:0;margin:0;font-size:.68rem;letter-spacing:.22em;color:var(--fg-faint)}
.logos span:not(.logos__lbl){border:0;background:none;padding:0 2px;border-radius:0;font-family:var(--display);font-size:1.02rem;letter-spacing:.01em;color:var(--fg-muted)}
.logos__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 18px}
.logos__row span+span::before{content:"·";color:var(--gold-line);margin-right:18px}

/* ---- trust stats: engraved ledger BAND, not a floating shadowed card ---- */
.proof{box-shadow:none;border-radius:0;border-left:0;border-right:0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);background:transparent;gap:1px}
.proof__cell{background:transparent;padding:26px 22px}
.proof__cell + .proof__cell{border-left:1px solid var(--line)}
@media(max-width:720px){.proof__cell:nth-child(3){border-left:0}.proof__cell:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---- radius discipline: soften containers, tighten inner, no pill-everywhere ---- */
.zone,.card,.gen,.cform,.contact-form{border-radius:14px}
.node,.node--sm{border-radius:11px}
.btn{border-radius:10px}

/* ---- cards: drop the border, let spacing + subtle surface carry them ---- */
.card{border-color:transparent;background:var(--surf-1)}
.card:hover{border-color:var(--gold-line);background:var(--surf-2)}
.zone{border-color:transparent}
.zone:hover{border-color:var(--gold-line)}

/* ---- more air (marketing page, let it breathe) ---- */
:root,:root[data-variant="b"]{--pad-sec:clamp(76px,10vw,146px)}
.sec-head{margin-bottom:40px}

/* section rhythm: opt-in quiet hairline divider between major acts */
.section--div > .container::before{content:"";display:block;width:52px;height:1px;background:var(--gold-line);margin:0 auto clamp(40px,6vw,72px)}

/* ---- blog / field notes ---- */
.postlist{display:grid;gap:18px}
@media(min-width:760px){.postlist{grid-template-columns:1fr 1fr}}
.post{display:flex;flex-direction:column;gap:9px;background:var(--surf-1);border:1px solid transparent;border-radius:14px;padding:26px;transition:border-color .18s,background .18s,transform .18s}
.post:hover{border-color:var(--gold-line);background:var(--surf-2);transform:translateY(-3px)}
.post__date{font-family:var(--data);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.post h3{font-size:1.26rem;line-height:1.22}
.post p{color:var(--fg-muted);font-size:.95rem;flex:1}
.post .link{padding-top:6px}
.prose{color:var(--fg-muted);font-size:1.06rem;line-height:1.72}
.prose p{margin:0 0 1.1em;max-width:68ch}
.prose strong{color:var(--fg);font-weight:600}
.reviews-empty{border:1px solid var(--gold-line);border-radius:18px;background:linear-gradient(180deg,var(--gold-tint),transparent);padding:clamp(36px,6vw,64px) 26px}

/* ---- console: show ALL rate-cons in a static grid on desktop (don't hide the sell) ---- */
@media(min-width:820px){
  .moneyproof .console{max-width:780px}
  .rc-slides{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rc-slides .rc{display:flex !important;animation:none;background:var(--surf-2);border:1px solid var(--line);border-radius:12px;padding:16px}
  .rc-dots{display:none}
}
/* ---- de-shout org roles + photo notes (caps overload from the audit) ---- */
.node__rank,.gen__role{text-transform:none;font-variant:all-small-caps;letter-spacing:.03em;font-size:.76rem}

/* ============================================================
   ORG CHART REFINE — de-boxed clean connectors + more air
   ============================================================ */
.arrow2{border:0 !important;background:none !important;padding:0;border-radius:0;width:22px;height:22px;stroke:var(--gold);stroke-width:1.5}
.org{gap:0}
.node{padding:18px 22px;gap:16px}
.org__node--cmd.node{padding:20px 24px}
.org__conn{height:52px}
.org__generals{gap:clamp(18px,2.6vw,38px);align-items:center}
.branch{gap:0}
.branch>.node{margin-bottom:6px}
.branch__officers{gap:16px;margin-top:2px}
.node--sm.node{padding:18px 12px 20px}
.spokes{max-width:none;margin:6px auto 0}
.spokes path{stroke:var(--line-2);stroke-width:1.6}
/* the "cover each other" cross: refined horizontal link with reaching hairlines */
.org__cross{position:relative;gap:10px;padding:0 6px;align-self:center}
.org__cross .arrow2{width:28px;height:28px;stroke:var(--gold)}
.org__cross span{font-size:.68rem;letter-spacing:.06em;color:var(--gold);max-width:96px;line-height:1.3}
.org__cross::before,.org__cross::after{content:"";position:absolute;top:14px;width:clamp(10px,1.4vw,22px);height:1.5px;background:var(--gold-line)}
.org__cross::before{right:100%}
.org__cross::after{left:100%}
/* commander connector: a clean gold hairline, small down chevron only */
.org__conn::before{width:1.5px;background:var(--gold-line)}
@media(max-width:820px){
  .org__cross::before,.org__cross::after{display:none}
  .org__generals{gap:8px}
}

/* ============================================================
   PROSE — blog posts + content pages (how-it-works, why, legal)
   ============================================================ */
.prose h2{font-family:var(--display);font-weight:600;color:var(--fg);font-size:clamp(1.35rem,1.1rem+.9vw,1.7rem);line-height:1.22;letter-spacing:-.01em;margin:1.7em 0 .5em}
.prose h2:first-child,.prose > :first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:600;color:var(--fg);font-size:1.16rem;line-height:1.3;margin:1.4em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.15em;max-width:68ch}
.prose li{margin:0 0 .5em;padding-left:.2em}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .16s}
.prose a:hover{color:var(--gold)}
.prose blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.1em;border-left:2px solid var(--gold-line);color:var(--fg-muted);font-style:italic}
.prose hr{border:0;height:1px;background:var(--gold-line);margin:2.2em 0;max-width:68ch}
.prose h2 + p,.prose h3 + p{margin-top:0}

/* ============================================================
   MOBILE HEADER OVERFLOW FIX — header Call is redundant with the
   sticky bottom actionbar; drop it on phones + tighten the cluster
   so brand + theme + lang + hamburger fit 360px with no side-scroll.
   ============================================================ */
@media(max-width:820px){
  .hdr__act .btn--gold{display:none}
  .hdr__in{gap:12px}
  .hdr__act{gap:8px;margin-left:auto}
}
@media(max-width:400px){
  .hdr__act{gap:6px}
  .ttoggle button{min-width:34px;padding-left:8px;padding-right:8px}
  .brand__mark{width:44px;height:44px}
}
html,body{overflow-x:clip}

/* ============================================================
   FINAL UX-CRITIQUE PASS (2026-07-20) — trust→call polish
   ============================================================ */
/* #1 visible, selectable phone number (footer + contact hero) */
.ft__tel{display:inline-flex;align-items:center;gap:9px;margin:4px 0 10px;font-family:var(--data);font-size:1.16rem;letter-spacing:.02em;color:var(--gold-ink);font-weight:600}
.ft__tel:hover{color:var(--gold)}
.ft__tel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.phone-lg{display:inline-flex;align-self:flex-start;font-family:var(--data);font-size:clamp(1.5rem,1.2rem+1.4vw,2rem);font-weight:600;letter-spacing:.01em;color:var(--gold-ink);margin-bottom:6px}
.phone-lg:hover{color:var(--gold)}

/* #7 persistent form labels (was placeholder-only) */
.cfield{display:block;margin-bottom:14px}
.clabel{display:block;font-size:.82rem;letter-spacing:.02em;color:var(--fg-muted);margin:0 0 6px 2px}
.cfield .cinput{margin-bottom:0;width:100%}

/* #9 console small labels: fg-faint fails AA on the lighter bar — bump to fg-muted */
.console__file,.console__cap,.console__note,.cline .k{color:var(--fg-muted)}

/* #15/#16 touch targets >= 44px (older audience, primary controls) */
@media(max-width:900px){
  .nav-toggle{min-width:44px;min-height:44px;padding:11px;justify-content:center}
  .lang__toggle{min-height:44px;padding-top:11px;padding-bottom:11px}
  .ttoggle button{min-height:44px}
}

/* #4 mobile header: brand wordmark was overlapping the theme toggle on <=390px.
   On very narrow phones drop the theme toggle (OS prefers-color-scheme still themes
   the page) so brand + language switch + hamburger get their full width, no overlap. */
@media(max-width:430px){
  .hdr__act .ttoggle{display:none}
  .brand__name{font-size:1.02rem;letter-spacing:.13em}
  .hdr__in{gap:10px}
  .hdr__act{gap:8px}
}

/* #19 footer links: roomier tap rows on phones */
@media(max-width:640px){
  .ft__col a{display:inline-block;padding-block:7px}
}

/* #18 rate-console dots: keep the 7px visual dot, expand the hit area to >=24px */
.rc-dots button{position:relative}
.rc-dots button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px}

/* P3 polish: prose headings share the body measure (were full-width vs p{max-width:68ch}) */
.prose h2,.prose h3{max-width:68ch}

/* ============================================================
   ORG CHART v2 (2026-07-20) — clean hairline tree, no scattered
   chevrons. Cards are NOT links, so no hover affordance.
   Commander → bus → generals → bus → officers. One ↔ = "cover".
   ============================================================ */
/* cards are informational, not clickable → kill the misleading hover lift */
.node:hover,.node--sm:hover{border-color:var(--line);background:var(--surf-1)}
.org__node--cmd.node,.org__node--cmd.node:hover{border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-tint),var(--surf-1))}
.node,.node--sm{cursor:default;transition:none}

/* trunk under the commander */
.org__trunk{width:1.5px;height:34px;background:var(--gold-line);margin:0 auto}

/* --- mobile (stacked): simple vertical connectors between cards --- */
.branch__vconn{width:1.5px;height:26px;background:var(--gold-line);margin:6px auto}
.org__cross-h{display:inline-flex;align-items:center;gap:8px}
.org__cross-ln{width:20px;height:1.5px;background:var(--gold-line);display:inline-block}
.org__cross .arrow2{width:26px;height:26px;stroke:var(--gold);fill:none;border:0;background:none;transform:none}
.org__cross-cap{font-family:var(--data);font-size:.66rem;letter-spacing:.05em;color:var(--gold);text-align:center;line-height:1.3}
.org__cross{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 0}

/* --- desktop tree (>=820px): buses + drops --- */
@media(min-width:820px){
  .org__generals{position:relative;padding-top:34px;align-items:start !important}
  /* horizontal bus joining the two general drops */
  .org__generals::before{content:"";position:absolute;top:0;left:25%;right:25%;height:1.5px;background:var(--gold-line)}
  .branch{position:relative}
  /* vertical drop from bus down to each general card */
  .branch::before{content:"";position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:1.5px;height:34px;background:var(--gold-line)}
  /* general → officers */
  .branch__vconn{display:block;height:26px;margin:0 auto}
  .branch__officers{position:relative;padding-top:26px}
  .branch__officers::before{content:"";position:absolute;top:0;left:16.6%;right:16.6%;height:1.5px;background:var(--gold-line)}
  .node--sm{position:relative}
  .node--sm::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:1.5px;height:26px;background:var(--gold-line)}
  /* cover-each-other sits centered in the middle column, at mid height */
  .org__cross{align-self:center;padding:0}
  .org__cross-ln{width:clamp(14px,2vw,30px)}
  /* neutralize older appended overrides that re-added chevrons/spacing */
  .org__cross::before,.org__cross::after{display:none}
}
.spokes{display:none !important}

/* audit quick-wins (2026-07-20): hero phone, honeypot, thank-you */
.phone-lg{display:inline-flex;align-items:center;gap:9px}
.phone-lg svg{width:.86em;height:.86em;fill:none;stroke:currentColor;stroke-width:1.7}
.phone-lg--hero{justify-content:center;align-self:center;margin:2px auto 2px;font-size:clamp(1.35rem,1.1rem+1.1vw,1.7rem)}
.pitch--center .phone-lg--hero,.pitch .phone-lg--hero{align-self:center}
/* Web3Forms honeypot: hidden from humans + AT, catches bots */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ============================================================
   ORG CHART v3 (2026-07-20) — two-way GOLD arrows between the
   3 leadership nodes (commander <-> each general, general <-> general),
   drawn by JS from live card positions. Officer hairline tree + the
   "cover each other" cross stay as-is. Desktop only.
   ============================================================ */
.org{position:relative}
.org > .node,.org > .org__node--cmd,.org__generals{position:relative;z-index:1}
.org__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.org__wires .ow-g path{fill:none;stroke:var(--gold-line);stroke-width:2.4;stroke-linecap:round;opacity:.9}
.org__wires marker path{fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:820px){
  /* the diagonal arrows replace the old commander->generals hairline bus + drops */
  .org__generals::before{display:none}
  .branch::before{display:none}
  .org__generals{padding-top:64px}   /* room for the arrows above the generals */
}
@media(max-width:819px){ .org__wires{display:none} }   /* stacked layout uses the vertical hairlines */

/* ============================================================
   TRUST BLOCK (2026-07-20) — guarantee-led, no-DOT trust signals.
   Editorial: engraved guarantee statement + hairline trust points.
   ============================================================ */
.trust__offer{max-width:820px;margin:6px auto 0;text-align:center;border:0;padding:26px 8px 4px;position:relative;
  font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,1.05rem+1.1vw,2rem);line-height:1.32;color:var(--fg)}
.trust__offer::before{content:"";display:block;width:46px;height:1px;background:var(--gold-line);margin:0 auto 22px}
.trust__grid{display:grid;grid-template-columns:1fr;gap:0;max-width:960px;margin:clamp(34px,5vw,54px) auto 0}
@media(min-width:760px){.trust__grid{grid-template-columns:repeat(3,1fr)}}
.trust__pt{padding:22px 26px;border-top:1px solid var(--line)}
@media(min-width:760px){.trust__pt{border-top:0;border-left:1px solid var(--line)}.trust__pt:first-child{border-left:0}}
.trust__pt h3{font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--gold-ink);margin:0 0 8px}
.trust__pt p{color:var(--fg-muted);font-size:.96rem;line-height:1.6;margin:0}

/* ============================================================
   VALUE STACK (2026-07-20) — Hormozi-style offer clarity, honest.
   Capstone item = dedicated lanes / priority brokers (earned access).
   ============================================================ */
.stack{list-style:none;padding:0;margin:8px auto 0;display:grid;gap:15px;max-width:720px}
.stack li{display:flex;gap:13px;align-items:flex-start;line-height:1.55}
.stack li svg{width:21px;height:21px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stack li span{color:var(--fg-muted);font-size:1.04rem}
.stack__hero{border-top:1px solid var(--gold-line);padding-top:17px;margin-top:6px}
.stack__hero span{color:var(--fg);font-weight:500}
.stack__note{max-width:660px;margin:clamp(26px,4vw,40px) auto 0;text-align:center;color:var(--fg-faint);font-size:.98rem;line-height:1.62}

/* ============================================================
   NAV: Solutions dropdown (desktop) + mobile sub-links (2026-07-20)
   ============================================================ */
.nav__dd{position:relative;display:flex;align-items:center}
.nav__ddbtn{background:none;border:0;color:var(--fg-muted);font:inherit;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;transition:color .15s}
.nav__ddbtn:hover,.nav__dd:hover .nav__ddbtn,.nav__ddbtn.is-active{color:var(--fg)}
.nav__ddbtn.is-active{color:var(--gold)}
.nav__ddbtn .lang__chev{width:13px;height:13px;transition:transform .18s}
.nav__dd:hover .nav__ddbtn .lang__chev,.nav__dd[aria-expanded="true"] .nav__ddbtn .lang__chev{transform:rotate(180deg)}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav__ddbtn{color:rgba(244,239,229,.84)}
.ddmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(2px);min-width:236px;
  background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line-2);
  border-radius:13px;padding:8px;display:grid;gap:1px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;box-shadow:var(--shadow);z-index:60}
.nav__dd:hover .ddmenu,.nav__dd[aria-expanded="true"] .ddmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px)}
.ddmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}   /* hover bridge */
.ddmenu a{display:block;padding:10px 13px;border-radius:8px;color:var(--fg-muted);font-size:.92rem;white-space:nowrap;transition:background .14s,color .14s}
.ddmenu a:hover{background:var(--gold-tint);color:var(--fg)}
.ddmenu__all{color:var(--gold-ink);border-top:1px solid var(--line);margin-top:5px;padding-top:12px;font-weight:600}
/* mobile: indented segment sub-links under Solutions */
.mobilenav__sub{padding-left:38px !important;font-size:.98rem !important;color:var(--fg-muted) !important}
.mobilenav__sub::before{content:"—";margin-right:9px;color:var(--gold-line)}

/* guide (glossary) lead definition = snippet target, set apart */
.guide__def{font-size:clamp(1.1rem,1rem+.55vw,1.32rem);line-height:1.56;color:var(--fg);border-left:2px solid var(--gold-line);padding-left:20px;margin:0}

/* value-stack capstone: gold crown marks the premium / earned-access tier */
.stack__crown{width:25px;height:25px;flex-shrink:0;margin-top:1px;object-fit:contain}

/* ============================================================
   VS TABLE (2026-07-20) — "typical dispatcher" vs Fortuna.
   Contrasts PRACTICES only; names no competitor.
   ============================================================ */
.vs{margin:8px auto 0;max-width:860px}
.vs__head{display:none;grid-template-columns:1fr 1fr;gap:26px;padding:0 4px 12px;
  font-family:var(--data);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.vs__uslabel{color:var(--gold)}
.vs__row{display:grid;grid-template-columns:1fr;gap:10px;padding:20px 4px;border-top:1px solid var(--line)}
.vs__row:first-of-type{border-top:1px solid var(--gold-line)}
.vs__them{color:var(--fg-faint);font-size:.98rem;line-height:1.55;margin:0;text-decoration:line-through;text-decoration-color:rgba(190,154,90,.35);text-decoration-thickness:1px}
.vs__us{color:var(--fg);font-size:1.02rem;line-height:1.55;margin:0;display:flex;gap:11px;align-items:flex-start}
.vs__us svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:720px){
  .vs__head{display:grid}
  .vs__row{grid-template-columns:1fr 1fr;gap:26px;align-items:start}
}

/* ============================================================
   FORTUNA · BLOCK SYSTEM v1 — Phase 0: tokens + bug fixes
   Appended 2026-07-22. Tokens verified against the variant-b
   :root block (base.css:41-67) and the --pad-sec override (:588).
   Appended last, so equal-specificity rules win by source order.
   ============================================================ */

:root,:root[data-variant="b"]{
  /* spacing scale — retires the ad-hoc gap/padding values */
  --s-1:6px;  --s-2:10px; --s-3:16px; --s-4:24px; --s-5:34px; --s-6:52px;
  --s-7:clamp(56px,7vw,88px);          /* between chapters; --pad-sec = between acts */
  /* measure */
  --measure:68ch;
  --measure-lede:60ch;
  --measure-wide:920px;
  /* chrome */
  --hdr-h:74px;                        /* .hdr__in height, base.css:133 */
  /* FIX: referenced at base.css:532 (.mobilenav a) but never defined anywhere */
  --line-soft:var(--line);
}

/* FIX: no scroll-margin existed anywhere, so the sticky 74px header
   covered the target of every in-page anchor. */
[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}

/* the ONE prose container width — retires the hand-typed inline max-widths.
   Written as .container.container--prose so source order can never break it. */
.container.container--prose{max-width:760px}
.container.container--wide{max-width:var(--measure-wide)}

/* FIX: the reduced-motion guard for the console dot exists at base.css:193,
   but the animation is re-declared at :492 with equal specificity and wins on
   source order — so the dot kept pulsing for users who asked it not to. */
@media (prefers-reduced-motion:reduce){
  :root .console__live .dot{animation:none}
}

/* FIX: italic is requested twice but no italic face is shipped
   (Playfair/Cinzel/Manrope are upright only), so both render a synthetic
   oblique — the classic "faux italic" tell. */
.prose blockquote{font-style:normal}
.emblemband__motto{font-style:normal}

/* ---- ground-tone bands -------------------------------------
   .section + .section{padding-top:0} is base.css:114 (0,2,0);
   these are written at 0,3,0 so a band always keeps its own air. */
.section--band{background:var(--surf-1);border-block:1px solid var(--line)}
.section + .section.section--band{padding-top:var(--pad-sec)}
.section.section--band + .section{padding-top:var(--pad-sec)}

/* ---- BEAT — the short prose unit (under ~120 words) ---------
   Hairline-separated sub-units inside ONE section. Three 90-word beats
   read as three ledger entries; three 90-word "chapters" read as the
   wall of text we are removing. */
.beats{display:flex;flex-direction:column}
.beat{padding-block:var(--s-6)}
.beat:first-child{padding-top:0}
.beat:last-child{padding-bottom:0}
.beat + .beat{border-top:1px solid var(--line)}
.beat__t{font-family:var(--display);font-weight:600;color:var(--fg);
  font-size:clamp(1.28rem,1.06rem+.82vw,1.58rem);line-height:1.22;letter-spacing:-.01em;
  margin:0 0 var(--s-3);padding-top:var(--s-3);position:relative}
.beat__t::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--gold-line)}
.beat__b > :last-child{margin-bottom:0}

/* ---- CHAPTER — the long prose unit (120+ words) ------------- */
.chapter__t{font-family:var(--display);font-weight:600;color:var(--fg);
  font-size:clamp(1.46rem,1.18rem+1.05vw,1.94rem);line-height:1.18;letter-spacing:-.012em;
  margin:0 0 var(--s-4);padding-top:var(--s-4);position:relative}
.chapter__t::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--gold-line)}
.chapter__b > :last-child{margin-bottom:0}

/* ---- CHECKS — the list every guide already carries ----------
   Deliberately NOT a card: no border box, no radius, no shadow.
   Hairline + whitespace + the existing check icon. */
.checks__l{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3);max-width:68ch}
.checks__l li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;
  margin:0;padding:0;color:var(--fg-muted);font-size:1.06rem;line-height:1.6}
.checks__l li svg{width:17px;height:17px;margin-top:.3em;fill:none;stroke:var(--gold);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.checks__l li strong{color:var(--fg);font-weight:600}
.checks .prose > :last-child{margin-bottom:0}

/* ---- section--head ------------------------------------------
   The page head used to carry inline padding-bottom:0. Combined with
   base.css:114 (.section + .section{padding-top:0}) that left the first
   content block flush against the lede with zero air between them.
   A real bottom pad on the head restores the gap without re-introducing
   top padding on every following block. */
.section--head{padding-bottom:var(--s-6)}

/* ---- FIG — editorial imagery --------------------------------
   Deliberately frameless: no border, no radius, no shadow. The image
   sits on the ground with a single gold hairline under it, the same
   hairline vocabulary as .beat__t. A vignette blends the bottom edge
   into the near-black page so the photo does not read as a pasted
   rectangle — the tell that separates a document from a designed page. */
.section--fig{padding-block:calc(var(--pad-sec) * .62)}
.fig{margin:0;position:relative}
.fig img{display:block;width:100%;height:auto;object-fit:cover;
  filter:saturate(.88) contrast(1.04) brightness(.92)}
.fig::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.fig figcaption{margin-top:var(--s-3);font-family:var(--data);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
:root[data-theme="light"] .fig img{filter:saturate(.9) contrast(1.02) brightness(.96)}
:root[data-theme="light"] .fig::after{height:22%}

/* ---- PAGEHEAD — one axis, one measure ----------------------
   The defect this replaces: .pitch centres the h1 + lede at 44ch while the
   prose beneath runs left-aligned at 760px. Two alignments and two measures
   on the same page is what reads as "crooked". This head shares the body's
   left axis and the body's container, so the eye follows a single edge from
   the eyebrow all the way to the footer. */
.pagehead{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--s-3)}
.pagehead__back{margin-bottom:var(--s-2)}
.pagehead__h{font-family:var(--display);font-weight:500;color:var(--fg);
  font-size:clamp(2rem,1.5rem+2.2vw,3.1rem);line-height:1.06;letter-spacing:-.015em;
  margin:0;max-width:18ch;text-wrap:balance}
.pagehead__lede{margin:0;max-width:58ch;color:var(--fg-muted);
  font-size:clamp(1.08rem,1rem+.4vw,1.24rem);line-height:1.62}
.phone-lg--head{align-self:flex-start;margin:var(--s-2) 0 0;
  font-size:clamp(1.3rem,1.1rem+.9vw,1.62rem)}
@media(max-width:520px){
  .pagehead__h{max-width:none}
}

/* ---- PHERO — the full-bleed photographic hero ---------------
   The photograph is the stage, not an illustration parked inside the article.
   Fixed height + object-fit:cover on an absolutely-positioned img is the crop-safe
   recipe (an auto-sized replaced element inside a flex/grid track grows to its
   intrinsic height and overflows — that bug cost us a round trip before). */
.phero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--bg);margin-top:calc(var(--hdr-h) * -1);  /* transparent header sits over it */
  /* Full viewport. cover() will crop the 16:9 frame — that is why every scene
     carries its own object-position (FOCUS in build_elite.py) instead of a blind
     "center", and why phones get a separately-composed portrait file. */
  min-height:100svh}
.phero__pic{position:absolute;inset:0;display:block}
.phero__img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;filter:saturate(.94) contrast(1.03)}
/* Two scrims, not one flat wash: a light veil at the top so the nav stays legible,
   and a deep well at the bottom that the type sits in. A single even overlay would
   turn an already near-black photograph into mud. */
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(8,10,13,.78) 0,rgba(8,10,13,.30) 16%,rgba(8,10,13,0) 34%),
    linear-gradient(to top,var(--bg) 0,rgba(8,10,13,.93) 13%,rgba(8,10,13,.80) 26%,rgba(8,10,13,.46) 43%,rgba(8,10,13,0) 68%)}
.phero__in{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;gap:var(--s-3);
  padding-block:clamp(46px,6vw,86px) clamp(52px,7vw,92px)}
.phero__h{font-family:var(--display);font-weight:500;color:#F6F2E9;margin:0;
  font-size:clamp(2.9rem,2rem+4.1vw,5.4rem);line-height:.99;letter-spacing:-.025em;
  max-width:15ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.phero__lede{margin:0;max-width:52ch;color:rgba(246,242,233,.86);
  font-size:clamp(1.08rem,1rem+.42vw,1.26rem);line-height:1.6;
  text-shadow:0 1px 18px rgba(0,0,0,.55)}
.phero .eyebrow{color:var(--gold-strong)}
.phero .phone-lg--head{color:#EBC98A;margin-top:var(--s-2)}
.phero .phone-lg--head:hover{color:#fff}
/* The hero is a dark stage in BOTH themes — gold and photographs both die on
   cream, and the nav sits on the image regardless of the reader's theme. */
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .brand__name,
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .nav a,
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .nav__ddbtn{color:rgba(246,242,233,.88)}
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .nav a:hover{color:#fff}
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .ttoggle{border-color:rgba(246,242,233,.3)}
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .nav-toggle span{background:#F6F2E9}
/* In light theme the scrim must NOT fade to cream: a light gradient laid over a
   near-black photograph turns the bottom of the frame into grey mud. The hero
   stays a dark band and meets the cream page on a clean edge instead. */
:root[data-theme="light"] .phero::after{
  background:
    linear-gradient(to bottom,rgba(8,10,13,.78) 0,rgba(8,10,13,.30) 16%,rgba(8,10,13,0) 34%),
    linear-gradient(to top,rgba(8,10,13,.93) 0,rgba(8,10,13,.80) 18%,rgba(8,10,13,.46) 42%,rgba(8,10,13,0) 68%)}
:root[data-theme="light"] .phero{border-bottom:1px solid var(--line)}
/* Portrait viewport + landscape photograph = a side crop no focal point can undo.
   A full-height slice shows mostly empty sky with the subject sliced off the
   bottom, so on phones the hero becomes a shorter band focused on the subject. */
@media(max-width:640px){
  .phero{min-height:clamp(560px,84svh,780px)}
  .phero__img{object-position:center 50%}   /* the mobile file is already cropped to its subject */
  .phero__lede{font-size:1.02rem;max-width:none}
  .phero__h{font-size:clamp(2.2rem,1.6rem+3vw,3rem)}
}
@media(max-height:560px) and (min-width:900px){    /* wide-and-short windows */
  .phero{min-height:520px}
}
@media (prefers-reduced-motion:reduce){.phero__img{filter:none}}


/* ---- PHERO additions: back-link, kicker, scroll cue ---------
   The type block is anchored to the lower-left of the frame and rises on load,
   so the photograph reads first and the words arrive a beat later. */
.phero__back{color:rgba(246,242,233,.72);margin-bottom:var(--s-2)}
.phero__back:hover{color:#fff}
.phero__kicker{margin:0;max-width:56ch;color:rgba(246,242,233,.7);
  font-size:1rem;line-height:1.55;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.phero__in > *{animation:pheroRise .7s cubic-bezier(.2,.7,.3,1) both}
.phero__in > :nth-child(2){animation-delay:.06s}
.phero__in > :nth-child(3){animation-delay:.12s}
.phero__in > :nth-child(4){animation-delay:.18s}
.phero__in > :nth-child(5){animation-delay:.24s}
@keyframes pheroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* a hairline that walks down the frame — the only motion in the hero */
.phero__cue{position:absolute;left:50%;bottom:22px;width:1px;height:46px;
  background:linear-gradient(to bottom,transparent,var(--gold-line));overflow:hidden}
.phero__cue::after{content:"";position:absolute;inset:0;background:var(--gold-strong);
  animation:cueRun 2.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  .phero__in > *{animation:none}
  .phero__cue::after{animation:none;opacity:.5}
}
@media(max-width:700px){
  .phero__h{max-width:none}
  .phero__cue{display:none}
}
/* short-and-wide windows: a 100svh hero would be a letterbox slit */
@media(max-height:620px) and (min-width:900px){
  .phero{min-height:560px}
}