@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext-cc0aaa2d63.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-6522a48ff9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext-48072044ec.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ac5feb9532.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext-48072044ec.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ac5feb9532.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext-8f41327977.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-80724b1ffd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext-8f41327977.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-80724b1ffd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-ext-8f41327977.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-latin-80724b1ffd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* AES website redesign, design system v2 (17 Oct 2026, after Luke's v1 feedback)
   Source of the look: templates/proposal-new-format (navy, gold, white; Cormorant Garamond + Jost)
   v2: larger type, white-led with navy as accent, no product cut-out boxes, stronger logo, page nav. */
:root{
  --navy:#0C2659; --navy-deep:#081A3F; --navy-ink:#1B2333;
  --gold:#E09E1C; --gold-text:#8A5E0A; --gold-soft:#F2C46B;
  --ink:#1B2333; --mute:#4A5468; --line:#D9DEE8; --paper:#F5F6F8; --white:#FFFFFF;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(18px,5vw,80px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}  /* no CSS smooth scrolling: it breaks ScrollTrigger.refresh(); site.js smooths in-page links */
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:19px;line-height:1.6;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(42px,6.2vw,96px)}
h2{font-size:clamp(38px,5vw,68px)}
h3{font-size:clamp(28px,2.6vw,36px)}
p{margin:0 0 1em}
.lead{font-size:clamp(19px,1.45vw,23px);line-height:1.6;color:var(--mute);max-width:36em}
.k{font-family:var(--sans);font-weight:500;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.k.on-dark{color:var(--gold-soft)}
.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.section{padding:clamp(80px,10vw,150px) 0}
.on-navy{background:var(--navy);color:var(--white)}
.on-navy .lead{color:#D5DEEE}
.on-paper{background:var(--paper)}
.gold-rule{width:56px;height:2px;background:var(--gold);margin:22px 0 28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s,color .25s;white-space:nowrap;cursor:pointer;border:0}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:#f0ad2b}
.btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-navy{background:var(--navy);color:#fff}
.btn-line{border:1px solid var(--navy);color:var(--navy);background:transparent}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:400;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:2px;font-size:17px}
.more:after{content:"\2192"}

/* nav: page links for clickers, quote button always */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);transition:background .35s,box-shadow .35s,padding .35s;color:#fff}
.nav.solid{background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 1px 0 var(--line);color:var(--navy);padding:10px var(--gutter)}
.nav .logo img{height:62px;width:auto;transition:height .35s}
.nav.solid .logo img{height:48px}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:15.5px;letter-spacing:.04em;font-weight:400}
.nav ul a{opacity:.92;padding:6px 0;border-bottom:1px solid transparent}
.nav ul a:hover,.nav ul a.current{border-bottom-color:var(--gold);opacity:1}
.nav .cta{display:flex;align-items:center;gap:18px;font-size:15px}
.nav .cta .tel{opacity:.9;font-weight:400}
.nav .burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:14px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media (max-width:1020px){.nav ul,.nav .cta .tel{display:none}.nav .burger{display:block}.nav .logo img{height:48px}.nav.solid .logo img{height:42px}.nav{padding:12px var(--gutter)}}
.mobile-menu{position:fixed;inset:0;z-index:49;background:var(--navy-deep);color:#fff;display:none;flex-direction:column;justify-content:center;padding:var(--gutter)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--serif);font-size:36px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:48;display:none}
.sticky-cta .btn{width:100%;justify-content:center;box-shadow:0 10px 30px rgba(8,26,63,.35)}
@media (max-width:760px){.sticky-cta{display:block}}

/* hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--navy-deep);color:#fff}
.hero video,.hero img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,26,63,.5) 0%,rgba(8,26,63,.12) 40%,rgba(8,26,63,.78) 100%)}
.hero .inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(64px,10vh,120px)}
.hero h1{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .lead{color:#E6EAF2;margin-top:22px;max-width:32em}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero .scrollcue{position:absolute;right:var(--gutter);bottom:28px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;writing-mode:vertical-rl}
@media (max-width:760px){.hero .scrollcue{display:none}.hero{min-height:600px}}
.hero.short{height:auto;min-height:88svh}

/* statement */
.statement h2{font-size:clamp(36px,5.6vw,80px);max-width:17ch}
.statement .words span{display:inline-block;opacity:.18;transition:opacity .3s}
.statement .words span.lit{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--line);margin-top:56px;padding-top:40px}
.stats .n{font-family:var(--serif);font-size:clamp(44px,4.6vw,68px);line-height:1;color:var(--navy)}
.stats .n small{font-size:.5em;margin-left:4px}
.stats .l{margin-top:8px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:24px}}

