/* Direction B · Midnight luxury (design study, 22 Oct 2026)
   Navy-dominant, private-bank gravitas: midnight hero with the drift motion, ivory reading rooms,
   champagne-gold hairlines used sparingly. Cormorant Garamond display + Jost text (both OFL, self-hosted).
   Loads after styles.css; overrides styling only, never content. */
:root{
  --midnight:#0b1626; --navy:#1b2a41; --navy-d:#0f1b2d; --ivory:#f3eee4; --gold:#c9a46a; --gold-d:#7d5828;
  --paper:#f3eee4; --stone:#e9e2d4; --white:#fbf8f2;
  --ink:#0f1b2d; --ink-2:#1b2a41; --text:#1f2733; --mute:#4b5463; --rule:#cbbda3; --rule-2:#e0d6c3;
  --accent:#7d5828; --accent-soft:#efe3cf; --bronze-l:#c9a46a;
  --serif:'Cormorant Garamond','CG Fallback','CG Fallback T','Cormorant',Garamond,Georgia,serif; --sans:'Jost','Jost Fallback','Futura','Century Gothic',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1); --ease-out:cubic-bezier(.16,1,.3,1); --w:1260px;
}
/* dark rooms: same components, swapped tokens */
.hdr,.hero,.phero,.sec.alt,.band,.ftr,.preview{
  --paper:#0b1626; --stone:#13223a; --white:#14243b;
  --ink:#f3ece0; --ink-2:#e7dcc8; --text:#d6dbe2; --mute:#a7b1bf; --rule:rgba(201,164,106,.34); --rule-2:rgba(243,236,224,.12);
  --accent:#c9a46a; --accent-soft:rgba(201,164,106,.14);
  color:var(--text);
}
::selection{background:var(--gold);color:var(--midnight)}
body{font:400 1.06rem/1.72 var(--sans);letter-spacing:.005em;background:var(--ivory)}
body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;background:url(img/grain.png) repeat;background-size:180px;opacity:.05;mix-blend-mode:multiply}
@media print{body::after{display:none}}
:focus-visible{outline-color:var(--accent)}

/* type */
h1,h2,h3{font-family:var(--serif);font-variation-settings:normal;letter-spacing:-.005em}
h1{font-weight:500;font-size:clamp(2.7rem,5.6vw,4.8rem);line-height:1.02}
h2{font-weight:500;font-size:clamp(2.05rem,3.6vw,3.3rem);line-height:1.06}
h3{font-weight:600;font-size:1.48rem;line-height:1.22}
.serif-i{font-weight:500;font-style:italic}
.eyebrow,.k,.fk,.fh,.glance h2{font:500 .7rem/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase}
.eyebrow{color:var(--accent);display:flex;align-items:center;gap:16px}
.eyebrow::before{content:"";width:40px;height:1px;background:currentColor;flex:none}
.lede{font-size:clamp(1.1rem,1.4vw,1.24rem);line-height:1.7;font-weight:400}
.mute{color:var(--mute)}

