/* ==========================================================================
   Fractal Energy — website stylesheet
   Palette : v4 Slate (Brand Guidelines, 25 Aug 2026) — ONE neutral ramp
   Type    : Sora (display, figures) · Manrope (body, labels) - v2 fonts since 13 Oct 2026
   Notes   : Light theme only at launch (decision B13). Dark tokens kept,
             commented out at the bottom of this file.
             The Aluminium/Sky family (#EDF6F8 #DEEEF2 #C9DFE4 #A6C2C9 #C0E5F7)
             is RETIRED. Do not reintroduce it.
   ========================================================================== */

/* ---------- self-hosted fonts (latin subset) ---------- */
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/archivo-narrow-700.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("../fonts/ibm-plex-sans-var.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");}

:root{
  /* navy — retained anchor family */
  --navy-900:#0B2440; --navy-700:#1F3350; --navy-500:#33506B; --logo-ink:#000E51;
  /* slate — the one neutral ramp, hue 262 */
  --slate-025:#F5F7F9; --slate-050:#EEF0F4; --slate-100:#DDE0E5; --slate-200:#C9CCD3;
  --slate-300:#ABB0B7; --slate-650:#4D5159; --slate-700:#3F4349; --slate-800:#33383E;
  /* the one warm surface */
  --sun:#FFF1DA; --sun-rule:#F0D9AE;
  /* accent */
  --orange:#ED8B2B; --orange-hover:#F7A945; --amber:#F5B33C; --ember:#844300;

  /* 13 Oct 2026: version 2 fonts - Sora (display, figures) + Manrope (body, caps labels).
     The Archivo / IBM Plex @font-face rules above stay but are no longer used. */
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;   /* v2: labels are Manrope caps, not mono */

  --w:1200px;
  --gut:clamp(20px,5vw,60px);

  /* semantic */
  --bg:var(--slate-025);
  --surface:var(--slate-050);
  --card:#FFFFFF;
  --band:var(--slate-050);          /* Sonaura pass: bands lifted to a faint tint, not a grey fill */
  --band-deep:var(--slate-050);     /* the old deep-grey band retired — one calm ground now */
  --rule:var(--slate-100);          /* hairlines softened for air; --rule-strong keeps definition */
  --rule-soft:#ECEEF2;
  --rule-strong:var(--slate-300);
  --ink:var(--navy-900);
  --ink-2:var(--navy-700);
  --txt:var(--slate-700);
  --dim:var(--slate-650);
  --accent:var(--ember);
  --nav-h:110px;  /* 40 top pad + 50 logo + 20 bottom pad, measured */
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-900);color:#fff;padding:12px 18px;}
.skip:focus{left:0;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;}
}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut);}
.sec{padding-block:clamp(76px,11vw,152px);scroll-margin-top:calc(var(--nav-h) + 12px);
  overflow-x:clip;}  /* Round 5: a reveal-left/right wrap sits 32px off-screen until it enters; without this a phone can scroll sideways */
.sec-tight{padding-block:clamp(52px,7vw,92px);}

