/* ══════════════════════════════════════════════════════════════════════════
   GREENCORE AI — assets/css/main.css
   Aesthetic: industrial engineering datasheet. Orthographic drawings,
   dimension lines, instrument typography. Alternating FIELD (dark) and
   SPEC SHEET (paper) surfaces. No glassmorphism, no purple gradients.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* field surfaces */
  --void:      #080B09;
  --steel:     #0D1211;
  --concrete:  #131A18;
  --slate:     #1A2321;

  /* paper surfaces */
  --paper:     #EDEEE8;
  --paper-2:   #E2E4DC;
  --p-ink:     #141A17;
  --p-line-2:  #A9AEA3;

  /* ink */
  --ink:       #E8EDE9;
  --ink-2:     #9FAFA6;
  --ink-3:     #64766C;

  /* signal */
  --signal:    #2FD46B;   /* operational green   */
  --signal-2:  #7CFFA8;   /* flow / highlight    */
  --brand:     #1B7A3E;   /* deep logo green     */
  --amber:     #FFB627;   /* power / thermal     */
  --alert:     #FF5C3D;

  /* drawing lines */
  --line-1:    #1E2B26;
  --line-2:    #2C3D36;
  --line-3:    #4E6B5E;

  /* type */
  --display: "Archivo", "Archivo Expanded", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* surfaces that used to be hardcoded, tokenised for the light theme */
  --bar:       #050706;   /* instrument bar + footer ground */
  --inset:     #060907;   /* ticker, scope, SOC log wells   */
  --nav-bg:    rgba(8,11,9,.86);
  --nav-bg-s:  rgba(5,7,6,.96);
  --hero-mid:  #090D0B;
  --scrim:     rgba(3,5,4,.82);
  --shadow:    rgba(0,0,0,.8);

  /* paper-sheet internals (Sheet 02) */
  --p-grid:    rgba(20,26,23,.055);
  --p-hover:   rgba(20,26,23,.06);
  --p-tag:     #5C645A;
  --p-lede:    #4A524A;
  --p-th:      #6C7369;
  --p-td:      #232B26;
  --p-rule:    #C4C9BE;
  --p-edge:    #C9CDC3;
  --p-dim:     #7C837A;
  --p-track:   #CBD0C6;
  --p-rack:    rgba(27,122,62,.14);
  --p-chip-tx: #EAFBEF;

  /* brand lockup, so it stays legible on either ground */
  --logo-top:  #19C95F;
  --logo-left: #0E9A47;
  --logo-right:#0A7434;
  --logo-word: #00E65C;
  --logo-ai:   #FFFFFF;
  --logo-core: #FFFFFF;

  /* hero drawing body fill */
  --draw-fill-1: #12181A;
  --draw-fill-2: #0B0F10;

  /* signal tints */
  --sig-05:    rgba(47,212,107,.05);
  --sig-12:    rgba(47,212,107,.12);
  --sig-16:    rgba(47,212,107,.16);
  --sig-22:    rgba(47,212,107,.22);
  --sig-28:    rgba(47,212,107,.28);
  --sig-40:    rgba(47,212,107,.4);
  --sig-60:    rgba(47,212,107,.6);
  --sig-00:    rgba(47,212,107,0);

  /* metrics */
  --gut: clamp(20px, 4vw, 64px);
  --maxw: 1440px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}


/* ── 1b. LIGHT THEME ──────────────────────────────────────────────────────
   Dark is the default (plain :root above). Light is opt-in via
   data-theme="light" on <html>, set by main.js.

   The site's signature is the alternation between "field" sheets and the
   Sheet 02 spec sheet. In light mode that alternation is preserved by
   INVERTING it: the page goes light and Sheet 02 goes dark. Every paper
   token below flips, so the .paper rules keep working untouched.
   ─────────────────────────────────────────────────────────────────────── */
:root{ color-scheme:dark; }

:root[data-theme="light"]{
  color-scheme:light;

  /* page surfaces */
  --void:      #F2F3EE;
  --steel:     #E9EAE4;
  --concrete:  #E2E4DC;
  --slate:     #D9DCD2;

  /* ink */
  --ink:       #101410;
  --ink-2:     #4B554F;
  --ink-3:     #78837B;

  /* signal, darkened so it holds contrast on a light ground */
  --signal:    #12873F;
  --signal-2:  #0F6E33;
  --brand:     #2FD46B;   /* used on the now-dark Sheet 02 */
  --amber:     #9A6B00;

  /* drawing lines */
  --line-1:    #DCDFD5;
  --line-2:    #C4C9BD;
  --line-3:    #98A296;

  /* tokenised surfaces */
  --bar:       #E7E9E1;
  --inset:     #E4E6DE;
  --nav-bg:    rgba(242,243,238,.86);
  --nav-bg-s:  rgba(236,238,231,.96);
  --hero-mid:  #EDEEE9;
  --scrim:     rgba(24,28,24,.55);
  --shadow:    rgba(30,40,32,.28);

  /* Sheet 02 inverts to dark */
  --paper:     #0D1211;
  --paper-2:   #131A18;
  --p-ink:     #E8EDE9;
  --p-line-2:  #4E6B5E;
  --p-grid:    rgba(232,237,233,.05);
  --p-hover:   rgba(232,237,233,.06);
  --p-tag:     #9FAFA6;
  --p-lede:    #9FAFA6;
  --p-th:      #7A8A80;
  --p-td:      #E8EDE9;
  --p-rule:    #2C3D36;
  --p-edge:    #2C3D36;
  --p-dim:     #6E7E75;
  --p-track:   #2C3D36;
  --p-rack:    rgba(47,212,107,.16);

  /* lockup reverts to the supplied master colours on a light ground */
  --logo-top:  #0A9B48;
  --logo-left: #007231;
  --logo-right:#005221;
  --logo-word: #007231;
  --logo-ai:   #000000;
  --logo-core: #FFFFFF;

  --draw-fill-1: #E8EAE3;
  --draw-fill-2: #DFE2DA;

  /* signal tints re-mixed for the darker green */
  --sig-05:    rgba(18,135,63,.06);
  --sig-12:    rgba(18,135,63,.12);
  --sig-16:    rgba(18,135,63,.16);
  --sig-22:    rgba(18,135,63,.20);
  --sig-28:    rgba(18,135,63,.26);
  --sig-40:    rgba(18,135,63,.34);
  --sig-60:    rgba(18,135,63,.45);
  --sig-00:    rgba(18,135,63,0);
}

/* The grain overlay is black noise; on a light ground it needs to be fainter
   or it reads as dirt rather than texture. */
:root[data-theme="light"] .grain{ opacity:.018; }

