/* =====================================================================
   GREEN POWER LIMITED: shared design system
   Matches the imported Claude Design landing page (index.html) exactly.
   Used by every page except index.html (which keeps its inline styles).
   ===================================================================== */

:root{
  --bg:#050706;
  --panel-a:#0B100D;
  --panel-b:#070A08;
  --panel:#0E1310;
  --text:#F2F5F3;
  --accent:#00B25C;
  --red:#E8232A;

  --t-62:rgba(242,245,243,0.62);
  --t-58:rgba(242,245,243,0.58);
  --t-50:rgba(242,245,243,0.50);
  --t-45:rgba(242,245,243,0.45);
  --t-38:rgba(242,245,243,0.38);

  --line:rgba(242,245,243,0.09);
  --line-soft:rgba(242,245,243,0.07);
  --line-strong:rgba(242,245,243,0.18);

  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw:1360px;
  --gut:28px;
  --nav-h:58px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* stops the grey flash box on tap without removing any real focus ring */
  -webkit-tap-highlight-color:transparent;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* keeps a scroll that reaches the end of an overlay from dragging the
     page behind it, and kills the rubber-band chain on iOS */
  overscroll-behavior-y:none;
}
a{color:var(--text); text-decoration:none}
a:hover{color:var(--accent)}
/* Every <img> now carries its real pixel width/height so the browser can
   reserve the correct box before the file arrives - that is what stops the
   page jumping around as photos load. height:auto is what keeps those
   attributes from also fixing the rendered height: the ratio is honoured,
   the size still comes from the layout. Rules that set an explicit height
   (.card-img img, .pj-vis img, inline object-fit covers) are more specific
   and still win. */
img{display:block; max-width:100%; height:auto}
::selection{background:var(--accent); color:#050706}
input,textarea{font-family:inherit}
@keyframes gpPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ambient top glow, same as landing */
body::before{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%, rgba(0,178,92,0.10), rgba(0,0,0,0) 60%);
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--gut);
  background:rgba(5,7,6,0.72); backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid rgba(242,245,243,0.08);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.nav-logo img{height:38px; width:auto}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{font-size:12.5px; letter-spacing:.01em; color:var(--t-62); transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-cta{
  font-size:12.5px; font-weight:500; padding:7px 16px; border-radius:100px;
  background:var(--accent); color:#04170D !important; transition:filter .2s;
}
.nav-cta:hover{filter:brightness(1.12)}
.nav-burger{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:10px; background:transparent;
  color:var(--text); cursor:pointer;
}
.nav-burger svg{width:18px; height:18px}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:120; display:none}
.drawer.open{display:block}
.drawer-scrim{position:absolute; inset:0; background:rgba(3,5,4,.72); backdrop-filter:blur(6px)}
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(84vw,340px);
  background:linear-gradient(180deg,var(--panel-a),var(--bg));
  border-left:1px solid var(--line); padding:22px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
  transform:translateX(100%); transition:transform .36s var(--ease);
  /* scrolling past the end of the menu must not start dragging the page
     underneath it, and iOS needs the momentum hint to feel native */
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.drawer.open .drawer-panel{transform:none}
.drawer-panel .d-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.drawer-panel a{padding:13px 8px; border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--text)}
.drawer-panel a.active{color:var(--accent)}
.drawer-panel .btn{margin-top:16px; justify-content:center}

/* ===================== LAYOUT ===================== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.sec{position:relative; padding:110px var(--gut)}
.sec-tight{padding:78px var(--gut)}
.sec-line{border-top:1px solid rgba(242,245,243,0.08)}
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.center{text-align:center}

/* ===================== TYPE ===================== */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0 0 20px; display:block;
}
.eyebrow.red{color:var(--red)}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.04em; line-height:1.02; text-wrap:balance}
.h-page{font-size:clamp(40px,7vw,96px); line-height:.96; letter-spacing:-.045em}
.h-sec{font-size:clamp(32px,4.2vw,62px)}
.h-sub{font-size:clamp(24px,2.4vw,34px); letter-spacing:-.03em; font-weight:600}
.lead{
  margin:24px 0 0; max-width:620px; font-size:clamp(16px,1.5vw,19px); line-height:1.6;
  color:rgba(242,245,243,0.66); text-wrap:pretty;
}
.center .lead{margin-left:auto; margin-right:auto}
p{text-wrap:pretty}
.muted{color:var(--t-58); font-size:16px; line-height:1.6; margin:14px 0 0}
.mono-note{font-family:var(--mono); font-size:12.5px; color:var(--t-45)}