/* ---------- scroll reveal (Sonaura pass; variants added Round 4) ----------
   Each section eases in the first time it enters the viewport. site.js adds
   .reveal to every section wrap and reads data-reveal on the <section> to pick
   the move: "up" (default), "fade", "left", "right" or "pop". Grids inside a
   section (.pillars, .steps, .grid, .posts, .proof, .duo, .links, .people) get
   .reveal-stagger and their children arrive one after another.
   Motion is off for users who ask for reduced motion, and everything is visible
   by default if JS never runs. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);}
.reveal.reveal-fade{transform:none;}
.reveal.reveal-left{transform:translateX(-32px);}
.reveal.reveal-right{transform:translateX(32px);}
.reveal.reveal-pop{transform:scale(.965);transition-duration:.85s;}
.reveal.in{opacity:1;transform:none;}
.reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
.reveal-stagger.in > *{opacity:1;transform:none;}
.reveal-stagger > :nth-child(1){transition-delay:.05s}.reveal-stagger > :nth-child(2){transition-delay:.13s}
.reveal-stagger > :nth-child(3){transition-delay:.21s}.reveal-stagger > :nth-child(4){transition-delay:.29s}
.reveal-stagger > :nth-child(5){transition-delay:.37s}.reveal-stagger > :nth-child(6){transition-delay:.45s}
.reveal-stagger > :nth-child(n+7){transition-delay:.53s}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---------- type roles ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;}
.h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.2vw,64px);line-height:1.04;letter-spacing:-.03em;color:var(--ink);}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.8vw,44px);line-height:1.1;letter-spacing:-.025em;}
.h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;font-weight:400;color:var(--ink-2);max-width:40ch;}
.p{font-size:16.5px;line-height:1.68;max-width:66ch;}
.small{font-size:14.5px;line-height:1.6;}
.dim{color:var(--dim);}
.mono{font-family:var(--mono);}
.tnum{font-variant-numeric:tabular-nums;}
.stack{display:flex;flex-direction:column;gap:20px;}
.stack-s{display:flex;flex-direction:column;gap:12px;}
.mt{margin-top:30px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:2px;
  font-family:var(--sans);font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;}
.btn-p{background:var(--orange);color:#0B2440;}          /* navy on orange = 6.2:1 */
.btn-p:hover{background:var(--orange-hover);}
.btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);}
.btn-s:hover{border-color:#fff;background:rgba(255,255,255,.10);}
.btn-d{background:var(--navy-900);color:#fff;}
.btn-d:hover{background:#12345C;}
.btn-o{background:transparent;color:var(--ink);border-color:var(--rule-strong);}
.btn-o:hover{border-color:var(--ink);}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- nav ----------
   Transparent, not sticky, no band (client, 27 Aug). The header is laid straight
   over the hero photograph — no ground of its own, nothing behind the text.
   Links are white and semibold with a shadow so they hold over a bright frame.
   Pages with no hero photo take .nav-dark and go navy instead. */
.nav{position:relative;z-index:80;background:transparent;}
/* Laid over the hero rather than sitting above it. Absolute positioning means the
   photograph starts at the very top of the page with no strip of page background
   showing between the browser chrome and the image. */
.nav-over{position:absolute;top:0;left:0;right:0;}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:40px 0 20px;background:none;border:0;}
.nav-logo{height:50px;width:auto;align-self:center;filter:none;}
.nav-links{display:flex;gap:28px;font-size:16px;font-weight:400;color:#fff;align-items:center;
  margin:0;padding:0;}
/* Round 4 (17 Sep): four items - Green Power, Solar EPC, Projects, About. "Green
   Power" and "Solar EPC" must not break onto two lines. */
.nav-links a,.has-sub > button{white-space:nowrap;}
.nav-in > a[aria-label]{flex:none;display:flex;}   /* the logo never shrinks to make room; flex drops the inline line-box slack */
.nav-links{margin-left:auto;}                   /* items sit on the right, beside the button */
.nav-in > .btn{margin-left:12px;}               /* a little more air before the button than between items */
.nav-toggle{margin-left:auto;}
.nav-links > li{list-style:none;position:relative;}
.nav-links ul{list-style:none;margin:0;padding:0;}
.nav-links a{display:inline-block;padding:4px 0;border-bottom:2px solid transparent;color:#fff;}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--orange);}
.nav .btn{padding:11px 18px;font-size:15px;white-space:nowrap;text-shadow:none;}

/* dropdown — no panel, styled like the top-level menu */
.has-sub > button{background:none;border:0;color:#fff;font:inherit;font-weight:400;cursor:pointer;
  padding:4px 0;display:inline-flex;align-items:center;gap:7px;border-bottom:2px solid transparent;}
.has-sub > button:hover{border-bottom-color:var(--orange);}
.has-sub > button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);}
.sub{position:absolute;top:100%;left:0;margin-top:14px;min-width:250px;padding:0;
  background:none;border:0;box-shadow:none;display:none;}
.sub li + li{margin-top:13px;}
.sub a{display:inline-block;padding:2px 0;border-bottom:2px solid transparent;
  color:#fff;font-size:15.5px;font-weight:400;white-space:nowrap;}
.sub a:hover{border-bottom-color:var(--orange);}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub.open{display:block;}

/* navy text, no shadows — the home page over the bright sky, and every solid header */
.nav-dark .nav-logo{filter:none;}
.nav-dark .nav-links,.nav-dark .nav-links a,.nav-dark .has-sub > button,.nav-dark .sub a{
  color:var(--ink);}
.nav-dark .nav-toggle{border-color:var(--rule-strong);color:var(--ink);}

/* ---- .nav-solid: every page except the home page (Round 4, 17 Sep) ----
   A white bar with navy links that stays at the top of the window while the page
   scrolls. It sits in the flow, so the hero below it no longer pads for a menu
   laid over it, and --nav-h shrinks to the bar's real height for anchor offsets. */
.nav-solid{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(11,36,64,.04);}
.nav-solid .nav-in{padding:14px 0;}
.nav-solid .nav-logo{height:46px;}
.nav-solid .nav-links,.nav-solid .nav-links a,.nav-solid .has-sub > button,.nav-solid .sub a{color:var(--ink);}
.nav-solid .nav-toggle{border-color:var(--rule-strong);color:var(--ink);}
body:has(.nav-solid){--nav-h:78px;}   /* 14 pad + 49 button + 14 pad + 1px rule, measured */
body:has(.nav-solid) .hero{padding-top:0;}
/* no menu over the photo, so the 150px top fade for white links is not needed */
body:has(.nav-solid) .hero-img::after{
  background:linear-gradient(180deg,rgba(11,36,64,.34) 0%,rgba(11,36,64,.56) 38%,rgba(11,36,64,.82) 100%);}

.nav-toggle{display:none;background:none;border:1.5px solid rgba(255,255,255,.8);color:#fff;
  border-radius:3px;padding:9px 12px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;}
@media (max-width:960px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  /* The phone menu is a drawer, not a header strip. With nothing behind it the
     white links land on the page below and disappear, so the OPEN state gets a
     navy panel. Closed, the header stays fully transparent. */
  .nav-in.open{flex-wrap:wrap;background:var(--navy-900);border-radius:3px;
    padding:18px 20px 22px;box-shadow:0 14px 34px rgba(11,36,64,.32);}
  .nav-in.open .nav-logo{filter:brightness(0) invert(1);}
  .nav-in.open .nav-links,.nav-in.open .sub,.nav-in.open .nav-toggle{text-shadow:none;}
  .nav-in.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;order:3;
    border-top:1px solid rgba(255,255,255,.28);margin-top:14px;padding-top:14px;font-size:17px;color:#fff;}
  .nav-dark .nav-in.open .nav-links{border-top-color:var(--rule);}
  .nav-in.open .nav-links a{padding:9px 0;color:#fff;}
  /* Round 5b: the home header is .nav-dark (navy toggle over the sky); open, the drawer is
     navy, so the "Close" label goes white or it vanishes */
  .nav-dark .nav-in.open .nav-toggle{color:#fff;border-color:rgba(255,255,255,.8);}
  .nav-in.open .has-sub > button{padding:9px 0;color:#fff;}
  .nav-in.open .sub{position:static;display:block;margin:2px 0 4px;padding:0 0 0 16px;}
  .nav-in.open .sub li + li{margin-top:0;}
  .nav-in.open .sub a{padding:8px 0;font-size:16px;font-weight:400;color:#fff;}
  /* on the white header the open drawer stays white, links navy, logo in colour */
  .nav-solid .nav-in.open{background:#fff;border-radius:0;padding:14px 0 18px;box-shadow:none;}
  .nav-solid .nav-in.open .nav-logo{filter:none;}
  .nav-solid .nav-in.open .nav-links{border-top-color:var(--rule);}
  .nav-solid .nav-in.open .nav-links,.nav-solid .nav-in.open .nav-links a,
  .nav-solid .nav-in.open .has-sub > button,.nav-solid .nav-in.open .sub a{color:var(--ink);}
}
@media (max-width:620px){
  .nav-in > .btn-p{display:none;}
  .nav-in.open > .btn-p{display:inline-flex;order:4;width:100%;justify-content:center;margin-top:14px;}
}

/* ---------- hero ----------
   The menu is absolutely positioned over this and takes no space in the flow, so
   the photograph starts at the very top of the page. The hero only pads its own
   content down clear of the menu. */
.hero{position:relative;padding-top:var(--nav-h);background:var(--navy-900);overflow:hidden;}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center 56%;
  filter:saturate(.86) contrast(1.08) brightness(1.04) sepia(.06);}
/* Client, 27 Aug: the homepage photograph ships AS-IS - no crop, no resize, no
   grade - and sits high so more sky stays in frame. The guideline grade still
   applies to every other hero and to the project photography. */
.hero-img.raw{filter:none;background-position:center bottom;}
.hero-zoom .hero-img{animation:slowzoom 20s ease-out forwards;}
@keyframes slowzoom{from{transform:scale(1.06);}to{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.hero-zoom .hero-img{animation:none;transform:none;}}
/* Scrim strength is measured against the headline, not guessed. With the menu off
   the photograph the top can stay light and let the sunrise through. */
/* Two scrims, because the photographs are not alike.
   TOP FADE (both): a soft 150px fade with no edge and no border, so the
   transparent menu has something to sit on. White links measure 2.3:1 without it.
   DEFAULT: the client's own drone frames are bright and flat and need the depth.
   .raw: the ungraded homepage photograph already carries its own contrast, so it
   keeps a light scrim and the sky stays visible. */
.hero-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,36,64,.38) 0,rgba(11,36,64,0) 150px),
    linear-gradient(180deg,rgba(11,36,64,.34) 0%,rgba(11,36,64,.56) 38%,rgba(11,36,64,.82) 100%);}
/* The photograph is bright and busy in every corner, so the shade is placed only
   where the copy sits: one diagonal fade anchored to the BOTTOM-LEFT. The top-left
   stays bright, which is what lets the coloured logo and the navy menu read; the
   whole right side - sunrise, turbines, far solar field - is untouched. */
/* Client, 27 Aug (later): show the raw photograph — the diagonal navy scrim is
   removed. The headline and paragraph now hold their own contrast with a soft
   text-shadow instead of a wash over the image. */
.hero-img.raw::after{background:none;}
.hero-raw h1{text-shadow:0 2px 18px rgba(11,36,64,.55),0 1px 3px rgba(11,36,64,.5);}
.hero-raw p{text-shadow:0 1px 10px rgba(11,36,64,.6),0 1px 2px rgba(11,36,64,.55);}
/* ---- .hero-ribbon: a translucent silk ribbon drawn by /assets/js/hero-ribbon.js.
   It sits between the photograph (below) and the copy (z-index 2, above), never
   takes the pointer, and --ribbon-opacity is the one knob for "how visible". */
.hero-ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:var(--ribbon-opacity,.35);mix-blend-mode:screen;}
/* Round 5b: the ribbon runs on phones too. It drifts on its own; the cursor only
   leans it, so without a cursor it simply drifts. hero-ribbon.js draws fewer columns
   on a narrow canvas to keep the frame cheap. */
.hero-in{position:relative;z-index:2;padding-top:clamp(96px,14vw,180px);padding-bottom:clamp(38px,6vw,66px);
  display:flex;flex-direction:column;gap:22px;}
.hero h1{color:#fff;}
.hero h1 u{text-decoration:none;font-size:1.3em;white-space:nowrap;line-height:.88;}
.hero p{color:#F0F5F8;font-size:clamp(16px,1.8vw,19px);line-height:1.6;max-width:56ch;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
/* ---- .hero-raw: the whole photograph, top to bottom ----
   The box takes the image's own aspect ratio, so the full frame is shown at full
   width with nothing cropped off any edge. No scrim, no filter, true colours.
   The menu sits over the sky at the top; the copy sits over the dark panel field
   at the bottom. */
.hero-raw{aspect-ratio:1920/900;margin-top:0;padding-top:0;}
.hero-raw .hero-img{background-size:100% 100%;background-position:center;}
/* copy sits in the middle of the first fold, where it was before the photo changed */
.hero-raw .hero-in{position:absolute;inset:0;padding-top:var(--nav-h);
  justify-content:flex-end;padding-bottom:clamp(44px,5.5vw,80px);gap:20px;}
/* the base H1 is sized for a tall full-bleed hero; this frame is 600px, so the
   headline comes down or it crowds the menu and pushes the buttons into the strip */
.hero-raw h1{font-size:clamp(28px,3.3vw,48px);}
.hero-raw h1 u{font-size:1.12em;line-height:1;}
/* Round 5: the client's longer hero paragraph (six lines, not three). The headline and the
   paragraph now scale with the viewport, and the paragraph runs wider, so the copy keeps
   clear of the menu all the way down to 1024px. Measured gap headline-to-menu: 1024 27px,
   1100 54px, 1280 40px+, 1440 56px. */
.hero-raw p{max-width:60ch;font-size:clamp(15.5px,1.25vw,19px);line-height:1.5;}
@media (min-width:1024px) and (max-width:1399px){
  .hero-raw .hero-in{gap:14px;padding-bottom:36px;}
}
/* Round 5b (17 Sep): the copy stays ON the photograph at every width - the client wants
   one experience on a phone and a desktop. Up to 1023px the whole-frame photograph is
   only ~176px tall on a 375px phone, so here the hero takes its height from the copy
   instead and the photograph covers that box, cropped towards the turbines and the
   solar field (58% from the left keeps the big turbine in frame). Everything else is
   the desktop layout unchanged: transparent menu over the sky, white copy with its
   shadows at the bottom, the strip straddling the bottom edge, ribbon and rail on.
   (Before Round 5b the hero stacked here: photograph whole, copy on navy beneath.) */
@media (max-width:1023px){
  .hero-raw{aspect-ratio:auto;}
  .hero-raw .hero-img{background-size:cover;background-position:58% 50%;}
  .hero-raw .hero-in{position:relative;inset:auto;min-height:min(70vh,720px);min-height:min(70svh,720px);
    padding-top:calc(var(--nav-h) + 14px);padding-bottom:clamp(64px,10vw,80px);justify-content:flex-end;}
}
.hero-sm .hero-in{padding-top:clamp(66px,10vw,116px);padding-bottom:clamp(34px,5vw,54px);}
.hero-sm h1{font-size:clamp(32px,4.8vw,58px);}

/* ---------- breadcrumbs ---------- */
.crumb{position:relative;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#E2EAEF;display:flex;gap:9px;flex-wrap:wrap;
  text-shadow:0 1px 3px rgba(11,36,64,.6);}
.crumb a:hover{color:#fff;text-decoration:underline;}
.crumb span{color:#B7C7D2;}
/* on a plain page with no hero photo (legal pages) */
.crumb-dark{color:var(--dim);text-shadow:none;}
.crumb-dark a:hover{color:var(--ink);}
.crumb-dark span{color:var(--rule-strong);}

/* ---------- stat strip (straddles the hero edge; frosted glass since Round 4 -
   the client's call. The upper half blurs the photograph, the lower half sits on
   the page ground, so the tint is kept at .5 to read as one panel.) ---------- */
.stats{position:relative;z-index:3;}
.stats-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(11,36,64,.50);border:1px solid rgba(255,255,255,.19);border-radius:3px;overflow:hidden;margin-top:-38px;
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .stats-in{background:rgba(11,36,64,.92);}
}
.stat{padding:22px 24px;border-right:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:5px;}
.stat:last-child{border-right:0;}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);}
.stat b{font-family:var(--mono);font-weight:500;font-size:clamp(26px,3.2vw,34px);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.stat i{font-style:normal;font-size:12.5px;line-height:1.45;color:#D5DCE3;}
@media (max-width:760px){
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);}
  .stat:last-child{border-bottom:0;}
}

/* ---------- bands ---------- */
.band{background:var(--band);}
.band-deep{background:var(--band-deep);}
.band-surface{background:var(--surface);}
.band-navy{background:var(--navy-900);color:#C9D0D8;}
.band-navy h2,.band-navy h3,.band-navy h4{color:#fff;}
.band-navy .eyebrow{color:var(--amber);}
.band-navy a:not(.btn){color:#fff;border-bottom:1px solid var(--slate-800);}
.band-navy a:not(.btn):hover{border-bottom-color:var(--amber);}
/* muted text on navy: --dim is a light-ground token and fails here (1.8:1). #9FB8C3 = 7.6:1 */
.band-navy .dim,.foot .dim,.foot .small.dim{color:#9FB8C3;}
/* Round 4: a soft slate gradient for the "Latest from the team" band. Page ground at
   the top, one step deeper at the bottom, so the white cards lift off it. */
.band-grad{background:linear-gradient(168deg,var(--slate-025) 0%,var(--slate-050) 45%,var(--slate-100) 100%);}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,5vw,72px);align-items:start;}
.split-even{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:24px;}}
/* Round 5: copy on the left, photograph on the right ("Locally generated renewable energy").
   The figure stretches to the copy's height and the photo covers it, so the crop adapts to
   the viewport. Stacked under 860px it goes back to a plain 4:3 frame under the copy. */
.split-media{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch;}
.media{margin:0;border-radius:3px;overflow:hidden;min-height:380px;background:var(--slate-100);}
.media img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;}
@media (max-width:860px){.split-media{grid-template-columns:1fr;} .media{min-height:0;aspect-ratio:4/3;}}
/* numbered points under the intro: 01 02 03 in mono, title, one line of body */
.nlist{margin:0;padding:20px 0 0;list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--rule);}
.nlist li{counter-increment:n;display:grid;grid-template-columns:34px minmax(0,1fr);gap:3px 12px;align-items:start;}
.nlist li::before{content:counter(n,decimal-leading-zero);grid-row:1/3;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.1em;color:var(--accent);padding-top:.3em;}
.nlist b{font-size:16.5px;font-weight:600;color:var(--ink);}
.nlist span{font-size:15px;line-height:1.6;color:var(--txt);}

/* ---------- two-column feature blocks ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:38px;}
.duo-c{background:var(--card);padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;gap:16px;}
.duo-k{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.duo-k b{font-family:var(--display);font-weight:700;font-size:27px;color:var(--ink);}
.duo-k span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--navy-700);padding:4px 9px;border-radius:2px;}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;
  font-size:15.5px;line-height:1.55;border-top:1px solid var(--rule);padding-top:17px;}
.ticks li{padding-left:18px;position:relative;}
.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--rule-strong);}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:38px;}
.pillar{background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:10px;}
.pillar b{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.pillar h3{font-size:19px;}
.pillar p{font-size:14.5px;line-height:1.58;}
/* on a navy band (home, "Why buy power from the producer?"): white headings, amber
   labels, body #C9D0D8. Amber #F5B33C is the brand's orange for dark grounds (8.5:1);
   Solar Orange itself is a fill, never text. */
.band-navy .pillars{background:#1B3346;border-color:#1B3346;}
.band-navy .pillar{background:rgba(255,255,255,.035);}
.band-navy .pillar b{color:var(--amber);}
.band-navy .pillar h3{color:#fff;}
.band-navy .pillar p{color:#C9D0D8;}

/* ---------- proof band ----------
   Light ground by default (home, Round 4). Inside .band-navy (About) the old
   white-on-navy colours apply. */
.mission{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,58px);line-height:1.04;
  color:var(--ink);letter-spacing:.003em;max-width:18ch;}
.mission em{font-style:normal;color:var(--ember);}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;
  margin-top:44px;padding-top:38px;border-top:1px solid var(--rule-strong);}
.proof-i{display:flex;flex-direction:column;gap:9px;}
.proof-i b{font-family:var(--mono);font-weight:500;font-size:clamp(28px,3.6vw,40px);color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;}
.proof-i strong{font-size:14.5px;font-weight:600;color:var(--ink);}
.proof-i span{font-size:14px;line-height:1.55;color:var(--txt);}
/* Round 5: headshot placeholder on the home proof band - the About page's monogram tile,
   larger. Swap for <img class="init"> when the 800x800 headshots land (CONFIG item 9). */
.proof-i .init{width:96px;height:96px;border-radius:3px;background:var(--navy-900);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:22px;
  letter-spacing:.06em;margin-bottom:6px;object-fit:cover;}
.disclaim{margin-top:30px;font-size:13.5px;line-height:1.6;color:var(--dim);max-width:78ch;
  border-top:1px solid var(--rule);padding-top:18px;}
.disclaim a{color:var(--ember);border-bottom:1px solid var(--sun-rule);}
.disclaim a:hover{border-bottom-color:var(--ember);}
.band-navy .mission{color:#fff;}
.band-navy .mission em{color:var(--amber);}
.band-navy .proof{border-top-color:var(--slate-800);}
.band-navy .proof-i b{color:var(--amber);}
.band-navy .proof-i strong{color:#fff;}
.band-navy .proof-i span{color:#C9D0D8;}
.band-navy .disclaim{color:#AEB9C4;border-top-color:#1B3346;}

/* ---------- project cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin-top:38px;}
.card{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:flex-end;padding:16px;}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) contrast(1.08) brightness(1.04) sepia(.06);}
.card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,36,64,0) 40%,rgba(11,36,64,.38) 100%);}
.card .cap{position:relative;z-index:2;background:rgba(11,36,64,.50);border:1px solid rgba(255,255,255,.19);
  border-radius:3px;padding:13px 16px;display:flex;flex-direction:column;gap:3px;
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card .cap{background:rgba(11,36,64,.92);}
}
.card .cap b{font-family:var(--mono);font-weight:500;font-size:19px;color:#fff;font-variant-numeric:tabular-nums;}
.card .cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#C6D8E0;}

/* ---------- project detail rows ---------- */
.plants{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;margin-top:38px;}
.plant{background:var(--card);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;}
.plant img{width:100%;height:100%;min-height:230px;object-fit:cover;
  filter:saturate(.86) contrast(1.08) brightness(1.04) sepia(.06);}
.plant-b{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:13px;}
.plant-b h3{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.06;}
.plant-meta{display:flex;flex-wrap:wrap;gap:8px;}
.plant-meta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:5px 10px;}
@media (max-width:820px){.plant{grid-template-columns:1fr;} .plant img{min-height:200px;aspect-ratio:16/9;}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:42px;}
.step{background:var(--card);padding:30px 26px;display:flex;flex-direction:column;gap:9px;}
.step b{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-650);font-weight:500;}
.step strong{font-family:var(--display);font-weight:700;font-size:22px;color:var(--navy-900);line-height:1.1;}
.step span{font-size:14.5px;line-height:1.55;color:var(--slate-700);}
/* on a navy band (home, "A fully managed path"): five steps, amber step labels */
.band-navy .steps{background:#1B3346;border-color:#1B3346;}
.band-navy .step{background:rgba(255,255,255,.035);}
.band-navy .step b{color:var(--amber);}
.band-navy .step strong{color:#fff;}
.band-navy .step span{color:#C9D0D8;}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:36px;}
.person{border:1px solid var(--rule);background:var(--card);border-radius:3px;padding:24px;display:flex;flex-direction:column;gap:12px;}
.person .init{width:52px;height:52px;border-radius:3px;background:var(--navy-900);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;letter-spacing:.06em;}
.person h3{font-size:18px;font-weight:600;color:var(--ink);}
.person .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.person p{font-size:14.5px;line-height:1.6;}

/* ---------- clients ---------- */
.clients{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.client{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,26px);color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:13px 22px;}

/* ---------- note / sun wash — one per view ---------- */
.note{background:var(--sun);border:1px solid var(--sun-rule);border-radius:3px;
  padding:18px 21px;font-size:14px;line-height:1.6;max-width:74ch;color:var(--slate-700);}
.note b.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ember);display:block;margin-bottom:6px;font-weight:500;}

/* ---------- data table ---------- */
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;margin-top:30px;}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;background:var(--card);}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--rule);vertical-align:top;}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);font-weight:500;background:var(--band);}
tbody th{font-weight:600;color:var(--ink);}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0;}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);}
.tw-fit table{min-width:0;}   /* short two-column tables (Cookies page) fit a phone without side-scrolling */

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:34px;background:var(--card);}
.faq details{border-bottom:1px solid var(--rule);}
.faq details:last-child{border-bottom:0;}
.faq summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;justify-content:space-between;
  gap:18px;align-items:flex-start;font-size:17px;font-weight:600;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--dim);line-height:1;flex:none;}
