/* ============================================================
   SIP FACTORY — cold industrial editorial
   Palette: ink navy / brushed steel / cold teal / warm cream
   Type: Archivo (display + tabular figures), Satoshi (prose)
   ============================================================ */

:root{
  /* surfaces */
  --ink:        #080F18;
  --ink-2:      #0D1926;
  --ink-3:      #132433;
  --steel:      #1C3040;
  --line:       rgba(150,185,205,.16);
  --line-2:     rgba(150,185,205,.30);
  /* text */
  --fg:         #EAF2F6;
  --fg-mute:    #93A9B8;
  --fg-faint:   #63798A;
  /* accent */
  --teal:       #2BB6BE;
  --teal-2:     #57D8DE;
  --teal-dim:   rgba(43,182,190,.14);
  /* calm close */
  --cream:      #F6EBE1;
  --cream-2:    #EFE0D3;
  --cream-ink:  #14202B;
  --cream-mute: #5C6B76;

  /* type ramp — 8 tokens, nothing else */
  --t-caption: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --t-label:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --t-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lede:    clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --t-h3:      clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-h2:      clamp(2.125rem, 1.4rem + 3.2vw, 4.25rem);
  --t-hero:    clamp(3rem, 1.4rem + 7.2vw, 8.5rem);
  --t-mega:    clamp(3.75rem, 1.6rem + 9vw, 10.5rem);

  /* tracking — 5 values */
  --tr-tight:  -0.035em;
  --tr-snug:   -0.015em;
  --tr-flat:   0;
  --tr-wide:   0.09em;
  --tr-mega:   0.22em;
  /* leading — 5 values */
  --lh-solid:  0.88;
  --lh-tight:  1.06;
  --lh-snug:   1.28;
  --lh-body:   1.62;
  --lh-loose:  1.75;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem;
  --sp-24:6rem; --sp-32:8rem;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1440px;

  --font-d: 'Archivo', 'Satoshi', system-ui, sans-serif;
  --font-b: 'Satoshi', 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--font-b); font-size:var(--t-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0}
::selection{background:var(--teal);color:var(--ink)}

/* ---------- shared type roles ---------- */
.eyebrow{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:600;
  letter-spacing:var(--tr-mega); text-transform:uppercase; color:var(--teal);
  line-height:var(--lh-snug); margin-bottom:var(--sp-8);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--teal);opacity:.6;flex:none}
.h2{
  font-family:var(--font-d); font-size:var(--t-h2); font-weight:800;
  font-stretch:112%; letter-spacing:var(--tr-tight); line-height:var(--lh-tight);
  text-transform:uppercase; text-wrap:balance; margin-bottom:var(--sp-8);
}
.lede{ font-size:var(--t-lede); line-height:var(--lh-snug); color:var(--fg-mute); max-width:var(--measure) }
.fineprint{
  font-size:var(--t-label); line-height:var(--lh-loose); color:var(--fg-faint);
  max-width:var(--measure); margin-top:var(--sp-10);
  border-left:2px solid var(--line-2); padding-left:var(--sp-6);
}
.accent{color:var(--teal)}
.section{ padding-block:clamp(var(--sp-20), 11vh, var(--sp-32)) }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-d); font-size:var(--t-label); font-weight:700;
  letter-spacing:var(--tr-wide); text-transform:uppercase;
  padding:1.05rem 1.9rem; background:var(--teal); color:#04222A;
  border:1px solid var(--teal); border-radius:2px; cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--teal-2); transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line-2) }
