/* ==========================================================================
   Global Energy Consultants — Small Hydropower stream
   Shared design system for docs/hydro/ and docs/ru/hydro/

   Extends the MRUS design language (Space Grotesk / JetBrains Mono,
   cream #F1EEE8 / ink #0C0D0F / signal orange #FF4F00) with a water axis.

   Token values are measured, not guessed: type scale, spacing and motion are
   derived from live measurement of award-winning pages at 1440x900 and
   390x844, then re-rendered in Space Grotesk to verify.

   Two organising devices recur on every page:
     THE DATUM   — a hairline with elevation ticks; figures hang off it.
     DRAFTING    — corner crop marks and a vertical rail label on major blocks,
                   the way a drawing sheet is titled.
   ========================================================================== */

:root{
  /* ---------------------------------------------------------- palette --- */
  --ink:#0C0D0F;
  --cream:#F1EEE8;
  --accent:#FF4F00;          /* signal: CTA, fills, and the "+cost" direction */
  --accent-text:#FF4F00;     /* accent AS TEXT — darkened on light grounds below */
  --deep:#06131A;            /* deep water */
  --hydro:#1B6E7E;           /* teal: the medium, and "-cost" direction */
  --glacier:#9FD3D8;         /* pale water highlight */
  --paper:#E7E3DA;           /* cream, one step down */

  --ink-70:rgba(12,13,15,.70);
  --ink-55:rgba(12,13,15,.64);   /* AA on cream and paper */
  --ink-30:rgba(12,13,15,.58);   /* chrome glyphs are still text */
  --ink-18:rgba(12,13,15,.18);
  --ink-10:rgba(12,13,15,.10);
  --cream-82:rgba(241,238,232,.82);
  --cream-64:rgba(241,238,232,.64);
  --cream-42:rgba(241,238,232,.60);  /* AA on ink and deep */
  --cream-30:rgba(241,238,232,.52);
  --cream-16:rgba(241,238,232,.16);
  --cream-10:rgba(241,238,232,.10);

  /* ------------------------------------------------------------- type --- */
  --sans:'Space Grotesk',ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* min @390 -> max @1440. The vw share GROWS as the viewport narrows, so the
     display type does not collapse on mobile. */
  --fs-display: clamp(3.25rem, 1.20rem + 8.75vw, 8.75rem);     /*  52 -> 140 */
  --fs-figure:  clamp(2.75rem, 1.08rem + 6.86vw, 7.25rem);     /*  44 -> 116 */
  --fs-section: clamp(2.375rem, 1.11rem + 5.19vw, 5.75rem);    /*  38 ->  92 */
  --fs-sub:     clamp(1.5rem, 1.27rem + 0.95vw, 2.125rem);     /*  24 ->  34 */
  --fs-lead:    clamp(1.1875rem, 1.02rem + 0.67vw, 1.625rem);  /*  19 ->  26 */
  --fs-body:    clamp(1rem, 0.95rem + 0.19vw, 1.125rem);       /*  16 ->  18 */
  --fs-small:   clamp(0.8125rem, 0.78rem + 0.175vw, 0.9375rem); /*  13 ->  15 */
  --fs-mono:    clamp(0.6875rem, 0.67rem + 0.089vw, 0.75rem);   /*  11 ->  12 */
  --fs-micro:   0.625rem;                                      /*  10, fixed */

  --lh-display:0.90; --lh-figure:0.86; --lh-section:0.95; --lh-sub:1.08;
  --lh-lead:1.35;    --lh-body:1.60;   --lh-small:1.50;   --lh-mono:1.20;

  --tr-display:-0.045em; --tr-figure:-0.04em; --tr-section:-0.035em; --tr-sub:-0.02em;
  --tr-lead:-0.012em;    --tr-body:-0.005em;  --tr-small:0;          --tr-mono:0.26em;

  /* Space Grotesk's average running character is 0.5099em while `ch` is the
     `0` advance at 0.6409em - a factor of 1.257. These are already divided. */
  --measure-lead:35ch;    /* ~44 characters */
  --measure-body:52.5ch;  /* ~67 characters */
  --measure-small:52.5ch; /* ~67 characters — same tier, same measure */

  /* ------------------------------------------------------------ space --- */
  --space-3xs:clamp(0.375rem,0.329rem + 0.19vw,0.5rem);
  --space-2xs:clamp(0.625rem,0.532rem + 0.38vw,0.875rem);
  --space-xs: clamp(1rem,0.861rem + 0.57vw,1.375rem);
  --space-s:  clamp(1.5rem,1.268rem + 0.95vw,2.125rem);
  --space-m:  clamp(2.25rem,1.786rem + 1.90vw,3.5rem);
  --space-l:  clamp(3.5rem,2.757rem + 3.05vw,5.5rem);
  --space-xl: clamp(5rem,3.7rem + 5.33vw,8.5rem);
  --space-2xl:clamp(6.5rem,4.643rem + 7.62vw,11.5rem);
  --space-3xl:clamp(8.5rem,5.714rem + 11.43vw,16rem);

  /* three rhythms - never use only one */
  --pad-tight: var(--space-xl);
  --pad-normal:var(--space-2xl);
  --pad-open:  var(--space-3xl);

  --gutter:clamp(20px,5vw,72px);
  --maxw:1560px;
  --col-gap:clamp(16px,1.95vw,28px);
  --rule:1px;

  /* ----------------------------------------------------------- motion --- */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-entry:cubic-bezier(0,0,0.2,1);
  --ease-inout:cubic-bezier(0.4,0,0.6,1);
  --t-fast:150ms;
  --t-base:300ms;
  --t-mid:400ms;
  --t-slow:500ms;
  --stagger:80ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,table{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  padding:14px 20px;
}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Type primitives
   ========================================================================== */

.mono{font-family:var(--mono)}

.kicker{
  display:inline-flex;align-items:center;gap:.9em;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;line-height:var(--lh-mono);
  color:var(--accent-text);
}
.kicker::before{content:"";width:1.7em;height:1px;background:currentColor;opacity:.5}

.display{
  font-size:var(--fs-display);font-weight:700;
  line-height:var(--lh-display);letter-spacing:var(--tr-display);
}
.display em{font-style:normal;color:var(--accent-text)}

h2,.h2{font-size:var(--fs-section);font-weight:700;line-height:var(--lh-section);
  letter-spacing:var(--tr-section);text-wrap:balance}
h3,.h3{font-size:var(--fs-sub);font-weight:600;line-height:var(--lh-sub);
  letter-spacing:var(--tr-sub)}
h4,.h4{font-size:var(--fs-body);font-weight:600;line-height:1.32;letter-spacing:-.01em}

.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);
  max-width:var(--measure-lead);text-wrap:pretty}
.body{max-width:var(--measure-body);text-wrap:pretty}
.body + .body{margin-top:1em}
.note{font-size:var(--fs-body);line-height:1.55;letter-spacing:var(--tr-body);
  color:var(--ink-55);max-width:var(--measure-body);text-wrap:pretty}
.on-dark .note,.sec--ink .note,.sec--deep .note,.rig .note{color:var(--cream-64)}

.label{
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;line-height:var(--lh-mono);
  color:var(--ink-55);
}
.on-dark .label,.sec--ink .label,.sec--deep .label,.rig .label{color:var(--cream-42)}

