/* ==========================================================================
   Jewel Innova — Intelligent Water Infrastructure
   Direction: "Control room" — light field sections alternating with dark
   instrument panels. Cyan is reserved for live telemetry only.
   ========================================================================== */

:root{
  /* ---- light ground (complete palette; dark blocks only redefine) ---- */
  --bg:            #F2F7FB;
  --bg-alt:        #FFFFFF;
  --ink:           #0A1F33;
  --ink-soft:      #234058;
  --muted:         #3F5C73;
  --line:          #D2E1EC;
  --line-soft:     #E4EDF4;
  --field-tint:    rgba(12,127,199,.05);

  /* accents (readable on the current ground) */
  --hydro:         #0C6FB4;
  --hydro-ink:     #0A5D97;
  --hydro-fill:    #0C6FB4;
  --on-hydro:      #FFFFFF;
  --chloro:        #3D8B22;
  --chloro-ink:    #35761E;
  --amber:         #B4741A;
  --crimson:       #B4342C;

  /* instrument panel — deliberately dark in both themes */
  --panel:         #06182B;
  --panel-raise:   #0D2A45;
  --panel-ink:     #E7F1F9;
  --panel-muted:   #8CADC7;
  --panel-line:    rgba(150,195,225,.16);
  --cyan:          #2CC7E8;   /* live telemetry ONLY */
  --panel-hydro:   #58AEEA;
  --panel-chloro:  #7ECB52;

  --shadow-lift:   0 1px 2px rgba(10,31,51,.05), 0 12px 32px -12px rgba(10,31,51,.18);
  --veil-field-on: color-mix(in srgb, #F2F7FB 59%, transparent);
  --veil-alt-on:   color-mix(in srgb, #FFFFFF 56%, transparent);
  --veil-field:    var(--bg);
  --veil-alt:      var(--bg-alt);
  --float:         0 1px 1px rgba(10,31,51,.10), 0 3px 6px rgba(10,31,51,.10), 0 14px 28px -10px rgba(10,31,51,.30);
  --float-hi:      0 2px 3px rgba(10,31,51,.12), 0 8px 16px rgba(10,31,51,.14), 0 26px 46px -14px rgba(10,31,51,.38);
  --glass:         color-mix(in srgb, var(--bg-alt) 74%, transparent);
  --glass-line:    color-mix(in srgb, var(--ink) 14%, transparent);

  --measure: 62ch;
  --gutter: clamp(18px, 5vw, 72px);
  --rail: 96px;

  /* Material 3 typography — Roboto Flex (display), Roboto (body/label),
     Roboto Mono (instrument readouts). Sizes and tracking follow the M3
     type-scale tokens; weights follow M3 roles (display/title/label 500,
     headline/body 400). */
  --f-display: "Roboto Flex", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --md-display-lg: 57px;  --md-display-md: 45px;  --md-display-sm: 36px;
  --md-headline-lg: 32px; --md-headline-md: 28px; --md-headline-sm: 24px;
  --md-title-lg: 22px;    --md-title-md: 16px;    --md-title-sm: 14px;
  --md-body-lg: 16px;     --md-body-md: 14px;     --md-body-sm: 12px;
  --md-label-lg: 14px;    --md-label-md: 12px;    --md-label-sm: 11px;

  /* M3 shape scale */
  --md-shape-xs: 4px; --md-shape-sm: 8px; --md-shape-md: 12px;
  --md-shape-lg: 16px; --md-shape-xl: 28px; --md-shape-full: 9999px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:          #0B1F31;
    --bg-alt:      #10293E;
    --ink:         #E8F2F9;
    --ink-soft:    #C3D8E8;
    --muted:       #92B3CB;
    --line:        rgba(146,179,203,.20);
    --line-soft:   rgba(146,179,203,.11);
    --field-tint:  rgba(44,199,232,.05);
    --hydro:       #59AFEA;
    --hydro-ink:   #7CC3F2;
    --hydro-fill: #59AFEA;
    --on-hydro:   #06182B;
    --chloro:      #7ECB52;
    --chloro-ink:  #97D873;
    --amber:       #E0A34A;
    --crimson:     #EE7A70;
    --panel:       #04121F;
    --panel-raise: #0A2339;
    --veil-field-on: color-mix(in srgb, #0B1F31 64%, transparent);
    --veil-alt-on:   color-mix(in srgb, #10293E 68%, transparent);
    --float: 0 1px 1px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.35), 0 14px 28px -10px rgba(0,0,0,.60);
  --float-hi: 0 2px 3px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.45), 0 26px 46px -14px rgba(0,0,0,.68);
  --glass: color-mix(in srgb, var(--bg-alt) 78%, transparent);
  --glass-line: color-mix(in srgb, #BFE2FA 20%, transparent);
    --shadow-lift: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:          #0B1F31;
  --bg-alt:      #10293E;
  --ink:         #E8F2F9;
  --ink-soft:    #C3D8E8;
  --muted:       #92B3CB;
  --line:        rgba(146,179,203,.20);
  --line-soft:   rgba(146,179,203,.11);
  --field-tint:  rgba(44,199,232,.05);
  --hydro:       #59AFEA;
  --hydro-ink:   #7CC3F2;
  --hydro-fill: #59AFEA;
  --on-hydro:   #06182B;
  --chloro:      #7ECB52;
  --chloro-ink:  #97D873;
  --amber:       #E0A34A;
  --crimson:     #EE7A70;
  --panel:       #04121F;
  --panel-raise: #0A2339;
  --veil-field-on: color-mix(in srgb, #0B1F31 64%, transparent);
  --veil-alt-on:   color-mix(in srgb, #10293E 68%, transparent);
  --float: 0 1px 1px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.35), 0 14px 28px -10px rgba(0,0,0,.60);
  --float-hi: 0 2px 3px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.45), 0 26px 46px -14px rgba(0,0,0,.68);
  --glass: color-mix(in srgb, var(--bg-alt) 78%, transparent);
  --glass-line: color-mix(in srgb, #BFE2FA 20%, transparent);
  --shadow-lift: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--md-body-lg); line-height:1.5;
  letter-spacing:.005em; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}
a{color:var(--hydro); text-decoration-thickness:1px; text-underline-offset:3px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4,h5{
  font-family:var(--f-display); font-weight:400; line-height:1.22;
  letter-spacing:0; text-wrap:balance; margin:0;
}
p{margin:0}

/* type scale */
/* M3 display-large, scaled down to display-small on narrow windows */
.t-hero{
  font-size:clamp(var(--md-display-sm), 6vw, var(--md-display-lg));
  line-height:1.13; letter-spacing:-.25px; font-weight:500;
}
/* M3 headline-medium -> display-medium */
.t-h2{
  font-size:clamp(var(--md-headline-md), 4vw, var(--md-display-md));
  line-height:1.2; letter-spacing:0; font-weight:500;
}
/* M3 headline-small */
.t-h3{font-size:var(--md-headline-sm); line-height:1.34; letter-spacing:0; font-weight:400}
/* M3 title-medium */
.t-h4{font-size:var(--md-title-md); line-height:1.5; letter-spacing:.15px; font-weight:500}
/* M3 title-large */
.t-h5{font-size:var(--md-title-lg); line-height:1.28; letter-spacing:0; font-weight:400}
/* M3 body-large */
.lede{font-size:var(--md-body-lg); color:var(--ink-soft); max-width:var(--measure); line-height:1.5; letter-spacing:.5px}

/* M3 body-medium */
.body-copy{font-size:var(--md-body-md); line-height:1.45; letter-spacing:.25px; color:var(--muted); max-width:var(--measure)}
.accent{color:var(--hydro)}
.accent-g{color:var(--chloro)}

/* instrument tag — the recurring structural device */
.tag{
  font-family:var(--f-mono); font-size:var(--md-label-sm); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  line-height:1.45; display:flex; align-items:center; gap:.7em;
}
.tag::before{
  content:""; width:22px; height:1px; background:var(--hydro); flex:none;
}
.tag--plain::before{display:none}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

/* ---------- layout shell ---------- */
.wrap{ max-width:1240px; margin-inline:auto; padding-inline:var(--gutter) }
section{ padding-block:clamp(64px,8vw,120px); position:relative }
.sec-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(36px,5vw,60px) }

/* the instrument rail */
.rail{
  position:fixed; left:22px; top:50%; transform:translateY(-50%);
  display:none; flex-direction:column; gap:2px; z-index:40;
}
@media (min-width:1480px){ .rail{display:flex} }
.rail a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); opacity:.55;
  padding:5px 0; transition:opacity .25s, color .25s;
}
.rail a i{ width:14px; height:1px; background:currentColor; display:block; transition:width .25s }
.rail a:hover{opacity:1}
.rail a[aria-current="true"]{ opacity:1; color:var(--hydro); font-weight:600 }
.rail a[aria-current="true"] i{ width:30px; background:var(--hydro) }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:1240px; margin-inline:auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:20px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img{height:29px; width:auto}
.cta-short{display:inline}
.cta-long{display:none}
@media (min-width:620px){
  .cta-short{display:none}
  .cta-long{display:inline}
}
@media (max-width:619px){
  .brand img{height:27px}
  .nav-cta{padding:9px 14px; font-size:var(--md-body-sm)}
  .nav-in{gap:12px}
}
.nav-links{display:none; gap:26px; margin-left:auto; align-items:center}
@media (min-width:900px){ .nav-links{display:flex} .theme-btn{margin-left:0} }
.nav-links a{
  font-size:var(--md-body-md); font-weight:500; color:var(--ink-soft); text-decoration:none;
  letter-spacing:.005em; transition:color .2s;
}
.nav-links a:hover{color:var(--hydro)}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--hydro-fill); color:var(--on-hydro); border:0; border-radius:var(--md-shape-full);
  padding:10px 22px; font-size:var(--md-body-md); font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; transition:filter .2s, transform .2s;
}
.nav-cta:hover{filter:brightness(1.1); transform:translateY(-1px)}
.theme-btn{
  margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:var(--md-shape-full);
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  color:var(--muted); flex:none; transition:border-color .2s, color .2s;
}
.theme-btn:hover{border-color:var(--hydro); color:var(--hydro)}

/* ---------- hero ---------- */
.hero{ padding-block:clamp(48px,7vw,90px) 0; overflow:hidden }
.hero-grid{display:grid; gap:clamp(30px,4vw,52px)}
.hero-kicker{margin-bottom:22px}
.hero h1{margin-block:0 22px}
.hero h1 em{font-style:normal; color:var(--hydro); display:block}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink-soft); max-width:36ch; line-height:1.5}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; gap:9px; border-radius:var(--md-shape-full);
  padding:13px 26px; font-size:var(--md-body-md); font-weight:600; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:all .2s;
}
.btn-fill{background:var(--hydro-fill); color:var(--on-hydro)}
.btn-fill:hover{filter:brightness(1.1)}
.btn-line{border-color:var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--hydro); color:var(--hydro)}

