/* ============================================================
   ECOLECTRO — CONCEPT 3 "MEMBRANE / DEEP-TECH"
   ============================================================ */

:root{
  /* Surfaces */
  --white:        #ffffff;
  --paper:        #f6f9f6;
  --paper-2:      #eef4ef;
  --mist:         #E9F6EF;

  /* Green */
  --green:        #2EA56B;
  --green-2:      #3DAE6F;
  --green-ink:    #1c7a4e;
  --grid:         rgba(46,165,107,0.14);
  --grid-strong:  rgba(46,165,107,0.28);

  /* Blue */
  --blue:         #213C8C;
  --blue-soft:    #e7ecf7;

  /* Ink */
  --ink:          #10241b;
  --muted:        #5a6b62;
  --hair:         #d7e3da;
  --hair-2:       #c4d6c9;

  /* Functional */
  --gray-h2:      #8a8f93;
  --shadow:       0 1px 2px rgba(16,36,27,.04), 0 8px 30px rgba(16,36,27,.06);
  --shadow-card:  0 1px 2px rgba(16,36,27,.05), 0 12px 36px rgba(16,36,27,.07);
  --focus:        0 0 0 3px rgba(46,165,107,.35);

  --font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--white);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ol,ul{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
hr{ border:none; }

/* ---------- a11y helpers ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
  font-weight:500;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:6px; }

/* ---------- typography tokens ---------- */
.h2{
  font-size:clamp(1.9rem, 3.4vw, 2.9rem); font-weight:700; line-height:1.08;
  letter-spacing:-0.015em; color:var(--ink);
}
.h3{
  font-size:1.25rem; font-weight:500; line-height:1.2; letter-spacing:-0.01em; color:var(--ink);
}
.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem); font-weight:400; line-height:1.55;
}
.lead--muted{ color:var(--muted); }
.small{ font-size:0.9375rem; line-height:1.5; }

.dl{
  font-family:var(--font-mono); font-size:0.75rem; font-weight:700; line-height:1.3;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
.dl b{ color:var(--ink); font-weight:700; }
.dl--green{ color:var(--green); }
.dl--blue{ color:var(--blue); }

.kicker{
  font-family:var(--font-mono); font-size:0.75rem; font-weight:700; line-height:1.3;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--green);
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.kicker .tick{
  display:inline-block; width:24px; height:2px; background:var(--green); border-radius:2px;
}

/* ---------- layout ---------- */
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,11vw,140px); position:relative; }
.section--paper{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(46,165,107,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,165,107,0.10) 1px, transparent 1px);
  background-size:40px 40px;
  border-block:1px solid var(--hair);
}
.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head .lead{ margin-top:14px; }

/* registration marks */
.regmark{
  position:absolute; font-family:var(--font-mono); font-weight:400; font-size:18px;
  color:var(--grid-strong); pointer-events:none; line-height:1;
}
.regmark--tl{ top:18px; left:18px; }
.regmark--tr{ top:18px; right:18px; }
.regmark--br{ bottom:18px; right:18px; }

