/* ==========================================================================
   NORTH EAST CARBON CLEAN
   Design system. Mobile-first, fluid from 320px up.

   Concept: soot vs. clean metal. Near-black industrial ground, paper-white
   sections for contrast and rhythm, one electric accent, heavy condensed
   display type. Square corners and hairline rules — no pills, no glassy
   cards, no gradient text.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS - */
:root{
  /* Semantic colour. Redefined by .invert for light sections. */
  --bg:#08090B;
  --bg-2:#0C0E12;
  --surface:#111319;
  --surface-2:#171A21;
  --fg:#FFFFFF;
  --fg-body:rgba(255,255,255,.68);
  --fg-mute:rgba(255,255,255,.42);
  --rule:rgba(255,255,255,.13);
  --rule-2:rgba(255,255,255,.07);
  --accent:#00CFFF;
  --accent-deep:#1B7FD6;
  --accent-ink:#04121A;
  --shade:rgba(0,0,0,.5);

  /* Fixed brand values that never invert */
  --cyan:#00CFFF;
  --blue:#1B7FD6;
  --soot:#B9622A;
  --good:#39D98A;
  --paper:#F2F1ED;
  --ink:#08090B;

  /* Type */
  --display:Anton,"Arial Narrow",Impact,system-ui,sans-serif;
  --body:Barlow,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  --fs-xs:clamp(.68rem,.65rem + .14vw,.76rem);
  --fs-sm:clamp(.85rem,.82rem + .18vw,.95rem);
  --fs-base:clamp(1.02rem,.98rem + .22vw,1.13rem);
  --fs-lg:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  --fs-xl:clamp(1.4rem,1.2rem + .95vw,2.1rem);
  --fs-h3:clamp(1.35rem,1.15rem + .95vw,2rem);
  --fs-h2:clamp(2.1rem,1.35rem + 3.5vw,4.1rem);
  --fs-h1:clamp(2.9rem,1.5rem + 7vw,6.2rem);
  --fs-mega:clamp(3.4rem,1.4rem + 10vw,9rem);

  --sp:clamp(1.15rem,.75rem + 1.9vw,2.25rem);
  --sec:clamp(3.75rem,2.6rem + 5vw,7.5rem);
  --wrap:1240px;
  --narrow:760px;
  --ease:cubic-bezier(.2,.8,.25,1);
  --hdr:64px;
}

.invert{
  --bg:#F2F1ED;
  --bg-2:#EAE8E2;
  --surface:#E6E4DC;
  --surface-2:#DCD9D0;
  --fg:#08090B;
  --fg-body:rgba(8,9,11,.74);
  --fg-mute:rgba(8,9,11,.5);
  --rule:rgba(8,9,11,.16);
  --rule-2:rgba(8,9,11,.09);
  --accent:#0F6FB8;
  --accent-ink:#FFFFFF;
  --shade:rgba(0,0,0,.12);
  background:var(--bg);
  color:var(--fg-body);
}

/* ---------------------------------------------------------------- RESET -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
@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{
  margin:0;background:var(--bg);color:var(--fg-body);
  font-family:var(--body);font-size:var(--fs-base);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.15em}
li{margin-bottom:.5em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--cyan);color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:0}

h1,h2,h3,h4{margin:0 0 .45em;color:var(--fg)}
h1,h2{
  font-family:var(--display);font-weight:400;line-height:.92;
  text-transform:uppercase;letter-spacing:.005em;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-family:var(--body);font-weight:700;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.015em}
h4{font-family:var(--body);font-weight:700;font-size:var(--fs-lg);line-height:1.2}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp)}
.narrow{max-width:var(--narrow);margin-inline:auto}
.section{padding-block:var(--sec);background:var(--bg);color:var(--fg-body)}
.center{text-align:center}
.muted{color:var(--fg-body)}
.dim{color:var(--fg-mute)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:300;background:var(--cyan);color:var(--ink);padding:.7em 1.1em;font-weight:700}

/* ------------------------------------------------------------- LABELS ---- */
.eyebrow{
  display:block;font-family:var(--body);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  margin-bottom:1.1em;
}
.eyebrow.rule::before{
  content:"";display:inline-block;width:28px;height:1px;background:currentColor;
  vertical-align:.28em;margin-right:.85em;
}
.section-head{max-width:22ch;margin-bottom:clamp(2.25rem,1.5rem + 2.5vw,3.5rem)}
.section-head.wide{max-width:34ch}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .lede{
  font-size:var(--fs-lg);color:var(--fg-body);max-width:52ch;margin-top:1.1em;
  font-family:var(--body);text-transform:none;
}
.section-head.center .lede{margin-inline:auto}