/* ===================== PAGE HERO ===================== */
.phero{
  position:relative; padding:calc(var(--nav-h) + 96px) var(--gut) 0; overflow:hidden;
}
.phero-inner{max-width:var(--maxw); margin:0 auto; position:relative; z-index:2}
.crumb{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t-45); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.crumb a{color:var(--t-45)}
.crumb a:hover{color:var(--accent)}
.crumb .bk{width:11px; height:11px; border-left:2px solid var(--red); border-top:2px solid var(--red)}
.phero-vis{
  position:relative; max-width:var(--maxw); margin:64px auto 0; aspect-ratio:16/7;
  border-radius:22px 22px 0 0; overflow:hidden;
  border:1px solid rgba(242,245,243,0.1); border-bottom:none; background:var(--panel-b);
}
.phero-vis img{width:100%; height:100%; object-fit:cover; filter:saturate(1) brightness(.95) contrast(1.01)}
.phero-vis::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,6,.5) 0%, rgba(5,7,6,.06) 34%, rgba(5,7,6,.16) 70%, rgba(5,7,6,.78) 100%);
}
.phero-tag{
  position:absolute; z-index:2; left:clamp(30px,5.4vw,96px); right:clamp(30px,5.4vw,96px); bottom:22px; display:flex; align-items:center; gap:10px;
}
.phero-tag .dot{width:6px; height:6px; border-radius:100px; background:var(--accent); animation:gpPulse 2.4s ease-in-out infinite}
.phero-tag span{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,245,243,.7)}

/* ===================== STAT STRIP ===================== */
.strip{
  position:relative; z-index:2; background:var(--bg);
  border-top:1px solid rgba(242,245,243,0.1); border-bottom:1px solid rgba(242,245,243,0.1);
}
.strip-in{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.strip-cell{padding:30px 26px; border-right:1px solid rgba(242,245,243,0.08)}
.strip-cell:last-child{border-right:none}
.strip-cell .n{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:9px}
.strip-cell .t{font-size:15px; font-weight:500}
.strip-cell .s{font-size:13.5px; color:var(--t-50); margin-top:4px}

/* ===================== CARDS ===================== */
.card{
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  transition:border-color .4s, transform .4s var(--ease);
}
.card:hover{border-color:rgba(242,245,243,0.18)}
.card-img{position:relative; aspect-ratio:16/9; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; filter:saturate(.92) brightness(.94); transition:transform 1s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:30px 32px 34px}
.card-head{display:flex; align-items:baseline; gap:14px}
.card-head .num{font-family:var(--mono); font-size:12px; color:var(--accent)}
.card-body p{margin:14px 0 0; font-size:16px; line-height:1.6; color:rgba(242,245,243,0.6); max-width:520px}

/* compact bordered tile (no image) */
.tile{border:1px solid var(--line); border-radius:22px; padding:30px 30px 34px; background:linear-gradient(180deg,var(--panel-a),var(--panel-b))}
.tile .num{font-family:var(--mono); font-size:40px; letter-spacing:-.02em; color:rgba(242,245,243,0.16); line-height:1}
.tile h3{margin:22px 0 0; font-size:23px; letter-spacing:-.025em; font-weight:600}
.tile p{margin:12px 0 0; font-size:15.5px; line-height:1.6; color:var(--t-58)}
.tile.hl{border-color:rgba(0,178,92,0.28); background:linear-gradient(180deg,rgba(0,178,92,0.1),rgba(7,10,8,0.9))}
.tile.hl .num{color:var(--accent)}

/* list rows (specs / bullets) */
.rows{display:flex; flex-direction:column}
.row{padding:24px 0; border-top:1px solid rgba(242,245,243,0.1); display:flex; gap:20px; align-items:baseline}
.row:last-child{border-bottom:1px solid rgba(242,245,243,0.1)}
.row .k{font-family:var(--mono); font-size:12px; color:var(--accent); flex:0 0 26px}
.row h4{margin:0; font-size:18px; font-weight:600; letter-spacing:-.02em}
.row p{margin:8px 0 0; font-size:15.5px; line-height:1.55; color:rgba(242,245,243,0.55)}

/* simple bullet line */
.bullets{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.bullets li{
  display:flex; gap:14px; align-items:flex-start; padding:15px 0;
  border-bottom:1px solid var(--line-soft); font-size:15.5px; line-height:1.55; color:rgba(242,245,243,0.72);
}
.bullets li::before{content:""; flex:none; width:6px; height:6px; margin-top:8px; border-radius:100px; background:var(--accent)}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  padding:13px 26px; border-radius:100px; transition:filter .2s, border-color .2s, background .2s;
}
.btn-primary{background:var(--accent); color:#04170D !important}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{border:1px solid rgba(242,245,243,0.2); color:var(--text)}
.btn-ghost:hover{border-color:rgba(242,245,243,0.45); color:var(--text)}
.link-accent{font-size:14px; font-weight:500; color:var(--accent)}
.link-accent:hover{color:var(--text)}

/* ===================== CHIPS / LOGOS ===================== */
.chips{display:flex; flex-wrap:wrap; gap:12px}
.chip{
  font-family:var(--mono); font-size:12px; padding:8px 15px;
  border:1px solid var(--line-strong); border-radius:100px; color:rgba(242,245,243,0.75);
}
/* 4 across on desktop so the eight cells make two full rows */
.logo-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:14px}
.logo-cell{
  background:#fff; border-radius:16px; height:132px; display:grid; place-items:center; padding:24px;
  transition:transform .3s var(--ease);
}
.logo-cell:hover{transform:translateY(-4px)}
.logo-cell img{max-height:78px; max-width:100%; width:auto; object-fit:contain}
.logo-cell.dark{
  background:linear-gradient(160deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);
  color:var(--accent); font-family:var(--mono); font-size:12.5px; text-align:center; line-height:1.5;
}

/* ===================== REPRESENTATIONS / ENLISTMENTS ===================== */
.rep-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(196px,100%),1fr)); gap:12px}
.rep-cell{
  border:1px solid var(--line); border-radius:14px; min-height:78px; padding:16px 18px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:14.5px; font-weight:500; letter-spacing:-.015em; line-height:1.3; color:rgba(242,245,243,.82);
  transition:border-color .35s var(--ease), transform .35s var(--ease), color .35s ease;
}
.rep-cell:hover{border-color:rgba(0,178,92,.34); color:var(--text); transform:translateY(-3px)}
.rep-cell.more{
  border-color:rgba(0,178,92,.3); background:linear-gradient(170deg,rgba(0,178,92,.12),rgba(7,10,8,.9));
  color:var(--accent); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}