/* Any figure compared with another figure is tabular. */
[data-count],.ledger-table,.tl-val,.stat-v,.effect .v,.payoff .v,.figure-xl,
.hero-spec-cell .v,.pin-card .spec b,.dval,.height .v,.ratio i{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--bleed{max-width:none;padding-inline:clamp(16px,2.4vw,40px);--gutter:clamp(16px,2.4vw,40px)}

.sec{position:relative;padding-block:var(--pad-normal)}
.sec--tight{padding-block:var(--pad-tight)}
#proof{padding-bottom:var(--space-l)}
.sec--open{padding-block:var(--pad-open)}
.sec--flush-top{padding-top:0}
.sec--flush-bottom{padding-bottom:0}

.sec--cream{background:var(--cream);color:var(--ink);--accent-text:#B73800}
.sec--paper{background:var(--paper);color:var(--ink);--accent-text:#B73800;--ink-30:rgba(12,13,15,.62)}
.sec--ink{background:var(--ink);color:var(--cream)}
.sec--deep{background:var(--deep);color:var(--cream)}
.sec--ink,.sec--deep,.on-dark{color:var(--cream)}

/* Fixed 12-column grid. No auto-fit anywhere on these pages. */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);
  row-gap:var(--space-s)}
.c1-4{grid-column:1/span 4}
.c1-5{grid-column:1/span 5}
.c1-6{grid-column:1/span 6}
.c1-7{grid-column:1/span 7}
.c1-8{grid-column:1/span 8}
.c1-12{grid-column:1/span 12}
.c5-12{grid-column:5/span 8}
.c6-12{grid-column:6/span 7}
.c7-12{grid-column:7/span 6}
.c8-12{grid-column:8/span 5}
.c9-12{grid-column:9/span 4}

/* --- rule head: the section's title bar ------------------------------- */
.rule-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-top:16px;margin-bottom:var(--space-m);
  border-top:var(--rule) solid var(--ink-18);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55);line-height:var(--lh-mono);
}
.sec--ink .rule-head,.sec--deep .rule-head,.rig .rule-head,.on-dark .rule-head{
  border-top-color:var(--cream-16);color:var(--cream-42);
}
.rule-head .l{color:var(--accent-text)}

/* --- drafting chrome: crop marks + a vertical rail label -------------- */
.block{position:relative}
.block::before,.block::after{
  content:"+";position:absolute;
  font-family:var(--mono);font-size:var(--fs-small);font-weight:500;line-height:1;
  color:var(--ink-55);pointer-events:none;
}
.block::before{left:-17px;top:-11px}
.block::after{right:-17px;bottom:-11px}
.sec--ink .block::before,.sec--ink .block::after,
.sec--deep .block::before,.sec--deep .block::after,
.rig .block::before,.rig .block::after{color:var(--cream-30)}

.rail{
  position:absolute;left:calc(-1 * var(--gutter) + 6px);top:0;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-30);white-space:nowrap;pointer-events:none;
}
.sec--ink .rail,.sec--deep .rail,.rig .rail{color:var(--cream-30)}
/* A rail that sits inside a dark visual, rather than out in the page gutter. */
.rail--in{left:auto;right:14px;top:22px;z-index:5;color:var(--cream-82)}
@media (max-width:1079px){
  .rail:not(.rail--in){position:static;writing-mode:horizontal-tb;transform:none;display:block;
    margin-bottom:var(--space-2xs);white-space:normal}
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:70px;padding-inline:var(--gutter);
  color:var(--cream);
  background:rgba(6,19,26,.5);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:var(--rule) solid rgba(255,255,255,.09);
  transition:background var(--t-base) var(--ease-entry);
}
.nav.is-solid{background:rgba(6,19,26,.93)}

.nav-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav-mark{display:flex;align-items:flex-end;gap:2.5px;height:20px}
.nav-mark i{display:block;width:4px;background:var(--accent);
  transition:height var(--t-base) var(--ease-out)}
.nav-mark i:nth-child(1){height:8px}
.nav-mark i:nth-child(2){height:14px;background:var(--glacier)}
.nav-mark i:nth-child(3){height:20px;background:var(--hydro)}
.nav-brand:hover .nav-mark i:nth-child(1){height:20px}
.nav-brand:hover .nav-mark i:nth-child(3){height:8px}
.nav-name{display:flex;flex-direction:column;line-height:1}
.nav-name b{font-size:13px;font-weight:700;letter-spacing:.06em}
.nav-name small{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.24em;
  color:var(--glacier);margin-top:4px}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.16em}
.nav-links a{color:rgba(241,238,232,.78);padding-block:4px;
  border-bottom:var(--rule) solid transparent;
  transition:color var(--t-fast) var(--ease-entry),border-color var(--t-fast)}
.nav-links a:hover{color:var(--accent)}
.nav-links a.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-links .x{color:var(--glacier)}
.nav-links .x:hover{color:var(--glacier)}

.nav-right{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex:0 0 auto}
.nav-lang{display:flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:var(--fs-mono);letter-spacing:.16em}
.nav-lang a{color:rgba(241,238,232,.78);padding-bottom:3px;
  border-bottom:var(--rule) solid transparent}
.nav-lang a:hover{color:var(--accent)}
.nav-lang a.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-lang .sep{color:var(--cream-42)}
.nav-tel{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;
  color:rgba(241,238,232,.78);white-space:nowrap}
.nav-tel:hover{color:var(--accent)}
.nav-toggle{display:none}

/* ==========================================================================
   The scene rig - ONE sticky stage, ONE canvas, for the whole narrative.
   Sections 0-4 are siblings inside it and overlay the stage; the stage
   releases by itself when the rig ends. No JS involved in the release.
   ========================================================================== */

.rig{position:relative;background:var(--deep);color:var(--cream);isolation:isolate}
.rig-stage{
  position:sticky;top:0;height:100svh;
  margin-bottom:-100svh;      /* consumes no layout height */
  z-index:0;pointer-events:none;overflow:hidden;
}
.rig-stage canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.rig > section,.rig > header{position:relative;z-index:1}

/* Painted stage: the rig is a finished picture before - and without - WebGL. */
.rig-paint{
  position:absolute;inset:0;z-index:2;isolation:isolate;
  background:#06131A url("photos/hero-river.jpg") center 42%/cover no-repeat;
  transition:opacity 700ms var(--ease-out) 120ms;
}
/* Duotone the photograph into the water palette, then sit the scrim on top. */
.rig-paint::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,19,26,.86) 0%,rgba(6,19,26,.5) 11%,rgba(10,32,41,.3) 26%,rgba(7,24,31,.52) 60%,rgba(5,14,20,.93) 100%),
             linear-gradient(90deg,rgba(6,19,26,.62) 0%,rgba(6,19,26,.2) 46%,rgba(6,19,26,0) 74%),
             radial-gradient(112% 72% at 76% 24%,rgba(255,132,52,.18),transparent 58%);
}
.rig-paint::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:2;
  background:repeating-linear-gradient(180deg,rgba(159,211,216,.05) 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 58%);
  mask-image:linear-gradient(180deg,transparent,#000 58%);
}
.webgl-on .rig-paint{
  opacity:clamp(0,calc((0.17 - var(--p,0)) * 11),1);
  transition:none;
}

/* Per-section scrim, so copy always clears AA contrast over the scene. */
.scrim{position:absolute;inset:0;z-index:-1;pointer-events:none}
.scrim--left{background:linear-gradient(90deg,rgba(6,19,26,.93) 0%,rgba(6,19,26,.66) 34%,rgba(6,19,26,0) 68%)}
.scrim--bottom{background:linear-gradient(180deg,rgba(6,19,26,0) 0%,rgba(6,19,26,.6) 46%,rgba(6,19,26,.94) 100%)}
.scrim--full{background:rgba(6,19,26,.94)}
#flood .scrim--full{background:linear-gradient(180deg,
  rgba(6,19,26,.42) 0%,rgba(6,19,26,.62) 12%,rgba(6,19,26,.9) 26%,rgba(6,19,26,.95) 46%,rgba(6,19,26,.96) 100%)}