/* ------------------------------------------------------------ BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:54px;padding:.9em 1.75em;border:0;border-radius:2px;
  font-family:var(--body);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  cursor:pointer;text-align:center;position:relative;overflow:hidden;
  transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--fg);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule)}
.btn-ghost:hover{background:var(--fg);color:var(--bg);box-shadow:none}
.btn-block{width:100%}
.btn-lg{min-height:60px;padding-inline:2.1em;font-size:var(--fs-base)}
.btn-row{display:flex;flex-direction:column;gap:.7rem}
@media(min-width:540px){
  .btn-row{flex-direction:row;flex-wrap:wrap;align-items:center}
  .btn-row .btn{flex:0 1 auto}
}
.btn-row.center{justify-content:center}

/* Text link with an arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;font-weight:700;
  font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:.25em;
}
.tlink:hover{color:var(--fg)}

/* ------------------------------------------------------------- HEADER ---- */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hdr{display:flex;align-items:center;gap:1rem;min-height:var(--hdr)}
.brand{display:flex;align-items:center;flex:1 1 auto;min-width:0}
.brand img{height:34px;width:auto}
.hdr-cta{display:none}
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 10px;border:0;border-radius:2px;
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  cursor:pointer;flex:0 0 auto;
}
.nav-toggle span{display:block;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav{
  position:absolute;top:100%;left:0;right:0;z-index:99;
  background:var(--ink);border-bottom:1px solid rgba(255,255,255,.12);
  padding:.5rem var(--sp) 1.75rem;
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--hdr));max-height:calc(100dvh - var(--hdr));
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.nav a{
  color:#fff;font-family:var(--display);font-size:clamp(1.6rem,1.1rem + 2.2vw,2.2rem);
  text-transform:uppercase;line-height:1;padding:.6em 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:space-between;
}
.nav a::after{content:"→";color:var(--cyan);font-family:var(--body);font-size:1.1rem;opacity:.6}
.nav a[aria-current="page"]{color:var(--cyan)}
.nav .btn{margin-top:1.5rem;font-family:var(--body)}
.nav .btn::after{content:none}
body.nav-open{overflow:hidden}

@media(min-width:1000px){
  .nav-toggle{display:none}
  .nav{
    position:static;max-height:none;border:0;background:none;padding:0;
    flex-direction:row;align-items:center;gap:.15rem;margin-left:auto;
    visibility:visible;opacity:1;transform:none;pointer-events:auto;overflow:visible;
  }
  .nav a{
    font-family:var(--body);font-size:var(--fs-xs);font-weight:700;
    letter-spacing:.14em;padding:.9em .95em;border:0;color:rgba(255,255,255,.7);
  }
  .nav a::after{content:none}
  .nav a:hover{color:#fff}
  .nav .btn{display:none}
  .hdr-cta{display:inline-flex;min-height:44px;padding-inline:1.4em}
  .brand{flex:0 0 auto}
  .brand img{height:38px}
}

/* --------------------------------------------------------------- HERO ---- */
.hero{
  position:relative;overflow:hidden;background:var(--ink);color:rgba(255,255,255,.7);
  padding-block:clamp(3rem,1.5rem + 7vw,7rem) clamp(2.5rem,1.5rem + 5vw,5rem);
}
/* soot haze bleeding from the left, cool light from the right */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 8% 0%,rgba(27,127,214,.30),transparent 70%),
    radial-gradient(55% 45% at 96% 12%,rgba(0,207,255,.16),transparent 72%),
    radial-gradient(90% 60% at 50% 105%,rgba(185,98,42,.10),transparent 70%);
}
/* fine diagonal machined texture */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 9px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{
  font-size:var(--fs-mega);margin:0 0 .35em;color:#fff;
  line-height:.86;letter-spacing:-.005em;
}
.hero h1 em{font-style:normal;color:var(--cyan);display:block}
.hero-sub{
  font-size:var(--fs-lg);color:rgba(255,255,255,.66);max-width:46ch;
  margin:0 0 2rem;line-height:1.5;
}
.hero-grid{display:grid;gap:clamp(2.5rem,1rem + 6vw,4.5rem)}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center}
}

/* tiny technical tag row above the h1 */
.tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:1.6rem;
}
.tags b{color:var(--cyan);font-weight:700}
.tags i{font-style:normal;color:rgba(255,255,255,.25)}

/* spec strip under the hero CTAs */
.spec{
  display:grid;grid-template-columns:repeat(2,1fr);
  margin-top:2.75rem;border-top:1px solid rgba(255,255,255,.14);
}
@media(min-width:680px){.spec{grid-template-columns:repeat(4,1fr)}}
.spec div{
  padding:1.1rem 1rem 1.1rem 0;border-bottom:1px solid rgba(255,255,255,.09);
}
@media(min-width:680px){.spec div{border-bottom:0}}
.spec dt{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:.35em;
}
.spec dd{
  margin:0;font-family:var(--display);font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);
  line-height:1;color:#fff;text-transform:uppercase;
}
.spec dd small{font-family:var(--body);font-size:var(--fs-xs);font-weight:600;color:var(--cyan);letter-spacing:.1em;display:block;margin-top:.5em}

