/* MediaWyld — the chart room. Theme stylesheet v1.0 (23 Oct 2026).
   Governing docs: /home/mediawyld/DESIGN-charts.md, /home/mediawyld/DESIGN.md,
   skills mediawyld-site-design + wyld-frontend-stack. Self-hosted, no CDN. */

@font-face{font-family:"Big Shoulders Display";src:url(/wyld-assets/fonts/bsd-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(/wyld-assets/fonts/bsd-800.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/wyld-assets/fonts/is-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/wyld-assets/fonts/is-600.woff2) format("woff2");font-weight:600 700;font-display:swap}

@view-transition{navigation:auto}

:root{
  /* ground */
  --abyss:#050d24; --night:#04101f; --deep:#071a40; --navy:#0b2a6b;
  --dk-a:#1247a0; --dk-b:#0d3a86; --dk-c:#0a2d6e;
  --lt-a:#f6fbff; --lt-b:#e6f1fb; --lt-c:#d6e8f7;
  /* ink */
  --foam:#eaf5fa; --foam-2:rgba(234,245,250,.86); --foam-3:rgba(234,245,250,.74);
  --ink:#10294d; --ink-2:rgba(16,41,77,.88); --ink-3:#46556b;
  /* accents (rationed) */
  --cyan:#19c3e6; --wyld:#3f5fe8; --chartred:#8a3a1a;
  /* type */
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* text scale: 13 · 16 · 20 · 25 (each step 1.25x) */
  --fs-s:.8125rem; --fs-m:1rem; --fs-l:1.25rem; --fs-xl:1.5625rem;
  /* headline scale: 32 · 44 · 60 · 84 */
  --h4:clamp(1.625rem,1.35rem + .9vw,2rem);
  --h3:clamp(2.1rem,1.7rem + 1.5vw,2.75rem);
  --h2:clamp(2.6rem,1.9rem + 2.8vw,3.75rem);
  --h1:clamp(3.2rem,2.1rem + 4.6vw,5.25rem);
  /* layout */
  --g:clamp(18px,4.4vw,64px);
  --band-y:clamp(64px,8vw,112px);
  --max:1320px;
  --radius:7px;
  --head-h:72px;
  /* motion tokens */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:160ms; --t-med:260ms; --t-slow:600ms;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
.done:focus{outline:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--abyss);color:var(--foam);font:400 var(--fs-m)/1.65 var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--head-h)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--foam);color:var(--abyss);padding:12px 18px;border-radius:var(--radius);font-weight:600}
.skip:focus{left:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.t-h1,.t-h2,.t-h3,.t-h4{font-family:var(--display);text-transform:uppercase;font-weight:900;letter-spacing:-.012em}
.t-h1{font-size:var(--h1);line-height:.88;max-width:15ch}
.t-h2{font-size:var(--h2);line-height:.9;max-width:18ch}
.t-h3{font-size:var(--h3);line-height:.94}
.t-h4{font-size:var(--h4);line-height:1;font-weight:800}
.deck{font-size:var(--fs-xl);line-height:1.38;max-width:34ch;margin-top:.6em;color:var(--foam)}
.lede{font-size:var(--fs-l);line-height:1.6;max-width:58ch;color:var(--foam-2);margin-top:1.1em}
.body{max-width:62ch;color:var(--foam-2)}
.small{font-size:var(--fs-s);line-height:1.55;color:var(--foam-3)}
.crumb{font:600 var(--fs-s)/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:0 0 1.1em}
.light .crumb{color:var(--chartred)}
.light .deck{color:var(--ink)}
.light .lede,.light .body{color:var(--ink-2)}
.light .small{color:var(--ink-3)}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--radius);
  font:600 var(--fs-m)/1 var(--text);text-decoration:none;border:1px solid transparent;cursor:pointer;
  background:var(--cyan);color:#04121c;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn:hover{background:var(--foam)}
