/* Noygear Business Podcast site.
   Layout and rhythm follow blackdragoncap.com: fixed hairline sidebar, one
   blurred background video under every page, light display type over tiny
   heavy labels, 2px translucent rules, square corners, 8rem section rhythm.
   Colour is the Midnight Tangerine kit chosen on 3 October 2026. */

@font-face{font-family:"Metropolis";src:url("fonts/metropolis-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Metropolis";src:url("fonts/metropolis-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Metropolis";src:url("fonts/metropolis-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Metropolis";src:url("fonts/metropolis-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --base:#0a1f36;          /* deep navy, the page */
  --navy:#0e2a47;          /* brand navy, panels */
  --blue:#2a6fb8;
  --sky:#8fb8e8;
  --tang:#f07a2a;
  --tang-dark:#d9661a;
  --paper:#f6f3ee;
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --faint:rgba(255,255,255,.58);
  --rule:rgba(255,255,255,.12);
  --rule-strong:rgba(255,255,255,.2);
  --display:"Bai Jamjuree",system-ui,sans-serif;
  --body:"Metropolis",system-ui,-apple-system,"Segoe UI",sans-serif;
  --side:12rem;
  --pad-x:8rem;
  --pad-l:calc(var(--side) + 8rem);
  --ease:.4s ease;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--text);font:500 1rem/2 var(--body);letter-spacing:.0625rem;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--tang);color:var(--base)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--tang);color:var(--base);padding:.5rem 1rem;z-index:100}
.skip-link:focus{left:1rem}
:focus-visible{outline:2px solid var(--tang);outline-offset:3px}

/* ---------- Background video, under every page ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--base)}
.bg video,.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(4rem);transition:opacity 1.6s ease,filter 1.6s ease}
.bg.ready video,.bg.ready img{opacity:.8;filter:blur(.125rem)}
.bg.scrolled video,.bg.scrolled img{filter:blur(0)}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(10,31,54,.92) 0%,rgba(10,31,54,.55) 50%,rgba(10,31,54,.15) 100%)}
.bg::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,31,54,.88);opacity:0;transition:opacity .6s ease}
.bg.scrolled::before{opacity:1}
.bg::after{z-index:0}

/* ---------- Sidebar ---------- */
.side{position:fixed;top:0;left:0;bottom:0;width:var(--side);border-right:2px solid var(--rule);display:flex;flex-direction:column;align-items:center;padding:2rem 0 1.5rem;z-index:20;background:linear-gradient(180deg,rgba(10,31,54,.35),rgba(10,31,54,.1));transition:width var(--ease)}
.side:hover{width:12.5rem}
.brand{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;transition:transform var(--ease)}
.brand:hover{transform:scale(1.05)}
.brand img{width:44px;height:auto}
.brand span{font:800 .62rem/1.4 var(--body);letter-spacing:.14rem;text-transform:uppercase;text-align:center;color:var(--text)}
.brand span b{display:block;color:var(--tang);font-weight:800}
.menu{list-style:none;margin:3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem;text-align:center}
.menu a{display:block;padding:.45rem .5rem;font:800 .66rem/1.5 var(--body);letter-spacing:.125rem;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color var(--ease)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--tang)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.side-foot a{font:800 .6rem/1 var(--body);letter-spacing:.12rem;text-transform:uppercase;color:var(--faint);text-decoration:none}
.side-foot a:hover{color:var(--text)}

/* Mobile header */
.mbar{display:none}

/* ---------- Main field ---------- */
main{position:relative}
.sec{padding:8rem var(--pad-x) 8rem var(--pad-l);position:relative}
.sec + .sec{padding-top:0}
.rule{height:2px;background:var(--rule);margin:0 0 0 var(--side)}
.wrap{max-width:84rem}
.label{font:800 .75rem/1.6 var(--body);letter-spacing:.125rem;text-transform:uppercase;color:var(--text);margin:0 0 1.25rem}
.label.t{color:var(--tang)}
.label.s{color:var(--sky)}
.more{font:800 .75rem/1.6 var(--body);letter-spacing:.125rem;text-transform:uppercase;color:var(--tang);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.more::after{content:"\203A";font-size:1.1rem;transition:transform var(--ease)}
.more:hover::after{transform:translateX(4px)}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;margin-bottom:1rem}

h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:.03rem;margin:0}
h1{font-size:5rem;line-height:1.2}
h2{font-size:1.75rem;line-height:1.5}
h3{font-size:1.75rem;line-height:1.4;font-weight:400}
p{margin:0 0 1.5rem}
.lede{font-family:var(--display);font-weight:300;font-size:1.75rem;line-height:1.6;max-width:62rem;margin:0}
.lede em{font-style:normal;color:var(--tang);font-weight:500}
.copy{color:var(--muted);max-width:40rem}
.copy a,.lede a,.prose a{text-decoration:underline dotted 1px;text-underline-offset:.3em;font-weight:700}
.prose{max-width:46rem;color:var(--muted)}
.prose h2{color:var(--text);margin:3rem 0 1rem}
.prose ul{padding-left:1.2rem}
.prose li{margin:.4rem 0}

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:8rem var(--pad-x) 6rem var(--pad-l);position:relative}
.hero.short{min-height:62vh;padding-top:10rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:4rem;align-items:center;width:100%}
.hero h1{max-width:52rem}
.hero .sub{font-family:var(--display);font-weight:300;font-size:1.5rem;line-height:1.6;color:var(--muted);margin:1.5rem 0 0;max-width:44rem}
.cue{display:inline-flex;align-items:center;gap:1rem;margin-top:4rem;text-decoration:none;color:var(--muted);font:800 .7rem/1 var(--body);letter-spacing:.125rem;text-transform:uppercase}
.cue i{width:3rem;height:3rem;border:2px solid var(--rule-strong);border-radius:50%;display:grid;place-items:center;font-style:normal;transition:border-color var(--ease)}
.cue i::before{content:"";width:2px;height:1.4rem;background:var(--text);display:block}
.cue:hover i{border-color:var(--tang)}
.card{position:relative;border:2px solid var(--rule-strong);padding:2rem;overflow:hidden;background:rgba(14,42,71,.55);transition:transform var(--ease)}
.card:hover{transform:scale(1.02)}
.card .ghost{position:absolute;right:1rem;top:1rem;width:2.75rem;opacity:.25;transition:opacity var(--ease);pointer-events:none}
.card:hover .ghost{opacity:.9}
.card h2{font-size:1.5rem;margin-bottom:1rem}
.card p{color:var(--muted);font-size:.9rem;line-height:1.8}
.card .rl{height:2px;background:var(--rule-strong);margin:1rem 0 1.25rem}