/* ------------------------------------------------------------ MARQUEE ---- */
.marquee{
  overflow:hidden;background:var(--cyan);color:var(--ink);
  border-block:1px solid var(--ink);
}
.marquee-track{display:flex;width:max-content;animation:march 44s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;flex:0 0 auto}
.marquee span{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.95rem,.85rem + .6vw,1.35rem);letter-spacing:.03em;
  padding:.7em 0;display:flex;align-items:center;white-space:nowrap;
}
.marquee span::after{content:"◆";font-family:var(--body);font-size:.5em;margin-inline:1.1em;opacity:.45}
@keyframes march{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ------------------------------------------------- BEFORE / AFTER ------- */
.ba-section{background:var(--bg-2);padding-block:var(--sec);border-bottom:1px solid var(--rule-2)}
.ba{
  --pos:50%;
  position:relative;aspect-ratio:4/3;max-width:820px;margin-inline:auto;
  background:#0B0D11;box-shadow:inset 0 0 0 1px var(--rule);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize;overflow:hidden;
}
@media(min-width:700px){.ba{aspect-ratio:16/10}}
.ba-layer{position:absolute;inset:0}
.ba-layer svg{width:100%;height:100%}
.ba-layer.clean{clip-path:inset(0 0 0 var(--pos))}
.ba-line{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:var(--cyan);pointer-events:none;box-shadow:0 0 18px rgba(0,207,255,.7);
}
.ba-handle{
  position:absolute;top:50%;left:var(--pos);width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:var(--cyan);color:var(--ink);display:grid;place-items:center;
  font-size:1.1rem;font-weight:700;pointer-events:none;box-shadow:0 0 0 6px rgba(0,207,255,.16);
}
.ba-tag{
  position:absolute;top:0;padding:.6em 1em;pointer-events:none;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.ba-tag.l{left:0;background:rgba(185,98,42,.9);color:#fff}
.ba-tag.r{right:0;background:var(--cyan);color:var(--ink)}
.ba-range{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:ew-resize;margin:0}

/* --------------------------------------------------------- STAT BLOCK ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats > div{
  padding:clamp(1.5rem,1rem + 2vw,2.5rem) 1.25rem clamp(1.5rem,1rem + 2vw,2.5rem) 0;
  border-bottom:1px solid var(--rule);
}
@media(min-width:900px){
  .stats > div{border-bottom:0;border-right:1px solid var(--rule);padding-left:clamp(1.25rem,2vw,2rem)}
  .stats > div:first-child{padding-left:0}
  .stats > div:last-child{border-right:0}
}
.stats b{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);line-height:.95;color:var(--fg);
}
.stats span{
  display:block;margin-top:.6em;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}

/* ------------------------------------------------------ NUMBERED LIST ---- */
.numbered{display:grid;gap:0;border-top:1px solid var(--rule);counter-reset:n}
@media(min-width:860px){.numbered{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}}
.numbered > article{
  counter-increment:n;position:relative;padding:clamp(1.6rem,1rem + 2vw,2.4rem) 0;
  border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1rem,2.5vw,2rem);align-items:start;
}
.numbered > article::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--display);font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px var(--rule);
  transition:-webkit-text-stroke-color .3s var(--ease),color .3s var(--ease);
}
.numbered > article:hover::before{-webkit-text-stroke-color:var(--accent);color:transparent}
.numbered h3{margin-bottom:.4em}
.numbered p{margin:0;color:var(--fg-body);font-size:var(--fs-sm)}

/* --------------------------------------------------------- RULE LIST ----- */
.rulelist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rulelist li{
  margin:0;padding:1.05rem 0 1.05rem 1.9rem;border-bottom:1px solid var(--rule);
  position:relative;font-size:var(--fs-base);color:var(--fg-body);
}
.rulelist li::before{
  content:"";position:absolute;left:0;top:1.55em;width:12px;height:1px;background:var(--accent);
}
@media(min-width:820px){
  .rulelist{columns:2;column-gap:clamp(2rem,4vw,4rem);border-top:0}
  .rulelist li{break-inside:avoid;border-top:1px solid var(--rule);border-bottom:0}
}

/* -------------------------------------------------------------- CARDS ---- */
.grid{display:grid;gap:1px;background:var(--rule)}
.grid > .card{background:var(--bg)}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{
  padding:clamp(1.5rem,1rem + 1.8vw,2.25rem);
  transition:background .25s var(--ease);
}
.card h3{margin-bottom:.5em}
.card p{color:var(--fg-body);font-size:var(--fs-sm)}
.card p:last-child{margin-bottom:0}
.card-link{color:var(--fg-body);display:block}
.card-link:hover{background:var(--surface);color:var(--fg-body)}
.icon{
  width:40px;height:40px;display:grid;place-items:center;margin-bottom:1.25rem;
  box-shadow:inset 0 0 0 1px var(--rule);
}
.icon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------ PRICING ---- */
.plans{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:900px){.plans{grid-template-columns:1fr 1fr}}
.plan{
  position:relative;background:var(--bg);
  padding:clamp(1.75rem,1.2rem + 2.2vw,3rem);
}
.plan.featured{
  background:var(--paper);color:rgba(8,9,11,.74);
  --fg:#08090B;--fg-body:rgba(8,9,11,.74);--fg-mute:rgba(8,9,11,.5);
  --rule:rgba(8,9,11,.16);--accent:#0F6FB8;--accent-ink:#fff;
}
.plan.featured h3,.plan.featured .price b{color:#08090B}
.plan-tag{
  display:inline-block;margin-bottom:1.5rem;padding:.45em 1em;background:var(--cyan);color:var(--ink);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.plan h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--fs-xl);letter-spacing:.01em;margin-bottom:.3em}