.faq details[open] summary::after{content:"\2212";}
.faq summary:hover{background:var(--surface);}
.faq .a{padding:0 22px 21px;font-size:15.5px;line-height:1.66;max-width:74ch;}

/* ---------- Q&A liftable block (GEO) ---------- */
.qa{margin-top:34px;display:flex;flex-direction:column;gap:18px;}
.qa div{border-left:0;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:18px 21px;}
.qa h3{font-size:16px;margin-bottom:6px;}
.qa p{font-size:15.5px;line-height:1.62;max-width:76ch;}

/* ---------- insight cards ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:38px;}
.post{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .18s ease;}
.post:hover{border-color:var(--rule-strong);}
.post .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.post h3{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.1;}
.post p{font-size:14.5px;line-height:1.58;}
.post .more{font-size:14px;font-weight:600;color:var(--ink);margin-top:auto;}
.post:hover .more{color:var(--ember);}

/* ---------- article prose ---------- */
.prose{max-width:70ch;display:flex;flex-direction:column;gap:22px;}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1.08;margin-top:20px;}
.prose h3{font-size:19px;font-weight:600;margin-top:10px;}
.prose p{font-size:17px;line-height:1.72;}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:17px;line-height:1.66;}
.prose a:not(.btn){color:var(--ember);border-bottom:1px solid var(--sun-rule);}
.prose a:not(.btn):hover{border-bottom-color:var(--ember);}
.prose .tw,.prose .note{max-width:none;}
.byline{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C9D0D8;}