/* Buttons keep white text on the darker green rather than inheriting --void. */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .nav-cta,
:root[data-theme="light"] .lang-sw button[aria-pressed="true"],
:root[data-theme="light"] .theme-sw button[aria-pressed="true"]{ color:#FFFFFF; }
/* The datasheet button lives on the paper sheet, which inverts to dark in
   light mode, so its btn-primary needs the paper text colour rather than
   the white that other primary buttons take. Specificity ties, so this rule
   wins by order. */
:root[data-theme="light"] .paper .btn-primary{ color:var(--paper); }
:root[data-theme="light"] .paper .btn-primary:hover{ color:#FFFFFF; }
:root[data-theme="light"] ::selection{ background:var(--signal); color:#FFFFFF; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--display);
  font-variation-settings:"wdth" 100;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:.94; }
p{ margin:0; }
::selection{ background:var(--signal); color:var(--void); }

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

/* film grain — texture, applied once over everything */
.grain{
  position:fixed; inset:-50%; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* ── 2. SHARED PARTS ─────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.tick{ width:22px; height:1px; background:var(--signal); display:inline-block; flex:none; }

.led{
  width:6px; height:6px; border-radius:50%; background:var(--signal); display:inline-block;
  box-shadow:0 0 0 0 var(--sig-60); animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px var(--sig-00);} 100%{ box-shadow:0 0 0 0 var(--sig-00);} }

.btn{
  display:inline-flex; align-items:center; gap:12px; position:relative;
  padding:15px 26px; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; cursor:pointer;
  border:1px solid transparent; transition:.35s var(--ease); white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn-sm{ padding:12px 20px; font-size:11px; }

.btn-primary{ background:var(--signal); color:var(--void); font-weight:600; }
.btn-primary:hover{ background:var(--signal-2); box-shadow:0 0 0 1px var(--signal-2), 6px 6px 0 -1px var(--sig-22); }

.btn-ghost{ border-color:var(--line-3); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); background:var(--sig-05); }

.sheet{ position:relative; }
.sheet::before{
  content:"SHEET " attr(data-sheet);
  position:absolute; top:0; right:var(--gut); z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--ink-3);
  padding-top:22px; opacity:.7;
}
.paper::before{ color:var(--p-th); }

.sec-head{ max-width:820px; margin-bottom:clamp(48px,6vw,88px); }
.sec-title{
  font-size:clamp(34px,5.2vw,68px); font-variation-settings:"wdth" 92;
  text-transform:none; margin-bottom:26px;
}
.sec-title em{ font-style:normal; color:var(--signal); }
.paper .sec-title em{ color:var(--brand); }
.sec-lede{ font-size:clamp(15px,1.25vw,18.5px); color:var(--ink-2); max-width:66ch; line-height:1.65; }
.sec-lede strong{ color:var(--ink); font-weight:700; }

/* ── 3. INSTRUMENT BAR ───────────────────────────────────────────────────── */
.instrument-bar{
  position:relative; z-index:60; background:var(--bar); border-bottom:1px solid var(--line-1);
}
.ib-inner{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut); height:34px;
  display:flex; align-items:center; gap:26px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.ib-item{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.ib-item b{ color:var(--ink-2); font-weight:500; }
.ib-spacer{ flex:1; }
.ib-item a{ color:var(--signal); transition:.25s; }
.ib-item a:hover{ color:var(--signal-2); }

/* language switcher — sits in the instrument bar */
.lang-sw{ display:flex; align-items:center; gap:0; border:1px solid var(--line-2); }
.lang-sw button{
  background:none; border:0; cursor:pointer; padding:3px 8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); transition:.22s var(--ease);
}
.lang-sw button+button{ border-left:1px solid var(--line-2); }
.lang-sw button:hover{ color:var(--ink-2); }
.lang-sw button[aria-pressed="true"]{ background:var(--signal); color:var(--void); font-weight:600; }

/* theme switcher — mirrors .lang-sw */
.theme-sw{ display:flex; align-items:center; border:1px solid var(--line-2); }
.theme-sw button{
  background:none; border:0; cursor:pointer; padding:3px 7px; line-height:1;
  display:grid; place-items:center; color:var(--ink-3); transition:.22s var(--ease);
}
.theme-sw button+button{ border-left:1px solid var(--line-2); }
.theme-sw button svg{ width:12px; height:12px; display:block; }
.theme-sw button:hover{ color:var(--ink-2); }
.theme-sw button[aria-pressed="true"]{ background:var(--signal); color:var(--void); }



/* ── 4. NAV ──────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:32px;
  max-width:100%; padding:0 var(--gut); height:70px;
  background:var(--nav-bg); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-1);
}
.nav.scrolled{ background:var(--nav-bg-s); border-bottom-color:var(--line-2); }

.brand{
  --lockup-h:36px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:5px; flex:none;
}
/* Supplied lockup is 520x100. Height-locked so it scales as one unit and the
   cube never drifts out of proportion with the wordmark. */
.brand-lockup{ height:var(--lockup-h); width:auto; display:block; }
/* Descriptor line. Indented to sit under the wordmark rather than under the
   cube: the wordmark starts at x=105 in the 520x100 viewBox, which at the
   locked height is 1.05 x that height from the lockup's left edge. Tied to
   --lockup-h so it cannot drift if the logo is ever resized. */
.brand-tag{
  padding-left:calc(var(--lockup-h) * 1.05);
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); line-height:1; white-space:nowrap;
}
.lockup-text{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.foot-mark{ width:38px; height:38px; display:block; }

.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); padding:9px 14px; display:flex; gap:8px; align-items:baseline;
  border:1px solid transparent; transition:.28s var(--ease);
}
.nav-links a span{ color:var(--ink-3); font-size:9.5px; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); border-color:var(--line-2); background:var(--steel); }
.nav-links a:hover span,.nav-links a.active span{ color:var(--signal); }

.nav-cta{
  flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--signal); color:var(--void); font-weight:600; padding:12px 20px;
  transition:.3s var(--ease);
}
.nav-cta:hover{ background:var(--signal-2); box-shadow:4px 4px 0 -1px rgba(47,212,107,.25); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line-2); width:42px; height:38px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; flex:none;
}
.nav-toggle span{ width:16px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

/* ── 5. HERO ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,6vw,84px) 0 0;
  background:
    radial-gradient(1100px 620px at 78% 14%, rgba(47,212,107,.055), transparent 62%),
    linear-gradient(180deg,var(--void) 0%,var(--hero-mid) 60%,var(--steel) 100%);
}
/* engineering graph paper */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
  opacity:.75;
}

.reg{ position:absolute; width:16px; height:16px; z-index:3; opacity:.55; }
.reg::before,.reg::after{ content:""; position:absolute; background:var(--line-3); }
.reg::before{ width:16px; height:1px; top:7.5px; }
.reg::after{ height:16px; width:1px; left:7.5px; }
.reg-tl{ top:26px; left:26px; } .reg-tr{ top:26px; right:26px; }

.spine{
  position:absolute; left:14px; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; white-space:nowrap; z-index:3;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.36em; color:var(--ink-3); opacity:.5;
}
/* the spine is decoration — drop it rather than clip it on short viewports */
@media (max-height:760px){ .spine{ display:none; } }

.hero-inner{
  position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gut) clamp(40px,5vw,72px);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:clamp(28px,3.4vw,52px); align-items:center;
}

.hero-copy h1{
  font-size:clamp(38px,5.4vw,78px);
  font-variation-settings:"wdth" 86;
  letter-spacing:-.042em; line-height:.94; margin-bottom:28px;
}
.h-line{ display:block; }
.h-alt{ color:var(--ink-2); font-weight:700; }
.h-alt em{
  font-style:normal; color:var(--signal); font-weight:800;
  text-shadow:0 0 46px rgba(47,212,107,.35);
}
.br-m{ display:none; }

.lede{
  font-size:clamp(15px,1.3vw,19px); color:var(--ink-2); max-width:56ch;
  line-height:1.62; margin-bottom:36px;
}
.lede strong{ color:var(--ink); font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0;
  border-top:1px solid var(--line-2);
}
.hero-stats > div{
  padding:20px 18px 0 0; border-right:1px solid var(--line-1);
  display:flex; flex-direction:column;
}
.hero-stats > div:last-child{ border-right:0; }
/* Labels bottom-align in a fixed two-line box so the figures below them stay on
   one baseline whatever the language does to the label length. */
.hero-stats dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
  min-height:2.6em; display:flex; align-items:flex-end;
}
.hero-stats dd{
  margin:0; font-size:clamp(24px,2.6vw,38px); font-weight:800; letter-spacing:-.04em;
  font-variation-settings:"wdth" 84; line-height:1;
}
.hero-stats dd span{ font-size:.42em; color:var(--signal); margin-left:3px; letter-spacing:0; font-weight:600; }

/* ── business-value band (under the hero heading) ── */
.hero-value{
  position:relative; z-index:2;
  border-top:1px solid var(--line-2);
  margin-top:clamp(34px,4vw,58px);
  padding:clamp(28px,3vw,44px) 0 clamp(8px,1.4vw,18px);
}
.hv-lede{
  font-size:clamp(15px,1.25vw,18px); color:var(--ink-2); max-width:74ch;
  line-height:1.62; margin:0 0 clamp(22px,2.4vw,30px);
}
.hv-lede strong{ color:var(--ink); font-weight:700; }
.hv-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.hv-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-1); border:1px solid var(--line-1);
}
.hv-grid li{
  background:var(--bar); padding:15px 18px;
  display:flex; gap:12px; align-items:baseline;
  font-size:14.5px; color:var(--ink); line-height:1.42;
}
.hv-n{
  font-family:var(--mono); font-size:11px; color:var(--signal);
  letter-spacing:.06em; flex:none;
}
@media (max-width:860px){ .hv-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hv-grid{ grid-template-columns:1fr; } }

/* ── drawing ── */
.hero-draw{ margin:0; position:relative; }
.draw{ width:100%; height:auto; display:block; overflow:visible; }

/* The drawing renders at roughly half its user-unit scale, so line weights are
   pinned to real pixels and label sizes are set in user units to compensate. */
.draw *{ vector-effect:non-scaling-stroke; }
.draw .body{ filter:drop-shadow(0 0 26px var(--sig-12)); }
.draw .tag-s{
  font-family:var(--mono); font-size:15px; fill:var(--ink-3); letter-spacing:.12em; text-anchor:middle;
}
.draw .bay-led rect,.draw .bay-led > *{ fill:var(--signal); }
.draw .bay-led > *{ animation:bay 3.4s var(--ease) infinite; }
.draw .bay-led > *:nth-child(2){ animation-delay:.4s } .draw .bay-led > *:nth-child(3){ animation-delay:.8s }
.draw .bay-led > *:nth-child(4){ animation-delay:1.2s } .draw .bay-led > *:nth-child(5){ animation-delay:1.6s }
.draw .bay-led > *:nth-child(6){ animation-delay:2s }
@keyframes bay{ 0%,84%{opacity:.28} 88%,94%{opacity:1} 100%{opacity:.28} }