/* Buttons: stone rectangles, 3rem tall, 2px border */
.btn{display:inline-flex;align-items:center;gap:.75rem;height:3rem;padding:0 1.5rem;border:2px solid var(--paper);background:var(--paper);color:var(--base);font:800 .72rem/1 var(--body);letter-spacing:.125rem;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.btn::after{content:"\203A";font-size:1.1rem;transition:transform var(--ease)}
.btn:hover{background:transparent;color:var(--paper)}
.btn:hover::after{transform:translateX(3px)}
.btn.ghost-btn{background:transparent;color:var(--paper);border-color:var(--rule-strong)}
.btn.ghost-btn:hover{border-color:var(--paper)}
.btn.dark{background:var(--base);border-color:var(--base);color:var(--paper)}
.btn.dark:hover{background:transparent;color:var(--base)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;margin-top:5rem}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:6.25rem;line-height:1;color:var(--tang)}
.stat b sup{font-size:40%;color:var(--faint);vertical-align:top;margin-left:.2rem;position:relative;top:.4rem}
.stat span{display:block;margin-top:1rem;font:800 .72rem/1.6 var(--body);letter-spacing:.1rem;text-transform:uppercase;color:var(--muted);max-width:14rem}

/* ---------- Episode list (portfolio rows) ---------- */
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem;margin-top:3rem}
.row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 1.5rem;gap:1.25rem;align-items:center;padding:1.6rem 0;border-bottom:2px solid var(--rule);text-decoration:none;color:inherit}
.row h3{font-size:1.35rem;line-height:1.35}
.row h3 small{display:block;font:800 .78rem/1.6 var(--body);letter-spacing:.12rem;text-transform:uppercase;color:var(--tang);margin-bottom:.3rem}
.row dl{margin:0}
.row dt{font:500 .82rem/1.6 var(--body);color:var(--muted);letter-spacing:.06rem}
.row dd{margin:0;font:700 .98rem/1.5 var(--body);color:#fff}
.row .chev{font-size:1.4rem;color:var(--muted);transition:transform var(--ease),color var(--ease)}
.row:hover .chev{transform:translateX(4px);color:var(--tang)}
.rows.single{grid-template-columns:minmax(0,1fr)}

/* ---------- Tiles (methodology) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:3rem}
.tile{position:relative;min-height:26rem;border:2px solid var(--rule-strong);padding:2rem;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;text-decoration:none;color:inherit;background:var(--navy)}
.tile .ph{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.8);transition:filter var(--ease),transform 1.2s ease}
.tile:hover .ph{filter:brightness(.64);transform:scale(1.04)}
.tile .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,54,.75),rgba(10,31,54,.2) 55%,rgba(10,31,54,.7))}
.tile > *:not(.ph){position:relative}
.tile p{color:var(--muted);font-size:.9rem;line-height:1.8;margin-top:auto}
.ph-grid{background:
  radial-gradient(circle at 70% 30%,rgba(240,122,42,.35),transparent 45%),
  repeating-linear-gradient(0deg,rgba(143,184,232,.08) 0 1px,transparent 1px 28px),
  repeating-linear-gradient(90deg,rgba(143,184,232,.08) 0 1px,transparent 1px 28px),
  linear-gradient(160deg,#123a63,#0a1f36)}
.ph-door{background:
  linear-gradient(100deg,transparent 40%,rgba(240,122,42,.42) 50%,transparent 62%),
  repeating-linear-gradient(90deg,rgba(143,184,232,.07) 0 2px,transparent 2px 46px),
  linear-gradient(200deg,#16426e,#0a1f36)}
.ph-chip{background:
  radial-gradient(circle at 30% 70%,rgba(240,122,42,.3),transparent 40%),
  repeating-linear-gradient(45deg,rgba(143,184,232,.09) 0 1px,transparent 1px 18px),
  repeating-linear-gradient(-45deg,rgba(143,184,232,.06) 0 1px,transparent 1px 18px),
  linear-gradient(140deg,#0e2a47,#071629)}

/* ---------- Listen ---------- */
.listen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--rule);margin-top:3rem}
.listen a,.listen span{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;border-bottom:2px solid var(--rule);margin-right:3rem;text-decoration:none;font:700 .9rem/1.4 var(--body)}
.listen em{font:800 .62rem/1 var(--body);letter-spacing:.12rem;text-transform:uppercase;font-style:normal;color:var(--faint)}
.listen a:hover em{color:var(--tang)}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.25rem;max-width:46rem;margin-top:2rem}
.form fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.form legend{font:800 .72rem/1.6 var(--body);letter-spacing:.125rem;text-transform:uppercase;color:var(--sky);margin-bottom:1rem;padding:0}
.form label{display:grid;gap:.4rem;font:700 .78rem/1.4 var(--body);color:var(--muted);min-width:0}
.form label.full{grid-column:1/-1}
.form input,.form textarea,.form select{width:100%;min-width:0;background:rgba(10,31,54,.6);border:2px solid var(--rule-strong);color:var(--text);font:500 1rem/1.5 var(--body);padding:.8rem 1rem;border-radius:0;transition:border-color var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--tang)}
.form textarea{min-height:8rem;resize:vertical}
.form .note{font-size:.78rem;color:var(--faint);line-height:1.7;margin:0}
.form .status{min-height:1.5rem;font-weight:700;margin:0}
.form .status.ok{color:var(--sky)}
.form .status.err{color:var(--tang)}
.inline-form{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;max-width:34rem}
.inline-form input{flex:1 1 14rem;min-width:0;background:rgba(10,31,54,.6);border:2px solid var(--rule-strong);color:var(--text);font:500 1rem/1.5 var(--body);padding:.6rem 1rem;border-radius:0;height:3rem}