/* "also represented" run-on lists */
.rep-more{margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:32px}
.rep-more .ttl{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.rep-more p{margin:0; font-size:14.5px; line-height:1.75; color:var(--t-58)}

/* paired customer / enlistment lists */
.list2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:0 48px}
.list2 .col{display:flex; flex-direction:column}
.list2 .ttl{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  padding-bottom:14px; border-bottom:1px solid rgba(0,178,92,.35);
}
.list2 li{list-style:none}
.list2 ul{margin:0; padding:0}
.list2 li{
  padding:15px 0; border-bottom:1px solid var(--line);
  font-size:15.5px; line-height:1.5; color:rgba(242,245,243,.78);
}
.note-panel{
  margin-top:34px; border:1px solid rgba(0,178,92,.26); border-left:3px solid var(--accent);
  border-radius:16px; padding:24px 26px; background:linear-gradient(180deg,rgba(0,178,92,.08),rgba(7,10,8,.6));
}
.note-panel p{margin:0; font-size:15.5px; line-height:1.65; color:rgba(242,245,243,.8); max-width:760px}

/* ===================== DOCS ===================== */
.doc{
  display:flex; align-items:center; gap:18px; padding:20px 22px;
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  transition:border-color .3s, transform .3s var(--ease);
}
.doc:hover{border-color:rgba(0,178,92,0.3); transform:translateX(3px)}
.doc-ico{
  flex:none; width:44px; height:52px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(160deg,#2a1416,#160c0d); border:1px solid rgba(232,35,42,0.35);
  color:#ff6b73; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.06em;
}
.doc-info{flex:1; min-width:0}
.doc-info .dn{font-size:16px; font-weight:500; letter-spacing:-.01em}
.doc-info .dm{font-family:var(--mono); font-size:12px; color:var(--t-45); margin-top:5px}
.doc-acts{display:flex; gap:8px; flex:none}
.doc-btn{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--t-62); background:transparent; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.doc-btn:hover{border-color:var(--accent); color:var(--accent)}
.doc-btn svg{width:17px; height:17px}

/* PDF viewer overlay */
.pdfv{position:fixed; inset:0; z-index:200; display:none; flex-direction:column; background:rgba(3,5,4,.94)}
.pdfv.open{display:flex}
.pdfv-bar{display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--panel-b)}
.pdfv-bar .nm{flex:1; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdfv iframe{flex:1; width:100%; border:0; background:#333}

/* ===================== FORM ===================== */
.form{border:1px solid rgba(242,245,243,0.1); border-radius:24px; padding:clamp(26px,3vw,42px); background:rgba(11,16,13,0.7)}
.field{display:block; margin-bottom:18px}
.field span{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-45); margin-bottom:9px;
}
.field input,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px; border:1px solid rgba(242,245,243,0.14);
  background:rgba(5,7,6,0.6); color:var(--text); font-size:15px; outline:none; transition:border-color .2s;
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:120px; resize:vertical}
.form button{
  width:100%; padding:14px 22px; border:none; border-radius:100px; background:var(--accent);
  color:#04170D; font-size:15px; font-weight:600; cursor:pointer; transition:filter .2s;
}
.form button:hover{filter:brightness(1.12)}