.draw .dim path{ stroke:var(--line-3); stroke-width:1; fill:none; }
.draw .dim-t{
  font-family:var(--mono); font-size:17px; fill:var(--ink-2); letter-spacing:.1em;
}
.draw .call path{ stroke:var(--line-3); stroke-width:1; fill:none; stroke-dasharray:3 4; }
.draw .call circle{ fill:var(--signal); }
.draw .call text{ font-family:var(--mono); font-size:17px; fill:var(--ink-2); letter-spacing:.09em; }
.draw .call-n{ fill:var(--signal); font-weight:600; }
.draw .fan circle{ transform-box:fill-box; transform-origin:center; animation:spin 9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* coolant flow animation along the loop */
.draw .flow path{
  stroke-dasharray:14 220; stroke-dashoffset:0;
  animation:flow 3.6s linear infinite; filter:drop-shadow(0 0 5px var(--signal-2));
}
@keyframes flow{ to{ stroke-dashoffset:-468; } }
.draw .bolt{ animation:bolt 4.5s var(--ease) infinite; }
@keyframes bolt{ 0%,72%{opacity:.35} 76%,82%{opacity:1} 100%{opacity:.35} }

/* self-drawing outline on load */
.draw .body,.draw .bays rect,.draw .coolers rect,.draw .pipe path{
  stroke-dasharray:var(--dash,2600); stroke-dashoffset:var(--dash,2600);
  animation:drawin 1.5s var(--ease-out) forwards;
}
.draw .bays rect{ animation-delay:.35s } .draw .coolers rect{ animation-delay:.55s }
.draw .pipe path{ animation-delay:.75s }
@keyframes drawin{ to{ stroke-dashoffset:0; } }

.draw-cap{
  display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line-1);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}

/* ── ticker ── */
.ticker{
  position:relative; z-index:2; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  background:var(--inset); overflow:hidden; padding:11px 0;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{ display:flex; align-items:center; gap:26px; width:max-content; animation:ticker 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-50%); } }
.tk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.tk b{ color:var(--signal); font-weight:500; }
.ticker .dot{ width:3px; height:3px; background:var(--line-3); flex:none; }

/* ── 6. THESIS ───────────────────────────────────────────────────────────── */
.thesis{ padding:clamp(72px,9vw,130px) 0; background:var(--steel); border-bottom:1px solid var(--line-1); }

.plates{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-1); border:1px solid var(--line-1); margin-bottom:clamp(56px,7vw,104px);
}
.plate{
  position:relative; background:var(--concrete); padding:38px 34px 34px;
  transition:background .4s var(--ease); outline:none;
}
.plate::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.plate:hover,.plate:focus-visible{ background:var(--slate); }
.plate:hover::after,.plate:focus-visible::after{ transform:scaleX(1); }

.plate-idx{
  position:absolute; top:20px; right:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3);
}
.plate-icon{ width:46px; height:46px; margin-bottom:26px; color:var(--signal); }
.plate-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:square; }
.plate h3{
  font-size:clamp(22px,2vw,29px); font-variation-settings:"wdth" 88; margin-bottom:6px; hyphens:manual;
}
.plate-sub{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--signal); margin-bottom:18px;
}
.plate > p:not(.plate-sub){ color:var(--ink-2); font-size:14.5px; line-height:1.66; margin-bottom:24px; }

.plate-specs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.plate-specs li{
  display:flex; justify-content:space-between; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--line-1);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
}
.plate-specs span{ color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em; font-size:9.5px; }
.plate-specs b{ color:var(--ink); font-weight:500; text-align:right; }

/* timeline */
.timeline{ border:1px solid var(--line-2); padding:clamp(28px,3.4vw,46px); background:var(--concrete); }
.tl-head{ margin-bottom:34px; }
.tl-head h3{ font-size:clamp(22px,2.4vw,34px); font-variation-settings:"wdth" 90; }
.tl-rows{ display:grid; gap:1px; background:var(--line-1); border-block:1px solid var(--line-1); }
.tl-row{ display:grid; grid-template-columns:220px 1fr; gap:26px; align-items:center; padding:20px 0; background:var(--concrete); }
.tl-label{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.tl-label span{
  display:block; font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:5px;
}
.tl-bar{ display:flex; align-items:center; gap:16px; }
/* Full width is the default state; the grow-in is layered on top only when
   main.js opts in (.js-anim). A bar can then never be stranded at zero. */
.tl-bar .fill{ height:12px; width:var(--w); display:block; transform-origin:left center; }
.js-anim .tl-bar .fill{ transform:scaleX(0); transition:transform 1.2s var(--ease-out); }
.js-anim .tl-bar.on .fill{ transform:scaleX(1); }
.fill-mute{ background:repeating-linear-gradient(90deg,var(--line-3) 0 6px,transparent 6px 11px); }
.fill-signal{ background:var(--signal); box-shadow:0 0 20px var(--sig-40); }
.tl-bar b{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink-2); white-space:nowrap; font-weight:500;
}
.tl-hero .tl-label{ color:var(--signal); }
.tl-hero .tl-bar b{ color:var(--signal); }
.tl-foot{
  margin-top:20px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--ink-3); line-height:1.7;
}

/* ── 7. NODES (PAPER) ────────────────────────────────────────────────────── */
.paper{
  background:var(--paper); color:var(--p-ink);
  background-image:
    linear-gradient(var(--p-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--p-grid) 1px,transparent 1px);
  background-size:26px 26px;
}
.paper .eyebrow{ color:var(--p-th); } .paper .tick{ background:var(--brand); }
.paper .sec-lede{ color:var(--p-lede); } .paper .sec-lede strong{ color:var(--p-ink); }

.nodes{ padding:clamp(72px,9vw,130px) 0; border-bottom:1px solid var(--p-edge); }
.sec-head-row{
  max-width:100%; display:flex; justify-content:space-between; align-items:flex-end;
  gap:36px; flex-wrap:wrap;
}
.sec-head-row .sec-title{ margin-bottom:0; }

.node-switch{ display:flex; border:1px solid var(--p-ink); flex:none; }
.node-switch button{
  background:none; border:0; border-right:1px solid var(--p-ink); cursor:pointer;
  padding:14px 24px; text-align:left; color:var(--p-ink); transition:.3s var(--ease); font-family:var(--display);
}
.node-switch button:last-child{ border-right:0; }
.node-switch button:hover{ background:var(--p-hover); }
.node-switch .is-on{ background:var(--p-ink); color:var(--paper); }
.ns-size{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  opacity:.62; margin-bottom:3px;
}
.ns-name{ display:block; font-size:15px; font-weight:700; letter-spacing:-.02em; }

.node{ display:grid; grid-template-columns:1.08fr 1fr; gap:clamp(32px,4vw,72px); align-items:start; }
.node[hidden]{ display:none; }

.node-draw{ border:1px solid var(--p-ink); background:var(--paper-2); padding:22px; }
.node-draw svg{ width:100%; height:auto; display:block; }
.node-draw .p-rack rect{ fill:var(--p-rack); stroke:var(--p-ink); stroke-width:1.2; }
.node-draw .p-thin *{ fill:none; stroke:var(--p-line-2); stroke-width:1.2; }
.node-draw .p-pipe path{ fill:none; stroke:var(--brand); stroke-width:2; }
.node-draw svg *{ vector-effect:non-scaling-stroke; }
.node-draw .p-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--p-tag); }
.node-draw .p-cap{ font-size:11.5px; fill:var(--p-ink); letter-spacing:.18em; }
.node-draw .p-dim path{ fill:none; stroke:var(--p-dim); stroke-width:1; }
.node-draw .p-dim text{ font-family:var(--mono); font-size:11px; fill:var(--p-tag); letter-spacing:.12em; }

.node-head{ margin-bottom:30px; }
.chip{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  padding:6px 12px; margin-bottom:16px; font-weight:600;
}
.chip-40{ background:var(--p-ink); color:var(--signal-2); }
.chip-20{ background:var(--brand); color:var(--p-chip-tx); }
.node-head h3{ font-size:clamp(26px,3vw,42px); font-variation-settings:"wdth" 90; margin-bottom:12px; }
.node-head p{ color:var(--p-lede); font-size:16px; }

.spec{ width:100%; border-collapse:collapse; margin-bottom:32px; }
.spec tr{ border-top:1px solid var(--p-rule); }
.spec tr:last-child{ border-bottom:1px solid var(--p-rule); }
.spec th{
  text-align:left; padding:13px 16px 13px 0; width:38%; vertical-align:top;
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.17em;
  text-transform:uppercase; color:var(--p-th);
}
.spec td{ padding:13px 0; font-size:14.5px; color:var(--p-td); }
.spec td b{ font-weight:800; color:var(--p-ink); }