.plan .for{color:var(--fg-mute);font-size:var(--fs-sm);margin-bottom:1.75em;max-width:34ch}
.price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.75rem;flex-wrap:wrap}
.price b{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.4rem,2.2rem + 5vw,5.5rem);line-height:.8;color:var(--fg);
}
.price span{color:var(--fg-mute);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.plan ul{list-style:none;padding:0;margin:0 0 2rem;border-top:1px solid var(--rule)}
.plan li{
  display:flex;gap:.85rem;align-items:flex-start;margin:0;
  padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm);
}
.plan li svg{width:16px;height:16px;flex:0 0 auto;margin-top:.3em;stroke:var(--accent);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* -------------------------------------------------------------- STEPS ---- */
.steps{display:grid;gap:0;counter-reset:s;border-top:1px solid var(--rule)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);border-top:0}}
.step{
  counter-increment:s;padding:1.75rem 0;border-bottom:1px solid var(--rule);position:relative;
}
@media(min-width:900px){
  .step{border-bottom:0;border-top:1px solid var(--rule);padding:2rem clamp(1rem,2vw,1.75rem) 0 0}
  .step::after{
    content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--accent);
    transition:width .8s var(--ease);
  }
  .step.in::after{width:100%}
}
.step::before{
  content:counter(s,decimal-leading-zero);display:block;margin-bottom:1rem;
  font-family:var(--display);font-size:clamp(2rem,1.5rem + 2vw,2.8rem);line-height:.85;
  color:var(--accent);
}
.step h3{font-size:var(--fs-lg);margin-bottom:.45em}
.step p{color:var(--fg-body);font-size:var(--fs-sm);margin:0}

/* ---------------------------------------------------------------- FAQ ---- */
.faq{border-top:1px solid var(--rule);max-width:860px}
.faq.center{margin-inline:auto}
details.qa{border-bottom:1px solid var(--rule)}
details.qa summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.35rem 3rem 1.35rem 0;
  font-family:var(--body);font-weight:700;font-size:var(--fs-lg);
  color:var(--fg);line-height:1.3;letter-spacing:-.01em;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after,details.qa summary::before{
  content:"";position:absolute;right:.5rem;top:50%;background:var(--accent);transition:transform .3s var(--ease),opacity .3s
}
details.qa summary::after{width:15px;height:2px;margin-top:-1px}
details.qa summary::before{width:2px;height:15px;margin:-7px -6px 0 0;right:1.15rem}
details.qa[open] summary::before{transform:rotate(90deg);opacity:0}
details.qa .qa-body{padding:0 0 1.5rem;color:var(--fg-body);font-size:var(--fs-base);max-width:64ch}
details.qa .qa-body p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- CHIPS ---- */
.chips{display:flex;flex-wrap:wrap;gap:0;padding:0;list-style:none;margin:0;font-size:var(--fs-base)}
.chips li{margin:0;color:var(--fg-body);display:flex;align-items:center}
.chips li::after{content:"/";margin-inline:.7em;color:var(--accent);opacity:.55}
.chips li:last-child::after{content:none}

.filters{
  display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 1.25rem;margin:0 0 2rem;border-bottom:1px solid var(--rule);
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.filters .chip{
  flex:0 0 auto;min-height:40px;padding:.55em 1.15em;border:0;border-radius:2px;
  font-family:var(--body);font-size:var(--fs-xs);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;
  background:transparent;box-shadow:inset 0 0 0 1px var(--rule);color:var(--fg-mute);
  transition:color .2s,background .2s,box-shadow .2s;
}
.filters .chip:hover{color:var(--fg)}
.filters .chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:none}