/* corner brackets */
.corner{ position:absolute; width:18px; height:18px; pointer-events:none; }
.corner--tl{ top:10px; left:10px; border-top:2px solid var(--green); border-left:2px solid var(--green); }
.corner--br{ bottom:10px; right:10px; border-bottom:2px solid var(--green); border-right:2px solid var(--green); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:500; font-size:0.95rem;
  padding:12px 20px; border-radius:10px; border:1px solid transparent;
  transition:transform .16s var(--ease), background .16s var(--ease),
             box-shadow .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
  white-space:nowrap;
}
.btn--lg{ padding:14px 24px; font-size:1rem; }
.btn--primary{ background:var(--green); color:#fff; }
.btn--primary:hover{ background:var(--green-2); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn--ghost{ background:transparent; border:1px solid var(--hair-2); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--green); color:var(--green-ink); background:var(--mist); transform:translateY(-1px); }
.btn .arr{ font-family:var(--font-mono); font-size:0.9em; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .2s var(--ease);
}
.nav.is-scrolled{ box-shadow:var(--shadow); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  height:68px; display:flex; align-items:center; gap:24px;
}
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo__mark{ width:30px; height:30px; }
.logo__word{
  font-family:var(--font-sans); font-weight:700; font-size:1.18rem; color:var(--ink);
  letter-spacing:-0.02em; text-transform:lowercase; line-height:1;
}
.nav__links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.navlink{
  position:relative; font-family:var(--font-sans); font-weight:500; font-size:0.95rem; color:var(--ink);
  padding:4px 0; transition:color .16s var(--ease);
}
.navlink::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform .18s var(--ease);
}
.navlink:hover{ color:var(--green); }
.navlink:hover::after{ transform:scaleX(1); }
.navlink.is-active{ color:var(--green); }
.navlink.is-active::before{ content:"\2022 "; color:var(--green); }
.nav__cta{ display:flex; align-items:center; gap:12px; }
.nav__cta-mobile{ display:none; }

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
  margin-left:auto;
}
.hamburger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(56px,8vw,96px);
  background-color:var(--white);
  isolation:isolate;
}
.hero::before{ /* masked blueprint grid sits behind content */
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent);
          mask-image:linear-gradient(to bottom, black 55%, transparent);
}
.hero__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:46% 54%; gap:clamp(32px,5vw,56px); align-items:center;
}
.hero__title{
  font-size:clamp(2.6rem,6vw,4.6rem); font-weight:700; line-height:1.04; letter-spacing:-0.02em;
  margin:8px 0 22px;
}
.hl{ position:relative; color:var(--green); white-space:nowrap; }
.hl__sup{
  position:absolute; top:-0.55em; right:-0.2em;
  font-family:var(--font-mono); font-size:0.18em; font-weight:700; letter-spacing:0.1em;
  color:var(--green); text-transform:uppercase;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.specstrip{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.specstrip__sep{ color:var(--green); font-family:var(--font-mono); font-weight:700; }

/* diagram panel */
.hero__diagram{ position:relative; }
.diagram-panel{
  position:relative; background:var(--white); border:1px solid var(--hair); border-radius:18px;
  box-shadow:var(--shadow); padding:18px; overflow:hidden;
}
.diagram-panel::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none; opacity:.6;
}
.diagram-panel__label{
  position:relative; z-index:1;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--green); margin-bottom:8px;
}
.membrane{ position:relative; z-index:1; width:100%; height:auto; max-height:540px; }

/* SVG text */
.svg-mono{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.06em; fill:var(--muted); }
.svg-mono--g{ fill:var(--green); }
.svg-mono--green-ink{ fill:var(--green-ink); }
.svg-mono--b{ fill:var(--blue); }
.svg-mono--mute{ fill:var(--muted); font-weight:400; font-size:10px; }
.svg-mono--dc{ fill:var(--muted); font-size:11px; }
.svg-mono--h2out{ fill:var(--green); font-size:13px; }

/* ---------- diagram animations ---------- */
@keyframes riseH2{
  from{ transform:translateY(0); opacity:0; }
  10%{ opacity:1; }
  85%{ opacity:1; }
  to{ transform:translateY(-460px); opacity:0; }
}
@keyframes swayA{ 0%{transform:translateX(0);} 35%{transform:translateX(6px);} 70%{transform:translateX(-4px);} 100%{transform:translateX(0);} }
@keyframes swayB{ 0%{transform:translateX(0);} 40%{transform:translateX(-5px);} 75%{transform:translateX(5px);} 100%{transform:translateX(0);} }

.bub{ stroke:var(--green); stroke-width:1.6px; fill:rgba(46,165,107,.10); will-change:transform,opacity; animation:riseH2 5.6s linear infinite; }
.bubO{ stroke:var(--blue); stroke-width:1.4px; fill:rgba(33,60,140,.07); will-change:transform,opacity; animation:riseH2 7s linear infinite; opacity:.7; }

.sway{ will-change:transform; }
.sway--a{ animation:swayA 5.6s ease-in-out infinite; }
.sway--b{ animation:swayB 6.2s ease-in-out infinite; }
.sway--c{ animation:swayA 6.8s ease-in-out infinite; }
.sway--d{ animation:swayB 7.2s ease-in-out infinite; }
.sway--e{ animation:swayA 7.8s ease-in-out infinite; }

.b1{ animation-duration:5.2s; animation-delay:0s; }
.b2{ animation-duration:6.1s; animation-delay:1.4s; }
.b3{ animation-duration:5.7s; animation-delay:2.6s; }
.b4{ animation-duration:6.4s; animation-delay:.8s; }
.b5{ animation-duration:5.0s; animation-delay:3.4s; }
.b6{ animation-duration:6.8s; animation-delay:.3s; }
.b7{ animation-duration:5.5s; animation-delay:2.0s; }
.b8{ animation-duration:6.0s; animation-delay:3.9s; }
.b9{ animation-duration:5.3s; animation-delay:1.1s; }
.b10{ animation-duration:6.6s; animation-delay:2.9s; }
.b11{ animation-duration:5.9s; animation-delay:.6s; }
.o1{ animation-duration:7.2s; animation-delay:.5s; }
.o2{ animation-duration:7.8s; animation-delay:2.2s; }
.o3{ animation-duration:7.0s; animation-delay:3.6s; }
.o4{ animation-duration:7.6s; animation-delay:1.3s; }
.o5{ animation-duration:8.0s; animation-delay:3.0s; }
.o6{ animation-duration:7.4s; animation-delay:.9s; }