.btn--ghost{background:transparent;color:var(--foam);border-color:rgba(234,245,250,.5)}
.btn--ghost:hover{background:rgba(234,245,250,.1);border-color:var(--foam)}
.light .btn--ghost{color:var(--ink);border-color:rgba(16,41,77,.55)}
.light .btn--ghost:hover{background:rgba(16,41,77,.07)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.assure{font-size:var(--fs-s);color:var(--foam-3);margin-top:14px}
.light .assure{color:var(--ink-3)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--cyan);text-decoration:none}
.light .more{color:var(--ink)}
.more .arr{display:inline-block;width:14px;height:10px;transition:transform var(--t-med) var(--ease-out)}
.more:hover .arr{transform:translateX(4px)}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--head-h);background:var(--abyss);
  border-bottom:1px solid rgba(234,245,250,.12);box-shadow:0 8px 26px rgba(2,8,26,.38);view-transition-name:site-head}
.site-head .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:36px;height:36px;filter:drop-shadow(0 0 .5px #fff)}
.wordmark{font:800 27px/1 var(--display);text-transform:uppercase;color:var(--foam);white-space:nowrap}
.wordmark b{font-weight:800;color:var(--wyld)}
.wordmark i{font-style:normal;color:#fff;font-size:.5em;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav > li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:none;cursor:pointer;
  font:600 15px/1 var(--text);color:var(--foam-2);text-decoration:none;border-radius:var(--radius)}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--foam)}
.nav-link[aria-current="page"],.nav-link.is-section{color:var(--cyan)}
.nav-link .car{width:9px;height:6px;transition:transform var(--t-med) var(--ease-out)}
.nav-link[aria-expanded="true"] .car{transform:rotate(180deg)}
.nav .btn{min-height:44px;padding:0 20px;font-size:15px;margin-left:10px}
/* dropdown — transitions.dev "menu dropdown": grows from its trigger */
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:var(--deep);
  border:1px solid rgba(234,245,250,.16);border-radius:var(--radius);padding:22px;box-shadow:0 24px 60px rgba(2,8,26,.55);
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;visibility:hidden;
  transition:opacity var(--t-fast) ease-out,transform var(--t-fast) var(--ease-out),visibility 0s linear var(--t-fast)}
.menu.is-open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.menu--wide{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:22px 30px;min-width:720px}
.nav > li:nth-last-child(-n+4) .menu{left:auto;right:0;transform-origin:top right}
.menu h3{font:800 20px/1 var(--display);text-transform:uppercase;color:var(--foam);margin:0 0 4px}
.menu h3 a{text-decoration:none}
.menu p{font-size:var(--fs-s);color:var(--foam-3);margin:0 0 10px;line-height:1.45}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:block;padding:7px 0;font-size:15px;color:var(--foam-2);text-decoration:none}
.menu li a:hover{color:var(--cyan)}
.menu .foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:22px;border-top:1px solid rgba(234,245,250,.14);padding-top:14px;margin-top:2px}
.menu .foot a{font-weight:600;color:var(--cyan);text-decoration:none;font-size:15px}
.burger{display:none;width:48px;height:48px;border:0;border-radius:var(--radius);background:transparent;color:var(--foam);cursor:pointer}
.burger svg{width:24px;height:24px;margin:auto}
@media (max-width:1100px){
  .nav-desk{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .wordmark{font-size:23px}
}
/* phone menu: full height, slides in from the right */
.mnav{position:fixed;inset:var(--head-h) 0 0 auto;width:min(420px,100%);z-index:99;background:var(--deep);overflow-y:auto;
  padding:18px var(--g) 120px;transform:translateX(100%);visibility:hidden;
  transition:transform var(--t-med) var(--ease-out),visibility 0s linear var(--t-med)}
.mnav.is-open{transform:none;visibility:visible;transition-delay:0s}
.mnav details{border-bottom:1px solid rgba(234,245,250,.14)}
.mnav summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:56px;cursor:pointer;
  font:800 24px/1 var(--display);text-transform:uppercase}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .car{width:12px;height:8px;transition:transform var(--t-med) var(--ease-out)}
.mnav details[open] summary .car{transform:rotate(180deg)}
.mnav ul{list-style:none;margin:0 0 14px;padding:0}
.mnav li a{display:block;padding:11px 0;color:var(--foam-2);text-decoration:none;font-size:17px}
.mnav > a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid rgba(234,245,250,.14);
  font:800 24px/1 var(--display);text-transform:uppercase;text-decoration:none}
