/* Tarn Water Systems — homepage concept */
:root {
  --ink: #081419;
  --ink-2: #0d1d23;
  --ink-3: #15303a;
  --paper: #eef2f0;
  --paper-2: #e3e9e7;
  --card: #f7f9f8;
  --line: rgba(8, 20, 25, 0.12);
  --line-d: rgba(232, 243, 242, 0.13);
  --text: #081419;
  --muted: #53656c;
  --muted-d: #93a7ab;
  --clear: #19c9d6;
  --clear-2: #8ff0f5;
  --clear-deep: #07808b;
  --raw: #c08a3a;
  --raw-2: #7d5a22;
  --f-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --f-body: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gut: clamp(18px, 3.6vw, 56px);
  --max: 1440px;
  --r: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--clear); color: var(--ink); }
:focus-visible { outline: 2px solid var(--clear); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }

/* ------------------------------------------------------------------ shared type */
.eyebrow, .kicker {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); }
.kicker span {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 24px; padding: 0 8px;
  border-radius: 99px; border: 1px solid currentColor;
  font-size: 11px;
}
.dark .kicker { color: var(--muted-d); }
.dark .kicker span { color: var(--clear); }
.sec-title {
  font-family: var(--f-display);
  font-weight: 560;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.038em;
  margin-top: 18px;
  max-width: 14ch;
  text-wrap: balance;
}
.sec-title.wide { max-width: none; }
.lede { color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); max-width: 34em; }
.dark .lede { color: var(--muted-d); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px 64px; align-items: end; }
.sec-head.split .lede { justify-self: end; padding-bottom: 8px; }
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --bh: 56px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--bh); padding: 0 26px;
  border-radius: 99px;
  font-weight: 600; font-size: 16px; letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: translate 0.45s var(--ease); }
