/* iMPACT Pickleball · impactpaddle.com
   Design system · Marquee & Co.
   Type: Archivo (variable width/weight) + IBM Plex Mono for spec data
   Palette: carbon black, court chalk, iMPACT cobalt. Burn orange is reserved
   exclusively for CourtFull cross-references. */

:root{
  --carbon:#0A0B0D;
  --carbon-2:#131519;
  --chalk:#F4F5F2;
  --white:#FFFFFF;
  --blue:#2E5BEA;
  --blue-deep:#1B3FB8;
  --blue-bright:#4D77FF;
  --burn:#E8541F;
  --burn-deep:#B23407;
  --steel:#9BA1AB;
  --ink:#15181C;
  --ink-soft:#565C64;
  --line-d:#23262B;
  --line-l:#DFE2DD;
  --radius:4px;
  --max:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--carbon);overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--carbon);color:var(--chalk);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16.5px;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4.5vw,44px)}

/* ---------- type ---------- */
.display{
  font-weight:900;font-stretch:118%;text-transform:uppercase;
  line-height:.94;letter-spacing:.005em;
}
h1.display{font-size:clamp(33px,7.6vw,108px)}
h2.display{font-size:clamp(30px,4.6vw,58px)}
h3{font-weight:800;font-size:18px;letter-spacing:.01em;margin-bottom:8px}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-bright);
  margin-bottom:14px;display:block;
}
.light .eyebrow{color:var(--blue)}
.lede{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--steel);max-width:62ch}
.light .lede{color:var(--ink-soft)}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:60;background:rgba(10,11,13,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-d);
}
.navrow{display:flex;align-items:center;gap:26px;padding:15px 0}
.navlogo{display:flex;align-items:center;gap:11px;text-decoration:none}
.navlogo img{width:34px;height:auto;filter:invert(1)}
.navlogo b{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:17px;letter-spacing:.03em}
.navlogo b i{font-style:normal;color:var(--blue-bright)}
.navspacer{flex:1}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--chalk);opacity:.85;padding:6px 0;
  border-bottom:2px solid transparent;
}
.navlinks a:hover{opacity:1;border-bottom-color:var(--chalk)}
.navlinks a.active{opacity:1;border-bottom-color:var(--blue-bright)}
.navlinks .btn{border-bottom:none}
#navtoggle{display:none;background:none;border:1px solid var(--line-d);color:var(--chalk);
  padding:8px 12px;border-radius:var(--radius);font-family:inherit;font-weight:700;cursor:pointer}
@media (max-width:920px){
  #navtoggle{display:block}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carbon);
    flex-direction:column;align-items:flex-start;padding:18px clamp(18px,4.5vw,44px) 26px;
    gap:16px;border-bottom:1px solid var(--line-d)}
  .navlinks.open{display:flex}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Archivo';font-weight:800;font-size:14.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:15px 28px;
  border-radius:var(--radius);text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-deep)}
.btn.chalk{background:var(--chalk);color:var(--carbon)}
.btn.chalk:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--chalk);border-color:var(--chalk)}
.btn.ghost:hover{background:var(--chalk);color:var(--carbon)}
.light .btn.ghost{color:var(--ink);border-color:var(--ink)}
.light .btn.ghost:hover{background:var(--ink);color:#fff}
.btn.burnbtn{background:var(--burn-deep);color:#fff}
.btn.burnbtn:hover{background:#8F2905}
.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue-bright);outline-offset:2px}

/* ---------- sections ---------- */
section.band{padding:clamp(64px,9vw,120px) 0;background:var(--carbon)}
.band.light{background:var(--chalk);color:var(--ink)}
.band.dark2{background:var(--carbon-2)}
section.band.tight{padding:clamp(44px,6vw,72px) 0}
.light{background:var(--chalk);color:var(--ink)}
.dark2{background:var(--carbon-2)}
.rule{border:none;border-top:1px solid var(--line-d)}
.light .rule{border-top-color:var(--line-l)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--carbon);padding:clamp(48px,4.5vw,68px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,64px);align-items:center}
/* The paddle is much taller than the copy, so centering the two columns left a
   large gap above the eyebrow. Top aligning the copy on desktop lifts it
   without changing the paddle size. */