.btn--ghost:hover{ background:rgba(234,242,246,.07); border-color:var(--fg-mute); color:var(--fg) }
.btn--sm{ padding:.72rem 1.2rem }
.btn--wide{ width:100%; padding-block:1.2rem }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  padding:var(--sp-4) var(--gutter);
  background:transparent; transition:background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,15,24,.86); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line); padding-block:var(--sp-3);
}
.nav__logo{ display:flex; align-items:center; gap:var(--sp-3); color:var(--teal); flex:none }
.mark{ width:22px; height:26px; flex:none }
.nav__word{
  font-family:var(--font-d); font-weight:800; font-stretch:118%;
  font-size:var(--t-label); letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--fg); white-space:nowrap;
}
.nav__links{ display:flex; gap:clamp(.9rem,1.8vw,2rem); margin-left:auto }
.nav__links a{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:600;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--fg-mute);
  transition:color .2s ease; white-space:nowrap;
}
.nav__links a:hover{ color:var(--teal) }
@media (max-width:900px){ .nav__links{display:none} }

/* ============ 1. HERO ============ */
.hero{ position:relative }
.hero__stage{ position:relative; height:100vh; overflow:hidden; background:var(--ink) }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(6,12,20,.94) 0%, rgba(6,12,20,.72) 42%, rgba(6,12,20,.30) 72%, rgba(6,12,20,.55) 100%),
    linear-gradient(to bottom, rgba(6,12,20,.80) 0%, rgba(6,12,20,.12) 34%, rgba(6,12,20,.18) 62%, rgba(6,12,20,.92) 100%);
}
.hero__content{
  position:absolute; z-index:2; left:var(--gutter); right:var(--gutter);
  bottom:clamp(4.5rem, 12vh, 7.5rem); max-width:min(72rem, 100%);
}
.hero__h1{
  font-family:var(--font-d); font-weight:900; font-stretch:118%;
  font-size:var(--t-hero); line-height:var(--lh-solid); letter-spacing:var(--tr-tight);
  text-transform:uppercase; margin-bottom:var(--sp-8);
}
.hero__h1 .line{ display:block }
.hero__h1 .line:last-child{ color:var(--teal) }
.hero__sub{
  font-size:var(--t-lede); line-height:var(--lh-snug); color:var(--fg-mute);
  max-width:40ch; margin-bottom:var(--sp-10); text-wrap:pretty;
}
.hero__cta{ display:flex; gap:var(--sp-3); flex-wrap:wrap }
.hero__cue{
  position:absolute; z-index:2; right:var(--gutter); bottom:clamp(1.75rem,4.5vh,2.75rem);
  display:flex; align-items:center; gap:var(--sp-3);
}
.hero__cue-label{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:600;
  letter-spacing:var(--tr-mega); text-transform:uppercase; color:var(--fg-faint);
}
.hero__cue-track{ width:clamp(60px,9vw,120px); height:2px; background:var(--line-2); position:relative; overflow:hidden }
.hero__cue-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--teal) }
@media (max-width:700px){ .hero__cue-label{display:none} }

/* ============ 2. TICKER ============ */
.ticker{ background:var(--ink-2); border-block:1px solid var(--line); overflow:hidden; padding-block:var(--sp-4) }
.ticker__row{ display:flex; width:max-content; will-change:transform }
.ticker__row--alt{ margin-top:var(--sp-3) }
.ticker__set{ display:flex; align-items:center; gap:var(--sp-6); padding-right:var(--sp-6) }
.ticker__set span{
  font-family:var(--font-d); font-size:var(--t-label); font-weight:700;
  letter-spacing:var(--tr-wide); text-transform:uppercase; white-space:nowrap; color:var(--fg);
}
.ticker__row--alt .ticker__set span{ font-weight:500; color:var(--fg-mute) }
.ticker__set .sep{ color:var(--teal); font-weight:700 }