.node-meters{ display:grid; gap:16px; margin-bottom:32px; }
.meter{ display:grid; grid-template-columns:148px minmax(0,1fr) 74px; gap:14px; align-items:center; }
.meter span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-th);
}
.meter i{ display:block; height:6px; background:var(--p-track); position:relative; }
.meter i::after{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--v); background:var(--brand);
  transform-origin:left center;
}
.js-anim .meter i::after{ transform:scaleX(0); transition:transform 1.1s var(--ease-out); }
.js-anim .meter.on i::after{ transform:scaleX(1); }
.meter b{
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--p-ink);
  text-align:right; white-space:nowrap;
}

.paper .btn-primary{ background:var(--p-ink); color:var(--paper); }
.paper .btn-primary:hover{ background:var(--brand); color:#fff; box-shadow:6px 6px 0 -1px rgba(27,122,62,.25); }


/* ── 7b. CUSTOM / BY DESIGN PANEL (Sheet 02) ─────────────────────────────── */
.chip-cx{ background:var(--brand); color:var(--p-chip-tx); }
.cx-draw svg .cx-ghost rect{ fill:none; stroke:var(--p-line-2); stroke-width:1.2; stroke-dasharray:5 4; }
.cx-draw svg .cx-q{
  font-family:var(--mono); font-size:22px; fill:var(--p-line-2); font-weight:600;
}

.cx-list{ list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--p-rule); }
.cx-list li{
  padding:13px 0 13px 20px; border-bottom:1px solid var(--p-rule); position:relative;
  font-size:14.5px; line-height:1.6; color:var(--p-lede);
}
.cx-list li::before{
  content:""; position:absolute; left:0; top:22px; width:9px; height:1px; background:var(--brand);
}
.cx-list b{ color:var(--p-td); font-weight:700; }

.cx-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--p-rule); border:1px solid var(--p-rule); margin-bottom:32px; }
.cx-steps > div{ background:var(--paper); padding:16px 16px 18px; }
.cx-steps span{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--brand); font-weight:600; margin-bottom:8px;
}
.cx-steps p{ font-size:13px; line-height:1.55; color:var(--p-lede); }

.cx-form{ border:1px solid var(--p-ink); background:var(--paper-2); }
.cx-form-title{
  padding:15px 20px; border-bottom:1px solid var(--p-rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--p-td);
}
.cx-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--p-rule); }
.cx-grid .field{ background:var(--paper); }
.cx-grid .field label{ color:var(--p-th); }
.cx-grid .field input,.cx-grid .field textarea{ color:var(--p-td); }
.cx-grid .field input::placeholder,.cx-grid .field textarea::placeholder{ color:var(--p-th); opacity:.7; }
.cx-grid .field:focus-within{ background:var(--paper-2); box-shadow:inset 2px 0 0 var(--brand); }
.cx-grid .field.invalid{ box-shadow:inset 2px 0 0 var(--alert); }
.cx-actions{
  grid-column:1 / -1; background:var(--paper); padding:20px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.cx-actions .modal-fine{ color:var(--p-th); }
.cx-grid .form-note{ grid-column:1 / -1; background:var(--paper); padding:0 20px 16px; color:var(--brand); }
.cx-grid .form-note:empty{ padding:0; }

@media (max-width:760px){
  .cx-steps{ grid-template-columns:1fr; }
  .cx-grid{ grid-template-columns:1fr; }
}

/* ── 8. OPERATIONS ───────────────────────────────────────────────────────── */
.ops{
  padding:clamp(72px,9vw,130px) 0; background:var(--void);
  background-image:radial-gradient(900px 500px at 15% 0%, var(--sig-05), transparent 60%);
  border-bottom:1px solid var(--line-1);
}
.ops-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-1); border:1px solid var(--line-1); }
.op{ background:var(--steel); padding:34px 30px; display:flex; flex-direction:column; transition:background .4s var(--ease); }
.op:hover{ background:var(--concrete); }
.op header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.op-n{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--signal); font-weight:600; }
.op-status{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--ink-3);
  border:1px solid var(--line-2); padding:4px 9px;
}
.op-status-alert{ color:var(--amber); border-color:rgba(255,182,39,.32); }
.op h3{ font-size:clamp(19px,1.7vw,24px); font-variation-settings:"wdth" 90; margin-bottom:14px; }
.op > p{ color:var(--ink-2); font-size:14.5px; line-height:1.66; margin-bottom:22px; }

.op-list{ list-style:none; margin:0 0 0; padding:0; margin-top:auto; }
.op-list li{
  position:relative; padding:9px 0 9px 20px; border-top:1px solid var(--line-1);
  font-size:13px; color:var(--ink-2);
}
.op-list li::before{
  content:""; position:absolute; left:0; top:16px; width:7px; height:1px; background:var(--signal);
}

.scope{ position:relative; border:1px solid var(--line-2); background:var(--inset); margin-bottom:22px; overflow:hidden; }
.scope svg{ display:block; width:100%; height:80px; }
.scope .trace{ fill:none; stroke:var(--signal); stroke-width:1.6; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(47,212,107,.5)); }
.scope::after{
  content:""; position:absolute; top:0; bottom:0; width:60px;
  background:linear-gradient(90deg,transparent,rgba(47,212,107,.14),transparent);
  animation:sweep 3.4s linear infinite;
}
@keyframes sweep{ from{ transform:translateX(-70px);} to{ transform:translateX(100%);} }
.scope-read{
  position:absolute; right:10px; top:9px; display:flex; align-items:baseline; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--ink-3);
}
.scope-read b{ font-size:15px; color:var(--signal); font-weight:600; letter-spacing:0; }

.soc-log{
  margin-top:20px; border:1px solid var(--line-2); background:var(--inset); padding:12px 14px;
  font-family:var(--mono); font-size:10px; line-height:2; color:var(--ink-3); letter-spacing:.06em;
}
.soc-log b{ color:var(--ink-2); font-weight:400; }
.soc-log em{ font-style:normal; color:var(--signal); }
.soc-log div:nth-child(3) em{ color:var(--alert); }

/* ── 8b. SIZING & IMPACT (calculator + reference design) ─────────────────── */
.sizing{
  padding:clamp(72px,9vw,130px) 0; background:var(--steel);
  border-bottom:1px solid var(--line-1);
}

/* controls + readout */
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:1px; background:var(--line-2); border:1px solid var(--line-2);
  margin-bottom:26px;
}
.calc-controls{ background:var(--concrete); padding:clamp(24px,2.6vw,36px); }
.calc-out{ background:var(--void); padding:clamp(24px,2.6vw,36px); }

.cc-row{ margin-bottom:34px; }
.cc-label{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:16px;
}
.cc-label output{
  font-size:26px; letter-spacing:-.02em; color:var(--signal); font-weight:600;
  text-transform:none;
}
.cc-row input[type=range]{
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:2px; background:var(--line-3); outline:none; margin:0; cursor:pointer;
}
.cc-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  background:var(--signal); border:0; cursor:pointer;
  box-shadow:0 0 0 4px var(--sig-16);
}
.cc-row input[type=range]::-moz-range-thumb{
  width:16px; height:16px; background:var(--signal); border:0; border-radius:0;
  cursor:pointer; box-shadow:0 0 0 4px var(--sig-16);
}
.cc-row input[type=range]:focus-visible{ outline:1px solid var(--signal); outline-offset:8px; }
.cc-scale{
  display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--ink-3);
}

.cc-grid{ display:grid; gap:14px; }
.cc-field{ display:flex; flex-direction:column; gap:8px; }
.cc-field label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.cc-field select{
  background:var(--steel); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--display); font-size:15px; padding:11px 13px; cursor:pointer;
  outline:none; transition:.25s var(--ease);
}
.cc-field select:hover{ border-color:var(--line-3); }
.cc-field select:focus-visible{ border-color:var(--signal); }
.cc-field select option{ background:var(--steel); color:var(--ink); }

.cc-config{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.cc-config b{ color:var(--signal); font-weight:500; }

/* readout */
.co-primary{ padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line-2); }
.co-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.co-value{ display:flex; align-items:baseline; gap:8px; line-height:1; }
.co-value b{
  font-size:clamp(46px,6.4vw,86px); font-weight:800; letter-spacing:-.045em;
  font-variation-settings:"wdth" 84; color:var(--signal);
  font-variant-numeric:tabular-nums;
}
.co-value span{
  font-family:var(--mono); font-size:16px; color:var(--signal); letter-spacing:.1em;
}
.co-note{
  margin-top:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--ink-3);
}
.co-note b{ color:var(--ink-2); font-weight:500; font-variant-numeric:tabular-nums; }

