/* ============================================================
   Stewart Village — svlife.ca
   Design system. Premium but rooted: warm ivory daylight,
   deep dusk navy, the SV hexagon triad used sparingly.
   Type: Baskervville (voice) / Mulish (function) / Plex Mono (fact).
   ============================================================ */

:root{
  --canvas:#F7F2E8;
  --panel:#EFE7D6;
  --card:#FCF8EF;
  --ink:#1B2334;
  --muted:#5A6375;
  --navy:#182742;
  --dusk:#0F1A30;
  --cream:#F4EDDE;
  --cream-mut:#A7B2C6;
  --blue:#385E9D;
  --blue-soft:#7E9AC9;
  --green:#78BE20;
  --green-deep:#4E7F12;
  --gold:#F1B435;
  --gold-lt:#F8CE72;
  --gold-deep:#9A6F14;
  --red:#F9423A;
  --amber:#E2A44E;
  --line:rgba(27,35,52,.14);
  --line-dark:rgba(244,238,225,.14);
  --disp:'Baskervville',Georgia,'Times New Roman',serif;
  --sans:'Mulish',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* fixed nav would otherwise cover the top of any anchored section */
:target,[id]{scroll-margin-top:92px}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);
  color:var(--ink);
  font:400 17px/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:rgba(241,180,53,.4)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:12px 20px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4.4vw,46px)}
.wrap.narrow{max-width:880px}
.sec{padding:clamp(76px,9.5vw,136px) 0}
.sec.tight{padding:clamp(52px,6.5vw,90px) 0}
.sec.dark{background:var(--navy);color:var(--cream)}
.sec.dusk{background:var(--dusk);color:var(--cream)}
.sec.panel{background:var(--panel)}

/* ---------- type ---------- */
.kick{display:flex;align-items:center;gap:12px;font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin:0 0 20px}
/* On dark grounds the brand blue is near-invisible — measured 1.0 contrast
   against the scrimmed page heroes. Gold is the dark-ground accent. */
.dark .kick,.dusk .kick,.phero .kick,.closer .kick{color:var(--gold-lt);text-shadow:0 1px 12px rgba(4,8,18,.6)}
.kick .hx{flex:none}
h1,h2,h3{margin:0;font-weight:400}
.d1{font-family:var(--disp);font-size:clamp(2.45rem,5.4vw,4.15rem);line-height:1.07;letter-spacing:-.005em}
.d2{font-family:var(--disp);font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1.14}
.d3{font-family:var(--disp);font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.28}
.lede{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.66;color:var(--muted);max-width:64ch;margin:22px 0 0}
.dark .lede,.dusk .lede{color:var(--cream-mut)}
p{margin:0 0 1.1em}
.serifline{font-family:var(--disp);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.42;letter-spacing:.002em}
.small{font-size:.87rem;color:var(--muted)}
.dark .small,.dusk .small{color:var(--cream-mut)}
.mono{font-family:var(--mono)}
.fine{font:400 12.5px/1.7 var(--sans);color:var(--muted);max-width:70ch}
.dusk .fine,.dark .fine{color:var(--cream-mut)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12.5px 24px;border-radius:999px;border:1px solid transparent;background:var(--ink);color:var(--cream);font:600 11px var(--sans);letter-spacing:.085em;text-transform:uppercase;text-decoration:none;transition:transform .25s ease,background .25s ease,color .25s}
.btn:hover{transform:translateY(-1px);background:#2A3550}
.btn.light{background:var(--cream);color:var(--ink)}
.btn.light:hover{background:#fff}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.dark .btn.ghost,.dusk .btn.ghost{border-color:var(--line-dark);color:var(--cream)}
.dark .btn.ghost:hover,.dusk .btn.ghost:hover{border-color:var(--cream)}
.tlink{display:inline-flex;align-items:center;gap:9px;font:600 12.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--blue);border-bottom:1px solid transparent;padding-bottom:2px}
.tlink::after{content:'\2192';transition:transform .25s}
.tlink:hover::after{transform:translateX(4px)}
.dark .tlink,.dusk .tlink{color:var(--gold)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:16px 0;transition:background .35s ease,box-shadow .35s ease,padding .35s ease}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream)}
.brand .bword{font:600 12.5px var(--sans);letter-spacing:.28em}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.navlinks a{font:600 12.5px var(--sans);letter-spacing:.05em;text-decoration:none;color:var(--cream);opacity:.92;transition:opacity .2s}
.navlinks a:hover{opacity:1}
.navlinks .btn{padding:9px 17px;font:600 11px var(--sans);letter-spacing:.085em;background:var(--cream);color:var(--ink)}
.nav.solid{background:rgba(247,242,232,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:12px 0}
.nav.solid .brand,.nav.solid .navlinks a{color:var(--ink)}
.nav.solid .navlinks .btn{background:var(--ink);color:var(--cream)}
.burger{display:none;background:none;border:0;padding:10px;color:inherit}
.burger svg{display:block}
.nav.solid .burger{color:var(--ink)}
.menu{position:fixed;inset:0;z-index:70;background:var(--dusk);color:var(--cream);display:none;flex-direction:column;padding:26px clamp(22px,6vw,44px)}
.menu.open{display:flex}
.menu .mtop{display:flex;justify-content:space-between;align-items:center}
.menu nav{margin:auto 0;display:flex;flex-direction:column;gap:10px}
.menu nav a{font-family:var(--disp);font-size:clamp(2rem,8vw,2.9rem);color:var(--cream);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line-dark)}
.menu .mfoot{font:500 12px var(--mono);letter-spacing:.14em;color:var(--cream-mut)}
.mclose{background:none;border:0;color:var(--cream);padding:10px}