/* ---------- NAP block ---------- */
.nap{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:24px;
  display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.6;max-width:44ch;}
.nap b{font-size:16px;color:var(--ink);}
.nap .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:30px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.wide{grid-column:1/-1;}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--card);
  border:1px solid var(--rule-strong);border-radius:3px;padding:12px 14px;width:100%;}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ember);outline:none;box-shadow:0 0 0 2px rgba(132,67,0,.18);}
.form-foot{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.form-foot .hint{font-size:13px;color:var(--dim);}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.form-msg{grid-column:1/-1;font-size:15px;padding:13px 16px;border-radius:3px;display:none;}
.form-msg.ok{display:block;background:var(--sun);border:1px solid var(--sun-rule);color:var(--slate-700);}
.form-msg.err{display:block;background:#FBE9E7;border:1px solid #F0C4BC;color:#7A2718;}

/* ---------- contact rows ---------- */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:30px;}
.contacts > div{background:var(--card);padding:22px;display:flex;flex-direction:column;gap:6px;}
.contacts h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;}
.contacts a,.contacts span{font-size:16px;color:var(--ink);}
.contacts a:hover{color:var(--ember);}
.map{margin-top:30px;border:1px solid var(--rule);border-radius:3px;overflow:hidden;line-height:0;}
.map iframe{width:100%;height:340px;border:0;}