.co-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 26px; margin:0; }
.co-grid dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.co-grid dd{ margin:0; display:flex; align-items:baseline; gap:6px; }
.co-grid dd b{
  font-size:clamp(21px,2.1vw,29px); font-weight:800; letter-spacing:-.03em;
  font-variation-settings:"wdth" 86; font-variant-numeric:tabular-nums;
}
.co-grid dd span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.08em; }
.co-sub{
  margin-top:7px; font-family:var(--mono); font-size:10px;
  letter-spacing:.07em; color:var(--ink-3); line-height:1.5;
}
.co-sub b{ color:var(--ink-2); font-weight:500; font-variant-numeric:tabular-nums; }

/* assumptions */
.assump{ border:1px solid var(--line-2); background:var(--concrete); margin-bottom:clamp(48px,6vw,84px); }
.assump summary{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 24px; cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); transition:.25s var(--ease);
}
.assump summary::-webkit-details-marker{ display:none; }
.assump summary:hover{ color:var(--ink); background:var(--slate); }
.as-tick{
  width:9px; height:9px; flex:none; position:relative;
}
.as-tick::before,.as-tick::after{
  content:""; position:absolute; background:var(--signal); transition:.3s var(--ease);
}
.as-tick::before{ inset:4px 0 4px 0; height:1px; }
.as-tick::after{ inset:0 4px 0 4px; width:1px; }
.assump[open] .as-tick::after{ transform:scaleY(0); }
.as-hint{
  color:var(--ink-3); letter-spacing:.1em; text-transform:none; font-size:10px;
  margin-left:auto;
}
.assump-body{ padding:0 24px 24px; }
.assump-lead{
  font-size:13.5px; color:var(--ink-2); line-height:1.7; max-width:76ch;
  padding-bottom:20px; border-bottom:1px solid var(--line-2); margin-bottom:20px;
}
.assump-scroll{ overflow-x:auto; }
.assump-tbl{ width:100%; border-collapse:collapse; min-width:520px; }
.assump-tbl th{
  text-align:left; padding:9px 16px 9px 0;
  font-family:var(--mono); font-size:9px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line-2);
}
.assump-tbl td{
  padding:10px 16px 10px 0; border-bottom:1px solid var(--line-1);
  font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.03em;
}
.assump-tbl td:nth-child(2){ color:var(--signal); white-space:nowrap; }
.assump-tbl td:nth-child(3){ color:var(--ink-3); }

/* reference design */
.refdes{ border:1px solid var(--line-2); background:var(--concrete); padding:clamp(26px,3.2vw,44px); }
.rd-head{ margin-bottom:32px; }
.rd-head h3{
  font-size:clamp(23px,2.8vw,38px); font-variation-settings:"wdth" 90; margin-bottom:18px;
}
.rd-flag{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  font-size:14.5px; line-height:1.68; color:var(--ink-2); max-width:80ch;
  border-left:2px solid var(--signal); padding-left:16px;
}

.rd-figure{ margin:0 0 30px; }
.rd-scroll{ overflow-x:auto; }
.rd-figure svg{ width:100%; min-width:760px; height:auto; display:block; }
.rd-figure svg *{ vector-effect:non-scaling-stroke; }
.rd-box rect{ fill:var(--steel); stroke:var(--line-3); stroke-width:1.4; }
.rd-gridop rect{ fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:5 4; }
.rd-lb{ font-family:var(--mono); font-size:12px; fill:var(--ink-3); letter-spacing:.16em; }
.rd-off{ font-family:var(--mono); font-size:11px; fill:var(--amber); letter-spacing:.16em; }
.rd-dash{ fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:5 4; }
.rd-strike{ stroke:var(--alert); stroke-width:2; fill:none; }
.rd-n{ font-family:var(--mono); font-size:11px; fill:var(--signal); letter-spacing:.2em; font-weight:600; }
.rd-t1{ font-family:var(--mono); font-size:12.5px; fill:var(--ink); letter-spacing:.13em; }
.rd-t2{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); letter-spacing:.06em; }
.rd-flow path{ fill:none; stroke:var(--signal); stroke-width:2; }
.rd-fl text{ font-family:var(--mono); font-size:10.5px; fill:var(--signal); letter-spacing:.16em; }
.rd-heat path{ fill:none; stroke:var(--line-3); stroke-width:1.4; stroke-dasharray:6 4; }
.rd-heat text{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); letter-spacing:.14em; }

.rd-specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-1); border:1px solid var(--line-1); margin:0;
}
.rd-specs > div{ background:var(--steel); padding:18px 20px; }
.rd-specs dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.rd-specs dd{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; }

@media (max-width:1000px){
  .calc{ grid-template-columns:1fr; }
  .rd-specs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .co-grid{ grid-template-columns:1fr; gap:20px; }
  .rd-specs{ grid-template-columns:1fr; }
  .as-hint{ margin-left:0; flex-basis:100%; }
  .rd-flag{ font-size:12.5px; }
}


/* ── 8c. CALCULATOR: SEGMENTED SOURCE + RENEWABLE MIX ────────────────────── */
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.seg-btn{
  background:var(--steel); border:0; cursor:pointer; padding:14px 16px; text-align:left;
  display:flex; flex-direction:column; gap:5px; transition:.25s var(--ease);
  font-family:var(--display); color:var(--ink-2);
}
.seg-btn:hover{ background:var(--slate); color:var(--ink); }
.seg-btn .seg-t{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.seg-btn .seg-s{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.seg-btn.is-on{ background:var(--signal); color:var(--void); }
.seg-btn.is-on .seg-s{ color:rgba(8,11,9,.72); }
:root[data-theme="light"] .seg-btn.is-on{ color:#FFFFFF; }
:root[data-theme="light"] .seg-btn.is-on .seg-s{ color:rgba(255,255,255,.8); }
.seg-btn:focus-visible{ outline:1px solid var(--signal); outline-offset:-3px; }

.mix-panel[hidden]{ display:none; }
.mix-panel{
  border:1px solid var(--line-2); border-left:2px solid var(--signal);
  background:var(--concrete); padding:20px 22px; margin-bottom:34px;
  animation:mixin .3s var(--ease-out);
}
@keyframes mixin{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.mix-help{ margin-bottom:18px; }

.mix-list{ display:grid; gap:1px; background:var(--line-1); border-block:1px solid var(--line-1); margin-bottom:20px; }
.mix-row{
  display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:18px;
  align-items:center; background:var(--concrete); padding:12px 0; cursor:pointer;
}
.mix-check{ display:flex; align-items:center; gap:10px; min-width:0; }
.mix-check input{ position:absolute; opacity:0; width:0; height:0; }
.mix-box{
  width:15px; height:15px; flex:none; border:1px solid var(--line-3);
  display:grid; place-items:center; transition:.2s var(--ease);
}
.mix-box::after{
  content:""; width:7px; height:7px; background:var(--signal);
  transform:scale(0); transition:transform .2s var(--ease);
}
.mix-check input:checked + .mix-box{ border-color:var(--signal); }
.mix-check input:checked + .mix-box::after{ transform:scale(1); }
.mix-check input:focus-visible + .mix-box{ outline:1px solid var(--signal); outline-offset:2px; }
.mix-name{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); }
.mix-check input:checked ~ .mix-name{ color:var(--ink); }

.mix-slide{ display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:12px; align-items:center; min-width:0; }
.mix-slide input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--line-3); outline:none; margin:0; cursor:pointer;
}
.mix-slide input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px;
  background:var(--signal); border:0; cursor:pointer; box-shadow:0 0 0 3px var(--sig-16);
}
.mix-slide input[type=range]::-moz-range-thumb{
  width:14px; height:14px; background:var(--signal); border:0; border-radius:0;
  cursor:pointer; box-shadow:0 0 0 3px var(--sig-16);
}
.mix-slide output{
  font-family:var(--mono); font-size:11.5px; color:var(--signal);
  font-weight:600; text-align:right;
}
/* An unticked row keeps its slider in place but visibly out of play. */
.mix-row.off .mix-slide{ opacity:.3; pointer-events:none; }
.mix-row.off .mix-name{ color:var(--ink-3); }

