/* ============================================================
   SUZLON 2.0 — SUSTAINABILITY EXPERIENCE
   ------------------------------------------------------------
   One design system, three grounds ("tones"):
     ink   — cinematic teal-black   (world map, S144, closing)
     teal  — Ever Teal              (energy transition, ESG)
     beige — Humble Beige           (impact, scale, recognition, resgen)

   Every section declares data-tone; the tone block below re-points
   the SAME semantic tokens (--ground/--ink/--dim/--rule/--accent),
   so components are written once and inherit the right palette.

   Prime Yellow is the accent on dark grounds; on Humble Beige it
   would sit at ~1.4:1 and be illegible, so beige uses Ever Teal as
   its accent. Yellow therefore marks the live state on 5 of the 9
   sections and is never used as body text.
   ============================================================ */

@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  /* ---- brand ---- */
  --teal:#007078;            /* Ever Teal    */
  --yellow:#FFC600;          /* Prime Yellow */
  --beige:#F8F4E1;           /* Humble Beige */
  --teal-deep:#00565C;
  --teal-black:#041416;      /* cinematic ground, derived from Ever Teal */
  --ink-dark:#06282B;        /* type colour on light grounds */

  /* ---- semantic (re-pointed per tone) ---- */
  --ground:var(--teal-black);
  --ink:var(--beige);
  --dim:rgba(248,244,225,.64);
  --faint:rgba(248,244,225,.42);
  --rule:rgba(248,244,225,.16);
  --accent:var(--yellow);

  /* ---- type ---- */
  --display-font:Monda,Tahoma,system-ui,sans-serif;
  --body-font:Tahoma,system-ui,sans-serif;
  --t-metric:clamp(4.2rem,13vw,10.5rem);
  --t-h2:clamp(1.85rem,4.1vw,3rem);
  --t-h3:clamp(1.28rem,2.7vw,1.95rem);
  --t-body:clamp(1rem,1.3vw,1.12rem);
  --t-meta:.74rem;

  /* ---- rhythm ---- */
  --s1:.5rem; --s2:1rem; --s3:1.75rem; --s4:3rem; --s5:5rem;
  --maxw:1180px;

  /* ---- motion: one language everywhere ---- */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --d-fast:.35s; --d:.6s; --d-slow:.95s;
}

/* ---- tone grounds ---------------------------------------------------- */
[data-tone="ink"]{
  --ground:var(--teal-black); --ink:var(--beige);
  --dim:rgba(248,244,225,.64); --faint:rgba(248,244,225,.42);
  --rule:rgba(248,244,225,.16); --accent:var(--yellow);
}
[data-tone="teal"]{
  --ground:var(--teal); --ink:var(--beige);
  --dim:rgba(248,244,225,.78); --faint:rgba(248,244,225,.56);
  --rule:rgba(248,244,225,.24); --accent:var(--yellow);
}
[data-tone="beige"]{
  --ground:var(--beige); --ink:var(--ink-dark);
  --dim:rgba(6,40,43,.68); --faint:rgba(6,40,43,.45);
  --rule:rgba(6,40,43,.16); --accent:var(--teal);
}
[data-tone]{background:var(--ground);color:var(--ink)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--teal-black);
  color:var(--beige);
  font-family:var(--body-font);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--yellow);color:#1a1400}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* very light grain — atmosphere without texture noise on light grounds */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-tone="beige"]::after{opacity:.018}

/* =====================================================
   TYPE SCALE
   ===================================================== */
.eyebrow{
  font-family:var(--body-font);font-weight:600;font-size:var(--t-meta);
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
[data-tone="beige"] .eyebrow{color:var(--teal);opacity:.85}
h1,h2,h3{font-family:var(--display-font);font-weight:800;line-height:1.04;letter-spacing:-.025em;color:var(--ink)}
h2{font-size:var(--t-h2);text-wrap:balance}
h3{font-size:var(--t-h3)}
.lede{font-size:var(--t-body);color:var(--dim);max-width:44ch;text-wrap:pretty}

/* =====================================================
   FIXED CHROME — adapts to the tone under it
   ===================================================== */
/* aligned to the same gutter the hero copy uses, so it reads as part of the
   composition rather than a floating widget */
.brand-mark{position:fixed;top:24px;left:max(24px,6vw);z-index:20;display:block;line-height:0}
.brand-mark img{width:clamp(92px,9vw,122px);height:auto;display:block}
/* The supplied wordmark is white-only and would vanish on Humble Beige. Rather
   than boxing it in a chip, the same asset is used as a MASK and painted in Ever
   Teal: the file is untouched, the container is gone, and the mark sits in the
   palette like everything else. */
body[data-tone="beige"] .brand-mark img{visibility:hidden}
body[data-tone="beige"] .brand-mark::after{content:"";position:absolute;inset:0;
  background:var(--teal);
  -webkit-mask:url("../img/suzlon-logo-white.png") no-repeat center/contain;
  mask:url("../img/suzlon-logo-white.png") no-repeat center/contain}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:21;background:rgba(127,127,127,.16)}