.btn:hover svg { translate: 3px 0; }
.btn::before { /* water rising on hover */
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background:
    radial-gradient(60% 18px at 25% 0, transparent 60%, currentColor 62%) 0 0 / 50% 22px repeat-x,
    linear-gradient(currentColor, currentColor) 0 20px / 100% 100% no-repeat;
  color: var(--fill, var(--ink));
  translate: 0 102%;
  transition: translate 0.6s var(--ease);
  animation: btn-wave 1.6s linear infinite paused;
}
.btn:hover::before { translate: 0 -12px; animation-play-state: running; }
@keyframes btn-wave { to { background-position: 100% 0, 0 20px; } }
.btn-clear { background: var(--clear); color: var(--ink); --fill: var(--ink); }
.btn-clear:hover { color: #fff; }
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(8, 20, 25, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); --fill: #fff; }
.btn-ghost:hover { color: var(--ink); border-color: #fff; }
.btn-ink { background: var(--ink); color: #fff; --fill: var(--clear); }
.btn-ink:hover { color: var(--ink); }
.btn-sm { --bh: 42px; padding: 0 18px; font-size: 14px; }
.btn-lg { --bh: 64px; padding: 0 32px; font-size: 17px; }

/* ------------------------------------------------------------------ intro */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--ink); pointer-events: none; }
.intro-drop {
  position: absolute; left: 50%; top: 0; width: 16px; height: 22px; margin-left: -8px;
  background: var(--clear); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  translate: 0 -40px;
}
.intro-ring {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1.5px solid var(--clear); border-radius: 50%; opacity: 0;
}
html.no-intro .intro { display: none; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding-inline: var(--gut);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.brand, .nav-links, .nav-burger {
  background: rgba(8, 20, 25, 0.56);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #eaf3f2;
}
.brand { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 12px; border-radius: 99px; }
.brand-mark { width: 26px; height: 26px; color: var(--clear); }
.brand-word { font-family: var(--f-display); font-weight: 700; font-size: 23px; letter-spacing: -0.045em; line-height: 1; margin-top: -2px; }
.brand-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-d); padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.nav-links { display: flex; align-items: center; height: 46px; padding: 0 6px; border-radius: 99px; margin: 0 auto; }
.nav-links a { position: relative; padding: 8px 14px; font-size: 14.5px; font-weight: 500; border-radius: 99px; transition: background-color 0.3s, color 0.3s; }
.nav-links a:hover { background: rgba(255, 255, 255, 0.08); }
.nav-links a.is-active { color: var(--clear); }
.nav-cta { height: 46px; }
.nav-burger { display: none; width: 46px; height: 46px; border-radius: 50%; margin-left: auto; position: relative; }
.nav-burger i { position: absolute; left: 14px; right: 14px; height: 1.6px; background: currentColor; transition: rotate 0.4s var(--ease), top 0.4s var(--ease); }
.nav-burger i:first-child { top: 18px; }
.nav-burger i:last-child { top: 26px; }
.menu-open .nav-burger i:first-child { top: 22px; rotate: 45deg; }
.menu-open .nav-burger i:last-child { top: 22px; rotate: -45deg; }
.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 90px var(--gut) 40px;
  clip-path: circle(0% at calc(100% - 40px) 37px); visibility: hidden;
  transition: clip-path 0.7s var(--ease), visibility 0s 0.7s;
}
.menu a { font-family: var(--f-display); font-size: clamp(34px, 9vw, 56px); font-weight: 560; letter-spacing: -0.035em; line-height: 1.12; }
.menu .menu-cta { margin-top: 24px; font-size: 18px; font-family: var(--f-body); color: var(--ink); background: var(--clear); border-radius: 99px; padding: 16px 24px; align-self: flex-start; letter-spacing: 0; font-weight: 600; }
.menu-open .menu { clip-path: circle(150% at calc(100% - 40px) 37px); visibility: visible; transition: clip-path 0.8s var(--ease); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; background: #1d190f; }
.hero-pin { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; color: #fff; }
.hero-media { position: absolute; inset: 0; }
.hero-poster, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-gl { opacity: 0; transition: opacity 0.6s; }
.hero-gl.is-live { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 12, 14, 0.62) 0%, rgba(5, 12, 14, 0.18) 42%, rgba(5, 12, 14, 0) 62%),
    linear-gradient(to bottom, rgba(5, 12, 14, 0.38), rgba(5, 12, 14, 0) 22%);
}
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 110px; padding-bottom: clamp(26px, 5.5vh, 64px); pointer-events: none; }
.hero-inner a { pointer-events: auto; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.82); margin-bottom: 22px; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--raw); box-shadow: 0 0 0 4px rgba(192, 138, 58, 0.22); transition: background-color 0.5s, box-shadow 0.5s; }
.hero.is-clear .hero-eyebrow .dot { background: var(--clear); box-shadow: 0 0 0 4px rgba(25, 201, 214, 0.25); }
.hero-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(58px, 9.6vw, 176px);
  line-height: 0.88;
  letter-spacing: -0.052em;
  margin-left: -0.04em;
}
.ht { display: block; position: relative; padding-bottom: 0.16em; margin-bottom: -0.1em; }
.ht-in { color: #fff; transition: opacity 0.4s; }
.ht-out {
  color: transparent;
  background: url("assets/img/hero-clear.jpg") 40% 50% / 120% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px rgba(210, 250, 252, 0.55);
  animation: caustic-pan 26s linear infinite alternate;
}
.ht-out::after {
  content: "Your spec out."; position: absolute; inset: 0;
  color: #fff; -webkit-text-stroke: 0; opacity: var(--solid, 0);
  background: none;
}
@keyframes caustic-pan { to { background-position: 60% 30%; } }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; margin-top: clamp(22px, 3.4vh, 40px); flex-wrap: wrap; }
.hero-sub { max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: rgba(255, 255, 255, 0.88); text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.readout {
  position: absolute; z-index: 3; right: var(--gut); top: max(104px, 16vh);
  width: 340px; padding: 16px 18px 14px;
  border-radius: 20px;
  background: rgba(8, 20, 25, 0.44);
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--f-mono); font-size: 12px; color: rgba(255, 255, 255, 0.92);
}
.ro-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ro-id { color: rgba(255, 255, 255, 0.62); letter-spacing: 0.02em; }
.ro-state { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 99px; background: rgba(192, 138, 58, 0.2); color: #f0c77f; overflow: hidden; transition: background-color 0.5s, color 0.5s; }
.ro-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ro-state b { font-weight: 500; white-space: nowrap; }
.ro-state .st-ok { display: none; }
.ro-state[data-state="ok"] { background: rgba(25, 201, 214, 0.2); color: var(--clear-2); }
.ro-state[data-state="ok"] .st-ok { display: inline; }
.ro-state[data-state="ok"] .st-raw { display: none; }
.ro-rows li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 10px 0 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ro-rows .k { color: rgba(255, 255, 255, 0.72); font-family: var(--f-body); font-size: 14px; }
.ro-rows .v b { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.ro-rows .v em { font-style: normal; color: rgba(255, 255, 255, 0.5); margin-left: 5px; }
.ro-rows .bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ro-rows .bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--raw); transform-origin: 0 50%; }
.ro-foot { display: flex; justify-content: space-between; padding-top: 11px; color: rgba(255, 255, 255, 0.58); }
.ro-pct b { color: #fff; font-weight: 600; }

.lens-tag {
  position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transition: opacity 0.35s;
  will-change: transform;
}
.lens-tag span { display: inline-block; padding: 6px 10px; border-radius: 99px; background: var(--clear-2); white-space: nowrap; }
.hero.lens-on .lens-tag { opacity: 1; }
.hero-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.hint-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.hint-line { position: absolute; left: 50%; top: calc(100% + 6px); width: 1px; height: 14px; background: linear-gradient(currentColor, transparent); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { scale: 1 0; transform-origin: top; } 50% { scale: 1 1; transform-origin: top; } 51% { transform-origin: bottom; } 100% { scale: 1 0; transform-origin: bottom; } }

/* ------------------------------------------------------------------ problems */
.problems { padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 9vw, 140px); }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: clamp(90px, 10vw, 150px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof li { padding: 26px 24px 24px; border-left: 1px solid var(--line); }
.proof li:first-child { border-left: 0; padding-left: 0; }
.proof b { display: block; font-family: var(--f-display); font-weight: 560; font-size: clamp(34px, 3.4vw, 54px); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.proof span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); max-width: 16em; }
.prob-list { border-bottom: 1px solid var(--line); }
.prob {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 230px; gap: 24px 48px; align-items: center;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.prob::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--ink); transform-origin: 0 50%; scale: var(--rule, 0) 1; }
.prob-q { display: flex; align-items: flex-start; gap: 18px; }
.prob-n {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 4px; border-radius: 50%;
  font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--raw); color: var(--raw-2);
  transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), color 0.6s var(--ease);
}
.prob.is-on .prob-n { background: var(--clear); border-color: var(--clear); color: var(--ink); }
.prob-q h3 { font-family: var(--f-display); font-weight: 520; font-size: clamp(26px, 2.7vw, 42px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.prob-a p { font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); max-width: 26em; padding-left: 28px; position: relative; }
.prob-a p::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 2px; background: var(--clear-deep); }
.prob-viz { height: 110px; display: grid; place-items: center end; }
.viz-wave { width: 220px; height: 110px; overflow: visible; }
.viz-wave path { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.viz-wave .vw-in { stroke: var(--raw); }
.viz-wave .vw-out { stroke: var(--clear-deep); stroke-width: 3; stroke-dasharray: 10 8; animation: flow 1s linear infinite; }
.viz-wave text { font-family: var(--f-mono); font-size: 10px; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.viz-cost { position: relative; display: flex; align-items: flex-end; gap: 16px; height: 110px; width: 220px; justify-content: flex-end; }
.vc-col { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vc-bar { display: block; width: 46px; border-radius: 8px 8px 3px 3px; transform-origin: 50% 100%; }
.vc-before { height: 84px; background: repeating-linear-gradient(135deg, var(--raw) 0 6px, #cf9d51 6px 12px); }
.vc-after { height: 50px; background: var(--clear); }
.vc-delta { position: absolute; left: 0; top: 8px; font-family: var(--f-display); font-size: 34px; font-weight: 600; letter-spacing: -0.04em; color: var(--clear-deep); }
.viz-target { width: 110px; height: 110px; margin-right: 50px; overflow: visible; }
.viz-target > circle { fill: none; stroke: var(--line); stroke-width: 1.5; }
.viz-target > circle:last-of-type { fill: rgba(25, 201, 214, 0.14); stroke: var(--clear-deep); }
.vt-dots circle { fill: var(--raw); }
.viz-space { position: relative; width: 200px; height: 104px; }
.vs-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 13px 13px; border-radius: 8px; mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.vs-big { position: absolute; left: 10px; top: 12px; width: 180px; height: 78px; border: 2px dashed var(--raw); border-radius: 8px; }
.vs-small { position: absolute; right: 18px; bottom: 14px; width: 52px; height: 26px; background: var(--clear); border-radius: 6px; }

/* ------------------------------------------------------------------ services */
.services { padding: clamp(60px, 7vw, 110px) 0 clamp(140px, 14vw, 220px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); align-items: start; }
.svc-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.svc-media { position: relative; aspect-ratio: 16 / 10.5; border-radius: 15px; overflow: hidden; background: var(--paper-2); }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-media img.is-next { clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); }
.svc-media-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 99px; background: rgba(8, 20, 25, 0.62); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.svc-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 22px 14px 18px; }
.svc-no { grid-row: 1 / 3; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: var(--clear); font-family: var(--f-mono); font-weight: 600; font-size: 15px; align-self: start; }
.svc-head h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 2.8vw, 44px); letter-spacing: -0.04em; line-height: 1; }
.svc-head p { color: var(--muted); font-size: 15.5px; line-height: 1.4; }
.svc-list li {
  position: relative; display: block; padding: 15px 44px 15px 14px; border-top: 1px solid var(--line); border-radius: 12px;
  cursor: default; transition: background-color 0.35s var(--ease);
}
.svc-list li::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--clear) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10M11 6l4 4-4 4' fill='none' stroke='%23081419' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  scale: 0; transition: scale 0.4s var(--ease);
}
.svc-list li:hover, .svc-list li.is-active { background: var(--paper-2); border-top-color: transparent; }
.svc-list li:hover + li, .svc-list li.is-active + li { border-top-color: transparent; }
.svc-list li.is-active::after { scale: 1; }
.svc-list h4 { font-size: 18px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; }
.svc-list p { font-size: 15px; line-height: 1.42; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------------ dark sections + water surface */
.dark { position: relative; background: var(--ink); color: #e8f0ef; }
.surface { position: absolute; left: 0; right: 0; top: -79px; height: 80px; pointer-events: none; }
.surface svg { width: 100%; height: 100%; }
.surface path { fill: var(--ink); }

/* ------------------------------------------------------------------ how / builder */
.how { padding: clamp(60px, 7vw, 100px) 0 clamp(100px, 10vw, 150px); }
.builder { position: relative; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-bottom: 34px; }
.pick-label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted-d); margin-bottom: 12px; }
.pick-label b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--clear); color: var(--ink); font-family: var(--f-mono); font-size: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  position: relative; height: 42px; padding: 0 17px; border-radius: 99px;
  border: 1px solid var(--line-d); color: #dbe7e6; font-size: 15px; font-weight: 500;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), scale 0.35s var(--ease);
}
.chips button:hover { border-color: rgba(25, 201, 214, 0.6); }
.chips button:active { scale: 0.96; }
.chips button[aria-checked="true"], .chips button.is-on { background: var(--clear); border-color: var(--clear); color: var(--ink); }
.chips button.chip-in { animation: chip-in 0.5s var(--ease) both; }
@keyframes chip-in { from { opacity: 0; translate: 0 8px; } }