.scrim--vignette{background:radial-gradient(120% 90% at 50% 45%,rgba(6,19,26,.3) 0%,rgba(6,19,26,.88) 78%)}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,19,26,.88) 0%,rgba(6,19,26,.5) 12%,rgba(6,19,26,.2) 30%,
                    rgba(6,19,26,.42) 62%,rgba(6,19,26,.9) 88%,rgba(6,19,26,.97) 100%),
    linear-gradient(90deg,rgba(6,19,26,.7) 0%,rgba(6,19,26,.34) 44%,rgba(6,19,26,.04) 76%);
}
.hero > *{position:relative;z-index:1}
.hero-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(74px,8.4vh,100px) var(--gutter) 0;
}
.hero .display{margin-top:clamp(14px,1.6vw,22px)}
/* Grid break #1: the last display line is flush right. */
.hero .display .l3{display:block;text-align:right}
.hero-lead{margin-top:clamp(16px,1.7vw,24px);max-width:46ch;color:var(--cream-82)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.2vw,30px)}

/* Specification strip bound to the h1 - mono and small on purpose; the big
   numbers belong to the band below, so the two registers never compete. */
.hero-spec{
  position:relative;margin-top:clamp(20px,2.6vw,34px);
  border-top:var(--rule) solid var(--cream-16);
  background:linear-gradient(180deg,rgba(6,19,26,.26),rgba(6,19,26,.66));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.hero-spec-grid{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.hero-spec-cell{
  padding:clamp(13px,1.4vw,20px) clamp(14px,2vw,32px) clamp(13px,1.4vw,20px) 0;
  border-right:var(--rule) solid var(--cream-16);
  display:flex;flex-direction:column;gap:8px;
}
.hero-spec-cell:last-child{border-right:0}
.hero-spec-cell .k{font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--cream-42)}
.hero-spec-cell .v{font-family:var(--mono);font-size:var(--fs-body);
  font-weight:700;letter-spacing:.02em;color:var(--cream)}
.hero-spec-cell .v em{font-style:normal;color:var(--glacier)}

.hero-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:9px var(--gutter);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-42);
  border-top:var(--rule) solid var(--cream-10);
}
.hero-foot .cue{display:inline-flex;align-items:center;gap:9px}
.hero-foot .cue i{display:block;width:1px;height:24px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:cue 2.4s var(--ease-inout) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  30%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* Compact hero (technology page) - no rig, painted stage of its own. */
.hero--compact{
  --fs-display:clamp(3.75rem,1.1rem + 6.8vw,7.25rem);
  min-height:0;background:var(--deep);color:var(--cream);overflow:hidden;
}
.hero-paint{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(108% 68% at 80% 16%,rgba(27,110,126,.22),transparent 58%),
    radial-gradient(70% 58% at 10% 94%,rgba(255,79,0,.10),transparent 60%),
    linear-gradient(172deg,#0c2833 0%,#081b23 48%,#050e14 100%);
}
.hero-paint::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(159,211,216,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,211,216,.05) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(88% 88% at 74% 42%,#000,transparent 74%);
  mask-image:radial-gradient(88% 88% at 74% 42%,#000,transparent 74%);
}
.hero--compact .hero-inner,.hero--compact .hero-spec{position:relative;z-index:1}
.hero--compact .hero-inner{padding-top:clamp(116px,13.5vh,152px);
  padding-bottom:clamp(36px,4.6vw,64px)}
.hero-inner--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,80px);align-items:end}

/* Index of contents (technology hero) */
.index{border-top:var(--rule) solid var(--cream-16)}
.index-head{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--accent-text);padding:13px 0 9px}
.index-row{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px 16px;align-items:baseline;
  padding:15px 0;border-top:var(--rule) solid var(--cream-10);
  transition:padding-left var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out);
}
.index-row:hover{padding-left:12px;background:rgba(255,79,0,.07);color:var(--cream)}
.index-row .n{font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.14em;color:var(--accent-text)}
.index-row .t{font-size:var(--fs-body);font-weight:600;line-height:1.3;letter-spacing:-.012em}
.index-row .g{grid-column:2;font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--cream-42)}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 26px;min-height:52px;
  font-size:var(--fs-body);font-weight:600;letter-spacing:-.008em;
  transition:background var(--t-base) var(--ease-entry),color var(--t-base) var(--ease-entry),
             border-color var(--t-base),transform var(--t-base) var(--ease-out);
}
.btn .a{font-family:var(--mono);transition:transform var(--t-base) var(--ease-out)}
.btn:hover .a{transform:translateX(4px)}
.btn--primary{background:var(--accent);color:var(--ink)}
.btn--primary:hover{background:var(--cream);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{border:var(--rule) solid var(--cream-42);color:var(--cream)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn--ghost-ink{border:var(--rule) solid var(--ink-18);color:var(--ink)}
.btn--ghost-ink:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

.link-u{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;
  padding-bottom:7px;border-bottom:2px solid var(--accent);
  transition:gap var(--t-base) var(--ease-out),color var(--t-base);
}
.link-u:hover{gap:19px;color:var(--accent)}

/* ==========================================================================
   Pinned narrative panels (inside the rig)
   ========================================================================== */

.pin-panel{
  min-height:100svh;display:flex;align-items:center;
  max-width:var(--maxw);margin-inline:auto;width:100%;padding-inline:var(--gutter);
}
.pin-card{
  width:min(40ch,100%);
}
.js-on .pin-card{
  opacity:.16;transform:translateY(20px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
}
.pin-panel.is-active .pin-card{opacity:1;transform:none}
.pin-card .idx{font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--accent-text)}
.pin-card h3,.pin-card h2{margin-top:16px}
/* The narrative card is a 40ch column; 92px in it rags to six lines. */
.pin-card h2{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1.04;letter-spacing:-.03em}
.pin-card p{margin-top:16px;color:var(--cream-82);max-width:var(--measure-lead);
  text-wrap:pretty}
.pin-card .spec{
  margin-top:22px;padding-top:15px;border-top:var(--rule) solid var(--cream-16);
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--cream-42);
}
.pin-card .spec b{font-family:var(--sans);font-size:var(--fs-sub);font-weight:700;
  letter-spacing:var(--tr-sub);color:var(--glacier);line-height:1}

.pin-rail{position:absolute;z-index:4;right:var(--gutter);top:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.pin-rail i{display:block;width:2px;height:32px;background:var(--cream-16);
  transition:background var(--t-base) var(--ease-entry)}
.pin-rail i.on{background:var(--accent)}

/* ==========================================================================
   Statistic blocks
   ========================================================================== */

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:var(--rule) solid var(--ink-18)}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec--ink .stats,.sec--deep .stats,.rig .stats,.on-dark .stats{border-top-color:var(--cream-16)}
.stat{
  padding:var(--space-s) clamp(16px,2vw,32px) var(--space-s) 0;
  border-right:var(--rule) solid var(--ink-18);
}
.sec--ink .stat,.sec--deep .stat,.rig .stat,.on-dark .stat{border-right-color:var(--cream-16)}
.stat:last-child{border-right:0}
.stat-v{font-size:var(--fs-figure);font-weight:700;line-height:var(--lh-figure);
  letter-spacing:var(--tr-figure)}
.stat-v em{font-style:normal;color:var(--hydro)}
.stat-v .u{font-size:.28em;font-weight:500;letter-spacing:-.01em;margin-left:.1em}
.stat-v--word{font-size:var(--fs-sub);font-weight:700;letter-spacing:var(--tr-sub);
  line-height:var(--lh-sub)}
.stat-k{margin-top:var(--space-xs);font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--ink-55);line-height:1.65;
  max-width:30ch}