.mixbar{ display:flex; height:10px; background:var(--line-1); border:1px solid var(--line-2); margin-bottom:10px; overflow:hidden; }
.mb{ width:var(--w); transition:width .3s var(--ease); display:block; }
.mb-solar{ background:var(--signal); }
.mb-wind{ background:var(--signal-2); }
.mb-hydro{ background:#3FA9F5; }
.mb-grid{ background:repeating-linear-gradient(90deg,var(--line-3) 0 5px,transparent 5px 9px); }
:root[data-theme="light"] .mb-hydro{ background:#0B6FB8; }

.mixkey{ display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.mk{ display:flex; align-items:center; gap:7px; }
.mk::before{ content:""; width:9px; height:9px; flex:none; }
.mk-solar::before{ background:var(--signal); }
.mk-wind::before{ background:var(--signal-2); }
.mk-hydro::before{ background:#3FA9F5; }
:root[data-theme="light"] .mk-hydro::before{ background:#0B6FB8; }
.mk-grid::before{ background:repeating-linear-gradient(90deg,var(--line-3) 0 4px,transparent 4px 7px); }
.mk b{ color:var(--ink-2); font-weight:500; }

@media (max-width:760px){
  .seg{ grid-template-columns:1fr; }
  .mix-row{ grid-template-columns:1fr; gap:10px; padding:14px 0; }
  .mix-panel{ padding:18px; }
  .mixkey{ gap:6px 14px; font-size:9px; }
}


/* ── 8d. CONNECTIVITY (Sheet 05) ─────────────────────────────────────────── */
.connect{
  padding:clamp(72px,9vw,130px) 0; background:var(--steel);
  border-bottom:1px solid var(--line-1);
  background-image:radial-gradient(900px 460px at 80% 0%, var(--sig-05), transparent 62%);
}

.cn-figure{ margin:0 0 clamp(40px,5vw,64px); }
.cn-scroll{ overflow-x:auto; }
.cn-figure svg{ width:100%; min-width:720px; height:auto; display:block; }
.cn-figure svg *{ vector-effect:non-scaling-stroke; }

.cn-orbit{ fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:5 5; }
.cn-sat *{ fill:none; stroke:var(--signal); stroke-width:1.6; }
.cn-sat rect{ fill:var(--steel); }
.cn-orb-lb{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); letter-spacing:.2em; }

.cn-beam path{ fill:none; stroke:var(--line-3); stroke-width:1.2; stroke-dasharray:4 5; }
.cn-pulse path{
  fill:none; stroke:var(--signal); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:12 190; filter:drop-shadow(0 0 5px var(--signal));
  animation:cnflow 3.2s linear infinite;
}
@keyframes cnflow{ to{ stroke-dashoffset:-404; } }

.cn-ground{ fill:none; stroke:var(--line-3); stroke-width:1.4; }
.cn-box rect{ fill:var(--concrete); stroke:var(--signal); stroke-width:1.6; }
.cn-n{ font-family:var(--mono); font-size:11px; fill:var(--signal); font-weight:600; letter-spacing:.2em; }
.cn-t1{ font-family:var(--mono); font-size:12.5px; fill:var(--ink); letter-spacing:.14em; }
.cn-t2{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); letter-spacing:.05em; }
.cn-dish path{ fill:var(--signal); stroke:var(--signal); stroke-width:1.4; }
.cn-fibre{ fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:6 5; }
.cn-fl{ font-family:var(--mono); font-size:10.5px; fill:var(--ink-3); letter-spacing:.16em; }

.cn-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-1); border:1px solid var(--line-1);
  margin-bottom:clamp(26px,3vw,38px);
}
.cn-case{ background:var(--concrete); padding:30px 28px 32px; transition:background .35s var(--ease); }
.cn-case:hover{ background:var(--slate); }
.cn-ic{ width:40px; height:40px; margin-bottom:20px; color:var(--signal); }
.cn-ic svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; stroke-linejoin:round; }
.cn-case h3{ font-size:clamp(19px,1.8vw,25px); font-variation-settings:"wdth" 90; margin-bottom:12px; }
.cn-case p{ font-size:14.5px; line-height:1.66; color:var(--ink-2); }

.cn-specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-1); border:1px solid var(--line-1); margin:0 0 22px;
}
.cn-specs > div{ background:var(--steel); padding:18px 20px; }
.cn-specs dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.cn-specs dd{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }

.cn-note{
  font-size:13.5px; line-height:1.7; color:var(--ink-3); max-width:78ch;
  border-left:2px solid var(--line-3); padding-left:16px;
}

@media (max-width:1000px){
  .cn-grid{ grid-template-columns:1fr; }
  .cn-specs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cn-specs{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .cn-pulse path{ animation:none !important; stroke-dasharray:none !important; }
}

/* ── 9. SECTORS ──────────────────────────────────────────────────────────── */
.sectors{ padding:clamp(72px,9vw,130px) 0; background:var(--steel); }
.ledger{ border-top:1px solid var(--line-2); }
.lg{
  position:relative; display:grid; grid-template-columns:70px 1fr auto;
  column-gap:26px; row-gap:0; align-items:center; padding:30px 0;
  border-bottom:1px solid var(--line-2); cursor:pointer; outline:none;
}
.lg::before{
  content:""; position:absolute; left:-24px; right:-24px; top:0; bottom:0; z-index:0;
  background:var(--concrete); opacity:0; transition:opacity .4s var(--ease);
}
.lg > *{ position:relative; z-index:1; }
.lg:hover::before,.lg.open::before,.lg:focus-visible::before{ opacity:1; }
.lg-n{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--ink-3); }
.lg:hover .lg-n,.lg.open .lg-n{ color:var(--signal); }
.lg-main{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.lg h3{
  font-size:clamp(21px,2.6vw,36px); font-variation-settings:"wdth" 88;
  transition:color .35s var(--ease);
}
.lg.open h3{ color:var(--signal); }
.lg-brief{ font-size:14.5px; color:var(--ink-3); }
.lg-meta{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--ink-3);
  border:1px solid var(--line-2); padding:6px 11px; white-space:nowrap;
}
.lg-drawer{
  grid-column:2 / -1; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease), opacity .4s var(--ease); opacity:0;
}
/* Exactly one child, so nothing lands in an auto-sized implicit row; and
   min-height:0 because grid items default to min-height:auto, which would
   otherwise hold the collapsed 0fr track open at its content height. */
.lg-drawer > .lg-inner{ overflow:hidden; min-height:0; }
.lg.open .lg-drawer{ grid-template-rows:1fr; opacity:1; }
.lg-drawer p{ color:var(--ink-2); font-size:15px; line-height:1.7; max-width:64ch; padding-top:20px; }
.lg-drawer ul{
  list-style:none; margin:18px 0 6px; padding:0; display:flex; gap:10px; flex-wrap:wrap;
}
.lg-drawer li{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal); border:1px solid var(--sig-28); padding:6px 11px;
}

/* ── 9b. DEPLOYMENT GALLERY (Sheet 07) ───────────────────────────────────── */
.gallery{ padding:clamp(72px,9vw,130px) 0; background:var(--concrete); }

/* Advisory, not decoration: these are visualisations, and the sheet says so
   before anyone reads a plate as a photograph of a built site. */
.gal-note{
  display:flex; align-items:flex-start; gap:10px; margin-top:24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.6;
}
.gal-dot{ width:5px; height:5px; background:var(--amber); display:inline-block; flex:none; margin-top:6px; }

/* Two plates a row, deliberately fixed rather than auto-fit: auto-fit packs a
   third track in at desktop width and the set stops reading as pairs. */
.gal-grid{ display:grid; gap:clamp(22px,2.6vw,36px); grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .gal-grid{ grid-template-columns:1fr; } }
.gp{ display:flex; flex-direction:column; min-width:0; margin:0; }
.gp-wide{ grid-column:1 / -1; }

.gp-rail{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:9px; border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.gp-n{ color:var(--signal); flex:none; }
.gp-meta{ color:var(--ink-3); text-align:right; min-width:0; }

.gp-shot{
  position:relative; display:block; width:100%; padding:0; margin:0; overflow:hidden;
  aspect-ratio:16 / 9; cursor:zoom-in; background:var(--void);
  border:1px solid var(--line-2); border-top:0;
}
.gp-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.gp-shot:hover img,.gp-shot:focus-visible img{ transform:scale(1.035); }

/* Registration crosshairs, drawn as eight hairlines in one layered background
   so all four corners come from a single pseudo-element. */
.gp-shot::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .4s var(--ease);
  background:
    linear-gradient(var(--signal),var(--signal)) 0    0    / 1px 15px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 0    0    / 15px 1px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 100% 0    / 1px 15px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 100% 0    / 15px 1px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 0    100% / 1px 15px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 0    100% / 15px 1px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 100% 100% / 1px 15px no-repeat,
    linear-gradient(var(--signal),var(--signal)) 100% 100% / 15px 1px no-repeat;
}
.gp-shot:hover::after,.gp-shot:focus-visible::after{ opacity:.95; }

.gp-zoom{
  position:absolute; right:12px; bottom:12px; z-index:3;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--scrim); border:1px solid var(--line-3); color:var(--ink);
  opacity:0; transform:translateY(6px); transition:.35s var(--ease);
}
.gp-shot:hover .gp-zoom,.gp-shot:focus-visible .gp-zoom{ opacity:1; transform:none; }
.gp-zoom svg{ width:15px; height:15px; }

.gp-cap{ padding-top:18px; }
.gp-cap h3{
  font-size:clamp(18px,1.9vw,24px); font-variation-settings:"wdth" 88; margin-bottom:10px;
}
.gp-wide .gp-cap h3{ font-size:clamp(21px,2.4vw,31px); }
.gp-cap p{ color:var(--ink-2); font-size:14.5px; line-height:1.72; max-width:64ch; }