/* ---------- hero ---------- */
.hero{position:relative;height:560vh;background:var(--dusk)}
.hero .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Cinematic lower-left vignette. Tuned against a measured contrast audit:
   the render's lit windows and white cars punched through a lighter scrim,
   dropping worst-case contrast under the glyphs to ~1.8. */
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(5,9,18,.90) 0%,rgba(5,9,18,.74) 20%,rgba(5,9,18,.46) 40%,rgba(5,9,18,.16) 60%,rgba(5,9,18,0) 76%),
  linear-gradient(to right,rgba(5,9,18,.62) 0%,rgba(5,9,18,.34) 34%,rgba(5,9,18,.10) 58%,rgba(5,9,18,0) 76%),
  linear-gradient(to bottom,rgba(5,9,18,.46) 0%,rgba(5,9,18,0) 26%)}
.hero .hwrap{position:absolute;top:0;bottom:0;left:0;right:0;max-width:1180px;margin-inline:auto}
.band{position:absolute;left:clamp(20px,4.4vw,46px);right:clamp(20px,4.4vw,46px);bottom:clamp(88px,15vh,158px);max-width:min(1120px,88vw);opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.band.on{opacity:1;transform:none}
.band .bl{display:block;margin:0;font-family:var(--disp);font-size:clamp(1.85rem,3.95vw,3.35rem);line-height:1.16;color:#F7F3EB;text-shadow:0 2px 34px rgba(4,8,18,.45)}
.band .bs{margin:20px 0 0;font:500 clamp(1rem,1.42vw,1.28rem)/1.55 var(--sans);letter-spacing:.01em;color:#D9E1EC;text-shadow:0 1px 18px rgba(4,8,18,.5)}
.band .loc{margin:20px 0 0;font:600 10px var(--mono);letter-spacing:.26em;color:#BAC5D8}
.cue{position:absolute;bottom:24px;left:0;right:0;margin-inline:auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:10px;font:600 10px var(--mono);letter-spacing:.34em;color:#C6CFDE;opacity:0;transition:opacity .7s;pointer-events:none}
.cue.on{opacity:.92}
.cue .cline{width:1px;height:34px;background:linear-gradient(rgba(198,207,222,0),rgba(198,207,222,.9));animation:cuedrop 2.2s ease-in-out infinite}
/* cue is centred on the stage, not the copy column */
@keyframes cuedrop{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* hero static + mobile modes */
.hero.static,.hero.mobile{height:auto}
.hero.static .stage,.hero.mobile .stage{position:relative;height:100svh}
.hero.static video{display:none}
.hero.static .stage{background:#0F1A30 url('hero-end.jpg') center/cover no-repeat}
.hero.mobile .band{transition-duration:.7s}
/* Static mode has no film to reveal copy over time, so the bands become a
   stacked poster instead of four absolutely-positioned layers on top of
   each other. Smaller type keeps the whole story inside one screen. */
.hero.static .hwrap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:clamp(64px,11vh,120px)}
.hero.static .band{position:static;opacity:1;transform:none;max-width:760px;
  margin:0 clamp(22px,6vw,104px);padding-bottom:clamp(14px,2.2vh,24px)}
.hero.static .band:last-of-type{padding-bottom:0}
.hero.static .band .bl{font-size:clamp(1.35rem,2.5vw,2.15rem);line-height:1.2}
.hero.static .band .bs{margin-top:10px;font-size:clamp(.8rem,1.1vw,.95rem)}
.hero.static .band .loc{margin-top:14px}
.hero.static .cue{display:none}
@media (max-height:700px){
  .hero.static .band .bl{font-size:clamp(1.15rem,2.1vw,1.6rem)}
  .hero.static .band{padding-bottom:10px}
}

/* ---------- freshness stamp ---------- */
.stamp{margin-left:14px;padding-left:14px;border-left:1px solid var(--line);font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.dark .stamp,.dusk .stamp{border-color:var(--line-dark);color:var(--cream-mut)}

/* ---------- paired call to action ---------- */
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* ---------- hero replay ---------- */
.replay{position:absolute;left:clamp(20px,4.4vw,46px);bottom:clamp(30px,5vh,54px);display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 13px;border-radius:999px;border:1px solid rgba(244,238,225,.34);background:rgba(10,16,30,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#EAE4D6;
  font:600 10px var(--sans);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease,visibility .5s,border-color .25s,background .25s}
.replay.on{opacity:1;visibility:visible;transform:none}
.replay:hover{border-color:rgba(244,238,225,.7);background:rgba(10,16,30,.6)}
.replay svg{display:block}

/* ---------- reveals ---------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
[data-rv].rv-in{opacity:1;transform:none}
[data-rv="2"]{transition-delay:.08s}
[data-rv="3"]{transition-delay:.16s}
[data-rv="4"]{transition-delay:.24s}

/* ---------- intro / manifesto ---------- */

/* ---------- opening statement ---------- */
.statement{margin:0;font-family:var(--disp);font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.14;letter-spacing:-.004em;max-width:30ch;text-wrap:balance}
.introfacts{margin-top:clamp(26px,3.4vw,38px);max-width:60ch;font-size:1rem;line-height:1.7;color:var(--muted)}

/* ---------- router cards ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(36px,5vw,60px)}
.route{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 28px 26px;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease}
.route:hover{transform:translateY(-4px);box-shadow:0 18px 44px -22px rgba(27,35,52,.35)}
.route .rk{font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.route h2{font-family:var(--disp);font-size:1.5rem;line-height:1.2}
.route p{margin:0;font-size:.95rem;color:var(--muted);flex:1}
.route .go{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.route .go::after{content:'\2002\2192'}

/* ---------- status board ---------- */
.boardline{margin:26px 0 8px;color:var(--ink);max-width:56ch}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.col{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px;transition:opacity .4s ease,transform .4s ease}
.col .chip .cnum{font:600 12px/1 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums}
.col .chip{display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--mono);letter-spacing:.16em;padding:8px 12.5px;border-radius:999px;margin-bottom:18px}
.col.now .chip{background:rgba(120,190,32,.16);color:var(--green-deep)}
.col.under .chip{background:rgba(241,180,53,.2);color:var(--gold-deep)}
.col.coming .chip{background:rgba(56,94,157,.14);color:var(--blue)}
.col ul{list-style:none;margin:0;padding:0}
.col li{padding:11px 0;border-top:1px solid var(--line);font-size:.95rem;line-height:1.45}
.col li:first-child{border-top:0}
.col li b{font-weight:400;font-size:1.02rem;color:var(--ink)}
.col li .n{display:block;font-size:.82rem;color:var(--muted)}

/* ---------- press credit strip ---------- */
.credits{text-align:center}
.credits .clabel{display:block;font:600 10px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 clamp(28px,3.8vw,40px)}
.credits ul{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(38px,8.5vw,116px)}
.credits li{display:flex}
.credits a.out{display:flex;align-items:center;justify-content:center;height:44px;text-decoration:none;color:var(--ink);opacity:.66;transition:opacity .25s ease}
.credits a.out:hover,.credits a.out:focus-visible{opacity:1}
.credits svg,.credits img{display:block;width:auto;height:100%}
.credits .ctv{height:42px}
.credits .rec{height:20px}
.credits .ytv{height:38px}
.credits .bd{height:30px}
@media (max-width:640px){
  .credits ul{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;justify-items:center}
  .credits a.out{height:34px}
  .credits .ctv{height:32px}
  .credits .rec{height:15px}
  .credits .ytv{height:29px}
  .credits .bd{height:23px}
}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,5.4vw,76px);align-items:center}
.split.rev>.fig{order:2}
.split .txt .lede{margin-top:18px}
.fig{position:relative;margin:0}
.fig img{width:100%;height:auto;border-radius:22px}
.fig .tag{position:absolute;left:14px;bottom:14px;font:600 10px var(--mono);letter-spacing:.18em;color:rgba(244,238,225,.9);background:rgba(15,22,38,.55);padding:6px 11px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.fig figcaption{margin-top:12px;font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted)}
.dark .fig figcaption,.dusk .fig figcaption{color:var(--cream-mut)}

/* ---------- stat strip ---------- */
.stats{display:flex;flex-wrap:wrap;border-block:1px solid var(--line);margin-top:clamp(34px,5vw,54px)}
.dusk .stats,.dark .stats{border-color:var(--line-dark)}
.stat{flex:1 1 190px;padding:28px 24px 24px;border-inline-start:1px solid var(--line)}
.dusk .stat,.dark .stat{border-color:var(--line-dark)}
.stat:first-child{border-inline-start:0}
.stat b{display:block;white-space:nowrap;font:500 clamp(1.3rem,2.05vw,1.72rem)/1.15 var(--mono);letter-spacing:-.02em}
.stat span{display:block;margin-top:9px;font:600 10px var(--mono);letter-spacing:.15em;color:var(--muted);text-transform:uppercase;line-height:1.6}
.dusk .stat span,.dark .stat span{color:var(--cream-mut)}

/* ---------- film ---------- */
.film{position:relative;border-radius:24px;overflow:hidden;background:var(--dusk);margin-top:clamp(34px,5vw,56px)}
.film video{width:100%;height:auto}
.film .pp{position:absolute;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;border:0;background:rgba(244,238,225,.92);color:var(--ink);display:grid;place-items:center;transition:transform .25s}
.film .pp:hover{transform:scale(1.06)}
.dusk .filmcap,.dark .filmcap{color:var(--cream-mut)}
.filmcap{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto;margin-top:clamp(28px,4vw,44px)}
.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl th{text-align:left;font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 14px 12px 2px;border-bottom:1px solid var(--ink)}
.tbl td{padding:15px 14px 15px 2px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.tbl td b{font-weight:400;color:var(--ink)}
.tbl .num{font-family:var(--mono);font-size:.95rem}
.tbl .st{font:600 10px var(--mono);letter-spacing:.14em;padding:5px 10px;border-radius:999px;white-space:nowrap}
.st.ok{background:rgba(120,190,32,.16);color:var(--green-deep)}
.st.build{background:rgba(241,180,53,.2);color:var(--gold-deep)}
.st.plan{background:rgba(56,94,157,.14);color:var(--blue)}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0 0 0 36px;position:relative}
.tl::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--green),var(--gold) 45%,var(--blue-soft))}
.tl li{position:relative;padding:0 0 30px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-33px;top:7px;width:12px;height:14px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tl li:first-child::before{background:var(--green)}
.tl li:last-child::before{background:var(--blue-soft)}
.tl li b{font-weight:400}
.tl .ty{font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tl h3{font-family:var(--disp);font-size:1.35rem;margin:6px 0 6px}
.tl p{margin:0;font-size:.95rem;color:var(--cream-mut);max-width:62ch}

/* ---------- lists / pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,50px)}
.pillar{border-top:2px solid var(--gold);padding:18px 4px 0}
.pillar .pk{font:600 11px var(--mono);letter-spacing:.22em;color:var(--gold)}
.pillar p{margin:10px 0 0;font-size:.95rem;color:var(--cream-mut)}
.gridcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(30px,4vw,50px)}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.gcard img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gcard .gc{padding:18px 20px 20px}
.gcard h3{font-family:var(--disp);font-size:1.2rem}
.gcard p{margin:8px 0 0;font-size:.87rem;color:var(--muted)}
.plainlist{list-style:none;margin:24px 0 0;padding:0;columns:2;column-gap:44px}
.plainlist li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;break-inside:avoid}
.plainlist li b{font-weight:400;font-size:1.02rem;color:var(--ink)}
.plainlist li .n{color:var(--muted);font-size:.87rem;display:block}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(26px,4vw,42px)}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font:600 1.02rem/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:400 1.5rem var(--disp);color:var(--blue);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 0 20px;max-width:70ch;color:var(--muted)}

/* ---------- forms ---------- */
.formcard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,44px);color:var(--ink)}
.dusk .formcard,.dark .formcard{background:rgba(244,238,225,.06);border-color:var(--line-dark)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.form .full{grid-column:1/-1}
.form label{display:block;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.dusk .form label,.dark .form label{color:var(--cream-mut)}
.form input,.form select,.form textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:400 15.5px var(--sans);color:var(--ink)}
.dusk .form input,.dusk .form select,.dusk .form textarea{background:rgba(255,255,255,.94)}
.form textarea{min-height:110px;resize:vertical}
.form .actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.formnote{font-size:.87rem;color:var(--muted);margin:0}
.dusk .formnote,.dark .formnote{color:var(--cream-mut)}
.formmsg{grid-column:1/-1;font-size:.95rem;padding:14px 16px;border-radius:12px;background:rgba(120,190,32,.14);color:var(--green-deep);display:none}
.formmsg.on{display:block}

/* ---------- press ---------- */
.press{display:grid;grid-template-columns:1.32fr .93fr;gap:clamp(26px,4vw,54px);align-items:stretch;margin-top:clamp(30px,4vw,48px)}
.yt{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;border:0;padding:0;width:100%;height:100%;min-height:100%;display:block}
.yt img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:.85}
.yt .yplay{position:absolute;inset:0;display:grid;place-items:center}
.yt .yplay span{width:74px;height:74px;border-radius:50%;background:rgba(244,238,225,.94);display:grid;place-items:center;transition:transform .25s}
.yt:hover .yplay span{transform:scale(1.08)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pressitems{display:flex;flex-direction:column;gap:6px}
.pressitem{padding:18px 0;border-top:1px solid var(--line-dark);text-decoration:none;color:var(--cream)}
.pressitem:last-child{border-bottom:1px solid var(--line-dark)}
.pressitem .pk{font:600 10px var(--mono);letter-spacing:.2em;color:var(--gold)}
.pressitem h3{font-family:var(--disp);font-size:1.18rem;margin:8px 0 4px}
.pressitem p{margin:0;font-size:.87rem;color:var(--cream-mut)}

/* ---------- page hero (subpages) ---------- */
.phero{position:relative;min-height:88svh;display:flex;align-items:flex-end;color:var(--cream);background:var(--dusk)}
.phero .pbg{position:absolute;inset:0;overflow:hidden}
.phero .pbg img{width:100%;height:100%;object-fit:cover}
/* Strongly bottom-weighted so the render stays visible up top while the copy
   sits in genuine darkness. Every value here was set by contrast measurement,
   then pulled back until the image read again. */
.phero .pbg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(to top,rgba(5,9,18,.96) 0%,rgba(5,9,18,.93) 18%,rgba(5,9,18,.86) 34%,rgba(5,9,18,.62) 50%,rgba(5,9,18,.30) 66%,rgba(5,9,18,.08) 84%,rgba(5,9,18,0) 100%),
  linear-gradient(to right,rgba(5,9,18,.44) 0%,rgba(5,9,18,.18) 46%,rgba(5,9,18,0) 76%)}
.phero .wrap{position:relative;padding-top:150px;padding-bottom:clamp(48px,8vh,92px)}
.phero .d1{max-width:min(100%,28ch)}
.phero .lede{max-width:54ch}
.phero .tag{position:absolute;right:clamp(20px,4vw,46px);bottom:18px;font:600 10px var(--mono);letter-spacing:.18em;color:rgba(244,238,225,.85);background:rgba(15,22,38,.5);padding:6px 11px;border-radius:8px}
.phero .lede{color:#CBD4E2}

/* ---------- closer ---------- */
.closer{position:relative;background:var(--dusk);color:var(--cream);overflow:hidden}
.closer .cbg{position:absolute;inset:0;background:url('hero-end.jpg') center/cover no-repeat;opacity:.34}
.closer .cbg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(15,26,48,.6),rgba(15,26,48,.94))}
.closer .wrap{position:relative}

/* ---------- footer ---------- */
footer{background:var(--dusk);color:var(--cream);padding:clamp(56px,7vw,86px) 0 42px;border-top:1px solid var(--line-dark)}
.foot h2{font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:9px 0}
.foot a{color:var(--cream);text-decoration:none;opacity:.9}
.foot a:hover{opacity:1;text-decoration:underline}
.foot p{margin:0 0 8px;font-size:.95rem;color:var(--cream-mut)}
.legal{margin-top:clamp(36px,5vw,54px);padding-top:22px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;font-size:12.5px;color:var(--cream-mut)}
.legal a{color:inherit}

/* ---------- utilities ---------- */
.mt0{margin-top:0}.center{text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px)}
.two > div > .d3{font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1.14}
.sechead{max-width:760px}
.sechead.center{margin:0 auto}
hr.rule{border:0;border-top:1px solid var(--line);margin:clamp(40px,6vw,64px) 0}