/* ---------- link list (where we operate) ---------- */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:36px;}
.links a{background:var(--card);padding:24px;display:flex;flex-direction:column;gap:8px;transition:background .18s ease;}
.links a:hover{background:var(--surface);}
.links a b{font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink);}
.links a span{font-size:14.5px;line-height:1.55;color:var(--txt);}
.links a i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}

/* ---------- footer ----------
   Round 4 (17 Sep): the "Send us your bill" call to action is a LIGHT band above
   the navy footer - white ground, navy text, copy on the left and the two buttons on
   the right. The same footer block is pasted into every page. */
.foot{background:var(--navy-900);color:#C9D0D8;}
.foot-cta-band{background:#fff;color:var(--txt);border-top:1px solid var(--rule);}
.foot-cta{padding-block:clamp(54px,8vw,98px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,5vw,72px);align-items:center;}
.foot-cta-copy{display:flex;flex-direction:column;gap:18px;}
.foot-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.8vw,54px);line-height:1.04;color:var(--ink);max-width:17ch;}
.foot-cta p{max-width:56ch;font-size:17px;line-height:1.6;color:var(--txt);}
.foot-cta .btn-row{justify-content:flex-end;}
@media (max-width:860px){
  .foot-cta{grid-template-columns:1fr;gap:26px;}
  .foot-cta .btn-row{justify-content:flex-start;}
}
.foot-grid{padding-block:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;}
.foot-col{display:flex;flex-direction:column;gap:9px;font-size:14.5px;}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9FB8C3;font-weight:500;margin-bottom:4px;}
.foot-col a:hover{color:#fff;}
/* .foot-col is a flex column; without align-self the image stretches to the
   column width and the logo distorts (was rendering 200x32 on a 640x181 file). */
.foot-logo{height:36px;width:auto;align-self:flex-start;flex:none;margin-bottom:14px;}
.foot-mission{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.12;color:#fff;max-width:19ch;}
/* social buttons - round outlines, brand-neutral. Links are placeholders (CONFIG.md). */
.foot-social{display:flex;gap:9px;margin-top:8px;}
.foot-social a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid #33506B;color:#C9D0D8;transition:border-color .18s ease,color .18s ease,background .18s ease;}
.foot-social a:hover{border-color:var(--amber);color:#fff;background:rgba(255,255,255,.05);}
.foot-social svg{width:17px;height:17px;fill:currentColor;}
.foot-social svg.ico-stroke{fill:none;stroke:currentColor;stroke-width:1.8;}
.foot-social svg.ico-stroke .dot{fill:currentColor;stroke:none;}
.foot-base{border-top:1px solid #1B3346;padding-block:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9FB8C3;}
.foot-legal{display:flex;gap:22px;flex-wrap:wrap;}
.foot-legal a{border-bottom:1px solid transparent;}
.foot-legal a:hover{color:#fff;border-bottom-color:var(--amber);}

/* ---------- floating contact ---------- */
.float{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:9px;}
.float a{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--navy-900);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 10px rgba(11,36,64,.25);
  transition:transform .18s ease;}
.float a.wa{background:#25D366;color:#0B2440;border-color:rgba(11,36,64,.18);}
.float a:hover{transform:translateY(-2px);}
.float svg{width:22px;height:22px;fill:currentColor;}
@media (max-width:600px){.float a{width:46px;height:46px;}}

/* ---------- 404 ---------- */
.oops{min-height:64vh;display:flex;flex-direction:column;justify-content:center;gap:20px;align-items:flex-start;}

/* ---------- power rail (home page) ----------
   One 1px blue line from the hero headline straight down the left margin into a small
   transformer in the footer; an orange unit of power rides it on scroll and lights the
   factory drawn under the mission line. Drawn by assets/js/rail.js. Decorative: both
   SVGs are aria-hidden, take no pointer, and are absolutely positioned, so nothing
   moves when they load. Off for reduced motion. Round 5b: on at every width.
   Knobs: --rail-x (distance from the edge), --rail-blue, and ANCHOR in rail.js. */
:root{
  --rail-x:clamp(22px,3vw,46px);
  --rail-blue:#2F5DD9;   /* Logo Ink #000E51 lifted to daylight, same hue. Not the retired Sky. */
}
.rail{position:absolute;left:0;top:0;width:100%;z-index:5;pointer-events:none;overflow:visible;display:block;}
.rail-track{fill:none;stroke:var(--rail-blue);stroke-width:1;}
.rail-tail{fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;opacity:.45;}
.rail-node{fill:none;stroke:var(--rail-blue);stroke-width:1;}
.rail-ball circle{fill:var(--orange);}
.rail-ball .halo{opacity:.22;}
.rail-ball{will-change:transform;}
/* the transformer and the cable to the factory: blue at rest, orange once the unit lands */
.rail-box{stroke:var(--rail-blue);stroke-width:1.25;stroke-linejoin:round;fill:rgba(47,93,217,0);transition:fill .5s ease,stroke .5s ease;}
.rail-cable{fill:none;stroke:var(--rail-blue);stroke-width:1;transition:stroke .6s ease .15s;}
.rail.lit .rail-box{stroke:var(--amber);fill:rgba(237,139,43,.55);}
.rail.lit .rail-cable{stroke:var(--orange);}

/* the factory: a dark line drawing under the mission line, lit from the left */
.rail-plant{display:block;width:220px;height:100px;overflow:visible;align-self:flex-start;flex:none;margin-top:6px;}
.rail-plant .s{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round;transition:stroke .7s ease .3s;}
.rail-plant .win{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,.16);stroke-width:1;transition:fill .7s ease,stroke .7s ease;}
.rail-plant .pv{fill:rgba(255,255,255,0);transition:fill .7s ease .3s;}
.rail-plant .glow{opacity:0;transition:opacity .9s ease .3s;}
.rail-plant.lit .s{stroke:rgba(245,179,60,.78);}
.rail-plant.lit .win{fill:rgba(237,139,43,.92);stroke:rgba(245,179,60,.78);}
.rail-plant.lit .pv{fill:rgba(245,179,60,.35);}
.rail-plant.lit .glow{opacity:1;}
/* windows come on left to right, after the cable */
.rail-plant .win:nth-of-type(1){transition-delay:.30s}.rail-plant .win:nth-of-type(2){transition-delay:.36s}
.rail-plant .win:nth-of-type(3){transition-delay:.42s}.rail-plant .win:nth-of-type(4){transition-delay:.48s}
.rail-plant .win:nth-of-type(5){transition-delay:.54s}.rail-plant .win:nth-of-type(6){transition-delay:.60s}
.rail-plant .win:nth-of-type(7){transition-delay:.60s}.rail-plant .win:nth-of-type(8){transition-delay:.66s}
.rail-plant .win:nth-of-type(9){transition-delay:.66s}.rail-plant .win:nth-of-type(10){transition-delay:.72s}
.rail-plant .win:nth-of-type(11){transition-delay:.72s}

/* Round 5b: on below 1024px too. The phone gutter is 20px, so the line moves to 10px
   and the factory steps in from the wrap edge to leave a short visible cable. */
@media (max-width:1023px){
  :root{--rail-x:10px;}
  .rail-plant{margin-left:26px;}
}
/* 14 Oct 2026 (client): the rail runs on every page on desktop, on phones on the home page only.
   Other pages mark both SVGs .rail-desk; rail.js sees display:none and stops. */
@media (max-width:1023px){ .rail-desk{display:none!important;} }
@media (prefers-reduced-motion:reduce){
  .rail-ball,.rail-tail{display:none!important;}
  .rail-box,.rail-cable,.rail-plant .s,.rail-plant .win,.rail-plant .pv,.rail-plant .glow{transition:none;}
}

/* ==========================================================================
   DARK THEME — built, switched OFF at launch (decision B13).
   To enable: delete the surrounding comment markers.
   :root[data-theme="dark"], and @media (prefers-color-scheme:dark)
   ---------------------------------------------------------------------------
   :root[data-theme="dark"]{
     --bg:#141619; --surface:#1E2126; --card:#1E2126; --band:#1E2126; --band-deep:#191C21;
     --rule:#33383E; --rule-soft:#2A2E33; --rule-strong:#4D5159;
     --ink:#EEF0F4; --ink-2:#DDE0E5; --txt:#C3C7CE; --dim:#9498A0; --accent:var(--amber);
   }
   ========================================================================== */

/* ---- Turning turbines on the home hero (v1) ----
   The SVG sits inside .hero-img, so it zooms with the photo. On desktop the photo is
   stretched 100% 100%, so the layer simply fills the box; under 1023px the photo is
   "cover", and hero-turbines.js sizes the layer to match. Clockwise, one turn in ~9-10s. */
.hero-turbines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.ht-rotor{transform-box:fill-box;transform-origin:center;animation:ht-spin 10s linear infinite;}
.hero-turbines.paused .ht-rotor{animation-play-state:paused;}
@keyframes ht-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.ht-rotor{animation:none;}}

/* ==========================================================================
   CLIENT ROUND, 13 Oct 2026 (v1)
   ========================================================================== */

/* ---- 1. Bigger logo on the home page header (client: "increase the logo size").
   50px -> 70px. Only the home header (.nav-over); inner pages keep the 46px white bar.
   --nav-h grows by the same 20px so the hero copy still clears the menu. ---- */
.nav-over .nav-logo{height:70px;}
body:has(.nav-over){--nav-h:130px;}   /* 40 top pad + 70 logo + 20 bottom pad */
@media (max-width:620px){
  .nav-over .nav-logo{height:56px;}   /* phone: 56px still beats the old 50px and leaves room for Menu */
  body:has(.nav-over){--nav-h:116px;}
}

/* ---- 2. Justified body text (client: "end to end alignment"). Body paragraphs only;
   headings, buttons, card captions, labels and short card text stay left-aligned.
   Hyphenation stops wide gaps on narrow screens (html lang="en-IN"). The last line of each
   paragraph stays left, as in print. ---- */
.p,.prose p,.prose li,.hero-in > p,.faq .a,.foot-cta-copy p,.person p,.plant-b p,.lede,.duo-c > .p{
  text-align:justify;text-align-last:left;}
/* word breaks only where the column is narrow; wide columns justify cleanly without them */
@media (max-width:820px){
  .p,.prose p,.prose li,.hero-in > p,.faq .a,.foot-cta-copy p,.person p,.plant-b p,.lede,.duo-c > .p{hyphens:auto;-webkit-hyphens:auto;}
}
.person p{hyphens:auto;-webkit-hyphens:auto;}   /* bio cards are narrow at every width */


/* ---- 4. Virtual view overlay (the v2 3D plant in the v1 look) ----
   Full screen over the page. Desktop: control panel on the right, live strip bottom-left.
   Phones (<=820px): live strip under the top bar, control panel as a bottom sheet, the plant
   rides up between them (virtual-view.js offsets the camera). html.vv-lock stops the page
   scrolling underneath. */
html.vv-lock,html.vv-lock body{overflow:hidden;overscroll-behavior:none;}
html.vv-lock .float{visibility:hidden;}
.vv{position:fixed;inset:0;z-index:150;background:var(--slate-025);color:var(--txt);}
.vv[hidden]{display:none;}
.vv three-d-stage{position:absolute;inset:0;width:100%;height:100%;}
.vv-bar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px var(--gut);pointer-events:none;
  background:linear-gradient(180deg,rgba(245,247,249,.94) 0,rgba(245,247,249,.75) 60%,rgba(245,247,249,0) 100%);}
.vv-bar > *{pointer-events:auto;}
.vv-title{display:flex;flex-direction:column;gap:2px;}
.vv-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ember);}
.vv-title b{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.05;color:var(--ink);}
.vv-x{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:2px;cursor:pointer;
  background:var(--navy-900);color:#fff;border:0;font-family:var(--sans);font-size:15px;font-weight:600;}
.vv-x:hover{background:#12345C;}
.vv-x span[aria-hidden]{font-size:20px;line-height:1;}
.vv-strip{position:absolute;z-index:3;left:var(--gut);bottom:20px;display:flex;gap:22px;align-items:flex-start;
  padding:14px 18px;background:rgba(255,255,255,.92);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 10px 26px rgba(11,36,64,.12);}
.vv-s{display:flex;flex-direction:column;gap:3px;min-width:64px;}
.vv-l{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.vv-live{width:14px;height:2px;background:var(--orange);}
.vv-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.vv-v{font-family:var(--mono);font-weight:500;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.vv-v small{font-size:11px;color:var(--dim);margin-left:3px;}
.vv-soc{height:4px;border-radius:2px;background:var(--slate-100);overflow:hidden;}
.vv-soc-fill{height:100%;width:0;background:#1E9E6A;transition:width .24s ease-out;}
.vv-panel{position:absolute;z-index:3;top:88px;right:var(--gut);width:310px;max-height:calc(100% - 108px);overflow-y:auto;
  overscroll-behavior:contain;padding:18px 20px;border-radius:3px;background:var(--navy-900);color:#C9D0D8;font-size:14px;
  box-shadow:0 18px 40px rgba(11,36,64,.3);display:flex;flex-direction:column;gap:13px;}
.vv-spec{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72);}
.vv-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:11px 0;border-block:1px solid rgba(255,255,255,.14);}
.vv-kpis > div{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#93A3B5;}
.vv-kpis > div > span{font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:none;color:#fff;font-variant-numeric:tabular-nums;}
.vv-kpis > div > .vv-bess{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#93A3B5;}
.vv-kpis #bessMw{color:#fff;font-size:13px;letter-spacing:0;}
.vv-kpis span.charging{color:#6FD3A8;}
.vv-kpis span.discharging{color:var(--orange);}
.vv-ctrl{display:flex;flex-direction:column;gap:6px;}
.vv-row{display:flex;justify-content:space-between;font-weight:600;color:rgba(255,255,255,.88);}
.vv-row output{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:#fff;}
.vv-panel input[type=range]{width:100%;margin:0;accent-color:var(--orange);}
.vv-switches{display:flex;flex-direction:column;gap:9px;}
.vv-switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500;color:rgba(255,255,255,.88);position:relative;}
.vv-switch input{position:absolute;opacity:0;pointer-events:none;}
.vv-switch .ui{width:34px;height:18px;border-radius:2px;background:rgba(255,255,255,.22);position:relative;transition:background .2s;flex:none;}
.vv-switch .ui::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:1px;background:#fff;transition:transform .2s ease;}
.vv-switch input:checked + .ui{background:var(--orange);}
.vv-switch input:checked + .ui::after{transform:translateX(16px);}
.vv-switch input:focus-visible + .ui{outline:2px solid var(--orange);outline-offset:2px;}
.vv-switch input:disabled ~ *{opacity:.45;}
.vv-msg{display:none;position:absolute;z-index:4;inset:0;align-items:center;justify-content:center;padding:32px;text-align:center;
  font-size:16px;color:var(--ink);background:var(--slate-025);}
.vv.vv-failed .vv-msg{display:flex;}
.vv.vv-failed .vv-strip,.vv.vv-failed .vv-panel{display:none;}
.vv:not(.vv-ready):not(.vv-failed)::after{content:"Loading the plant\2026";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
#tip{position:fixed;z-index:160;pointer-events:none;opacity:0;transition:opacity .14s;background:#fff;color:var(--txt);
  border:1px solid var(--rule);border-radius:3px;padding:10px 12px;font-size:13px;box-shadow:0 10px 24px rgba(11,36,64,.16);
  min-width:210px;display:flex;flex-direction:column;gap:3px;}
#tip b{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:2px;}
#tip .row{display:flex;justify-content:space-between;gap:16px;color:var(--dim);}
#tip .row span:last-child{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums;}
#tip .act{margin-top:4px;font-size:12px;color:var(--ember);font-weight:600;}
@media (min-width:821px) and (max-height:760px){ .vv-spec{display:none;} }
@media (max-width:820px){
  .vv-bar{padding:12px 16px;}
  .vv-title b{font-size:19px;}
  .vv-x{padding:9px 13px;font-size:14px;}
  .vv-strip{left:12px;right:12px;bottom:auto;top:70px;gap:8px;padding:9px 12px;justify-content:space-between;}
  .vv-s{min-width:0;}
  .vv-l{font-size:9px;letter-spacing:.08em;}
  .vv-v{font-size:15px;}
  .vv-v small{font-size:10px;}
  .vv-panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:42vh;max-height:42dvh;border-radius:3px 3px 0 0;gap:11px;
    padding:12px 18px calc(16px + env(safe-area-inset-bottom));}
  .vv-panel::before{content:"";align-self:center;flex:none;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);}
  .vv-spec{display:none;}
}
@media (max-width:380px){ .vv-s:first-child{display:none;} }

/* ---- 5. Projects page: on-site / open access split, status tags, image credit label ---- */
.proj-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.plant-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;border-radius:2px;}
.plant-meta .st-build{background:var(--sun);border-color:var(--sun-rule);color:var(--ember);}
.plant-fig{position:relative;margin:0;min-height:230px;}
.plant-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.img-note{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:rgba(11,36,64,.72);padding:5px 8px;border-radius:2px;}
@media (max-width:820px){ .plant-fig{min-height:0;aspect-ratio:16/9;} }
.oa-total{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;padding:18px 22px;border:1px solid var(--rule);border-radius:3px;background:var(--card);}
.oa-total div{display:flex;flex-direction:column;gap:3px;}
.oa-total span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);}
.oa-total b{font-family:var(--mono);font-weight:500;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;}

/* ---- 6. Contact form: required fields carry a star ---- */
.field label .req{color:var(--ember);margin-left:3px;}
.form-note{grid-column:1/-1;font-size:13px;color:var(--dim);margin-top:-4px;}
.plant-pending{background:var(--navy-900);display:flex;align-items:center;justify-content:center;padding:28px;}
.plant-pending > div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.plant-pending b{font-family:var(--mono);font-weight:500;font-size:clamp(34px,4vw,46px);color:#fff;font-variant-numeric:tabular-nums;}
.plant-pending span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);}
.plant-pending i{font-style:normal;font-size:13.5px;color:#C9D0D8;}

/* ---- 7. About Us: company facts row and component list (13 Oct) ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;margin-top:clamp(36px,5vw,56px);
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;}
.facts > div{background:var(--card);padding:20px 22px;display:flex;flex-direction:column;gap:5px;}
.facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.facts b{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.1;color:var(--ink);}
.facts i{font-style:normal;font-size:14px;color:var(--txt);}
.spec-list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--rule);}
.spec-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);}
.spec-list b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);padding-top:3px;}
.spec-list span{font-size:15.5px;line-height:1.6;}
@media (max-width:560px){ .spec-list li{grid-template-columns:1fr;gap:4px;} }
.plant-meta span:first-child{text-transform:none;letter-spacing:.06em;}   /* keeps "MWp" from reading "MWP" */

/* ---- 8. Projects: plant cards stand apart (13 Oct, client: "all stuck together") ----
   Was one stacked block with 1px rules between plants. Now each plant is its own card with
   clear air between cards, and the photo sits inset in the card with space round it. */
.plants{gap:clamp(22px,3vw,34px);background:none;border:0;border-radius:0;overflow:visible;}
.plant{border:1px solid var(--rule);border-radius:3px;padding:clamp(12px,1.4vw,16px);gap:clamp(16px,2.4vw,30px);
  box-shadow:0 1px 2px rgba(11,36,64,.04),0 10px 26px rgba(11,36,64,.06);}
.plant-fig{border-radius:2px;overflow:hidden;}
.plant-b{padding:clamp(6px,1.2vw,14px) clamp(6px,1.4vw,18px) clamp(6px,1.2vw,14px) 0;}
@media (max-width:820px){ .plant-b{padding:4px 6px 8px;} }

/* ==== Hero copy legibility (13 Oct 2026) ====
   The hero paragraph was hard to read over the bright solar field. Chosen fix: one soft
   navy shade behind the whole copy group (headline, paragraph, buttons), with no edges.
   Tried and dropped: a glass box behind the paragraph only (looked boxed and unbalanced),
   and a fade from the left edge. Worst-10% text contrast at 1440px went 2.5 -> 5.3.
   To undo: delete this block, or restore fractal.css.pre-hero-legibility-2026-10-13.bak. */
/* 573px = the width of the three hero buttons in a row in Manrope, at every width (measured),
   so the copy group has one left edge and one right edge. Re-measure if the buttons change.
   text-wrap:pretty stops a single word sitting alone on the last line. */
.hero-raw .hero-in > p{max-width:min(573px,100%);text-wrap:pretty;}
/* a feathered ellipse of Navy 900, centred on the copy. It sits inside .hero-in (z-index 2),
   so it is above the photo and the ribbon and below the text. The right side of the
   photograph - turbines, sunrise - is untouched. */
.hero-raw .hero-in::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-14%;width:88%;top:16%;bottom:-6%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,36,64,.58) 0%,rgba(11,36,64,.44) 40%,rgba(11,36,64,.18) 72%,rgba(11,36,64,0) 100%);}
@media (max-width:1023px){
  .hero-raw .hero-in::before{left:-30%;width:160%;top:14%;bottom:-12%;}
}