/* ----------------------------------------------------------- CTA BAND ---- */
.cta-band{
  position:relative;overflow:hidden;background:var(--cyan);color:var(--ink);
  padding-block:clamp(3.5rem,2.5rem + 5vw,6.5rem);
}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:repeating-linear-gradient(115deg,rgba(0,0,0,.9) 0 1px,transparent 1px 11px);
}
.cta-band .wrap{position:relative}
.cta-band h2{color:var(--ink);max-width:16ch}
.cta-band.center h2{margin-inline:auto}
.cta-band p{color:rgba(4,18,26,.78);font-size:var(--fs-lg);max-width:50ch}
.cta-band.center p{margin-inline:auto}
.cta-band .btn-primary{background:var(--ink);color:#fff}
.cta-band .btn-primary:hover{background:#fff;color:var(--ink)}
.cta-band .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(4,18,26,.35)}
.cta-band .btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------------------------------------------------------- SPLIT ROW ---- */
.split{display:grid;gap:clamp(2.25rem,1.5rem + 3vw,4rem)}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .split.tight{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.sticky{position:sticky;top:calc(var(--hdr) + 2rem)}
@media(max-width:899px){.sticky{position:static}}

/* --------------------------------------------------------------- FORM ---- */
.form-card{
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
}
.form-card h2{font-size:var(--fs-xl)}
.field{margin-bottom:1.25rem}
.field label{
  display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);margin-bottom:.6em;
}
.field .hint{
  display:block;margin-top:.5em;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--fg-mute);font-size:var(--fs-sm);
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--fg);
  background:var(--bg);border:1px solid var(--rule);border-radius:2px;
  padding:.9em 1em;min-height:54px;
  transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300CFFF' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:12px;padding-right:2.8rem;
}
.field select option{background:#111319;color:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,207,255,.18)
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#FF6B6B}
.err{display:none;color:#FF9B9B;font-size:var(--fs-sm);margin-top:.5em;font-weight:600}
.field.invalid .err,fieldset.invalid .err{display:block}
@media(min-width:600px){.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.15rem}}

.opt{display:grid;gap:1px;background:var(--rule);box-shadow:0 0 0 1px var(--rule)}
@media(min-width:520px){.opt{grid-template-columns:1fr 1fr}}
.opt label{
  display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;margin:0;
  background:var(--bg);padding:1.15rem;font-weight:600;font-size:var(--fs-sm);
  transition:background .18s;color:var(--fg);
}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label .dot{
  width:18px;height:18px;flex:0 0 auto;margin-top:.2em;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--fg-mute);transition:box-shadow .18s;
}
.opt input:checked + .dot{box-shadow:inset 0 0 0 5px var(--accent)}
.opt label.checked{background:var(--surface-2)}
.opt input:focus-visible + .dot{outline:2px solid var(--accent);outline-offset:3px}
.opt .sub{display:block;margin-top:.4em;font-weight:400;font-size:var(--fs-xs);color:var(--fg-mute);line-height:1.45}
fieldset.invalid .opt{box-shadow:0 0 0 1px #FF6B6B}
.form-note{font-size:var(--fs-sm);color:var(--fg-mute);margin-top:1.25rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:1.25rem;padding:1.1rem;font-weight:600;font-size:var(--fs-sm);display:none;border-left:3px solid}
.form-status.show{display:block}
.form-status.ok{background:rgba(57,217,138,.1);border-color:var(--good);color:#8FEFC6}
.form-status.bad{background:rgba(255,107,107,.1);border-color:#FF6B6B;color:#FFB3B3}

/* --------------------------------------------------------------- BLOG ---- */
.posts{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media(min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.posts{grid-template-columns:repeat(3,1fr)}}
.post-card{
  display:flex;flex-direction:column;background:var(--bg);color:var(--fg-body);
  padding:clamp(1.5rem,1rem + 1.5vw,2rem);transition:background .25s var(--ease);
}
.post-card:hover{background:var(--surface);color:var(--fg-body)}
.post-card .cat{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.25rem;
}
.post-card h3{font-size:var(--fs-lg);margin-bottom:.55em;letter-spacing:-.015em}
.post-card p{color:var(--fg-mute);font-size:var(--fs-sm);margin:0 0 1.5rem}
.post-card .more{
  margin-top:auto;font-weight:700;font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}

/* ------------------------------------------------------------ ARTICLE ---- */
.article{max-width:70ch;margin-inline:auto}
.article header{margin-bottom:clamp(2rem,1.5rem + 2vw,3rem);padding-bottom:2rem;border-bottom:1px solid var(--rule)}
.article h1{font-size:clamp(1.95rem,1.4rem + 2.7vw,3.1rem);line-height:.98;margin-bottom:.45em}
.article .hero-sub{font-size:var(--fs-lg);color:var(--fg-body);max-width:none;margin-bottom:1.5rem}
.article .meta{
  color:var(--fg-mute);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
}
.article h2{
  margin-top:2.4em;margin-bottom:.6em;font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);
  padding-top:1.2em;border-top:1px solid var(--rule);
}
.article h3{margin-top:2em;font-size:var(--fs-lg)}
.article p,.article li{color:var(--fg-body)}
.article strong{color:var(--fg);font-weight:600}
.article blockquote{
  margin:2.2em 0;padding:0 0 0 1.6rem;border-left:2px solid var(--accent);
  color:var(--fg);font-family:var(--body);font-size:var(--fs-xl);
  font-weight:500;line-height:1.35;letter-spacing:-.015em;
}
.article blockquote p:last-child{margin-bottom:0}
.article .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2em 0;border:1px solid var(--rule)}
.article table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:0;min-width:460px}
.article th,.article td{padding:.9rem 1.1rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.article thead th{
  color:var(--fg);font-weight:700;white-space:nowrap;background:var(--surface);
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
}
.article tbody tr:last-child td{border-bottom:0}
.article .faq{margin-top:1.5rem}
.crumbs{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:2rem;
}
.crumbs a{color:var(--fg-mute)}
.crumbs a:hover{color:var(--accent)}
.callout{
  background:var(--cyan);color:var(--ink);padding:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  margin:3em 0;
}
.callout h3{margin-top:0;color:var(--ink);font-size:var(--fs-xl)}
.callout p{color:rgba(4,18,26,.8)}
.callout p:last-of-type{margin-bottom:1.5rem}
.callout .btn-primary{background:var(--ink);color:#fff}
.callout .btn-primary:hover{background:#fff;color:var(--ink)}
.callout .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(4,18,26,.35)}
.callout .btn-ghost:hover{background:var(--ink);color:#fff}

/* ------------------------------------------------------------- FOOTER ---- */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem;font-size:var(--fs-sm);
}
.foot-grid{display:grid;gap:2.5rem}
@media(min-width:800px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr}}
.site-footer .flogo{height:40px;margin-bottom:1.5rem}
.site-footer p{max-width:38ch}
.site-footer h4{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:1.35rem;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.7em}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--cyan)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding-top:1.5rem;
  color:rgba(255,255,255,.35);font-size:var(--fs-xs);letter-spacing:.06em;
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
}

/* ------------------------------------------------------------ CALLBAR ---- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:grid;grid-template-columns:1fr 1.35fr;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.15);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.callbar.show{transform:none}
.callbar .btn{min-height:56px;border-radius:0;font-size:var(--fs-xs);box-shadow:none}
.callbar .btn-ghost{color:#fff;box-shadow:inset -1px 0 0 rgba(255,255,255,.15)}
@media(min-width:1000px){.callbar{display:none}}
@media(max-width:999px){body.has-callbar{padding-bottom:56px}}

/* ------------------------------------------------------------- REVEAL ---- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}

/* ---------------------------------------------------- HERO REFINEMENTS --- */
.h1-lead{
  display:block;font-family:var(--body);font-weight:600;
  font-size:clamp(.95rem,.85rem + .55vw,1.35rem);line-height:1.2;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:1.1em;
}
.hero-foot{align-items:end;margin-top:clamp(1.75rem,1rem + 2.5vw,2.75rem)}
.hero .btn-row{justify-content:flex-start}
@media(min-width:900px){.hero .btn-row{justify-content:flex-end}}
.invert .rulelist strong{color:var(--fg);font-weight:700}