.train {
  position: relative;
  display: grid; grid-template-columns: 116px minmax(0, 1fr) 132px; align-items: start;
  height: 300px;
  border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 0%, #10262e 0%, #0a171c 70%);
  border: 1px solid var(--line-d);
  overflow: hidden;
}
.train-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.train-stage { position: relative; height: 100%; grid-column: 2; }
.train-nodes { position: absolute; inset: 0; }
.node { position: absolute; top: calc(var(--pipe-y, 40%) - 40px); width: 80px; margin-left: -40px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.node-orb {
  position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 60%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.node-orb svg { width: 34px; height: 34px; color: #e8f6f6; }
.node-n { position: absolute; top: 6px; left: 8px; font-family: var(--f-mono); font-size: 9.5px; color: var(--muted-d); font-style: normal; }
.node-name { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #e8f0ef; width: 120px; text-wrap: balance; }
.node.is-hot .node-orb { border-color: var(--clear); box-shadow: 0 0 0 4px rgba(25, 201, 214, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35); }
.node.is-dim { opacity: 0.35; }
.node .catch { position: absolute; inset: -1px; border-radius: 24px; pointer-events: none; opacity: 0; }
.train-io { position: absolute; z-index: 2; bottom: calc(100% - var(--pipe-y, 120px) + 20px); display: flex; flex-direction: column; gap: 2px; max-width: 150px; }
.train-in { left: 18px; }
.train-out { right: 18px; align-items: flex-end; }
.train-io span { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); }
.train-io b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.train-in b { color: #f0c77f; }
.train-out { text-align: right; }
.train-out b { color: var(--clear-2); }
.train-waste { position: absolute; right: 18px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.tw-label { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #f0c77f; padding: 4px 9px; border: 1px dashed rgba(240, 199, 127, 0.55); border-radius: 99px; }
.train-waste b { font-weight: 500; color: #d9cdb6; }
.train-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 4px 0; min-height: 28px; }
.lg { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted-d); cursor: default; padding: 3px 0; transition: color 0.3s; }
.lg i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.lg:hover, .lg.is-hot { color: #fff; }
.lg-head { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); margin-right: 4px; }
.train-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 30px; }
.tcard {
  position: relative; padding: 18px 18px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line-d);
  transition: background-color 0.35s, border-color 0.35s;
}
.tcard:hover, .tcard.is-hot { background: rgba(25, 201, 214, 0.07); border-color: rgba(25, 201, 214, 0.45); }
.tcard-n { font-family: var(--f-mono); font-size: 11px; color: var(--clear); }
.tcard h4 { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; margin-top: 6px; line-height: 1.2; }
.tcard p { font-size: 14.5px; color: var(--muted-d); margin-top: 4px; line-height: 1.4; }
.tcard-rm { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tcard-rm span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px 3px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: #d7e3e2; }
.tcard-rm span i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tcard-w { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-d); font-size: 12.5px; color: #cdbf9f; }
.tcard-w em { font-style: normal; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); margin-right: 6px; }
.train-sum { display: grid; grid-template-columns: repeat(4, auto) 1fr; align-items: end; gap: 20px 40px; margin-top: 30px; padding: 24px 26px; border-radius: 20px; background: rgba(25, 201, 214, 0.06); border: 1px solid rgba(25, 201, 214, 0.22); }
.ts-item span { display: block; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); margin-bottom: 4px; }
.ts-item b { font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 40px); font-weight: 560; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ts-item em { font-style: normal; font-size: 13px; color: var(--muted-d); margin-left: 6px; }
.ts-chem b { font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.3; display: block; max-width: 17em; }
.ts-cta { justify-self: end; }
.train-note { margin-top: 14px; font-size: 13px; color: var(--muted-d); }

/* ------------------------------------------------------------------ fit */
.fit { padding: clamp(150px, 14vw, 220px) 0 clamp(60px, 7vw, 100px); }
.fit-box { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.fit-floor {
  position: relative; aspect-ratio: 16 / 10.5; border-radius: 26px; overflow: hidden;
  background: radial-gradient(90% 80% at 50% 45%, #f9fbfa 0%, #e6ecea 100%);
  border: 1px solid var(--line);
}
.fit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fit-sprites, .fit-dims { position: absolute; inset: 0; pointer-events: none; }
.fit-sprites img { position: absolute; max-width: none; transform-origin: 50% 100%; will-change: transform; }
.fit-dims span {
  position: absolute; translate: -50% -50%;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--ink);
  background: #fff; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap;
  box-shadow: 0 4px 12px rgba(8, 20, 25, 0.08);
}
.fit-dims span.scale { background: var(--ink); color: #fff; border-color: var(--ink); }
.fit-panel { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 38px); border-radius: 26px; background: var(--ink); color: #e8f0ef; }
.fit-kind { font-family: var(--f-display); font-size: clamp(34px, 3.4vw, 52px); font-weight: 560; letter-spacing: -0.04em; line-height: 1; }
.fit-desc { color: var(--muted-d); margin-top: 12px; min-height: 3em; }
.fit-slider { display: block; margin: 30px 0 26px; }
.fs-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.fs-top > span { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); margin-right: auto; }
.fs-top output { font-family: var(--f-display); font-size: 44px; font-weight: 560; letter-spacing: -0.04em; line-height: 1; color: var(--clear); font-variant-numeric: tabular-nums; }
.fs-top em { font-style: normal; color: var(--muted-d); }
.fit-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; --p: 33%; }
.fit-slider input::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--clear) var(--p), rgba(255, 255, 255, 0.12) var(--p)); }
.fit-slider input::-moz-range-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); }
.fit-slider input::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--clear); }
.fit-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 6px solid var(--clear); box-shadow: 0 0 0 6px rgba(25, 201, 214, 0.18); transition: box-shadow 0.3s; }
.fit-slider input:active::-webkit-slider-thumb { box-shadow: 0 0 0 12px rgba(25, 201, 214, 0.2); }
.fit-slider input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 6px solid var(--clear); }
.fs-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted-d); }
.fit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: auto 0 0; border-top: 1px solid var(--line-d); }
.fit-stats div { padding: 16px 0 4px; border-bottom: 1px solid var(--line-d); }
.fit-stats div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line-d); }
.fit-stats div:nth-child(even) { padding-left: 18px; }
.fit-stats div:nth-last-child(-n + 2) { border-bottom: 0; }
.fit-stats dt { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); }
.fit-stats dd { margin: 4px 0 10px; font-size: 16px; color: var(--muted-d); }
.fit-stats dd b { font-family: var(--f-display); font-size: 28px; font-weight: 560; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ limits */
.limits { padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 140px); }
.limits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lim { padding: 22px 22px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.lim-k { display: block; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.lim-v { display: block; font-family: var(--f-display); font-weight: 560; font-size: clamp(26px, 2.3vw, 34px); letter-spacing: -0.035em; margin: 8px 0 18px; line-height: 1.05; }
.lim-v em { font-style: normal; font-size: 0.55em; color: var(--muted); letter-spacing: -0.01em; }
.lim-track { position: relative; display: block; height: 10px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(8, 20, 25, 0.08) 0 2px, transparent 2px 8px), var(--paper-2); overflow: hidden; }
.lim-fill { position: absolute; top: 0; bottom: 0; left: var(--lo); width: var(--w); border-radius: 10px; background: linear-gradient(90deg, var(--clear-deep), var(--clear)); transform-origin: 0 50%; }
.lim-ends { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.contam { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.contam-label { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 10px; }
.contam-list { display: flex; flex-wrap: wrap; gap: 8px; }
.contam-list li { padding: 9px 16px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 500; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.contam-list li:hover { background: var(--ink); color: var(--clear-2); border-color: var(--ink); }

/* ------------------------------------------------------------------ industries */
.industries { padding: clamp(40px, 5vw, 70px) 0 clamp(150px, 15vw, 230px); }
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ind {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: clamp(190px, 17vw, 250px); padding: 22px;
  border-radius: 22px; background: var(--card); border: 1px solid var(--line);
  transition: color 0.5s var(--ease);
}
.ind-n { position: absolute; top: 20px; left: 22px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); transition: color 0.5s; }
.ind-ic { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; color: var(--clear-deep); transition: color 0.5s, translate 0.8s var(--ease); }
.ind:hover .ind-ic { color: var(--clear); translate: 0 -3px; }
.ind h3 { font-family: var(--f-display); font-weight: 560; font-size: clamp(23px, 1.9vw, 30px); letter-spacing: -0.032em; line-height: 1.02; }
.ind p { font-size: 14.5px; color: var(--muted); line-height: 1.38; transition: color 0.5s; }
.ind-fill { position: absolute; left: -10%; right: -10%; bottom: 0; height: 130%; z-index: -1; background: var(--ink); translate: 0 calc(100% + 24px); transition: translate 0.8s var(--ease); }
.ind-fill::before {
  content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px;
  background: radial-gradient(50% 16px at 50% 100%, var(--ink) 98%, transparent) 0 0 / 60px 16px repeat-x;
  animation: ind-wave 2.2s linear infinite;
}
.ind-fill::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 10%, rgba(25, 201, 214, 0.28), transparent 70%); }
@keyframes ind-wave { to { background-position: 60px 0; } }
.ind:hover { color: #fff; }
.ind:hover .ind-fill { translate: 0 22%; }
.ind:hover p { color: var(--muted-d); }
.ind:hover .ind-n { color: var(--clear); }

/* ------------------------------------------------------------------ results */
.results { padding: clamp(60px, 7vw, 100px) 0 clamp(90px, 10vw, 150px); }
.case-tabs { justify-self: end; display: inline-flex; gap: 4px; padding: 5px; border-radius: 99px; border: 1px solid var(--line-d); }
.case-tabs button { height: 40px; padding: 0 18px; border-radius: 99px; font-size: 14.5px; font-weight: 500; color: var(--muted-d); transition: background-color 0.35s, color 0.35s; }
.case-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.cases { display: grid; }
.case { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(24px, 3.4vw, 60px); align-items: start; visibility: hidden; }
.case.is-on { visibility: visible; }
.case-img { margin: 0; aspect-ratio: 4 / 3.4; border-radius: 22px; overflow: hidden; background: var(--ink-3); }
.case-img img { width: 100%; height: 100%; object-fit: cover; }
.case-meta { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--clear); }
.case-title { font-family: var(--f-display); font-weight: 560; font-size: clamp(32px, 3.3vw, 52px); letter-spacing: -0.038em; line-height: 1; margin-top: 12px; text-wrap: balance; }
.case-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.case-steps div { padding-top: 14px; border-top: 1px solid var(--line-d); }
.case-steps span { display: block; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); margin-bottom: 6px; }
.case-steps p { font-size: 15px; line-height: 1.45; color: #d5e1e0; }
.case-result { display: grid; grid-template-columns: auto 1fr; gap: 20px 40px; align-items: end; margin-top: 34px; padding: 24px 26px; border-radius: 20px; background: rgba(25, 201, 214, 0.07); border: 1px solid rgba(25, 201, 214, 0.25); }
.cr-big { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; }
.cr-big b { font-family: var(--f-display); font-weight: 600; font-size: clamp(64px, 7vw, 108px); letter-spacing: -0.055em; line-height: 0.9; color: var(--clear); font-variant-numeric: tabular-nums; }
.cr-big em { align-self: start; margin-top: 0.35em; font-style: normal; font-family: var(--f-display); font-size: 26px; color: var(--clear); letter-spacing: -0.02em; }
.cr-big span { grid-column: 1 / -1; font-size: 15px; color: #d5e1e0; margin-top: 8px; }
.cr-list li { padding: 8px 0; border-bottom: 1px solid var(--line-d); font-size: 15px; color: var(--muted-d); }
.cr-list li:last-child { border-bottom: 0; }
.cr-list b { color: #fff; font-weight: 600; margin-right: 4px; }

/* ------------------------------------------------------------------ faq */
.faq { padding: clamp(100px, 11vw, 170px) 0 clamp(150px, 15vw, 230px); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 40px 80px; align-items: start; }
.faq .sec-head { position: sticky; top: 110px; }
.faq .lede { margin-top: 18px; }
.faq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa h3 { font-family: var(--f-display); font-weight: 520; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.028em; line-height: 1.12; transition: color 0.3s; }
.qa summary:hover h3 { color: var(--clear-deep); }
.qa-x { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); transition: background-color 0.4s var(--ease), border-color 0.4s, rotate 0.5s var(--ease); }
.qa-x::before, .qa-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; margin: -0.9px 0 0 -7px; background: currentColor; }
.qa-x::after { rotate: 90deg; transition: rotate 0.5s var(--ease); }
.qa[open] .qa-x { background: var(--clear); border-color: var(--clear); rotate: 180deg; }
.qa[open] .qa-x::after { rotate: 0deg; }
.qa-a { overflow: hidden; }
.qa-a > * { max-width: 36em; }
.qa-a p { color: var(--muted); font-size: 17px; padding-bottom: 14px; }
.qa-a > :last-child { padding-bottom: 28px; }
.qa-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; }
.qa-tags li { font-family: var(--f-mono); font-size: 12px; padding: 6px 11px; border-radius: 99px; background: var(--paper-2); }
.qa-small { font-size: 13px !important; }