br.opt{display:none}
@media (min-width:701px){br.opt{display:inline}}

/* ---------- footer ---------- */
.fclose{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,46px);align-items:center;padding-bottom:clamp(38px,5vw,58px);border-bottom:1px solid var(--line-dark)}
.fclose .flogo{width:clamp(132px,15vw,178px);height:auto}
.fclose p{margin:0;font-family:var(--disp);font-style:italic;font-size:clamp(1.15rem,2.1vw,1.62rem);line-height:1.34;color:var(--cream);max-width:34ch}
.foot{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(28px,5vw,60px);padding-top:clamp(38px,5vw,56px)}
.foot address{font-style:normal}
.foot .fmail{display:inline-block;margin-top:12px;font:600 12.5px var(--sans);color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(241,180,53,.4);padding-bottom:2px}
.foot .fmail:hover{border-color:var(--gold)}
.foot .fcta{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.foot .fcta::after{content:'\2192';transition:transform .25s}
.foot .fcta:hover::after{transform:translateX(4px)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .fclose{grid-template-columns:1fr;gap:20px}
  .routes,.cols,.gridcards{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .split,.split.rev{grid-template-columns:1fr}
  .split>.fig,.split.rev>.fig{order:-1}
  .press{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
}
@media (max-width:820px){
  .navlinks{display:none}
  .burger{display:block}
  .plainlist{columns:1}
}
@media (max-width:640px){
  .routes,.cols,.gridcards{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .stat{flex-basis:46%;border-inline-start:0;border-top:1px solid var(--line);padding-inline:4px}
  .dusk .stat{border-color:var(--line-dark)}
  .stats{border-top:0}
  .band{bottom:clamp(96px,17vh,170px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  [data-rv]{opacity:1;transform:none}
}

/* Honeypot: off-screen, never focusable, invisible to assistive tech.
   Bots fill it in; the server silently drops anything that has it set. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