/* ============ 3. PROBLEM ============ */
.problem{ background:var(--ink) }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-12) }
.card{
  border:1px solid var(--line); background:linear-gradient(180deg, var(--ink-2), var(--ink));
  padding:var(--sp-8); position:relative; overflow:hidden;
}
.card::after{ content:''; position:absolute; inset:auto 0 0 0; height:1px; background:var(--line-2) }
.card__num{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  letter-spacing:var(--tr-mega); color:var(--teal); display:block; margin-bottom:var(--sp-6);
  font-variant-numeric:tabular-nums;
}
.card h3{
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:800; font-stretch:108%;
  letter-spacing:var(--tr-snug); line-height:var(--lh-tight); text-transform:uppercase;
  margin-bottom:var(--sp-4); text-wrap:balance;
}
.card p{ color:var(--fg-mute) }
.pivot{
  font-family:var(--font-d); font-size:var(--t-h2); font-weight:900; font-stretch:118%;
  letter-spacing:var(--tr-tight); line-height:var(--lh-tight); text-transform:uppercase;
  margin-top:var(--sp-16); text-wrap:balance;
}
.pivot span{ display:inline-block }
.pivot span:last-child{ color:var(--teal) }
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

/* ============ 4. ASSEMBLY ============ */
.assembly{ background:radial-gradient(120% 90% at 50% 30%, var(--ink-3) 0%, var(--ink) 62%) }
.assembly__pin{ height:100vh; position:relative; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; gap:var(--sp-6);
  padding:clamp(5.25rem,11vh,6.75rem) var(--gutter) var(--sp-8) }
.assembly__head{ text-align:center; max-width:60rem; margin-inline:auto }
.assembly__head .eyebrow{ justify-content:center }
.assembly__h2{
  font-family:var(--font-d); font-weight:900; font-stretch:115%;
  font-size:var(--t-h2); line-height:var(--lh-tight); letter-spacing:var(--tr-tight);
  text-transform:uppercase; text-wrap:balance;
}
.assembly__stage{ position:relative; min-height:0 }
.assembly__stage::before{
  content:''; position:absolute; left:50%; bottom:-6%; width:min(90%, 62rem); height:70%;
  transform:translateX(-50%); pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 100%, rgba(43,182,190,.20) 0%, rgba(43,182,190,.07) 42%, transparent 74%);
}
.assembly__stage::after{
  content:''; position:absolute; left:50%; bottom:0; width:min(94%, 70rem); height:1px;
  transform:translateX(-50%); z-index:1;
  background:linear-gradient(90deg, transparent, rgba(150,185,205,.35), transparent);
}
.obj{
  position:absolute; bottom:0; left:50%; height:auto;
  width:auto; max-height:100%; transform-origin:50% 100%;
  filter:drop-shadow(0 32px 44px rgba(0,0,0,.65));
}
.obj--tank{ height:min(104%, 56vh); z-index:1; filter:drop-shadow(0 32px 44px rgba(0,0,0,.45)) blur(1.6px) }
.obj--can{ height:min(70%, 37vh) }
.obj--keg{ height:min(74%, 39vh) }
.obj--bottle{ height:min(70%, 37vh) }
.obj--bulk{ height:min(72%, 38vh) }
.obj--can,.obj--keg,.obj--bottle,.obj--bulk{ z-index:3; opacity:0 }
/* the shelf-stable line does not join the row — on the last beat the four
   cold-chain formats recede and this comes forward, still out of focus */
.obj--bib{ height:min(100%, 56vh); z-index:4; opacity:0 }