/* ------------------------------------------------------------------ start / form */
.start { padding: clamp(60px, 7vw, 100px) 0 clamp(80px, 9vw, 130px); }
.start-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; }
.start-intro { position: sticky; top: 110px; }
.start .sec-title { max-width: 12ch; font-size: clamp(40px, 4.8vw, 80px); }
.mode-switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 32px; padding: 5px; border-radius: 99px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, 0.03); }
.mode-switch button { position: relative; z-index: 1; height: 44px; padding: 0 18px; border-radius: 99px; font-size: 14.5px; font-weight: 600; color: var(--muted-d); transition: color 0.4s; white-space: nowrap; }
.mode-switch button[aria-selected="true"] { color: var(--ink); }
.ms-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 99px; background: var(--clear); transition: translate 0.55s var(--ease); }
.mode-switch[data-mode="analysis"] .ms-pill { translate: 100% 0; }
.start-lede { margin-top: 20px; color: var(--muted-d); max-width: 28em; }
.bottle { display: flex; align-items: flex-end; gap: 18px; margin-top: 44px; }
.bottle svg { width: 104px; height: auto; overflow: visible; }
.b-bg { fill: rgba(255, 255, 255, 0.04); }
.b-wave { fill: var(--raw); transition: fill 0.8s; animation: bwave 2.4s linear infinite; }
@keyframes bwave { to { transform: translateX(-60px); } }
.b-glass { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.b-cap { fill: var(--ink-3); stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.bottle-pct { font-family: var(--f-mono); font-size: 12px; color: var(--muted-d); padding-bottom: 6px; }
.bottle-pct b { font-family: var(--f-display); font-size: 36px; color: #fff; font-weight: 560; letter-spacing: -0.03em; margin-right: 2px; font-variant-numeric: tabular-nums; }

.form { position: relative; padding: clamp(22px, 2.8vw, 40px); border-radius: 28px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line-d); }
.f-row { border: 0; margin: 0; padding: 0 0 26px; min-width: 0; }
.f-row + .f-row { padding-top: 26px; border-top: 1px solid var(--line-d); }
.f-row legend, .f-label, .f-field > span:first-child { display: block; padding: 0; margin-bottom: 12px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); }
.f-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: rgba(147, 167, 171, 0.7); margin-left: 6px; }
.f-label em.req { color: var(--clear); }
.f-row legend { float: left; width: 100%; }
.f-row legend + * { clear: both; }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.f-field { display: block; }
.f-field input, .f-unit select, .f-inline {
  width: 100%; height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0;
  background: transparent; color: #fff; font: inherit; font-size: 18px; outline: none; transition: border-color 0.3s;
}
.f-field input::placeholder, .f-inline::placeholder { color: rgba(147, 167, 171, 0.55); }
.f-field input:focus, .f-inline:focus { border-bottom-color: var(--clear); }
.f-unit { display: flex; gap: 10px; }
.f-unit input { flex: 1; min-width: 0; }
.f-unit select { width: auto; padding-right: 8px; font-size: 15px; color: var(--muted-d); cursor: pointer; }
.f-unit select option { background: var(--ink); color: #fff; }
.f-inline { margin-top: 14px; font-size: 16px; }
.chips-light button { height: 40px; font-size: 14.5px; }
.chips-light button.is-on { background: var(--clear); color: var(--ink); border-color: var(--clear); }
.f-drop {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 20px; text-align: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.22); border-radius: 18px; cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
.f-drop:hover, .f-drop.is-over { border-color: var(--clear); background: rgba(25, 201, 214, 0.06); }
.f-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.f-drop svg { width: 26px; height: 26px; color: var(--clear); margin-bottom: 6px; }
.fd-main { font-weight: 600; }
.fd-main u { text-decoration-color: var(--clear); text-underline-offset: 3px; }
.fd-sub { font-size: 13.5px; color: var(--muted-d); }
.fd-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.fd-files span { font-family: var(--f-mono); font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(25, 201, 214, 0.16); color: var(--clear-2); }
.mode-analysis .f-drop-row { order: -1; }
.f-submit { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line-d); }
.f-fine { font-size: 13.5px; color: var(--muted-d); }
.form-inner { display: flex; flex-direction: column; }
.f-done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 30px; visibility: hidden; opacity: 0; }
.f-done h3 { font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 560; letter-spacing: -0.03em; }
.f-done p { color: var(--muted-d); }
.fd-check { width: 72px; height: 72px; margin-bottom: 8px; }
.fd-check circle { fill: none; stroke: var(--clear); stroke-width: 2; }
.fd-check path { fill: none; stroke: var(--clear); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form.is-sent > :not(.f-done) { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--ink); color: #dfe9e8; padding: 30px 0 26px; border-top: 1px solid var(--line-d); overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; padding: 40px 0 20px; }
.foot-brand { display: flex; flex-direction: column; gap: 16px; color: var(--muted-d); }
.foot-brand .brand-mark { width: 40px; height: 40px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols h4 { font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-d); margin-bottom: 12px; }
.foot-cols a { display: block; padding: 4px 0; font-size: 15px; transition: color 0.3s; }
.foot-cols a:hover { color: var(--clear); }
.foot-word {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(120px, 31vw, 520px); letter-spacing: -0.07em; line-height: 0.78;
  margin: 10px 0 0 -0.05em; padding-bottom: 0.06em;
  color: transparent;
  background: url("assets/img/hero-clear.jpg") 50% 50% / 60% auto;
  -webkit-background-clip: text; background-clip: text;
  animation: caustic-pan 30s linear infinite alternate;
  user-select: none;
}
.foot-base { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line-d); font-family: var(--f-mono); font-size: 11.5px; color: var(--muted-d); }