.progress .fill{height:100%;width:0;background:var(--yellow);transition:width .1s linear}

/* ITEM 2 · the thread. A single hairline that rides down the left margin across
   the whole document; --accent is tone-scoped, so it turns teal on beige and
   yellow on ink without a line of JS. */
.thread{position:fixed;left:max(1.5vw,15px);top:0;bottom:0;width:1px;z-index:20;
  pointer-events:none;background:linear-gradient(180deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent)}
.thread i{position:absolute;left:-1px;top:0;width:3px;height:74px;border-radius:2px;
  background:var(--accent);opacity:.9;will-change:transform;
  transition:background .55s var(--e-out)}
@media(max-width:900px){ .thread{display:none} }

/* ITEM 8 · odometer. Each digit is a column rolling through two revolutions to
   its value, so the figure assembles instead of counting. Non-digits are static. */
/* Measured, not guessed: at this face and weight a digit's ink is .673em above
   the baseline and .018em below it (.69em total). The slot is .78em — just enough
   clearance that exactly ONE digit is ever inside the window, which is what makes
   the roll read as an odometer rather than as sliding text. --od-shift trims the
   baseline so the figure sits exactly where it did before. */
:root{--od-slot:.78em; --od-step:1.06em}
/* The STEP between digits on the strip is larger than the WINDOW, so one digit
   clears the window before the next enters. With step == window you always see
   two half-digits at once, which at 168px reads as garble rather than as a
   wheel. */
.od-c{display:inline-block;overflow:hidden;height:var(--od-slot);
  vertical-align:baseline;margin-bottom:-.018em}
.od-s{display:block;will-change:transform}
.od-s b{display:block;height:var(--od-step);line-height:var(--od-step);
  font-weight:inherit;text-align:center}
.od-p{display:inline-block;vertical-align:baseline;line-height:1}

.tour-btn{position:fixed;right:24px;bottom:24px;z-index:22;display:none!important;align-items:center;gap:.55rem;
  padding:.72rem 1.15rem;border:1px solid var(--rule);border-radius:999px;cursor:pointer;
  background:var(--teal-black);color:var(--beige);
  font-family:var(--body-font);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast),color var(--d-fast)}
.tour-btn .ico{width:0;height:0;border-left:8px solid var(--yellow);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.tour-btn.playing .ico{width:8px;height:9px;border:0;background:var(--yellow)}
.tour-btn:hover{border-color:var(--yellow)}
body[data-tone="beige"] .tour-btn{background:var(--teal);border-color:rgba(248,244,225,.3)}

.tour-mute{position:fixed;right:24px;bottom:78px;z-index:22;width:36px;height:36px;border-radius:50%;
  display:none!important;place-items:center;cursor:pointer;font-size:.95rem;
  border:1px solid var(--rule);background:var(--teal-black);color:var(--beige);
  transition:background var(--d-fast) var(--e-out),opacity var(--d-fast)}
.tour-mute.muted{opacity:.5}
body[data-tone="beige"] .tour-mute{background:var(--teal);border-color:rgba(248,244,225,.3)}

.scroll-hint{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:6;
  font-size:var(--t-meta);letter-spacing:.28em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:.7rem;transition:opacity var(--d) var(--e-out)}
.scroll-hint span{display:block;width:1px;height:34px;background:linear-gradient(var(--accent),transparent)}

/* =====================================================
   01 · GLOBAL PRESENCE — flat dotted map, camera pull-back
   The MAP is the hero. Copy is confined to a bottom-left band and
   never overlays the geography; the headline resolves last and is
   deliberately not display-scale.
   ===================================================== */
.world{position:relative}
.world-stage{position:relative;height:100vh;overflow:hidden;
  background:radial-gradient(125% 95% at 50% 40%,#072a2e 0%,var(--teal-black) 68%)}
#worldCanvas{position:absolute;inset:0;display:block}

.world-eyebrow{position:absolute;left:6vw;top:15vh;z-index:4;pointer-events:none}

/* the copy band — under the map, out of the geography's way */
.world-copy{position:absolute;left:6vw;bottom:10vh;z-index:4;pointer-events:none;
  max-width:min(86vw,42rem)}
.world-count{font-family:var(--display-font);font-weight:600;
  font-size:clamp(.95rem,1.7vw,1.22rem);color:var(--dim);opacity:0}
.world-count b{color:var(--accent);font-weight:800}
.world-headline{margin-top:.55rem;font-size:clamp(1.75rem,4vw,3.2rem);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);opacity:0;text-wrap:balance}

/* optional regional read-out — only armed after the sequence resolves */
/* The opening anchor's halo and pulse are CSS layers riding on the marker rather
   than canvas gradients, so nothing is allocated per frame. Both are positioned
   with transform only — no layout writes in the draw loop. */
.world-glow{position:absolute;left:0;top:0;z-index:1;width:1px;height:1px;
  pointer-events:none;opacity:0;will-change:transform,opacity}
.world-glow::before{content:"";position:absolute;left:-190px;top:-190px;width:380px;height:380px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,198,0,.13) 0%,rgba(0,132,142,.13) 42%,transparent 72%)}
.world-pulse{position:absolute;left:0;top:0;z-index:3;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity;
  animation:wPulse 3s var(--e-out) infinite}