.gal-foot{
  margin-top:clamp(36px,4.4vw,60px); padding-top:26px; border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.gal-foot-txt{ color:var(--ink-2); font-size:14.5px; line-height:1.7; max-width:56ch; }

/* ── 9c. PLATE LIGHTBOX ──────────────────────────────────────────────────────
   Reuses .modal for the fixed overlay, the scrim and the close button; only
   the panel is its own, because a plate wants a wide frame, not a form column.
   ─────────────────────────────────────────────────────────────────────────── */
.lb-panel{
  position:relative; width:min(1180px,100%); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--steel); border:1px solid var(--line-3);
  box-shadow:0 40px 90px -20px var(--shadow);
  animation:modalin .35s var(--ease-out);
}
/* The close button sits over the plate itself, so it needs a ground of its
   own rather than the transparent one it has on the datasheet panel. */
.lb-panel .modal-x{ z-index:5; background:var(--scrim); }
.lb-fig{ margin:0; display:flex; flex-direction:column; min-height:0; }
.lb-fig img{
  width:100%; height:auto; max-height:64vh; object-fit:contain;
  background:var(--void); display:block;
}
.lb-cap{ padding:20px clamp(18px,2.4vw,30px) 26px; border-top:1px solid var(--line-2); overflow-y:auto; }
.lb-rail{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.lb-rail .lb-n{ color:var(--signal); }
.lb-rail .lb-meta{ color:var(--ink-3); }
.lb-cap h3{
  font-size:clamp(19px,2.2vw,26px); font-variation-settings:"wdth" 88; margin:10px 0 10px;
}
.lb-cap p{ color:var(--ink-2); font-size:14.5px; line-height:1.72; max-width:72ch; }

.lb-nav{
  position:absolute; top:calc(32vh - 21px); z-index:4;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:var(--scrim); border:1px solid var(--line-3); color:var(--ink);
  transition:.25s var(--ease);
}
.lb-nav svg{ width:16px; height:16px; }
.lb-nav:hover{ color:var(--signal); border-color:var(--signal); }
.lb-prev{ left:12px; }
.lb-next{ right:12px; }

@media (max-width:560px){
  .lb-panel{ max-height:100vh; border:0; }
  .lb-fig img{ max-height:46vh; }
  .lb-nav{ top:auto; bottom:12px; }
}

/* ── 10. CTA ─────────────────────────────────────────────────────────────── */
.cta{ position:relative; padding:clamp(76px,10vw,140px) 0; background:var(--void); overflow:hidden; }
.cta-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(760px 460px at 82% 74%, rgba(47,212,107,.10), transparent 62%),
    radial-gradient(560px 380px at 8% 12%, rgba(255,182,39,.05), transparent 60%);
}
.cta-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-1) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 50% 60%, #000, transparent 75%);
  opacity:.6;
}
.cta .wrap{ position:relative; z-index:1; }
.cta-inner{ max-width:940px; }
.cta-title{
  font-size:clamp(36px,5.6vw,76px); font-variation-settings:"wdth" 88;
  letter-spacing:-.04em; margin-bottom:22px;
}
.cta-title em{ font-style:normal; color:var(--signal); }
.cta-lede{ font-size:clamp(15px,1.3vw,19px); color:var(--ink-2); max-width:56ch; margin-bottom:46px; }

.cta-form{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.field{ background:var(--steel); padding:16px 20px; display:flex; flex-direction:column; gap:8px; }
.field-wide{ grid-column:1 / -1; }
.field label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.field input,.field select,.field textarea{
  background:none; border:0; outline:none; color:var(--ink);
  font-family:var(--display); font-size:15.5px; padding:2px 0; width:100%; resize:vertical;
}
.field textarea{ font-size:15px; line-height:1.6; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); opacity:.65; }
.field select{ cursor:pointer; }
.field select option{ background:var(--steel); color:var(--ink); }
.field:focus-within{ background:var(--concrete); box-shadow:inset 2px 0 0 var(--signal); }
.field.invalid{ box-shadow:inset 2px 0 0 var(--alert); }

.cta-actions{
  grid-column:1 / -1; background:var(--steel); padding:20px; display:flex; gap:14px; flex-wrap:wrap;
}
.form-note{
  grid-column:1 / -1; background:var(--steel); padding:0 20px 18px; margin:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--signal); min-height:0;
}
.form-note:empty{ padding:0; }
.form-note.err{ color:var(--alert); }

/* ── 10b. DATASHEET MODAL ────────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:var(--scrim); backdrop-filter:blur(3px); }
.modal-panel{
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:var(--steel); border:1px solid var(--line-3);
  padding:clamp(26px,4vw,40px);
  box-shadow:0 40px 90px -20px var(--shadow);
  animation:modalin .35s var(--ease-out);
}
@keyframes modalin{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.modal-x{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:grid; place-items:center; background:none; cursor:pointer;
  border:1px solid var(--line-2); color:var(--ink-3); transition:.25s var(--ease);
}
.modal-x svg{ width:13px; height:13px; }
.modal-x:hover{ color:var(--signal); border-color:var(--signal); }

.modal-panel h3{
  font-size:clamp(23px,3vw,31px); font-variation-settings:"wdth" 90; margin-bottom:14px;
}
.modal-lede{ font-size:14.5px; color:var(--ink-2); line-height:1.68; margin-bottom:26px; }
.modal-lede b{ color:var(--signal); font-weight:600; }

.modal-form{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
.modal-actions{
  grid-column:1 / -1; background:var(--steel); padding:20px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.modal-fine{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--ink-3); line-height:1.6;
}
.modal-form .form-note{ background:var(--steel); }

.modal-done{ text-align:center; padding:14px 0 6px; }
.md-mark{
  width:62px; height:62px; margin:0 auto 22px; display:grid; place-items:center;
  border:1px solid var(--signal); color:var(--signal);
}
.md-mark svg{ width:30px; height:30px; }
.modal-done h3{ margin-bottom:12px; }
.modal-done p{
  font-size:14.5px; color:var(--ink-2); line-height:1.68;
  max-width:42ch; margin:0 auto 26px;
}

body.modal-open{ overflow:hidden; }

@media (max-width:560px){
  .modal-form{ grid-template-columns:1fr; }
  .modal{ padding:0; place-items:stretch; }
  .modal-panel{ max-width:none; max-height:100vh; border:0; }
}

/* ── 11. FOOTER ──────────────────────────────────────────────────────────── */
.foot{ background:var(--bar); border-top:1px solid var(--line-2); padding-top:clamp(48px,6vw,76px); }
.foot-grid{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px;
  padding-bottom:clamp(40px,5vw,64px);
}
.foot-brand .foot-mark{ width:38px; height:38px; margin-bottom:18px; }
.foot-brand p{ color:var(--ink-3); font-size:14px; max-width:34ch; line-height:1.7; }
.foot-col h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin-bottom:16px;
}
.foot-col a{ display:block; font-size:14px; color:var(--ink-2); padding:6px 0; transition:.25s; }
.foot-col a:hover{ color:var(--signal); }

.foot-bar{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line-1); padding-block:20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.foot-bar span{ display:flex; align-items:center; gap:9px; }
.foot-rev{ opacity:.6; }


/* ── MOBILE BLUEPRINTS ───────────────────────────────────────────────────── */
/* Below tablet the orthographic drawings are too dense to shrink further, so
   they keep a legible minimum width and pan horizontally inside their frame. */