.hero-media{position:relative; border-radius:var(--md-shape-lg); overflow:hidden; background:var(--panel)}
.hero-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:1400/506}
.hero-media svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.node-ring{fill:none; stroke:var(--cyan); stroke-width:1.1; opacity:.85}
.node-dot{fill:var(--cyan)}
.node-link{stroke:var(--cyan); stroke-width:.8; opacity:.35; stroke-dasharray:3 4}

.pillars{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--line); margin-top:clamp(34px,4vw,52px);
}
.pillar{ padding:24px 22px 26px 0; border-right:1px solid var(--line-soft) }
.pillar:last-child{border-right:0}
.pillar :is(h2,h3,h4){margin-bottom:6px}
.pillar p{font-size:var(--md-body-md); color:var(--muted); line-height:1.5}
.pillar-ic{color:var(--hydro); margin-bottom:14px; display:block}

/* ---------- panel (dark instrument) sections ---------- */
.panel{ background:var(--panel); color:var(--panel-ink) }
.panel :is(h1,h2,h3,h4,h5){color:var(--panel-ink)}
.panel .lede{color:#BFD8EA}
.panel .body-copy{color:var(--panel-muted)}
.panel .tag{color:var(--panel-muted)}
.panel .tag::before{background:var(--cyan)}
.panel .accent{color:var(--panel-hydro)}
.panel .accent-g{color:var(--panel-chloro)}
.panel a{color:var(--panel-hydro)}

/* ---------- process chain (challenge) ---------- */
.chain{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.chain-step{
  appearance:none; background:transparent; border:0; border-top:2px solid transparent;
  padding:20px 10px 22px; text-align:left; cursor:pointer; display:grid; gap:8px;
  transition:background .22s, border-color .22s; margin-top:-1px;
}
.chain-step:hover{background:var(--field-tint)}
.chain-step .st-n{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.14em; color:var(--muted)}
.chain-step .st-t{font-family:var(--f-display); font-weight:700; font-size:var(--md-body-md); font-variation-settings:"wdth" 100; color:var(--ink)}
.chain-step[aria-selected="true"]{border-top-color:var(--hydro); background:var(--field-tint)}
.chain-step[aria-selected="true"] .st-t{color:var(--hydro)}
@media (max-width:720px){
  .chain{grid-template-columns:repeat(2,1fr)}
  .chain-step:last-child{grid-column:span 2}
}
.chain-detail{
  margin-top:30px; display:grid; gap:12px; max-width:var(--measure);
  min-height:118px;
}
.chain-detail h3{color:var(--ink)}

.challenges{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:0; margin-top:clamp(44px,6vw,72px); border-top:1px solid var(--line);
}
.chal{padding:22px 20px 24px 0; border-right:1px solid var(--line-soft)}
.chal:last-child{border-right:0}
.chal .ch-n{font-family:var(--f-mono); font-size:var(--md-label-sm); color:var(--hydro); letter-spacing:.14em; display:block; margin-bottom:12px}
.chal :is(h2,h3,h4){margin-bottom:6px; font-size:var(--md-body-md)}
.chal p{font-size:var(--md-body-md); color:var(--muted); line-height:1.5}

/* ---------- pillars / segmented ---------- */
.seg{display:flex; flex-wrap:wrap; gap:10px; border:0; background:transparent; overflow:visible; width:fit-content; max-width:100%}
.seg button{
  appearance:none; background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--md-shape-full); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3); box-shadow:var(--float);
  padding:11px 22px; cursor:pointer; font-family:var(--f-mono); font-size:var(--md-body-sm);
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .2s, color .2s, border-color .2s;
}
.seg button[aria-selected="true"]{background:var(--hydro-fill); color:var(--on-hydro)}
.seg button:hover:not([aria-selected="true"]){color:var(--ink); border-color:var(--hydro); transform:translateY(-4px); box-shadow:var(--float-hi)}
.seg button[aria-selected="true"]{transform:translateY(-2px); box-shadow:var(--float-hi)}

.pillar-body{display:grid; gap:clamp(28px,4vw,56px); margin-top:36px; align-items:start}
@media (min-width:880px){ .pillar-body{grid-template-columns:1fr .85fr} }
.pillar-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0}
.pillar-list li{
  display:flex; gap:14px; align-items:flex-start; padding:14px 0;
  border-bottom:1px solid var(--line-soft); font-size:var(--md-body-md); color:var(--ink-soft);
}
.pillar-list li:first-child{border-top:1px solid var(--line-soft)}
.pillar-list svg{flex:none; margin-top:3px; color:var(--chloro)}
.pillar-fig{position:relative}
.pillar-fig img{border-radius:var(--md-shape-lg)}
.pillar-fig img{width:100%; aspect-ratio:4/3; object-fit:cover}
.fig-cap{
  font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-top:10px;
}

/* ---------- comparison slider ---------- */
.compare{
  position:relative; border-radius:var(--md-shape-lg); overflow:hidden; user-select:none;
  aspect-ratio:16/10; background:var(--panel-raise); touch-action:pan-y;
}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos,55%))}
.compare .cmp-label{
  position:absolute; top:14px; font-family:var(--f-mono); font-size:var(--md-label-sm);
  letter-spacing:.14em; text-transform:uppercase; padding:6px 11px;
  background:rgba(4,18,31,.72); color:#DDEBF6; backdrop-filter:blur(6px); border-radius:2px;
}
.cmp-l{left:14px}
.cmp-r{right:14px; color:#9EDCFF}
.cmp-handle{
  position:absolute; top:0; bottom:0; left:var(--pos,55%); width:2px;
  background:var(--cyan); transform:translateX(-1px); cursor:ew-resize;
}
.cmp-handle::after{
  content:""; position:absolute; top:50%; left:50%; width:42px; height:42px;
  transform:translate(-50%,-50%); border-radius:50%; border:2px solid var(--cyan);
  background:rgba(4,18,31,.6); backdrop-filter:blur(4px);
}
.cmp-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--cyan); z-index:2; display:grid; place-items:center;
}
.cmp-range{position:absolute; inset:0; width:100%; opacity:0; cursor:ew-resize; margin:0}

.ledger{border-top:1px solid var(--panel-line)}
.ledger-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--panel-line);
}
.ledger-row .lg-k{font-size:var(--md-body-md); color:var(--panel-muted)}
.ledger-row .lg-a{font-family:var(--f-mono); font-size:var(--md-body-md); color:#7E97AC; text-align:right}
.ledger-row .lg-b{font-family:var(--f-display); font-weight:700; font-size:var(--md-title-md); color:var(--panel-chloro); text-align:right; min-width:8.5ch; font-variation-settings:"wdth" 100}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px; margin-top:34px}
.stat{padding:22px 20px 22px 0; border-top:1px solid var(--panel-line)}
.stat .sv{
  font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 118;
  font-size:clamp(2rem,4.2vw,2.9rem); line-height:1; color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.stat .sv small{font-size:.42em; font-weight:600; margin-left:2px; vertical-align:.35em}
.stat .sk{font-size:var(--md-body-md); color:var(--panel-muted); margin-top:9px; line-height:1.4}

/* ---------- flow diagram ---------- */
.flow{display:grid; gap:clamp(26px,3.4vw,44px)}
.flow > *{min-width:0}
@media (min-width:1000px){ .flow{grid-template-columns:200px 1fr} }
.flow-in{display:grid; gap:0; align-content:start; border-top:1px solid var(--line)}
.flow-in .fi{
  display:flex; gap:11px; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--line-soft); font-size:var(--md-body-md); color:var(--ink-soft);
}
.flow-in .fi b{display:block; font-weight:600; font-size:var(--md-body-md); color:var(--ink)}
.flow-in .fi span{font-family:var(--f-mono); font-size:var(--md-label-sm); color:var(--muted)}
.dotmark{width:9px; height:9px; border-radius:50%; flex:none}

.stages{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:760px){ .stages{grid-template-columns:repeat(2,1fr)} }
.stage{
  appearance:none; text-align:left; cursor:pointer; background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--glass-line); border-radius:var(--md-shape-md); padding:18px 16px 20px;
  display:grid; gap:9px; position:relative;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .2s, border-color .2s;
}
.stage:hover{border-color:var(--hydro); transform:translateY(-5px)}
.stage[aria-selected="true"]{background:var(--hydro-fill); border-color:var(--hydro-fill)}
.stage[aria-selected="true"] *{color:var(--on-hydro) !important}
.stage .sg-n{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.14em; color:var(--muted)}
.stage .sg-t{font-family:var(--f-display); font-weight:700; font-size:var(--md-body-md); font-variation-settings:"wdth" 100; color:var(--ink)}
.stage .sg-s{font-size:var(--md-body-sm); color:var(--muted); line-height:1.42}
.flow-track{position:relative; height:44px; margin:14px 0 4px; overflow:hidden}
.flow-track svg{position:absolute; inset:0; width:100%; height:100%}
.stage-detail{
  border:1px solid var(--line); border-radius:var(--md-shape-md); padding:22px 22px 24px;
  background:var(--bg-alt); display:grid; gap:10px; min-height:132px;
}
.stage-detail :is(h2,h3,h4){font-size:var(--md-title-md)}
.stage-detail ul{margin:6px 0 0; padding-left:1.05em; color:var(--muted); font-size:var(--md-body-md); display:grid; gap:5px}