/* water inlet flow */
.inlet-flow{ stroke-dasharray:8 10; animation:flowUp 1.8s linear infinite; }
@keyframes flowUp{ to{ stroke-dashoffset:-36; } }
@keyframes dropRise{ from{ transform:translateY(0); opacity:.6; } to{ transform:translateY(-44px); opacity:0; } }
.drop{ will-change:transform; }
.drop--1{ animation:dropRise 1.8s linear infinite; }
.drop--2{ animation:dropRise 1.8s linear infinite; animation-delay:.9s; }

/* ion transport */
@keyframes ionCross{ 0%{ transform:translateX(0); opacity:0; } 20%{opacity:1;} 80%{opacity:1;} 100%{ transform:translateX(-20px); opacity:0; } }
.ion{ will-change:transform; }
.ion--1{ animation:ionCross 3s linear infinite; }
.ion--2{ animation:ionCross 3s linear infinite; animation-delay:1s; }
.ion--3{ animation:ionCross 3s linear infinite; animation-delay:.5s; }
.ion--4{ animation:ionCross 3s linear infinite; animation-delay:2.1s; }

/* lead wires (electron flow) */
.lead-wire{ stroke-dasharray:4 6; animation:flowUp 2.4s linear infinite; opacity:.6; }

/* pause when offscreen */
.is-paused .bub, .is-paused .bubO, .is-paused .sway,
.is-paused .inlet-flow, .is-paused .drop, .is-paused .ion, .is-paused .lead-wire{
  animation-play-state:paused;
}

/* ============================================================
   STAT STRIP
   ============================================================ */
.statstrip{ background:var(--paper); border-block:1px solid var(--hair); }
.statstrip__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{ padding:clamp(28px,4vw,44px) 24px; position:relative; }
.statstrip__inner .stat + .stat::before{
  content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--hair);
}
.stat__num{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(2rem,4vw,3.2rem);
  line-height:1; letter-spacing:-0.01em; color:var(--green);
}
.stat__cap{ margin-top:12px; position:relative; padding-left:30px; }
.stat__cap::before{
  content:""; position:absolute; left:0; top:.5em; width:22px; height:1px; background:var(--green);
}

/* ============================================================
   HOW IT WORKS — process rail
   ============================================================ */
.rail{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
}
.step{ padding:24px; position:relative; }
.step + .step::before{
  content:""; position:absolute; left:-1px; top:42px; width:2px; height:0; background:var(--green); /* mobile vertical default off */
}
.rail::before{ /* horizontal connector */
  content:""; position:absolute; left:12%; right:12%; top:44px; height:2px;
  background:repeating-linear-gradient(90deg,var(--green) 0 10px, transparent 10px 18px);
  opacity:.6;
}
.step__idx{ color:var(--green); margin-bottom:14px; }
.step__icon{ width:32px; height:32px; margin-bottom:14px; }
.step .h3{ margin-bottom:8px; }
.step .small{ color:var(--muted); }

.spec-ribbon{
  margin-top:clamp(40px,5vw,56px);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
  background:var(--white); border:1px solid var(--hair); border-radius:14px;
  padding:20px 24px; box-shadow:var(--shadow);
}
.spec-ribbon .dl{ position:relative; padding-right:28px; }
.spec-ribbon .dl:not(:last-child)::after{
  content:"/"; position:absolute; right:8px; color:var(--green); font-weight:700;
}

/* ============================================================
   COST COMPARISON
   ============================================================ */