/* ba tags must sit above the two image layers */
.ba-tag{z-index:3}
.ba-line,.ba-handle{z-index:4}
.ba-range{z-index:5}

/* ==========================================================================
   HERO + HEADER — mobile rebalance
   ========================================================================== */

/* --- Header: bigger mark, lighter menu button, tighter bar --- */
:root{--hdr:60px}
.brand img{height:42px}
.nav-toggle{
  width:44px;height:44px;padding:0 8px;gap:6px;
  background:transparent;box-shadow:none;
}
.nav-toggle span{height:2.5px}
.nav-toggle:active{opacity:.6}
.hdr{gap:.5rem}
@media(min-width:1000px){
  :root{--hdr:72px}
  .brand img{height:44px}
}

/* --- Headline: smaller and no longer colliding --- */
:root{--fs-mega:clamp(2.85rem,1.15rem + 8.1vw,8.4rem)}
.hero h1{line-height:.94;margin-bottom:.5em}
.hero h1 em{margin-top:.02em}
.h1-lead{
  font-size:clamp(.72rem,.66rem + .3vw,1.05rem);
  letter-spacing:.2em;margin-bottom:1.4em;color:rgba(255,255,255,.45);
}
.hero{padding-block:clamp(2.25rem,1.4rem + 3.5vw,5.5rem) clamp(2.5rem,1.5rem + 4vw,5rem)}
.hero-sub{
  font-size:clamp(1rem,.94rem + .32vw,1.35rem);
  max-width:44ch;margin-bottom:1.75rem;
}
.hero-foot{margin-top:0}
@media(max-width:539px){
  .hero .btn-row{gap:.6rem}
  .hero .btn-lg{min-height:56px;font-size:var(--fs-sm)}
}