/* ---------- Steps, cards grids ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:3rem;border-top:2px solid var(--rule)}
.step{padding:2rem 2rem 2rem 0;border-right:2px solid var(--rule);margin-right:2rem}
.step:last-child{border-right:0;margin-right:0}
.step b{display:block;font-family:var(--display);font-weight:300;font-size:3.5rem;line-height:1;color:var(--tang);margin-bottom:1.25rem}
.step h3{font-size:1.25rem;margin-bottom:.75rem}
.step p{color:var(--muted);font-size:.9rem;line-height:1.8;margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:3rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin-top:3rem}
.box{border:2px solid var(--rule-strong);padding:2rem;background:rgba(14,42,71,.45)}
.box h3{font-size:1.3rem;margin-bottom:.75rem}
.box p{color:var(--muted);font-size:.9rem;line-height:1.8;margin:0}
.box .label{margin-bottom:.75rem}
.list{list-style:none;padding:0;margin:2rem 0 0;border-top:2px solid var(--rule);max-width:56rem}
.list li{padding:1.1rem 0;border-bottom:2px solid var(--rule);font-family:var(--display);font-weight:300;font-size:1.2rem;line-height:1.6}

/* ---------- Hosts ---------- */
.hosts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin-top:3rem}
.host{border:2px solid var(--rule-strong);background:rgba(14,42,71,.45)}
.host .face{aspect-ratio:4/5;background:linear-gradient(160deg,#16426e,#0a1f36);display:grid;place-items:center;overflow:hidden}
.host .face img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.92)}
.host .face span{font-family:var(--display);font-weight:300;font-size:3.5rem;color:var(--sky)}
.host div.t{padding:1.5rem}
.host h3{font-size:1.3rem}
.host .label{margin:.25rem 0 .9rem;color:var(--tang)}
.host p{color:var(--muted);font-size:.85rem;line-height:1.8;margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:56rem;margin-top:2rem;border-top:2px solid var(--rule)}
.faq details{border-bottom:2px solid var(--rule);padding:1.2rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:var(--display);font-weight:400;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--tang);font-size:1.4rem;line-height:1;transition:transform var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:1rem 0 0;max-width:46rem}