/* ==== Virtual plant card (13 Oct 2026) ====
   The 3D plant moved out of the hero button and into the "Locally generated" section, in place
   of the tracker photo. In the card (#vv inside .vv-card) it plays hands-off: a day runs past,
   the camera drifts, the live numbers sit in a glass strip on top, and a glass panel at the foot
   carries the "Step inside" button. Opened, vv-open.js moves #vv to <body> and adds .vv-open,
   so the full-screen rules in block 4 apply unchanged. vv-poster.jpg shows until the scene is
   ready, and stays if it never is. To undo: delete this block and restore the
   *.pre-vv-card-2026-10-13.bak files (index.html, fractal.css, vv-open.js, virtual-view.js). */
@media (min-width:861px){ .split-half{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }   /* 50-50, this section only; phones stay one column */
.vv-card{position:relative;isolation:isolate;min-height:520px;cursor:pointer;
  background:linear-gradient(180deg,#C9DCEB 0%,#EAF2F8 62%,#B7C79A 100%);
  box-shadow:0 1px 2px rgba(11,36,64,.06),0 24px 54px rgba(11,36,64,.16);}
.media img.vv-poster{position:absolute;inset:0;object-position:50% 50%;}
.vv-card .vv{position:absolute;inset:0;z-index:1;background:none;}
.vv three-d-stage{opacity:0;transition:opacity .9s ease;}
.vv.vv-ready three-d-stage{opacity:1;}
.vv-card three-d-stage{pointer-events:none;}                              /* page scroll and clicks pass through */
.vv-card .vv-bar,.vv-card .vv-panel,.vv-card .vv-msg{display:none;}
.vv-card .vv:not(.vv-ready):not(.vv-failed)::after{display:none;}
/* glass: frosted white over the sky, solid white where blur is not supported */
.vv-card .vv-strip,.vv-glass{
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.7);border-radius:3px;
  box-shadow:0 10px 28px rgba(11,36,64,.14);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .vv-card .vv-strip,.vv-glass{background:rgba(255,255,255,.93);}
}
.vv-card .vv-strip{top:14px;left:14px;right:14px;bottom:auto;gap:10px;padding:10px 14px;justify-content:space-between;}
.vv-card .vv-s{min-width:0;}
.vv-card .vv-l{font-size:9.5px;letter-spacing:.1em;}
.vv-card .vv-v{font-size:17px;}
.vv-card .vv-v small{font-size:10px;}
.vv-glass{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:6px 18px;padding:16px 18px;cursor:auto;}
.vv-glass .vv-k{grid-column:1;display:flex;align-items:center;gap:8px;}
.vv-cap{grid-column:1;margin:0;font-size:14.5px;line-height:1.45;color:var(--ink);}
.vv-go{grid-column:2;grid-row:1 / span 2;white-space:nowrap;}
.vv-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex:none;}
.vv-card:hover .vv-go{background:var(--orange-hover);}
@media (max-width:1100px){                                                /* card narrower than ~500px: stack */
  .vv-glass{grid-template-columns:1fr;}
  .vv-go{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px;}
}
@media (max-width:860px){ .media.vv-card{aspect-ratio:4/5;min-height:0;} }
@media (max-width:480px){
  .vv-card .vv-s:first-child,.vv-card .vv-s:last-child{display:none;}  /* phones: Solar, Wind, Battery */
  .media.vv-card{aspect-ratio:2/3;}                                   /* taller, so the plant shows between the two glass panels */
  .vv-glass{padding:14px;}
  .vv-cap{font-size:13.5px;}
  .vv-go{justify-self:stretch;justify-content:center;}
}