/* ------------------------------------------------------------------ reveal helpers */
.rv { opacity: 0; }
html.still .rv, html.no-js .rv { opacity: 1; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .nav-links a { padding: 8px 10px; font-size: 13.5px; }
  .brand-sub { display: none; }
  .prob { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof li:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .prob-viz { display: none; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-col[data-phase="run"] { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .svc-col[data-phase="run"] .svc-media { grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }
  .fit-box { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .train-sum { grid-template-columns: repeat(2, 1fr); }
  .ts-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .readout { left: var(--gut); right: auto; top: 84px; width: auto; max-width: 360px; padding: 12px 14px 10px; }
  .ro-rows li:nth-child(n + 4) { display: none; }
  .ro-rows li { padding: 7px 0 6px; }
  .sec-head.split { grid-template-columns: 1fr; }
  .sec-head.split .lede { justify-self: start; }
  .case-tabs { justify-self: start; }
  .pick { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .case-img { aspect-ratio: 16 / 9; }
  .faq-wrap, .start-wrap { grid-template-columns: 1fr; }
  .faq .sec-head, .start-intro { position: static; }
  .limits-grid { grid-template-columns: 1fr 1fr; }
  .contam { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-pin { min-height: 600px; }
  .hero-title { font-size: clamp(44px, 12.6vw, 96px); }
  .eb-more, .ro-route { display: none; }
  .ro-foot { justify-content: flex-end; }
  .hero-eyebrow { font-size: 10.5px; margin-bottom: 16px; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-ctas .btn { --bh: 52px; font-size: 15px; white-space: normal; }
  .hero-hint { display: none; }
  .prob { grid-template-columns: 1fr; gap: 14px; }
  .prob-a p { padding-left: 58px; }
  .prob-a p::before { left: 22px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-col[data-phase="run"] { display: block; }
  .svc-col[data-phase="run"] .svc-media { aspect-ratio: 4 / 3.3; min-height: 0; }
  .train { grid-template-columns: 1fr; height: 330px; }
  .train-stage { grid-column: 1; grid-row: 1; }
  .train-io { bottom: auto; top: 14px; max-width: 46%; }
  .train-in { left: 16px; }
  .train-out { right: 16px; }
  .node { width: 56px; margin-left: -28px; top: calc(var(--pipe-y, 40%) - 28px); gap: 10px; }
  .node-orb { width: 56px; height: 56px; border-radius: 17px; }
  .node .catch { border-radius: 17px; }
  .node-orb svg { width: 26px; height: 26px; }
  .node-n { display: none; }
  .node-name { font-size: 11.5px; width: 70px; }
  .train-waste { left: 16px; right: 16px; bottom: 12px; font-size: 12px; }
  .train-sum { grid-template-columns: 1fr 1fr; padding: 20px; gap: 18px; }
  .ts-cta { width: 100%; }
  .limits-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ind { padding: 16px; min-height: 180px; }
  .ind-n { top: 14px; left: 16px; }
  .ind h3 { font-size: 19px; hyphens: auto; overflow-wrap: anywhere; }
  .ind p { font-size: 13px; }
  .case-steps { grid-template-columns: 1fr; gap: 12px; }
  .case-result { grid-template-columns: 1fr; }
  .case-tabs { width: 100%; }
  .case-tabs button { flex: 1; padding: 0 10px; font-size: 13.5px; }
  .fit-floor { aspect-ratio: 1 / 0.9; }
  .fit-stats dd b { font-size: 24px; }
  .f-2 { grid-template-columns: 1fr; }
  .mode-switch { display: grid; width: 100%; }
  .mode-switch button { padding: 0 10px; font-size: 13.5px; }
  .bottle { margin-top: 28px; }
  .bottle svg { width: 70px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-base { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}