@keyframes wPulse{
  0%{box-shadow:0 0 0 0 rgba(255,198,0,.42)}
  70%{box-shadow:0 0 0 24px rgba(255,198,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,198,0,0)}}

.world-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;
  padding:.26rem .6rem;border-radius:4px;background:rgba(4,20,22,.92);
  border:1px solid var(--rule);font-family:var(--body-font);font-weight:600;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;transform:translate(-50%,-100%);transition:opacity .2s ease}

/* =====================================================
   SEQUENCE SHELL — shared by Impact / Transition / Scale / ESG
   One layout, one rhythm, one rail. Sections differ only in stage.
   ===================================================== */
.seq{position:relative}
.seq-inner{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(1.2rem,3.2vh,2.6rem);
  max-width:var(--maxw);margin:0 auto;padding:9vh 6vw;text-align:center}
.seq-head{max-width:min(92vw,44rem)}
.seq-head h2{margin-top:.55rem}
.seq-stage{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.8rem,2.2vh,1.6rem);min-height:clamp(300px,48vh,500px)}

/* the rail: 01 ─ 02 ─ 03 — subtle, never navigation-heavy */
.seq-rail{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px)}
.seq-dot{position:relative;appearance:none;background:none;border:0;padding:.45rem .1rem .7rem;
  font-family:var(--body-font);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  color:var(--faint);cursor:pointer;transition:color var(--d) var(--e-out)}
.seq-dot::after{content:"";position:absolute;top:50%;left:100%;height:1px;
  width:clamp(14px,3vw,30px);background:var(--rule)}
.seq-dot:last-of-type::after{display:none}
.seq-dot::before{content:"";position:absolute;left:50%;bottom:.15rem;width:0;height:2px;
  transform:translateX(-50%);background:var(--accent);border-radius:1px;transition:width var(--d) var(--e-out)}
.seq-dot.done{color:var(--dim)}
.seq-dot.on{color:var(--accent)}
.seq-dot.on::before{width:16px}
.seq-dot:hover{color:var(--dim)}
.seq-dot.on:hover{color:var(--accent)}
.seq-dot:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:3px}
.seq-rail-unit{font-family:var(--body-font);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  color:var(--faint)}

/* =====================================================
   BIG METRIC — Impact at Scale + ESG (one figure at a time)
   ===================================================== */
/* the anchored slot: the whole state exits and the next enters in place */
.bm-group{display:flex;flex-direction:column;align-items:center;width:100%;
  will-change:opacity,transform}
/* the section heading is deliberately quiet here — it is context, not a headline
   competing with the figure */
.impact .seq-head{max-width:min(92vw,34rem)}
.impact .seq-head h2{margin-top:.4rem;font-size:clamp(1.08rem,1.85vw,1.4rem);font-weight:600;
  line-height:1.3;letter-spacing:-.01em;color:var(--dim)}
.impact .seq-stage{gap:clamp(1rem,3vh,2rem)}
.impact .bm-label{margin-top:clamp(1.8rem,4.5vh,3rem)}
.big-metric{display:flex;align-items:baseline;justify-content:center;gap:.16em;line-height:.84}
/* ITEM 7 — the clip the figure rises out of. Padding gives the glyphs headroom
   so ascenders are never shaved; the matching negative margin keeps the box the
   same size it was, so nothing in the layout moves. */