/* contact info blocks */
.cinfo{display:flex; flex-direction:column; gap:22px; margin-top:40px}
.cinfo .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t-38); margin-bottom:7px}
.cinfo .val{font-size:16px; color:rgba(242,245,243,0.85); line-height:1.6}

/* ===================== PORTRAIT ===================== */
.person{border:1px solid var(--line); border-radius:24px; overflow:hidden; background:linear-gradient(180deg,var(--panel-a),var(--panel-b))}
.person-photo{aspect-ratio:4/5; overflow:hidden; background:var(--panel)}
.person-photo img{width:100%; height:100%; object-fit:cover; object-position:top center}
.person-body{padding:24px 26px 28px}
.person-body .nm{font-size:19px; font-weight:600; letter-spacing:-.02em}
.person-body .rl{font-family:var(--mono); font-size:12px; color:var(--accent); margin-top:7px}
.person-body p{margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--t-58)}

/* certification tiles: equal height regardless of certificate orientation */
.cert-grid{display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:26px}
.cert-card{
  display:flex; align-items:center; gap:clamp(16px,3vw,28px); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:24px; padding:clamp(20px,4vw,32px);
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
}
/* fixed HEIGHT, auto width: a portrait certificate simply renders narrower */
.cert-card img{height:99px; width:auto; border-radius:10px; border:1px solid var(--line)}
.cert-card .txt{flex:1; min-width:min(260px,100%)}
@media (max-width:640px){ .cert-card img{height:84px} }

/* ===================== CTA BAND ===================== */
.cta{
  position:relative; padding:110px var(--gut); text-align:center;
  border-top:1px solid rgba(242,245,243,0.08);
  background:linear-gradient(180deg, rgba(0,178,92,0.06), rgba(5,7,6,0) 55%);
}
.cta h2{font-size:clamp(32px,4.6vw,64px); line-height:1.0}
.cta .acts{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ===================== FOOTER ===================== */
.foot{border-top:1px solid rgba(242,245,243,0.08); padding:56px var(--gut) 44px}
.foot-in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap}
.foot-brand img{height:30px; width:auto; margin-bottom:16px}
.foot-brand p{margin:0; max-width:300px; font-size:13.5px; line-height:1.6; color:var(--t-45)}
.foot-cols{display:flex; gap:64px; flex-wrap:wrap}
.foot-col{display:flex; flex-direction:column; gap:11px}
.foot-col .ttl{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t-38)}
.foot-col a{font-size:14px; color:rgba(242,245,243,0.72)}
.foot-bot{
  max-width:var(--maxw); margin:44px auto 0; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.foot-bot span{font-family:var(--mono); font-size:11.5px; color:rgba(242,245,243,0.35)}

/* ===================== REVEAL ===================== */
.rev{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s var(--ease)}
.rev.in{opacity:1; transform:none}

/* ===================== SCROLL SCENES (home-page motion) ===================== */
/* hero */
.scene-hero{position:relative; padding:calc(var(--nav-h) + 96px) var(--gut) 0}
.scene-hero .hero-text{max-width:var(--maxw); margin:0 auto; will-change:transform,opacity}
.scene-hero .hero-vis{
  position:relative; max-width:var(--maxw); margin:64px auto 0; aspect-ratio:16/7;
  border-radius:22px 22px 0 0; overflow:hidden;
  border:1px solid rgba(242,245,243,0.1); border-bottom:none; background:var(--panel-b);
  will-change:transform;
}
.scene-hero .hero-vis img{width:100%; height:100%; object-fit:cover; filter:saturate(1) brightness(.95) contrast(1.01)}
.scene-hero .hero-vis::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,6,.5) 0%, rgba(5,7,6,.06) 34%, rgba(5,7,6,.16) 70%, rgba(5,7,6,.8) 100%);
}