/* --- USP grid: 2x2 on mobile, 4-up on desktop --- */
.usps{
  list-style:none;margin:clamp(2rem,1.4rem + 2vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
@media(min-width:900px){.usps{grid-template-columns:repeat(4,1fr)}}
.usps li{
  margin:0;background:#08090B;padding:1.1rem .95rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.usps svg{
  width:26px;height:26px;flex:0 0 auto;
  stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.usps b{
  display:block;color:#fff;font-weight:700;font-size:var(--fs-sm);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:.3em;
}
.usps span{font-size:var(--fs-xs);color:rgba(255,255,255,.5);line-height:1.4;display:block}

/* --- Price bar --- */
.pricebar{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  border-top:0;margin-top:1px;
}
.pricebar > div{
  background:#08090B;padding:1rem .95rem;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.15rem .6rem;
}
.pricebar span{
  width:100%;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
.pricebar b{
  font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);line-height:1;
}
.pricebar small{font-size:var(--fs-xs);color:var(--cyan);font-weight:600;letter-spacing:.06em}

/* hero-sub already carries its own bottom margin; drop the grid gap on mobile
   so the CTA sits right under the copy instead of 64px below it */
@media(max-width:899px){
  .hero-foot{gap:0}
  .hero-sub{margin-bottom:1.5rem}
}

/* ==========================================================================
   v3 — density pass. The hero was mostly empty space; the header read as a
   flat black slab bolted on top of the hero rather than part of it.
   ========================================================================== */

/* --- Header sits INSIDE the hero: transparent at rest, solid once scrolled --- */
.site-header{
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s;
}
.site-header.scrolled{
  background:rgba(8,9,11,.9);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(255,255,255,.12);
}
/* Interior pages have no hero glow behind the bar, so keep them solid */
body.solid-header .site-header{background:var(--ink);border-bottom-color:rgba(255,255,255,.1)}

/* Compact Book Now in the mobile bar — the header should sell, not just navigate */
.hdr-book{
  min-height:40px;padding:.5em 1.05em;font-size:var(--fs-xs);
  letter-spacing:.1em;margin-left:auto;flex:0 0 auto;
}
@media(min-width:1000px){.hdr-book{display:none}}

/* --- Hero: tighten every gap --- */
.hero{padding-block:clamp(1.75rem,1rem + 3vw,4.5rem) clamp(2rem,1.25rem + 3vw,4rem)}
.hero h1{margin-bottom:.34em}
.hero-sub{
  font-size:clamp(1.02rem,.96rem + .3vw,1.3rem);
  max-width:42ch;margin:0 0 1.4rem;line-height:1.5;
}
@media(max-width:899px){.hero-foot{gap:0}}

/* Single primary CTA + a quiet text link, instead of two competing blocks */
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.hero-cta .btn{max-width:420px}
.hero-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:.3em;
}
.hero-link::after{content:"↓";color:var(--cyan)}
.hero-link:hover{color:#fff;border-bottom-color:var(--cyan)}
@media(min-width:540px){
  .hero-cta{flex-direction:row;align-items:center;gap:1.75rem}
  .hero-cta .btn{width:auto;min-width:230px}
}

/* Price bar sits directly under the CTA — price visible without scrolling */
.pricebar{margin:clamp(1.75rem,1.2rem + 1.6vw,2.5rem) 0 0}
.usps{margin-top:1px}

/* Let the hero run up underneath the transparent bar, so the header reads as
   part of the hero rather than a black slab sitting on top of it. */
body:not(.solid-header) .hero{
  margin-top:calc(-1 * var(--hdr));
  padding-top:calc(var(--hdr) + clamp(1.25rem,.75rem + 2.5vw,3rem));
}

/* ==========================================================================
   v4 — the hero was a small headline stranded in the left half of the screen
   with the best asset (the valve) buried four sections down.
   ========================================================================== */

/* --- Headline fills the measure. Each line is sized against its own character
       count so the block reads as a solid slab, not a ragged left column. --- */
.hero h1.mega{
  margin:0 0 .42em;
  display:block;
  letter-spacing:-.005em;
}
.hero h1.mega span{
  display:block;line-height:.8;white-space:nowrap;
}
.hero h1.mega .l1{font-size:19.5vw;color:rgba(255,255,255,.92)}
.hero h1.mega .l2{font-size:22.7vw}
.hero h1.mega .l3{font-size:22.7vw;color:var(--cyan);text-align:right}
@media(min-width:760px){
  .hero h1.mega .l1{font-size:11.2vw}
  .hero h1.mega .l2{font-size:13vw}
  .hero h1.mega .l3{font-size:13vw;text-align:left}
}
@media(min-width:1240px){
  .hero h1.mega .l1{font-size:139px}
  .hero h1.mega .l2{font-size:161px}
  .hero h1.mega .l3{font-size:161px}
}

.hero-sub{max-width:46ch}
.hero-cta{width:100%}
.hero-cta .btn{max-width:none}
@media(min-width:540px){.hero-cta .btn{max-width:360px}}

/* --- The valve moves directly under the hero and runs edge to edge --- */
.ba-section{
  padding:0 0 clamp(2rem,1.4rem + 2.5vw,3.5rem);
  background:var(--ink);border-bottom:1px solid var(--rule);
}
.ba-wrap{width:100%}
.ba-kicker{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;align-items:baseline;
  margin:0;padding:1.1rem var(--sp);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.ba-kicker span{color:rgba(255,255,255,.42)}
.ba-kicker b{color:var(--cyan);font-weight:700}
.ba-section .ba{
  max-width:none;margin:0;box-shadow:none;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  aspect-ratio:1/1;
}
@media(min-width:700px){.ba-section .ba{aspect-ratio:2/1}}
.ba-note{
  margin:1.25rem 0 0;padding-inline:var(--sp);
  max-width:64ch;font-size:var(--fs-sm);color:var(--fg-mute);
}

/* Measured: at 19.5/22.7vw the lines filled only ~70% of the column, which is
   what made the headline look small and stranded on the left. Each line is now
   sized by its own character count so all three reach the right edge. */
@media(max-width:759px){
  .hero h1.mega span{line-height:.78}
  .hero h1.mega .l1{font-size:29vw}
  .hero h1.mega .l2{font-size:29vw}
  .hero h1.mega .l3{font-size:50vw}
  .hero h1.mega{margin-bottom:.28em}
}

/* .78 made the lines collide once the sizes diverged — "CARBON" was cutting
   through "GET THE". Anton needs ~.88 to stack cleanly at these sizes. */
@media(max-width:759px){
  .hero h1.mega span{line-height:.88}
  .hero h1.mega .l3{margin-top:-.06em}
}

/* ==========================================================================
   v5 — three fixes
   1. Overcorrected the headline: it went from too small to eating the screen.
   2. Lines collided because line-height is relative to each line's OWN size,
      so the 50vw line's ascender overflowed into the 29vw line above it.
      Sizes are now close together and the negative margin is gone.
   3. :hover on a touch device sticks after a tap — that's why Book Now went
      white. Hover restyles are now gated behind a real pointer.
   ========================================================================== */
@media(max-width:759px){
  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:26.5vw}
  .hero h1.mega .l3{font-size:32vw}
  .hero h1.mega span{line-height:.92}
  .hero h1.mega .l3{margin-top:-.04em}
  .hero h1.mega{margin-bottom:.34em}
}

/* Touch devices: buttons keep their own colour after a tap */
.btn-primary:hover{background:var(--accent);color:var(--accent-ink)}
.btn-ghost:hover{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule)}
.card-link:hover,.post-card:hover{background:transparent}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--fg);color:var(--bg)}
  .btn-ghost:hover{background:var(--fg);color:var(--bg);box-shadow:none}
  .card-link:hover,.post-card:hover{background:var(--surface)}
}

/* ==========================================================================
   v6 — desktop. Two problems: the .92 line-height fix was scoped to mobile
   only so the lines still collided above 760px, and the whole hero sat in the
   left ~45% with the right half empty.
   ========================================================================== */

/* Tablet: single column, no collisions */
@media(min-width:760px){
  .hero h1.mega span{line-height:.92}
  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:clamp(4.5rem,12.2vw,186px)}
  .hero h1.mega .l3{font-size:clamp(5.5rem,14.5vw,220px);margin-top:-.04em;text-align:left}
}