.sec--ink .stat-k,.sec--deep .stat-k,.rig .stat-k,.on-dark .stat-k{color:var(--cream-42)}
.stat-n{margin-top:12px;font-size:var(--fs-body);line-height:1.5;
  color:var(--ink-55);max-width:32ch}
.sec--ink .stat-n,.sec--deep .stat-n,.rig .stat-n,.on-dark .stat-n{color:var(--cream-64)}

/* Oversized 2x2 effect grid - the numbers are the drama */
.effects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:var(--rule) solid var(--ink-18);border-left:var(--rule) solid var(--ink-18)}
.sec--ink .effects,.sec--deep .effects,.rig .effects{
  border-top-color:var(--cream-16);border-left-color:var(--cream-16)}
.effect{
  padding:var(--space-m);
  border-right:var(--rule) solid var(--ink-18);border-bottom:var(--rule) solid var(--ink-18);
  display:flex;flex-direction:column;justify-content:flex-start;gap:var(--space-s);
  min-height:clamp(190px,17vw,250px);
  transition:background var(--t-base) var(--ease-entry);
}
.sec--ink .effect,.sec--deep .effect,.rig .effect{
  border-right-color:var(--cream-16);border-bottom-color:var(--cream-16)}
.effect:hover{background:rgba(255,79,0,.06)}
.effect .v{font-size:var(--fs-figure);font-weight:700;line-height:var(--lh-figure);
  letter-spacing:var(--tr-figure)}
.effect .v em{font-style:normal;color:var(--hydro)}
.effect .v .u{font-size:.26em;font-weight:500;letter-spacing:-.01em}
.effect .k{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55);max-width:26ch;line-height:1.7}
.sec--ink .effect .k,.sec--deep .effect .k,.rig .effect .k{color:var(--cream-42)}


/* A section may lead with its figure instead of its heading. Used once. */
.figure-xl{font-size:var(--fs-figure);font-weight:700;line-height:var(--lh-figure);
  letter-spacing:var(--tr-figure);color:var(--hydro)}
.figure-xl .u{font-size:.26em;font-weight:500;letter-spacing:-.01em}
.figure-xl-k{margin-top:var(--space-xs);font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--ink-55);line-height:1.7}
.sec--ink .figure-xl-k,.sec--deep .figure-xl-k{color:var(--cream-42)}

/* A colour change already marks a boundary; two full paddings meeting there
   just makes half a screen of nothing. Cap the pair at roughly Apple's 360px. */
.sec--open + .sec{padding-top:var(--pad-tight)}
.sec--open{padding-bottom:var(--pad-normal)}
.sec + .sec--open{padding-top:var(--pad-normal)}
.rig + .sec{padding-top:var(--pad-normal)}

/* The effect cells were 38% ink; pull the box in around the figure. */
/* Single payoff figure */
.payoff{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-s) var(--space-m);
  padding-top:var(--space-s);margin-top:var(--space-s);
  border-top:var(--rule) solid var(--ink-18)}
.sec--ink .payoff,.sec--deep .payoff,.rig .payoff{border-top-color:var(--cream-16)}
.payoff .v{font-size:var(--fs-figure);font-weight:700;line-height:var(--lh-figure);
  letter-spacing:var(--tr-figure);color:var(--accent-text)}
.payoff .v .u{font-size:.26em;font-weight:500}
.payoff .k{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55);max-width:44ch;line-height:1.7}
.sec--ink .payoff .k,.sec--deep .payoff .k,.rig .payoff .k{color:var(--cream-42)}

/* ==========================================================================
   Numbered rows
   ========================================================================== */

.steps{border-top:var(--rule) solid var(--ink-18)}
.sec--ink .steps,.sec--deep .steps,.rig .steps,.on-dark .steps{border-top-color:var(--cream-16)}
.step{
  display:grid;grid-template-columns:minmax(64px,6%) minmax(0,30%) minmax(0,1fr);
  gap:clamp(16px,2.6vw,44px);align-items:start;
  padding-block:var(--space-s);
  border-bottom:var(--rule) solid var(--ink-18);
  transition:background var(--t-base) var(--ease-entry),padding-left var(--t-base) var(--ease-out);
}
.sec--ink .step,.sec--deep .step,.rig .step,.on-dark .step{border-bottom-color:var(--cream-16)}
.step:hover{background:rgba(255,79,0,.05);padding-left:14px}
.step .n{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  color:var(--accent-text);padding-top:.45em}
.step .t{font-size:var(--fs-sub);font-weight:600;letter-spacing:var(--tr-sub);line-height:1.16}
.step .d{max-width:var(--measure-body);text-wrap:pretty;color:var(--ink-70)}
.sec--ink .step .d,.sec--deep .step .d,.rig .step .d,.on-dark .step .d{color:var(--cream-82)}
.step--2col{grid-template-columns:minmax(48px,5%) minmax(0,1fr)}
.step--2col .d{margin-top:8px}

/* ==========================================================================
   The channel cross-section - the argument, drawn.
   Two hairline sections share one scroll progress --q (0..1). Teal rises in
   both. On the left it stops at the 5 m tick and the banks stay dry; on the
   right it passes the bank line and floods the land either side.
   ========================================================================== */

.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,56px)}
.channel{position:relative}
.channel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:16px;border-bottom:var(--rule) solid var(--cream-16);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--cream-42)}
.channel--proposed .channel-head .t{color:var(--glacier)}
.channel--conventional .channel-head .t{color:var(--accent)}
.channel svg{width:100%;height:auto;display:block}
.ch-terrain{fill:none;stroke:var(--cream-42);stroke-width:1.5}
.ch-land{fill:rgba(241,238,232,.045)}
.ch-water{fill:var(--hydro)}
.channel svg{overflow:visible}
.ch-dim line{stroke:var(--glacier);stroke-width:1.2}
.ch-tick{stroke:var(--cream-30);stroke-width:1;stroke-dasharray:3 4}
.ch-tick--lim{stroke:var(--accent);stroke-dasharray:none}
.ch-tick--nat{stroke:var(--glacier);stroke-dasharray:5 4;opacity:.75}
.ch-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--cream-42);
  paint-order:stroke fill;stroke:#06131A;stroke-width:3.5px;stroke-linejoin:round}
.ch-lbl--lim{fill:var(--accent)}

.ch-lbl--gl{fill:var(--glacier)}
.channel-note{margin-top:18px;font-size:var(--fs-body);line-height:1.5;
  color:var(--cream-64);max-width:38ch;text-wrap:pretty}

/* ==========================================================================
   Ledger - the scope comparison (overview page)
   ========================================================================== */

.ledger{border-top:var(--rule) solid var(--ink-18)}
.sec--ink .ledger,.sec--deep .ledger,.rig .ledger{border-top-color:var(--cream-16)}
.ledger-head{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,44px);padding-block:13px;
  border-bottom:var(--rule) solid var(--ink-18);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55);
}
.sec--ink .ledger-head,.sec--deep .ledger-head,.rig .ledger-head{
  border-bottom-color:var(--cream-16);color:var(--cream-42)}
.ledger-head .b{color:var(--accent-text)}
.ledger-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,44px);padding-block:var(--space-xs);
  border-bottom:var(--rule) solid var(--ink-10);align-items:start;
  transition:background var(--t-fast);
}
.sec--ink .ledger-row,.sec--deep .ledger-row,.rig .ledger-row{border-bottom-color:var(--cream-10)}
.ledger-row:hover{background:rgba(255,79,0,.05)}
.ledger-row .n{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;
  color:var(--ink-55);padding-top:.3em}