/* statement */
.scene-statement{position:relative; height:240vh}
.scene-statement .sticky{position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; justify-content:center; padding:0 var(--gut)}
.scene-statement p{
  margin:0; max-width:1120px; font-size:clamp(26px,4.2vw,62px); line-height:1.18;
  letter-spacing:-.03em; font-weight:600; text-wrap:pretty;
}
.scene-statement [data-word]{opacity:.14}

/* stack (pinned visual + caption bands) */
.scene-stack{position:relative; background:var(--bg)}
.scene-stack .sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center}
.stack-vis{
  position:relative; width:min(1500px,94vw); aspect-ratio:16/9; border-radius:28px; overflow:hidden;
  border:1px solid rgba(242,245,243,0.1); transform:scale(.72); will-change:transform;
}
.stack-vis .layer{position:absolute; inset:0; opacity:0; transition:opacity 1s cubic-bezier(.4,0,.2,1)}
.stack-vis .layer:first-of-type{opacity:1}
.stack-vis .layer img{width:100%; height:100%; object-fit:cover}
.stack-vis .grade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,6,0.14) 0%, rgba(5,7,6,0.74) 60%, rgba(5,7,6,0.95) 100%);
}
.stack-caps{position:absolute; left:0; right:0; bottom:0; padding:0 clamp(24px,5vw,78px) clamp(34px,5vw,66px)}
.stack-cap{opacity:0; transform:translateY(26px)}
.stack-cap + .stack-cap{position:absolute; left:0; right:0; bottom:clamp(34px,5vw,66px); padding:0 clamp(24px,5vw,78px)}
.stack-cap h2{font-size:clamp(28px,4.4vw,68px); line-height:1.02; max-width:900px}
.stack-cap p{margin:18px 0 0; max-width:560px; font-size:17px; line-height:1.55; color:rgba(242,245,243,0.7)}

/* track (horizontal) */
.scene-track{position:relative; background:var(--bg)}
.scene-track .sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.scene-track .t-head{padding:0 clamp(24px,5vw,78px); margin-bottom:46px}
.track-rail{display:flex; gap:22px; padding:0 clamp(24px,5vw,78px); will-change:transform}
.track-rail > *{flex:0 0 clamp(280px,30vw,420px)}
.track-bar{margin:48px clamp(24px,5vw,78px) 0; height:2px; background:rgba(242,245,243,0.1); position:relative}
.track-bar i{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--accent); display:block}

@media (prefers-reduced-motion:reduce){
  .scene-statement{height:auto}
  .scene-statement .sticky{position:relative; height:auto; padding:80px var(--gut)}
  .scene-statement [data-word]{opacity:1 !important}
  .scene-stack{height:auto !important}
  .scene-stack .sticky{position:relative; height:auto; padding:60px 0}
  .stack-vis{transform:none !important; width:100%; aspect-ratio:16/10}
  .stack-vis .layer{position:relative; opacity:1 !important; height:auto}
  .stack-caps{position:relative; padding:26px var(--gut) 0}
  .stack-cap,.stack-cap + .stack-cap{position:relative; opacity:1 !important; transform:none !important; bottom:auto; padding:0; margin-bottom:28px}
  .scene-track{height:auto !important}
  .scene-track .sticky{position:relative; height:auto; padding:60px 0}
  .track-rail{transform:none !important; flex-wrap:wrap; padding:0 var(--gut)}
  .track-rail > *{flex:1 1 280px}
}

/* =====================================================================
   PROJECT CARDS (projects.html)
   auto-FILL, not auto-fit: a lone card keeps its column width instead of
   stretching across the whole row and blowing its photo up.
   ===================================================================== */
.pj-grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(min(316px,100%),1fr))}
.pj-grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr)); gap:32px}
.pj-grid.four{grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr)); gap:22px}
/* a card with a real photograph earns two tracks, but only where the grid is
   wide enough that it stays a card rather than a banner */
@media (min-width:1280px){ .pj-grid.four .pj.span2{grid-column:span 2} }