@media (max-width:860px){
  .hero-draw{ position:relative; }
  .hero-draw .draw-scroll,.node-draw .nd-scroll{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .hero-draw .draw{ min-width:720px; }
  .node-draw .nd-scroll > svg{ min-width:560px; }
  .drag-hint{
    display:flex; align-items:center; gap:8px; margin-top:10px;
    font-family:var(--mono); font-size:9px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .drag-hint svg{ width:22px; height:9px; flex:none; }
}
/* Above tablet there is room for the full drawing, so the pan frame and its
   hint are not needed and the wrapper goes back to visible overflow (which
   also stops it clipping the drawing's own glow). */
@media (min-width:861px){
  .drag-hint{ display:none; }
  .draw-scroll,.nd-scroll{ overflow:visible; }
}


/* ── 11b. LEGAL PAGE + STORAGE NOTICE ────────────────────────────────────── */
.legal{ padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px); background:var(--steel); }
.legal-head{ max-width:760px; }
.legal-meta{
  margin-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.legal-meta b{ color:var(--ink-2); font-weight:500; }

.legal-callout{
  border:1px solid var(--line-2); border-left:2px solid var(--signal);
  background:var(--concrete); padding:22px 26px; margin-bottom:clamp(40px,5vw,68px);
  max-width:82ch;
}
.legal-callout p{ font-size:15px; line-height:1.7; color:var(--ink-2); }
.legal-callout b{ color:var(--ink); }

.legal-sec{ max-width:82ch; padding-top:clamp(34px,4vw,54px); margin-bottom:clamp(30px,4vw,50px); border-top:1px solid var(--line-2); }
.legal-sec h2{
  display:flex; align-items:baseline; gap:16px;
  font-size:clamp(24px,3vw,38px); font-variation-settings:"wdth" 90; margin-bottom:26px;
}
.ls-n{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--signal); font-weight:600; }
.legal-sec h3{
  font-size:16px; font-variation-settings:"wdth" 94; margin:30px 0 10px;
  color:var(--ink);
}
.legal-sec h3:first-of-type{ margin-top:0; }
.legal-sec p{ font-size:15px; line-height:1.75; color:var(--ink-2); margin-bottom:14px; }
.legal-sec b{ color:var(--ink); font-weight:700; }
.legal-sec a{ color:var(--signal); text-decoration:underline; text-underline-offset:3px; }
.legal-sec a:hover{ color:var(--signal-2); }
.legal-sec ul{ margin:0 0 16px; padding-left:20px; }
.legal-sec li{ font-size:15px; line-height:1.75; color:var(--ink-2); margin-bottom:8px; }
.legal-sec code{
  font-family:var(--mono); font-size:12.5px; color:var(--signal);
  background:var(--inset); padding:2px 6px; border:1px solid var(--line-2);
}
/* Unfilled company details, deliberately loud so they cannot ship unnoticed. */
.todo{
  color:var(--amber) !important; border-bottom:1px dashed var(--amber);
  font-family:var(--mono); font-size:.92em; font-weight:500;
}

.legal-table-scroll{ overflow-x:auto; margin-bottom:18px; }
.legal-table{ width:100%; border-collapse:collapse; min-width:560px; }
.legal-table th{
  text-align:left; padding:10px 16px 10px 0; border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:9px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.legal-table td{
  padding:12px 16px 12px 0; border-bottom:1px solid var(--line-1);
  font-size:14px; color:var(--ink-2); vertical-align:top;
}
.legal-back{ padding-top:clamp(24px,3vw,40px); border-top:1px solid var(--line-2); }

/* storage notice, shown once */
.snotice{
  position:fixed; left:0; right:0; bottom:0; z-index:180; max-width:100vw;
  background:var(--bar); border-top:1px solid var(--line-2);
  padding:16px var(--gut);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  transform:translateY(100%); transition:transform .45s var(--ease-out);
}
.snotice.show{ transform:none; }
.snotice p{
  font-size:13px; line-height:1.6; color:var(--ink-2); max-width:78ch;
  flex:1 1 240px; min-width:0;
}
.snotice a{ color:var(--signal); text-decoration:underline; text-underline-offset:3px; }
.snotice .btn{ flex:none; }
@media (max-width:560px){ .snotice{ padding:14px 20px; gap:12px; } .snotice p{ font-size:12.5px; } }

/* ── 11c. OVERFLOW CONTAINMENT ───────────────────────────────────────────
   Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content's min-content width. The drawings inside the scroll
   wrappers carry a min-width (720px for the hero elevation, 560/760 for the
   plans), which was propagating up and forcing the whole hero grid column to
   720px on a 375px phone. Everything then overflowed and got clipped by the
   body's overflow-x:hidden, which is exactly the "cropped halfway" symptom.

   Allowing these to shrink lets the scroll wrappers do their job: the drawing
   keeps its legible width and pans inside a container that fits the screen. */
.hero-inner > *,
.node > *,
.calc > *,
.refdes > *,
.assump-body > *,
.co-grid > *,
.cc-grid > *,
.cx-grid > *,
.draw-scroll,
.nd-scroll,
.rd-scroll,
.assump-scroll,
.legal-table-scroll,
.cn-scroll{ min-width:0; }

/* Belt and braces: nothing in the page may establish a wider formatting
   context than the viewport. */
html,body{ max-width:100%; }

/* ── 12. REVEAL ──────────────────────────────────────────────────────────── */
/* Every entrance effect hangs off .js-anim, which main.js puts on <html> only
   when it intends to animate — and removes again if no IntersectionObserver
   ever reports (a hidden or non-compositing tab never fires one, and never
   advances a transition either). Visible content is always the default state;
   the motion is the enhancement, never the thing that makes it appear. */
.js-anim .reveal{ opacity:0; transform:translateY(22px); animation:rise .9s var(--ease-out) forwards; }
.js-anim .d1{ animation-delay:.08s } .js-anim .d2{ animation-delay:.16s }
.js-anim .d3{ animation-delay:.26s } .js-anim .d4{ animation-delay:.36s }
@keyframes rise{ to{ opacity:1; transform:none; } }

.js-anim .io{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js-anim .io.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* Decorative loops are stopped outright rather than fast-forwarded, so none
     of them lands mid-pattern: turbine/fan rotation, coolant flow, the ticker
     crawl, the scope sweep, LED blinks and the grain drift. */
  .draw .fan circle,.draw .flow path,.draw .bay-led > *,.draw .bolt,
  .ticker-track,.scope::after,.led,.grain{ animation:none !important; }
  .draw .flow path{ stroke-dasharray:none !important; }
  .ticker-track{ transform:none !important; }
  .reveal,.io{ opacity:1 !important; transform:none !important; }
  .tl-bar .fill,.meter i::after{ transform:none !important; }
  .draw .body,.draw .bays rect,.draw .coolers rect,.draw .pipe path{ stroke-dashoffset:0; }
}

/* ── 13. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hero-inner{ grid-template-columns:1fr; gap:44px; }
  .hero-draw{ order:2; }
  .spine{ display:none; }
  .node{ grid-template-columns:1fr; }
}

/* The nav row and instrument bar have to fit the longest language (BG, then
   DE), not just English. Below 1440px the sheet numbers come off the nav
   links; below 1240px the links fold into the menu. The bar drops its two
   least useful readouts below 1360px in BG/DE and below 1240px in English,
   which keeps the language switch on screen. */
@media (max-width:1440px){
  .nav-links a span{ display:none; }
}
@media (max-width:1360px){
  html:lang(bg) .ib-hide-m, html:lang(de) .ib-hide-m{ display:none; }
}

@media (max-width:1240px){
  /* Absolute against .nav (sticky, so it is a positioned ancestor) rather than
     fixed to the viewport — .nav's backdrop-filter already makes it the
     containing block for fixed children, so viewport offsets would silently
     mean something different here than elsewhere. top:100% drops the panel
     immediately below the bar at any bar height. */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--void); border-bottom:1px solid var(--line-2);
    padding:8px var(--gut) 22px;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .nav-links.open{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s;
  }
  .nav-links a{ padding:16px 0; border-bottom:1px solid var(--line-1); font-size:13px; }
  .nav-links a:hover,.nav-links a.active{ background:none; border-color:var(--line-1); }
  .nav-links a span{ display:inline; }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-left:auto; }
  .ib-hide-m{ display:none; }
}

@media (max-width:1000px){
  .plates,.ops-grid{ grid-template-columns:1fr; }
  .ib-hide-s{ display:none; }
}

@media (max-width:760px){
  .ib-inner{ gap:16px; font-size:9.5px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-stats > div{ border-bottom:1px solid var(--line-1); padding-bottom:16px; }
  .hero-stats > div:nth-child(2n){ border-right:0; }
  .hero-stats > div:nth-child(n+3){ border-bottom:0; }
  .br-m{ display:block; }
  .tl-row{ grid-template-columns:1fr; gap:12px; }
  .lg{ grid-template-columns:44px 1fr; gap:16px; }
  .lg-meta{ display:none; }
  .lg-drawer{ grid-column:1 / -1; }
  .cta-form{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:1 / -1; }
  .sec-head-row{ align-items:flex-start; }
  /* Three tabs now, so tighten them rather than let the labels clip. */
  .node-switch{ width:100%; }
  .node-switch button{ flex:1 1 0; min-width:0; padding:11px 8px; }
  .ns-size{ font-size:9px; letter-spacing:.14em; }
  .ns-name{ font-size:12.5px; letter-spacing:-.01em; }
  .meter{ grid-template-columns:1fr; gap:7px; }
  .meter b{ margin-top:-2px; }
  .btn{ padding:14px 20px; font-size:11px; }
}

@media (max-width:460px){
  /* .nav-cta carried the auto margin that pushed the toggle right; once it is
     hidden the toggle has to take that over itself. */
  .nav-cta{ display:none; }
  .nav-toggle{ margin-left:auto; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; justify-content:space-between; }
  /* Three language buttons plus the BG/DE status line only just fit a phone. */
  .ib-inner{ gap:10px; letter-spacing:.12em; }
  .lang-sw button{ padding:3px 6px; }
  .theme-sw button{ padding:3px 5px; }
  /* On the very narrowest screens the status line gives way, not the switches. */
  .ib-inner > .ib-item:first-child{ min-width:0; overflow:hidden; }
}