.speccard{
  position:relative; z-index:4;
  border:1px solid var(--line-2); background:rgba(8,15,24,.86); backdrop-filter:blur(10px);
  padding:var(--sp-6) var(--sp-8); max-width:34rem; margin-inline:auto; text-align:center;
  min-height:9.5rem; display:flex; flex-direction:column; justify-content:center; gap:var(--sp-1);
}
.speccard__label{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  letter-spacing:var(--tr-mega); text-transform:uppercase; color:var(--teal);
}
.speccard__value{
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:900; font-stretch:112%;
  letter-spacing:var(--tr-snug); line-height:var(--lh-tight); text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.speccard__note{ font-size:var(--t-label); line-height:var(--lh-snug); color:var(--fg-mute) }

/* the shelf-stable line is still being installed — it arrives out of focus */
.obj--soon{ filter:blur(14px) saturate(.7) brightness(.8) }
.soontag{
  position:absolute; left:50%; top:auto; bottom:8%; translate:-50% 0;
  font-family:var(--font-d); font-size:var(--t-label); font-weight:700; font-stretch:108%;
  letter-spacing:var(--tr-wide); text-transform:uppercase; white-space:nowrap;
  color:var(--teal); background:rgba(8,15,24,.72); border:1px solid var(--teal-dim);
  padding:.5rem .9rem; border-radius:2px; opacity:0; z-index:6;
  backdrop-filter:blur(6px); pointer-events:none;
}
@media (max-width:700px){
  .obj--tank{ height:min(88%, 46vh) }
  .obj--can{ height:min(80%, 40vh) }
  .obj--keg{ height:min(86%, 43vh) }
  .obj--bottle{ height:min(81%, 40vh) }
  .obj--bulk{ height:min(84%, 42vh) }
  .obj--bib{ height:min(88%, 44vh) }
  .speccard{ padding:var(--sp-4) var(--sp-6); min-height:11rem }
}

/* ============ 5. SPEC TABLE ============ */
.specs{ background:var(--ink-2); border-block:1px solid var(--line) }
.spectable{ margin-top:var(--sp-12); border-top:1px solid var(--line-2) }
.spectable__head,.srow{
  display:grid; grid-template-columns:1.5fr 1fr .8fr 1.4fr;
  gap:var(--sp-6); align-items:center;
  padding-block:var(--sp-6); border-bottom:1px solid var(--line);
}
.spectable__head{ padding-block:var(--sp-3) }
.spectable__head span{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  letter-spacing:var(--tr-mega); text-transform:uppercase; color:var(--fg-faint);
}
.sgroup{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2) var(--sp-4);
  padding-block:var(--sp-6) var(--sp-2); border-bottom:1px solid var(--line);
}
.sgroup__k{
  font-family:var(--font-d); font-size:var(--t-label); font-weight:900; font-stretch:112%;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--fg);
}
.sgroup__v{ font-size:var(--t-caption); letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--teal) }
.sgroup__v a{ color:var(--teal); text-underline-offset:3px }
.sgroup--soon .sgroup__k{ color:var(--fg-mute) }
.srow{ transition:background .3s ease }
.srow:hover{ background:rgba(43,182,190,.05) }
.srow strong{
  display:block; font-family:var(--font-d); font-size:var(--t-h3); font-weight:800;
  font-stretch:106%; letter-spacing:var(--tr-snug); line-height:var(--lh-tight);
  text-transform:uppercase; margin-bottom:var(--sp-1);
}
.srow em{ display:block; font-style:normal; font-size:var(--t-label); color:var(--fg-faint); line-height:var(--lh-snug) }
.srow__min,.srow__lb{ font-size:var(--t-label); color:var(--fg-mute) }
.srow__min b,.srow__lb b{
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:900; font-stretch:96%;
  letter-spacing:var(--tr-snug); color:var(--teal); font-variant-numeric:tabular-nums;
  display:inline-block; margin-right:.3rem;
}
.srow__lb b{ color:var(--fg) }
.srow__for{ font-size:var(--t-label); color:var(--fg-mute); line-height:var(--lh-snug) }
.srow--soon{ background:linear-gradient(90deg, rgba(43,182,190,.05), transparent 70%) }
.srow--soon .srow__fmt strong,.srow--soon .srow__for{ color:var(--fg-mute) }
.srow--soon .srow__lb b{ color:var(--fg-mute) }
.srow--soon .srow__for a{ color:var(--teal); text-underline-offset:3px }
.srow__lb em{ display:block; font-style:normal; font-size:var(--t-caption); color:var(--fg-faint); line-height:var(--lh-snug) }
.pill{
  display:inline-block; font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  font-stretch:106%; letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--teal); border:1px solid var(--teal-dim); border-radius:999px; padding:.3rem .7rem;
}
@media (max-width:1000px){
  .spectable__head{display:none}
  .spectable__head,.srow{ grid-template-columns:1fr 1fr; gap:var(--sp-4) }
  .srow__fmt{ grid-column:1/-1 }
  .srow__for{ grid-column:1/-1 }
}