/* header */
.preview{background:#08111e;color:#cfd5de;font-size:.74rem;letter-spacing:.12em}
.hdr{background:rgba(11,22,38,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,164,106,.22)}
.hdr.scrolled{border-bottom-color:rgba(201,164,106,.4)}
.hdr .wrap{min-height:86px}
.brand,.brand:hover{color:var(--ivory)}
.brand svg{color:var(--gold)}
.brand b{font:600 1.55rem/1 var(--serif);letter-spacing:.06em;text-transform:uppercase}
.brand small{font:400 .6rem/1.4 var(--sans);letter-spacing:.3em;color:#a7b1bf;margin-top:6px}
.nav{font-size:.9rem;letter-spacing:.03em}
.nav a:not(.btn){color:#d6dbe2;border-bottom:0;background:linear-gradient(var(--gold),var(--gold)) 50% 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out),color .3s}
.nav a:not(.btn):hover,.nav a[aria-current="page"]:not(.btn){color:#fff;background-size:100% 1px}
@media (max-width:1180px){.nav{background:var(--midnight);border-bottom:1px solid rgba(201,164,106,.3)} .nav a:not(.btn){background:none;border-bottom:1px solid rgba(243,236,224,.1)} .menu-btn{color:var(--ivory);border-color:rgba(201,164,106,.5)}}

/* buttons */
.btn{border-radius:0;font:500 .74rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:17px 30px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease-out);z-index:-1}
.btn:hover,a:hover>.btn{color:var(--midnight);border-color:var(--gold);background:var(--ink)}
.btn:hover::before,a:hover>.btn::before{transform:scaleX(1);transform-origin:left}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:transparent}
.btn.sm{padding:12px 20px;font-size:.68rem}
.hdr .btn.sm{background:transparent;color:var(--ivory);border-color:rgba(201,164,106,.6)}
.btn.light{background:var(--gold);color:var(--midnight);border-color:var(--gold)}
.btn.light::before{background:var(--ivory)}
.btn.light:hover{background:var(--gold);color:var(--midnight);border-color:var(--ivory)}
.btn.ghost.light{background:transparent;color:var(--ivory);border-color:rgba(243,236,224,.5)}
.btn.ghost.light::before{background:var(--ivory)}
.btn.ghost.light:hover{color:var(--midnight);background:transparent}
.link{color:var(--ink);text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;padding-bottom:3px;letter-spacing:.02em;transition:background-size .5s var(--ease-out)}
.link:hover{background-size:0 1px;background-position:100% 100%;color:var(--accent)}

/* hero: full-bleed midnight, framed like an engraved certificate, motion behind */
.hero{position:relative;background:radial-gradient(120% 90% at 78% 0%,#1d2f4b 0%,#0f1d33 38%,#0b1626 72%);min-height:min(92vh,980px);display:flex;align-items:center;padding:clamp(80px,10vw,150px) 0 clamp(64px,8vw,110px);border-bottom:0}
.hero::after{content:"";position:absolute;inset:clamp(10px,1.6vw,22px);border:1px solid rgba(201,164,106,.24);pointer-events:none}
.hero>.wrap{width:100%;position:relative}
.hero h1{font-size:clamp(3rem,7.4vw,6.6rem);font-weight:500;line-height:.98;letter-spacing:-.012em;color:var(--ivory);margin-bottom:.4em}
.hero h1 em{color:var(--gold)}
.hero .lede{color:#c7cfda;max-width:56ch}
.hero .eyebrow{color:var(--gold)}
.fork{margin-top:clamp(44px,6vw,80px);gap:1px;background:rgba(201,164,106,.28);border:1px solid rgba(201,164,106,.28)}
.fork-card{background:rgba(11,22,38,.82);border:0;border-top:0;padding:clamp(28px,3.5vw,48px);transition:background .5s var(--ease)}
.fork-card:hover{background:rgba(27,42,65,.92);border:0}
.fork-card .k{color:var(--gold)}
.fork-card h2{color:var(--ivory);font-size:clamp(2rem,3.2vw,2.8rem);font-style:italic;font-weight:500}
.fork-card p{color:#b9c2ce}
.fork-card .btn{background:transparent;color:var(--ivory);border-color:rgba(201,164,106,.6)}
.fork-card:hover .btn{background:transparent;color:var(--midnight);border-color:var(--gold)}

/* page heroes: midnight, shorter */
.phero{background:radial-gradient(110% 120% at 85% 0%,#1b2c47 0%,#0b1626 65%);border-bottom:0;padding:clamp(56px,8vw,120px) 0 clamp(52px,6vw,88px);position:relative}
.phero h1{color:var(--ivory)}
.phero h1 em,.phero .accent{color:var(--gold)}
.phero .lede{color:#c7cfda}
.crumb ol{color:#a7b1bf;letter-spacing:.08em;font-size:.78rem;text-transform:uppercase}
.crumb a{color:#c7cfda}
.crumb li+li::before{color:var(--gold)}
.phero .btn:not(.ghost){background:var(--gold);color:var(--midnight);border-color:var(--gold)}
.phero .btn:not(.ghost)::before{background:var(--ivory)}
.phero .btn.ghost{color:var(--ivory);border-color:rgba(243,236,224,.5)}
.phero .btn.ghost::before{background:var(--ivory)}

/* sections */
.sec{padding:clamp(76px,9vw,136px) 0}
.sec.alt{background:var(--navy)}
.sec.alt h2,.sec.alt h3{color:var(--ivory)}
.sec+.sec:not(.alt):not(.band){border-top:1px solid var(--rule-2)}
.sec-head h2{max-width:18ch}
.sec-head .lede{color:var(--mute)}
.tile{border-top:1px solid var(--rule);padding-top:26px;position:relative}
.tile::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:1px;background:var(--accent);transition:width .8s var(--ease-out)}
.tile:hover::before{width:100%}
.tile .k{color:var(--accent)}
.pindex{border-top:1px solid var(--ink)}
.pindex .n{font:italic 500 1.3rem/1.2 var(--serif);color:var(--accent)}
.pindex b{font:600 1.42rem/1.2 var(--serif);transition:color .3s,letter-spacing .5s var(--ease-out)}
.pindex a:hover b{text-decoration:none;color:var(--accent)}
.pindex .pt>span{font-size:.94rem}
.keyp{border-radius:0;letter-spacing:.2em;font-family:var(--sans);font-weight:500}
.steps{border-top-color:var(--rule)}
.steps li .k{font:italic 500 1.25rem/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--accent)}
.steps li h3{font-size:1.55rem}
.figures>div{border-top:1px solid var(--rule)}
.fig{font:400 clamp(3.2rem,6vw,5rem)/1 var(--serif);letter-spacing:-.01em}
.sec.alt .fig{color:var(--gold)}
.panel{border:1px solid var(--rule-2);border-top:2px solid var(--gold);background:var(--white)}
.panel h2{font-size:clamp(1.8rem,2.8vw,2.5rem)}
.ph{border-color:var(--rule)}
.note{border-left-color:var(--accent)}
.ticks li::before{background:var(--accent)}
.faq summary h3{font-size:1.35rem}
.faq summary::after{color:var(--accent)}
.sec.alt .tbd,.ftr .tbd,.phero .tbd{background:rgba(243,236,224,.1);color:#f0dcc2}
.sec.alt .ph b{color:#e7cfa6}
.sec.alt .tbl thead th{color:#a7b1bf}
.toc a.on::before{background:var(--accent)}

/* the cyber band: deepest midnight with gold */
.band{background:var(--midnight);color:#d6dbe2}
.feature{background:linear-gradient(180deg,#0b1626 0%,#0d1a2d 100%)}
.feature-head h2{font-size:clamp(2.3rem,4.4vw,3.9rem);color:var(--ivory)}
.feature-head h2 em{color:var(--gold)}
.feature-grid{border-top:1px solid rgba(201,164,106,.3)}
.feature-roles li{font:500 1.3rem/1.3 var(--serif);border-bottom-color:rgba(243,236,224,.1);transition:color .3s,padding-left .5s var(--ease-out)}
.feature-roles li:hover{color:var(--gold);padding-left:10px}
.feature-adv h3{border-top:1px solid var(--gold);font-size:1.4rem}
.band-in h2{font-size:clamp(2.1rem,3.6vw,3.2rem)}

/* founder portrait: gold hairline passe-partout */
.portrait-frame.photo{border:1px solid var(--gold);padding:14px;background:var(--white);outline:1px solid var(--rule-2);outline-offset:8px}

/* forms */
.form{border-radius:0;border-top:2px solid var(--gold)}
input,select,textarea{border-radius:0;border-color:#a39a8a}
input:focus,select:focus,textarea:focus{outline-color:var(--accent);border-color:var(--accent)}
.seg span,.filters button{border-radius:0;font-family:var(--sans)}

/* footer */
.ftr{background:#08111e}
.ftr .brand b{color:var(--ivory)}
.ftr .brand svg{color:var(--gold)}
.ftr-tag{font:italic 500 1.5rem/1.35 var(--serif);color:var(--ivory)}
.fh{color:var(--gold)}
.ftr-grid{border-bottom-color:rgba(201,164,106,.22)}
.legal{border-top-color:rgba(201,164,106,.22)}

/* page veil: a midnight curtain lifts on arrival (JS adds .b-leave on internal navigation) */
html.js body::before{content:"";position:fixed;inset:0;z-index:450;background:var(--midnight);pointer-events:none;animation:b-veil 1s var(--ease-out) .05s both}
@keyframes b-veil{from{opacity:1}to{opacity:0;visibility:hidden}}
html.b-leave body::before{animation:none;visibility:visible;opacity:1;transition:opacity .32s var(--ease)}
html.js.b-leaving body::before{opacity:0}
.js .rv{transform:translateY(22px);transition:opacity 1.1s var(--ease-out),transform 1.2s var(--ease-out)}
@media (prefers-reduced-motion:reduce){html.js body::before{display:none}.btn::before{transition:none}}
@media (max-width:760px){.hero{min-height:0}.hero h1{font-size:clamp(2.7rem,12vw,3.6rem)}.fork{background:transparent;border:0;gap:12px}.fork-card{border:1px solid rgba(201,164,106,.3)}}
/* fixes: base rules that use --paper as a light text colour on navy */
.band h2,.band h3,.band-in h2,.feature-roles li,.feature-adv h3,.band a:not(.btn){color:var(--ivory)}
.feature-roles li:hover{color:var(--gold)}
.band :focus-visible,.ftr :focus-visible,.hdr :focus-visible,.hero :focus-visible,.phero :focus-visible,.sec.alt :focus-visible{outline-color:var(--gold)}
.ftr .brand,.ftr .brand:hover{color:var(--ivory)}
.skip,.skip:focus{background:var(--gold);color:var(--midnight)}
.eyebrow,.k,.fk,.fh{font-size:.74rem}
.pindex .n,.fig,.steps li .k,.feebig{font-variant-numeric:lining-nums}
/* mobile header: brand and menu on one tidy row (menu label kept for screen readers) */
@media (max-width:560px){
  .js .hdr .wrap{flex-wrap:nowrap;min-height:68px;gap:12px}
  .brand{gap:10px;min-width:0}
  .brand svg{width:30px;height:30px}
  .brand small{font-size:.54rem;letter-spacing:.1em;white-space:nowrap}
  .js .menu-btn{padding:11px 12px;flex:none}
  .js .menu-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (max-width:560px){.brand b{font-size:1.2rem;letter-spacing:.04em}}

/* ===================== Mobile pass (24 Oct 2026) =====================
   From Dude2's mobile review (/workspace/mobile-review/report.md). Everything below is scoped to
   ≤1180px (menu) or phone/tablet widths, or is display:none on desktop, so 1024px+ layouts are unchanged. */

/* mobile-only elements: hidden by default (desktop) */
.hero-quick,.mbar,.nav-contact,.toc-m,.nav-scrim{display:none}

/* 2 + 6. menu button 44×44; open menu: contact block, scroll lock, scrim, scrolls inside on short/landscape screens */
@media (max-width:1180px){
  .js .menu-btn{min-width:44px;min-height:44px;justify-content:center}
  .js .nav.open{max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .js .nav-contact{display:flex;flex-direction:column;margin:18px 0 0;padding-top:6px;border-top:1px solid rgba(201,164,106,.3)}
  .js .nav .nav-contact a:not(.btn){color:var(--gold);min-height:44px;display:flex;align-items:center;padding:10px 0;overflow-wrap:anywhere}
  .js .nav .btn{min-height:52px}
  html.nav-open,html.nav-open body{overflow:hidden}
  .js .nav-scrim{display:block;position:fixed;inset:0;z-index:49;background:rgba(8,17,30,.6);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
  html.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
}

/* 1. Home first screen on phones: tighter hero, quick CTA row */
@media (max-width:760px){
  .hero{padding:36px 0 52px}
  .hero::after{inset:6px}
  .hero .eyebrow{letter-spacing:.14em;gap:10px;margin-bottom:14px}
  .hero .eyebrow::before{width:22px}
  .hero h1{font-size:clamp(2.4rem,10.6vw,3.3rem);margin-bottom:.32em}
  .hero .lede{font-size:1.04rem;line-height:1.6;margin-bottom:0}
  .hero-quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .hero-quick .btn{flex:1 1 140px;justify-content:center;text-align:center;padding:16px 8px;letter-spacing:.07em}
  .fork{margin-top:36px}
}

/* 4. button labels ~14px on phones; full-width form submit */
@media (max-width:760px){
  .btn{font-size:.875rem;letter-spacing:.12em;line-height:1.3}
  .btn.sm{font-size:.84rem;letter-spacing:.1em}
}
@media (max-width:640px){
  .form button[type=submit]{width:100%;justify-content:center;min-height:52px}
}

/* 7. type floor: logo subline and eyebrow labels */
@media (max-width:760px){
  .eyebrow,.k,.fk,.fh{font-size:.78rem;letter-spacing:.16em}
  .crumb ol{font-size:.82rem}
  .crumb a{display:inline-block;padding:10px 0}
}
@media (max-width:1023px){
  .brand small{font-size:.66rem;letter-spacing:.22em}
}
@media (max-width:560px){
  .brand small{font-size:.66rem;letter-spacing:.06em}
}
@media (max-width:380px){
  .hdr .brand b{font-size:1.1rem;letter-spacing:.03em}
  .hdr .brand small{font-size:.63rem;letter-spacing:.03em}
  .hdr .brand{gap:8px}
  .hdr .brand svg{width:26px;height:26px}
}

/* 5. footer: 44px link rows, Explore and Policies in two columns */
@media (max-width:760px){
  .ftr li{padding:0}
  .ftr li a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:1rem;line-height:1.3}
  .ftr li:not(:has(a)){padding:10px 0}
  .ftr .legal a{display:inline-block;padding:10px 0}
}
@media (max-width:560px){
  .ftr-grid>div:nth-child(2) ul,.ftr-grid>div:nth-child(4) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
}

/* 3. slim quick-contact bar on phones: navy, gold hairline, small-caps text labels (no icon tabs) */
@media (max-width:640px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
        background:#0b1626;border-top:1px solid rgba(201,164,106,.6);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .mbar a{min-height:52px;display:flex;align-items:center;justify-content:center;text-decoration:none;
          font:500 .82rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);transition:color .3s,background .3s}
  .mbar a+a{border-left:1px solid rgba(201,164,106,.4);color:var(--gold)}
  .mbar a:hover,.mbar a:active{background:rgba(201,164,106,.1)}
  .mbar a:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
  /* keep the bar off the footer and form buttons, and keep focused elements clear of it */
  .ftr{padding-bottom:calc(32px + 53px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:72px}
  html.nav-open .mbar,html.field-focus .mbar,html.kb-open .mbar{display:none}
}
@media print{.mbar,.nav-scrim{display:none!important}}

/* 8. Fees: stack the 'Invoiced in thirds' table on phones */
@media (max-width:640px){
  .tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:auto}
  .tbl-stack tr{padding:16px 0;border-bottom:1px solid var(--rule)}
  .tbl-stack td{border:0;padding:3px 0 8px}
  .tbl-stack td[data-label]::before{content:attr(data-label);display:block;font:500 .78rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .tbl-stack td.num{font:500 1.5rem/1.2 var(--serif);font-variant-numeric:lining-nums;white-space:normal}
  .tbl-stack td.num::before{font-family:var(--sans)}
}

/* 8. mobile 'On this page' (native details/summary), shown where the desktop contents rail is hidden */
@media (max-width:900px){
  .toc-m{display:block;border-top:1px solid var(--gold);border-bottom:1px solid var(--rule);margin:0 0 8px}
  .toc-m summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;
                 font:500 .82rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary::after{content:"+";font:400 1.5rem/1 var(--serif);color:var(--accent);letter-spacing:0;transition:transform .3s var(--ease)}
  .toc-m[open] summary::after{transform:rotate(45deg)}
  .toc-m summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .toc-m ul{list-style:none;margin:0;padding:0 0 12px}
  .toc-m li{border-top:1px solid var(--rule-2)}
  .toc-m a{display:flex;align-items:center;min-height:44px;padding:8px 0;text-decoration:none;color:var(--text);line-height:1.3}
  .toc-m a:hover{color:var(--accent)}
}
@media (max-width:900px) and (min-width:420px){
  .toc-m-2 ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
}
@media (prefers-reduced-motion:reduce){.toc-m summary::after,.nav-scrim{transition:none}}

/* Founder emblem (no photo, by choice): gold escutcheon on midnight */
.emblem-frame{background:var(--midnight,#0b1626);border:1px solid #c9a46a;outline:1px solid rgba(201,164,106,.35);outline-offset:8px;aspect-ratio:4/5;max-width:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;text-align:center}
.emblem-mark{color:#c9a46a;width:46%;max-width:180px}
.emblem-mark svg{width:100%;height:auto;display:block}
.emblem-name{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.1rem);color:#f3eee4;margin-top:10px}
.emblem-role{font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#c9a46a}
@media (max-width:760px){.emblem-frame{aspect-ratio:auto;max-width:none;padding:36px 24px;outline-offset:6px}.emblem-mark{width:72px}.emblem-name{font-size:1.5rem}}