/* Desktop: two columns — type left, commercials right, so the width is used */
@media(min-width:1000px){
  .hero .wrap{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    grid-template-rows:auto auto auto;
    column-gap:clamp(2.5rem,3.5vw,4.5rem);
    align-items:start;
  }
  .hero h1.mega{grid-area:1/1;margin-bottom:.3em}
  .hero-sub{grid-area:2/1;margin-bottom:2rem;max-width:42ch}
  .hero-cta{grid-area:3/1;align-self:start}
  .pricebar{grid-area:1/2;margin:.5rem 0 0}
  .usps{grid-area:2/2/4/3;grid-template-columns:1fr 1fr;margin-top:1px;align-self:start}

  /* sized against the left column, not the full viewport */
  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:clamp(4.5rem,10.4vw,158px)}
  .hero h1.mega .l3{font-size:clamp(5.5rem,12.4vw,188px);text-align:right}

  .usps li{padding:1.3rem 1.15rem}
  .hero{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem) clamp(3rem,2rem + 3vw,5rem)}
}

/* The valve reads best as a wide cinematic strip on desktop */
@media(min-width:1000px){
  .ba-section .ba{aspect-ratio:2.6/1}
  .ba-kicker{padding-inline:max(var(--sp),calc((100vw - var(--wrap))/2 + var(--sp)))}
  .ba-note{padding-inline:max(var(--sp),calc((100vw - var(--wrap))/2 + var(--sp)))}
}

/* v6.1 — right column is one block, and the headline actually fills its column.
   Above 1240px the wrap stops growing, so the vw coefficient is tuned to hit
   ~85-93% fill from 1000px all the way up rather than shrinking to 75%. */
@media(min-width:1000px){
  .hero .wrap{grid-template-rows:auto auto 1fr}
  .hero-side{grid-area:1/2/4/3;align-self:start}
  .pricebar{margin:.4rem 0 0}
  .usps{grid-area:auto;grid-template-columns:1fr 1fr;margin-top:1px}

  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:clamp(4.5rem,14vw,175px)}
  .hero h1.mega .l3{font-size:clamp(5rem,16.5vw,208px)}
}

/* v6.2 — the hero was 926px tall against an 850px viewport, pushing Book Now
   onto the fold line. Trim the block, and scale the headline to viewport
   HEIGHT on shorter laptop screens so the CTA always stays visible. */
@media(min-width:1000px){
  .hero h1.mega{margin-bottom:.2em}
  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:clamp(4.5rem,13.3vw,165px)}
  .hero h1.mega .l3{font-size:clamp(5rem,15.7vw,196px)}
  .hero-sub{margin-bottom:1.6rem}
  .hero{padding-block:clamp(2rem,1.25rem + 2vw,3.25rem) clamp(2.5rem,1.75rem + 2vw,3.5rem)}
}
@media(min-width:1000px) and (max-height:840px){
  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:min(13.3vw,19vh)}
  .hero h1.mega .l3{font-size:min(15.7vw,22.5vh)}
}

/* ==========================================================================
   v7 — prices become two proper boxes with their own Book Now, sitting in a
   band across the bottom of the hero, with the USPs as a full-width row
   beneath them. Mobile keeps the compact strip that already works.
   ========================================================================== */

/* The blurb and per-box buttons are desktop-only: on mobile the strip stays
   compact and the single hero CTA above it does the job. */
.pricebox em{display:none}
.pricebox .btn{display:none}

@media(min-width:1000px){
  /* Row 1: headline + blurb side by side. Row 2: prices. Row 3: USPs. */
  .hero .wrap{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(2.5rem,3.5vw,3.5rem);
    row-gap:clamp(1.75rem,2.5vw,2.75rem);
    align-items:end;
  }
  .hero h1.mega{grid-area:1/1;margin-bottom:0}
  .hero-sub{grid-area:1/2;align-self:end;margin:0 0 .4rem;max-width:40ch}
  .hero-cta{display:none}
  .hero-side{grid-area:2/1/3/3;align-self:start}

  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:min(13.3vw,18vh)}
  .hero h1.mega .l3{font-size:min(15.7vw,21.4vh)}

  /* Two decent-sized price boxes */
  .pricebar{grid-template-columns:1fr 1fr;margin:0}
  .pricebox{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:.35rem;padding:1.6rem 1.75rem 1.75rem;
  }
  .pricebox span{width:auto;font-size:var(--fs-xs)}
  .pricebox b{font-size:clamp(3rem,4.4vw,4.4rem);line-height:.9}
  .pricebox small{font-size:var(--fs-sm)}
  .pricebox em{
    display:block;font-style:normal;color:var(--fg-mute);
    font-size:var(--fs-sm);line-height:1.45;margin-top:.35rem;max-width:34ch;
  }
  .pricebox .btn{display:inline-flex;width:100%;margin-top:1.1rem;min-height:52px}

  /* USP band runs the full width underneath */
  .usps{grid-template-columns:repeat(4,1fr);margin-top:1px}
  .usps li{padding:1.25rem 1.35rem}
}

/* v7.1 — the per-box Book Now buttons landed at 867px against an 850px fold.
   Trim the headline and box padding so both CTAs stay above it. */
@media(min-width:1000px){
  .hero h1.mega .l1,
  .hero h1.mega .l2{font-size:min(13.3vw,17vh)}
  .hero h1.mega .l3{font-size:min(15.7vw,20.2vh)}
  .pricebox{padding:1.25rem 1.6rem 1.4rem}
  .pricebox em{margin-top:.25rem}
  .pricebox .btn{margin-top:.85rem;min-height:50px}
  .hero .wrap{row-gap:clamp(1.5rem,2vw,2.25rem)}
}