/* ============ 5b. IN BUILD — BAG-IN-BOX TEASE ============ */
.inbuild{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(6rem,14vh,10rem) 0 clamp(6rem,14vh,10rem);
  background:var(--ink);
}
.inbuild__plate{
  position:absolute; inset:-6% -4%; z-index:0;
  background:url('assets/inbuild.webp') center/cover no-repeat;
  /* the line is genuinely unfinished — so we show it out of focus */
  filter:blur(16px) saturate(.9) brightness(.72);
  transform:scale(1.06);
}
.inbuild__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(72% 64% at 20% 44%, rgba(8,15,24,.60), rgba(8,15,24,.90) 72%),
    linear-gradient(180deg, var(--ink) 0%, rgba(8,15,24,.55) 22%, rgba(8,15,24,.6) 78%, var(--ink) 100%);
}
.inbuild__body{ position:relative; z-index:2; max-width:62rem }
.eyebrow--pulse::before{
  content:''; display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--teal); margin-right:.6rem; vertical-align:.05em;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35; transform:scale(.85)} 50%{opacity:1; transform:scale(1)} }
.inbuild__h2{
  font-family:var(--font-d); font-weight:900; font-stretch:112%;
  line-height:var(--lh-solid); letter-spacing:var(--tr-tight);
  text-transform:uppercase; margin:var(--sp-4) 0 var(--sp-6);
  font-size:var(--t-h2);
}
.inbuild__lede{ font-size:var(--t-lede); line-height:var(--lh-body); color:var(--fg-mute); max-width:44rem }
.inbuild__lede strong{ color:var(--fg); font-weight:700 }
.inbuild__facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-6);
  margin:var(--sp-10) 0 var(--sp-10); padding:0;
}
.inbuild__facts div{ border-top:1px solid var(--teal-dim); padding-top:var(--sp-4) }
.inbuild__facts dt{
  font-size:var(--t-label); letter-spacing:var(--tr-wide); text-transform:uppercase;
  color:var(--fg-faint); margin-bottom:.5rem;
}
.inbuild__facts dd{
  margin:0; font-family:var(--font-d); font-weight:700; font-stretch:104%;
  font-size:clamp(1rem,.94rem + .35vw,1.25rem); line-height:var(--lh-snug); letter-spacing:var(--tr-snug);
  text-transform:uppercase; color:var(--fg);
}
.reveal{
  border-left:2px solid var(--teal); padding:var(--sp-4) 0 var(--sp-4) var(--sp-6);
  margin-bottom:var(--sp-10);
}
.reveal__k{
  margin:0 0 .5rem; font-size:var(--t-label); letter-spacing:var(--tr-wide);
  text-transform:uppercase; color:var(--teal);
}
.reveal__v{
  margin:0 0 .35rem; font-family:var(--font-d); font-weight:900; font-stretch:108%;
  font-size:var(--t-h3); line-height:var(--lh-tight); letter-spacing:var(--tr-snug);
  text-transform:uppercase;
}
.nb{ white-space:nowrap }
.reveal__d{ margin:0; font-size:var(--t-label); color:var(--fg-mute) }
.inbuild__cta{ display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap }
.inbuild__note{ font-size:var(--t-label); color:var(--fg-faint) }
@media (max-width:900px){
  .inbuild__facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-6) }
  .inbuild__plate{ filter:blur(13px) saturate(.85) brightness(.6) }
}
@media (max-width:560px){
  .inbuild__facts{ grid-template-columns:1fr }
  .reveal{ padding-left:var(--sp-4) }
}