.sec--ink .ledger-row .n,.sec--deep .ledger-row .n,.rig .ledger-row .n{color:var(--cream-42)}
.ledger-row .a{font-size:var(--fs-body);line-height:1.5;color:var(--ink-55)}
.sec--ink .ledger-row .a,.sec--deep .ledger-row .a,.rig .ledger-row .a{color:var(--cream-42)}
.ledger-row .b{font-size:var(--fs-body);line-height:1.5;font-weight:600;
  position:relative;padding-left:22px}
.ledger-row .b::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:1px;
  background:var(--accent)}
.ledger-row .b.same{font-weight:400;opacity:.7}
.ledger-row .b.same::before{background:currentColor;opacity:.45}
.ledger-lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.callout{
  border-left:2px solid var(--accent);padding:var(--space-xs) var(--space-s);
  background:rgba(255,79,0,.06);font-size:var(--fs-body);line-height:1.55;
  text-wrap:pretty;
}
.sec--ink .callout,.sec--deep .callout,.rig .callout{background:rgba(255,79,0,.1)}
.callout b{font-weight:700}

/* ==========================================================================
   Delta ledger table (technology page) - a real <table>, set as a data ledger.
   Cost direction is SPATIAL: savings run left of the baseline in teal,
   increases run right in orange.
   ========================================================================== */

.ledger-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-variant-numeric:tabular-nums;
}
.ledger-table caption{
  text-align:left;padding-bottom:var(--space-xs);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55);
}
.ledger-table th,.ledger-table td{
  text-align:left;vertical-align:top;padding:var(--space-xs) clamp(10px,1.1vw,20px);
  border-bottom:var(--rule) solid var(--ink-18);letter-spacing:var(--tr-small);
}
.ledger-table thead th{
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--ink-55);
  padding-bottom:10px;vertical-align:bottom;
}
.ledger-table thead th.prop{color:var(--accent-text)}
.ledger-table tbody th{
  font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;line-height:1.3;
  width:15%;padding-left:0;
}
.ledger-table td.conv,.ledger-table td.prop{
  font-size:var(--fs-body);line-height:1.5;text-wrap:pretty;width:29%;
}
.ledger-table td.conv{color:var(--ink-55)}
.ledger-table td.prop{color:var(--ink)}
.ledger-table tbody tr{transition:background var(--t-fast)}
.ledger-table tbody tr:hover{background:rgba(255,79,0,.045)}
.ledger-table tr.total th,.ledger-table tr.total td{
  border-bottom:0;border-top:2px solid var(--ink);
  font-size:var(--fs-sub);font-weight:700;letter-spacing:var(--tr-sub);
  color:var(--ink);padding-top:var(--space-s);
}
.ledger-table tr.total td.prop{color:var(--accent-text)}
.ledger-table tr.total td.prop,
.compare-rig .ledger-table tr.total td.prop,
.compare-rig .ledger-table tr.total td.conv{font-size:var(--fs-sub)}
.ledger-table tr.total .qual{display:block;margin-top:6px;font-family:var(--mono);
  font-size:var(--fs-mono);font-weight:500;letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55)}
.ledger-table tr.total td.conv{color:var(--ink);font-size:var(--fs-sub);font-weight:700}

/* The comparison is the page's one genuine differentiator, so it gets real
   scroll travel: the table pins and its rows light one at a time, ending on the
   total. Reading the shape (five bars left, one long bar right) is the point. */
.compare-rig{position:relative;height:210svh;margin-top:calc(-1 * var(--space-m))}
.compare-stage{position:sticky;top:70px;min-height:calc(100svh - 70px);
  display:flex;align-items:center}
/* .compare-rig already sits inside .wrap, so it must not pad again. */
.compare-inner{width:100%}
@media (min-width:961px){
  .js-on .compare-rig .ledger-table tbody tr{opacity:.42;
    transition:opacity var(--t-base) var(--ease-entry)}
}
.js-on .compare-rig .ledger-table tbody tr.is-lit{opacity:1}
.compare-rig .ledger-table th,.compare-rig .ledger-table td{padding-block:clamp(8px,0.85vw,14px)}
.compare-rig .ledger-table caption{padding-bottom:var(--space-2xs)}
.compare-rig .ledger-table td.conv,.compare-rig .ledger-table td.prop{line-height:1.42}
.compare-rig .ledger-table tr.total th,.compare-rig .ledger-table tr.total td{padding-top:var(--space-xs)}
.compare-rig .dbar{height:26px}
.compare-rig .dbar i{top:5px;height:16px}

/* Delta cell: a centre-baselined bar. Left = saving (teal). Right = increase. */
.dcell{width:18%;padding-right:0}
.dbar{position:relative;height:30px}
.dbar .axis{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ink-18)}
.sec--ink .dbar .axis,.sec--deep .dbar .axis{background:var(--cream-16)}
.dbar i{position:absolute;top:7px;height:15px;display:block;
  transform:scaleX(0);transition:transform 700ms var(--ease-out)}
.is-lit .dbar i,.no-js .dbar i{transform:scaleX(1)}
.dbar i.dn{right:50%;transform-origin:right;background:var(--hydro)}
.dbar i.up{left:50%;transform-origin:left;background:var(--accent)}
.dval{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;margin-top:9px;
  font-family:var(--mono);font-size:var(--fs-small);font-weight:700;line-height:1}
.dval .dn{grid-column:1;grid-row:1;text-align:right;padding-right:7px}
.dval .up{grid-column:2;grid-row:1;text-align:left;padding-left:7px}
.dval .sep{display:none}
/* The fish-passage row is a share of the project total, identical either way —
   not a +50% penalty against the conventional scheme. Mark it as a share so the
   reading key cannot be applied to it. */
.dbar--share i.up{background:repeating-linear-gradient(45deg,var(--accent) 0 5px,rgba(255,79,0,.45) 5px 10px)}
.dnote{margin-top:7px;font-size:var(--fs-small);line-height:1.35;color:var(--ink-55);
  text-align:center;text-wrap:pretty}
.dval .none{grid-column:1/-1;grid-row:1;text-align:center}
.dval .up{color:var(--accent-text)}
.dval .dn{color:var(--hydro)}
.dval .sep,.dval .none{color:var(--ink-30)}

.tbl-key{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:var(--space-xs);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55)}
.tbl-key b{font-weight:700}
.tbl-key .up b{color:var(--accent-text)}
.tbl-key .dn b{color:var(--hydro)}

/* ==========================================================================
   Timeline bars (economics) - "lower is better"
   ========================================================================== */

.tl{display:flex;flex-direction:column;gap:var(--space-m)}
.tl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:14px}
.tl-name{font-size:var(--fs-sub);font-weight:600;letter-spacing:var(--tr-sub)}
.tl-scale{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55)}
.sec--ink .tl-scale,.sec--deep .tl-scale{color:var(--cream-42)}
.tl-bars{display:flex;flex-direction:column;gap:9px}

/* Three columns: who | one shared 0-15 year axis | the value.
   Normalising each row to its own maximum would flatter the proposal; a single
   axis is the honest reading and it makes the argument stronger anyway. */
.tl-bar,.tl-axis{display:grid;
  grid-template-columns:minmax(96px,9%) minmax(0,1fr) minmax(124px,11%);
  gap:16px;align-items:center}
.tl-bar .who{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--ink-55)}
.sec--ink .tl-bar .who,.sec--deep .tl-bar .who{color:var(--cream-42)}
.tl-track{position:relative;height:36px;background:var(--ink-10)}
.sec--ink .tl-track,.sec--deep .tl-track{background:var(--cream-10)}
.tl-fill{position:absolute;inset:0 auto 0 0;transform:scaleX(0);transform-origin:left;
  transition:transform 700ms var(--ease-out)}