/* ---------- HMI dashboard ---------- */
.hmi{
  border:1px solid var(--panel-line); border-radius:var(--md-shape-md); background:var(--panel-raise);
  overflow:hidden;
}
.hmi-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--panel-line);
  background:rgba(0,0,0,.22);
  font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.1em; text-transform:uppercase;
  color:var(--panel-muted);
}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(44,199,232,.6); animation:ping 2.4s ease-out infinite}
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(44,199,232,.55)} 70%{box-shadow:0 0 0 9px rgba(44,199,232,0)} 100%{box-shadow:0 0 0 0 rgba(44,199,232,0)} }
.hmi-bar .spacer{margin-left:auto}
.hmi-body{display:grid; gap:1px; background:var(--panel-line)}
@media (min-width:900px){ .hmi-body{grid-template-columns:268px 1fr} }
.hmi-recovery{background:var(--panel-raise); padding:26px 22px; display:grid; gap:16px; justify-items:center; align-content:center}
.ring-wrap{position:relative; width:170px; height:170px}
.ring-wrap svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:rgba(150,195,225,.14); stroke-width:9}
.ring-fg{fill:none; stroke:var(--cyan); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.ring-val{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.ring-val b{
  font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 118;
  font-size:2.35rem; line-height:1; color:var(--panel-ink); font-variant-numeric:tabular-nums;
}
.ring-val i{font-style:normal; font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.14em; text-transform:uppercase; color:var(--panel-muted); display:block; margin-top:7px}

.params{background:var(--panel-raise); padding:6px 0}
.prm{
  display:grid; grid-template-columns:1fr auto 78px 12px; gap:14px; align-items:center;
  padding:13px 20px; border-bottom:1px solid var(--panel-line);
}
.prm:last-child{border-bottom:0}
.prm-k{display:grid; gap:1px; min-width:0}
.prm-k b{font-family:var(--f-display); font-weight:600; font-size:var(--md-body-md); font-variation-settings:"wdth" 100; color:var(--panel-ink)}
.prm-k span{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.1em; color:#8FADC6; text-transform:uppercase}
.prm-v{
  font-family:var(--f-mono); font-weight:500; font-size:var(--md-title-md); color:var(--cyan);
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.prm-v u{text-decoration:none; font-size:.68em; color:var(--panel-muted); margin-left:3px}
.prm-spark{height:26px; width:78px}
.prm-spark path{fill:none; stroke:var(--cyan); stroke-width:1.4; opacity:.9}
.prm-spark .fillp{fill:rgba(44,199,232,.14); stroke:none}
.prm-led{width:8px; height:8px; border-radius:50%; background:var(--panel-chloro); justify-self:end}
.prm-led.warn{background:var(--amber)}
@media (max-width:560px){
  .prm{grid-template-columns:1fr auto 12px}
  .prm-spark{display:none}
}

.alert{
  display:flex; gap:13px; align-items:flex-start; padding:15px 20px;
  border-top:1px solid var(--panel-line); background:rgba(224,163,74,.09);
}
.alert svg{flex:none; color:var(--amber); margin-top:2px}
.alert b{font-size:var(--md-body-md); color:#F0C88A; display:block; font-family:var(--f-display); font-variation-settings:"wdth" 100}
.alert p{font-size:var(--md-body-sm); color:var(--panel-muted); margin-top:3px}
.alert[hidden]{display:none}

.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0; margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--panel-line)}
@media (min-width:760px){ .caps{grid-template-columns:repeat(3,1fr)} }
.caps .cap:nth-child(3n){border-right:0}
.cap{padding:22px 22px 24px 0; border-right:1px solid var(--panel-line)}
.cap:last-child{border-right:0}
.cap-ic{color:var(--cyan); margin-bottom:14px; display:block}
.cap :is(h2,h3,h4){font-size:var(--md-title-sm); letter-spacing:.1px; margin-bottom:6px}
.cap p{font-size:var(--md-body-md); color:var(--panel-muted); line-height:1.5}

.pipeline{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; align-items:center}
.pipe-step{
  display:flex; align-items:center; gap:10px; padding:10px 15px;
  border:1px solid var(--panel-line); border-radius:2px; background:rgba(255,255,255,.02);
}
.pipe-step b{font-family:var(--f-mono); font-size:var(--md-label-sm); color:var(--cyan); letter-spacing:.1em}
.pipe-step span{font-size:var(--md-body-md); color:var(--panel-ink)}
.pipe-arrow{color:#4E6C85; flex:none}

/* ---------- industries ---------- */
.ind-filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px}
.chipf{
  appearance:none; background:var(--glass); border:1px solid var(--glass-line); border-radius:100px;
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  padding:8px 17px; font-size:var(--md-body-sm); color:var(--muted); cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .2s, color .2s, border-color .2s;
}
.chipf:hover{border-color:var(--hydro); color:var(--hydro); transform:translateY(-4px); box-shadow:var(--float-hi)}
.chipf[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.ind-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:12px}
.ind{
  padding:20px 18px 22px; background:var(--bg-alt); border:1px solid var(--line-soft);
  display:grid; gap:8px; align-content:start; transition:all .22s;
}
.ind:hover{border-color:var(--hydro); transform:translateY(-6px); box-shadow:var(--float-hi)}
.ind[hidden]{display:none}
.ind-ic{color:var(--hydro)}
.ind :is(h2,h3,h4){font-size:var(--md-title-sm); letter-spacing:.1px}
.ind p{font-size:var(--md-body-sm); color:var(--muted); line-height:1.45}
.ind .ind-load{font-family:var(--f-mono); font-size:var(--md-label-sm); color:var(--chloro-ink); letter-spacing:.08em; margin-top:2px}

.value-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:clamp(44px,5vw,68px); border-top:1px solid var(--line)}
.val{padding:22px 18px 24px 0; border-right:1px solid var(--line-soft)}
.val:last-child{border-right:0}
.val :is(h2,h3,h4){font-size:var(--md-title-sm); margin-bottom:5px; color:var(--hydro)}
.val p{font-size:var(--md-body-sm); color:var(--muted); line-height:1.45}

/* ---------- case study ---------- */
.case-top{display:grid; gap:clamp(26px,3.6vw,48px); align-items:center}
@media (min-width:940px){ .case-top{grid-template-columns:1fr .9fr} }
.case-fig{position:relative; cursor:crosshair}
.case-fig img{border-radius:var(--md-shape-lg)}
.case-fig img{width:100%; aspect-ratio:1000/580; object-fit:cover}
.case-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:clamp(36px,4vw,56px)}
@media (max-width:760px){ .case-steps{grid-template-columns:repeat(2,1fr)} }
.cs{padding:18px 16px 20px 0; border-top:1px solid var(--line)}
.cs b{font-family:var(--f-mono); font-size:var(--md-label-sm); color:var(--hydro); letter-spacing:.14em; display:block; margin-bottom:10px}
.cs :is(h2,h3,h4){font-size:var(--md-title-sm); letter-spacing:.1px; margin-bottom:5px}
.cs p{font-size:var(--md-body-sm); color:var(--muted); line-height:1.45}

.results{margin-top:clamp(40px,5vw,64px)}
.res-head{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px}
.toggle{display:flex; flex-wrap:wrap; gap:8px; border:0; background:transparent; overflow:visible; margin-left:auto}
.toggle button{
  appearance:none; background:var(--glass); border:1px solid var(--glass-line);
  border-radius:var(--md-shape-full); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3); box-shadow:var(--float);
  padding:8px 17px; cursor:pointer;
  font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .2s, color .2s, border-color .2s;
}
.toggle button:hover:not([aria-pressed="true"]){color:var(--ink); border-color:var(--hydro); transform:translateY(-4px); box-shadow:var(--float-hi)}
.toggle button[aria-pressed="true"]{transform:translateY(-2px); box-shadow:var(--float-hi)}
.toggle button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.tbl-scroll{overflow-x:auto}
table.results-tbl{border-collapse:collapse; width:100%; min-width:540px}
.results-tbl th{
  text-align:left; font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
  padding:0 14px 11px 0; border-bottom:1px solid var(--line);
}
.results-tbl th:not(:first-child),.results-tbl td:not(:first-child){text-align:right}
.results-tbl td{padding:14px 14px 14px 0; border-bottom:1px solid var(--line-soft); font-size:var(--md-body-md)}
.results-tbl td:first-child{color:var(--ink); font-weight:500}
.results-tbl td.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.results-tbl td.after{color:var(--chloro-ink); font-weight:600}
.results-tbl.hide-before th:nth-child(2),.results-tbl.hide-before td:nth-child(2){display:none}
.results-tbl.hide-after th:nth-child(3),.results-tbl.hide-after td:nth-child(3){display:none}
.bar-cell{width:34%; min-width:150px}
.bar{display:block; height:6px; background:var(--line); border-radius:100px; overflow:hidden; position:relative}
.bar i{display:block; height:100%; background:var(--chloro); width:0; transition:width 1s cubic-bezier(.4,0,.2,1); border-radius:100px}
.bar-lbl{font-family:var(--f-mono); font-size:var(--md-body-sm); color:var(--chloro-ink); font-variant-numeric:tabular-nums; margin-bottom:6px; display:block}
.outcomes{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--line)}
.out{padding:20px 16px 22px 0; border-right:1px solid var(--line-soft)}
.out:last-child{border-right:0}
.out :is(h2,h3,h4){font-size:var(--md-title-sm); letter-spacing:.1px; margin-bottom:5px}
.out p{font-size:var(--md-body-sm); color:var(--muted); line-height:1.45}

/* ---------- brochure gallery ---------- */
/* .gal is laid out as a snap filmstrip further down */
.gal button{
  appearance:none; padding:0; border:1px solid var(--line); border-radius:var(--md-shape-md); overflow:hidden;
  background:var(--bg-alt); cursor:pointer; display:block; position:relative; transition:all .2s;
}
.gal button:hover{border-color:var(--hydro); transform:translateY(-6px); box-shadow:var(--float-hi)}
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gal .gp{
  position:absolute; left:8px; bottom:8px; font-family:var(--f-mono); font-size:var(--md-label-sm);
  background:rgba(4,18,31,.78); color:#DBEAF5; padding:3px 7px; border-radius:2px; letter-spacing:.08em;
}
dialog.lb{
  border:0; padding:0; background:transparent; max-width:min(1100px,94vw); width:100%;
}
dialog.lb::backdrop{background:rgba(3,14,24,.88); backdrop-filter:blur(4px)}
.lb-in{position:relative; display:grid; gap:12px}
.lb-in img{width:100%; border-radius:var(--md-shape-md); background:#fff}
.lb-nav{display:flex; gap:8px; align-items:center; justify-content:center}
.lb-nav button{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); color:#E7F1F9;
  border-radius:var(--md-shape-full); padding:8px 18px; cursor:pointer; font-family:var(--f-mono);
  font-size:var(--md-body-sm); letter-spacing:.1em; text-transform:uppercase; transition:background .2s;
}
.lb-nav button:hover{background:rgba(255,255,255,.18)}
.lb-count{font-family:var(--f-mono); font-size:var(--md-body-sm); color:#9DBBD1; min-width:7ch; text-align:center}

/* ---------- closing / contact ---------- */
.close-grid{display:grid; gap:clamp(32px,4.4vw,64px); align-items:center}
@media (min-width:960px){ .close-grid{grid-template-columns:1.05fr .95fr} }
.close-fig{position:relative; cursor:crosshair}
.close-fig img{border-radius:var(--md-shape-lg)}
.surface-fx{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  border-radius:var(--md-shape-lg); opacity:0; transition:opacity .8s ease; z-index:1;
}
.surface-fx.on{opacity:1}
.close-fig img{width:100%; aspect-ratio:1/1; object-fit:cover}
.four{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); margin-top:34px; border-top:1px solid var(--panel-line)}
.four div{padding:18px 16px 20px 0; border-right:1px solid var(--panel-line)}
.four div:last-child{border-right:0}
.four :is(h2,h3,h4){font-size:var(--md-title-sm); letter-spacing:.1px; margin-bottom:5px}
.four p{font-size:var(--md-body-sm); color:var(--panel-muted); line-height:1.45}