/* ============ 6. COLD CHAIN ============ */
.cold{ display:grid; grid-template-columns:1fr 1fr; background:var(--ink) }
.cold__media{ position:sticky; top:0; height:100vh; overflow:hidden }
.cold__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06) }
.cold__copy{ padding:clamp(var(--sp-20),13vh,var(--sp-32)) var(--gutter) }
.cold__copy p{ color:var(--fg-mute); max-width:var(--measure); margin-bottom:var(--sp-6) }
.ticks{ list-style:none; margin:var(--sp-10) 0 0; padding:0; border-top:1px solid var(--line) }
.ticks li{
  padding:var(--sp-4) 0 var(--sp-4) var(--sp-8); border-bottom:1px solid var(--line);
  position:relative; font-family:var(--font-d); font-size:var(--t-label); font-weight:600;
  letter-spacing:var(--tr-wide); text-transform:uppercase; line-height:var(--lh-snug);
}
.ticks li::before{
  content:''; position:absolute; left:0; top:1.45rem; width:14px; height:2px; background:var(--teal);
}
@media (max-width:900px){
  .cold{ grid-template-columns:1fr }
  .cold__media{ position:relative; height:56vh }
}

/* ============ 7. NUMBERS ============ */
.numbers{ background:var(--ink-2); border-block:1px solid var(--line) }
.nums{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-6); margin-top:var(--sp-12) }
.num{ border-top:2px solid var(--teal); padding-top:var(--sp-6) }
.num__v{
  display:block; font-family:var(--font-d); font-weight:900; font-stretch:84%;
  font-size:var(--t-h2); line-height:var(--lh-solid); letter-spacing:var(--tr-tight);
  font-variant-numeric:tabular-nums; margin-bottom:var(--sp-4);
}
.num__v--txt{ color:var(--teal) }
.num__l{
  display:block; font-size:var(--t-label); color:var(--fg-mute); line-height:var(--lh-snug);
  max-width:22ch;
}
.plantshot{ margin:var(--sp-20) 0 0; }
.plantshot img{ width:100%; height:clamp(18rem,46vh,32rem); object-fit:cover; border:1px solid var(--line) }
.plantshot figcaption{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:600;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--fg-faint);
  margin-top:var(--sp-3);
}
@media (max-width:1000px){ .nums{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .nums{grid-template-columns:1fr} }

/* ============ 8. FOUNDER ============ */
.founder{ display:grid; grid-template-columns:.85fr 1fr; background:var(--ink); align-items:center;
  padding-block:clamp(var(--sp-20),12vh,var(--sp-32)); gap:clamp(var(--sp-8),5vw,var(--sp-20));
  padding-inline:var(--gutter); max-width:var(--maxw); margin-inline:auto }
.founder__media img{ width:100%; height:clamp(20rem,58vh,38rem); object-fit:cover; border:1px solid var(--line) }
.founder__copy p{ color:var(--fg-mute); max-width:var(--measure); margin-bottom:var(--sp-6) }
.founder__quote{
  margin:0 0 var(--sp-8); padding:0 0 0 var(--sp-6); border-left:2px solid var(--teal);
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:700; font-stretch:104%;
  line-height:var(--lh-snug); letter-spacing:var(--tr-snug); color:var(--fg); text-wrap:balance;
}
.sig{ margin-top:var(--sp-10) }
.sig{ font-family:var(--font-d); font-size:var(--t-label); font-weight:800;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--fg) !important }
.sig span{ display:block; font-weight:500; color:var(--fg-faint); margin-top:var(--sp-1) }
@media (max-width:900px){ .founder{ grid-template-columns:1fr } }