.bm-clip{display:inline-block;overflow:hidden;vertical-align:baseline;
  padding:.14em .08em .06em;margin:-.14em -.08em -.06em}
.bm-num{display:inline-block;font-family:var(--display-font);font-weight:800;
  font-size:var(--t-metric);letter-spacing:-.055em;color:var(--ink);
  font-variant-numeric:tabular-nums;will-change:transform,opacity}
.bm-num.is-text{font-size:clamp(2rem,6.4vw,4.6rem);letter-spacing:-.03em;line-height:1.02;
  max-width:14ch;text-wrap:balance}
.bm-unit{font-family:var(--display-font);font-weight:800;
  font-size:clamp(1.3rem,3.2vw,2.6rem);color:var(--accent);letter-spacing:-.01em}
/* display-face label in a <p>: needs its own line-height, or it inherits the
   1.55 body leading and falls apart the moment it wraps to two lines */
.bm-label{margin-top:var(--s3);font-family:var(--display-font);font-weight:600;
  font-size:var(--t-h3);line-height:1.16;letter-spacing:-.015em;color:var(--ink);
  max-width:min(92vw,30rem);text-wrap:balance;will-change:opacity,transform}
.bm-note{font-size:var(--t-body);color:var(--dim);max-width:min(92vw,32rem);
  text-wrap:pretty;will-change:opacity,transform}

/* =====================================================
   03 · THE ENERGY TRANSITION — asymmetric, visual-dominant
   Deliberately NOT the centred template Impact uses: copy left,
   the beat's own visual right, everything left-aligned.
   ===================================================== */
.transition .seq-inner{align-items:flex-start;text-align:left}
.transition .seq-rail{justify-content:flex-start}
.tr-eyebrow{color:var(--accent)}

.tr-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(1.8rem,5vw,4.5rem);width:100%;
  min-height:clamp(330px,52vh,520px);text-align:left}
.tr-text{will-change:opacity,transform}
.tr-kicker{font-family:var(--body-font);font-weight:600;font-size:var(--t-meta);
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.tr-title{margin-top:var(--s2);max-width:20ch;text-wrap:balance}
.tr-note{margin-top:var(--s2);font-size:var(--t-body);color:var(--dim);
  max-width:38ch;text-wrap:pretty}

.tr-metrics{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;
  margin-top:var(--s3);gap:0}
.tr-metrics li{padding-right:clamp(1.2rem,3vw,2.4rem);text-align:left}
.tr-metrics li[hidden]{display:none}
.tr-metrics li+li{border-left:1px solid var(--rule);padding-left:clamp(1.2rem,3vw,2.4rem)}
.tr-metrics .v{font-family:var(--display-font);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.5rem);
  line-height:1;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-metrics .u{font-size:.46em;color:var(--accent);margin-left:.12em}
.tr-metrics .l{display:block;margin-top:.5rem;font-size:.82rem;line-height:1.35;
  color:var(--dim);max-width:20ch}

/* ---- the beat visuals ---- */
.tr-visual{position:relative;width:100%;display:grid;place-items:center;
  min-height:clamp(230px,38vh,340px);will-change:opacity,transform}
/* the common motif: the same dot grammar the world map uses, sitting under all
   three beats so flow → scale → transformation reads as one system */
.tr-visual::before{content:"";position:absolute;inset:-8% -4%;pointer-events:none;
  color:var(--ink);opacity:.1;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 28%,transparent 76%);
  mask-image:radial-gradient(ellipse at center,#000 28%,transparent 76%)}
.tv{width:100%;position:relative;z-index:1}
.tv[hidden]{display:none}
.tv svg{width:100%;height:auto;display:block;overflow:visible}

/* 01 renewable — a wind field: dim continuous streamlines, plus a bright pulse
   travelling along the same paths */
.tv-flow .flb path{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.15;stroke-linecap:round}
.tv-flow .flr path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:.5;
  stroke-dasharray:64 336;animation:flDrift 5.4s linear infinite;
  animation-delay:calc(var(--i) * -0.42s)}
.tv-flow .flr path:nth-child(4n+1){stroke:var(--accent);opacity:.85}
@keyframes flDrift{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}

/* 02 adoption — one machine becomes a field, spreading outward */
.tv-field .tb{stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;fill:none;opacity:0}
.tv-field.is-on .tb{animation:tbIn .5s var(--e-out) both;animation-delay:var(--d)}
.tv-field .tb{stroke-width:1.6}
.tv-field .tb:nth-child(23){stroke:var(--accent)}
@keyframes tbIn{from{opacity:0}to{opacity:.62}}

/* 03 decarbonization — the hard-to-abate mass, to scale against itself */
.tv-mass{display:flex;flex-direction:column;justify-content:center}
/* column chart: equal columns sharing one baseline, heights scaled to the peak */
.mg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
  gap:clamp(.7rem,2.2vw,1.9rem);height:clamp(190px,34vh,310px);
  border-bottom:1px solid var(--rule);padding-bottom:.7rem}