.pj{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.pj:hover{border-color:rgba(0,178,92,0.30); transform:translateY(-4px)}
.pj-vis{position:relative; aspect-ratio:16/10; overflow:hidden; background:#0A0D0B}
.pj-vis img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.94) brightness(.94); transition:transform 1.1s var(--ease), filter .45s ease;
}
.pj:hover .pj-vis img{transform:scale(1.05); filter:saturate(1.04) brightness(1)}
/* scrim only needs to seat the two chips; backlit shots go muddy if it is heavier */
.pj-vis::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,6,.34) 0%,rgba(5,7,6,0) 40%,rgba(5,7,6,.56) 100%);
}

/* Panel for a project with no site photograph. Reads as an engineering
   drawing rather than a missing image: a turbine-rotor motif (radiating
   blades + concentric rings) struck in the accent green, with the capacity
   set over it. Purely CSS, so it costs nothing to load. */
.pj-vis.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:
    radial-gradient(120% 130% at 78% 116%, rgba(0,178,92,.20), transparent 62%),
    linear-gradient(158deg,#121A15 0%, #070A08 74%);
}
/* rotor: blades radiating from off-frame bottom-right, plus turbine rings */
.pj-vis.ph::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-conic-gradient(from 200deg at 78% 116%,
      rgba(0,178,92,.16) 0deg 1.6deg, transparent 1.6deg 7.2deg),
    repeating-radial-gradient(circle at 78% 116%,
      transparent 0 52px, rgba(242,245,243,.07) 52px 53px);
  -webkit-mask-image:radial-gradient(circle at 78% 116%, #000 12%, rgba(0,0,0,.55) 46%, transparent 82%);
  mask-image:radial-gradient(circle at 78% 116%, #000 12%, rgba(0,0,0,.55) 46%, transparent 82%);
}
/* fine engineering grid, very faint, top-left only */
.pj-vis.ph::after{
  content:""; position:absolute; inset:0; pointer-events:none; background:
    linear-gradient(rgba(242,245,243,.05) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, rgba(242,245,243,.05) 1px, transparent 1px) 0 0/34px 34px;
  -webkit-mask-image:linear-gradient(150deg, #000 0%, transparent 58%);
  mask-image:linear-gradient(150deg, #000 0%, transparent 58%);
}
.pj-vis.ph .ghost{
  position:relative; z-index:1; max-width:calc(100% - 32px); text-align:center;
  font-family:var(--mono); font-weight:500; font-size:clamp(28px,3.2vw,42px);
  line-height:1; letter-spacing:-.045em; color:#F2F5F3;
  text-shadow:0 0 46px rgba(0,178,92,.55), 0 2px 18px rgba(0,0,0,.5);
}
.pj-vis.ph .glabel{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,245,243,.55);
}
.pj-vis.ph .glabel::before,.pj-vis.ph .glabel::after{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,178,92,.65), transparent);
}

.pj-cap{
  position:absolute; z-index:2; left:16px; bottom:15px; padding:7px 12px; border-radius:100px;
  background:rgba(6,9,7,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(242,245,243,.14);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:rgba(242,245,243,.9);
}
.pj-st{
  position:absolute; z-index:2; right:14px; top:14px; display:flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:100px;
  background:rgba(6,9,7,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(242,245,243,.12);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,245,243,.7);
}
.pj-st i{width:5px; height:5px; border-radius:100px; background:var(--t-45); font-style:normal; flex:0 0 auto}
.pj-st.live{border-color:rgba(0,178,92,.36); color:#8CE3B4}
.pj-st.live i{background:var(--accent); animation:gpPulse 2.4s ease-in-out infinite}

.pj-body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1}
.pj-body h3{font-size:19px; font-weight:600; letter-spacing:-.025em; line-height:1.22}
.pj-client{margin:10px 0 0; font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.02em}
.pj-body p.d{margin:13px 0 0; font-size:14.5px; line-height:1.62; color:var(--t-58)}
.pj-when{
  margin-top:auto; padding-top:20px; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; color:var(--t-45);
}
.pj-when::before{content:""; flex:0 0 18px; height:1px; background:rgba(242,245,243,.22)}

/* featured (under construction) */
.pj.feat .pj-vis{aspect-ratio:16/9}
.pj.feat .pj-body{padding:30px 32px 30px}
.pj.feat .pj-body h3{font-size:24px; letter-spacing:-.03em}
.pj.feat .pj-body p.d{font-size:15.5px}
.pj.feat .pj-cap{font-size:12.5px; padding:8px 14px}

/* compact reference card (captive power / defence) */
.pj-ref{
  border:1px solid var(--line); border-radius:18px; padding:24px 24px 26px;
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b)); transition:border-color .4s var(--ease);
}
.pj-ref:hover{border-color:var(--line-strong)}
.pj-ref .k{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.pj-ref h3{margin:13px 0 0; font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.26}
.pj-ref p{margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--t-58)}