@media (min-width:881px){.hero-grid{align-items:start}.hero-grid > div:first-child{padding-top:clamp(8px,2.5vw,34px)}}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-img img.cutout{height:auto !important;width:min(78%,340px) !important;margin:0 auto}}
.hero-img{position:relative}
.hero-img img{border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:rgba(20,23,29,.85);color:var(--steel);border:1px solid var(--line-d);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;padding:8px 13px;border-radius:999px;
}
.hero-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-bright);flex:none}
.hero-img{display:flex;flex-direction:column;align-items:center}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- spec strip ---------- */
.specstrip{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);background:var(--carbon-2)}
.specstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.spec{
  padding:26px 22px;border-left:1px solid var(--line-d);
}
.spec:first-child{border-left:none}
.spec b{font-weight:900;font-stretch:118%;font-size:clamp(22px,2.6vw,34px);display:block;line-height:1.1}
.spec span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
@media (max-width:760px){
  .specstrip .wrap{grid-template-columns:1fr 1fr}
  .spec:nth-child(3){border-left:none}
}

/* ---------- cards / grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,44px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px)}
@media (max-width:880px){.grid2,.grid3{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line-d);border-radius:var(--radius);
  padding:26px;background:var(--carbon-2);
}
.light .card{border-color:var(--line-l);background:#fff}
.card .mono-h{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:12px;display:block;
}
.light .card .mono-h{color:var(--blue)}
.card p{color:var(--steel);font-size:15.5px}
.light .card p{color:var(--ink-soft)}

/* ---------- process rows ---------- */
.prow{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line-d)}
.light .prow{border-top-color:var(--line-l)}
.prow:last-of-type{border-bottom:1px solid var(--line-d)}
.light .prow:last-of-type{border-bottom-color:var(--line-l)}
.prow .pnum{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--blue-bright);padding-top:3px}
.light .prow .pnum{color:var(--blue)}
.prow p{color:var(--steel);max-width:62ch}
.light .prow p{color:var(--ink-soft)}
@media (max-width:640px){.prow{grid-template-columns:1fr;gap:6px}}

/* ---------- courtfull band ---------- */
section.band.cf-band{background:#F5F6F3;color:#191D1B;border-top:6px solid var(--burn)}
.cf-band .eyebrow{color:var(--burn-deep)}
.cf-band .lede{color:#5A615D}
.cf-band .card{border-color:#DDE1DC;background:#fff}
.cf-band .card .mono-h{color:var(--burn-deep)}
.cf-band .card p{color:#5A615D}

/* ---------- forms ---------- */
form .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:640px){form .frow{grid-template-columns:1fr}}
label.f{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.light label.f{color:var(--ink-soft)}
input.f,select.f,textarea.f{
  width:100%;padding:13px 14px;border:1px solid var(--line-d);border-radius:var(--radius);
  background:var(--carbon);color:var(--chalk);font-family:'Archivo';font-size:15.5px;
}
.light input.f,.light select.f,.light textarea.f{background:#fff;color:var(--ink);border-color:var(--line-l)}
textarea.f{min-height:120px;resize:vertical}
.hint{font-size:13px;color:var(--steel)}
.light .hint{color:var(--ink-soft)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-d);background:var(--carbon);padding:clamp(44px,6vw,72px) 0 34px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}
footer.site h4{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-bottom:14px}
footer.site a{color:var(--chalk);text-decoration:none;opacity:.85}
footer.site a:hover{opacity:1;text-decoration:underline}
footer.site ul{list-style:none}
footer.site li{margin-bottom:9px;font-size:15px}
.fnote{color:var(--steel);font-size:14px;max-width:56ch;line-height:1.65}
.fbottom{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-d);color:var(--steel);font-size:13px}
.fbottom a{color:var(--steel)}

/* ---------- blog ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px)}
@media (max-width:880px){.postgrid{grid-template-columns:1fr}}
.postcard{border:1px solid var(--line-l);border-radius:var(--radius);background:#fff;
  padding:24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s}
.postcard:hover{border-color:var(--blue)}
.postcard time{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.postcard h3{font-size:19px;line-height:1.3;font-weight:800}
.postcard p{color:var(--ink-soft);font-size:14.5px;line-height:1.55}
article.post{max-width:760px;margin:0 auto}
article.post h1{font-weight:900;font-stretch:112%;font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin-bottom:12px}
article.post .pmeta{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:34px}
.postbody{font-size:17.5px;line-height:1.75;color:#26292D}
.postbody h1,.postbody h2{font-weight:800;font-size:clamp(21px,2.4vw,27px);line-height:1.25;margin:38px 0 12px}
.postbody h3,.postbody h4{font-weight:800;font-size:19px;margin:30px 0 10px}
.postbody p{margin-bottom:18px}
.postbody ul,.postbody ol{margin:0 0 18px 24px}
.postbody li{margin-bottom:8px}
.postbody img{border-radius:var(--radius);margin:22px 0}
.postbody a{color:var(--blue)}
.postcta{margin-top:52px;border:1px solid var(--line-l);border-left:4px solid var(--blue);
  border-radius:var(--radius);background:#fff;padding:26px}
.postcta p{color:var(--ink-soft);margin:8px 0 16px}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- client wall ---------- */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{position:relative;margin:0;border:1px solid var(--line-d);border-radius:var(--radius);
  overflow:hidden;background:var(--carbon-2)}
.pcard::before{content:"";display:block;padding-top:125%}
.pcard img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:saturate(.92) contrast(1.04);transition:transform .35s ease}
.pcard:hover img{transform:scale(1.045)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.12) 0%,rgba(10,11,13,0) 28%,rgba(10,11,13,0) 55%,rgba(10,11,13,.82) 100%)}
.pcard .cap{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#E9EBEE}
.band.light .pcard{border-color:var(--line-l)}
@media (max-width:960px){.wall{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ---------- featured build ---------- */
.feature-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,60px);align-items:center}
.feature-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:960px){.feature-grid{grid-template-columns:1fr}}