/* pinned image + text steps */
.pin-sec{position:relative}
.pin-sec .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--navy-deep)}
.pin-sec .stage img,.pin-sec .stage canvas,.pin-sec .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin-sec .stage .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,26,63,.78) 0%,rgba(8,26,63,.35) 55%,rgba(8,26,63,.1) 100%)}
.pin-sec .steps{position:relative;z-index:2;margin-top:-100svh}
.pin-sec .step{min-height:100svh;display:flex;align-items:center}
.pin-sec .step .card{max-width:560px;color:#fff}
.pin-sec .step .card h2{font-size:clamp(36px,4.6vw,64px)}
.pin-sec .step .card .big{font-family:var(--serif);font-size:clamp(60px,8vw,124px);line-height:.95;color:var(--gold-soft)}
.pin-sec .step .card .big small{font-size:.38em;color:#fff;margin-left:6px}
.pin-sec .step .card p{color:#E6EAF2;font-size:clamp(18px,1.3vw,21px);max-width:30em}
@media (max-width:760px){.pin-sec .stage .shade{background:linear-gradient(180deg,rgba(8,26,63,.25) 0%,rgba(8,26,63,.88) 70%)}.pin-sec .step{align-items:flex-end;padding-bottom:96px}}

/* smart: phone + copy (white stage) */
.smart .stage{background:var(--paper)}
.smart .phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(350px,70vw);aspect-ratio:9/19.2;border-radius:48px;background:#0b0b0d;box-shadow:0 40px 100px rgba(8,26,63,.3),inset 0 0 0 2px #2a2a2e;overflow:hidden}
.smart .phone .screen{position:absolute;inset:10px;border-radius:38px;overflow:hidden;background:#fff}
.smart .phone .screen img,.smart .phone .screen .app{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s var(--ease)}
.smart .phone .screen .show{opacity:1}
.smart .phone .notch{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:34%;height:26px;border-radius:14px;background:#0b0b0d;z-index:3}
.smart .step .card{color:var(--ink);max-width:460px}
.smart .step .card h2{color:var(--navy)}
.smart .step .card p{color:var(--mute)}
@media (min-width:761px){.smart .phone{left:68%}}
@media (max-width:760px){.smart .phone{top:36%;width:min(220px,58vw)}.smart .step{align-items:flex-end;padding-bottom:100px}.smart .step .card{background:rgba(245,246,248,.94);padding:18px;border-radius:10px}}

/* scrub sections */
.scrub .stage{background:#0b0f18}
.scrub .caption{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) 56px;z-index:2;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.scrub .caption .line{position:absolute;left:var(--gutter);bottom:56px;max-width:640px;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scrub .caption .line.show{opacity:1;transform:none}
.scrub .caption h2{font-size:clamp(36px,5vw,70px)}
.scrub .caption p{color:#E6EAF2;max-width:30em;margin-top:12px;font-size:clamp(18px,1.3vw,21px)}
.scrub .spacer{height:240svh}
@media (max-width:760px){.scrub .spacer{height:200svh}.scrub .caption .line{bottom:96px;right:var(--gutter)}}

/* === battery animation (vector 10C) and live status demo === */
.bat-sec{position:relative;background:#0A1430;color:#fff}
.bat-sec .stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--gutter)}
.bat-sec .art{position:relative;height:min(70svh,640px)}
.bat-sec .art svg{width:100%;height:100%}
.bat-sec .copy{max-width:520px}
.bat-sec .copy .line{position:absolute;opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bat-sec .copy .line.show{opacity:1;transform:none}
.bat-sec .copy h2{font-size:clamp(36px,4.6vw,66px)}
.bat-sec .copy p{color:#D5DEEE;font-size:clamp(18px,1.3vw,21px);max-width:28em;margin-top:12px}
.bat-sec .copy{position:relative;height:300px}
.bat-sec .spacer{height:260svh}
@media (max-width:860px){.bat-sec .stage{grid-template-columns:1fr;align-content:center;gap:0}.bat-sec .art{height:42svh}.bat-sec .copy{height:280px}}
.unit{fill:#F4F5F7;stroke:#C9CED8;stroke-width:1}
.unit-dark{fill:#1C2230}
.glow{filter:drop-shadow(0 0 14px rgba(242,196,107,.55))}

.flow-sec{background:#fff;color:var(--ink)}
.flow-sec .stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:0 var(--gutter);overflow:hidden}
.flow-sec .diagram{position:relative}
.flow-sec .diagram svg{width:100%;height:auto;max-height:78svh}
.flow-sec .copy{position:relative;height:320px}
.flow-sec .copy .line{position:absolute;opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease);max-width:460px}
.flow-sec .copy .line.show{opacity:1;transform:none}
.flow-sec .copy h2{font-size:clamp(34px,4vw,58px);color:var(--navy)}
.flow-sec .copy p{color:var(--mute);font-size:clamp(18px,1.25vw,20px);margin-top:12px}
.flow-sec .spacer{height:300svh}
.flow-sec .clock{font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
@media (max-width:860px){.flow-sec .stage{grid-template-columns:1fr;align-content:center;gap:12px}.flow-sec .diagram svg{max-height:46svh}.flow-sec .copy{height:260px}}
.node-label{font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;fill:#4A5468}
.node-val{font-family:"Cormorant Garamond",serif;font-size:28px;fill:#0C2659}
.node-unit{font-family:"Jost",sans-serif;font-size:11px;fill:#4A5468}
.pipe{fill:none;stroke:#D9DEE8;stroke-width:3;stroke-linecap:round}
.pipe-on{fill:none;stroke:#E09E1C;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 10;animation:dash 1.2s linear infinite}
.pipe-on.grid{stroke:#4A5468}
.pipe-on.blue{stroke:#0C2659}
@keyframes dash{to{stroke-dashoffset:-32}}
@media (prefers-reduced-motion:reduce){.pipe-on{animation:none}}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px}
.features h3{font-size:26px;color:var(--navy);margin-bottom:10px}
.features p{color:var(--mute);font-size:17.5px}
.features .f{padding-top:22px;border-top:1px solid var(--line)}
.features.two{grid-template-columns:1fr 1fr}
@media (max-width:760px){.features,.features.two{grid-template-columns:1fr;gap:28px}}

/* integrated system (white) */
.system .products{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.system .products .p{text-align:left}
.system .products .pic{height:220px;display:flex;align-items:flex-end;justify-content:center;background:var(--paper);border-radius:6px;overflow:hidden;position:relative}
.system .products .pic img{max-height:88%;width:auto;mix-blend-mode:multiply}
.system .products .pic.dark{background:#0E1626}
.system .products .pic.dark img{mix-blend-mode:normal}
.system .products h3{font-size:26px;color:var(--navy);margin-top:18px}
.system .products p{color:var(--mute);font-size:17px;margin-top:8px}
.warranty{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--navy)}
.warranty div{padding:24px 20px 0;border-right:1px solid var(--line)}
.warranty div:last-child{border-right:0}
.warranty .n{font-family:var(--serif);font-size:clamp(34px,3.2vw,50px);line-height:1;color:var(--navy)}
.warranty .l{font-size:14.5px;color:var(--mute);margin-top:8px;line-height:1.4}
@media (max-width:860px){.system .products{grid-template-columns:1fr}.warranty{grid-template-columns:1fr 1fr}.warranty div:nth-child(2){border-right:0}}

/* full-bleed proof band */
.proof{position:relative;min-height:88svh;display:grid;align-items:end;color:#fff;overflow:hidden}
.proof img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proof .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,26,63,.1),rgba(8,26,63,.85) 80%)}
.proof .inner{position:relative;padding:clamp(60px,8vw,100px) 0}
.proof .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;border-top:1px solid rgba(255,255,255,.3);padding-top:28px}
.proof .facts .n{font-family:var(--serif);font-size:clamp(40px,4vw,60px);line-height:1;color:var(--gold-soft)}
.proof .facts .l{font-size:15px;color:#E6EAF2;margin-top:8px;max-width:22em}
@media (max-width:760px){.proof .facts{grid-template-columns:1fr;gap:18px}}

/* horizontal gallery (white) */
.gallery{position:relative;background:#fff;color:var(--ink)}
.gallery .head{padding:clamp(72px,9vw,120px) 0 28px}
.gallery .track-wrap{height:100svh;position:sticky;top:0;overflow:hidden}
.gallery .track{display:flex;gap:24px;height:100%;padding:0 var(--gutter);align-items:center;will-change:transform}
.gallery .card{flex:0 0 min(78vw,980px);height:min(74svh,660px);position:relative;border-radius:6px;overflow:hidden;background:#111;color:#fff}
.gallery .card img{width:100%;height:100%;object-fit:cover}
.gallery .card .cap{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(180deg,transparent,rgba(8,26,63,.85))}
.gallery .card .cap .t{font-family:var(--serif);font-size:clamp(26px,2.4vw,36px)}
.gallery .card .cap .s{font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-top:4px}
.gallery .spacer{height:320svh}
.gallery .track-wrap .hint{position:absolute;right:var(--gutter);top:24px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
@media (max-width:760px){.gallery .card{flex-basis:84vw;height:60svh}.gallery .spacer{height:360svh}}

/* projects grid (all) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pgrid figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#e9ecf1}
.pgrid figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.pgrid figure:hover img{transform:scale(1)}
.pgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;background:linear-gradient(transparent,rgba(8,26,63,.85))}
.pgrid figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1}
.pgrid figcaption span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.pgrid figure.wide{grid-column:span 2}
@media (max-width:760px){.pgrid{grid-template-columns:1fr 1fr;gap:10px}.pgrid figure.wide{grid-column:span 2}}

/* process */
.process ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:24px;counter-reset:s}
.process li{counter-increment:s;padding-top:18px;border-top:1px solid var(--line);position:relative}
.process li:before{content:"0" counter(s);font-family:var(--serif);font-size:30px;color:#B8BFCC;display:block;margin-bottom:10px;transition:color .4s}
.process li.on:before{color:var(--gold)}
.process li b{display:block;font-weight:500;color:var(--navy);font-size:19px;margin-bottom:6px}
.process li span{font-size:16px;color:var(--mute);line-height:1.5}
@media (max-width:1100px){.process ol{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.process ol{grid-template-columns:1fr 1fr;gap:18px}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split img{width:100%;height:auto;border-radius:4px}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* rooftech strip */
.rt{background:#00719E;color:#fff}
.rt .btn-rt{background:#fff;color:#00719E;border:0}
.rt .btn-rt:hover{background:#DCE8EE;color:#005B80}
.rt .three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.rt .three figure{margin:0}
.rt .three img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:4px}
.rt .three figcaption{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;color:#DCE8EE}
@media (max-width:760px){.rt .three{grid-template-columns:1fr}}

/* quote form */
.quote{background:var(--paper)}
.quote .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:4px;background:#fff;font:inherit;font-size:17px;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.form .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .choices label{margin:0;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:4px;padding:15px;font-size:15.5px;letter-spacing:.02em;text-transform:none;color:var(--ink);display:flex;align-items:center;gap:10px}
.form .choices input{width:auto;accent-color:var(--navy)}
.form .choices label:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.form .note{font-size:14.5px;color:var(--mute);margin-top:6px}
@media (max-width:860px){.quote .grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}.form .choices{grid-template-columns:1fr 1fr}}

/* footer */
footer{background:var(--navy-deep);color:#AFC0DC;padding:60px 0 32px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h4{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 14px}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:8px}
footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* page hero for inner pages */
.phero{position:relative;min-height:92svh;display:grid;align-items:end;background:var(--navy-deep);color:#fff;overflow:hidden}
.phero img.bg,.phero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,26,63,.45) 0%,rgba(8,26,63,.2) 35%,rgba(8,26,63,.92) 100%)}
.phero .inner{position:relative;padding:150px 0 76px}
.phero h1{max-width:14ch}
.phero .k{color:var(--gold-soft)}
.phero .lead{color:#E6EAF2;margin-top:20px}
.phero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* faq */
.faq{max-width:780px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--serif);font-size:26px;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary:after{content:"+";font-family:var(--sans);color:var(--gold-text);font-size:22px}
.faq details[open] summary:after{content:"\2013"}
.faq p{color:var(--mute);margin:12px 0 0;max-width:60ch;font-size:17.5px}

/* reveal utilities */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* reduced motion: the rules are under html.rm (site.js sets it from prefers-reduced-motion; production also sets it in the head).
   The pinned image sections keep their sticky photo (no motion); every scrubbed section becomes a static block with all its text in order. */
html.rm [data-reveal]{opacity:1;transform:none;transition:none}
html.rm .statement .words span{opacity:1;transition:none}
html.rm .pin-sec .stage img{transition:none!important}
html.rm .gallery .track-wrap,html.rm .bat-sec .stage,html.rm .flow-sec .stage,html.rm .live-sec .stage{position:relative;height:auto;padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
html.rm .scrub .spacer,html.rm .gallery .spacer,html.rm .bat-sec .spacer,html.rm .flow-sec .spacer,html.rm .live-sec .spacer,html.rm .night .spacer{display:none}
html.rm .gallery .track{flex-wrap:wrap;height:auto;padding-bottom:40px;transform:none!important}
html.rm .gallery .track-wrap .hint{display:none}
html.rm .bat-sec .copy,html.rm .flow-sec .copy,html.rm .live-sec .copy{height:auto!important}
html.rm .bat-sec .copy .line,html.rm .flow-sec .copy .line,html.rm .live-sec .copy .line{position:static;opacity:1;transform:none;margin-bottom:32px}
html.rm .night .stage,html.rm .scrub .stage{position:relative;height:auto;min-height:100svh}
html.rm .night .cap,html.rm .scrub .caption{position:relative;padding:calc(var(--navh,80px) + 96px) var(--gutter) 64px}
html.rm .night .cap .line,html.rm .scrub .caption .line{position:static;opacity:1;transform:none;margin-top:36px}
html.rm .pipe-on,html.rm .conn.on{animation:none}
html.rm .chart path.draw,html.rm .tl:after,html.rm .process li:before{transition:none}

/* ===== v3 additions ===== */
/* Enphase App Live Status replica, inside the phone */
.live-sec{position:relative;background:var(--navy);color:#fff}
.live-sec .stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:0 var(--gutter);overflow:hidden}
.live-sec .copy{position:relative;height:300px}
.live-sec .copy .line{position:absolute;opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease);max-width:520px}
.live-sec .copy .line.show{opacity:1;transform:none}
.live-sec .copy h2{font-size:clamp(34px,4.4vw,62px)}
.live-sec .copy p{color:#D5DEEE;font-size:clamp(18px,1.3vw,21px);margin-top:12px}
.live-sec .spacer{height:170svh}
.live-sec .phonewrap{display:flex;justify-content:center}
.app-phone{width:min(360px,84vw);aspect-ratio:9/19.2;border-radius:46px;background:#0b0b0d;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 0 0 2px #2a2a2e;overflow:hidden;position:relative}
.app-phone .notch{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:34%;height:24px;border-radius:14px;background:#0b0b0d;z-index:3}
.app{position:absolute;inset:8px;border-radius:38px;overflow:hidden;background:#F5F7F9;font-family:"Jost",sans-serif;color:#2A3344;display:flex;flex-direction:column}
.app .bar{background:#0BA4DB;color:#fff;padding:34px 18px 12px;font-weight:500;font-size:16px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.app .bar .ring{width:18px;height:18px;border:2.5px solid #fff;border-radius:50%;display:inline-block;position:relative}
.app .bar .ring:after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;background:#fff;margin-top:-1px}
.app .status{background:#fff;padding:12px 16px 10px;font-size:12.5px;display:grid;gap:5px}
.app .status .ok{color:#2EB872;font-weight:500}
.app .status .chip{justify-self:end;background:#0BA4DB;color:#fff;border-radius:999px;padding:3px 9px;font-size:10.5px;letter-spacing:.08em;font-weight:500}
.app .status .off{color:#E0612F;font-weight:500}
.app .charge{margin:10px 14px 0;background:#fff;border:1px solid #E3E8EE;border-radius:8px;padding:9px 12px;display:grid;grid-template-columns:1fr 1fr;font-size:11px}
.app .charge b{display:block;font-size:13px;font-weight:500;color:#2A3344}
.app .charge .l{letter-spacing:.1em;text-transform:uppercase;color:#8A94A6;font-size:9.5px}
.app .flow{flex:1;position:relative;margin:4px 8px 0}
.app .flow svg{width:100%;height:100%}
.app .perf{background:#fff;margin:0 14px 10px;border-radius:8px;padding:9px 12px;font-size:11.5px;border:1px solid #E3E8EE}
.app .perf .track{height:5px;border-radius:3px;background:linear-gradient(90deg,#2EB872,#F2C46B,#E0612F);margin-top:6px;position:relative}
.app .perf .track i{position:absolute;top:-4px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid #E0612F;transform:translateX(-50%);transition:left .4s}
.app .tabs{background:#fff;border-top:1px solid #E3E8EE;display:grid;grid-template-columns:repeat(4,1fr);padding:10px 0 16px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:#8A94A6}
.app .tabs .on{color:#0BA4DB}
.n-lab{font-size:9.5px;fill:#5A6478}
.n-val{font-size:13px;font-weight:500;fill:#2A3344}
.n-val.blue{fill:#0BA4DB}.n-val.green{fill:#2EB872}.n-val.orange{fill:#E0612F}
.conn{fill:none;stroke:#CBD2DC;stroke-width:1.6}
.conn.on{stroke-dasharray:4 5;animation:dash 1s linear infinite}
.conn.on.blue{stroke:#0BA4DB}.conn.on.green{stroke:#2EB872}.conn.on.grey{stroke:#5A6478}
.ringbg{fill:none;stroke:#DCE2EA;stroke-width:5}
.ringfg{fill:none;stroke:#0BA4DB;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .3s}
@media (max-width:860px){.live-sec .stage{grid-template-columns:1fr;align-content:center;gap:14px}.app-phone{width:min(250px,62vw)}.live-sec .copy{height:230px}.live-sec .copy h2{font-size:30px}}

/* array view over a real roof */
.array{position:relative;border-radius:8px;overflow:hidden;background:#0E1626}
.array img{width:100%;height:auto;display:block}
.array .tile{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));width:var(--w,6%);aspect-ratio:1/1.62;border:1.5px solid rgba(255,255,255,.9);background:rgba(11,164,219,.72);border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:"Jost",sans-serif;font-size:clamp(8px,.9vw,12px);color:#fff;font-weight:500;letter-spacing:.02em;box-shadow:0 2px 10px rgba(0,0,0,.35);opacity:0;transition:opacity .4s}
.array .tile.in{opacity:1}
.array .tile.low{background:rgba(242,196,107,.78);color:#1B2333}
.array .legend{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);color:#2A3344;border-radius:8px;padding:10px 14px;font-family:"Jost",sans-serif;font-size:12.5px;display:flex;gap:16px;align-items:center}
.array .legend b{display:block;font-size:16px;font-weight:500;color:#0BA4DB}
.array .appbar{position:absolute;left:0;right:0;top:0;background:rgba(11,164,219,.92);color:#fff;padding:10px 16px;font-family:"Jost",sans-serif;font-size:13px;font-weight:500;display:flex;justify-content:space-between}

/* 10C showcase */
.tenc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.tenc .pic{background:radial-gradient(60% 60% at 50% 55%,#1A2A52 0%,#0C2659 70%);border-radius:10px;padding:8%;display:flex;align-items:center;justify-content:center}
.tenc .pic img{width:min(100%,520px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.tenc .specs{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:28px}
.tenc .specs div{border-top:1px solid rgba(255,255,255,.25);padding-top:12px}
.tenc .specs b{display:block;font-family:var(--serif);font-weight:500;font-size:30px;line-height:1;color:var(--gold-soft)}
.tenc .specs span{font-size:14.5px;color:#D5DEEE}
.on-navy .tenc .specs b{color:var(--gold-soft)}
.on-white .tenc .specs div{border-top-color:var(--line)}.on-white .tenc .specs b{color:var(--navy)}.on-white .tenc .specs span{color:var(--mute)}
@media (max-width:860px){.tenc{grid-template-columns:1fr}}
.on-navy .k{color:var(--gold-soft)}
.on-navy .features h3{color:#fff}.on-navy .features p{color:#D5DEEE}.on-navy .features .f{border-top-color:rgba(255,255,255,.2)}
.on-navy .warranty{border-top-color:rgba(255,255,255,.4)}.on-navy .warranty div{border-right-color:rgba(255,255,255,.2)}.on-navy .warranty .n{color:var(--gold-soft)}.on-navy .warranty .l{color:#D5DEEE}
.on-navy.system .products,.on-navy .system .products h3{color:#fff}.on-navy.system .products,.on-navy .system .products p{color:#D5DEEE}
.on-navy .stats{border-top-color:rgba(255,255,255,.2)}.on-navy .stats .n{color:var(--gold-soft)}.on-navy .stats .l{color:#AFC0DC}
.on-navy.process li,.on-navy .process li{border-top-color:rgba(255,255,255,.2)}.on-navy.process li,.on-navy .process li b{color:#fff}.on-navy.process li,.on-navy .process li span{color:#D5DEEE}.on-navy.process li,.on-navy .process li:before{color:#5A6A8C}.on-navy.process li,.on-navy .process li.on:before{color:var(--gold)}
.on-navy .more{color:#fff;border-bottom-color:var(--gold-soft)}
.on-navy .gold-rule{background:var(--gold-soft)}

/* ===== v4 (homepage round 4) ===== */
.hero .ctas .btn{min-width:200px;justify-content:center}
@media (max-width:760px){.hero .ctas{flex-direction:column;align-items:stretch}.hero .ctas .btn{width:100%}.hero .inner{padding-bottom:100px}.hero h1{font-size:40px}}
.eyebrow-band{background:var(--navy);color:#fff;padding:18px var(--gutter);text-align:center;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}

/* investment: chart */
.invest{background:#fff}
.invest .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.chart{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 20px 14px}
.chart svg{width:100%;height:auto}
.chart .cap{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--mute);margin-top:10px}
.chart .cap i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}
.ax{font-family:"Jost",sans-serif;font-size:11px;fill:#6A7488}
.ax.b{font-size:12px;fill:#2A3344;font-weight:500}
.ln-grid{fill:none;stroke:#C62828;stroke-width:2.5}
.ln-sys{fill:none;stroke:#0C2659;stroke-width:2.5;stroke-dasharray:6 5}
.ln-cum{fill:none;stroke:#E09E1C;stroke-width:3}
.area-cum{fill:rgba(224,158,28,.12)}
.chart path.draw{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 2.2s var(--ease)}
.chart.in path.draw{stroke-dashoffset:0}
.invest .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.invest .pts div{border-top:1px solid var(--navy);padding-top:14px}
.invest .pts b{display:block;font-family:var(--serif);font-weight:500;font-size:38px;line-height:1;color:var(--navy)}
.invest .pts span{font-size:15px;color:var(--mute)}
@media (max-width:860px){.invest .grid2{grid-template-columns:1fr}.invest .pts{grid-template-columns:1fr 1fr}}

/* payment plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.plans .o{border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:28px 26px}
.plans .o h3{color:#fff;margin:8px 0 14px}
.plans .o li{color:#D5DEEE;font-size:17px;margin-bottom:8px}
.plans .o ul{padding-left:18px;margin:0}
.plans .o .k{color:var(--gold-soft)}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* Live Status, faithful */
.ls{position:absolute;inset:8px;border-radius:38px;overflow:hidden;background:#fff;font-family:"Jost",sans-serif;color:#2A3344;display:flex;flex-direction:column}
.ls .top{background:#0BA4DB;height:46px}
.ls .hd{padding:14px 16px 10px;border-bottom:1px solid #EEF1F4}
.ls .hd h4{margin:0;font-weight:500;font-size:17px;color:#1B2333}
.ls .hd .cl{color:#0BA4DB;font-size:11.5px;margin-top:3px}
.ls .grid-chip{padding:10px 16px 6px;font-size:12.5px;color:#5A6478;display:flex;align-items:center;gap:8px}
.ls .grid-chip .ic{width:16px;height:16px;position:relative}
.ls .grid-chip .ic:after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#2EB872}
.ls .grid-chip.off{color:#E0612F}
.ls .grid-chip.off .ic:after{background:#E0612F}
.ls .gw{margin:0 14px;background:#F3F5F7;border-radius:6px;padding:9px 12px;font-size:12px;color:#5A6478;display:flex;justify-content:space-between}
.ls .card{margin:10px 14px 0;border:1px solid #E3E8EE;border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;font-size:10.5px}
.ls .card .l{letter-spacing:.12em;text-transform:uppercase;color:#8A94A6;font-size:9px}
.ls .card b{display:block;font-size:13px;font-weight:500;color:#2A3344;margin-top:2px}
.ls .card .pr b{color:#0BA4DB}
.ls .card .ch{display:flex;gap:8px;align-items:center}
.ls .card .bat{width:12px;height:18px;border:1.5px solid #2EB872;border-radius:2px;position:relative}
.ls .card .bat i{position:absolute;left:2px;right:2px;bottom:2px;background:#2EB872;border-radius:1px}
.ls .diag{flex:1;position:relative}
.ls .diag svg{width:100%;height:100%}
.ls .val{font-size:13px;font-weight:500}
.ls .lab{font-size:10px;fill:#5A6478}
.ls .flowline{fill:none;stroke:#0BA4DB;stroke-width:1.4;opacity:0;transition:opacity .4s}
.ls .flowline.on{opacity:1}
.ls .dot{fill:#0BA4DB;opacity:0}
.ls .flowline.on + .dot{opacity:1}
@media (prefers-reduced-motion:reduce){.ls .dot{display:none}}

/* enlighten array */
.enl{position:relative;border-radius:8px;overflow:hidden;background:#111;border:1px solid var(--line)}
.enl img{width:100%;display:block}
.enl .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(transparent,rgba(8,26,63,.85));color:#fff;font-size:13px}

/* process on phones: single column, readable */
@media (max-width:760px){.process ol{grid-template-columns:1fr;gap:14px}.process li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding-top:14px}.process li:before{grid-row:span 2;margin:0;font-size:24px}.process li b{font-size:18px}.process li span{font-size:15.5px}}
/* live section on phones */
@media (max-width:860px){.live-sec .stage{grid-template-rows:auto auto;padding-top:70px}.live-sec .phonewrap{order:-1}.app-phone{width:min(230px,56vw)}.live-sec .copy{height:200px}.live-sec .copy h2{font-size:26px}.live-sec .copy p{font-size:15.5px}}
/* warranties labelled */
.warranty .cap{grid-column:1/-1;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);padding:0 0 8px}
.on-navy .warranty .cap{color:var(--gold-soft)}
.system .products .pic{height:200px;display:flex;align-items:center;justify-content:center}
.system .products .pic img{max-height:100%;width:auto}
.system .products .p{display:flex;flex-direction:column}
@media (max-width:860px){.system .products .pic{height:160px}}
/* general mobile polish */
@media (max-width:760px){.section{padding:64px 0}.split{gap:28px}.lead{font-size:17.5px}h2{font-size:34px}.stats .n{font-size:40px}.gallery .card .cap{padding:18px}.pgrid figcaption b{font-size:17px}.proof .inner{padding:56px 0}.rt .three{gap:12px}}
/* v4 fix: navy process text */
.on-navy.process li,.on-navy .process li b{color:#fff}.on-navy.process li,.on-navy .process li span{color:#D5DEEE}.on-navy.process li,.on-navy .process li:before{color:#5A6A8C}.on-navy.process li,.on-navy .process li.on:before{color:var(--gold)}
/* v4 fix 2: sections carrying both classes (section on-navy process / system) */
.on-navy.process li{border-top-color:rgba(255,255,255,.2);color:#fff}
.on-navy.process li b{color:#fff}
.on-navy.process li span{color:#D5DEEE}
.on-navy.process li:before{color:#5A6A8C}
.on-navy.process li.on:before{color:var(--gold)}
.on-navy.system .products h3{color:#fff}
.on-navy.system .products p{color:#D5DEEE}

/* ===== v5 battery: cinematic bands, night-to-light, intelligence ===== */
.vband{position:relative;min-height:88svh;display:grid;align-items:end;color:#fff;overflow:hidden;background:#05070C}
.vband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vband .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,12,.15),rgba(5,7,12,.2) 50%,rgba(5,7,12,.88))}
.vband .inner{position:relative;padding:clamp(60px,8vw,110px) 0}
.vband.top{align-items:start}.vband.top .shade{background:linear-gradient(180deg,rgba(5,7,12,.85),rgba(5,7,12,.2) 50%,rgba(5,7,12,.2))}
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;border-top:1px solid rgba(255,255,255,.25);padding-top:26px}
.glance b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--gold-soft)}
.glance span{display:block;color:#E6EAF2;font-size:16px;margin-top:8px;max-width:24em}
@media (max-width:760px){.glance{grid-template-columns:1fr;gap:16px}.vband{min-height:70svh}}

.night{position:relative}
.night .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#05070C}
.night .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.22) saturate(.55);transition:filter .1s linear}
.night .stage .dusk{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,32,.75),rgba(6,12,32,.45));mix-blend-mode:multiply}
.night .stage .glow{position:absolute;inset:0;background:radial-gradient(50% 40% at 56% 58%,rgba(242,196,107,.55) 0%,rgba(242,196,107,0) 70%);opacity:0;mix-blend-mode:screen}
.night .stage .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,12,.2),rgba(5,7,12,.1) 45%,rgba(5,7,12,.85))}
.night .cap{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) 60px;color:#fff;z-index:2}
.night .cap .line{position:absolute;left:var(--gutter);bottom:60px;max-width:620px;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.night .cap .line.show{opacity:1;transform:none}
.night .cap h2{font-size:clamp(36px,5vw,70px)}
.night .cap p{color:#E6EAF2;font-size:clamp(18px,1.3vw,21px);max-width:30em;margin-top:12px}
.night .chip{position:absolute;right:var(--gutter);top:calc(var(--gutter) + 72px);z-index:2;background:#fff;color:#2A3344;border-radius:12px;padding:12px 16px;font-family:"Jost",sans-serif;font-size:14px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.night .chip i{width:10px;height:10px;border-radius:50%;background:#2EB872;display:inline-block}
.night .chip.off i{background:#E0612F}
.night .chip b{font-weight:500}
.night .chip .st{color:#8A94A6;font-size:12px}
.night .spacer{height:220svh}
@media (max-width:760px){.night .cap .line{right:var(--gutter);bottom:96px}.night .chip{top:80px;right:16px;font-size:12.5px;padding:10px 12px}.night .spacer{height:180svh}}

.think{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.think .c{border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:28px 26px;position:relative;overflow:hidden}
.think .c .k{color:var(--gold-soft)}
.think .c h3{color:#fff;margin:10px 0 10px}
.think .c p{color:#D5DEEE;font-size:17px;margin:0}
.think .c .ic{position:absolute;right:22px;top:22px;width:34px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;color:var(--gold-soft);font-family:var(--serif);font-size:18px}
@media (max-width:860px){.think{grid-template-columns:1fr}}

/* ===== v6 (18 Oct 2026): the remaining pages, the Battery storm beat, the Commercial microinverter ===== */
:root{color-scheme:light}
.phero.short{min-height:68svh}
.phero.short .inner{padding:140px 0 64px}
.phero .meta{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#CFD8E8;margin-top:18px}

/* Battery: hurricane season, AES's own 10C film + our own storm timeline */
.storm{background:var(--navy-deep);color:#fff;overflow:hidden}
.storm .split2{display:grid;grid-template-columns:1.05fr 1fr;min-height:88svh}
.storm .film{position:relative;min-height:56svh;background:#0b0f18}
.storm .film video,.storm .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.storm .film .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;font-size:13px;letter-spacing:.06em;color:#E6EAF2;background:linear-gradient(transparent,rgba(5,7,12,.85))}
.storm .txt{padding:clamp(56px,7vw,110px) clamp(22px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.storm .txt h2{font-size:clamp(36px,4.2vw,60px);max-width:15ch}
.storm .txt .lead{color:#D5DEEE;margin-top:18px}
.tl{list-style:none;margin:36px 0 0;padding:0;position:relative}
.tl:before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.18)}
.tl:after{content:"";position:absolute;left:15px;top:8px;width:2px;height:0;background:var(--gold);transition:height 1.6s var(--ease)}
.tl.in:after{height:calc(100% - 16px)}
.tl li{position:relative;padding:0 0 22px 52px}
.tl li:last-child{padding-bottom:0}
.tl li i{position:absolute;z-index:1;left:4px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--navy-deep);border:2px solid var(--gold-soft);display:grid;place-items:center;font-style:normal;font-family:var(--serif);font-size:14px;color:var(--gold-soft)}
.tl li .k{color:var(--gold-soft)}
.tl li b{display:block;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;margin-top:4px}
.tl li span{display:block;color:#D5DEEE;font-size:16.5px;margin-top:4px;max-width:34em}
.storm .glance{margin-top:34px}
@media (max-width:960px){.storm .split2{grid-template-columns:1fr}.storm .film{min-height:52svh}}

/* Commercial: panels on real AES commercial roofs */
.mosaic{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:40px}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:4px;background:#e9ecf1;aspect-ratio:4/3}
.mosaic figure.big{grid-row:span 2;aspect-ratio:auto}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;background:linear-gradient(transparent,rgba(8,26,63,.85));font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.mosaic figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:0;text-transform:none}
@media (max-width:860px){.mosaic{grid-template-columns:1fr 1fr}.mosaic figure.big{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}}

/* Commercial: the IQ8P-3P */
.micro{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center}
.micro .pic{background:var(--paper);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:8%;min-height:360px}
.micro .pic img{max-height:380px;width:auto;filter:drop-shadow(0 24px 40px rgba(8,26,63,.25))}
.micro .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px;border-top:1px solid var(--navy);padding-top:18px}
.micro .specs b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(30px,2.8vw,42px);line-height:1;color:var(--navy)}
.micro .specs span{display:block;font-size:14.5px;color:var(--mute);margin-top:6px;line-height:1.4}
.micro .src{font-size:13.5px;color:var(--mute);margin-top:18px}
.micro .src a{border-bottom:1px solid var(--gold)}
@media (max-width:860px){.micro{grid-template-columns:1fr}.micro .pic{min-height:260px}.micro .pic img{max-height:260px}.micro .specs{grid-template-columns:1fr 1fr}}
.products.two{grid-template-columns:repeat(2,1fr)!important}
.warranty.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.products.two{grid-template-columns:1fr!important}.warranty.three{grid-template-columns:1fr}.warranty.three div{border-right:0;padding-bottom:16px}}

/* Projects: names awaiting a photograph */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.plist div{border-top:1px solid var(--navy);padding-top:14px}
.plist b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;color:var(--navy);line-height:1.15}
.plist span{display:block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:6px}
@media (max-width:760px){.plist{grid-template-columns:1fr}}
.pgrid figure.tall{aspect-ratio:auto;grid-row:span 2}

/* About */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.creds .c{border:1px solid var(--line);border-radius:8px;padding:28px 26px;background:#fff}
.creds .c h3{color:var(--navy);font-size:26px;margin:8px 0 10px}
.creds .c p{color:var(--mute);font-size:17px;margin:0}
@media (max-width:860px){.creds{grid-template-columns:1fr}}
.story{max-width:760px}
.story p{font-size:clamp(18px,1.3vw,20px);color:var(--ink);line-height:1.7}
.story .yr{display:grid;grid-template-columns:96px 1fr;gap:18px;border-top:1px solid var(--line);padding:16px 0}
.story .yr b{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--gold-text);line-height:1}
.story .yr span{font-size:17.5px;color:var(--mute)}

/* Request a quote page */
.qpage{background:var(--paper);padding:clamp(130px,14vw,180px) 0 clamp(72px,9vw,120px)}
.qpage .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:start}
.qpage h1{font-size:clamp(44px,5.4vw,80px);color:var(--navy);max-width:12ch}
.qpage .next{list-style:none;margin:34px 0 0;padding:0;counter-reset:q}
.qpage .next li{counter-increment:q;display:grid;grid-template-columns:44px 1fr;gap:12px;border-top:1px solid var(--line);padding:14px 0;font-size:17px;color:var(--mute)}
.qpage .next li:before{content:"0" counter(q);font-family:var(--serif);font-size:26px;color:var(--gold-text);line-height:1}
.qpage .contact{margin-top:28px;font-size:17px;color:var(--mute);line-height:1.8}
.qpage .contact a{color:var(--navy);font-weight:400}
.qcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(22px,3vw,36px)}
.thanks{text-align:left}
.thanks h2{color:var(--navy);font-size:clamp(34px,3.6vw,48px)}
.thanks p{color:var(--mute);margin-top:14px}
.thanks .tick{width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--gold-soft);display:grid;place-items:center;font-size:26px;margin-bottom:18px}
@media (max-width:860px){.qpage .grid{grid-template-columns:1fr}}

/* Questions page */
.qnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.qnav a{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 16px;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.qnav a:hover{background:rgba(255,255,255,.12)}
.qgroup{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,5vw,72px);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.qgroup:first-child{border-top:0;padding-top:0}
.qgroup h2{font-size:clamp(32px,3.4vw,48px);color:var(--navy)}
.qgroup .faq{max-width:none}
.faq p a{color:var(--navy);border-bottom:1px solid var(--gold)}
@media (max-width:860px){.qgroup{grid-template-columns:1fr}}
.faq summary{gap:16px}
.faq summary:after{flex:0 0 auto}

/* Journal index */
.jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jcard{display:flex;flex-direction:column;border-top:1px solid var(--navy);padding-top:0}
.jcard .pic{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#e9ecf1;margin-bottom:16px}
.jcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.jcard:hover .pic img{transform:scale(1.04)}
.jcard .k{margin-top:4px}
.jcard h2{font-size:clamp(25px,2vw,30px);color:var(--navy);margin-top:10px;line-height:1.12}
.jcard p{font-size:16.5px;color:var(--mute);margin-top:10px}
.jcard .more{margin-top:auto;align-self:flex-start;font-size:15.5px}
.jcard.lead-card{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;border-top:0}
.jcard.lead-card .pic{margin:0;aspect-ratio:16/10}
.jcard.lead-card h2{font-size:clamp(32px,3.4vw,50px)}
@media (max-width:960px){.jcards{grid-template-columns:1fr 1fr}.jcard.lead-card{grid-template-columns:1fr}}
@media (max-width:640px){.jcards{grid-template-columns:1fr}}

/* Journal post */
.post{padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px)}
.post .col{width:min(760px,100% - 2*var(--gutter));margin-inline:auto}
.post .lede{font-size:clamp(20px,1.6vw,24px);line-height:1.55;color:var(--ink);font-weight:300}
.post .toc{border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin:32px 0 8px;background:var(--paper)}
.post .toc .k{margin-bottom:8px}
.post .toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:16px}
.post .toc li{margin:4px 0;break-inside:avoid}
.post .toc a{color:var(--navy)}
@media (max-width:640px){.post .toc ol{columns:1}}
.post h2{font-size:clamp(30px,3vw,42px);color:var(--navy);margin:56px 0 16px;scroll-margin-top:90px}
.post h3{font-size:clamp(23px,2vw,28px);color:var(--navy);margin:32px 0 10px}
.post p,.post li{font-size:18px;line-height:1.7;color:var(--ink)}
.post p{margin:0 0 1.1em}
.post ul,.post ol{padding-left:22px;margin:0 0 1.2em}
.post li{margin:6px 0}
.post a{color:var(--navy);border-bottom:1px solid var(--gold)}
.post strong{font-weight:500}
.post .keystat{font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);line-height:1.3;color:var(--navy);border-left:2px solid var(--gold);padding:4px 0 4px 20px;margin:28px 0}
.post .note{font-size:15px;color:var(--mute)}
.post .callout{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 24px;margin:28px 0}
.post .callout h3{margin-top:0}
.post .callout > *:last-child{margin-bottom:0}
.post .statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0;border-top:1px solid var(--navy);padding-top:16px}
.post .statrow b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,32px);color:var(--navy);line-height:1.05}
.post .statrow span{display:block;font-size:13.5px;color:var(--mute);margin-top:6px;line-height:1.35}
@media (max-width:640px){.post .statrow{grid-template-columns:1fr 1fr}}
.post .tw{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:8px;-webkit-overflow-scrolling:touch}
.post table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px}
.post caption{caption-side:top;text-align:left;padding:12px 14px 4px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.post th{text-align:left;font-weight:500;color:var(--navy);background:var(--paper);padding:10px 14px;border-bottom:1px solid var(--line)}
.post td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.post .steps-ol{list-style:none;padding:0;counter-reset:st}
.post .steps-ol li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin:0 0 14px}
.post .steps-ol li:before{content:"0" counter(st);font-family:var(--serif);font-size:26px;color:var(--gold-text);line-height:1}
.post .faq{max-width:none;margin-top:12px}
.post .faq summary{font-size:22px}
.post .about{border-top:1px solid var(--navy);margin-top:56px;padding-top:24px}
.post .about h3{margin-top:0}
.post .about p{font-size:15.5px;color:var(--mute)}
.post .endcta{background:var(--navy);color:#fff;border-radius:10px;padding:clamp(26px,4vw,40px);margin:56px 0 0}
.post .endcta h2{color:#fff;margin:8px 0 12px;font-size:clamp(28px,2.8vw,38px)}
.post .endcta p{color:#D5DEEE}
.post .endcta a{border:0}
.post .endcta .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.post .related{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.post .related a{border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:block}
.post .related a span{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.post .related a b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--navy);margin-top:4px;line-height:1.2}
@media (max-width:640px){.post .related{grid-template-columns:1fr}}
.post .src-note{font-size:14px;color:var(--mute);border:1px dashed var(--line);border-radius:6px;padding:12px 14px;margin-top:28px}
/* pages with no dark hero: the nav starts solid; the quote page needs no floating quote bar */
body.solid-nav .nav{background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 1px 0 var(--line);color:var(--navy);padding:10px var(--gutter)}
body.solid-nav .nav .logo img{height:48px}
body.on-quote .sticky-cta{display:none!important}
.mobile-menu{overflow-y:auto}
.mobile-menu a{font-size:clamp(26px,7.4vw,36px)}
@media (max-width:640px){.mosaic{gap:10px}.mosaic figcaption{padding:10px 12px;font-size:11px}.mosaic figcaption b{font-size:16px}}

/* ===== v7 QA (20 Oct 2026): phone-first pass ===== */
/* one header-height token: anchors land below the header, pinned sections keep their content out from under it */
:root{--navh:80px}
@media (max-width:760px){:root{--navh:64px}}
html{scroll-padding-top:calc(var(--navh) + 12px);scroll-padding-bottom:24px}  /* anchors and focused form fields land below the fixed header */
[id]{scroll-margin-top:4px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.on-navy :focus-visible,.hero :focus-visible,.phero :focus-visible,footer :focus-visible,.mobile-menu :focus-visible,.night :focus-visible,.storm :focus-visible{outline-color:var(--gold-soft)}
html.rm .ls .dot{display:none}

/* header: legible over any photo before it turns white; the Menu button is a 44px target */
body:not(.solid-nav) .nav:not(.solid){background:linear-gradient(180deg,rgba(8,26,63,.55) 0%,rgba(8,26,63,.22) 65%,rgba(8,26,63,0) 100%)}
body:not(.solid-nav) .nav:not(.solid) ul a,body:not(.solid-nav) .nav:not(.solid) .tel,body:not(.solid-nav) .nav:not(.solid) .burger{text-shadow:0 1px 10px rgba(8,26,63,.6)}
.nav .burger{min-width:48px;min-height:44px;padding:0 4px;margin-right:-4px;align-items:center;justify-content:center;font-weight:400}
@media (max-width:1020px){.nav .burger{display:inline-flex}}
@media (max-width:760px){
  .nav,.nav.solid,body.solid-nav .nav{padding:10px var(--gutter);min-height:var(--navh)}
  .nav .logo img,.nav.solid .logo img,body.solid-nav .nav .logo img{height:42px}
  .nav .cta{gap:6px}
  .nav .cta .btn{padding:0 16px;min-height:44px;font-size:13px;letter-spacing:.05em}
}

/* phone menu: starts below the header, scrolls on short screens (landscape) instead of cutting off the top, phone number is a link */
.mobile-menu{justify-content:flex-start;padding:calc(var(--navh) + 8px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.mobile-menu .mm-links{display:flex;flex-direction:column;margin-top:auto}
.mobile-menu .mm-links a{line-height:1.2;padding:12px 0;min-height:48px;display:flex;align-items:center}
.mobile-menu .mm-links a.current{color:var(--gold-soft)}
.mobile-menu .mm-contact{margin:22px 0 auto;color:#AFC0DC;font-size:16px}
.mobile-menu .mm-contact a{display:inline-block;font-family:var(--sans);font-size:16px;color:#fff;padding:10px 0;border-bottom:1px solid var(--gold-soft)}

/* the quote pill (phones): compact, above the home indicator; site.js shows it only on a scroll up through ordinary content,
   never over the hero, a pinned or scroll-driven section, a form, the footer or the open menu */
.sticky-cta{left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);transition:transform .35s var(--ease),opacity .25s,visibility 0s}
.sticky-cta.away{transform:translate(-50%,calc(100% + 40px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .35s var(--ease),opacity .25s,visibility 0s .35s}
.sticky-cta .btn{width:auto;min-height:48px;padding:0 30px;font-size:14px;box-shadow:0 8px 26px rgba(8,26,63,.32)}

/* home hero: grows with its content, so the H1 never runs up under the header on a short phone */
.hero{height:auto;min-height:100svh}
.hero .inner{height:auto;min-height:inherit;padding-top:calc(var(--navh) + 28px)}
@media (max-width:760px){
  .hero{min-height:100svh}
  .hero .inner{padding-bottom:40px}
  .hero .shade{background:linear-gradient(180deg,rgba(8,26,63,.55) 0%,rgba(8,26,63,.3) 26%,rgba(8,26,63,.8) 56%,rgba(8,26,63,.92) 100%)}
  .hero .lead{text-shadow:0 1px 14px rgba(8,26,63,.7)}
  .hero .ctas{margin-top:26px;gap:10px}
  .hero .ctas .btn{padding:0 20px;min-height:48px}
  .phero .inner{padding:calc(var(--navh) + 56px) 0 48px}
  .phero.short .inner{padding:calc(var(--navh) + 48px) 0 44px}
  .phero .lead{text-shadow:0 1px 14px rgba(8,26,63,.7)}
}

/* pinned and scroll-driven sections: on phones the text sits clear of the bottom edge (the quote pill is hidden there) */
@media (max-width:760px){
  .pin-sec .step,.smart .step{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
  .scrub .caption .line,.night .cap .line{bottom:calc(36px + env(safe-area-inset-bottom,0px))}
  .night .chip{top:calc(var(--navh) + 12px)}
  .pin-sec .step .card p,.scrub .caption p,.night .cap p{font-size:17px}
}
.gallery .track-wrap .hint{top:calc(var(--navh) + 12px)}

/* Live Status: the phone is scaled by site.js to the room left under the header and beside or above the text, so the app is never
   cut off by the header and the text never runs off the bottom; the text box is as tall as its longest step */
.live-sec .stage{padding:calc(var(--navh) + 12px) var(--gutter) calc(20px + env(safe-area-inset-bottom,0px))}
.live-sec .copy .line{left:0;right:0}
.live-sec .phonewrap{display:block;justify-self:center;position:relative}
.live-sec .phonewrap .app-phone{transform-origin:0 0}
@media (max-width:860px){
  .live-sec .stage{gap:14px;align-content:center}
  .live-sec .copy h2{font-size:27px}
  .live-sec .copy p{font-size:16px}
}
@media (max-width:860px) and (orientation:landscape){
  .live-sec .stage{grid-template-columns:auto 1fr;grid-template-rows:none;gap:32px;align-items:center;align-content:normal}
}
html.rm .live-sec .phonewrap{margin:0 auto 32px}

/* phones: body copy at 16px or more */
@media (max-width:760px){
  .process li span,.invest .pts span,.proof .facts .l,.warranty .l,.micro .specs span,.tenc .specs span,.glance span,.plist span{font-size:16px}
  footer{font-size:16px}
  footer .cols > :first-child{grid-column:1/-1}
  footer li{margin:0}
  footer li a{display:inline-block;padding:10px 0}
  footer .legal{font-size:14px}
}
/* the app's diagram keeps its bottom node clear of the phone's rounded corner at small sizes */
.ls .diag{min-height:0;padding-bottom:18px}
/* the investment chart: last year label no longer clipped; on phones the labels are readable (about 11px) and the one that collides is left to the legend */
.chart svg{overflow:visible}
@media (max-width:760px){.chart{padding:16px 14px 12px}.ax{font-size:19px}.ax.b{font-size:20px}.chart .ax-sys{display:none}}
/* footer group titles are h2 now (heading order); same look as before */
footer h2{font-family:var(--sans);font-weight:500;font-size:12.5px;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 14px}
/* bigger tap areas without moving anything: the arrow links, phone links, the logo */
.more,a[href^="tel:"]{position:relative}
.more:before,a[href^="tel:"]:before{content:"";position:absolute;inset:-10px -4px}
.nav .logo{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){
  p.note,.chart .cap{font-size:16px}
  footer .legal a{display:inline-block;padding:10px 0}
}
/* the open menu reads as one navy screen, header included */
html.menu-open .nav{background:var(--navy-deep)!important;color:#fff!important;box-shadow:none!important;backdrop-filter:none!important}
.mobile-menu .mm-links a{padding:10px 0}
/* phones: the remaining small sentences (some carry inline sizes in the page source) to 16px */
@media (max-width:760px){p.note,.storm .txt p,.micro .src{font-size:16px!important}}
/* phones held sideways: the pinned step text fits one short screen */
@media (orientation:landscape) and (max-height:500px){
  .pin-sec .step .card h2,.night .cap h2,.scrub .caption h2{font-size:30px}
  .pin-sec .step .card .big{font-size:56px}
  .pin-sec .step .card p,.night .cap p{font-size:17px;margin-top:10px}
  .pin-sec .step{padding-top:var(--navh)}
  .live-sec .copy h2{font-size:26px}
}
@media (orientation:landscape) and (max-height:500px){
  :root{--navh:64px}
  .nav,.nav.solid,body.solid-nav .nav{padding:10px var(--gutter);min-height:var(--navh)}
  .nav .logo img,.nav.solid .logo img,body.solid-nav .nav .logo img{height:42px}
  .nav .cta .btn{padding:0 16px;min-height:44px;font-size:13px;letter-spacing:.05em}
  .hero .ctas .btn{min-height:46px;padding:0 22px}
}
@media (orientation:landscape) and (max-height:500px){
  .hero h1,.phero h1{font-size:40px}
  .hero .shade{background:linear-gradient(180deg,rgba(8,26,63,.6) 0%,rgba(8,26,63,.5) 40%,rgba(8,26,63,.88) 100%)}
  .hero .inner{padding-bottom:40px}
  .phero .inner,.phero.short .inner{padding:calc(var(--navh) + 40px) 0 40px}
}
@media (max-width:760px){.storm .film .cap{font-size:15px}}
html.rm .night .stage .shade{background:linear-gradient(180deg,rgba(5,7,12,.55),rgba(5,7,12,.7))}
body:not(.solid-nav) .nav:not(.solid) .logo img{filter:drop-shadow(0 1px 8px rgba(8,26,63,.5))}
html.menu-open .nav .logo img{filter:none}
/* tablets get a larger app phone (site.js still scales it to fit) */
@media (max-width:860px){.app-phone{width:min(300px,56vw)}}
/* small laptops (1021 to 1180 px): the six links and the button keep their spacing; the number stays in every quote section and the footer */
@media (max-width:1180px){.nav .cta .tel{display:none}.nav ul{gap:24px}}
.more:hover{color:var(--gold-text)}
.on-navy .more:hover{color:var(--gold-soft)}
/* Projects: the named entries without a photo are 2 now (TCD, Warwick Academy): 2 across, 1 on phones */
.plist{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.plist{grid-template-columns:1fr}}
/* phones: a project grid with an odd number of tiles closes its last row (the last tile goes full width) */
@media (max-width:760px){.pgrid:not(:has(.wide)) > figure:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}}
/* project and home grids: a wide tile is as tall as the tiles beside it (no hole under its neighbour), full width at 16:9 on phones;
   "pw" makes a tile full width on phones only, to close an odd row */
@media (min-width:761px){.pgrid figure.wide{aspect-ratio:auto;min-height:100%}.pgrid figure.wide img{position:absolute;inset:0}}
@media (max-width:760px){.pgrid figure.wide,.pgrid figure.pw{grid-column:1/-1;aspect-ratio:16/9}}

/* v8 (Luke 21 Oct): no play button on any video, on any phone; if a phone refuses to play, the poster shows instead */
video::-webkit-media-controls,video::-webkit-media-controls-panel,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none!important;opacity:0!important}
video{pointer-events:none}
.vid-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat;pointer-events:none}
/* Projects highlights (22 Oct 2026) */
.hl{display:grid;gap:clamp(36px,5vw,64px);margin-top:40px}
.hl-row{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hl-row.flip{grid-template-columns:1fr 1.4fr}
.hl-row.flip>img{order:2}
.hl-row>img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.hl-row>div{min-width:0}
.hl-row h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,38px);color:var(--navy);margin-top:10px;line-height:1.1}
.hl-row p{color:var(--mute);font-size:17px;margin-top:12px}
@media (max-width:760px){.hl-row,.hl-row.flip{grid-template-columns:1fr}.hl-row.flip>img{order:0}}
/* Commercial monitoring (22 Oct 2026) */
.mon-row{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;margin-top:28px}
.mon-row>*{min-width:0}
.enl.capbelow{background:#fff}
.enl.capbelow .cap{position:static;background:var(--navy);color:#CFE0FF}
.on-navy .mon-points h3{color:#fff;font-size:22px}
.on-navy .mon-points p{color:#D5DEEE}
.mon-points{gap:22px 28px}
@media (max-width:860px){.mon-row{grid-template-columns:1fr}}

/* 23 Oct: Questions and Journal in the desktop nav; tighten it on laptop widths so 8 links fit */
@media (min-width:1021px) and (max-width:1320px){.nav ul{gap:20px;font-size:14.5px}.nav .cta{gap:14px}}

/* production additions (build_production.py) */
[hidden]{display:none!important}
.qslot{min-width:0}