.contact-grid{display:grid; gap:clamp(30px,4vw,58px)}
@media (min-width:880px){ .contact-grid{grid-template-columns:.85fr 1fr} }
.cdetails{display:grid; gap:0; border-top:1px solid var(--line)}
.cd{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start}
.cd svg{flex:none; color:var(--hydro); margin-top:3px}
.cd span{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:3px}
.cd a,.cd b{font-size:var(--md-body-md); color:var(--ink); font-weight:500; text-decoration:none; word-break:break-word}
.cd a:hover{color:var(--hydro)}

form.enq{display:grid; gap:16px}
.f-row{display:grid; gap:16px}
@media (min-width:620px){ .f-row{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:7px}
.field label{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--md-body-lg); color:var(--ink); background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--md-shape-xs); padding:13px 15px; width:100%;
}
.field textarea{resize:vertical; min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--hydro); outline:none; box-shadow:0 0 0 3px rgba(12,111,180,.12)}
.form-note{font-size:var(--md-body-sm); color:var(--muted)}
.form-ok{
  display:none; gap:10px; align-items:center; padding:13px 16px; border-radius:2px;
  background:rgba(61,139,34,.1); border:1px solid rgba(61,139,34,.3); font-size:var(--md-body-md); color:var(--chloro-ink);
}
.form-ok.show{display:flex}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); padding-block:34px 40px}
.foot-in{display:flex; flex-wrap:wrap; gap:20px; align-items:center}
.foot img{height:26px; width:auto}
.foot p{font-size:var(--md-body-sm); color:var(--muted)}
.foot .fr{margin-left:auto; font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}

/* ---------- everything is visible at rest; no scroll-gated content ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   2D INTERACTIVE LAYER — schematic, simulator, calculator, effects
   ========================================================================== */

/* ---- scroll progress ---- */
.scroll-prog{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; pointer-events:none}
.scroll-prog i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--hydro),var(--cyan)); transition:width .1s linear}

/* ---- hero canvas ---- */
.hero-media canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero-media{cursor:crosshair}
/* 2D flow field: the fallback, and the layer that stands down once WebGL wins */
#heroFx{mix-blend-mode:screen; transition:opacity .5s ease}
#heroFx.off{opacity:0}
/* WebGL water surface: fades in over the photograph once its texture is ready */
#heroWater{opacity:0; transition:opacity .8s ease; z-index:1}
#heroWater.on{opacity:1}

/* ---- wave divider ---- */
.wave{display:block; width:100%; height:clamp(34px,5vw,64px); line-height:0}
.wave svg{display:block; width:100%; height:100%}

/* ---- P&ID schematic ---- */
.pid-wrap{
  min-width:0; max-width:100%; margin-top:22px; border:1px solid var(--line); border-radius:var(--md-shape-md); background:var(--bg-alt);
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
}
.pid-wrap svg{display:block; min-width:880px; width:100%; height:auto}
.pid-hint{
  font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-top:10px;
}
.unit-box{fill:var(--bg-alt); stroke:var(--line); stroke-width:1.4; cursor:pointer; transition:fill .2s, stroke .2s}
.unit-g:hover .unit-box{stroke:var(--hydro)}
.unit-g[data-on="1"] .unit-box{fill:var(--field-tint); stroke:var(--hydro); stroke-width:2}
.unit-g[data-sel="1"] .unit-box{fill:var(--hydro-fill); stroke:var(--hydro-fill); stroke-width:2}
.unit-g[data-sel="1"] .unit-t,.unit-g[data-sel="1"] .unit-k{fill:var(--on-hydro)}
.unit-g[data-sel="1"] .unit-ic{stroke:var(--on-hydro)}
.unit-t{font-family:var(--f-display); font-size:12.5px; font-weight:700; fill:var(--ink); pointer-events:none}
.unit-k{font-family:var(--f-mono); font-size:9.5px; fill:var(--muted); letter-spacing:.06em; pointer-events:none}
.unit-ic{fill:none; stroke:var(--hydro); stroke-width:1.4; pointer-events:none}
.pipe{fill:none; stroke:var(--line); stroke-width:5; stroke-linecap:round}
.pipe-i{fill:none; stroke-width:2.2; stroke-linecap:round; opacity:.55}
.pid-lbl{font-family:var(--f-mono); font-size:9px; fill:var(--muted); letter-spacing:.1em; text-transform:uppercase}
.inst-c{fill:var(--bg-alt); stroke:var(--muted); stroke-width:1.2; transition:stroke .2s, fill .2s}
.inst-t{font-family:var(--f-mono); font-size:8px; fill:var(--muted); text-anchor:middle}
.inst-l{stroke:var(--line); stroke-width:1; stroke-dasharray:3 3}
.pid-inst[data-on="1"] .inst-c{stroke:var(--cyan); fill:color-mix(in srgb, var(--cyan) 14%, var(--bg-alt))}
.pid-inst[data-on="1"] .inst-t{fill:var(--hydro)}
.pid-inst[data-on="1"] .inst-l{stroke:var(--cyan); stroke-dasharray:4 3}
.scada-box{fill:none; stroke:var(--line); stroke-width:1.2; stroke-dasharray:5 4}
.scada-t{font-family:var(--f-mono); font-size:9.5px; fill:var(--muted); letter-spacing:.16em}