/* ---------- founder ---------- */
.founder-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(26px,4.5vw,60px);align-items:center}
.founder-grid img{width:100%;max-width:420px;border-radius:var(--radius);border:1px solid var(--line-l);display:block}
@media (max-width:960px){.founder-grid{grid-template-columns:1fr}.founder-grid img{max-width:340px}}

/* ---------- showroom ---------- */
.showroom{margin:0;border:1px solid var(--line-d);border-radius:var(--radius);overflow:hidden}
.showroom img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}



/* ---------- hero read-through ----------
   Each headline line is underlined in turn, once, then the primary button
   wakes. The rhythm is meant to pull the eye down the three lines and land on
   the call to action. It never loops and it is skipped entirely under
   prefers-reduced-motion. */
.hero-h1 .ul{position:relative;display:inline-block}
.hero-h1 .ul::after{
  content:"";position:absolute;left:0;right:0;
  bottom:var(--ul-bottom,.069em);
  height:var(--ul-height,.055em);border-radius:2px;
  background:var(--blue-bright);
  clip-path:inset(0 100% 0 0);
}
.hero-h1 .ul-3::after{background:#FFFFFF}
.hero-h1 .ul-1::after{animation:ulsweep 1.25s cubic-bezier(.4,0,.2,1) .70s 1 both}
.hero-h1 .ul-2::after{animation:ulsweep 1.25s cubic-bezier(.4,0,.2,1) 1.85s 1 both}
.hero-h1 .ul-3::after{animation:ulsweep 1.25s cubic-bezier(.4,0,.2,1) 3.00s 1 both}
@keyframes ulsweep{
  0%{clip-path:inset(0 100% 0 0)}
  36%{clip-path:inset(0 0 0 0)}   /* drawn in .45s */
  72%{clip-path:inset(0 0 0 0)}   /* held .45s so the eye can land on it */
  100%{clip-path:inset(0 0 0 100%)}
}
/* The primary action lights up when the third line finishes underlining and
   then stays lit, so it still marks the main path for someone who scrolls back
   later. The glow lives on its own layer and only opacity is animated, which
   the compositor handles without repainting the button on every frame. */
.btn-wake{position:relative;isolation:isolate;transition:background .18s,border-color .18s}
.btn-wake::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 4px rgba(46,91,234,.55),0 0 30px 6px rgba(46,91,234,.70);
  opacity:0;
  animation:wakeon .55s ease-out 4.35s 1 forwards, breathe 5s ease-in-out 4.90s infinite;
}
.btn-wake{animation:wakefill .55s ease-out 4.35s 1 forwards}
@keyframes wakefill{to{background:#4A72F5;border-color:#7E99FF}}
@keyframes wakeon{from{opacity:0}to{opacity:1}}
/* a shallow breath: the glow layer scales and brightens a little, nothing flashes */
@keyframes breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.82;transform:scale(1.012)}
}
.btn-wake:hover::before{box-shadow:0 0 0 5px rgba(46,91,234,.72),0 0 40px 9px rgba(70,115,255,.92)}
.btn-wake:hover{background:#5A80FF;border-color:#A8BEFF}
/* both hero actions share one width so neither looks like the secondary one */
.hero .hero-ctas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:max-content;max-width:100%}
.hero .hero-ctas .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;white-space:nowrap}
@media (max-width:1100px){.hero .hero-ctas{grid-template-columns:1fr;width:100%;max-width:340px}}
/* Reduced motion: no sweep, no breath, but the button still rests lit so the
   hierarchy it provides is not lost. */