/* ---------- Assessment ---------- */
.progress{position:sticky;top:0;z-index:5;padding:1rem 0;background:linear-gradient(180deg,var(--base) 70%,transparent);display:flex;align-items:center;gap:1rem}
.progress .bar{flex:1;height:2px;background:var(--rule)}
.progress .bar i{display:block;height:100%;width:0;background:var(--tang);transition:width var(--ease)}
.progress span{font:800 .7rem/1 var(--body);letter-spacing:.12rem;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.q{border-top:2px solid var(--rule);padding:3rem 0}
.q h3{font-size:1.6rem;margin:0 0 .6rem}
.q > p{color:var(--muted);max-width:46rem}
.opts{display:grid;gap:.75rem;margin-top:1.5rem;max-width:56rem}
.opt{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start;text-align:left;padding:1rem 1.25rem;border:2px solid var(--rule-strong);background:rgba(10,31,54,.55);color:var(--text);font:500 .92rem/1.7 var(--body);letter-spacing:.03rem;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.opt b{font-family:var(--display);font-weight:300;font-size:1.6rem;line-height:1;color:var(--sky)}
.opt:hover{border-color:var(--sky)}
.opt[aria-pressed="true"]{border-color:var(--tang);background:rgba(240,122,42,.1)}
.opt[aria-pressed="true"] b{color:var(--tang)}
.results{border:2px solid var(--tang);padding:2.5rem;margin-top:3rem;background:rgba(14,42,71,.7)}
.results[hidden]{display:none}
.res-grid{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:3rem;align-items:center}
.radar{width:100%;height:auto}
.radar-ax{font:800 10px var(--body);letter-spacing:1px;text-transform:uppercase;fill:rgba(255,255,255,.7)}
.band-list{list-style:none;padding:0;margin:0}
.band-list li{padding:.9rem 0;border-bottom:2px solid var(--rule)}
.band-list b{font-family:var(--display);font-weight:400;font-size:1.1rem}
.band-list em{font-style:normal;color:var(--tang);font:800 .68rem/1 var(--body);letter-spacing:.12rem;text-transform:uppercase;margin-left:.6rem}
.band-list p{color:var(--muted);font-size:.85rem;line-height:1.7;margin:.3rem 0 0}

/* ---------- Draft marker for copy awaiting sign-off ---------- */
.draft{display:inline-block;border:2px dashed var(--tang);color:var(--tang);font:800 .62rem/1 var(--body);letter-spacing:.12rem;text-transform:uppercase;padding:.45rem .7rem;margin-bottom:1.5rem}

/* ---------- Video embed ---------- */
.embed{position:relative;aspect-ratio:16/9;border:2px solid var(--rule-strong);background:var(--navy);margin-top:3rem;max-width:64rem}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed .soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font:800 .75rem/1.6 var(--body);letter-spacing:.125rem;text-transform:uppercase}

/* ---------- Footer split ---------- */
.foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:80vh;margin-left:var(--side);border-top:2px solid var(--rule)}
.foot-l{padding:8rem 4rem 4rem 8rem;background:rgba(10,31,54,.75)}
.foot-l .links{list-style:none;padding:0;margin:2rem 0 0;border-top:2px solid var(--rule)}
.foot-l .links a{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:2px solid var(--rule);text-decoration:none;font:700 .85rem/1.4 var(--body)}
.foot-l .links a::after{content:"\203A";color:var(--muted);transition:transform var(--ease)}
.foot-l .links a:hover::after{transform:translateX(4px);color:var(--tang)}
.foot-r{background:var(--tang);color:var(--base);padding:8rem 4rem 3rem;display:flex;flex-direction:column}
.foot-r h2{font-family:var(--body);font-weight:800;font-size:2.4rem;line-height:1.2;letter-spacing:0;margin-bottom:2rem}
.foot-r p{max-width:26rem;font-weight:500;line-height:1.8}
.foot-r .small{margin-top:auto;font-size:.72rem;line-height:1.8;letter-spacing:.06rem}
.foot-r .small a{color:var(--base);font-weight:800}
.foot-r .mark{width:54px;margin-bottom:1.25rem;filter:brightness(0) saturate(100%) invert(10%) sepia(35%) saturate(2400%) hue-rotate(190deg)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transition:opacity .8s ease}
.rv.in{opacity:1}