.cost-panel{
  position:relative; max-width:760px; margin-inline:auto;
  background:var(--white); border:1px solid var(--hair); border-radius:18px;
  box-shadow:var(--shadow); padding:clamp(28px,4vw,40px); overflow:hidden;
}
.cost-panel::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none; opacity:.5;
}
.cost-panel > *{ position:relative; z-index:1; }
.cost-readouts{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.cost-readout__num{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1; letter-spacing:-0.01em; color:var(--gray-h2); transition:color .2s var(--ease);
}
.cost-readout__num.is-active{ color:var(--green); }
.cost-readout .dl{ margin-top:10px; }

.bars{ display:grid; gap:20px; margin-bottom:30px; }
.bar-row__label{ margin-bottom:8px; }
.bar-track{ background:var(--paper-2); border-radius:8px; height:34px; overflow:hidden; border:1px solid var(--hair); }
.bar-fill{
  height:100%; width:100%; border-radius:7px 0 0 7px; display:flex; align-items:center; justify-content:flex-end;
  padding-right:12px; background:var(--gray-h2);
  transition:width .12s linear, background-color .12s linear;
}
.bar-val{ font-family:var(--font-mono); font-weight:700; font-size:0.8125rem; color:#fff; }

.slider-wrap{ margin-bottom:8px; }
.slider-ends{ display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; }
.slider-ends .dl{ font-size:0.68rem; }

.cost-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:999px;
  background:linear-gradient(90deg,var(--gray-h2),var(--green)); outline:none; cursor:pointer;
}
.cost-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--green); box-shadow:0 1px 4px rgba(16,36,27,.2); cursor:grab;
}
.cost-slider::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--green);
  box-shadow:0 1px 4px rgba(16,36,27,.2); cursor:grab;
}
.cost-slider:focus-visible{ box-shadow:var(--focus); }

.cost-caption{ margin-top:18px; color:var(--muted); font-size:0.95rem; min-height:1.5em; }
.cost-presets{ display:flex; gap:12px; margin-top:20px; }
.pill-btn{
  font-family:var(--font-mono); font-weight:700; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; border:1px solid var(--hair-2); background:transparent; color:var(--ink);
  transition:.16s var(--ease);
}
.pill-btn:hover{ border-color:var(--green); color:var(--green-ink); background:var(--mist); }
.pill-btn.is-active{ background:var(--green); color:#fff; border-color:var(--green); }

/* ============================================================
   SPEC CARDS / GRIDS
   ============================================================ */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.markets-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.spec-card{
  position:relative; background:var(--white); border:1px solid var(--hair); border-radius:14px;
  padding:24px; transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.spec-card__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.spec-card__idx{ font-family:var(--font-mono); font-weight:700; font-size:1.1rem; color:var(--green); transition:color .22s var(--ease); }
.spec-card__plus{ font-family:var(--font-mono); color:var(--muted); transition:transform .22s var(--ease); }
.spec-card__icon{ width:28px; height:28px; margin-bottom:16px; }
.spec-card .h3{ margin-bottom:8px; }
.spec-card .small{ color:var(--muted); }
.hair{ height:1px; background:var(--hair); margin:18px 0 14px; }
.spec-card__foot{ color:var(--muted); }
.spec-card:hover{ border-color:var(--green); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.spec-card:hover .spec-card__plus{ transform:rotate(90deg); color:var(--green); }
.spec-card:hover .spec-card__idx{ color:var(--green-ink); }

.markets-cap{ margin-top:28px; color:var(--green); }

/* ============================================================
   INVESTORS
   ============================================================ */
.inv-stats{ display:flex; gap:clamp(40px,8vw,96px); margin-bottom:48px; flex-wrap:wrap; }
.stat--inline{ padding:0; }
.stat--inline::before{ display:none; }
.inv-grid{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; }
.inv-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--white); border:1px solid var(--hair); border-radius:999px;
  padding:12px 22px; font-family:var(--font-sans); font-weight:500; color:var(--ink); min-height:52px;
  transition:.18s var(--ease);
}
.inv-pill:hover{ border-color:var(--green); background:var(--mist); }
.inv-pill__tag{ margin-left:2px; }
.inv-pill--techstars{ padding:12px 24px; }
.inv-pill__logo{ height:18px; width:auto; }

.grants{ margin-top:48px; }
.grants__label{ margin-bottom:16px; }
.grants__row{ display:flex; flex-wrap:wrap; gap:16px; }
.inv-pill--grant{ border-color:var(--blue); color:var(--blue); }
.inv-pill--grant:hover{ background:var(--blue-soft); border-color:var(--blue); }
.grants__cap{ margin-top:16px; }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:760px; margin-inline:auto; }
.person{
  text-align:center; background:var(--white); border:1px solid var(--hair); border-radius:14px;
  padding:36px 24px; transition:.22s var(--ease);
}
.person:hover{ border-color:var(--green); box-shadow:var(--shadow-card); transform:translateY(-3px); }
.medallion{
  position:relative; width:88px; height:88px; margin:0 auto 20px;
  background:var(--mist); border-radius:50%; display:grid; place-items:center;
}
.medallion svg{ position:absolute; inset:0; width:100%; height:100%; }
.medallion__init{ font-family:var(--font-mono); font-weight:700; font-size:1.4rem; color:var(--green-ink); }
.person .h3{ margin-bottom:6px; }
.person__role{ margin-bottom:10px; }
.person .small{ color:var(--muted); }
.person__foot{ margin-top:14px; color:var(--muted); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,48px); align-items:start; }
.contact-info{ display:grid; gap:18px; }
.contact-line{ font-size:0.82rem; line-height:1.6; letter-spacing:0.04em; }
.contact-line .ln{ color:var(--green); }
.contact-line .ln:hover{ text-decoration:underline; }