@media (prefers-reduced-motion:reduce){
  .hero-h1 .ul::after{animation:none;display:none}
  .btn.btn-wake{animation:none;background:#4A72F5;border-color:#7E99FF}
  .btn-wake::before{animation:none;opacity:1}
}

/* ---------- cutout renders ---------- */
.hero-img img.cutout{border-radius:0;box-shadow:none;width:min(78%,440px);margin:0 auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6))}
.float-imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.5vw,28px);align-items:end}
.float-imgs figure{margin:0;text-align:center}
.float-imgs img{width:min(100%,300px);margin:0 auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
.float-imgs figcaption{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:14px}

.hero-img img.cutout,.float-imgs img{object-fit:contain}
.showroom img{max-height:420px}
@media (max-width:640px){
  .hero-tag{font-size:9.5px;max-width:94%;letter-spacing:.09em}
}

/* ---------- custom paddles hero ---------- */
.cp-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.cp-minis{grid-template-columns:1fr 1fr;gap:12px}
.cp-hero h1.display{font-size:clamp(33px,5.8vw,84px)}
@media (max-width:960px){
  .cp-hero{grid-template-columns:1fr}
  .cp-minis{margin-top:6px}
}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 18px;font-family:'Archivo';font-weight:700;font-size:15.5px;
  color:var(--chalk);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--blue-bright);font-size:17px;flex:none}
.faq[open] summary::after{content:"\2013"}
.faq p{padding:0 18px 16px;color:var(--steel);font-size:14.5px;line-height:1.65;max-width:64ch}


/* ---------- launch program grids ---------- */
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wcard{border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon);padding:22px 20px}
.wcard .mono-h{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-bright);display:block}
.wcard h3{margin-top:10px;font-size:17.5px}
.wcard p{margin-top:8px;color:var(--steel);font-size:14px;line-height:1.6}
@media (max-width:1020px){.wgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.wgrid{grid-template-columns:1fr}}

/* ---------- floating Text Us pill ---------- */
#textus{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;text-decoration:none;
  font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:.96;
  transition:opacity .2s ease, transform .2s ease}
#textus:hover{background:var(--blue-bright);opacity:1}
#textus.tu-hide{opacity:0;transform:translateY(14px);pointer-events:none}
#textus .tu-l{display:none}
@media (hover:hover) and (pointer:fine){
  #textus .tu-s{display:none}
  #textus .tu-l{display:inline}
}
@media (max-width:640px){
  footer.site{padding-bottom:78px}
}


/* ---------- homepage router ---------- */
.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.route{display:block;border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon-2);
  padding:22px 20px;text-decoration:none;color:var(--chalk);transition:border-color .2s ease, transform .2s ease}
.route:hover{border-color:var(--blue);transform:translateY(-2px)}
.route h3{margin-top:10px;font-size:17px;color:var(--chalk)}
.route p{margin-top:8px;color:var(--steel);font-size:14px;line-height:1.6}
.route .route-cta{display:inline-block;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-bright)}
.route .mono-h{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);display:block}
.route-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.route-grid.three{grid-template-columns:1fr}}
@media (max-width:820px){.route-grid{grid-template-columns:1fr}}