.is-visible .tl-fill{transform:scaleX(1)}
.tl-fill.prop{background:var(--hydro)}
.tl-fill.conv{background:rgba(12,13,15,.28)}
/* "5 years or more" is open-ended; a closed bar would read as exactly five. */
.tl-fill.is-open{-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);
  mask-image:linear-gradient(90deg,#000 72%,transparent)}
.sec--ink .tl-fill.conv,.sec--deep .tl-fill.conv{background:rgba(241,238,232,.22)}
.tl-val{font-family:var(--mono);font-size:var(--fs-small);font-weight:700;
  white-space:nowrap;color:var(--ink-55)}
.sec--ink .tl-val,.sec--deep .tl-val{color:var(--cream-42)}
.tl-val.prop{color:var(--hydro)}
.sec--ink .tl-val.prop,.sec--deep .tl-val.prop{color:var(--glacier)}

.tl-axis{margin-top:6px}
.tl-ruler{position:relative;height:22px;border-top:var(--rule) solid var(--ink-18)}
.sec--ink .tl-ruler,.sec--deep .tl-ruler{border-top-color:var(--cream-16)}
.tl-ruler i{position:absolute;top:0;width:1px;height:6px;background:var(--ink-18)}
.sec--ink .tl-ruler i,.sec--deep .tl-ruler i{background:var(--cream-16)}
.tl-ruler i b{position:absolute;top:9px;left:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.12em;
  color:var(--ink-55)}
.sec--ink .tl-ruler i b,.sec--deep .tl-ruler i b{color:var(--cream-42)}
.tl-ruler i:last-child b{transform:translateX(-100%)}
.tl-ruler i:first-child b{transform:none}
.tl-note{margin-top:12px;font-size:var(--fs-body);line-height:1.5;
  color:var(--ink-55);max-width:var(--measure-body)}
.sec--ink .tl-note,.sec--deep .tl-note{color:var(--cream-64)}
.tl-note b{font-family:var(--mono);color:var(--accent-text);font-weight:700}

/* ==========================================================================
   Strengths / limitations
   ========================================================================== */

.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-m)}
.col-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;margin-bottom:6px;border-bottom:var(--rule) solid var(--ink-18);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;font-weight:500;
}
.sec--ink .col-head,.sec--deep .col-head,.rig .col-head{border-bottom-color:var(--cream-16)}
.col-head .sig{width:9px;height:9px;flex:0 0 auto}
.col-head.pos{color:var(--accent-text)}
.col-head.pos .sig{background:var(--accent)}
.col-head.neg .sig{background:currentColor;opacity:.4}
.pt{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding-block:var(--space-xs);
  border-bottom:var(--rule) solid var(--ink-10)}
.sec--ink .pt,.sec--deep .pt,.rig .pt{border-bottom-color:var(--cream-10)}
.pt:last-child{border-bottom:0}
.pt .m{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.1em;
  padding-top:.35em;color:var(--ink-30)}
.pt.pos .m{color:var(--accent-text)}
.sec--ink .pt .m,.sec--deep .pt .m,.rig .pt .m{color:var(--cream-30)}
.sec--ink .pt.pos .m,.sec--deep .pt.pos .m,.rig .pt.pos .m{color:var(--accent-text)}
.pt p{line-height:1.55;text-wrap:pretty;max-width:var(--measure-body)}

/* ==========================================================================
   Technology modules
   ========================================================================== */

.tech{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;
  border-top:var(--rule) solid var(--ink-18)}
/* Each technology gets its own split and its own height. Four flips of one
   50/50 rule is the section-scale version of "three equal columns of icons". */
.tech--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tech--narrow{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.tech--tall{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
/* When the visual is flipped to column 2 the track sizes have to swap with it. */
.tech--flip.tech--wide{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tech--flip.tech--narrow{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.tech--wide .tech-visual{height:min(82svh,720px)}
.tech--narrow .tech-visual{height:min(58svh,480px)}
.tech--tall .tech-visual{height:min(86svh,760px)}
.sec--ink .tech,.sec--deep .tech{border-top-color:var(--cream-16)}
.tech--flip .tech-visual{order:2}
.tech-visual{
  position:sticky;top:70px;
  height:min(78svh,660px);min-height:clamp(340px,44vw,620px);overflow:hidden;
  background:
    radial-gradient(118% 88% at 30% 12%,rgba(27,110,126,.16),transparent 62%),
    linear-gradient(160deg,#101418 0%,#0a0e12 56%,#06090c 100%);
}
.tech-visual::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(159,211,216,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,211,216,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 50%,#000,transparent 76%);
  mask-image:radial-gradient(78% 78% at 50% 50%,#000,transparent 76%);
}
.tech-visual{isolation:isolate}
.tech-visual canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}
/* Without WebGL the canvas stages would be empty boxes; fall back to the
   corresponding technology reference photograph. */
.webgl-off .tech-visual:has([data-scene3d="weir3d"]),
.webgl-off .tech-visual:has([data-scene3d="turbines"]),
.webgl-off .tech-visual:has([data-scene3d="container"]){
  background-size:cover;background-position:center;
}
.webgl-off .tech-visual:has([data-scene3d="weir3d"]){background-image:url("photos/tech-weir-precast.jpg")}
.webgl-off .tech-visual:has([data-scene3d="turbines"]){background-image:url("photos/tech-vortex.jpg")}
.webgl-off .tech-visual:has([data-scene3d="container"]){background-image:url("photos/tech-turbine-container.jpg")}
.webgl-off .tech-visual:has(canvas)::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;background:var(--hydro);mix-blend-mode:multiply}
.webgl-off .tech-visual:has(canvas)::before{background-image:none;background:var(--deep);
  mix-blend-mode:lighten;z-index:2;-webkit-mask-image:none;mask-image:none}
.tech-visual img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.24) brightness(.95)}
.tech-visual:has(img)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--hydro);mix-blend-mode:multiply}
.tech-visual:has(img)::before{background-image:none;background:var(--deep);
  mix-blend-mode:lighten;z-index:2;-webkit-mask-image:none;mask-image:none}
.tech-visual .cap{
  position:absolute;left:0;bottom:0;z-index:5;
  background:var(--accent);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;padding:9px 15px;
}
.tech-body{padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-s);min-width:0}
/* Module headings sit between the section scale and the sub scale: they are the
   subject of their block but must not compete with the page h1. */
.tech-body h2{font-size:clamp(1.9rem,3.2vw,3.25rem);line-height:1.02;
  letter-spacing:-.03em;overflow-wrap:break-word}
.tech-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-s)}
.tech-lists ul{display:flex;flex-direction:column;gap:12px}
.tech-lists li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;min-width:0;
  font-size:var(--fs-body);line-height:1.5}
.tech-lists .s{font-family:var(--mono);font-weight:700;line-height:1.45}
.tech-lists .adv .s{color:var(--accent-text)}
.tech-lists .lim .s{color:var(--ink-30)}
.sec--ink .tech-lists .lim .s,.sec--deep .tech-lists .lim .s{color:var(--cream-30)}

/* split ratio bar */
.ratio{display:flex;height:52px;border:var(--rule) solid var(--ink-18)}
.sec--ink .ratio,.sec--deep .ratio{border-color:var(--cream-16)}
.ratio i{display:flex;align-items:center;padding-inline:14px;min-width:0;overflow:hidden;
  white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:700;letter-spacing:.1em;
  transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out)}
.is-visible .ratio i{transform:scaleX(1)}
.ratio i.a{background:var(--ink);color:var(--cream);flex:0 0 80%}
.ratio i.b{background:var(--ink-18);color:var(--ink);flex:0 0 20%;transition-delay:.12s}
.sec--ink .ratio i.a,.sec--deep .ratio i.a{background:var(--glacier);color:var(--ink)}
.sec--ink .ratio i.b,.sec--deep .ratio i.b{background:rgba(241,238,232,.14);color:var(--cream)}