.mg-col{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.5rem;min-width:0}
.mg-v{font-family:var(--display-font);font-weight:800;font-size:clamp(.92rem,1.55vw,1.22rem);
  color:var(--ink);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
/* the unit only — .mg-n is the counting figure and must keep full size */
.mg-v span:not(.mg-n){font-size:.6em;color:var(--dim);margin-left:.16em;font-weight:600}
.mg-n{font-variant-numeric:tabular-nums}
.mg-bar{display:flex;align-items:flex-end;justify-content:center}
/* only the peak carries Prime Yellow — the rest stay beige so it keeps its meaning */
.mg-bar i{display:block;width:100%;max-width:3.4rem;height:0;border-radius:5px 5px 2px 2px;
  background:var(--ink);opacity:.42}
.mg-col.is-peak .mg-bar i{background:var(--accent);opacity:.95}
.mg-l{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  text-align:center;overflow-wrap:anywhere}
.tv-mass.is-on .mg-bar i{animation:mgGrow .95s var(--e-out) both;
  animation-delay:calc(var(--i) * 0.14s + 0.2s)}
/* the 1.5% overshoot is what stops four bars reading as one mechanical sweep */
@keyframes mgGrow{
  from{height:0}
  78%{height:calc(var(--h) * 1.015)}
  to{height:var(--h)}
}

@media(max-width:640px){
  .mg{gap:.55rem;height:clamp(160px,28vh,230px)}
  .mg-l{font-size:.55rem;letter-spacing:.08em}
}

.tr-outro{margin-top:var(--s2);font-family:var(--display-font);font-weight:800;
  font-size:var(--t-h3);color:var(--ink);opacity:0;letter-spacing:-.02em}

@media(prefers-reduced-motion:reduce){
  .tv-flow .fl{animation:none;stroke-dasharray:none}
  .tv-field.is-on .tb{animation:none;opacity:.62}
  .tv-mass.is-on .mg-bar i{animation:none;height:var(--h)}
}

/* =====================================================
   04 · S144 MOTION + KPI SEQUENCE — 2-column, no turbine
   ===================================================== */
.s144-hero{position:relative;color:var(--cream);overflow:hidden;
  background:radial-gradient(100% 120% at 18% 50%,#093239 0%,var(--teal-black) 74%)}
/* full-width dot grid atmosphere — extends across the whole section */
.s144-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(248,244,225,.22) 1px,transparent 1px);
  background-size:18px 18px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 72%);opacity:.18}