/* ---- membrane simulator ---- */
.sim{margin-top:clamp(34px,4vw,52px)}
.sim-frame{
  border:1px solid var(--line); border-radius:var(--md-shape-md); background:var(--panel);
  overflow:hidden; position:relative;
}
.sim-frame canvas{display:block; width:100%; height:auto; aspect-ratio:1000/380; touch-action:pan-y}
@media (max-width:760px){ .sim-frame canvas{aspect-ratio:1000/700} }
.sim-ctl{
  display:grid; gap:18px 26px; padding:18px 20px; border-top:1px solid var(--panel-line);
  background:var(--panel-raise); grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.ctl{display:grid; gap:8px}
.ctl label{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.13em; text-transform:uppercase; color:var(--panel-muted); display:flex; gap:8px}
.ctl label b{margin-left:auto; color:var(--cyan); font-weight:500; font-variant-numeric:tabular-nums}
.ctl input[type=range]{width:100%; accent-color:#2CC7E8; height:20px; margin:0; cursor:ew-resize}
.ctl .seg2{display:flex; border:1px solid var(--panel-line); border-radius:2px; overflow:hidden}
.ctl .seg2 button{
  flex:1; appearance:none; background:transparent; border:0; border-right:1px solid var(--panel-line);
  padding:8px 4px; cursor:pointer; font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.1em;
  color:var(--panel-muted); transition:all .18s;
}
.ctl .seg2 button:last-child{border-right:0}
.ctl .seg2 button[aria-pressed="true"]{background:var(--cyan); color:#04121F; font-weight:600}
.sim-out{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  border-top:1px solid var(--panel-line); background:var(--panel);
}
.so{padding:15px 16px 17px; border-right:1px solid var(--panel-line)}
.so:last-child{border-right:0}
.so b{
  display:block; font-family:var(--f-mono); font-size:var(--md-title-md); color:var(--cyan);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.so b u{text-decoration:none; font-size:.58em; color:var(--panel-muted); margin-left:3px}
.so span{display:block; font-size:var(--md-body-sm); color:var(--panel-muted); margin-top:6px; line-height:1.35}
.sim-legend{display:flex; flex-wrap:wrap; gap:14px; padding:12px 20px; border-top:1px solid var(--panel-line); background:var(--panel)}
.sim-legend span{display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.08em; color:var(--panel-muted); text-transform:uppercase}
.sim-legend i{width:9px; height:9px; border-radius:50%; display:block}
.disclaim{font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:12px}

/* ---- sankey calculator ---- */
.calc{display:grid; gap:clamp(24px,3vw,42px); margin-top:clamp(34px,4vw,54px)}
@media (min-width:920px){ .calc{grid-template-columns:280px 1fr; align-items:center} }
.calc > *{min-width:0}
.calc-ctl{display:grid; gap:22px; align-content:start}
.calc-fig{overflow-x:auto; overflow-y:hidden; min-width:0}
.calc-svg{width:100%; min-width:520px; height:auto; overflow:visible}
.sk-feed{fill:#3C5C74}
.sk-perm{fill:url(#gPerm)}
.sk-rej{fill:url(#gRej)}
.sk-lbl{font-family:var(--f-mono); font-size:11px; fill:var(--panel-muted); letter-spacing:.1em; text-transform:uppercase}
.sk-val{font-family:var(--f-display); font-weight:700; font-size:19px; font-variation-settings:"wdth" 110; fill:var(--panel-ink)}
.sk-val.p{fill:#2CC7E8}
.sk-val.r{fill:#E0A34A}
.calc-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--panel-line); margin-top:26px}
.co{padding:18px 16px 20px 0; border-right:1px solid var(--panel-line)}
.co:last-child{border-right:0}
.co b{font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 116; font-size:var(--md-headline-sm); color:var(--panel-chloro); font-variant-numeric:tabular-nums; line-height:1}
.co b u{text-decoration:none; font-size:.46em; font-weight:600; color:var(--panel-muted); margin-left:4px}
.co span{display:block; font-size:var(--md-body-sm); color:var(--panel-muted); margin-top:8px; line-height:1.4}

/* ---- hover glow on dark tiles ---- */
.glow{position:relative; overflow:hidden}
.glow::before{
  content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  left:var(--gx,-999px); top:var(--gy,-999px); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(44,199,232,.14), transparent 68%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.glow:hover::before{opacity:1}
.glow > *{position:relative}

/* ---- button ripple ---- */
.btn,.nav-cta,.chipf,.stage,.chain-step{position:relative; overflow:hidden}
.ripple{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:currentColor; opacity:.28; pointer-events:none;
  animation:rip .6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }

/* ---- parallax figures ---- */
.plx{will-change:transform}

/* ---- card lift ---- */
.cap,.val,.out,.chal,.cs{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s}
.cap:hover,.val:hover,.out:hover,.chal:hover,.cs:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  .glow::before{display:none}
  .ripple{display:none}
  .plx{transform:none !important}
}


/* ==========================================================================
   Material 3 finishing — label roles on controls, state layers, focus ring
   ========================================================================== */
.btn,.nav-cta{
  font-size:var(--md-label-lg); font-weight:500; letter-spacing:.1px;
  line-height:20px; font-family:var(--f-body);
}
.nav-links a{font-size:var(--md-label-lg); font-weight:500; letter-spacing:.1px}
.chipf{
  font-size:var(--md-label-lg); font-weight:500; letter-spacing:.1px;
  border-radius:var(--md-shape-sm); padding:8px 16px; min-height:32px;
}
.seg button,.toggle button,.ctl .seg2 button,.lb-nav button{
  font-size:var(--md-label-md); font-weight:500;
}
.field label,.ctl label,.cd span{font-size:var(--md-label-md); font-weight:500}
.results-tbl th{font-size:var(--md-label-md); font-weight:500}
.unit-t{font-size:11.5px; font-weight:500}
.stat .sv,.co b,.so b,.ring-val b{font-weight:500; letter-spacing:0}
.stat .sv{font-family:var(--f-display)}

/* M3 state layer: 8% on hover, 12% on press */
.btn-line:hover,.chipf:hover,.theme-btn:hover{background:color-mix(in srgb, var(--hydro) 8%, transparent)}
.btn-fill:hover,.nav-cta:hover{ box-shadow:0 1px 2px rgba(0,0,0,.18), 0 2px 6px rgba(12,111,180,.28)}
.btn-fill:active,.nav-cta:active{box-shadow:none}
.gal button:hover,.ind:hover,.stage:hover{box-shadow:var(--float-hi)}

/* M3-style focus indicator */
:focus-visible{outline:3px solid var(--hydro); outline-offset:2px; border-radius:var(--md-shape-xs)}
.panel :focus-visible,.sim-frame :focus-visible{outline-color:var(--cyan)}

/* skip link */
.skip{
  position:absolute; left:16px; top:-64px; z-index:200;
  background:var(--hydro); color:#fff; padding:12px 20px;
  border-radius:var(--md-shape-full); font-size:var(--md-label-lg); font-weight:500;
  text-decoration:none; transition:top .18s;
}
.skip:focus{top:12px}

/* form validation */
.field .err{font-size:var(--md-body-sm); color:var(--crimson); letter-spacing:.4px; min-height:16px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--crimson)}
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,52,44,.14)}

/* visitor counter */
.visits{
  display:none; align-items:center; gap:9px; margin-left:auto;
  font-family:var(--f-mono); font-size:var(--md-label-md); letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.visits.on{display:flex}
.visits{text-transform:none; letter-spacing:.3px}
.visits b{
  font-family:var(--f-display); font-size:var(--md-title-md); font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:0;
}
.visits .vdot{width:7px; height:7px; border-radius:50%; background:var(--chloro); flex:none}
.foot-in .fr{margin-left:0}

@media print{
  .nav,.rail,.scroll-prog,.hero-media canvas,.sim-frame,.wave,dialog.lb,.enq,.visits{display:none !important}
  body{background:#fff; color:#000}
  section{padding-block:18px; break-inside:avoid}
  .panel{background:#fff; color:#000}
  .panel h1,.panel h2,.panel h3,.panel h4,.panel .lede,.panel .body-copy{color:#000}
  a{text-decoration:underline}
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.chain-step[aria-pressed="true"]{border-top-color:var(--hydro); background:var(--field-tint)}
.chain-step[aria-pressed="true"] .st-t{color:var(--hydro)}
.stage[aria-pressed="true"]{background:var(--hydro-fill); border-color:var(--hydro-fill)}
.stage[aria-pressed="true"] *{color:var(--on-hydro) !important}

.unit-inline{font-family:var(--f-mono); font-size:var(--md-body-sm); color:var(--muted)}

/* Unit symbols and chemical notation keep their own case — uppercasing
   turns pH into PH and m3/d into M3/D. */
.ctl label b,.keepcase,.keepcase *{text-transform:none !important}
.field label{text-transform:none; letter-spacing:.1px; font-size:var(--md-label-lg); color:var(--ink-soft)}
.co b u{margin-left:6px}
.so b u{margin-left:5px}
.prm-v u{margin-left:4px}
.stat .sv small{margin-left:4px}


/* ==========================================================================
   Page-wide water — caustic light over the document, droplets on click
   ========================================================================== */

/* Caustic light. Low-resolution canvas stretched over the viewport and
   blended, so it lays light across the page without touching contrast much. */
#aquaCaustics{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:2;
  pointer-events:none; opacity:0; transition:opacity 1.2s ease;
  mix-blend-mode:overlay;
}
#aquaCaustics.on{opacity:.55}
:root[data-theme="dark"] #aquaCaustics{mix-blend-mode:soft-light}
:root[data-theme="dark"] #aquaCaustics.on{opacity:.75}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #aquaCaustics{mix-blend-mode:soft-light}
  :root:not([data-theme="light"]) #aquaCaustics.on{opacity:.75}
}
:root[data-aqua="off"] #aquaCaustics{opacity:0 !important}

/* Droplets. backdrop-filter is what makes these read as water: it refracts
   whatever the page has painted behind each bead. */
#aquaDrops{position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden}
.drop{
  position:fixed; display:block; border-radius:52% 48% 47% 53% / 46% 44% 56% 54%;
  pointer-events:none; will-change:transform, opacity;
  -webkit-backdrop-filter:blur(1.4px) brightness(1.08) saturate(1.22);
  backdrop-filter:blur(1.4px) brightness(1.08) saturate(1.22);
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.40) 17%,
                    rgba(255,255,255,.07) 37%, rgba(255,255,255,0) 54%),
    radial-gradient(circle at 64% 76%, rgba(178,232,255,.50) 0%, rgba(178,232,255,0) 44%),
    radial-gradient(circle at 50% 52%, rgba(10,58,94,.14) 58%, rgba(255,255,255,.34) 86%,
                    rgba(255,255,255,.12) 100%);
  box-shadow:
    inset 0 -1.5px 3px rgba(255,255,255,.85),
    inset 0 1.5px 2px rgba(8,38,62,.30),
    inset 0 0 0 .5px rgba(255,255,255,.55),
    0 2px 5px rgba(8,31,51,.26);
}
.drop-ring{
  position:fixed; display:block; width:64px; height:64px; border-radius:50%;
  pointer-events:none; will-change:transform, opacity;
  border:2px solid rgba(44,199,232,.95);
  box-shadow:0 0 20px rgba(44,199,232,.5), inset 0 0 18px rgba(44,199,232,.30);
}
:root[data-aqua="off"] #aquaDrops{display:none}

/* The water control sits beside the theme switch */
#aquaBtn[aria-pressed="true"]{border-color:var(--hydro); color:var(--hydro)}

@media (prefers-reduced-motion:reduce){
  #aquaCaustics,#aquaDrops{display:none !important}
}


/* ==========================================================================
   Scroll-scrubbed process walkthrough
   ========================================================================== */
.pin-track{position:relative}
.pin-track.pinning{height:240vh}
.pin-track.pinning .pin-stage{position:sticky; top:84px}

/* progress through the scrubbed range, so the pinned span is legible */
.flow-prog{
  height:2px; background:var(--line); border-radius:2px;
  overflow:hidden; margin-bottom:16px;
}
.flow-prog i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--hydro), var(--cyan));
}
.pin-track:not(.pinning) .flow-prog{display:none}

/* while scrubbing, a unit the water has not reached sits back */
.pin-track.pinning .unit-g[data-on="0"] .unit-box{opacity:.62}
.pin-track.pinning .unit-g[data-on="0"] .unit-t,
.pin-track.pinning .unit-g[data-on="0"] .unit-k{opacity:.62}
.unit-box,.unit-t,.unit-k{transition:opacity .35s ease}

@media (prefers-reduced-motion:reduce){
  .pin-track.pinning{height:auto}
  .pin-track.pinning .pin-stage{position:static}
}


/* ==========================================================================
   Paper grain — a single tiling texture over the whole document.
   Borrowed technique: an uncoated-stock tooth under everything, which stops
   large flat fields reading as flat screen colour. 48KB, no motion, no cost.
   ========================================================================== */
#grain{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:url("../img/grain.png");
  background-size:200px 200px;
  opacity:.11; mix-blend-mode:multiply;
}
:root[data-theme="dark"] #grain{opacity:.16; mix-blend-mode:overlay}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #grain{opacity:.16; mix-blend-mode:overlay}
}

/* ==========================================================================
   Brochure filmstrip — CSS scroll-snap, no script
   ========================================================================== */
.gal{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:0;
  padding-bottom:14px; scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.gal::-webkit-scrollbar{height:8px}
.gal::-webkit-scrollbar-thumb{background:var(--line); border-radius:100px}
.gal::-webkit-scrollbar-track{background:transparent}
.gal button{
  flex:0 0 clamp(230px, 30vw, 340px);
  scroll-snap-align:start; margin:0;
}
.gal img{aspect-ratio:4/3; object-fit:cover}
.gal-hint{
  font-family:var(--f-mono); font-size:var(--md-label-sm); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:12px;
  display:flex; align-items:center; gap:9px;
}
@media (prefers-reduced-motion:reduce){
  .gal{scroll-snap-type:none}
}


/* ==========================================================================
   Section background planes
   One fixed WebGL water body behind the document; each section lays its own
   ground over it at partial opacity, so the water reads through as a separate
   depth while text contrast stays where it was. Content surfaces stay fully
   opaque and take a soft lift, which is what separates the tabs and cards
   from the water behind them.
   ========================================================================== */
#backdrop{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
  pointer-events:none; opacity:0; transition:opacity 1s ease;
}
#backdrop.on{opacity:1}
:root[data-aqua="off"] #backdrop{opacity:0 !important}

/* Every section floats above the water plane. The light grounds veil it, so
   the water reads through them. The dark panels stay fully opaque and take a
   painted depth wash instead: a translucent dark ground over a light page
   composites to a washed grey-blue whenever the canvas is not rendering — on
   a WebGL failure, or when a visitor switches the water off — and that is a
   real contrast failure, not a theoretical one. Opaque panels cannot break. */
section[data-backdrop]{ z-index:1 }
section[data-backdrop="field"]{ background:var(--veil-field) }
section[data-backdrop="alt"]{ background:var(--veil-alt) }
:root[data-backdrop-live] section[data-backdrop="field"]{ background:var(--veil-field-on) }
:root[data-backdrop-live] section[data-backdrop="alt"]{ background:var(--veil-alt-on) }

section[data-backdrop="panel"].panel{
  background-color:var(--panel);
  background-image:
    radial-gradient(140% 80% at 50% -14%, rgba(44,199,232,.20), transparent 60%),
    radial-gradient(90% 60% at 12% 108%, rgba(12,111,180,.18), transparent 66%),
    linear-gradient(to bottom, rgba(88,174,234,.13), transparent 42%, rgba(2,12,22,.42));
}
.wave{ position:relative; z-index:1 }
.foot{ position:relative; z-index:1; background:var(--bg) }

/* Each control is its own surface now: the groups are open racks, so the water
   runs between them, and every chip is frosted glass that shows it through. */
.seg,.toggle{ background:transparent; box-shadow:none; border:0 }
.chipf{ box-shadow:var(--float) }
.chipf[aria-pressed="true"]{ box-shadow:var(--float-hi); transform:translateY(-2px) }
.stage{ box-shadow:var(--float) }
.stage[aria-pressed="true"]{ box-shadow:var(--float-hi); transform:translateY(-3px) }
.ind,.gal button{
  background:var(--glass); border-color:var(--glass-line); box-shadow:var(--float);
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .2s;
}
.stage-detail,.pid-wrap{ box-shadow:var(--float) }
.hmi,.sim-frame{ box-shadow:var(--float-hi) }

/* the frosting only makes sense while the water is actually running */
:root:not([data-backdrop-live]) :is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button){
  background:var(--bg-alt);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

@media (prefers-reduced-motion:reduce){
  #backdrop{display:none !important}
}

/* ---------------------------------------------------------------- idle float
   The chips and cards don't just sit on the water — they ride it. A 3px bob on
   a long, staggered cycle reads as buoyancy at the edge of perception; hovering
   cancels it so the hover lift is the only movement you're tracking. Off under
   reduced motion and whenever the water itself is off. */
@keyframes ji-bob{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-4px) }
}
:root[data-backdrop-live] :is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button){
  animation:ji-bob 7.5s ease-in-out infinite;
  animation-delay:calc(var(--bob, 0) * -1.1s);
}
:root[data-backdrop-live] :is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):hover,
:root[data-backdrop-live] :is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):focus-visible,
:root[data-backdrop-live] .seg button[aria-selected="true"],
:root[data-backdrop-live] .toggle button[aria-pressed="true"],
:root[data-backdrop-live] .chipf[aria-pressed="true"],
:root[data-backdrop-live] .stage[aria-pressed="true"]{ animation:none }

:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(1){--bob:0}
:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(2){--bob:1}
:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(3){--bob:2}
:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(4){--bob:3}
:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(5){--bob:4}
:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(6){--bob:5}
:is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button):nth-child(n+7){--bob:6}

@media (prefers-reduced-motion:reduce){
  :root[data-backdrop-live] :is(.seg button,.toggle button,.chipf,.stage,.ind,.gal button){ animation:none }
}

/* Integrated retained sections 01, 05 and 06 */
.retained{position:relative;overflow:hidden}.retained .tag{margin-bottom:clamp(30px,5vw,70px)}
.retained-title-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.7fr);gap:clamp(40px,9vw,150px);align-items:end}.retained-title-grid h2,.retained-intro h2,.retained-results h2{font:400 clamp(3.4rem,7.4vw,8.6rem)/.88 var(--font-display);letter-spacing:-.055em}.retained-title-grid p,.retained-intro p{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.7;color:var(--muted)}.retained-rule{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin-top:clamp(60px,9vw,130px);font:600 .65rem/1 var(--font-mono);letter-spacing:.13em}.retained-rule i{height:1px;background:linear-gradient(90deg,var(--line),var(--cyan),var(--green))}
.retained-intelligence{padding-block:clamp(90px,11vw,160px)}.retained-intro{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end}.retained-dashboard{display:grid;grid-template-columns:270px 1fr;margin-top:70px;border:1px solid rgba(150,235,230,.22);background:#061d26}.rd-copy{padding:32px;border-right:1px solid rgba(150,235,230,.18);display:flex;flex-direction:column;gap:10px}.rd-copy>span,.rd-copy>small{font:600 .62rem var(--font-mono);letter-spacing:.12em;color:#7fa2a6}.rd-copy>b{font:600 .6rem var(--font-mono);color:#75e2cb}.rd-copy>b i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#75e2cb;box-shadow:0 0 10px #75e2cb}.rd-copy h3{margin-top:50px;font-size:1rem}.rd-copy>strong{font-size:5.5rem;line-height:.9;color:white}.rd-chart{padding:34px}.rd-chart svg{width:100%;height:180px}.rd-chart path{fill:none;stroke:var(--cyan);stroke-width:4;vector-effect:non-scaling-stroke}.rd-chart>div{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(150,235,230,.18)}.rd-chart span{padding:20px;border-right:1px solid rgba(150,235,230,.18)}.rd-chart span>*{display:block}.rd-chart span b,.rd-chart span small{font:600 .55rem var(--font-mono);color:#7fa2a6}.rd-chart span strong{font-size:1.8rem;color:white;margin:8px 0}.retained-decisions{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid rgba(150,235,230,.2)}.retained-decisions article{padding:30px;border-right:1px solid rgba(150,235,230,.2)}.retained-decisions article>b{font:600 .65rem var(--font-mono);color:var(--cyan)}.retained-decisions h3{margin:28px 0 12px;font-size:1.2rem}.retained-decisions p{color:#89a5a8;line-height:1.6}
.retained-results-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(45px,7vw,110px);align-items:center}.retained-results figure{position:relative;margin:0;min-height:680px;overflow:hidden}.retained-results figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.retained-results figcaption{position:absolute;left:20px;bottom:20px;background:rgba(5,30,39,.8);color:white;padding:10px 13px;font:600 .55rem var(--font-mono);letter-spacing:.1em}.field-kpis{display:grid;grid-template-columns:auto 1fr;gap:10px 25px;margin:55px 0}.field-kpis strong{font-size:4rem;line-height:.9;color:var(--ink)}.field-kpis strong small{font-size:1rem}.field-kpis span{align-self:end;padding-bottom:8px;color:var(--muted)}.quality-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line)}.quality-grid span{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.quality-grid span>*{display:block}.quality-grid b,.quality-grid small{font:600 .58rem var(--font-mono);color:var(--muted)}.quality-grid strong{font-size:2rem;margin:8px 0}.result-note{margin-top:18px;font-size:.78rem;color:var(--muted)}
@media(max-width:820px){.retained-title-grid,.retained-intro,.retained-results-grid{grid-template-columns:1fr}.retained-dashboard{grid-template-columns:1fr}.rd-copy{border-right:0;border-bottom:1px solid rgba(150,235,230,.18)}.retained-decisions{grid-template-columns:1fr}.retained-decisions article{border-right:0;border-bottom:1px solid rgba(150,235,230,.2)}.retained-results figure{min-height:430px}}


/* Content photograph water overlays */
.content-water-fx,.compare-water-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .65s ease;z-index:2}
.content-water-fx.on,.compare-water-fx.on{opacity:1}
.pillar-fig .content-water-fx{border-radius:var(--md-shape-lg)}
.retained-results figure .content-water-fx{z-index:1}
.retained-results figure figcaption{z-index:3}
.compare-water-fx{border-radius:inherit}