/* efficiency band */
.gauge-wrap{padding-bottom:26px}
.gauge{position:relative;height:56px;border:var(--rule) solid var(--ink-18);
  background:var(--ink-10)}
.gauge .band{overflow:hidden}
.sec--ink .gauge,.sec--deep .gauge{border-color:var(--cream-16);background:var(--cream-10)}
.gauge .band{position:absolute;top:0;bottom:0;left:40%;right:5%;
  background:linear-gradient(90deg,rgba(27,110,126,.35),var(--glacier));
  transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out) .1s}
.is-visible .gauge .band{transform:scaleX(1)}
.gauge .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-18)}
.sec--ink .gauge .tick,.sec--deep .gauge .tick{background:var(--cream-16)}
.gauge .tick span{position:absolute;top:calc(100% + 8px);left:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;opacity:.62}

/* height-limit comparison */
.heights{display:flex;align-items:flex-end;gap:clamp(22px,3.2vw,60px)}
.height{display:flex;flex-direction:column;gap:12px;flex:0 0 auto;
  width:clamp(72px,9vw,124px)}
.height .track{height:clamp(150px,18vw,230px);display:flex;align-items:flex-end}
.height .bar{width:100%;background:var(--glacier);transform:scaleY(0);
  transform-origin:bottom;transition:transform 700ms var(--ease-out);min-height:3px}
.is-visible .height .bar{transform:scaleY(1)}
.height:nth-child(2) .bar{transition-delay:.12s}
.height .v{font-size:var(--fs-sub);font-weight:700;letter-spacing:var(--tr-sub);line-height:1}
.height .v .u{font-size:.5em;font-weight:500}
.height .k{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--cream-42);line-height:1.5;
  width:min(18ch,42vw);overflow-wrap:break-word}

/* ==========================================================================
   Media - duotone ink -> glacier
   ========================================================================== */

.figure{position:relative;overflow:hidden;isolation:isolate;background:var(--deep)}
.figure img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.24) brightness(.95);
  transition:filter var(--t-slow) var(--ease-out),transform 800ms var(--ease-out)}
.figure--duo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--deep);mix-blend-mode:lighten}
.figure--duo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--hydro);mix-blend-mode:multiply}
.figure:hover img{filter:grayscale(.2) contrast(1.05) brightness(1.05);transform:scale(1.03)}
.figure .badge{position:absolute;left:0;bottom:20px;z-index:3;
  background:var(--accent);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;padding:9px 15px}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:16/9}
.figure--square{aspect-ratio:1}

/* ==========================================================================
   Form
   ========================================================================== */

.form{border:var(--rule) solid var(--cream-16);padding:var(--space-m);
  background:rgba(241,238,232,.03)}
.form-title{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--space-s)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--cream-42)}
.field input,.field textarea{
  font-family:var(--sans);font-size:var(--fs-body);color:var(--cream);
  background:transparent;border:0;border-bottom:var(--rule) solid var(--cream-16);
  padding:12px 0;min-height:48px;transition:border-color var(--t-fast);
}
.field textarea{resize:vertical;min-height:112px}
.field input::placeholder,.field textarea::placeholder{color:var(--cream-30)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:var(--space-s)}
.form-msg{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--cream-42)}
.form-msg.err{color:var(--accent)}
.form-msg.ok{color:var(--glacier)}
.cf-turnstile{margin-top:18px}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{background:var(--ink);color:var(--cream);padding:var(--pad-tight) 0 24px}
.foot-mark{font-size:var(--fs-section);font-weight:700;line-height:.94;
  letter-spacing:var(--tr-section);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(241,238,232,.44)}
.foot-mark em{font-style:normal;-webkit-text-stroke:1px var(--accent)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-s);
  margin-top:var(--space-l);padding-top:var(--space-s);
  border-top:var(--rule) solid var(--cream-16)}
.foot-col{display:flex;flex-direction:column;gap:9px;font-size:var(--fs-small);
  line-height:var(--lh-small);letter-spacing:var(--tr-small);color:var(--cream-64)}
.foot-col .label{color:var(--accent-text)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:var(--space-m);padding-top:18px;border-top:var(--rule) solid var(--cream-16);
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-42)}

/* ==========================================================================
   Reveal - 400ms, not 800. Felt, not watched.
   ========================================================================== */

.js-on [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}

.wipe{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.js-on .wipe > span{display:block;transform:translateY(105%);
  transition:transform 720ms var(--ease-out)}
.wipe > span{display:block}
.is-lit .wipe > span{transform:none}
.wipe:nth-of-type(2) > span{transition-delay:80ms}
.wipe:nth-of-type(3) > span{transition-delay:160ms}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .nav-tel{display:none}
}

@media (min-width:761px) and (max-height:860px){
  :root{--fs-display:clamp(3.25rem,0.93rem + 8.1vw,8.2rem)}
  .hero-inner{padding-top:clamp(80px,9vh,100px)}
}