.s144-inner{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8vh 7vw 5vh}
/* 2-column: copy left, KPI panel right, accent divider via panel border */
.s144-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(2.5rem,6vw,7rem);min-height:72vh}
.s144-copy{position:relative;z-index:3;max-width:28rem;grid-column:1;grid-row:1;
  opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.s144-visual{position:absolute;inset:0;z-index:1;pointer-events:none}
.s144-copy.is-entered{opacity:1;transform:translateY(0)}
.s144-copy h2{margin:.55rem 0;font-size:clamp(2.35rem,5vw,4.8rem);line-height:.96;color:var(--cream)}
.s144-lede{max-width:28ch;color:rgba(248,244,225,.7)}
.s144-status{margin-top:2rem;font-size:.62rem;letter-spacing:.24em;color:var(--accent)}
/* vertical accent divider — replaces the turbine column */
.s144-panel{position:relative;z-index:3;
  border-left:2px solid rgba(255,198,0,.45);
  padding:2rem 0 2rem 2.6rem;min-height:240px;
  display:flex;flex-direction:column;justify-content:center}
.s144-panel .eyebrow:empty { display: none; }
.s144-panel h3{margin:.8rem 0;font-size:clamp(1.55rem,2.6vw,2.4rem);line-height:1.02;color:var(--cream);margin-top:1rem}
.s144-panel>p:last-of-type{max-width:26ch;color:rgba(248,244,225,.65)}
/* radial glow behind KPI number */
.s144-kpi{position:relative;display:flex;align-items:baseline;gap:.35rem;
  min-height:5.5rem;padding-top:clamp(.55rem,1.2vw,1.15rem);color:var(--accent)}
.s144-kpi::before{content:"";position:absolute;left:-18%;top:-24%;width:140%;height:160%;
  background:radial-gradient(ellipse at 30% 50%,rgba(0,112,120,.14) 0%,rgba(255,198,0,.06) 40%,transparent 72%);
  pointer-events:none;opacity:0;transition:opacity .65s ease}
.s144-stage[data-step="1"] .s144-kpi::before,
.s144-stage[data-step="2"] .s144-kpi::before,
.s144-stage[data-step="3"] .s144-kpi::before{opacity:1}
.s144-kpi strong{font-family:var(--display-font);font-size:clamp(4rem,8vw,7.5rem);line-height:.8;letter-spacing:-.07em}
.s144-kpi span{font-family:var(--display-font);font-size:1rem;color:var(--cream)}
.s144-kpi-empty{font-size:1rem!important;letter-spacing:.2em;color:var(--accent)}
/* step counter micro-indicator */
.s144-step-counter{margin-top:.6rem;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(248,244,225,.38);transition:color .35s ease}
.s144-stage[data-step]:not([data-step="0"]) .s144-step-counter{color:rgba(248,244,225,.55)}
/* equivalents row — real-world impact context beneath the KPI */
.s144-equivalents{margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(248,244,225,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .15s,transform .5s ease .15s}
.s144-equivalents.is-visible{opacity:1;transform:translateY(0)}
.s144-equivalents .s144-eq{display:flex;align-items:baseline;gap:.35rem}
.s144-equivalents .eq-v{font-family:var(--display-font);font-weight:800;
  font-size:.88rem;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.s144-equivalents .eq-l{font-size:.72rem;color:rgba(248,244,225,.5);line-height:1.35}
/* rail positioning */
.s144-hero .seq-rail{position:relative;z-index:4;justify-content:flex-start;margin-top:1rem}
.s144-hero .seq-dot{color:rgba(248,244,225,.55)}.s144-hero .seq-dot.on{color:var(--accent)}

/* =====================================================
   05 · SCALE — four fixed MW states
   ===================================================== */
.scale-mw{display:flex;flex-direction:column;align-items:center;gap:.1em}
.mw-num{display:inline-block;font-family:var(--display-font);font-weight:800;
  font-size:var(--t-metric);line-height:.84;letter-spacing:-.055em;color:var(--ink);
  font-variant-numeric:tabular-nums;will-change:transform,opacity}
.mw-unit{font-family:var(--body-font);font-weight:600;font-size:clamp(.68rem,1.2vw,.9rem);
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--dim)}
.scale-basis{margin-top:.85rem;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);will-change:opacity}

.scale-copy{max-width:min(92vw,34rem);will-change:opacity,transform}
.sc-kicker{font-family:var(--body-font);font-weight:600;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent)}
.sc-title{margin-top:.5rem;color:var(--ink)}
.sc-note{margin-top:.45rem;font-size:var(--t-body);color:var(--dim);text-wrap:pretty}

.scale-metrics{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;width:100%;max-width:min(100%,900px)}
.sc-metric{flex:0 1 auto;min-width:0;padding:0 clamp(1rem,2.8vw,2.4rem);text-align:center;
  will-change:opacity,transform}