.mnav .btn{width:100%;margin-top:24px}
.scrim{position:fixed;inset:0;z-index:98;background:rgba(2,8,26,.6);opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility 0s linear var(--t-med)}
.scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- bands ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;padding:var(--band-y) 0}
.band > .wrap{position:relative;z-index:2}
.dark{background:linear-gradient(180deg,var(--dk-a) 0%,var(--dk-b) 55%,var(--dk-c) 100%);color:var(--foam)}
.deep{background:var(--deep);color:var(--foam)}
.navy{background:linear-gradient(180deg,#0b3478,#06214f);color:var(--foam)}
.light{background:linear-gradient(180deg,var(--lt-a) 0%,var(--lt-b) 55%,var(--lt-c) 100%);color:var(--ink)}
.light2{background:linear-gradient(180deg,#cfe3f6 0%,#bcd7f1 55%,#a9c9ec 100%);color:var(--ink)}
.light2 .crumb{color:var(--chartred)}
.light2 .lede,.light2 .body{color:var(--ink-2)}
/* real NOAA chart, recoloured; hero ~.56, statement ~.28 */
.chart{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.chart--hero{opacity:.56}
.chart--soft{opacity:.28}
.band.has-chart::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,52,124,.64),rgba(8,40,100,.76))}
.hero{padding:clamp(72px,9vw,128px) 0 clamp(72px,9vw,120px);min-height:min(76vh,760px);display:flex;align-items:center}
.hero > .wrap{width:100%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.split--wide{grid-template-columns:.9fr 1.1fr}
@media (max-width:900px){.split,.split--wide{grid-template-columns:1fr}}

/* ---------- the compass instrument (Home hero) ---------- */
.instrument{position:absolute;z-index:1;right:clamp(16px,4vw,96px);top:50%;width:min(62vh,34vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.instrument .bezel{position:absolute;inset:0;width:100%;height:100%;stroke:var(--foam);fill:none;opacity:.6;animation:bezel 2.4s var(--ease-out) .2s both}
.instrument .bezel text{fill:var(--foam);stroke:none;text-anchor:middle;dominant-baseline:central}
.instrument .bezel .card{font:800 9px var(--display)}
.instrument .bezel .deg{font:600 4.2px var(--text);opacity:.7}
.instrument .rose{position:absolute;inset:15%;width:70%;height:70%;
  filter:brightness(1.2) drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .5px #fff);animation:settle 2.4s var(--ease-out) .2s both}
@keyframes settle{from{transform:rotate(-38deg) scale(.95);opacity:0}to{transform:none;opacity:1}}
@keyframes bezel{from{transform:rotate(26deg);opacity:0}to{transform:none;opacity:.6}}
@media (max-width:900px){.instrument{right:-38vw;width:min(92vw,70vh);opacity:.38}}

/* ---------- hero entrance (transitions.dev "texts reveal"), hero only, once ---------- */
.rise > *{animation:rise var(--t-slow) var(--ease-out) both}
.rise > *:nth-child(2){animation-delay:80ms}
.rise > *:nth-child(3){animation-delay:160ms}
.rise > *:nth-child(4){animation-delay:240ms}
.rise > *:nth-child(5){animation-delay:320ms}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---------- course line: stops along a drawn route ---------- */
.course{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,64px)}
.course__line{position:absolute;left:0;right:0;top:15px;height:2px;z-index:0;overflow:visible;pointer-events:none}
.course__line path{stroke:currentColor;stroke-width:2;stroke-dasharray:10 8;fill:none;opacity:.55}
.stop{position:relative;z-index:1}
.stop__mark{width:32px;height:32px;margin-bottom:22px}
.stop .t-h3{margin-bottom:10px}
.stop__price{font:800 var(--fs-l)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px;opacity:.9}
.stop p{max-width:38ch}
.light .stop p{color:var(--ink-2)}
.dark .stop p,.deep .stop p{color:var(--foam-2)}
@media (max-width:820px){
  .course{grid-template-columns:1fr;gap:36px;padding-left:52px}
  .course__line{left:15px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .stop__mark{position:absolute;left:-52px;top:0}
}
.js .course__line path{stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 1.4s var(--ease-out)}
.js .course.is-in .course__line path{stroke-dashoffset:0}

/* ---------- chart legend (the eight checks) ---------- */
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px);margin:clamp(28px,4vw,44px) 0 0;padding:0;list-style:none}
.legend li{display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid rgba(234,245,250,.18)}
.light .legend li{border-top-color:rgba(16,41,77,.18)}
.legend svg{width:22px;height:22px;margin-top:2px;color:var(--cyan)}
.light .legend svg{color:var(--chartred)}
.legend b{display:block;font:800 var(--fs-xl)/1 var(--display);text-transform:uppercase;margin-bottom:4px}
.legend span{font-size:var(--fs-m);color:var(--foam-2);line-height:1.5}
.light .legend span{color:var(--ink-2)}
@media (max-width:700px){.legend{grid-template-columns:1fr}}
/* survey line drawn across as the legend comes into view */
.survey{position:relative}
.survey__line{position:absolute;left:0;right:0;top:-18px;width:100%;height:18px;color:var(--cyan);overflow:visible}
.survey__line path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-dasharray:6 6}
.js .survey__line path{stroke-dashoffset:var(--len,1600);transition:stroke-dashoffset 1.6s var(--ease-out)}
.js .survey.is-in .survey__line path{stroke-dashoffset:0}

/* ---------- stats (soundings) ---------- */
.soundings{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(32px,4vw,52px)}
.sounding b{display:block;font:900 clamp(3rem,2rem + 4vw,4.5rem)/.9 var(--display)}
.sounding span{display:block;margin-top:10px;color:var(--foam-2);max-width:24ch}
@media (max-width:820px){.soundings{grid-template-columns:1fr 1fr}}

/* ---------- chart key (sea / land / air; categories) ---------- */
.key{margin:clamp(28px,4vw,44px) 0 0;padding:0;list-style:none}
.key > li{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:12px 32px;padding:22px 0;border-top:1px solid rgba(234,245,250,.18)}
.light .key > li{border-top-color:rgba(16,41,77,.18)}
.key h3{font:800 var(--h4)/1 var(--display);text-transform:uppercase;display:flex;gap:12px;align-items:center}
.key h3 svg{width:20px;height:20px;color:var(--cyan);flex:none}
.light .key h3 svg{color:var(--chartred)}
.key p{margin:0;color:var(--foam-2);line-height:1.7}
.light .key p{color:var(--ink-2)}
.key .dots span+span::before{content:"\00a0· ";opacity:.6}
@media (max-width:700px){.key > li{grid-template-columns:1fr}}

/* ---------- route (numbered real sequences: gear purchase, booking, partnership) ---------- */
.route{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:clamp(32px,4vw,52px);list-style:none;padding:0;counter-reset:r;position:relative}
.route li{position:relative;padding-top:52px}
.route li::before{counter-increment:r;content:counter(r);position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font:800 18px/1 var(--display);background:var(--cyan);color:#04121c}
.light .route li::before{background:var(--ink);color:var(--foam)}
.route li::after{content:"";position:absolute;top:17px;left:44px;right:-14px;border-top:2px dashed currentColor;opacity:.35}
.route li:last-child::after{display:none}
.route h3{font:800 var(--h4)/1 var(--display);text-transform:uppercase;margin-bottom:8px}
.route p{margin:0;color:var(--foam-2)}
.light .route p{color:var(--ink-2)}
@media (max-width:900px){.route{grid-template-columns:1fr;gap:0}.route li{padding:0 0 28px 56px}.route li::after{top:44px;left:17px;right:auto;bottom:6px;border-top:0;border-left:2px dashed currentColor}}

/* ---------- editorial list ---------- */
.elist{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0}
.elist li{border-top:1px solid rgba(234,245,250,.18)}
.light .elist li,.light2 .elist li{border-top-color:rgba(16,41,77,.2)}
.elist a,.elist .row{display:grid;grid-template-columns:minmax(220px,340px) 1fr auto;gap:12px 32px;align-items:baseline;padding:22px 0;text-decoration:none}
.elist h3{font:800 var(--h4)/1 var(--display);text-transform:uppercase}
.elist p{margin:0;color:var(--foam-2)}
.light .elist p,.light2 .elist p{color:var(--ink-2)}
.elist .arr{width:16px;height:12px;color:var(--cyan);transition:transform var(--t-med) var(--ease-out)}
.light .elist .arr,.light2 .elist .arr{color:var(--ink)}
.elist a:hover .arr{transform:translateX(5px)}
.elist a:hover h3{color:var(--cyan)}
.light .elist a:hover h3,.light2 .elist a:hover h3{color:var(--wyld)}
@media (max-width:760px){.elist a,.elist .row{grid-template-columns:1fr auto}.elist p{grid-column:1/-1;grid-row:2}}

/* ---------- tone cards (filled, no outline; used sparingly) ---------- */
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(28px,4vw,44px)}
.card{background:rgba(8,40,96,.62);padding:clamp(22px,2.4vw,30px);border-radius:2px}
.light .card,.light2 .card{background:rgba(255,255,255,.72)}
.card .t-h4{margin-bottom:10px}
.card p{color:var(--foam-2);margin:0}
.light .card p,.light2 .card p{color:var(--ink-2)}
.card .more{margin-top:16px}
.card--ink{background:var(--ink);color:var(--foam)}
.card--ink p{color:var(--foam-2)!important}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- service groups (What we do) ---------- */
.svc{display:grid;grid-template-columns:minmax(240px,.8fr) 2fr;gap:12px clamp(28px,4vw,64px);padding:clamp(28px,3vw,40px) 0;border-top:1px solid rgba(234,245,250,.18)}
.light .svc{border-top-color:rgba(16,41,77,.2)}
.svc h3{font:800 var(--h4)/1 var(--display);text-transform:uppercase}
.svc .tag{color:var(--foam-3);margin-top:8px;font-size:var(--fs-m)}
.light .svc .tag{color:var(--ink-3)}
.svc dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
.svc dt{font-weight:600;font-size:var(--fs-l);line-height:1.3}
.svc dd{margin:4px 0 0;color:var(--foam-2);line-height:1.55}
.light .svc dd{color:var(--ink-2)}
.soon{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:4px;font:600 12px/1.2 var(--text);letter-spacing:.04em;background:rgba(25,195,230,.16);color:var(--cyan);vertical-align:middle}
.light .soon{background:rgba(16,41,77,.1);color:var(--ink)}
@media (max-width:820px){.svc,.svc dl{grid-template-columns:1fr}}

/* ---------- accordion (transitions.dev "accordion") ---------- */
.acc{border-top:1px solid rgba(234,245,250,.18)}
.light .acc{border-top-color:rgba(16,41,77,.2)}
.acc summary{list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;cursor:pointer;
  font:600 var(--fs-l)/1.35 var(--text)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .car{flex:none;width:14px;height:9px;transition:transform var(--t-med) var(--ease-out)}
.acc[open] summary .car{transform:rotate(180deg)}
.acc .ans{padding:0 0 24px;max-width:70ch;color:var(--foam-2)}
.light .acc .ans{color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .acc::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-med) var(--ease-out),content-visibility var(--t-med) allow-discrete}
  .acc[open]::details-content{block-size:auto}
}
.jump{position:sticky;top:var(--head-h);z-index:5;display:flex;gap:6px;flex-wrap:wrap;padding:12px 0;background:var(--lt-a)}
.jump a{padding:8px 14px;border-radius:var(--radius);background:rgba(16,41,77,.07);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.jump a:hover{background:rgba(16,41,77,.14)}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form .row2{grid-template-columns:1fr}}
.field label{display:block;font:600 14px/1.2 var(--text);margin-bottom:8px;color:var(--foam-2)}
.light .field label{color:var(--ink)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:12px 16px;border-radius:var(--radius);font:400 var(--fs-m)/1.4 var(--text);
  border:1px solid rgba(234,245,250,.34);background:rgba(5,13,36,.42);color:var(--foam)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(234,245,250,.62)}
.light .field input,.light .field textarea,.light .field select{border-color:rgba(16,41,77,.4);background:#fff;color:var(--ink)}
.light .field input::placeholder,.light .field textarea::placeholder{color:#5a6a82}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,195,230,.28)}
.field.bad input,.field.bad textarea{border-color:#ff9d84}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}
.msg{font-size:15px;line-height:1.5;min-height:1.5em}
.msg.err{color:#ffb4a2}
.light .msg.err{color:#a3240b}
.next{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--foam-2)}
.light .next{color:var(--ink-2)}
.next li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.next li::before{content:"";width:8px;height:8px;margin-top:8px;background:var(--cyan)}
.light .next li::before{background:var(--chartred)}
/* error shake + success check (transitions.dev) */
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97)}
.done{display:grid;gap:12px;justify-items:start}
.done svg{width:56px;height:56px;color:var(--cyan)}
.done svg circle{stroke-dasharray:160;stroke-dashoffset:160;animation:draw .5s var(--ease-out) forwards}
.done svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .35s var(--ease-out) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.inline-check{display:flex;gap:10px;flex-wrap:wrap}
.inline-check .field{flex:1 1 260px}
.inline-check .btn{flex:none}

/* ---------- the free-check panel (slides in from the right) ---------- */
.panel{position:fixed;inset:0 0 0 auto;z-index:200;width:min(480px,100%);height:100%;max-height:none;max-width:100%;margin:0;border:0;padding:0;
  background:var(--deep);color:var(--foam);overflow-y:auto;transform:translateX(100%);transition:transform var(--t-med) var(--ease-out),overlay var(--t-med) allow-discrete,display var(--t-med) allow-discrete}
.panel[open]{transform:none}
@starting-style{.panel[open]{transform:translateX(100%)}}
.panel::backdrop{background:rgba(2,8,26,.62)}
.panel__in{padding:28px clamp(22px,4vw,36px) 40px}
.panel__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.x{width:44px;height:44px;border:0;border-radius:var(--radius);background:rgba(234,245,250,.08);color:var(--foam);cursor:pointer;display:grid;place-items:center}
.x svg{width:16px;height:16px}

/* ---------- phone call bar ---------- */
.callbar{display:none}
@media (max-width:760px){
  body{padding-bottom:76px}
  .callbar{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;position:fixed;inset:auto 0 0 0;z-index:90;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--abyss);border-top:1px solid rgba(234,245,250,.14)}
  .callbar .btn{min-height:52px;padding:0 14px;width:100%}
}

/* ---------- footer ---------- */
.site-foot{background:var(--night);border-top:1px solid rgba(234,245,250,.16);padding:clamp(48px,6vw,72px) 0 40px}
.site-foot .grid{display:grid;grid-template-columns:1fr 1.6fr;gap:48px}
.site-foot .brand img{width:32px;height:32px}
.site-foot .wordmark{font-size:24px}
.foot-meta{margin-top:16px;color:var(--foam-3);line-height:1.75}
.foot-meta a{color:var(--foam);text-decoration:none;font-weight:600}
.foot-meta a:hover{color:var(--cyan)}
.fam-h{font:600 var(--fs-s)/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--foam-3);margin:0 0 14px}
.fam{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0}
.fam a{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.fam img{width:30px;height:30px;flex:none}
.fam b{display:block;font-size:15px;font-weight:600}
.fam span{display:block;font-size:var(--fs-s);color:var(--foam-3)}
.fam a:hover b{color:var(--cyan)}
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid rgba(234,245,250,.12);
  font-size:var(--fs-s);color:var(--foam-3)}
.legal a{color:var(--foam-3)}
@media (max-width:900px){.site-foot .grid{grid-template-columns:1fr}.fam{grid-template-columns:1fr 1fr}}

/* ---------- article ---------- */
.article{display:grid;grid-template-columns:1fr 320px;gap:clamp(32px,5vw,72px)}
.article .prose{max-width:66ch}
.prose p{font-size:17px;line-height:1.75;color:var(--foam-2)}
.prose h2{font:900 var(--h3)/.95 var(--display);text-transform:uppercase;margin:44px 0 14px}
.callout{background:var(--navy);border-left:3px solid var(--cyan);padding:20px 22px;margin:0 0 20px;font-size:17px;line-height:1.65}
.pull{font-size:var(--fs-xl);line-height:1.45;border-left:2px solid var(--cyan);padding-left:20px;margin:22px 0 0;max-width:40ch}
.rail-box{background:var(--navy);padding:24px;border-radius:2px;margin-bottom:24px}
.toc{list-style:none;margin:0 0 28px;padding:0;line-height:2.1}
.toc a{color:var(--foam-2);text-decoration:none}
.toc a:hover{color:var(--cyan)}
@media (max-width:980px){.article{grid-template-columns:1fr}}

/* ---------- utilities ---------- */
.center{text-align:center}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
@media (max-width:820px){.cols-2{grid-template-columns:1fr}}
.tagline{margin-top:28px;font-size:var(--fs-l);line-height:1.5;color:var(--cyan);max-width:60ch}
.light .tagline{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .course__line path,.js .survey__line path{stroke-dashoffset:0}
}

/* ---------- additions ---------- */
.menu--two{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:22px 30px;min-width:480px}
.wordmark b{color:#6d86f2}
.only-phone{display:none}
@media (max-width:760px){.only-phone{display:block}.only-desk{display:none}}
.split .soundings{grid-template-columns:1fr 1fr;gap:28px 24px}
.tagline a,.body a,.lede a,.assure a,.small a{color:inherit;font-weight:600}
.stop__mark{display:block;color:var(--cyan)}
.stop__mark svg{width:100%;height:100%;background:var(--dk-b);border-radius:50%}
.light .stop__mark{color:var(--chartred)}
.light .stop__mark svg{background:var(--lt-b)}
.lede--strong{color:var(--foam)!important;font-size:var(--fs-xl);line-height:1.5}
@media (max-width:760px){.lede--strong{font-size:var(--fs-l)}}
a[href^="tel:"]{white-space:nowrap}
@media (max-width:820px){
  .course__line{display:none}
  .course::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;border-left:2px dashed currentColor;opacity:.45}
}
@media (max-width:760px){.deck{font-size:var(--fs-l)}}
.legend--names{grid-template-columns:repeat(4,1fr)}
.legend--names li{align-items:center}
.legend--names b{margin:0}
@media (max-width:900px){.legend--names{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.legend--names{grid-template-columns:1fr}}
.route--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.route--3{grid-template-columns:1fr}}
/* ---------- pricing plans (filled tone panels, no outline) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(28px,4vw,44px)}
.plan{background:rgba(255,255,255,.78);padding:clamp(24px,2.6vw,34px);border-radius:2px;display:flex;flex-direction:column}
.plan:nth-child(2){background:var(--ink);color:var(--foam)}
.plan__sub{margin:10px 0 0;font-size:var(--fs-l);line-height:1.35}
.plan__price{font:800 var(--fs-xl)/1 var(--display);text-transform:uppercase;margin:18px 0 16px;color:var(--chartred)}
.plan:nth-child(2) .plan__price{color:var(--cyan)}
.plan ul{list-style:none;margin:0 0 20px;padding:0;flex:1}
.plan li{padding:9px 0;border-top:1px solid rgba(16,41,77,.14)}
.plan:nth-child(2) li{border-top-color:rgba(234,245,250,.18);color:var(--foam-2)}
.plan__foot{margin:0;font-weight:600}
.plan__foot a{color:inherit}
.plan .soon{margin-left:6px}
.plan:nth-child(2) .soon{background:rgba(25,195,230,.16);color:var(--cyan)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.faq-group{padding-top:clamp(40px,5vw,64px)}
.faq-group .t-h3{margin-bottom:14px}
.gloss{margin:clamp(28px,4vw,44px) 0 0}
.gloss .term{display:grid;grid-template-columns:minmax(200px,.5fr) 1.5fr;gap:8px 40px;padding:20px 0;border-top:1px solid rgba(16,41,77,.2)}
.gloss dt{font:800 var(--h4)/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.gloss dd{margin:0;color:var(--ink-2);font-size:var(--fs-l);line-height:1.6;max-width:62ch}
@media (max-width:760px){.gloss .term{grid-template-columns:1fr}}
.hero.hero--short{min-height:0}
.legend--2{grid-template-columns:1fr 1fr}
.legend--2 b{font-size:var(--fs-l)}
@media (max-width:480px){.legend--2{grid-template-columns:1fr}}