@media (max-width:960px){
  /* The per-technology splits are a desktop device only; below this they all
     stack. These need the same specificity as the modifiers themselves. */
  .tech,.tech--wide,.tech--narrow,.tech--tall,
  .tech--flip.tech--wide,.tech--flip.tech--narrow,.tech--flip.tech--tall{
    grid-template-columns:minmax(0,1fr);
  }
  .tech,.tech--wide,.tech--narrow,.tech--tall{align-items:stretch}
  .tech-visual,
  .tech--wide .tech-visual,.tech--narrow .tech-visual,.tech--tall .tech-visual{
    position:relative;top:auto;height:auto;
  }
  /* Keep the per-technology height difference on mobile too, or all four
     modules land within 2% of each other. */
  .tech--wide .tech-visual{min-height:clamp(300px,62vw,460px)}
  .tech--narrow .tech-visual{min-height:clamp(150px,30vw,210px)}
  .tech--tall .tech-visual{min-height:clamp(360px,80vw,560px)}
  .compare-rig{height:auto}
  .compare-stage{position:static;min-height:0;display:block}
  .compare-inner{padding-inline:0}
  .grid > *{grid-column:1/-1 !important}
  .hero-inner--split{grid-template-columns:minmax(0,1fr);gap:44px;align-items:start}
  .tech{grid-template-columns:minmax(0,1fr)}
  .tech--flip .tech-visual{order:0}
  .tech-visual{min-height:clamp(280px,58vw,420px)}
  .effects{grid-template-columns:minmax(0,1fr)}
  .split2{grid-template-columns:minmax(0,1fr);gap:var(--space-m)}
  .channels{grid-template-columns:minmax(0,1fr);gap:var(--space-m)}
  .pin-panel{align-items:flex-end;padding-bottom:clamp(56px,11vw,104px)}
  .pin-card{width:100%}
  .pin-rail{display:none}
  .scrim--left{background:linear-gradient(180deg,rgba(6,19,26,.3) 0%,rgba(6,19,26,.62) 46%,rgba(6,19,26,.94) 100%)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-bottom:var(--rule) solid var(--ink-18)}
  .sec--ink .stat,.sec--deep .stat,.rig .stat{border-bottom-color:var(--cream-16)}
  .stat:nth-child(2n){border-right:0}
  .stats--3 .stat:nth-child(2n){border-right:var(--rule) solid var(--cream-16)}
  .stats--3 .stat:last-child{border-right:0}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .nav{height:60px}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.18em;
    text-transform:uppercase;color:var(--cream);min-height:44px;
  }
  .nav-toggle i{display:block;width:18px;height:9px;position:relative}
  .nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;right:0;
    height:1.5px;background:var(--accent);transition:transform var(--t-base) var(--ease-out)}
  .nav-toggle i::before{top:0}
  .nav-toggle i::after{bottom:0}
  .nav.is-open .nav-toggle i::before{transform:translateY(3.75px) rotate(45deg)}
  .nav.is-open .nav-toggle i::after{transform:translateY(-3.75px) rotate(-45deg)}
  html:not(.js-on) .nav-toggle{display:none}
  html:not(.js-on) .nav-links{position:static;max-height:none;visibility:visible;
    flex-direction:row;flex-wrap:wrap;gap:0 18px;padding:0;background:none;border:0}
  .nav-links{
    position:fixed;inset:60px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,19,26,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:0 solid var(--cream-16);
    padding:0 var(--gutter);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height var(--t-base) var(--ease-out),visibility 0s linear var(--t-base);
  }
  .nav.is-open .nav-links{
    max-height:64svh;visibility:visible;
    border-bottom-width:var(--rule);padding:6px var(--gutter) 18px;
    transition:max-height var(--t-base) var(--ease-out),visibility 0s;
  }
  .nav-links a{padding-block:15px;border-bottom:var(--rule) solid var(--cream-10)}
  .nav-links a.is-active{border-bottom-color:var(--accent)}

  .hero-inner{padding-top:100px}
  /* French runs longer than English; give the hero enough slack at 390 that all
     three languages land inside one screen rather than only two of them. */
  .hero-ctas{gap:10px;margin-top:16px}
  .hero-ctas .btn{flex:1 1 100%;justify-content:space-between;min-height:48px;padding-block:13px}
  .hero-spec-cell{padding-block:9px}
  .hero .display .l3{text-align:right}
  .hero-spec-grid{grid-template-columns:minmax(0,1fr)}
  .hero-spec-cell{border-right:0;border-bottom:var(--rule) solid var(--cream-16);
    padding:12px 0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .hero-spec-cell:last-child{border-bottom:0}
  .hero-spec-cell .v{text-align:right}
  .hero-foot{font-size:var(--fs-micro);letter-spacing:.14em}
  .hero-foot .meta{display:none}

  .stats,.stats--3{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0 !important;padding-right:0}
  .stat:last-child{border-bottom:0}

  .step{grid-template-columns:minmax(0,1fr);gap:10px}
  .step .n{padding-top:0}
  .step:hover{padding-left:0}
  .effect{min-height:0;gap:var(--space-s);padding:var(--space-s) var(--space-xs)}

  /* Ledger -> stacked pairs */
  .ledger-head{display:none}
  .ledger-row{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:var(--space-s)}
  .ledger-row .n{padding-top:0}
  .ledger-lbl{position:static;width:auto;height:auto;margin:0 0 5px;clip:auto;
    display:block;font-family:var(--mono);font-size:var(--fs-micro);
    letter-spacing:.2em;text-transform:uppercase;opacity:.7}

  /* Delta table -> block cards, no horizontal scroll */
  .ledger-table,.ledger-table tbody,.ledger-table tr,.ledger-table th,.ledger-table td{
    display:block;width:auto}
  .ledger-table caption{display:block;width:auto;font-size:var(--fs-small)}
  .ledger-table thead{position:absolute;left:-9999px}
  .ledger-table tr{border:var(--rule) solid var(--ink-18);margin-bottom:12px;
    padding:var(--space-xs)}
  .ledger-table th,.ledger-table td{border-bottom:0;padding:6px 0}
  .ledger-table tbody th{width:auto;font-size:var(--fs-sub);letter-spacing:var(--tr-sub);
    padding-bottom:10px}
  .ledger-table td.conv::before,.ledger-table td.prop::before,.ledger-table td.dcell::before{
    content:attr(data-l);display:block;font-family:var(--mono);font-size:var(--fs-micro);
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink-30);margin-bottom:4px}
  .ledger-table td.conv,.ledger-table td.prop,.ledger-table td.dcell{width:auto;max-width:none}
  .ledger-table tr.total{border-color:var(--ink);border-width:2px}
  .ledger-table tr.total th,.ledger-table tr.total td{border-top:0;padding-top:6px}

  .tl-bar{grid-template-columns:minmax(0,1fr) minmax(96px,auto);gap:6px 12px;
    grid-template-areas:"who who" "track val"}
  .tl-bar .who{grid-area:who}
  .tl-bar .tl-track{grid-area:track}
  .tl-bar .tl-val{grid-area:val;text-align:right}
  .tl-track{height:30px}
  .tl-axis{display:none}

  .heights{gap:22px;height:auto}
  .height .track{height:clamp(120px,30vw,170px)}
  .height .k{width:100%}
  .ratio{height:auto;flex-direction:column;border:0}
  .ratio i{height:44px;flex:none;width:100%;padding-inline:12px;transform-origin:left}
  .ratio i.a{width:80%}
  .ratio i.b{width:20%;min-width:96px}
  .tech-lists{grid-template-columns:minmax(0,1fr);gap:var(--space-s)}
  .tech-body{padding:var(--space-s) var(--gutter) var(--space-m)}
  .form-row{grid-template-columns:minmax(0,1fr);gap:0}
  .foot-cols{grid-template-columns:minmax(0,1fr)}
  .js-on [data-reveal]{transform:translateY(16px)}
  :root{--lh-lead:1.45}
  .hero-lead{font-size:var(--fs-body);line-height:1.5}

  /* Tap targets: nothing interactive under 44x44. */
  /* Three languages plus the brand sub-line do not fit 390px at the old
     spacing; the 44px tap target is paid for in height, not width. */
  .nav{gap:12px}
  .nav-name small{letter-spacing:.12em;font-size:9px}
  .nav-name b{font-size:12px}
  .nav-lang{gap:1px}
  .nav-lang a{display:inline-flex;align-items:center;justify-content:center;
    min-width:24px;min-height:44px}
  .nav-lang .sep{display:inline-flex;align-items:center;min-height:44px}
  .nav-toggle{gap:7px}
  .link-u{min-height:44px;align-items:center}
  .foot-col a{display:inline-flex;align-items:center;min-height:44px}
  .nav-brand{min-height:44px}
  .index-row{min-height:44px}

  /* Mono labels that carry sentences stop being 10-11px labels. */
  .stat-k,.effect .k,.payoff .k{font-size:var(--fs-small);letter-spacing:.08em;
    text-transform:none;line-height:1.5}
  .form-title,.link-u{font-size:var(--fs-small)}

  /* The channel drawings shrink to 350 CSS px against a 480-unit viewBox, so
     9 user units renders at 6.6px. Compensate. */
  .ch-lbl{font-size:15px;letter-spacing:.05em}
}

@media (max-width:420px){
  :root{--gutter:20px}
}

/* ==========================================================================
   Reduced motion - everything settles instantly, nothing stays hidden
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .pin-card{opacity:1 !important;transform:none !important}
  .wipe > span{transform:none !important}
  .tl-fill,.ratio i,.dbar i{transform:scaleX(1) !important}
  .height .bar{transform:scaleY(1) !important}
  .gauge .band{transform:scaleX(1) !important}
  .hero-foot .cue i{animation:none;opacity:.6}
}

/* ==========================================================================
   Print - a procurement engineer can put this in a folder
   ========================================================================== */

@media print{
  .nav,.rig-stage,.rig-paint,.hero-paint,.tech-visual canvas,.hero-foot .cue,
  .form,.pin-rail{display:none}
  body{background:#fff;color:#000}
  .rig,.sec--ink,.sec--deep,.hero{background:#fff !important;color:#000 !important}
  .pin-panel{min-height:0;display:block;page-break-inside:avoid;padding-block:24px}
  .pin-card{opacity:1;color:#000}
  [data-reveal]{opacity:1;transform:none}
  .ledger-table tr{page-break-inside:avoid}
}