.sc-metric[hidden]{display:none}
.sc-metric+.sc-metric{border-left:1px solid var(--rule)}
.sc-val{font-family:var(--display-font);font-weight:800;font-size:clamp(1.3rem,3vw,2.2rem);
  line-height:1;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-u{display:block;margin-top:.5em;font-family:var(--body-font);font-weight:600;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.sc-lbl{margin:.5rem auto 0;font-size:.78rem;line-height:1.35;color:var(--dim);max-width:17ch}

/* =====================================================
   06 · ESG — supporting row (deliberately lighter)
   ===================================================== */
/* four items, so a 2x2 grid rather than centred flex-wrap — the labels differ
   enough in length that wrapping left them ragged (1/1/2) */
.esg-supporting{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem clamp(1.4rem,3.4vw,2.8rem);
  padding-top:var(--s3);margin-top:var(--s2);border-top:1px solid var(--rule);
  width:100%;max-width:60rem;text-align:left}
.esg-supporting .es{display:flex;align-items:baseline;gap:.5rem;min-width:0}
.esg-supporting .v{font-family:var(--display-font);font-weight:800;font-size:.98rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.esg-supporting .l{font-size:.76rem;letter-spacing:.04em;color:var(--faint);line-height:1.35}
.esg-supporting .v{white-space:nowrap}

/* =====================================================
   07 · RECOGNITION — a short editorial credibility beat
   (no tilt, no shine, no 3D — replaced by a ruled list)
   ===================================================== */
.section{position:relative;padding:14vh 6vw;max-width:var(--maxw);margin:0 auto}
.section-head{max-width:min(92vw,40rem)}
.section-head h2{margin-top:.55rem}
.section-head .lede{margin-top:var(--s2)}

/* ---------- Recognition: full-bleed, full-viewport single view ---------- */
.recognition{
  max-width:none;
  min-height:100vh;
  padding:0 max(6vw, calc(50vw - 590px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}

.awards{
  list-style:none;
  margin-top:var(--s5);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
@media(max-width:900px){
  .awards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
  .awards{grid-template-columns:1fr}
}
.awards .award{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(9,50,57,.1);
  border-radius:12px;
  padding:2rem 1.8rem;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
}
.awards .award.is-in{opacity:1;transform:none}
.award-mark{font-family:var(--display-font);font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:var(--accent);margin-bottom:1.2rem}
.award-body{display:flex;flex-direction:column;gap:.4rem}
.award-body h4{font-size:1.1rem;line-height:1.25;color:var(--teal-black)}
.award-note{font-size:.82rem;line-height:1.4;color:rgba(9,50,57,.6)}

/* =====================================================
   08 · RESGEN — calm bridge into the closing
   ===================================================== */
.sb-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}

/* ---------- ResGen: full-bleed, full-viewport single view ---------- */
.resgen{
  max-width:none;
  min-height:100vh;
  padding:0 max(6vw, calc(50vw - 590px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}
#resgenBubbles{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.resgen-inner{max-width:min(92vw,40rem);text-align:center;position:relative;z-index:1}
.resgen-logo{display:block;width:clamp(220px,30vw,380px);height:auto;
  max-height:26vh;object-fit:contain;margin:var(--s4) auto}
.resgen-statement{font-family:var(--display-font);font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.72rem);line-height:1.34;letter-spacing:-.015em;
  color:var(--ink);text-wrap:pretty}

/* --- Sequenced entrance --- */
.resgen .eyebrow,
.resgen .resgen-logo{
  opacity:0;transform:translateY(28px);
}
.resgen .resgen-logo{transform:translateY(28px) scale(.88)}
.resgen .resgen-statement .w{
  display:inline-block;opacity:0;transition:opacity .32s ease;
}

/* =====================================================
   09 · FINAL STATEMENT — copy comes from CLOSING in data.js
   ===================================================== */
.closing{position:relative;overflow:hidden;min-height:100vh;display:grid;place-items:center;
  padding:14vh 6vw;background:radial-gradient(120% 90% at 50% 52%,#07272b 0%,var(--teal-black) 66%)}
.closing>*:not(.wind-streaks){position:relative;z-index:1}
.closing-inner{max-width:min(94vw,54rem);margin:0 auto;text-align:center}
.closing-title{margin:var(--s3) 0;font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.closing-title .w{display:inline-block;will-change:transform,opacity}
/* empty slot when CLOSING.headline is null — the section still composes */
.closing-title.is-placeholder{min-height:1.2em;border-bottom:1px dashed var(--rule);opacity:.35}
.closing-foot{margin-top:var(--s4);font-size:var(--t-meta);letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint)}

.wind-streaks{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.3s ease}
.wind-streaks.on{opacity:1}
.wind-streak{position:absolute;left:0;height:1.5px;width:34vw;will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(255,198,0,.42) 50%,transparent);
  filter:blur(.4px);animation:windDrift linear infinite}
@keyframes windDrift{from{transform:translateX(-42vw)}to{transform:translateX(112vw)}}

/* =====================================================
   SHARED REVEAL
   ===================================================== */
[data-reveal]{opacity:0;transform:translateY(26px)}
[data-reveal].is-in{opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out)}

/* =====================================================
   RESPONSIVE — recompose, don't just shrink
   ===================================================== */
@media(max-width:1024px){
  .t-copy,.t-stat,.t-finale{width:min(38vw,330px)}
}
@media(max-width:1024px){
  .tr-stage{gap:2rem}
  .tr-title{max-width:16ch}
}
@media(max-width:820px){
  :root{--t-metric:clamp(3.6rem,22vw,7.5rem)}
  /* 01 — the map keeps the upper frame; copy stays clear of it */
  .world-eyebrow{left:7vw;top:11vh}
  .world-copy{left:7vw;right:7vw;bottom:8vh;max-width:none}
  /* 03 — stack, copy first, visual under it */
  .tr-stage{grid-template-columns:1fr;gap:1.8rem;min-height:auto}
  .tr-visual{min-height:180px;order:2}
  .tr-text{order:1}
  .tr-note{max-width:none}
  .seq-inner{min-height:auto;padding:11vh 7vw 12vh;gap:2rem}
  .seq-stage{min-height:auto}
  .seq-rail{gap:10px}
  .seq-dot{font-size:.64rem;letter-spacing:.1em}
  .seq-dot::after{width:10px}
  .brand-mark{top:16px}
  .brand-mark img{width:86px}
  .s144-stage{grid-template-columns:1fr;gap:2rem;min-height:auto}.s144-copy{align-self:start;max-width:none}.s144-panel{align-self:start;margin-left:0;padding:1.4rem 0 1.4rem 1.4rem;border-left:2px solid rgba(255,198,0,.35)}.s144-panel h3{font-size:1.7rem}.s144-kpi strong{font-size:4.8rem}.s144-status{margin-top:1rem}.s144-equivalents{gap:.5rem 1.2rem}
  .section{padding:12vh 7vw}
  .awards .award{grid-template-columns:1fr;gap:.35rem}
  .award-note{text-align:left}
  .resgen{padding:14vh 7vw}
  .esg-supporting{gap:.6rem 1.4rem}
}
@media(max-width:640px){
  .esg-supporting{grid-template-columns:minmax(0,1fr)}
  .tr-metrics{flex-direction:column;align-items:stretch;max-width:min(88vw,20rem)}
  .tr-metrics li{padding:0}
  .tr-metrics li+li{border-left:0;border-top:1px solid var(--rule);margin-top:1.2rem;padding-top:1.2rem}
  .scale-metrics{flex-direction:column;align-items:stretch;max-width:min(88vw,20rem)}
  .sc-metric{padding:0}
  .sc-metric+.sc-metric{border-left:0;border-top:1px solid var(--rule);margin-top:1.25rem;padding-top:1.25rem}
  .sc-lbl{max-width:26ch}
}

/* =====================================================
   REDUCED MOTION — sequences lay their steps out to read
   ===================================================== */
.seq.is-static .seq-inner{min-height:auto;gap:clamp(2.4rem,6vh,3.6rem)}
.seq-static{display:flex;flex-direction:column;align-items:center;width:100%;
  gap:clamp(2.6rem,7vh,4.2rem)}
.ss-step{max-width:min(92vw,52rem);text-align:center}
.ss-step .ss-figure{font-family:var(--display-font);font-weight:800;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:.92;letter-spacing:-.05em;color:var(--ink)}
.ss-step .ss-figure span{color:var(--accent)}
.ss-step .ss-unit{display:block;margin-top:.5rem;font-family:var(--body-font);font-weight:600;
  font-size:.68rem;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--dim)}
.ss-step .ss-title{margin-top:.5rem;font-size:var(--t-h3)}
.ss-step .ss-note{margin-top:.4rem;color:var(--dim);font-size:var(--t-body)}
.ss-metrics{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.2rem clamp(1.4rem,4vw,2.6rem);margin-top:1.3rem}
.ss-metrics li{text-align:center}
.ss-metrics .v{font-family:var(--display-font);font-weight:800;font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--ink);letter-spacing:-.03em}
.ss-metrics .u{display:block;margin-top:.35em;font-weight:600;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.ss-metrics .l{display:block;margin-top:.35rem;font-size:.76rem;color:var(--dim);max-width:18ch}

@media(prefers-reduced-motion:reduce){
  .wind-streak{display:none}
  [data-reveal],.awards .award,.resgen [data-stagger]{opacity:1!important;transform:none!important}
  .scroll-hint span{background:var(--faint)}
  .seq-dot::before{transition:none}
}

/* =====================================================
   LENIS — page-level smooth scroll (src/main.tsx)
   Required hooks from Lenis's own docs. No collision with anything above —
   Lenis owns these class names and they did not exist in this file before.
   ===================================================== */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto}
html.lenis.lenis-stopped{overflow:hidden}
html.lenis [data-lenis-prevent]{overscroll-behavior:contain}