/* Floating translucent site direction */
:root{
  --f-display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,monospace;
  --gutter:clamp(18px,4vw,54px);
}
body{font-family:var(--f-body);background:#dcecf5}
.rail{display:none!important}
main{position:relative;z-index:1;padding:28px 0 70px}
section,section[data-backdrop="field"],section[data-backdrop="alt"],:root[data-backdrop-live] section[data-backdrop="field"],:root[data-backdrop-live] section[data-backdrop="alt"],section.panel{background:transparent!important;color:var(--ink);padding-block:18px}
section>.wrap{width:min(1240px,calc(100% - 32px));padding:clamp(38px,6vw,82px) var(--gutter);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:28px;background:color-mix(in srgb,var(--bg-alt) 60%,transparent);box-shadow:0 24px 70px rgba(8,39,62,.16);backdrop-filter:blur(17px) saturate(128%);-webkit-backdrop-filter:blur(17px) saturate(128%)}
section.panel>.wrap{background:color-mix(in srgb,var(--panel) 60%,transparent);color:var(--panel-ink);border-color:rgba(180,220,245,.18);box-shadow:0 26px 75px rgba(1,18,32,.28)}
.hero>.wrap{margin-top:12px}
.wave{display:none}
.nav{background:color-mix(in srgb,var(--bg-alt) 60%,transparent);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.seg button,.toggle button,.chipf,.stage,.ind,.gal button{background:color-mix(in srgb,var(--bg-alt) 60%,transparent)!important;backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(8,39,62,.13)}
.seg button[aria-selected="true"],.toggle button[aria-pressed="true"],.stage[aria-selected="true"],.stage[aria-pressed="true"]{background:color-mix(in srgb,var(--hydro-fill) 82%,transparent)!important;color:var(--on-hydro)}
.static-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.comparison-card{position:relative;margin:0;min-height:500px;border-radius:22px;overflow:hidden;background:var(--panel-raise);box-shadow:0 22px 50px rgba(0,0,0,.22)}
.comparison-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparison-card figcaption{position:absolute;z-index:4;left:18px;right:18px;bottom:18px;padding:17px 18px;border-radius:14px;background:rgba(4,18,31,.64);color:#fff;backdrop-filter:blur(12px)}
.comparison-card figcaption strong,.comparison-card figcaption span{display:block}
.comparison-card figcaption strong{font:700 1.05rem var(--f-display)}
.comparison-card figcaption span{margin-top:5px;font-size:.76rem;line-height:1.45;color:#d7e7f2}
.comparison-card .content-water-fx{border-radius:22px}
.unit-k{font-family:var(--f-body)!important;font-size:9px!important;letter-spacing:-.15px!important;text-transform:none!important}
@media(max-width:760px){.static-comparison{grid-template-columns:1fr}.comparison-card{min-height:390px}section>.wrap{width:min(100% - 20px,1240px);border-radius:22px}}


/* Material 3 expressive typography and atmospheric depth */
:root[data-type="material"]{--f-display:"Roboto Flex","Roboto",sans-serif;--f-body:"Roboto Flex","Roboto",sans-serif;--f-mono:"Roboto Mono",monospace}
:root[data-type="modern"]{--f-display:"Manrope",sans-serif;--f-body:"Manrope",sans-serif;--f-mono:"DM Mono",monospace}
:root[data-type="technical"]{--f-display:"IBM Plex Sans",sans-serif;--f-body:"IBM Plex Sans",sans-serif;--f-mono:"IBM Plex Mono",monospace}
.t-hero{font-size:clamp(4.7rem,9.1vw,9rem);line-height:.86;letter-spacing:-.065em;font-weight:650;max-width:10.4ch;text-wrap:balance}
.t-hero em{display:block;margin-top:.08em;font-size:.82em;letter-spacing:-.055em;font-style:normal;font-weight:760}
.hero-sub{font-size:clamp(1.18rem,1.7vw,1.55rem);line-height:1.45;max-width:46ch}
.hero-grid{gap:clamp(42px,6vw,90px)}
.type-control{position:relative;margin-left:auto}
.type-button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:color-mix(in srgb,var(--bg-alt) 28%,transparent);color:var(--ink);cursor:pointer;font:600 .72rem var(--f-body)}
.type-button span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--hydro);color:white;font:700 .75rem var(--f-display)}
.type-menu{position:absolute;z-index:90;right:0;top:calc(100% + 12px);width:min(330px,86vw);padding:10px;border:1px solid rgba(90,140,170,.26);border-radius:20px;background:color-mix(in srgb,var(--bg-alt) 78%,transparent);box-shadow:0 24px 70px rgba(3,24,40,.28);backdrop-filter:blur(24px) saturate(145%)}
.type-menu p{padding:8px 10px 10px;font:500 .64rem var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.type-menu button{display:block;width:100%;padding:13px 14px;border:0;border-radius:13px;text-align:left;background:transparent;color:var(--ink);cursor:pointer}
.type-menu button:hover,.type-menu button[aria-pressed="true"]{background:color-mix(in srgb,var(--hydro) 13%,transparent)}
.type-menu strong,.type-menu span{display:block}.type-menu strong{font:700 .9rem var(--f-display)}.type-menu span{margin-top:3px;font-size:.7rem;color:var(--muted)}
#atmosphere{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:900px}
.mist{position:absolute;width:62vw;height:62vw;border-radius:50%;filter:blur(55px);opacity:.48;transform:translate3d(var(--mist-x,0),calc(var(--mist-y,0) + var(--mist-scroll,0)),0);will-change:transform}
.mist-a{left:-18vw;top:4vh;background:radial-gradient(circle,rgba(220,248,255,.72),rgba(91,190,224,.18) 42%,transparent 70%);animation:mistFloatA 19s ease-in-out infinite alternate}
.mist-b{right:-20vw;top:30vh;background:radial-gradient(circle,rgba(203,244,239,.62),rgba(60,151,205,.14) 45%,transparent 72%);animation:mistFloatB 24s ease-in-out infinite alternate}
.mist-c{left:25vw;bottom:-35vw;background:radial-gradient(circle,rgba(255,255,255,.6),rgba(106,192,220,.12) 48%,transparent 70%);animation:mistFloatA 28s ease-in-out -8s infinite alternate-reverse}
.atmos-drops>i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s)*1.18);border-radius:52% 48% 57% 43%/58% 52% 48% 42%;background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.78) 0 7%,rgba(217,245,255,.2) 24%,rgba(38,115,160,.14) 63%,rgba(5,45,72,.3) 100%);border:1px solid rgba(220,248,255,.48);box-shadow:inset -3px -4px 8px rgba(5,51,78,.16),inset 2px 2px 5px rgba(255,255,255,.55),0 12px 28px rgba(13,81,120,.16);opacity:calc(.18 + var(--depth)*.18);filter:blur(calc((1.2 - var(--depth))*1.2px));animation:dropDrift var(--d) ease-in-out var(--delay) infinite;will-change:transform}
section>.wrap{background:color-mix(in srgb,var(--bg-alt) 14%,transparent);border-color:rgba(255,255,255,.48);box-shadow:0 28px 90px rgba(7,52,77,.13),inset 0 1px 0 rgba(255,255,255,.48);backdrop-filter:blur(14px) saturate(118%);-webkit-backdrop-filter:blur(14px) saturate(118%)}
section.panel>.wrap{background:color-mix(in srgb,var(--panel) 18%,transparent);backdrop-filter:blur(17px) saturate(120%);-webkit-backdrop-filter:blur(17px) saturate(120%)}
.nav{background:color-mix(in srgb,var(--bg-alt) 24%,transparent)}
.seg button,.toggle button,.chipf,.stage,.ind,.gal button{background:color-mix(in srgb,var(--bg-alt) 18%,transparent)!important}
@keyframes mistFloatA{to{transform:translate3d(calc(var(--mist-x,0px) + 7vw),calc(var(--mist-y,0px) + var(--mist-scroll,0px) + 5vh),40px) scale(1.12)}}
@keyframes mistFloatB{to{transform:translate3d(calc(var(--mist-x,0px) - 8vw),calc(var(--mist-y,0px) + var(--mist-scroll,0px) - 6vh),70px) scale(.9)}}
@keyframes dropDrift{0%,100%{transform:translate3d(0,0,calc(var(--depth)*80px)) rotate(-3deg)}50%{transform:translate3d(18px,-55px,calc(var(--depth)*140px)) rotate(4deg)}}
@media(max-width:760px){.type-button b{display:none}.type-button{padding:5px}.t-hero{font-size:clamp(3.7rem,18vw,6rem)}}
@media(prefers-reduced-motion:reduce){.mist,.atmos-drops>i{animation:none!important}}