/* ============ 9. STEPS ============ */
.steps{ background:var(--ink-2); border-block:1px solid var(--line) }
.steplist{ list-style:none; margin:var(--sp-12) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6) }
.steplist li{ border-top:1px solid var(--line-2); padding-top:var(--sp-6) }
.steplist__n{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  letter-spacing:var(--tr-mega); color:var(--teal); display:block; margin-bottom:var(--sp-6);
  font-variant-numeric:tabular-nums;
}
.steplist h3{
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:800; font-stretch:106%;
  letter-spacing:var(--tr-snug); line-height:var(--lh-tight); text-transform:uppercase;
  margin-bottom:var(--sp-4); text-wrap:balance;
}
.steplist p{ font-size:var(--t-label); color:var(--fg-mute); line-height:var(--lh-loose) }
@media (max-width:1000px){ .steplist{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steplist{grid-template-columns:1fr} }

/* ============ 10. FAQ ============ */
.faq{ background:var(--ink) }
.faq__list{ margin-top:var(--sp-12); border-top:1px solid var(--line-2) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:var(--sp-6) var(--sp-10) var(--sp-6) 0; position:relative;
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:700; font-stretch:104%;
  letter-spacing:var(--tr-snug); line-height:var(--lh-tight); text-transform:uppercase;
  transition:color .2s ease; text-wrap:balance;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{ color:var(--teal) }
.chev{ position:absolute; right:0; top:50%; width:14px; height:14px; margin-top:-7px; flex:none }
.chev::before,.chev::after{
  content:''; position:absolute; background:var(--teal); transition:transform .3s ease, opacity .3s ease;
}
.chev::before{ inset:6px 0 auto 0; height:2px }
.chev::after{ inset:0 6px auto 6px; width:2px; height:14px }
.faq details[open] .chev::after{ transform:scaleY(0); opacity:0 }
.faq__a{ padding:0 clamp(0px,6vw,5rem) var(--sp-8) 0 }
.faq__a p{ color:var(--fg-mute); max-width:var(--measure) }

/* ============ 11. CALM CLOSE ============ */
.quote{ background:var(--cream); color:var(--cream-ink);
  padding-block:clamp(var(--sp-20),12vh,var(--sp-32)) }
.quote__wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(var(--sp-10),6vw,var(--sp-24)); align-items:start }
.quote .eyebrow{ color:#0A6A70 }
.quote__h2{
  font-family:var(--font-d); font-size:var(--t-h2); font-weight:900; font-stretch:112%;
  line-height:var(--lh-tight); letter-spacing:var(--tr-tight); text-transform:uppercase;
  margin-bottom:var(--sp-6); text-wrap:balance;
}
.quote__intro p{ color:var(--cream-mute); max-width:44ch }
.quote__direct{ margin-top:var(--sp-10); padding-top:var(--sp-6); border-top:1px solid rgba(20,32,43,.16);
  display:flex; flex-direction:column; gap:var(--sp-2) }
.quote__direct a{
  font-family:var(--font-d); font-size:var(--t-h3); font-weight:800; font-stretch:104%;
  letter-spacing:var(--tr-snug); color:#0A6A70; word-break:break-word;
}
.quote__direct a:hover{ text-decoration:underline; text-underline-offset:4px }
.quote__direct span{ font-size:var(--t-label); color:var(--cream-mute) }

.rfq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-4); margin-bottom:var(--sp-6) }
.f{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; border:0; padding:0; margin:0 }
.f--full{ grid-column:1/-1 }
.f>span,.f__legend{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--cream-mute);
}
.f>span b,.f__legend b{ color:#B0413E }
.f__legend{ display:block; margin-bottom:var(--sp-3) }
.f input,.f select,.f textarea{
  font-family:var(--font-b); font-size:var(--t-body); color:var(--cream-ink);
  background:#FFFDFB; border:1px solid rgba(20,32,43,.20); border-radius:2px;
  padding:.85rem 1rem; width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.f textarea{ resize:vertical; line-height:var(--lh-snug) }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:#0A6A70; box-shadow:0 0 0 3px rgba(10,106,112,.16);
}
.chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2) }
.chips label{ position:relative; display:inline-flex }
.chips input{ position:absolute; opacity:0; width:1px; height:1px }
.chips span{
  display:inline-block; font-family:var(--font-d); font-size:var(--t-caption); font-weight:700;
  letter-spacing:var(--tr-wide); text-transform:uppercase;
  padding:.6rem .95rem; border:1px solid rgba(20,32,43,.22); border-radius:2px;
  cursor:pointer; transition:all .2s ease; background:#FFFDFB; color:var(--cream-mute);
}
.chips span i{
  font-style:normal; font-size:var(--t-caption); letter-spacing:var(--tr-wide);
  text-transform:uppercase; opacity:.62; margin-left:.4rem;
}
.chips span:hover{ border-color:#0A6A70; color:#0A6A70 }
.chips input:checked+span{ background:#0A6A70; border-color:#0A6A70; color:#F6EBE1 }
.chips input:focus-visible+span{ box-shadow:0 0 0 3px rgba(10,106,112,.3) }
.quote .btn{ background:#0A6A70; border-color:#0A6A70; color:var(--cream) }
.quote .btn:hover{ background:#095055 }
.rfq__note{ font-size:var(--t-caption); color:var(--cream-mute); margin-top:var(--sp-4); text-align:center }
@media (max-width:900px){
  .quote__wrap{ grid-template-columns:1fr }
  .rfq__grid{ grid-template-columns:1fr }
}

/* ============ FOOTER ============ */
.foot{ background:var(--ink); border-top:1px solid var(--line); padding-block:var(--sp-16) }
.foot__wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-10); align-items:start }
.foot__brand{ display:flex; align-items:center; gap:var(--sp-3); color:var(--teal) }
.foot__brand div{ display:flex; flex-direction:column }
.foot__brand strong{
  font-family:var(--font-d); font-size:var(--t-label); font-weight:800; font-stretch:118%;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--fg);
}
.foot__brand span{ font-size:var(--t-caption); color:var(--fg-faint) }
.foot__links{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6) }
.foot__links a{
  font-family:var(--font-d); font-size:var(--t-caption); font-weight:600;
  letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--fg-mute);
}
.foot__links a:hover{ color:var(--teal) }
.foot__meta{ display:flex; flex-direction:column; gap:var(--sp-2); text-align:right }
.foot__meta a{ font-size:var(--t-label); color:var(--teal) }
.foot__meta a:hover{ text-decoration:underline; text-underline-offset:3px }
.foot__meta span{ font-size:var(--t-caption); color:var(--fg-faint) }
@media (max-width:900px){
  .foot__wrap{ grid-template-columns:1fr; gap:var(--sp-8) }
  .foot__meta{ text-align:left }
}