/* split section header: title left, lead right */
.sec-head{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:end}
.sec-head .lead{margin:0 0 5px; max-width:520px}

/* section jump bar */
.jumpbar{border-bottom:1px solid rgba(242,245,243,0.08); padding:16px var(--gut); background:var(--bg)}
.jump{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:10px}
.jump a{
  padding:9px 15px; border-radius:100px; border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t-58); transition:border-color .3s ease, color .3s ease;
}
.jump a:hover{border-color:rgba(0,178,92,.42); color:var(--accent)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* ===================== RESPONSIVE ===================== */
/* laptop */
@media (max-width:1200px){
  .sec{padding:96px var(--gut)}
  .cta{padding:96px var(--gut)}
}
/* tablet — nav collapses to the drawer */
@media (max-width:1024px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .sec{padding:86px var(--gut)}
  .cta{padding:86px var(--gut)}
  .phero-vis,.scene-hero .hero-vis{aspect-ratio:16/8}
  .card-body{padding:26px 26px 30px}
  .tile{padding:26px 26px 30px}
  .foot-cols{gap:44px}
}
/* large phone / small tablet */
@media (max-width:860px){
  :root{--gut:22px}
  .sec{padding:72px var(--gut)}
  .cta{padding:72px var(--gut)}
  .grid{gap:18px}
  .phero{padding-top:calc(var(--nav-h) + 58px)}
  .phero-vis,.scene-hero .hero-vis{margin-top:42px; aspect-ratio:4/3; border-radius:18px 18px 0 0}
  .phero-tag{left:18px; bottom:16px}
  .strip-cell{border-right:none; border-bottom:1px solid rgba(242,245,243,0.08); padding:24px 22px}
  .strip-cell:last-child{border-bottom:none}
  .logo-cell{height:96px; padding:16px}
  .logo-cell img{max-height:52px}
  .foot{padding:48px var(--gut) 38px}
  .foot-cols{gap:34px}
  .foot-brand p{max-width:none}
  .cinfo{margin-top:32px}
  /* scroll scenes */
  .scene-hero{padding-top:calc(var(--nav-h) + 58px)}
  .scene-statement{height:190vh}
  .scene-statement p{font-size:clamp(24px,6.4vw,38px)}
  .stack-vis{width:94vw; aspect-ratio:3/4; border-radius:20px}
  .stack-caps{padding:0 20px 26px}
  .stack-cap h2{font-size:clamp(23px,6.6vw,36px)}
  .stack-cap p{font-size:14.5px; max-width:none; margin-top:12px}
  .stack-cap + .stack-cap{bottom:26px; padding:0 20px}
  .scene-track .t-head{margin-bottom:28px; padding:0 20px}
  .track-rail{gap:16px; padding:0 20px}
  .track-rail > *{flex:0 0 80vw}
  .track-bar{margin:30px 20px 0}
}
/* phone */
@media (max-width:640px){
  :root{--gut:18px}
  .sec{padding:60px var(--gut)}
  .cta{padding:64px var(--gut)}
  .card-body{padding:22px 20px 26px}
  .card-body p{font-size:15px}
  .tile{padding:24px 22px 26px}
  .tile .num{font-size:32px}
  .tile h3{font-size:20px; margin-top:16px}
  .person-body{padding:20px 20px 24px}
  .doc{padding:16px 15px; gap:13px}
  .doc-ico{width:40px; height:46px}
  .doc-acts{gap:6px}
  .bullets li{font-size:15px; padding:13px 0}
  .row{gap:14px}
  .foot-bot{margin-top:34px}
  .pdfv-bar{padding:10px 14px}
}
/* small phone */
@media (max-width:420px){
  :root{--gut:16px}
  .h-page{font-size:clamp(30px,10.5vw,44px)}
  .lead{font-size:16px}
  .btn{padding:12px 20px; font-size:13.5px}
  .cta .acts{gap:10px}
  .cta .acts .btn{flex:1 1 100%; justify-content:center}
  .logo-cell{height:84px}
  .track-rail > *{flex:0 0 86vw}
  .doc-info .dn{font-size:15px}
}
/* touch devices — larger hit targets */
@media (pointer:coarse){
  .doc-btn{width:44px; height:44px}
  .nav-burger{width:44px; height:44px}
}

/* =========================================================
   MOBILE REFINEMENTS  (<=860px only — desktop untouched)
   1. label/mono text is too small to read at arm's length
   2. links and buttons need ~44px touch targets
   3. pinned scroll scenes are far too long on a phone
   ========================================================= */
@media (max-width:860px){
  /* --- 1. readability --- */
  .eyebrow{font-size:12.5px; letter-spacing:.17em; margin-bottom:16px}
  .crumb{font-size:12.5px; letter-spacing:.16em}
  .strip-cell .n{font-size:12px}
  .strip-cell .t{font-size:16px}
  .strip-cell .s{font-size:14px}
  .mono-note{font-size:13px}
  .card-head .num{font-size:13px}
  .person-body .rl{font-size:13px}
  .doc-info .dn{font-size:16px}
  .doc-info .dm{font-size:12.5px}
  .doc-ico{font-size:11px}
  .cinfo .lbl{font-size:12px}
  .cinfo .val{font-size:16.5px}
  .foot-col .ttl{font-size:12px}
  .foot-col a{font-size:15px}
  .foot-brand p{font-size:14.5px}
  .foot-bot span{font-size:12.5px}
  .phero-tag span{font-size:12px}
  .field span{font-size:12px}
  .chip{font-size:13px}
  .pj-cap{font-size:12.5px}
  .pj-st{font-size:11px}
  .pj-client{font-size:13px}
  .pj-when{font-size:12.5px}
  .pj-ref .k{font-size:12px}
  .rep-cell{font-size:15px; min-height:72px}
  .rep-cell.more{font-size:12.5px}
  .rep-more .ttl,.list2 .ttl{font-size:12px}
  .rep-more p{font-size:15px}
  .list2 li{font-size:16px; padding:16px 0}
  .list2 .col + .col{margin-top:34px}
  .note-panel p{font-size:16px}

  /* --- 2. touch targets --- */
  .btn{padding:14px 24px}
  .nav-burger{width:44px; height:44px}
  .doc-btn{width:44px; height:44px}
  .doc-acts{gap:8px}
  .crumb a{display:inline-block; padding:12px 0}
  .link-accent{display:inline-block; padding:13px 0}
  .cinfo .val a{display:inline-block; padding:8px 0}
  .foot-col{gap:0}
  .foot-col a{padding:13px 0}
  .foot-col .ttl{margin-bottom:6px}
  .drawer-panel a{padding:16px 8px}
  .sec-head{grid-template-columns:1fr; gap:0}
  .sec-head .lead{margin:22px 0 0}
  .jump{gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .jump::-webkit-scrollbar{display:none}
  .jump a{flex:0 0 auto; padding:12px 16px}
  .pj-grid{gap:20px}
  .pj-grid.wide{gap:20px}
  .pj-body{padding:22px 22px 24px}
  .pj.feat .pj-body{padding:24px 22px 24px}
  .pj.feat .pj-body h3{font-size:21px}
  .pj-vis.ph{gap:12px}
  .pj-vis.ph .ghost{font-size:34px}
  .pj-vis.ph .glabel{font-size:11px}

  /* --- 3. shorter pinned scenes (heights are inline, so !important) --- */
  .scene-statement{height:150vh !important}
  .scene-stack{height:320vh !important}
  .scene-track{height:190vh !important}
}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1; transform:none}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.01ms !important}
}

/* =====================================================================
   TOUCH DEVICES
   A tap fires :hover and it stays latched until you tap somewhere else,
   so a card sits lifted and zoomed long after you've moved on. Motion
   hovers are cancelled where there's no real pointer; colour changes are
   kept, because there they read as tap feedback rather than a stuck state.
   ===================================================================== */
@media (hover:none){
  .card:hover,.pj:hover,.logo-cell:hover,.rep-cell:hover,.doc:hover{transform:none}
  .card:hover .card-img img{transform:none}
  .pj:hover .pj-vis img{transform:none; filter:saturate(.94) brightness(.94)}
}

/* =====================================================================
   MOBILE RENDERING COST  (<=860px, matching the block above)
   The nav is fixed, so its backdrop-filter is re-blurred on every scrolled
   frame - cheap on a desktop GPU, one of the most expensive things you can
   ask of a phone. Small screens get a lighter blur over a more opaque bar:
   near-identical to look at, far less work for the compositor.
   The pinned scenes still animate here (only their heights are shortened),
   so their will-change hints are deliberately left in place.
   ===================================================================== */
@media (max-width:860px){
  .nav{
    background:rgba(5,7,6,0.92);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
}