/* Legible floating panels over a visible depth atmosphere */
#depthAtmosphere{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.92}
#atmosphere{opacity:.54}
.atmos-drops{display:none}
main{padding-inline:clamp(10px,2.8vw,44px)}
section>.wrap{width:min(1160px,calc(100% - 54px));background:color-mix(in srgb,var(--bg-alt) 66%,transparent);border:1px solid rgba(255,255,255,.74);box-shadow:0 32px 95px rgba(5,46,72,.23),0 8px 24px rgba(5,46,72,.11),inset 0 1px 0 rgba(255,255,255,.85);backdrop-filter:blur(19px) saturate(125%);-webkit-backdrop-filter:blur(19px) saturate(125%)}
section.panel>.wrap{background:color-mix(in srgb,var(--panel) 68%,transparent);border-color:rgba(190,230,248,.27);box-shadow:0 34px 100px rgba(1,20,34,.38),0 9px 28px rgba(1,20,34,.21),inset 0 1px 0 rgba(220,244,255,.13)}
.nav{background:color-mix(in srgb,var(--bg-alt) 68%,transparent);box-shadow:0 8px 30px rgba(7,47,70,.08)}
.seg button,.toggle button,.chipf,.stage,.ind,.gal button{background:color-mix(in srgb,var(--bg-alt) 72%,transparent)!important;box-shadow:0 11px 30px rgba(7,47,70,.16)}
.t-hero{font-size:clamp(4.25rem,7.8vw,7.7rem);line-height:.9;max-width:11.3ch;letter-spacing:-.058em}
.t-hero em{font-size:.86em;line-height:.92}
.t-h2{font-size:clamp(2.35rem,4.5vw,4.35rem);line-height:1.02;letter-spacing:-.035em}
.t-h3{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.18}
.lede,.body-copy{font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.7;max-width:62ch}
section>.wrap{padding-block:clamp(48px,6.5vw,84px)}
.sec-head{margin-bottom:clamp(30px,4.5vw,58px)}
.pillar-body{gap:clamp(30px,5vw,72px)}
@media(max-width:760px){main{padding-inline:0}section>.wrap{width:calc(100% - 20px);padding-inline:22px}.t-hero{font-size:clamp(3.45rem,16vw,5.6rem)}#depthAtmosphere{opacity:.72}}


/* Rain atmosphere experiment — rollback snapshot: /_rollback/condensation-before-rain */
#atmosphere{display:none!important}
#depthAtmosphere{opacity:1;mix-blend-mode:screen}
.rain-pool{position:relative;z-index:2;height:clamp(240px,32vw,420px);padding:0!important;overflow:hidden;background:linear-gradient(180deg,rgba(170,224,240,.08),rgba(7,70,108,.32))!important;border-top:1px solid rgba(205,244,255,.42)}
.rain-pool canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.rain-pool-copy{position:absolute;z-index:2;left:50%;top:22%;transform:translateX(-50%);width:min(720px,88vw);text-align:center;color:#eefaff;text-shadow:0 3px 24px rgba(1,27,46,.55)}
.rain-pool-copy span{display:block;font:500 .66rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.rain-pool-copy strong{display:block;margin-top:10px;font:700 clamp(2.4rem,5.8vw,5.6rem)/.98 var(--f-display);letter-spacing:-.045em}
.foot{position:relative;z-index:3;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--panel-ink);border-top:1px solid rgba(210,245,255,.2)}
.foot p,.foot .fr{color:var(--panel-muted)}


/* Annotation polish: unified typography, alignment, full-width schematics */
:root{--font-display:var(--f-display);--font-mono:var(--f-body)}
body,button,input,select,textarea,main,main *{font-family:var(--f-body)}
:is(.tag,.disclaim,.sim-legend span,.ctl label,.ctl .seg2 button,.pid-hint,.unit-k,.pid-lbl,.scada-t,.gal-hint,.ind .ind-load,.rd-copy>span,.rd-copy>small,.rd-copy>b,.retained-decisions article>b){font-family:var(--f-body)!important;font-weight:600;letter-spacing:.055em}
.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--panel-line);border-left:1px solid var(--panel-line)}
.four div{display:flex;flex-direction:column;justify-content:flex-start;min-height:118px;padding:20px 22px;border-right:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line)}
.four div:last-child{border-right:1px solid var(--panel-line)}
.four :is(h2,h3,h4){margin:0 0 9px;font-size:1rem;line-height:1.25}.four p{margin:0;font-size:.82rem;line-height:1.5}
.retained-intro{grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:44px;align-items:center}
.retained-intro h2{white-space:nowrap;font:600 clamp(2.6rem,4.25vw,4.4rem)/1 var(--f-display);letter-spacing:-.045em}
#industries .t-h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.04em}
.pid-wrap{overflow:hidden!important}
.pid-wrap svg{min-width:0!important;width:100%!important;height:auto!important}
.pid-hint{margin-top:14px}
.sim-frame{position:relative;background:linear-gradient(180deg,#06263a,#031a2a);border:1px solid rgba(96,209,238,.34);box-shadow:inset 0 0 80px rgba(23,152,190,.08),0 20px 50px rgba(2,24,39,.26)}
.sim-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 18%,rgba(149,229,247,.055) 38%,transparent 54%);mix-blend-mode:screen}
.sim-legend{gap:18px}.sim-legend span{font-size:.62rem;text-transform:none;color:#b4d5e2}
.ctl label,.ctl .seg2 button{font-size:.65rem;text-transform:none;color:#b4d5e2}
.rain-pool-copy{top:20%}.rain-pool-copy strong{font-size:clamp(3rem,6.4vw,6.4rem)}
@media(max-width:820px){.retained-intro{grid-template-columns:1fr}.retained-intro h2{white-space:normal}.four{grid-template-columns:1fr}.four div{min-height:auto}}

#intelligence .retained-intro h2{font-size:clamp(2rem,3vw,3.1rem);line-height:1.06}


/* Responsive width, unified type, side-view interactive collection */
html[data-inertial="on"]{scroll-behavior:auto!important}
body *{font-family:var(--f-body)!important}
.tag{display:none!important}
main{padding-inline:clamp(6px,1.4vw,22px)}
section>.wrap{width:min(1280px,calc(100% - 28px));max-width:1280px}
.rain-pool{height:clamp(190px,23vw,300px);margin-top:-1px;clip-path:polygon(0 11%,5% 8%,10% 12%,16% 6%,23% 10%,31% 5%,39% 11%,47% 7%,55% 12%,63% 6%,72% 10%,81% 5%,90% 11%,96% 7%,100% 10%,100% 100%,0 100%);border-top:0!important;background:transparent!important;cursor:crosshair}
.rain-pool-copy{top:36%;pointer-events:none}.rain-pool-copy strong{font-size:clamp(2.5rem,5vw,5rem);text-shadow:0 4px 28px rgba(0,30,50,.56)}
.foot{background:#e4f3f8!important;color:#17384c!important;border-top:1px solid rgba(20,100,140,.15)}
.foot p,.foot .fr{color:#456779!important}.foot img{filter:none}
@media(min-width:1600px){section>.wrap{max-width:1400px;width:calc(100% - 6vw)}}
@media(max-width:1024px){section>.wrap{width:calc(100% - 24px);padding-inline:clamp(28px,5vw,52px)}.nav-links{gap:16px}}
@media(max-width:640px){main{padding-inline:0}section>.wrap{width:calc(100% - 12px);padding-inline:20px;border-radius:20px}.rain-pool{height:190px;clip-path:polygon(0 10%,12% 5%,24% 12%,38% 6%,52% 11%,67% 4%,82% 12%,100% 7%,100% 100%,0 100%)}.foot-in{justify-content:center;text-align:center}.foot .fr{margin-left:0;width:100%}}

/* Visual editing and revised interactive water */
.rain-pool{clip-path:none;height:clamp(210px,25vw,320px);will-change:clip-path}.rain-pool:before{display:none}.ve-toggle{position:fixed;z-index:9998;right:18px;bottom:18px;border:0;border-radius:999px;padding:13px 18px;background:#087ab8;color:#fff;font:700 13px var(--f-body);box-shadow:0 12px 34px rgba(0,45,75,.3);cursor:pointer}.ve-bar{display:none;position:fixed;z-index:9999;left:12px;right:12px;bottom:12px;align-items:center;gap:8px;padding:10px 12px;border-radius:18px;background:rgba(4,28,45,.92);color:white;box-shadow:0 18px 60px rgba(0,0,0,.35);backdrop-filter:blur(18px);overflow-x:auto}.ve-bar.on{display:flex}.ve-bar button{white-space:nowrap;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.08);color:white;cursor:pointer}.ve-bar label{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px}.ve-bar input{width:75px}.visual-editing .ve-toggle{bottom:76px}.visual-editing main>section{cursor:grab}.visual-editing main>section.ve-selected{outline:2px solid #11b8ef;outline-offset:-4px}.visual-editing main>section.ve-selected:after{content:'Drag to reorder';position:absolute;z-index:20;right:22px;top:22px;padding:7px 10px;border-radius:8px;background:#087ab8;color:white;font:700 11px var(--f-body)}.visual-editing [contenteditable=true]{outline:1px dashed #13b8ee;background:rgba(255,255,255,.16)}main>section>.wrap{width:min(1280px,var(--ve-width,calc(100% - 28px)))}main>section{font-size:var(--ve-font,100%)}@media(max-width:700px){.ve-bar{flex-wrap:nowrap}.ve-toggle{right:10px;bottom:10px}.rain-pool{height:220px}}
/* Final contact, editor and unified water refinements */
.cdetails{gap:0!important}.cd{padding:14px 0!important;min-height:0!important}.cd+.cd{margin-top:0!important}.enquiry-recipient{font-size:.72rem;color:var(--muted)}.visitor-count{font-size:.7rem;color:#456779;white-space:nowrap}.ve-bar{left:auto;right:16px;top:82px;bottom:auto;width:min(300px,calc(100vw - 24px));max-height:calc(100vh - 105px);display:none;flex-direction:column;align-items:stretch;overflow:auto;padding:16px}.ve-bar.on{display:flex}.ve-bar header{display:flex;justify-content:space-between;align-items:center}.ve-bar header button{font-size:20px;padding:2px 9px}.ve-bar>p{font-size:11px;line-height:1.45;color:#b8d5e5}.ve-bar>label{justify-content:space-between;padding:7px 0}.ve-bar>label input{width:128px}.ve-bar>div{display:flex;gap:7px}.ve-move,.ve-size{display:none;position:absolute;z-index:9997;border:0;background:#0788c8;color:#fff;box-shadow:0 7px 20px rgba(0,54,85,.28);cursor:grab}.ve-move{width:96px;padding:7px;border-radius:999px;font:700 11px var(--f-body)}.ve-size{width:26px;height:26px;border-radius:7px;cursor:nwse-resize}.ve-size:before{content:'↘';font-size:16px}.visual-editing main>section.ve-selected:after{display:none}.visual-editing main>section>.wrap{transition:none!important}main>section>.wrap{max-width:none}.rain-pool{background:#0b5368!important}.rain-pool canvas{background:#0b5368}@media(max-width:700px){.foot-in{gap:8px}.visitor-count{width:100%;text-align:center}.ve-bar{top:70px;right:8px}}
/* Transparent brand mark and perspective ripple refinement */
.brand img{width:48px!important;height:48px!important;object-fit:contain}.foot img{width:42px!important;height:42px!important;object-fit:contain}.contact-grid{gap:clamp(28px,4vw,64px)}@media(max-width:700px){.brand img{width:40px!important;height:40px!important}.foot img{width:36px!important;height:36px!important}}
.foot img{background:#0d2633;border-radius:11px;padding:5px;box-sizing:content-box}

/* Production header mark visibility */
.brand{display:grid!important;place-items:center;width:56px;height:56px;border-radius:14px;background:#0d2633;box-shadow:0 6px 18px rgba(2,30,48,.18)}.brand img{width:44px!important;height:44px!important}.nav-in{grid-template-columns:auto 1fr auto auto!important}@media(max-width:700px){.brand{width:46px;height:46px;border-radius:11px}.brand img{width:36px!important;height:36px!important}}

/* White papers carousel */
.wp-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}.wp-head .body-copy{margin-top:12px}.wp-carousel{position:relative}.wp-viewport{overflow:hidden}.wp-track{display:flex;gap:16px;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform}.wp-card{flex:0 0:calc((100% - 32px)/3);min-height:330px;padding:clamp(24px,3vw,38px);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:22px;background:color-mix(in srgb,var(--bg-alt) 76%,transparent);box-shadow:0 18px 45px rgba(4,45,70,.11);display:flex;flex-direction:column}.wp-card>span{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--hydro)}.wp-card h3{margin:28px 0 16px;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.18}.wp-card p{color:var(--muted);line-height:1.65}.wp-card a{margin-top:auto;padding-top:28px;color:var(--hydro);font-weight:700;text-decoration:none}.wp-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}.wp-controls>button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--bg-alt);color:var(--ink);cursor:pointer}.wp-dots{display:flex;gap:7px}.wp-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 20%,transparent);cursor:pointer}.wp-dots button[aria-current=true]{width:25px;border-radius:5px;background:var(--hydro)}@media(max-width:1050px){.wp-card{flex-basis:calc((100% - 16px)/2)}}@media(max-width:680px){.wp-head{align-items:flex-start;flex-direction:column}.wp-card{flex-basis:100%;min-height:300px}.wp-track{gap:16px}}

@media(max-width:1050px){#white-papers .wp-card{flex:0 0 calc((100% - 16px)/2)!important}}@media(max-width:680px){#white-papers .wp-card{flex:0 0 100%!important}#white-papers .wrap{padding-inline:18px}.wp-card h3{font-size:1.45rem}.wp-card p{font-size:.92rem}}

/* Four-card white-paper carousel and persistent header wordmark */
.brand{display:flex!important;align-items:center!important;gap:11px!important;width:auto!important;height:auto!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:#0d2633;box-shadow:0 6px 18px rgba(2,30,48,.18);flex:none}.brand-mark img{width:40px!important;height:40px!important}.brand-name{font-family:var(--f-body);font-size:1rem;font-weight:800;letter-spacing:.025em;color:var(--ink);line-height:1}[data-theme=dark] .brand-name{color:#eef8ff}.wp-card{flex:0 0 calc((100% - 48px)/4)!important;min-height:350px;padding:clamp(20px,2vw,30px)}.wp-card h3{font-size:clamp(1.22rem,1.55vw,1.58rem)}@media(max-width:1250px){#white-papers .wp-card{flex-basis:calc((100% - 32px)/3)!important}}@media(max-width:900px){#white-papers .wp-card{flex-basis:calc((100% - 16px)/2)!important}.brand-name{font-size:.9rem}}@media(max-width:680px){#white-papers .wp-card{flex-basis:100%!important}.brand{gap:7px!important}.brand-mark{width:40px;height:40px;border-radius:10px}.brand-mark img{width:32px!important;height:32px!important}.brand-name{font-size:.78rem;letter-spacing:.01em}.nav-in{gap:9px!important}}@media(max-width:380px){.brand-name{max-width:52px;white-space:normal;line-height:1.05}.brand-mark{width:36px;height:36px}.brand-mark img{width:29px!important;height:29px!important}}

/* Mobile hero-water and closing-water visibility */
@media(max-width:680px){
  .hero-media{height:clamp(270px,76vw,330px)!important;min-height:270px;border-radius:20px;isolation:isolate;touch-action:pan-y}
  .hero-media img{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center center}
  .hero-media canvas,.hero-media svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;visibility:visible!important}
  #heroWater{z-index:2;opacity:1!important}#heroFx{z-index:3}#heroNet{z-index:4}
  .rain-pool{height:clamp(270px,74vw,320px)!important;min-height:270px!important;touch-action:pan-y;background:linear-gradient(180deg,#20a9bd 0%,#08718d 42%,#032944 100%)!important}
  .rain-pool canvas{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;height:100%!important}
  .rain-pool-copy{z-index:3}
}