.route[aria-pressed="true"]{border-color:var(--blue);background:#101726}
.route[aria-pressed="true"] .route-cta::after{content:"  \2713"}


/* ---------- Build Room mode accordion ---------- */
.modes{margin-top:26px;display:grid;gap:10px}
.mode{border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon-2);overflow:hidden}
.mode-head{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:0;cursor:pointer;padding:15px 18px;text-align:left;color:var(--chalk)}
.mode-head .mono-h{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel)}
.mode-title{font-family:'Archivo';font-weight:700;font-size:15.5px}
.mode-arrow{color:var(--blue-bright);margin-left:6px}
.mode.open{border-color:var(--blue);background:#0F1626}
.mode.open .mode-head .mono-h{color:var(--blue-bright)}
.mode-body{padding:2px 18px 20px}
.mode-body > p{color:var(--steel);font-size:14.5px;line-height:1.65;max-width:62ch}
.mode-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.gq{margin-top:18px}
.gq-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:9px}
.gq-chips{display:flex;flex-wrap:wrap;gap:8px}
.gchip{padding:9px 13px}
.gchip b{font-size:13.5px}
.gchip[aria-pressed="true"]{border-color:var(--blue);background:#101B33}
#rec{margin-top:22px;border:1px solid var(--blue);border-radius:var(--radius);background:var(--carbon);padding:18px}
.rec-spec{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin-top:12px}
.rec-spec dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);align-self:center}
.rec-spec dd{font-family:'Archivo';font-weight:700;font-size:14px;color:var(--chalk)}
#ref-done{margin-top:18px;border-top:1px solid var(--line-d);padding-top:16px}

/* ---------- stage label + thickness profile ---------- */
.stagelabel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 10px}
.stagelabel span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--blue-bright)}
.stagelabel em{font-style:normal;font-size:11.5px;color:var(--steel)}
.thickrow{display:flex;align-items:center;gap:12px;margin-top:14px}
.thickrow small{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--steel)}
.thickbar{flex:1;max-width:130px;display:flex;align-items:center}
.thickbar i{display:block;width:100%;border-radius:3px;background:linear-gradient(180deg,#3A4150,#181C24);
  border:1px solid #2A2F3A;transition:height .25s ease}
.thickrow b{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--chalk);letter-spacing:.08em}

/* ---------- mobile mini preview ---------- */
#minipreview{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:58;
  display:none;align-items:center;gap:9px;background:var(--carbon-2);color:var(--chalk);
  border:1px solid var(--blue);border-radius:999px;padding:10px 15px;cursor:pointer;
  font-family:'Archivo';font-weight:700;font-size:12px;letter-spacing:.05em;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
#minipreview.show{display:inline-flex}
#minipreview .mp-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);flex:none}
#minipreview em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--steel);letter-spacing:.06em}
@media (min-width:960px){#minipreview{display:none !important}}
@media (max-width:480px){#minipreview em{display:none}}

/* ---------- nav lockup + hero fit ---------- */
.navlockup{width:auto !important;height:52px !important;filter:none !important}
@media (max-width:640px){.navlockup{height:42px}}
h1.hero-h1{font-size:clamp(33px,4.5vw,68px)}
.hero-h1 span{white-space:nowrap}
@media (max-width:400px){h1.hero-h1{font-size:clamp(30px,8vw,36px)}}


/* ---------- typography flow: no orphans, no clipped headlines ---------- */
h1,h2,h3,h4{text-wrap:balance}
p,.lede,li,dd{text-wrap:pretty}

/* ---------- atmosphere: faint cinematic backgrounds ---------- */
.atmo{position:relative;overflow:hidden}
.atmo::before{content:"";position:absolute;inset:0;background-image:var(--bg);
  background-size:cover;background-position:center right;
  opacity:.11;filter:saturate(.75);pointer-events:none}
.atmo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.55) 55%, rgba(10,11,13,.85) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(10,11,13,.9), transparent 60%)}
.atmo > .wrap{position:relative;z-index:1}
.atmo.light::before{opacity:.07}
@media (max-width:640px){.atmo::before{opacity:.08;background-position:center}}
.usecase-line{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);line-height:2}