.cta-card{
  position:relative; background:var(--white); border:1px solid var(--hair); border-radius:18px;
  padding:clamp(28px,4vw,40px); box-shadow:var(--shadow); overflow:hidden;
}
.cta-card::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none; opacity:.5;
}
.cta-card > *{ position:relative; z-index:1; }
.cta-card__title{ font-size:1.5rem; margin-bottom:10px; }
.cta-card .small{ color:var(--muted); margin-bottom:24px; }
.cta-card__btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; background:var(--white); border-top:1px solid var(--hair); }
.footer__inner{
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px;
  padding-block:clamp(48px,6vw,72px);
}
.footer__tag{ color:var(--muted); margin:16px 0 8px; max-width:34ch; }
.footer__meta{ color:var(--green); }
.footer__cols{ display:flex; gap:clamp(32px,6vw,72px); justify-content:flex-end; }
.footer__col{ display:flex; flex-direction:column; gap:10px; }
.footer__colhead{ color:var(--ink); margin-bottom:4px; }
.footer__col a{ font-size:0.95rem; color:var(--muted); transition:color .16s var(--ease); }
.footer__col a:hover{ color:var(--green); }
.footer__bar{ border-top:1px solid var(--hair); }
.footer__bar-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:20px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__diagram{ order:2; max-width:520px; }
}

@media (max-width:900px){
  /* nav collapse */
  .nav__links{
    position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--white); border-bottom:1px solid var(--hair); box-shadow:var(--shadow);
    padding:8px var(--gutter) 20px;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .25s var(--ease), opacity .2s var(--ease);
  }
  .nav__links.open{ max-height:560px; opacity:1; pointer-events:auto; }
  .navlink{ padding:14px 0; border-bottom:1px solid var(--hair); }
  .navlink.is-active::before{ content:""; }
  .nav__cta{ display:none; }
  .nav__cta-mobile{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
  .nav__cta-mobile .btn{ justify-content:center; }
  .hamburger{ display:flex; }

  .statstrip__inner{ grid-template-columns:repeat(2,1fr); }
  .statstrip__inner .stat:nth-child(3)::before,
  .statstrip__inner .stat:nth-child(2n+1)::before{ display:none; }

  .rail{ grid-template-columns:1fr; }
  .rail::before{ display:none; }
  .step{ padding-left:36px; }
  .step::before{
    content:""; position:absolute; left:14px; top:0; bottom:0; width:2px;
    background:repeating-linear-gradient(var(--green) 0 8px, transparent 8px 16px); opacity:.5;
  }
  .step:last-child::before{ bottom:50%; }

  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .markets-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }

  /* compact bubbles for perf */
  .hide-compact{ display:none; }
}

@media (max-width:640px){
  .card-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .cost-readouts{ grid-template-columns:1fr 1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__cols{ justify-content:flex-start; }
  .hero__title{ font-size:clamp(2.2rem,9vw,3rem); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .bub, .bubO{ animation:none; }
  /* distribute frozen bubbles up the chamber */
  .bub.b1{ transform:translateY(-60px);} .bub.b2{ transform:translateY(-140px);}
  .bub.b3{ transform:translateY(-220px);} .bub.b5{ transform:translateY(-300px);}
  .bub.b6{ transform:translateY(-380px);} .bub.b8{ transform:translateY(-180px);}
  .bub.b10{ transform:translateY(-260px);}
  .bubO.o1{ transform:translateY(-120px);} .bubO.o3{ transform:translateY(-240px);}
  .bubO.o4{ transform:translateY(-320px);} .bubO.o6{ transform:translateY(-200px);}
  .inlet-flow, .lead-wire{ animation:none; }
  .ion, .drop{ animation:none; opacity:.6; }
}