/* ---------- Breakpoints (Black Dragon steps) ---------- */
@media (max-width:1500px){h1{font-size:4.5rem}:root{--pad-x:6rem;--pad-l:calc(var(--side) + 6rem)}}
@media (max-width:1200px){
  h1{font-size:3rem}
  :root{--pad-x:4rem;--pad-l:calc(var(--side) + 4rem)}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .card{max-width:26rem}
  .rows{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:18rem}
  .hosts,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(2){border-right:0;margin-right:0}
  .stat b{font-size:4.5rem}
  .foot-l{padding:6rem 3rem 3rem 4rem}
  .res-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  :root{--side:0rem;--pad-x:1rem;--pad-l:1rem}
  body{font-size:.95rem;line-height:1.9}
  h1{font-size:2.25rem;line-height:1.3}
  h2{font-size:1.4rem}
  .lede{font-size:1.3rem}
  .hero .sub{font-size:1.15rem}
  .side{transform:translateX(-100%);width:16rem;background:var(--base);transition:transform var(--ease);border-right:2px solid var(--rule)}
  .side:hover{width:16rem}
  body.nav-open .side{transform:none}
  .mbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:30;justify-content:space-between;align-items:center;padding:.9rem 1rem;background:linear-gradient(180deg,rgba(10,31,54,.92),rgba(10,31,54,.6));transition:transform var(--ease)}
  .mbar.hide{transform:translateY(-100%)}
  .mbar .brand{flex-direction:row;gap:.6rem}
  .mbar .brand img{width:26px}
  .mbar .brand span{text-align:left}
  .burger{width:2.75rem;height:2.75rem;background:none;border:2px solid var(--rule-strong);color:var(--text);display:grid;place-items:center;cursor:pointer;padding:0}
  .burger i,.burger i::before,.burger i::after{display:block;width:1.1rem;height:2px;background:currentColor;position:relative;content:""}
  .burger i::before{position:absolute;top:-6px}
  .burger i::after{position:absolute;top:6px}
  .sec{padding:4rem 1rem}
  .sec + .sec{padding-top:0}
  .rule{margin:0 1rem}
  .hero{padding:7rem 1rem 4rem;min-height:92vh}
  .hero.short{min-height:52vh;padding-top:8rem}
  .cue{margin-top:2.5rem}
  .stats{grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:3rem}
  .stat b{font-size:3.75rem}
  .row{grid-template-columns:minmax(0,1fr) 1.5rem;row-gap:.6rem}
  .row h3{grid-column:1/2}
  .row .chev{grid-column:2;grid-row:1}
  .row dl{grid-column:1/2}
  .listen{grid-template-columns:minmax(0,1fr)}
  .listen a,.listen span{margin-right:0}
  .form fieldset{grid-template-columns:minmax(0,1fr)}
  .hosts,.grid2,.grid4,.steps{grid-template-columns:minmax(0,1fr)}
  .step{border-right:0;margin-right:0;border-bottom:2px solid var(--rule);padding:1.5rem 0}
  .foot{grid-template-columns:minmax(0,1fr);margin-left:0}
  .foot-l{padding:4rem 1rem}
  .foot-r{padding:4rem 1rem 2rem}
  .results{padding:1.5rem}
  .q{padding:2rem 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}