/* ============ MOTION PRIMITIVES ============ */
[data-sweep],[data-cascade]>*{ will-change:transform,opacity }
.js [data-sweep]{ opacity:0; transform:translateY(14px) }
.js [data-cascade]>*{ opacity:0; transform:translateY(22px) }

@media (prefers-reduced-motion:reduce){
  .js [data-sweep],.js [data-cascade]>*{ opacity:1 !important; transform:none !important }
  .ticker__row{ transform:none !important }
  .assembly__pin{ height:auto; padding-bottom:var(--sp-20) }
  /* no pin, no timeline — so lay the family out as a static row instead of
     leaving all four objects stacked on top of each other at centre stage */
  .assembly__stage{
    height:auto; display:flex; align-items:flex-end; justify-content:center;
    gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap; padding-block:var(--sp-8);
  }
  .assembly__stage .obj{
    position:static; left:auto; bottom:auto; translate:none; transform:none !important;
    height:min(26vh,220px); opacity:1 !important;
  }
  .assembly__stage .obj--tank{ display:none }
  .assembly__stage::before,.assembly__stage::after{ display:none }
  .soontag{ position:static; translate:none; opacity:1 !important; align-self:center }
  .cold__media{ position:relative; height:56vh }
  *{ transition:none !important; animation:none !important }
}