/* ---------- Home projects album (client, 13 Oct 2026) ----------
   .grid-3: 3 columns on desktop, 2 on tablet, 1 on phones. 8 plants + the "...and many more" cell.
   .card-zoom: a link over the whole photo; /assets/js/album.js turns it into the lightbox. */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1023px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .grid-3{grid-template-columns:1fr;} }
.card-zoom{position:absolute;inset:0;z-index:3;cursor:zoom-in;}
.card-zoom:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;}
.card img{transition:transform .5s ease;}
.card:hover img{transform:scale(1.035);}
.card .img-note{left:auto;right:10px;top:10px;bottom:auto;}
.card-more{background:var(--navy-900);flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;padding:24px;}
.card-more::after{display:none;}
.card-more p{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.1;color:#fff;}
.card-more a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);text-decoration:none;}
.card-more a:hover{text-decoration:underline;}
@media (max-width:640px){ .card-more{aspect-ratio:auto;min-height:140px;} }
@media (prefers-reduced-motion:reduce){ .card img{transition:none;} .card:hover img{transform:none;} }

.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(5,14,26,.94);color:#fff;
  display:none;align-items:center;justify-content:center;}
.lb[open]{display:flex;}
.lb::backdrop{background:rgba(5,14,26,.94);}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1200px,calc(100vw - 140px));}
.lb-fig img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:3px;}
.lb-cap{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#C6D8E0;text-align:center;}
.lb-cap b{display:block;font-family:var(--display);font-size:20px;letter-spacing:0;text-transform:none;color:#fff;margin-bottom:4px;}
.lb-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#8FA3B5;}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;}
.lb-btn:hover{background:rgba(255,255,255,.18);}
.lb-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
.lb-x{top:18px;right:18px;}
.lb-prev{left:18px;top:50%;transform:translateY(-50%);}
.lb-next{right:18px;top:50%;transform:translateY(-50%);}
@media (max-width:640px){
  .lb-fig{max-width:calc(100vw - 24px);}
  .lb-fig img{max-height:calc(100vh - 200px);}
  .lb-prev,.lb-next{top:auto;bottom:22px;transform:none;}
  .lb-prev{left:calc(50% - 60px);} .lb-next{right:calc(50% - 60px);}
}

/* Step titles (client, 13 Oct 2026): "Build & / Commissioning" must stay on 2 lines. "Commissioning" is
   ~181px at 22px, wider than a 5-column step, so the title shrinks with its box (min 18px). */
.step{container-type:inline-size;}
@supports (font-size:1cqi){ .step strong{font-size:clamp(18px,12cqi,22px);} }

/* Team headshots (About page, 13 Oct 2026): round photos replace the monogram tiles. Sources are cropped
   squares in assets/img/team-*.jpg (224-400px); keep the display size at or under ~110px. */
.person .ph{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--surface);
  box-shadow:0 0 0 1px var(--rule);}
/* 14 Oct 2026 (client): photo, name and title centred in the card; the bio below keeps its own alignment. */
.person .ph,.person h3,.person .role{align-self:center;text-align:center;}

/* Projects page "...and many more" row (13 Oct 2026): navy panel like the Anthea placeholder, display type. */
.plant-more b{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:-.01em;}
.plant-more-row .plant-b{justify-content:center;}
@media (max-width:820px){ .plant-fig.plant-more{aspect-ratio:auto;min-height:150px;} }