/* Clear Sky Energy — clearskyenergy.ie (2026 rebuild, design v4)
   Idea: the brand is the sky. The home hero is the real sky over Tullamore right now (sun position worked out in the browser),
   with a Midlands horizon and a house running on its own roof. Everything else is quiet: paper, navy ink, one green for action.
   Type: Archivo (variable, SIL OFL) — expanded heavy cuts for headlines like van livery, normal width for reading. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-var.woff2") format("woff2-variations"),url("../fonts/archivo-var.woff2") format("woff2")}

:root{
  --navy:#001466; --night:#000A33; --navy-2:#0B2386; --navy-soft:#E8ECF8;
  --green:#00AC12; --green-ink:#007F0E; --green-wash:#E6F6E8;
  --paper:#F3F6FA; --line:#D6DDE8; --white:#FFFFFF;
  --ink:#121D45; --muted:#4A5672; --sun:#FFC233; --warn:#FFF3D1; --warn-ink:#5A4100;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --max:1240px; --gut:clamp(16px,4vw,40px);
  --r:6px; --r-lg:14px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.62 var(--font);font-stretch:100%;font-kerning:normal;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{color:var(--navy);margin:0 0 .45em;text-wrap:balance}
h1{font:800 clamp(2.5rem,5.6vw,5rem)/.98 var(--font);font-stretch:118%;letter-spacing:-.025em}
h2{font:780 clamp(1.9rem,3.6vw,3.1rem)/1.02 var(--font);font-stretch:112%;letter-spacing:-.02em}
h3{font:700 1.25rem/1.2 var(--font);font-stretch:106%;letter-spacing:-.005em}
h4{font:700 1rem/1.3 var(--font);font-stretch:106%}
p{margin:0 0 1em}
b,strong{font-weight:700}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:clamp(64px,8vw,112px)}
.band.cloud{background:var(--paper)}
.band.navy{background:var(--navy);color:#DCE3FF}
.band.navy h2,.band.navy h3{color:#fff}
.band.navy a:not(.btn){color:#fff}
.kicker,.eyebrow{display:block;font:650 .9375rem/1.3 var(--font);color:var(--green-ink);margin-bottom:14px}
.band.navy .kicker,.band.navy .eyebrow{color:#7BE287}
.lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--muted);max-width:56ch}
.band.navy .lede{color:#C5CFF5}
.measure{max-width:68ch}
.small{font-size:.875rem;line-height:1.5;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:8px 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar + header ---------- */
.topbar{background:var(--night);color:#D5DCF7;font-size:.875rem}
.topbar .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;padding-block:9px;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar .tb-note b{color:#7BE287;font-weight:700}
.topbar .tb-note a{text-decoration:underline}
@media (max-width:640px){.topbar .wrap>span:last-child{display:none}.topbar{font-size:.8125rem}}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid rgba(0,20,102,.08)}
header.site .wrap{display:flex;align-items:center;gap:20px;min-height:74px}
.logo img{width:164px}
nav.main{margin-left:auto}
nav.main>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
nav.main a,nav.main button{font:600 1rem/1 var(--font);font-stretch:104%;color:var(--navy);text-decoration:none;background:none;border:0;padding:12px 12px;border-radius:var(--r);cursor:pointer}
nav.main a:hover,nav.main button:hover{background:var(--navy-soft);color:var(--navy)}
nav.main li{position:relative}
nav.main .sub{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,20,102,.16);padding:8px;list-style:none;margin:0}
nav.main .sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
nav.main li:hover>.sub,nav.main li.open>.sub,nav.main li:focus-within>.sub{display:block}
nav.main .sub a{display:block;padding:11px 12px;font-weight:650}
nav.main .sub small{display:block;font:400 .8125rem/1.35 var(--font);color:var(--muted);margin-top:3px}
.head-cta{display:flex;gap:14px;align-items:center}
.phone{font:700 1rem var(--font);font-stretch:108%;color:var(--navy);text-decoration:none;white-space:nowrap}
.menu-toggle{display:none;margin-left:auto;background:var(--navy);border:0;border-radius:var(--r);padding:11px 14px;font:700 .875rem var(--font);color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:750 1rem/1 var(--font);font-stretch:110%;letter-spacing:-.005em;padding:17px 24px;border-radius:var(--r);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s}
.btn.green{background:var(--green);color:var(--navy);box-shadow:inset 0 -3px 0 rgba(0,20,102,.18)}
.btn.green:hover{background:#00C214;color:var(--navy)}
.btn.navy{background:var(--navy);color:#fff}.btn.navy:hover{background:var(--navy-2);color:#fff}
.btn.line{border-color:currentColor;color:var(--navy);background:transparent}.btn.line:hover{background:rgba(0,20,102,.06)}
.band.navy .btn.line,.on-dark .btn.line{color:#fff}
.btn.sm{padding:12px 16px;font-size:.9375rem}
.btn small{font-weight:600;opacity:.8;font-stretch:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- rating badge ---------- */
.rating{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;text-decoration:none;color:var(--ink);font-size:.9375rem}
.rating b{font:800 1.125rem var(--font);font-stretch:110%;color:var(--navy)}
.stars{color:#E9A100;letter-spacing:1px}

/* =========================================================
   HERO — the live sky
   ========================================================= */
.sky{position:relative;overflow:hidden;color:var(--navy);min-height:min(calc(100svh - 110px),880px);display:flex;flex-direction:column;
  --s-top:#8FC0EC;--s-mid:#C3DDF5;--s-low:#EEF5FC;--ground:#001466;--ridge:#26408F;--win:#2A3F86;--glow:0;
  background:linear-gradient(180deg,var(--s-top) 0%,var(--s-mid) 58%,var(--s-low) 100%)}
.sky.dark{color:#fff}
.sky .stars-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s;pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 27% 9%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 41% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 55% 6%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 68% 15%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 79% 28%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 88% 8%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 34%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 34% 36%,#fff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 94% 40%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 61% 31%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 19% 44%,#fff 50%,transparent 51%)}
.sky .clouds{position:absolute;inset:0 -20% 30% -20%;pointer-events:none;opacity:.55;transition:opacity 1.2s}
.sky .clouds i{position:absolute;display:block;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(6px);animation:drift 160s linear infinite}
.sky .clouds i:nth-child(1){width:46%;height:22%;left:4%;top:12%}
.sky .clouds i:nth-child(2){width:34%;height:16%;left:46%;top:6%;animation-duration:210s}
.sky .clouds i:nth-child(3){width:40%;height:18%;left:64%;top:26%;animation-duration:190s}
.sky .clouds i:nth-child(4){width:28%;height:12%;left:22%;top:34%;animation-duration:240s}
@keyframes drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.sky .sunpath{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.sky .sunpath .arc{fill:none;stroke:currentColor;stroke-opacity:.16;stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sky .sun{position:absolute;width:clamp(56px,7vw,92px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);left:70%;top:30%;
  background:radial-gradient(circle,#FFF6D8 0 34%,var(--sun) 35% 49%,rgba(255,194,51,.35) 50%,rgba(255,194,51,0) 70%);transition:left 1.4s cubic-bezier(.2,.7,.2,1),top 1.4s cubic-bezier(.2,.7,.2,1),opacity .8s;pointer-events:none}
.sky.scrubbing .sun{transition:none}
.sky .hero-body{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(24px,5vw,72px);align-items:start;padding-top:clamp(32px,6vh,72px);padding-bottom:clamp(130px,15vw,220px)}
.sky h1{color:inherit;max-width:12ch;margin-bottom:.32em}
.sky .lede{color:inherit;opacity:.86;max-width:42ch;text-wrap:pretty;margin-bottom:28px}
.sky.dark h1,.sky.dark .lede{text-shadow:0 1px 18px rgba(0,8,40,.35)}
.sky .btn.line{color:inherit}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.hero-meta .proof{margin:0!important}
.sky .proof{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-size:.9375rem;font-weight:600}
.sky .proof li{display:flex;align-items:center;gap:8px}
.sky .proof li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(0,172,18,.22)}

/* the readout */
.readout-today{border-radius:var(--r-lg);padding:22px 22px 18px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);color:var(--navy);box-shadow:0 20px 60px rgba(0,20,102,.12)}
.sky.dark .readout-today{background:rgba(0,10,51,.48);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.readout-today .where{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;font-weight:600;margin-bottom:12px;opacity:.85}
.readout-today .kwh{font:820 clamp(2.6rem,4.2vw,3.6rem)/1 var(--font);font-stretch:118%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.readout-today .kwh small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:6px}
.readout-today .what{font-size:.9375rem;line-height:1.45;margin:8px 0 12px;opacity:.9}
.readout-today svg.daycurve{width:100%;height:84px;display:block;overflow:visible}
.readout-today .daycurve .base{stroke:currentColor;stroke-opacity:.25}
.readout-today .daycurve .all{fill:currentColor;fill-opacity:.1}
.readout-today .daycurve .done{fill:var(--green);fill-opacity:.85}
.readout-today .daycurve .mark{stroke:currentColor;stroke-width:1.5}
.readout-today .daycurve text{font:600 9px var(--font);fill:currentColor;fill-opacity:.7}
.scrub{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin-top:10px}
.scrub label{grid-column:1/-1;font-size:.875rem;font-weight:600;opacity:.85}
.scrub input[type=range]{width:100%;accent-color:var(--green);margin:0}
.scrub output{font:750 1rem var(--font);font-stretch:110%;font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
.readout-today .now{background:none;border:0;padding:4px 0;font:650 .875rem var(--font);color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:6px}
.readout-today .src{font-size:.8125rem;line-height:1.4;margin:12px 0 0;opacity:.72}

/* horizon */
.horizon{position:absolute;left:0;right:0;bottom:0;height:clamp(120px,14vw,210px);z-index:1;pointer-events:none}
.horizon svg{width:100%;height:100%;display:block}
.horizon .ridge{fill:var(--ridge);transition:fill 1.2s}
.horizon .ground{fill:var(--ground);transition:fill 1.2s}
.horizon .win{fill:var(--win);transition:fill 1.2s}
.horizon .glow{opacity:var(--glow);transition:opacity 1.2s}
.horizon .flow{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 12;animation:flow 1.1s linear infinite}
.horizon .flow.sunflow{stroke:#3BE04A}
.horizon .flow.batflow{stroke:var(--sun)}
@keyframes flow{to{stroke-dashoffset:-14}}
.horizon .panel-glint{fill:#fff;opacity:.08}
.sky[data-phase=day] .batflow,.dusk .flow{display:none}
.sky[data-phase=night] .sunflow{display:none}

/* =========================================================
   Sections
   ========================================================= */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 64px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{margin:0}
.sec-head p{margin:0}

/* weather proof */
.weather{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.weather figure{margin:0}
.weather figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.weather figcaption{font-size:.875rem;color:var(--muted);margin-top:10px}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:240px;margin:28px 0 8px;padding:0;list-style:none;border-bottom:2px solid var(--navy)}
.months li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px;min-width:0}
.months .bar{width:100%;background:var(--navy);border-radius:3px 3px 0 0;height:calc(var(--v) * 1%);min-height:4px;position:relative}
.months li.hi .bar{background:var(--green)}
.months .v{font:700 .8125rem var(--font);font-stretch:96%;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.months-x{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;font-size:.8125rem;color:var(--muted);text-align:center;font-weight:600}
.weather .big-fig{font:820 clamp(3.2rem,6vw,5.4rem)/.95 var(--font);font-stretch:120%;letter-spacing:-.035em;color:var(--navy);font-variant-numeric:tabular-nums}
.weather .big-fig small{font-size:.32em;letter-spacing:0;margin-left:8px;font-weight:700}

/* grant tool */
.granttool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.gt-controls{display:grid;gap:22px}
.gt-row label.lbl{display:flex;justify-content:space-between;gap:12px;font-weight:650;margin-bottom:10px}
.gt-row output{font:750 1rem var(--font);font-stretch:110%;font-variant-numeric:tabular-nums;color:var(--navy)}
input[type=range]{width:100%;accent-color:var(--green);height:28px;margin:0}
.switch{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-weight:600;line-height:1.4}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{flex:none;width:48px;height:28px;border-radius:999px;background:#C5CEDD;position:relative;transition:background .2s;margin-top:-2px}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked+.track{background:var(--green)}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch input:focus-visible+.track{outline:3px solid var(--green);outline-offset:3px}
.switch small{display:block;font-weight:400;color:var(--muted);font-size:.875rem;margin-top:2px}
.gt-out{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3.5vw,44px);position:relative;overflow:hidden}
.gt-out .label{font-weight:600;color:#C5CFF5}
.gt-out .fig{font:840 clamp(3.6rem,8vw,6.6rem)/.9 var(--font);font-stretch:122%;letter-spacing:-.04em;color:#fff;margin:10px 0 18px;font-variant-numeric:tabular-nums}
.gt-out dl{display:grid;grid-template-columns:1fr auto;gap:10px 18px;margin:0 0 18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-variant-numeric:tabular-nums}
.gt-out dt{color:#C5CFF5}.gt-out dd{margin:0;font-weight:700;text-align:right}
.gt-out .small{color:#AEB9E6}
.gt-out .btn-row{margin-top:20px}
.gt-out::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,51,.5),rgba(255,194,51,0) 70%);pointer-events:none}

/* what we fit — index rows */
.index{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 210px;gap:12px 40px;align-items:center;padding:26px 4px;text-decoration:none;color:var(--ink)}
.index h3{font-size:clamp(1.4rem,2.6vw,2.1rem);font-stretch:116%;letter-spacing:-.02em;margin:0;transition:color .15s}
.index p{margin:0;color:var(--muted)}
.index .tag{justify-self:end;font:700 .875rem var(--font);color:var(--green-ink);background:var(--green-wash);padding:7px 12px;border-radius:999px;white-space:nowrap}
.index a:hover h3{color:var(--green-ink)}
.index a:hover{background:linear-gradient(90deg,var(--paper),transparent)}

/* our work gallery */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(190px,21vw,290px);gap:14px}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--paper)}
.gallery picture{display:block;height:100%}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;color:#fff;font-size:.875rem;line-height:1.35;background:linear-gradient(transparent,rgba(0,10,51,.82))}
.gallery figcaption b{display:block;font-size:1rem;font-stretch:108%}
.g-a{grid-column:span 5;grid-row:span 2}
.g-b{grid-column:span 7}
.g-c{grid-column:span 3}
.g-d{grid-column:span 4}
.g-b img{object-position:50% 70%}

/* timeline (a real sequence) */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:t;position:relative}
.timeline li{counter-increment:t;padding:0 22px 0 0;position:relative}
.timeline li::before{content:counter(t);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font:800 1.125rem var(--font);font-stretch:112%;position:relative;z-index:1;margin-bottom:18px;box-shadow:0 0 0 6px var(--white)}
.band.cloud .timeline li::before{box-shadow:0 0 0 6px var(--paper)}
.timeline li::after{content:"";position:absolute;left:46px;right:0;top:22px;height:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline .when{display:block;font-weight:650;color:var(--green-ink);font-size:.875rem;margin-bottom:4px}
.timeline h3{margin-bottom:8px}
.timeline p{color:var(--muted);font-size:1rem;margin:0}

/* reviews */
.spot{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.spot blockquote{margin:0;font:560 clamp(1.4rem,2.5vw,2.15rem)/1.28 var(--font);font-stretch:102%;letter-spacing:-.012em;color:var(--navy);text-wrap:pretty}
.spot blockquote::before{content:"“";display:block;font:800 5rem/.6 var(--font);color:var(--green);margin-bottom:10px}
.spot .who{margin-top:22px;color:var(--muted)}
.spot .who b{color:var(--ink)}
.quote-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--navy)}
.quote-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.quote-list p{margin:0 0 6px}
.quote-list span{font-size:.875rem;color:var(--muted)}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review{background:#fff;border-top:3px solid var(--navy);padding:22px 0 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.band.cloud .review{background:transparent}
.review blockquote{margin:0;font-size:1rem}
.review .who{margin-top:auto;font-size:.875rem;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.review .who b{color:var(--ink)}
.g-attrib{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--muted);flex-wrap:wrap}

/* promises */
.promises dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin:0}
.promises dl>div{padding:22px 0;border-top:1px solid rgba(255,255,255,.18)}
.promises dt{font:750 1.25rem/1.2 var(--font);font-stretch:110%;color:#fff;margin-bottom:6px}
.promises dd{margin:0;color:#C5CFF5}

/* areas */
.areas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.areas li{border:1.5px solid var(--navy);color:var(--navy);border-radius:999px;padding:7px 14px;font-weight:650;font-size:.9375rem}

/* final CTA on a dusk sky */
.dusk{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,#0A1B5E 0%,#3A3B8A 55%,#C9707A 100%)}
.dusk .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(72px,9vw,128px) clamp(120px,14vw,190px)}
.dusk h2{color:#fff}
.dusk .card-form h2{color:var(--navy)}
.dusk .lede{color:#E6E2FF}
.dusk .horizon{height:clamp(90px,10vw,140px)}
.dusk .horizon .ground{fill:#000A33}.dusk .horizon .ridge{fill:#1C2A6E}
.dusk .contact-lines{margin-top:24px;font-size:1.0625rem}
.dusk .contact-lines a{color:#fff;font-weight:700}

/* ---------- forms ---------- */
.card-form{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:0 24px 70px rgba(0,10,51,.22)}
.card-form h2{font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:6px}
.card-form>p{color:var(--muted);font-size:1rem}
.card-form.light{border:1px solid var(--line);box-shadow:none}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form label{display:block;font:650 .875rem var(--font);margin:14px 0 6px;color:var(--ink)}
input,select,textarea{width:100%;font:400 1rem var(--font);padding:13px 14px;border:1.5px solid #C9D2E0;border-radius:var(--r);background:#fff;color:var(--ink)}
input::placeholder{color:#8590A8}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,172,18,.35)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;margin-top:12px;font-weight:400}
.check input{width:auto;margin-top:4px;accent-color:var(--green)}
.hp{position:absolute;left:-9999px}
form .btn{width:100%;margin-top:18px}
.form-note{font-size:.8125rem;margin-top:10px;color:var(--muted)}
.form-msg{margin-top:12px;padding:12px 14px;border-radius:var(--r);font-size:.9375rem}
.form-msg.ok{background:var(--green-wash);color:#0B4A12}
.form-msg.err{background:#FDE8E8;color:#7A1111}

/* ---------- generic blocks used on inner pages ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.card{background:#fff;border-top:3px solid var(--navy);padding:24px 0 0;display:flex;flex-direction:column;min-width:0}
.band.cloud .card{background:transparent}
.card h3{margin-bottom:10px;font-size:1.35rem}
.card p{color:var(--muted)}
.card .more{margin-top:auto;font:700 1rem var(--font);font-stretch:106%;color:var(--navy)}
.card .tag{align-self:flex-start;font:700 .8125rem var(--font);background:var(--green-wash);color:var(--green-ink);padding:6px 11px;border-radius:999px;margin-bottom:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split img{border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{position:relative;padding-left:30px;margin-bottom:10px}
.ticks li::before{content:"";position:absolute;left:0;top:.38em;width:18px;height:18px;border-radius:50%;background:var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23007F0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.band.navy .ticks li::before{background-color:rgba(123,226,135,.2)}

/* grant ledger (grants page, show page) */
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.ledger>div{padding:26px 28px 6px 0}
.ledger>div+div{padding-left:28px;border-left:1px solid var(--line)}
.ledger .fig{font:830 clamp(2.8rem,5vw,4.4rem)/.95 var(--font);font-stretch:120%;letter-spacing:-.035em;color:var(--navy);font-variant-numeric:tabular-nums}
.ledger .what{display:block;font-weight:650;color:var(--green-ink);margin-bottom:8px}
.ledger h3{margin:14px 0 6px}
.ledger p{color:var(--muted);margin:0}

/* steps (vertical sequence on inner pages) */
.steps{list-style:none;margin:0;padding:0;display:grid;counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font:800 1.0625rem/44px var(--font);font-stretch:112%;text-align:center}
.steps h3{margin:8px 0 4px}
.steps p{margin:0;color:var(--muted)}
.day{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:24px;border-top:2px solid var(--navy)}
.day div{padding:18px 18px 0 0}
.day div+div{padding-left:18px;border-left:1px solid var(--line)}
.day b{display:block;font:750 1.0625rem var(--font);font-stretch:110%;color:var(--navy);margin-bottom:6px}
.day p{font-size:.9375rem;margin:0;color:var(--muted)}

/* job cards */
.job{display:flex;flex-direction:column;min-width:0}
.job img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.job .body{padding:18px 0 0}
.job dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;font-size:.9375rem}
.job dt{color:var(--muted)}
.job dd{margin:0;font-weight:650}

/* tables */
.tbl{overflow-x:auto;border-top:2px solid var(--navy)}
table{border-collapse:collapse;width:100%;font-size:1rem;font-variant-numeric:tabular-nums}
th,td{padding:13px 14px 13px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .875rem var(--font);font-stretch:106%;color:var(--navy)}

/* faq */
.faq h2{margin-bottom:18px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font:700 1.125rem/1.35 var(--font);font-stretch:104%;color:var(--navy);padding:18px 44px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:12px;height:12px;border-right:2.5px solid var(--green-ink);border-bottom:2.5px solid var(--green-ink);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg);top:30px}
.faq details>div{padding:0 0 20px;color:var(--ink);max-width:66ch}

/* callouts */
.note{background:var(--warn);color:var(--warn-ink);border-radius:var(--r);padding:16px 18px;font-size:1rem}
.note.green{background:var(--green-wash);color:#0B4A12}
.checked{display:inline-flex;gap:8px;align-items:center;font-size:.875rem;font-weight:600;color:var(--ink)}
.checked::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,172,18,.18)}

/* page head: a band of today's sky */
.page-head{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,88px) clamp(96px,11vw,150px);
  --s-top:#8FC0EC;--s-mid:#C3DDF5;--s-low:#EEF5FC;--ridge:#2F4B97;--ground:#001466;background:linear-gradient(180deg,var(--s-top),var(--s-mid) 70%,var(--s-low));color:var(--navy)}
.page-head.dark{color:#fff}
.page-head.dark h1,.page-head.dark .lede,.page-head.dark .crumbs a,.page-head.dark .checked{color:#fff}
.page-head .wrap{position:relative;z-index:1}
.page-head .horizon{height:clamp(70px,8vw,120px)}
.page-head h1{max-width:16ch;font-size:clamp(2.3rem,5vw,4.2rem)}
.page-head .lede{color:inherit;opacity:.88}
.crumbs{font-size:.875rem;margin-bottom:16px;opacity:.8}
.crumbs a{color:inherit}
.prose{max-width:70ch}
.prose h2{margin-top:1.4em;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.45em}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.calc fieldset{border:0;padding:0;margin:0 0 8px}
.calc legend{font:750 1.125rem var(--font);font-stretch:108%;color:var(--navy);margin:22px 0 10px;padding:0}
.calc fieldset:first-child legend{margin-top:0}
.calc .panel{background:#fff}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-block;padding:11px 15px;border:1.5px solid #C9D2E0;border-radius:var(--r);font:600 .9375rem var(--font);background:#fff;transition:background .12s,border-color .12s}
.seg label:hover span{border-color:var(--navy)}
.seg input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.range-row{display:flex;gap:14px;align-items:center}
.range-row input[type=range]{flex:1;padding:0;border:0}
.range-row output{font:780 1.125rem var(--font);font-stretch:112%;color:var(--navy);min-width:7ch;text-align:right;font-variant-numeric:tabular-nums}
.result{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);position:sticky;top:96px;overflow:hidden}
.result h3{color:#fff;font-size:1.125rem}
.result .small{color:#AEB9E6}
.result .hero-fig{font:840 clamp(3rem,6vw,4.8rem)/.92 var(--font);font-stretch:122%;letter-spacing:-.04em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.result .hero-cap{color:#C5CFF5;margin-bottom:18px}
.result .big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 0 16px;border-top:1px solid rgba(255,255,255,.18)}
.result .cell{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.result .cell:nth-child(odd){padding-right:14px}
.result .cell:nth-child(even){padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.result .cell span{display:block;font-size:.875rem;color:#C5CFF5;margin-bottom:4px}
.result .cell b{font:800 1.6rem/1.05 var(--font);font-stretch:114%;color:#fff;font-variant-numeric:tabular-nums}
.result table{color:#E6EBFF;font-size:.9375rem}
.result td{border-bottom:1px solid rgba(255,255,255,.14);padding:9px 0}
.result td:last-child{text-align:right;font-weight:650}
.result tr.total td{font-weight:800;color:#7BE287}
.result .btn-row{margin-top:18px}
.result .btn.line{color:#fff}
.result .warn{background:rgba(255,194,51,.16);color:#FFE7A3;border-radius:var(--r);padding:10px 12px;font-size:.875rem;margin-top:10px}
.chart25,.chartm{margin:18px 0 0}
.chart25 figcaption,.chartm figcaption{font-size:.875rem;color:#C5CFF5;margin-bottom:8px;font-weight:600}
.chart25 svg,.chartm svg{width:100%;height:auto;font-family:var(--font)}

/* cta band */
.cta-band .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0;font-size:clamp(1.7rem,3vw,2.6rem);max-width:22ch}

/* numbers strip */
.stats{border-bottom:1px solid var(--line);background:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;padding-block:0}
.stats .wrap>div{display:flex;flex-direction:column;gap:6px;padding:26px 20px 26px 0}
.stats .wrap>div+div{padding-left:24px;border-left:1px solid var(--line)}
.stats b{font:820 2.2rem/1 var(--font);font-stretch:118%;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.stats span{font-size:.875rem;color:var(--muted)}

/* brands */
.brands{border-bottom:1px solid var(--line)}
.brands .wrap{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap;padding-block:22px}
.brands .lbl{font-size:.875rem;color:var(--muted);font-weight:600}
.brands ul{display:flex;gap:16px 36px;flex-wrap:wrap;list-style:none;margin:0;padding:0;align-items:center}
.brands li{font:800 1.0625rem var(--font);font-stretch:125%;color:#5A6585;letter-spacing:.01em}

/* ---------- footer ---------- */
footer.site{background:var(--night);color:#B5C0EE;font-size:.9375rem;padding-block:64px 28px}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{text-decoration:underline;color:#fff}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer .legal{border-top:1px solid #1B2560;margin-top:40px;padding-top:20px;font-size:.8125rem;color:#8E9BD6;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer .logo img{width:176px;margin-bottom:16px}
.alerts{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 24px;align-items:center;border-top:1px solid #1B2560;margin-top:40px;padding-top:30px}
.alerts p{margin:0;color:#B5C0EE}
.alerts-row{display:flex;gap:8px}
.alerts-row input{flex:1;min-width:0;background:#0B1650;border-color:#26327A;color:#fff}
.alerts-row input::placeholder{color:#8E9BD6}
.alerts .btn{width:auto;margin:0}
.alerts .check{grid-column:2;color:#B5C0EE;margin-top:0}
.alerts .form-msg{grid-column:2}

/* cookie banner */
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,10,51,.22);padding:20px}
.cookie p{font-size:.9375rem;margin-bottom:12px}
.cookie .btn-row{gap:8px}
.cookie .btn{padding:12px 16px;font-size:.9375rem}
.cookie .check{margin-top:8px}

/* preview ribbon */
.preview-ribbon{background:var(--sun);color:#3A2A00;text-align:center;font:650 .875rem var(--font);padding:8px 16px}

/* quick actions */
.action-bar{display:none}
.wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;background:#25D366;color:#063;font:750 .9375rem var(--font);padding:13px 17px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sky .hero-body{grid-template-columns:1fr;max-width:720px}
  .readout-today{max-width:520px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline li{display:grid;grid-template-columns:64px 1fr;padding:0 0 26px}
  .timeline li::before{margin:0;grid-row:span 3}
  .timeline li::after{left:22px;right:auto;top:46px;bottom:0;width:2px;height:auto}
}
@media (max-width:900px){
  .menu-toggle{display:inline-block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;max-height:80vh;overflow:auto;box-shadow:0 20px 40px rgba(0,10,51,.12)}
  nav.main.open{display:block}
  nav.main>ul{flex-direction:column;align-items:stretch}
  nav.main .sub{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 12px}
  nav.main .sub::before{display:none}
  .head-cta .btn{display:none}
  .split,.calc,.weather,.granttool,.spot,.dusk .wrap,.sec-head{grid-template-columns:1fr}
  .grid-3,.reviews,.ledger,.promises dl{grid-template-columns:1fr}
  .ledger>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .day{grid-template-columns:1fr 1fr}
  .day div+div{border-left:0;padding-left:0}
  .day div{padding:16px 16px 0 0}
  footer .cols{grid-template-columns:1fr 1fr}
  .result{position:static}
  .index a{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .index .tag{justify-self:start}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .g-a{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .g-b{grid-column:span 2;aspect-ratio:16/10}
  .g-c,.g-d{grid-column:span 1;aspect-ratio:3/4}
  .action-bar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;box-shadow:0 -6px 20px rgba(0,20,102,.08)}
  .action-bar a{display:flex;align-items:center;justify-content:center;font:750 1rem var(--font);font-stretch:108%;padding:13px;border-radius:var(--r);text-decoration:none;border:2px solid var(--navy);color:var(--navy)}
  .action-bar a.go{background:var(--green);border-color:var(--green);color:var(--navy)}
  body{padding-bottom:74px}
  .cookie{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .wa-float{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .alerts{grid-template-columns:1fr}.alerts .check,.alerts .form-msg{grid-column:1}
  .stats .wrap>div:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:600px){
  body{font-size:1rem}
  .grid-2,.grid-4,.day{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .phone{display:none}
  .logo img{width:140px}
  .sky{min-height:0}
  .sky h1{font-size:clamp(2.3rem,10.5vw,3rem)}
  .sky .hero-body{padding-top:28px;padding-bottom:120px}
  .months{height:180px;gap:3px}
  .months .v{font-size:.62rem;writing-mode:vertical-rl;transform:rotate(180deg)}
  .months-x{gap:3px;font-size:.7rem}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stats .wrap>div{padding:18px 12px 18px 0}
  .stats b{font-size:1.7rem}
  .btn{padding:16px 20px}
  .sky .btn-row .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =========================================================
   v5: the cut-away story, case studies, panel-cell texture
   ========================================================= */
/* the solar-cell grid: the one brand texture, used on navy bands */
.band.navy{position:relative;overflow:hidden}
.band.navy::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 28px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.band.navy>.wrap{position:relative}

/* the story */
.story{background:var(--paper)}
.story-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,64px);align-items:start}
.story-art{position:sticky;top:96px;background:#fff;border-radius:var(--r-lg);padding:clamp(10px,2vw,24px);box-shadow:0 30px 80px rgba(0,20,102,.10)}
.cutaway{width:100%;height:auto;display:block;overflow:visible}
.cutaway .line{stroke:var(--navy);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.cutaway .lbl{font:700 18px var(--font);font-stretch:108%;fill:var(--navy);stroke:none}
.cutaway .part{transition:opacity .45s}
.cutaway .clouds{stroke-width:2}
.cutaway .flow{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-dasharray:3 14;opacity:0;transition:opacity .45s;animation:flow 1s linear infinite}
.cutaway .flow.f1{stroke:var(--sun)}
.story-art[data-step="0"] .flow{opacity:.85}
.story-art:not([data-step="0"]) .part{opacity:.22}
.story-art:not([data-step="0"]) .part.s0{opacity:.55}
.story-art[data-step="1"] .s1,.story-art[data-step="2"] .s2,.story-art[data-step="3"] .s3,.story-art[data-step="4"] .s4,.story-art[data-step="5"] .s5{opacity:1}
.story-art[data-step="1"] .flow.s1,.story-art[data-step="2"] .flow.s2,.story-art[data-step="3"] .flow.s3,.story-art[data-step="4"] .flow.s4,.story-art[data-step="5"] .flow.s5{opacity:1}
.story-art[data-step="2"] .s1,.story-art[data-step="3"] .s2,.story-art[data-step="4"] .s2,.story-art[data-step="5"] .s3{opacity:.6}
.cutaway .charge{transform-box:fill-box;transform-origin:left;animation:charge 3s ease-in-out infinite}
@keyframes charge{0%{transform:scaleX(.3)}60%,100%{transform:scaleX(1)}}
.story-steps{list-style:none;margin:0;padding:0}
.story-step{min-height:44vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-top:1px solid var(--line);opacity:.4;transition:opacity .35s}
.story-step:first-child{border-top:0}
.story-step.on{opacity:1}
.story-step .when{font-weight:650;color:var(--green-ink);font-size:.875rem;margin-bottom:6px}
.story-step h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-stretch:114%;letter-spacing:-.02em;margin-bottom:12px}
.story-step p{color:var(--muted);font-size:1.0625rem;margin:0}

/* case-study cards */
.cases{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(16px,2vw,24px)}
.cases-col{display:grid;gap:clamp(16px,2vw,24px)}
.case{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:#fff;min-height:300px;isolation:isolate;background:var(--night)}
.case figure{margin:0;position:absolute;inset:0;z-index:-1}
.case picture,.case img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.case:hover img{transform:scale(1.04)}
.case::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,10,51,0) 30%,rgba(0,10,51,.88) 100%)}
.case-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.4vw,30px)}
.case-where{display:block;font-weight:650;font-size:.9375rem;opacity:.9;margin-bottom:8px}
.case-where i{font-style:normal;opacity:.75;margin-left:10px}
.case h3{color:#fff;font-size:clamp(1.3rem,2vw,1.75rem);font-stretch:112%;letter-spacing:-.015em;margin-bottom:6px}
.case p{margin:0 0 14px;opacity:.85}
.case-figs{display:flex;gap:22px;margin:0;flex-wrap:wrap}
.case-figs dt{font-size:.8125rem;opacity:.75}
.case-figs dd{margin:0;font:800 1.2rem var(--font);font-stretch:114%;font-variant-numeric:tabular-nums}
.case.big{min-height:clamp(520px,62vw,760px)}
.case.big h3{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.band.navy .case{box-shadow:0 30px 80px rgba(0,0,0,.25)}

/* case-study page */
.case-hero{position:relative;min-height:min(78svh,760px);display:flex;align-items:flex-end;color:#fff;isolation:isolate;overflow:hidden;background:var(--night)}
.case-hero>picture{position:absolute;inset:0;z-index:-2}
.case-hero>picture img{width:100%;height:100%;object-fit:cover}
.case-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,10,51,.72) 0%,rgba(0,10,51,.25) 55%,rgba(0,10,51,0) 80%),linear-gradient(180deg,rgba(0,10,51,.3) 0%,rgba(0,10,51,0) 30%,rgba(0,10,51,.8) 100%)}
.case-hero .wrap{width:100%;padding-block:clamp(40px,6vw,80px)}
.case-hero h1{color:#fff;max-width:18ch;font-size:clamp(2.2rem,5.2vw,4.4rem)}
.case-hero .lede{color:#E6EBFF;max-width:56ch}
.case-hero .crumbs a{color:#fff}
.case-figs-band{background:var(--navy);color:#fff}
.case-figs-band .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.case-figs-band .wrap>div{padding:28px 20px 28px 0;display:flex;flex-direction:column;gap:6px}
.case-figs-band .wrap>div+div{padding-left:24px;border-left:1px solid rgba(255,255,255,.16)}
.case-figs-band b{font:830 clamp(2rem,3.6vw,3rem)/1 var(--font);font-stretch:120%;letter-spacing:-.03em}
.case-figs-band b small{font-size:.4em;margin-left:6px;letter-spacing:0}
.case-figs-band span{color:#C5CFF5;font-size:.9375rem}
.case-second{margin:0}
.case-second img{width:100%;max-height:80vh;object-fit:cover;border-radius:var(--r)}
.next-case{display:grid;gap:12px}
.next-case .case{min-height:340px}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.details figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.details picture,.details img{display:block;width:100%;height:100%;object-fit:cover}
.details figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;color:#fff;font-size:.875rem;background:linear-gradient(transparent,rgba(0,10,51,.85))}
.details figcaption b{display:block;font-size:1rem}
.band.navy .btn.line{color:#fff}

@media (max-width:900px){
  .story-grid{grid-template-columns:1fr}
  .story-art{position:sticky;top:76px;z-index:2;padding:8px;border-radius:var(--r)}
  .story-step{min-height:46vh;background:var(--paper)}
  .cases{grid-template-columns:1fr}
  .case.big{min-height:440px}
  .case-figs-band .wrap{grid-template-columns:1fr 1fr}
  .case-figs-band .wrap>div:nth-child(3){padding-left:0;border-left:0}
  .details{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .details{grid-template-columns:1fr}
  .case-figs{gap:14px}
  .cutaway .lbl{font-size:20px}
}
/* spot illustrations (art.py): one family with the cut-away */
.spot{display:block;width:100%;height:auto;overflow:visible}
.spot path,.spot rect,.spot circle{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.spot .thin{stroke-width:1.5}
.spot .w{fill:#fff}
.spot .tint{fill:#E8EEFA;stroke-width:1.6}
.spot .cell{fill:#0A1847;stroke:#3B5BB0;stroke-width:.8}
.spot .screen{fill:#1A2C6E;stroke:none}
.spot .dot{fill:var(--green);stroke:none}
.spot .led{fill:var(--green);stroke:none}
.spot .charge{fill:var(--green);stroke:none;transform-box:fill-box;transform-origin:bottom;animation:spotcharge 3.2s ease-in-out infinite}
@keyframes spotcharge{0%{transform:scaleY(.25)}65%,100%{transform:scaleY(1)}}
.spot .bolt{fill:#fff;stroke:var(--navy);stroke-width:1.6}
.spot .flow{stroke:var(--green);stroke-width:3;stroke-dasharray:2 7;animation:flow 1s linear infinite}
.spot .sun circle{fill:var(--sun);stroke:none}
.spot .sun .ray{stroke:var(--sun);stroke-width:2.6}
.spot .flag{fill:var(--green);stroke:none}
.spot .euro{font:800 44px var(--font);font-stretch:120%;fill:var(--navy)}
.spot .seal{fill:var(--green);stroke:#fff;stroke-width:3}
.spot .shield{fill:var(--green)}
.spot .tick{stroke:#fff;stroke-width:3.4}
.spot .bars{stroke:var(--green);stroke-width:3}
.page-head.dark .spot path:not(.cell):not(.ray):not(.flow):not(.tick),.page-head.dark .spot rect:not(.cell):not(.screen):not(.led):not(.charge),.page-head.dark .spot circle:not(.dot){stroke:#E8EEFA}
.page-head.dark .spot .w{fill:#14246E}.page-head.dark .spot .tint{fill:#1E3285}.page-head.dark .spot .euro{fill:#fff}
/* page head with drawing */
.page-head.has-art .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:clamp(20px,4vw,64px);align-items:center}
.page-head .art{max-width:420px;justify-self:end;width:100%;filter:drop-shadow(0 22px 30px rgba(0,20,102,.12))}
/* "What we fit" rows with drawings */
.index a{grid-template-columns:120px minmax(0,5fr) minmax(0,6fr) 210px}
.index .ix-art{width:120px}
@media (max-width:900px){
  .page-head.has-art .wrap{grid-template-columns:1fr}
  .page-head .art{max-width:220px;justify-self:start;order:-1;margin-bottom:-8px}
  .index a{grid-template-columns:72px 1fr}
  .index .ix-art{width:72px;grid-row:span 3}
  .index .tag{justify-self:start}
}
.cases-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px)}
.cases-row .case{min-height:400px}

/* =====================================================================
   v6 ART DIRECTION — photography-led, editorial scale.
   Rules: one photo per idea, full-bleed or not at all; type does the shouting (expanded 800, tight);
   navy carries the brand, green is only for action and the live figure; one orchestrated load moment (hero).
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.75,.15,1);--r-xl:22px}
.preview-ribbon{position:fixed;left:14px;bottom:14px;z-index:90;padding:6px 12px;border-radius:999px;font:700 .8125rem var(--font);background:var(--sun);color:#3A2A00;box-shadow:0 6px 20px rgba(0,0,0,.18)}
@media (max-width:900px){.preview-ribbon{bottom:84px}}

/* header that sits over the home hero */
body:has(header.site.over) .topbar{display:none}
.logo-light{display:none}
header.site.over{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .35s,border-color .35s,box-shadow .35s}
header.site.over.solid{background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom-color:rgba(0,20,102,.08)}
header.site.over:not(.solid) .logo-dark{display:none}
header.site.over:not(.solid) .logo-light{display:block}
@media (min-width:901px){
  header.site.over:not(.solid) nav.main>ul>li>a,header.site.over:not(.solid) nav.main>ul>li>button,header.site.over:not(.solid) .phone{color:#fff}
  header.site.over:not(.solid) nav.main>ul>li>a:hover,header.site.over:not(.solid) nav.main>ul>li>button:hover{background:rgba(255,255,255,.14)}
}
.btn.ghost{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---------- HERO ---------- */
.h6{position:relative;min-height:max(100svh,640px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;isolation:isolate;background:var(--night)}
.h6-bg{position:absolute;inset:0;z-index:-2}
.h6-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform-origin:60% 60%;animation:kb 2.8s var(--ease) both}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
.h6-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(0,8,40,.62) 0%,rgba(0,8,40,0) 26%),
  linear-gradient(0deg,rgba(0,8,40,.9) 0%,rgba(0,8,40,.35) 38%,rgba(0,8,40,0) 62%),
  linear-gradient(90deg,rgba(0,8,40,.5) 0%,rgba(0,8,40,0) 58%)}
.h6-in{width:100%;padding-top:140px;padding-bottom:clamp(120px,15vh,170px)}
.h6-kicker{display:flex;align-items:center;gap:12px;font:600 1rem/1.3 var(--font);margin:0 0 22px;opacity:.92}
.h6-kicker::before{content:"";width:34px;height:2px;background:var(--green)}
.h6-title{color:#fff;font:850 clamp(3.3rem,9.4vw,9.6rem)/.88 var(--font);font-stretch:125%;letter-spacing:-.04em;margin:0 0 28px;max-width:none}
.h6-title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.h6-title .ln>span{display:block;transform:translateY(108%);animation:rise 1.05s var(--ease) .15s forwards}
.h6-title .ln+.ln>span{animation-delay:.27s}
@keyframes rise{to{transform:none}}
.h6-lede{font-size:clamp(1.1rem,1.45vw,1.32rem);line-height:1.5;max-width:46ch;margin:0 0 32px;opacity:0;animation:fadein .9s ease .55s forwards}
.h6 .btn-row{opacity:0;animation:fadein .9s ease .7s forwards}
@keyframes fadein{to{opacity:.94}}
.h6 .btn-row{animation-name:fadein1}@keyframes fadein1{to{opacity:1}}
.h6-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-block:20px 24px;border-top:1px solid rgba(255,255,255,.22);font-size:.9375rem}
.h6-rating{display:inline-flex;align-items:baseline;gap:10px;color:#fff;text-decoration:none}
.h6-rating b{font:800 1.35rem var(--font);font-stretch:118%}
.h6-rating .stars{color:var(--sun)}
.today{display:flex;align-items:center;gap:12px;max-width:62ch;opacity:.95}
.today b{font-weight:800;font-stretch:112%;font-variant-numeric:tabular-nums}
.today-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,172,18,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,172,18,.55)}70%{box-shadow:0 0 0 12px rgba(0,172,18,0)}100%{box-shadow:0 0 0 0 rgba(0,172,18,0)}}

/* ---------- INTRO ---------- */
.intro6{padding-block:clamp(88px,11vw,160px) clamp(56px,7vw,96px)}
.statement{font:540 clamp(1.7rem,3.3vw,3.15rem)/1.16 var(--font);font-stretch:104%;letter-spacing:-.022em;color:var(--navy);max-width:30ch;margin:0 0 clamp(48px,6vw,88px);text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:2px solid var(--navy)}
.facts>div{padding:22px 24px 0 0}
.facts>div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts dt{font-weight:650;color:var(--green-ink);font-size:.9375rem;margin-bottom:10px}
.facts dd{margin:0;font:840 clamp(2.6rem,5vw,4.6rem)/.9 var(--font);font-stretch:122%;letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.facts dd small{font-size:.32em;letter-spacing:0;margin-left:6px;font-weight:700}
.facts p{margin:12px 0 0;color:var(--muted);font-size:.9375rem}

/* ---------- MARQUEE ---------- */
.marquee{display:flex;overflow:hidden;border-block:1px solid var(--line);padding-block:22px;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;flex:none;gap:0;margin:0;padding:0;list-style:none;animation:marq 48s linear infinite}
.marquee li{display:flex;align-items:center;font:800 clamp(1.5rem,2.8vw,2.5rem)/1 var(--font);font-stretch:125%;letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.marquee li::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--sun);margin:0 clamp(22px,3vw,40px)}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---------- SECTION HEAD ---------- */
.head6{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;flex-wrap:wrap;margin-bottom:clamp(28px,3.6vw,52px)}
.head6 h2{font-size:clamp(2.5rem,5.4vw,5rem);line-height:.95;font-stretch:122%;letter-spacing:-.035em;margin:0}
.head6 p{max-width:42ch;color:var(--muted);margin:0;font-size:1.0625rem}
.more6{font-weight:700;font-stretch:108%;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:3px}
.more6:hover{color:var(--green-ink)}

/* ---------- TILES ---------- */
.fit6{padding-block:clamp(72px,9vw,128px)}
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(210px,21vw,300px);gap:clamp(10px,1.2vw,16px)}
.tile{position:relative;display:block;overflow:hidden;border-radius:var(--r-xl);color:#fff;text-decoration:none;isolation:isolate;background:var(--night)}
.tile picture{position:absolute;inset:0;z-index:-2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,8,40,0) 40%,rgba(0,8,40,.82) 100%)}
.t-a{grid-column:span 7;grid-row:span 2}.t-b{grid-column:span 5}.t-c{grid-column:span 5}.t-d,.t-e,.t-f{grid-column:span 4}
.tile-tag{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.94);color:var(--navy);font:700 .8125rem var(--font);padding:7px 12px;border-radius:999px}
.tile-body{position:absolute;left:clamp(18px,2vw,28px);right:84px;bottom:clamp(18px,2vw,26px);display:grid;gap:6px}
.tile-body b{font:800 clamp(1.4rem,2.3vw,2.3rem)/1 var(--font);font-stretch:120%;letter-spacing:-.025em}
.t-a .tile-body b{font-size:clamp(2rem,3.6vw,3.4rem)}
.tile-body span{opacity:.88;font-size:1rem}
.tile-go{position:absolute;right:18px;bottom:18px;width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
.tile-go svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .tile-go{transform:rotate(-45deg);background:var(--green)}
.tile:focus-visible{outline-offset:4px}

/* ---------- GRANT ---------- */
.grant6{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--navy);color:#fff;min-height:720px}
.grant6-photo{position:relative;min-height:420px}
.grant6-photo picture,.grant6-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 30%}
.grant6-panel{padding:clamp(48px,6vw,96px) clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.grant6-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:26px 28px}
.grant6-panel>*{position:relative}
.grant6 h2{color:#fff;font-size:clamp(2rem,3.6vw,3.3rem);font-stretch:118%;max-width:16ch}
.grant6 .lede{color:#C5CFF5;margin-bottom:8px}
.grant6 .gt-out{background:none;padding:0;border-radius:0;margin:18px 0 26px}
.grant6 .gt-out::after{display:none}
.grant6 .gt-out .fig{font-size:clamp(4.4rem,10vw,9rem);margin:4px 0 14px;letter-spacing:-.05em}
.grant6 .gt-out dl{max-width:420px}
.grant6 .gt-controls{gap:18px;max-width:520px}
.grant6 .gt-row label.lbl{color:#fff}
.grant6 .gt-row output{color:#7BE287}
.grant6 .switch{color:#fff}
.grant6 .switch small{color:#AEB9E6}
.grant6 .switch .track{background:rgba(255,255,255,.25)}
.grant6 .small{color:#AEB9E6;margin:22px 0 0;max-width:56ch}
.grant6 .btn-row{margin-top:24px}

/* ---------- WEATHER ---------- */
.weather6{position:relative;isolation:isolate;color:#fff;padding-block:clamp(96px,12vw,170px);overflow:hidden}
.weather6-bg{position:absolute;inset:0;z-index:-2}
.weather6-bg img{width:100%;height:100%;object-fit:cover}
.weather6::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,8,40,.88) 0%,rgba(0,8,40,.72) 50%,rgba(0,8,40,.55) 100%)}
.weather6-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:end}
.weather6 h2{color:#fff;font-size:clamp(2.5rem,5.4vw,5rem);line-height:.95;font-stretch:122%;letter-spacing:-.035em}
.weather6 .lede{color:#DCE3FF}
.weather6 .small{color:#AEB9E6}
.weather6 .big-fig{color:#fff}
.weather6 .months{border-bottom-color:rgba(255,255,255,.6)}
.weather6 .months .bar{background:rgba(255,255,255,.88)}
.weather6 .months li.hi .bar{background:var(--green)}
.weather6 .months .v{color:#fff}
.weather6 .months-x{color:#C5CFF5}

/* ---------- RAIL (real installs) ---------- */
.work6{padding-block:clamp(80px,10vw,140px) clamp(64px,8vw,110px);overflow:hidden}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,31vw,470px);gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 20px;scroll-padding-inline:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));scrollbar-width:thin;scrollbar-color:var(--navy) transparent}
.slide{scroll-snap-align:start;display:block;text-decoration:none;color:var(--ink)}
.slide figure{margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.slide picture,.slide img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.slide:hover img{transform:scale(1.05)}
.slide-body{padding:18px 4px 0}
.slide-where{display:block;font-weight:650;color:var(--green-ink);font-size:.9375rem;margin-bottom:6px}
.slide h3{font-size:clamp(1.25rem,1.7vw,1.6rem);font-stretch:114%;letter-spacing:-.015em;margin-bottom:12px}
.slide dl{display:flex;gap:22px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
.slide dt{font-size:.8125rem;color:var(--muted)}
.slide dd{margin:0;font:800 1.125rem var(--font);font-stretch:114%;color:var(--navy);font-variant-numeric:tabular-nums}
.slide-more{display:grid;place-items:center;aspect-ratio:4/5;border-radius:var(--r-xl);background:var(--navy);color:#fff;text-align:center;font:800 clamp(1.6rem,2.4vw,2.2rem)/1.05 var(--font);font-stretch:120%;align-self:start}
.slide-more:hover{background:var(--navy-2)}

/* ---------- REVIEWS ---------- */
.reviews6{padding-block:clamp(80px,10vw,140px);background:var(--paper)}
.reviews6 .wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.quote6{margin:0}
.quote6 blockquote{margin:0;font:560 clamp(1.5rem,2.7vw,2.45rem)/1.24 var(--font);font-stretch:102%;letter-spacing:-.015em;color:var(--navy);text-wrap:pretty}
.quote6 blockquote::before{content:"“";display:block;font:850 7rem/.5 var(--font);color:var(--green);margin-bottom:18px}
.quote6 figcaption{margin-top:26px;color:var(--muted)}
.quote6 figcaption b{color:var(--ink)}
.reviews6-side{display:grid;gap:22px}
.reviews6-side .rating{justify-self:start}

/* ---------- PROMISES ---------- */
.promise6{background:var(--navy);color:#fff;padding-block:clamp(80px,10vw,140px);position:relative;overflow:hidden}
.promise6::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:26px 28px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%)}
.promise6 .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.promise6 h2{color:#fff;font-size:clamp(2.4rem,4.6vw,4.3rem);line-height:.96;font-stretch:122%;letter-spacing:-.035em;position:sticky;top:110px}
.promise6 ul{list-style:none;margin:0;padding:0}
.promise6 li{padding:26px 0;border-top:1px solid rgba(255,255,255,.2);color:#C5CFF5;font-size:1.0625rem}
.promise6 li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.promise6 li b{display:block;color:#fff;font:780 clamp(1.3rem,2vw,1.75rem)/1.15 var(--font);font-stretch:116%;letter-spacing:-.015em;margin-bottom:8px}

/* ---------- CTA ---------- */
.cta6{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.cta6-bg{position:absolute;inset:0;z-index:-2}
.cta6-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cta6::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,8,40,.86) 0%,rgba(0,8,40,.55) 55%,rgba(0,8,40,.25) 100%)}
.cta6-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(96px,12vw,170px)}
.cta6 h2{color:#fff;font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:.95;font-stretch:122%;letter-spacing:-.035em}
.cta6 .lede{color:#E6EBFF}
.cta6 .contact-lines{font:700 1.25rem/1.6 var(--font);margin-top:28px}
.cta6 .contact-lines a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.cta6 .card-form h2{color:var(--navy);font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.02em}

/* ---------- PHOTO PAGE HEADS ---------- */
.ph-head{position:relative;isolation:isolate;min-height:clamp(440px,64vh,660px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--night)}
.ph-head-media{position:absolute;inset:0;z-index:-2}
.ph-head-media picture,.ph-head-media img{display:block;width:100%;height:100%;object-fit:cover}
.ph-head-media img{animation:kb 2.4s var(--ease) both}
.ph-head-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,8,40,.88) 0%,rgba(0,8,40,.35) 45%,rgba(0,8,40,.1) 100%),linear-gradient(90deg,rgba(0,8,40,.55) 0%,rgba(0,8,40,0) 65%)}
.ph-head-in{width:100%;padding-block:120px clamp(44px,6vw,80px)}
.ph-head h1{color:#fff;font-size:clamp(2.6rem,6.4vw,6rem);line-height:.92;font-stretch:124%;letter-spacing:-.04em;max-width:18ch;margin-bottom:.35em}
.ph-head .lede{color:#E6EBFF;max-width:56ch}
.ph-head .crumbs,.ph-head .crumbs a{color:#fff;opacity:.85}
.ph-head .checked{color:#fff}
.ph-head .note{max-width:60ch}
.page-head.plain{padding-block:clamp(56px,7vw,100px) clamp(40px,5vw,64px);background:var(--paper);color:var(--navy)}

/* ---------- reveal (big images, once) ---------- */
.reveal img{clip-path:inset(6% 6% 6% 6% round var(--r-xl));transform:scale(1.08);transition:clip-path 1.2s var(--ease),transform 1.6s var(--ease)}
.reveal.in img{clip-path:inset(0 0 0 0 round 0);transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .t-a{grid-column:span 12;grid-row:span 2}.t-b,.t-c{grid-column:span 6}.t-d,.t-e,.t-f{grid-column:span 4}
}
@media (max-width:900px){
  .grant6,.weather6-in,.reviews6 .wrap,.promise6 .wrap,.cta6-in{grid-template-columns:1fr}
  .grant6-photo{min-height:56vw}
  .promise6 h2{position:static}
  .facts{grid-template-columns:1fr}
  .facts>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
  .h6-foot{position:static;padding-bottom:28px}
  .h6-in{padding-bottom:28px}
  .tiles{grid-auto-rows:240px}
  .t-a{grid-row:span 1}.t-a,.t-b,.t-c,.t-d,.t-e,.t-f{grid-column:span 12}
}
@media (max-width:600px){
  .h6{min-height:max(92svh,560px)}
  .h6-title{font-size:clamp(2.9rem,13.5vw,4rem)}
  .h6-kicker{font-size:.875rem}
  .h6 .btn-row .btn{flex:1 1 100%}
  .rail{grid-auto-columns:82vw}
  .today{font-size:.875rem}
  .ph-head h1{font-size:clamp(2.3rem,11vw,3.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .h6-title .ln>span{transform:none}.h6-lede,.h6 .btn-row{opacity:1}
  .marquee ul{animation:none}
  .reveal img{clip-path:none;transform:none}
}
/* short photo CTA used at the end of inner pages */
.cta6-short .cta6-in{grid-template-columns:minmax(0,1.3fr) auto;padding-block:clamp(80px,10vw,140px)}
.cta6-short h2{font-size:clamp(2.2rem,4.4vw,4rem);max-width:18ch}
/* image pairs inside product pages */
.strip6{padding-block:clamp(16px,3vw,40px)}
.strip6-in{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(10px,1.4vw,18px)}
.strip6 figure{margin:0;border-radius:var(--r-xl);overflow:hidden;height:clamp(300px,38vw,560px)}
.strip6 picture,.strip6 img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.strip6-in,.cta6-short .cta6-in{grid-template-columns:1fr}.strip6 figure{height:62vw}}

.review-ask{margin-top:10px}
.reviews6 .review-ask{color:inherit;opacity:.8}

/* =====================================================================
   v7 ROUND 1 — "The sky clears". One signature: Archivo's width axis opens like a clearing sky.
   Everything scroll-linked sits inside @supports + no-preference, so browsers without scroll timelines
   (Firefox stable) and reduced-motion users get the finished state. Nothing is ever hidden by default.
   ===================================================================== */
@property --w{syntax:'<percentage>';inherits:true;initial-value:100%}
::selection{background:var(--green);color:var(--navy)}
p,li,dd,blockquote{text-wrap:pretty}
.num,.facts dd,.big-fig,.case-figs dd,.slide dd,[data-count]{font-variant-numeric:tabular-nums}
section[id],[id].band{scroll-margin-top:96px}

/* ---- page-to-page transitions (Chrome/Edge 126+, Safari 18.2+; others just load the page) ---- */
@view-transition{navigation:auto}
header.site{view-transition-name:site-header}
.case-hero>picture{view-transition-name:var(--vt,none)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:var(--ease)}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---- the signature: width opens ---- */
.h6-title{--w:125%;font-stretch:var(--w)}
@media (prefers-reduced-motion:no-preference){
  .h6-title .ln>span{animation:rise 1.05s var(--ease) .15s forwards,open 1.6s var(--ease) .15s both}
  .h6-title .ln+.ln>span{animation-delay:.27s,.27s}
  @keyframes open{from{font-stretch:78%;letter-spacing:-.02em}to{font-stretch:125%}}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* leaving the hero: title tightens and lifts, photo sinks and darkens */
    .h6-in{animation:hero-out linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    @keyframes hero-out{to{transform:translateY(-14svh);opacity:.15}}
    .h6-bg img{animation:kb 2.8s var(--ease) both,hero-sink linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100svh}
    @keyframes hero-sink{to{translate:0 12%}}
    /* section titles open once as they enter */
    .head6 h2,.weather6 h2,.cta6 h2,.promise6 h2,.ph-head h1,.case-hero h1{animation:title-open linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    @keyframes title-open{from{font-stretch:92%;letter-spacing:-.01em}}
    .promise6 h2{animation-range:entry 0% cover 30%}
  }
}

/* ---- footer wordmark: opens from 62% to 125% as the page ends ---- */
footer.site{position:relative;isolation:isolate;overflow:hidden}
.grant6-panel,.promise6{isolation:isolate}
footer.site::before,.grant6-panel::after,.promise6::after,.h6-shade::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(../img/grain.png);opacity:.07;mix-blend-mode:overlay;z-index:-1}
.h6-shade::after{opacity:.08}
footer.site .wrap{position:relative;z-index:1}
.wordmark{margin:56px 0 8px;font:850 clamp(3.2rem,12.4vw,12.5rem)/.8 var(--font);font-stretch:125%;letter-spacing:-.05em;white-space:nowrap;color:#13245E;user-select:none;text-align:left;overflow:hidden}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wordmark{animation:wm-open linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes wm-open{from{font-stretch:62%;color:#0B1A4F}}
  }
}

/* ---- photo craft: unclip on entry, slow parallax inside frames ---- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tile,.slide figure,.strip6 figure,.case figure,.case-second{animation:unclip linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    @keyframes unclip{from{clip-path:inset(9% 7% 9% 7% round 34px)}to{clip-path:inset(0 0 0 0 round var(--r-xl))}}
    .tile img,.strip6 img,.slide img{scale:1.12;animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes settle{to{scale:1}}
    .reveal img{clip-path:none;transform:none;transition:none}
    .weather6-bg img,.cta6-bg img,.grant6-photo img{scale:1.16;animation:parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ph-head-media img{animation:kb 2.4s var(--ease) both,parallax-head linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90svh}
    @keyframes parallax{from{translate:0 -7%}to{translate:0 7%}}
    @keyframes parallax-head{to{translate:0 14%}}
    /* data: month bars grow from the baseline */
    .months .bar{transform-origin:50% 100%;animation:bar-grow linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .months li:nth-child(2n) .bar{animation-range:entry 24% cover 48%}
    .months li:nth-child(3n) .bar{animation-range:entry 28% cover 52%}
    @keyframes bar-grow{from{transform:scaleY(.04)}}
  }
}
.tile:hover .tile-go{transform:rotate(-45deg) scale(1.06)}

/* ---- marquee control ---- */
.marquee-wrap{position:relative}
.marquee:hover ul,.marquee-wrap:focus-within ul,.marquee-wrap.paused ul{animation-play-state:paused}
.marq-toggle{position:absolute;right:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.marq-toggle svg{width:16px;height:16px;fill:var(--navy)}
.marq-toggle .i-play,.marquee-wrap.paused .marq-toggle .i-pause{display:none}
.marquee-wrap.paused .marq-toggle .i-play{display:block}
.marq-toggle:hover{background:var(--navy-soft)}
@media (prefers-reduced-motion:reduce){.marq-toggle{display:none}}

/* ---- rail controls ---- */
.rail-ctl{display:flex;align-items:center;gap:14px;margin:-8px auto 22px}
.rail-progress{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.rail-progress i{position:absolute;inset:0;background:var(--navy);transform-origin:0 50%;transform:scaleX(var(--p,.2));transition:transform .25s var(--ease)}
.rail-pos{font:800 1rem var(--font);font-stretch:112%;color:var(--navy);font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right}
.rail-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--navy);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.rail-btn svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{background:var(--navy)}.rail-btn:hover svg{stroke:#fff}
.rail-btn:active{transform:scale(.94)}
.rail-btn[disabled]{opacity:.35;pointer-events:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail.dragging a{pointer-events:none}
@media (hover:hover) and (pointer:fine){.rail{cursor:grab}}
.rail::-webkit-scrollbar{height:0}
.rail{scrollbar-width:none}

/* ---- links that draw ---- */
.more6{border-bottom:0;background:linear-gradient(var(--green),var(--green)) 0 100%/100% 2px no-repeat;transition:background-size .45s var(--ease)}
.more6:hover{background-size:0 2px;background-position:100% 100%}
.btn{transition:background-color .2s,color .2s,transform .18s var(--ease),box-shadow .2s}
.btn:active{transform:scale(.98)}

/* ---- 404 ---- */
.ph-404{min-height:clamp(420px,62vh,620px)}
.routes404{padding-block:clamp(56px,7vw,96px)}
.routes404 .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--navy)}
.routes404 .wrap>a{display:grid;gap:8px;padding:28px 24px 30px 0;text-decoration:none;color:var(--muted)}
.routes404 .wrap>a+a{padding-left:24px;border-left:1px solid var(--line)}
.routes404 .wrap>a b{font:820 clamp(1.5rem,2.6vw,2.3rem)/1 var(--font);font-stretch:120%;letter-spacing:-.03em;color:var(--navy)}
.routes404 .wrap>a:hover b{color:var(--green-ink)}
.routes404-contact{grid-column:1/-1;margin:24px 0 0;color:var(--muted)}
@media (max-width:900px){.routes404 .wrap{grid-template-columns:1fr}.routes404 .wrap>a+a{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.grant6-photo{overflow:hidden}
footer.site .wrap{container-type:inline-size}
.wordmark{font-size:9.9cqi;color:#172C72;overflow:visible}
@supports not (font-size:1cqi){.wordmark{font-size:8.6vw}}

/* =====================================================================
   v7 ROUND 2 — three-step survey request. Without JS: one complete form. With JS (.ms-on): one step at a time.
   ===================================================================== */
.ms fieldset{border:0;margin:0;padding:0;min-width:0}
.ms legend{font:780 1.22rem/1.2 var(--font);font-stretch:112%;letter-spacing:-.01em;color:var(--navy);padding:0;margin:18px 0 2px;outline:none}
.ms-step+.ms-step{margin-top:26px;padding-top:6px;border-top:1px solid var(--line)}
.ms-on .ms-step+.ms-step{margin-top:0;padding-top:0;border-top:0}
.ms-bar{display:none}
.ms-on .ms-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none;margin:18px 0 4px;padding:0;counter-reset:s}
.ms-bar li{counter-increment:s;font:650 .8125rem/1.2 var(--font);color:var(--muted);padding-top:10px;position:relative}
.ms-bar li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:#DDE3EF;transition:background .3s var(--ease)}
.ms-bar li.done::before{background:var(--navy)}
.ms-bar li.now::before{background:var(--green)}
.ms-bar li.now,.ms-bar li.done{color:var(--navy)}
.ms-on .ms-step{display:none}
.ms-on .ms-step.now{display:block;animation:ms-in .22s var(--ease)}
@keyframes ms-in{from{opacity:0;transform:translateY(6px)}}
.ms [data-next],.ms [data-back]{display:none}
.ms-on [data-next],.ms-on [data-back]{display:inline-flex}
.ms-nav{display:flex;gap:10px;margin-top:18px}
.ms-nav .btn{width:auto;margin-top:0;flex:1}
.ms-nav [data-back]{flex:0 0 auto;padding-inline:20px}
.ms .hint{font-size:.875rem;color:var(--muted);margin:6px 0 0}
.ms input:user-invalid,.ms input.bad{border-color:#B42318;box-shadow:0 0 0 3px rgba(180,35,24,.14)}
.ms .err-line{font-size:.875rem;color:#B42318;margin:6px 0 0;font-weight:600}
.opt-tag{font-weight:500;color:var(--muted)}
.ms-talk{font-size:.875rem;color:var(--muted);margin:14px 0 0;text-align:center}
.ms-talk a{font-weight:700}
/* owner pills */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pills-q{flex:0 0 100%;font:650 .875rem var(--font);color:var(--ink);margin-bottom:2px}
.pill{position:relative;margin:0;font-weight:600}
.pill input,.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill span{display:block;padding:10px 15px;border:1.5px solid #C9D2E0;border-radius:999px;font-size:.9375rem;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.pill span:hover{border-color:var(--navy)}
.pill input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.pill input:focus-visible+span,.opt input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.note-rent{display:none;font-size:.875rem;background:var(--warn);color:var(--warn-ink);padding:10px 12px;border-radius:var(--r);margin:12px 0 0}
.ms:has(input[name=owner][value=Tenant]:checked) .note-rent{display:block}
/* interest cards */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.opt{position:relative;margin:0}
.opt span{display:grid;gap:3px;height:100%;padding:13px 14px 13px 40px;border:1.5px solid #C9D2E0;border-radius:12px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;position:relative}
.opt span::before{content:"";position:absolute;left:13px;top:15px;width:16px;height:16px;border-radius:50%;border:1.5px solid #9AA6C0;background:#fff}
.opt b{font:700 .9375rem/1.25 var(--font);color:var(--navy)}
.opt small{font-size:.8125rem;color:var(--muted);font-weight:400;line-height:1.35}
.opt span:hover{border-color:var(--navy)}
.opt input:checked+span{background:var(--navy);border-color:var(--navy)}
.opt input:checked+span b{color:#fff}.opt input:checked+span small{color:#C5CFF5}
.opt input:checked+span::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23001466' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--green)}
@media (max-width:420px){.opts{grid-template-columns:1fr}}
/* success */
.ms.sent .ms-step,.ms.sent .ms-bar{display:none}
.ms.sent .form-msg.ok{display:block;background:none;padding:6px 0 0;margin:0;font-size:1.0625rem;color:var(--ink)}
.ms.sent .form-msg.ok b{display:block;font:820 1.7rem/1.1 var(--font);font-stretch:116%;letter-spacing:-.02em;color:var(--navy);margin-bottom:8px}
@media (prefers-reduced-motion:reduce){.ms-on .ms-step.now{animation:none}}
/* kit row */
.kit6{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 34px;margin-top:clamp(28px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--line)}
.kit6 span{font-size:.9375rem;color:var(--muted)}
.kit6 b{font:800 1.0625rem var(--font);font-stretch:118%;letter-spacing:.01em;color:var(--navy)}

/* =====================================================================
   v7 ROUND 3 — the bill, with and without solar; the seven steps as stacking cards.
   ===================================================================== */
.bill6{padding-block:clamp(72px,9vw,128px);background:var(--paper)}
.bill6-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(14px,2vw,28px);align-items:start}
.stmt{position:relative;background:#fff;border-radius:6px;padding:28px 28px 26px;box-shadow:0 1px 0 #E1E6F0,0 18px 40px -24px rgba(0,20,102,.35);font-variant-numeric:tabular-nums}
.stmt::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:radial-gradient(circle at 8px 0,transparent 0 6px,#fff 6.5px) 0 0/16px 10px repeat-x}
.stmt h3{font:780 1.125rem/1.25 var(--font);font-stretch:112%;margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid var(--navy)}
.stmt dl{margin:0}
.stmt dt{font-weight:700;color:var(--ink);font-size:.9375rem;margin-top:14px}
.stmt dd{margin:2px 0 0;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.9375rem;padding-bottom:12px;border-bottom:1px dashed #D3DAE8}
.stmt dd b{color:var(--ink);font-weight:700}
.stmt-total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 0}
.stmt-total span{font-weight:700;color:var(--navy)}
.stmt-total b{font:850 clamp(2.2rem,3.6vw,3.2rem)/1 var(--font);font-stretch:118%;letter-spacing:-.03em;color:var(--navy)}
.stmt-after{outline:2px solid var(--navy);outline-offset:-2px}
.stmt-after [data-b-exp]{color:var(--green-ink)}
.stamp{position:absolute;right:-14px;top:-22px;margin:0;display:grid;justify-items:center;width:132px;height:132px;place-content:center;border-radius:50%;background:var(--green);color:var(--navy);text-align:center;rotate:-8deg;box-shadow:0 12px 30px -10px rgba(0,80,10,.6);font-size:.8125rem;font-weight:700;line-height:1.1}
.stamp b{font:850 1.75rem/1 var(--font);font-stretch:112%;letter-spacing:-.02em;margin:3px 0}
.bill6.credit [data-b-after]{color:var(--green-ink)}
.bill6-ctl{align-self:stretch;display:flex;flex-direction:column;gap:14px;padding:6px 0 0}
.bill6-ctl label:first-child{display:flex;justify-content:space-between;gap:10px;font-weight:700;color:var(--navy);margin:0}
.bill6-ctl output{color:var(--green-ink);font-variant-numeric:tabular-nums}
.bill6-ctl .switch{margin:0}
.bill6-ctl .small{margin-top:auto}
@media (max-width:1100px){.bill6-grid{grid-template-columns:1fr 1fr}.bill6-ctl{grid-column:1/-1;order:-1}}
@media (max-width:700px){.bill6-grid{grid-template-columns:1fr;gap:30px}.stamp{right:8px;top:-30px;width:108px;height:108px}.stamp b{font-size:1.4rem}}

.stack6{padding-block:clamp(64px,8vw,120px)}
.stack{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,22px)}
.stack-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(18px,4vw,64px);align-items:center;min-height:clamp(240px,30vw,340px);padding:clamp(26px,4vw,52px);border-radius:var(--r-xl);background:var(--paper);color:var(--ink);transform-origin:50% 0}
.stack-card:nth-child(2n){background:var(--navy);color:#C5CFF5}
.stack-card:nth-child(2n) h3{color:#fff}
.stack-card:nth-child(2n) .stack-n{color:#2A3F92}
.stack-card:nth-child(2n) .stack-when{color:#7BE287}
.stack-n{font:850 clamp(6rem,15vw,13rem)/.78 var(--font);font-stretch:62%;letter-spacing:-.04em;color:#CBD4EA;font-variant-numeric:tabular-nums}
.stack-when{display:block;font-weight:700;color:var(--green-ink);font-size:.9375rem;margin-bottom:10px}
.stack-card h3{font:820 clamp(1.7rem,3.2vw,2.9rem)/1 var(--font);font-stretch:120%;letter-spacing:-.03em;margin:0 0 14px}
.stack-card p{font-size:1.0625rem;max-width:46ch;margin:0}
.stack-need{margin-top:clamp(28px,4vw,56px);padding-top:28px;border-top:2px solid var(--navy);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(18px,4vw,64px)}
.stack-need h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-stretch:116%}
@media (min-width:901px){
  .stack-card{position:sticky;top:calc(96px + var(--i) * 14px)}
  .stack-card{box-shadow:0 -18px 40px -28px rgba(0,10,51,.45)}
}
@media (max-width:900px){.stack-card,.stack-need{grid-template-columns:1fr}.stack-n{font-size:5.5rem}}
.stmt-after h3{padding-right:112px}@media (max-width:700px){.stmt-after h3{padding-right:96px}}

/* =====================================================================
   v7 ROUND 4 — menus as small editorial panels; phone menu as a full-height sheet; the story turns to evening.
   ===================================================================== */
.chev{width:12px;height:12px;margin-left:5px;vertical-align:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
nav.main li.open>button .chev,nav.main li:hover>button .chev{transform:rotate(180deg)}
.nav-cta{display:none}
@media (min-width:901px){
  nav.main .sub{display:block;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s .16s;padding:10px}
  nav.main li:hover>.sub,nav.main li.open>.sub,nav.main li:focus-within>.sub{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  nav.main li>.sub.has-feat{display:grid;grid-template-columns:minmax(260px,1fr) 250px;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:10px;min-width:560px}
  nav.main .sub.has-feat>li:not(.sub-feat){grid-column:1}
  .sub-feat{grid-column:2;grid-row:1/-1}
  nav.main .sub-feat a{height:100%;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:var(--paper)}
  .sub-feat img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:10px;margin-bottom:4px}
  .sub-feat span{font:500 .875rem/1.4 var(--font);color:var(--ink)}
  .sub-feat b{margin-top:auto;font:750 .9375rem var(--font);color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px}
  nav.main .sub-feat a:hover{background:var(--navy-soft)}
  nav.main .sub>li:not(.sub-feat) a:hover{background:var(--paper)}
  nav.main li:last-child>.sub{left:auto;right:0}
}
@media (prefers-reduced-motion:reduce){nav.main .sub{transition:none}}
@media (max-width:900px){
  nav.main{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--hh,64px));max-height:none;background:var(--navy);color:#fff;padding:12px var(--gut) 0;border:0;box-shadow:none;display:none;flex-direction:column;overflow:auto;overscroll-behavior:contain}
  nav.main.open{display:flex;animation:sheet-in .22s var(--ease)}
  @keyframes sheet-in{from{opacity:0;transform:translateY(-8px)}}
  nav.main>ul{gap:0}
  nav.main>ul>li{border-bottom:1px solid rgba(255,255,255,.14)}
  nav.main>ul>li>a,nav.main>ul>li>button{display:flex;width:100%;justify-content:space-between;align-items:center;color:#fff;font:800 clamp(1.6rem,7vw,2.1rem)/1.1 var(--font);font-stretch:118%;letter-spacing:-.02em;padding:18px 0;border-radius:0}
  nav.main>ul>li>a:hover,nav.main>ul>li>button:hover{background:none;color:#7BE287}
  nav.main>ul>li>button .chev{width:20px;height:20px}
  nav.main .sub{display:none;padding:0 0 16px;background:none}
  nav.main li.open>.sub{display:block}
  nav.main .sub a{color:#fff;padding:10px 0;font-size:1.0625rem}
  nav.main .sub a:hover{background:none;color:#7BE287}
  nav.main .sub small{color:#AEB9E6}
  .sub-feat{display:none}
  .nav-cta{display:grid;gap:10px;margin-top:auto;padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px));position:sticky;bottom:0;background:linear-gradient(transparent,var(--navy) 18px)}
  .nav-cta .btn{width:100%}
  nav.main .nav-phone{color:#fff;text-align:center;font:750 1.125rem var(--font);text-decoration:none;padding:8px}
  html.nav-open{overflow:hidden}
  html.nav-open .action-bar,html.nav-open .cookie{display:none}
  header.site.over:has(nav.main.open){background:#fff}
  header.site.over:has(nav.main.open) .logo-dark{display:block}header.site.over:has(nav.main.open) .logo-light{display:none}
}
/* the story turns to evening at the battery step */
#cw-sky stop{transition:stop-color .9s var(--ease)}
.cutaway .g-sun{transition:transform .9s var(--ease),opacity .45s;transform-box:fill-box;transform-origin:50% 50%}
.cutaway .g-house rect[fill="#E8EEFA"]{transition:fill .9s var(--ease)}
.story-art[data-step="4"] #cw-sky stop:first-child,.story-art[data-step="5"] #cw-sky stop:first-child{stop-color:#F3A867}
.story-art[data-step="4"] #cw-sky stop:last-child,.story-art[data-step="5"] #cw-sky stop:last-child{stop-color:#FFF1E2}
.story-art[data-step="4"] .g-sun,.story-art[data-step="5"] .g-sun{transform:translateY(150px) scale(.82);opacity:.85}
.story-art[data-step="4"] .g-sun circle,.story-art[data-step="5"] .g-sun circle{fill:#F26A3D}
.story-art[data-step="4"] .g-house rect[fill="#E8EEFA"],.story-art[data-step="5"] .g-house rect[fill="#E8EEFA"]{fill:#FFD27A}
@media (prefers-reduced-motion:reduce){#cw-sky stop,.cutaway .g-sun,.cutaway .g-house rect{transition:none}}

/* =====================================================================
   v7 ROUND 5 — next-install banner on case pages
   ===================================================================== */
.next6{position:relative;display:flex;align-items:flex-end;min-height:clamp(360px,52vh,560px);color:#fff;text-decoration:none;isolation:isolate;overflow:hidden;background:var(--night)}
.next6 figure{position:absolute;inset:0;margin:0;z-index:-2}
.next6 picture,.next6 img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.next6::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,8,40,.88),rgba(0,8,40,.15) 70%)}
.next6:hover img{transform:scale(1.04)}
.next6-in{display:grid;gap:10px;padding-block:clamp(40px,6vw,80px);width:100%}
.next6-k{font-weight:700;color:#7BE287}
.next6 b{font:850 clamp(2.2rem,5.4vw,5rem)/.95 var(--font);font-stretch:122%;letter-spacing:-.035em;max-width:18ch;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:transparent;text-underline-offset:8px;transition:text-decoration-color .3s}
.next6:hover b{text-decoration-color:var(--green)}
.next6-m{color:#DCE3FF}

/* =====================================================================
   v7 ROUND 6 — start the survey in the hero; the sun in the footer; print the estimate
   ===================================================================== */
.h6-start{margin-top:22px;max-width:520px;opacity:0;animation:fadein1 .9s ease .85s forwards}
.h6-start label{display:block;font:600 .9375rem var(--font);color:#DCE3FF;margin:0 0 8px}
.h6-start-row{display:flex;gap:8px;padding:6px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.h6-start input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:700 1.0625rem var(--font);font-stretch:110%;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px}
.h6-start input::placeholder{color:rgba(255,255,255,.55)}
.h6-start input:focus{box-shadow:none}
.h6-start-row:focus-within{border-color:var(--green);background:rgba(255,255,255,.18)}
.h6-start .btn{width:auto;margin:0;white-space:nowrap}
.h6-start-err{margin:8px 0 0;font-size:.875rem;font-weight:600;color:#FFD9A8}
@media (prefers-reduced-motion:reduce){.h6-start{opacity:1;animation:none}}
@media (max-width:600px){.h6-start-row{flex-direction:column}.h6-start .btn{width:100%}}
@media (max-height:820px) and (min-width:901px){.h6-in{padding-top:110px}.h6-title{font-size:clamp(3.3rem,8.2vw,8.4rem);margin-bottom:20px}.h6-lede{margin-bottom:22px}}
.sunline{margin:40px 0 0;color:#8E9BD0;font-size:.9375rem}
.sunline::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sun);margin-right:10px;vertical-align:1px}
@media print{
  .topbar,header.site,.preview-ribbon,.cookie,.action-bar,.marquee-wrap,footer.site,.ph-head-media,.ph-head-shade,.cta6,form,.strip6,.tiles,.btn,.wa-float{display:none!important}
  body{background:#fff;color:#000;padding:0;font-size:11pt}
  .ph-head{min-height:0;color:#000;background:none}.ph-head h1,.ph-head .lede,.ph-head .crumbs{color:#000}
  .result{box-shadow:none;border:1px solid #999;color:#000;background:#fff}
  .result *{color:#000!important;background:none!important}
  main::after{content:"Clear Sky Energy · 9 High Street, Tullamore, Co. Offaly R35 Y732 · 057 937 4247 · info@clearskyenergy.ie";display:block;margin-top:24px;font-size:9pt}
  *{animation:none!important;transition:none!important}
}
.h6-start{margin-top:0}
.h6-alt{margin:14px 0 0;color:#DCE3FF;font-size:1rem}
.h6-alt a{color:#fff;font-weight:700;text-decoration-color:var(--green);text-decoration-thickness:2px}
.h6-start-row{padding:7px}
.h6-start .btn{padding-inline:24px}

/* =====================================================================
   v7 ROUND 7 — accessibility pass (axe-core): headings, contrast in the story, list semantics
   ===================================================================== */
footer h2.fh{color:#fff;font:700 1rem/1.3 var(--font);font-stretch:100%;letter-spacing:0;margin:0 0 14px}
.facts dd.fact-note{margin:12px 0 0;font:400 .9375rem/1.5 var(--font);color:var(--muted);letter-spacing:0;font-stretch:100%}
/* story steps: inactive ones stay readable (AA); the active one is marked with a green rule instead of fading the rest */
.story-step{opacity:1;position:relative;padding-left:22px}
.story-step::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:3px;background:var(--line);transition:background .35s}
.story-step.on::before{background:var(--green)}
.story-step:not(.on) h3{color:#3D4A72}
.story-step:not(.on) .when{color:#3F6B47}
.result h2.res-h{color:#fff;font-size:1.125rem;font-stretch:100%;letter-spacing:0;margin:0 0 .45em}
.page-head.plain h1,.page-head.plain .lede,.page-head.plain .crumbs,.page-head.plain .crumbs a{color:var(--navy)}
.page-head.plain .lede{color:var(--ink)}
.stack-n{color:#6E7BAA}
.stack-card:nth-child(2n) .stack-n{color:#6A80D8}
.cta6-bg picture{display:block;width:100%;height:100%}

/* =====================================================================
   BRAND PHASE B1 — company furniture: credentials row in every footer
   ===================================================================== */
.creds{list-style:none;margin:44px 0 0;padding:22px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;border-block:1px solid rgba(255,255,255,.14)}
.creds li{display:grid;gap:4px;font-size:.875rem;color:#AEB9E6;line-height:1.4}
.creds b{font:800 1rem var(--font);font-stretch:112%;color:#fff;letter-spacing:.01em}
.creds a{color:#AEB9E6;display:grid;gap:4px}
.creds a:hover{color:#fff;text-decoration:none}.creds a:hover b{text-decoration:underline;text-decoration-color:var(--green)}
@media (max-width:900px){.creds{grid-template-columns:1fr 1fr}}
/* Our standards */
.std6{padding-block:clamp(64px,8vw,120px)}
.std-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.std-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(20px,5vw,80px);padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--line)}
.std-k{display:grid;align-content:start;gap:6px}
.std-n{font:850 clamp(3rem,6vw,5rem)/.8 var(--font);font-stretch:62%;color:#6E7BAA;font-variant-numeric:tabular-nums;margin-bottom:10px}
.std-k h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;font-stretch:120%;letter-spacing:-.03em;margin:0}
.std-when{font-weight:700;color:var(--green-ink)}
.std-row .ticks{margin:0;font-size:1.0625rem}
.std-row .ticks li+li{margin-top:12px}
.std-note{margin-top:24px}
@media (max-width:900px){.std-row{grid-template-columns:1fr}}
.grant6-photo img{object-position:40% 78%}

/* =====================================================================
   BRAND PHASE B2 — colour ratio: white carries the page, navy anchors (Vattenfall/Ørsted model)
   ===================================================================== */
.promise6{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.promise6::before,.promise6::after{display:none}
.promise6 h2{color:var(--navy)}
.promise6 li{color:var(--muted);border-top-color:var(--line)}
.promise6 li:last-child{border-bottom-color:var(--line)}
.promise6 li b{color:var(--navy)}
/* v9 (14 Oct): case cards hold their text on light photos too (plant-room and rail shots) */
.case::after{background:linear-gradient(180deg,rgba(0,10,51,.12) 0%,rgba(0,10,51,.58) 32%,rgba(0,10,51,.93) 100%)}
.wa-float{color:#04260f}