/* ═══════════════════════════════════════════════════════════════════════
   PRIME VOLT SOLAR — EDITORIAL LANGUAGE (shared)
   The vocabulary is fixed here: grid, hairlines, markers, ghost numerals,
   drop cap, pull quotes, marginalia, captions, ruled lists, forms, footer.
   Each variation (A/B/C) adds ONLY composition overrides in its own <style>.
   Rules: .claude/skills/premium-ui-design/references/editorial-direction.md
   ═══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   PRIME VOLT SOLAR — EDITORIAL
   Locked direction. Built on the broadsheet, not the card grid.

   The rules that make this editorial rather than "a marketing page":
   · A 12-column grid used ASYMMETRICALLY. Content spans 7 here, 5 there,
     offset. Nothing is centred unless it has earned it.
   · HAIRLINES carry the structure. Not cards, not shadows, not boxes.
   · Dramatic type scale. The hero is 5–7rem, not 3rem.
   · Oversized ghost numerals sitting behind and beside content.
   · A drop cap, a pull quote that breaks its column, and marginalia
     in the outer columns.
   · Photography at DELIBERATELY inconsistent scales — full bleed, then
     a tall inset, then a small square. Never a tidy grid of equal boxes.
   · Captions set in tracked small caps beneath a rule.
   · The logo's own geometry — the dotted sun arc and the gable roofline —
     used as real structure, not 6%-opacity wallpaper.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#192A56; --orange:#ED662E; --white:#fff;
  --navy-900:#0F1B38; --navy-500:#3B4C7A; --navy-300:#8B96B3; --navy-100:#DDE2ED;
  --cloud:#F5F7FA; --orange-900:#98380F; --orange-700:#C94D1B; --orange-300:#F5A17A; --orange-100:#FDEDE5;
  --error:#C62828;
  --rule:#DDE2ED;                       /* the hairline. does most of the work. */
  --rule-strong:#192A56;
  --f-d:'Montserrat',system-ui,-apple-system,sans-serif;
  --f-b:'Inter',system-ui,-apple-system,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-b);font-size:17px;line-height:1.62;color:var(--navy);background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:800;line-height:1.04;letter-spacing:-.035em;margin:0}
p{margin:0} a{color:inherit} button{font-family:inherit}
figure,blockquote,figcaption{margin:0}
::selection{background:var(--orange);color:#fff}

/* ── The grid ───────────────────────────────────────────────────────── */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;
   width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
@media(max-width:899px){.g{grid-template-columns:repeat(6,1fr);gap:0 16px}}
/* column spans — desktop */
@media(min-width:900px){
  .c1-4{grid-column:1/5}   .c1-5{grid-column:1/6}   .c1-6{grid-column:1/7}
  .c1-7{grid-column:1/8}   .c1-8{grid-column:1/9}   .c1-9{grid-column:1/10}
  .c1-10{grid-column:1/11} .c1-11{grid-column:1/12}
  .c1-12{grid-column:1/13} .c2-8{grid-column:2/9}   .c3-11{grid-column:3/12}
  .c4-10{grid-column:4/11} .c5-13{grid-column:5/13} .c6-13{grid-column:6/13}
  .c7-13{grid-column:7/13} .c8-13{grid-column:8/13} .c9-13{grid-column:9/13}
  .c10-13{grid-column:10/13}
}
@media(max-width:899px){
  [class*="c1-"],[class*="c2-"],[class*="c3-"],[class*="c4-"],[class*="c5-"],
  [class*="c6-"],[class*="c7-"],[class*="c8-"],[class*="c9-"],[class*="c10-"]{grid-column:1/-1}
}

.sec{padding:clamp(52px,6.4vw,96px) 0}

/* ── Section rhythm ─────────────────────────────────────────────────────
   Where two consecutive sections share a background there's no colour change
   to mark the boundary, so 92px of bottom padding meeting 92px of top padding
   reads as one large void. Collapse the join in those cases only — where the
   background does change, the full gap is doing useful work. */
.sec + .sec,
.sec--alt + .sec--alt,
.dark + .dark{padding-top:clamp(26px,3vw,42px)}
/* a real background change keeps the full opening gap */
.sec--alt + .sec:not(.sec--alt):not(.dark),
.dark + .sec:not(.dark):not(.sec--alt),
.sec:not(.sec--alt):not(.dark) + .sec--alt,
.sec:not(.sec--alt):not(.dark) + .dark,
.sec--alt + .dark,
.dark + .sec--alt{padding-top:clamp(52px,6.4vw,96px)}

.sec--tight{padding:clamp(38px,4.6vw,64px) 0}
.rule-top{border-top:1px solid var(--rule)}
.dark{background:var(--navy-900);color:rgba(255,255,255,.82);--rule:rgba(255,255,255,.16)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}

/* ── Placeholder marker ─────────────────────────────────────────────── */
.ph{display:inline;border-bottom:1.5px dotted rgba(237,102,46,.5);cursor:help}
div.ph,p.ph,li.ph{display:inline-block}
.demoflag{position:fixed;left:14px;bottom:14px;z-index:200;background:var(--navy-900);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;
  border:1px solid rgba(255,255,255,.2)}
.demoflag b{color:var(--orange-300)}
@media(max-width:899px){.demoflag{display:none}}

/* ── Editorial furniture ────────────────────────────────────────────── */
/* section marker: number + label sitting ON the rule */
.marker{grid-column:1/-1;display:flex;align-items:baseline;gap:18px;padding:16px 0 0;
  border-top:1.5px solid var(--rule-strong);margin-bottom:clamp(26px,3.2vw,44px)}
.dark .marker{border-top-color:rgba(255,255,255,.4)}
.marker__n{font-family:var(--f-d);font-weight:800;font-size:13px;letter-spacing:0;color:var(--orange);
  font-variant-numeric:tabular-nums}
.marker__l{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-500)}
.dark .marker__l{color:rgba(255,255,255,.6)}
.marker__r{margin-left:auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-300)}
.dark .marker__r{color:rgba(255,255,255,.4)}

/* the ghost numeral */
.ghost{position:absolute;font-family:var(--f-d);font-weight:800;line-height:.78;letter-spacing:-.06em;
  font-size:clamp(9rem,20vw,17rem);color:transparent;-webkit-text-stroke:1.5px var(--navy-100);
  pointer-events:none;user-select:none;z-index:0}
.dark .ghost{-webkit-text-stroke-color:rgba(255,255,255,.14)}

/* caption: rule + tracked small caps */
.cap{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--navy-500);line-height:1.5}
.dark .cap{color:rgba(255,255,255,.55)}

/* marginalia — small notes hung in the outer column */
.margin{font-size:13.5px;line-height:1.55;color:var(--navy-500);border-top:1px solid var(--rule);padding-top:12px}
.margin b{display:block;font-family:var(--f-d);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-900);margin-bottom:7px}
.dark .margin{color:rgba(255,255,255,.6)}
.dark .margin b{color:var(--orange-300)}

/* drop cap */
.lede{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.5;color:var(--navy)}
.lede::first-letter{float:left;font-family:var(--f-d);font-weight:800;font-size:5.1em;line-height:.78;
  padding:.06em .12em 0 0;color:var(--orange);letter-spacing:-.04em}

/* pull quote that breaks its column */
.pull{font-family:var(--f-d);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.16;
  letter-spacing:-.03em;color:var(--navy);border-top:2px solid var(--orange);padding-top:24px;margin:0}
.pull cite{display:block;font-family:var(--f-b);font-style:normal;font-weight:500;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy-500);margin-top:20px}
/* navy-500 on navy-900 is 2.03:1 — unreadable. On dark sections the citation lifts to
   rgba(255,255,255,.6), which measures 6.81:1. */
.dark .pull cite,.s--dark .pull cite{color:rgba(255,255,255,.6)}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange)}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--orange);flex:none}

/* ── Buttons — square, editorial, no rounded pills ──────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;white-space:nowrap;font-family:var(--f-b);
  font-size:19px;font-weight:600;line-height:1;padding:19px 34px;min-height:58px;border:none;border-radius:2px;
  cursor:pointer;text-decoration:none;transition:background-color .16s ease-out,color .16s,transform .1s ease-out}
.btn:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn--p{background:var(--orange);color:#fff}
.btn--p:hover{background:var(--orange-700)}
.btn--o{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy);padding:19px 34px}
.btn--o:hover{background:var(--navy);color:#fff}
.btn--w{background:#fff;color:var(--navy)}
.btn--w:hover{background:var(--cloud)}
.btn--sm{font-size:16px;padding:13px 22px;min-height:46px}
.btn--bl{width:100%}
.tel{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;text-decoration:none;
  border-bottom:1.5px solid transparent;transition:border-color .16s,color .16s}
.tel:hover{border-bottom-color:var(--orange);color:var(--orange)}
.tel svg{width:18px;height:18px;flex:none}
.tel span,.tel{white-space:nowrap}

/* ── Masthead ───────────────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.mast[data-s=true]{border-bottom-color:var(--rule)}
.mast__in{display:flex;align-items:center;gap:28px;height:88px;transition:height .2s var(--ease)}
.mast[data-s=true] .mast__in{height:70px}
.mast__logo{flex:none;display:block}
.mast__logo img{height:44px;width:auto;transition:height .2s var(--ease)}
.mast[data-s=true] .mast__logo img{height:36px}
.nav{display:none;gap:26px;margin-left:auto}
@media(min-width:1080px){.nav{display:flex}}
.nav a{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.mast__act{display:none;align-items:center;gap:22px;margin-left:auto}
@media(min-width:1080px){.mast__act{display:flex}.nav{margin-left:0}}
.burger{margin-left:auto;width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--navy);border-radius:2px;cursor:pointer}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:var(--navy);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.drawer{position:fixed;inset:0;z-index:70;background:#fff;transform:translateX(100%);
  transition:transform .32s var(--spring);display:flex;flex-direction:column;padding:22px var(--gut)}
.drawer[data-open=true]{transform:translateX(0)}
.drawer__top{display:flex;justify-content:space-between;align-items:center;height:66px;
  border-bottom:1.5px solid var(--navy);margin-bottom:8px}
.drawer__top img{height:36px;width:auto}
.drawer__x{width:50px;height:50px;border:1.5px solid var(--navy);border-radius:2px;background:none;
  font-size:26px;line-height:1;cursor:pointer;color:var(--navy)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-family:var(--f-d);font-weight:800;font-size:clamp(1.5rem,7vw,2.1rem);letter-spacing:-.03em;
  text-decoration:none;padding:18px 0;border-bottom:1px solid var(--rule)}
.drawer__f{margin-top:auto;display:grid;gap:12px;padding-top:24px}

/* ── HERO — asymmetric, overlapping, arc behind ─────────────────────── */
.hero{position:relative;overflow:hidden;padding-top:clamp(36px,5vw,64px);padding-bottom:0}
.hero__arc{position:absolute;top:-16%;right:-16%;width:min(920px,90vw);opacity:.85;pointer-events:none;
  color:var(--orange-100);z-index:0}
.hero .g{position:relative;z-index:1;align-items:start}
.hero__kicker{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  padding-bottom:22px;border-bottom:1.5px solid var(--navy);margin-bottom:clamp(28px,4vw,52px)}
.hero h1{font-size:clamp(2.7rem,7vw,5.6rem);letter-spacing:-.045em;line-height:.94;
  margin-bottom:clamp(30px,4.5vw,58px)}
.hero h1 .em{color:var(--orange)}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.55;color:var(--navy-500);max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:32px}
.hero__figure{position:relative}
@media(min-width:900px){.hero__body{align-self:end;padding-bottom:6px}}
.hero__figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(min-width:900px){.hero__figure .cap{padding-left:210px;text-align:right}}
@media(max-width:899px){.hero__figure img{aspect-ratio:16/10}}
.hero__badge{position:absolute;left:0;bottom:0;transform:translate(-14%,26%);background:var(--navy-900);
  color:#fff;padding:22px 26px;min-width:200px;z-index:2}
@media(max-width:899px){.hero__badge{transform:none;position:static;margin-top:0;width:100%}}
.hero__badge .v{font-family:var(--f-d);font-weight:800;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.hero__badge .r{width:34px;height:2px;background:var(--orange);margin:12px 0 10px}
.hero__badge .l{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72)}

/* ── Stat band ──────────────────────────────────────────────────────────
   Icon left, figure and label stacked right, inset orange dividers, and a
   trust badge in the last cell. Compact by design — the band is furniture,
   not a section. */
.statband{grid-column:1/-1;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(min-width:620px){.statband{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.statband{grid-template-columns:repeat(4,1fr)}}
.hero .statband{margin-top:clamp(52px,6.6vw,84px)}

.statcell{position:relative;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  padding:clamp(22px,2.4vw,30px) clamp(18px,1.9vw,28px) clamp(22px,2.4vw,30px) 0}
/* any cell that carries a divider must be inset from it — the padding rules below
   mirror the divider rules exactly, at every breakpoint. */
.statcell + .statcell{padding-left:clamp(22px,2.4vw,34px)}
.statcell + .statcell::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:var(--pv-orange-300,#F5A17A)}
@media(max-width:1039px){
  .statcell:nth-child(odd)::before{display:none}
  .statcell:nth-child(odd){padding-left:0}
  .statcell:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:619px){
  .statcell::before{display:none}
  .statcell + .statcell{border-top:1px solid var(--rule);padding-left:0}
}
.statcell__ico{width:clamp(42px,4.4vw,56px);height:clamp(42px,4.4vw,56px);flex:none;color:var(--orange)}
.statcell__t{min-width:0}
.statcell__v{font-family:var(--f-d);font-weight:800;font-size:clamp(1.7rem,2.9vw,2.35rem);line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.statcell__v .u{font-size:.44em;letter-spacing:.01em;color:var(--navy-500)}
.dark .statcell__v .u{color:rgba(255,255,255,.62)}
.statcell__l{font-size:clamp(14px,1.15vw,15.5px);color:var(--navy-500);margin-top:9px;line-height:1.35}
.statcell__stars{display:block;color:var(--orange);font-size:13px;letter-spacing:3px;margin-bottom:5px}

.dark .statcell__l{color:rgba(255,255,255,.7)}


/* centred section header for the service grid */
.svchead{grid-column:1/-1;text-align:center;max-width:860px;margin-inline:auto;
  margin-bottom:clamp(28px,3.4vw,46px)}
.svchead h2{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08}
.svchead p{margin:16px auto 0;font-size:17px;color:var(--navy-500);max-width:52ch}
.dark .svchead p{color:rgba(255,255,255,.72)}

/* ── Service cards — four-up, image top ─────────────────────────────────
   The proven layout for this section. Rendered in the editorial language:
   square corners and hairline borders rather than rounded-plus-shadow, so it
   sits with the rest of the page. */
.svcgrid{grid-column:1/-1;display:grid;gap:clamp(16px,1.8vw,26px);align-items:stretch}
@media(min-width:640px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.svcgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svccard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.svccard:hover{border-color:var(--navy-300);transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(25,42,86,.09)}
.svccard__m{position:relative;overflow:hidden}
.svccard__m img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.svccard:hover .svccard__m img{transform:scale(1.04)}
.svccard__n{position:absolute;left:0;top:0;background:var(--navy);color:#fff;font-family:var(--f-d);
  font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:7px 12px;font-variant-numeric:tabular-nums}
.svccard__b{display:flex;flex-direction:column;flex:1;padding:clamp(20px,1.9vw,26px)}
.svccard h3{font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.02em;margin-bottom:10px}
.svccard p{font-size:15px;color:var(--navy-500);line-height:1.58;margin-bottom:20px}
/* card action — a real button, pinned to the bottom so all four align
   regardless of how long the copy above it runs */
.svccard__btn{margin-top:auto;width:100%;font-size:15px;padding:13px 18px;min-height:48px;
  letter-spacing:.01em}
.svccard:hover .svccard__btn{background:var(--navy);color:#fff}
.svccard__btn svg{transition:transform .22s var(--ease)}
.svccard:hover .svccard__btn svg{transform:translateX(4px)}

/* ── About ──────────────────────────────────────────────────────────────
   Illustration left with an overlapping stat, copy right. The illustration is
   drawn rather than photographed so it can carry the brand's own dotted sun. */
.about{align-items:center;row-gap:clamp(46px,5vw,64px)}
.about__media{position:relative}
.about__art{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.about__stat{position:absolute;left:0;bottom:0;transform:translate(-9%,32%);display:flex;
  align-items:center;gap:16px;background:#fff;border:1px solid var(--rule);
  box-shadow:0 16px 40px rgba(25,42,86,.16);padding:16px 24px 16px 18px;max-width:84%}
@media(max-width:899px){.about__stat{position:static;transform:none;margin-top:16px;max-width:100%}}
.about__ring{width:clamp(62px,6vw,76px);height:auto;flex:none}
.about__stat-l{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-900)}
.about__stat-v{display:block;font-family:var(--f-d);font-weight:700;font-size:clamp(14px,1.2vw,15.5px);
  letter-spacing:-.01em;color:var(--navy);margin-top:6px;line-height:1.3}
.about__body .eyebrow{margin-bottom:18px}
.about__body h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;margin-bottom:22px}
.about__body p{font-size:16.5px;line-height:1.62;color:var(--navy-500);margin-bottom:16px;max-width:56ch}
.about__list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.about__list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:15.5px;color:var(--navy)}
.about__list svg{color:var(--orange);margin-top:4px}
.about__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,36px)}

/* ── Testimonial cards — four up, quote mark, byline pinned to the base ─*/
.tgrid{grid-column:1/-1;display:grid;gap:clamp(16px,1.8vw,24px);align-items:stretch;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tcard{display:flex;flex-direction:column;background:var(--cloud);border:1px solid var(--rule);
  padding:clamp(22px,2.2vw,28px);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s}
.tcard:hover{border-color:var(--navy-300);transform:translateY(-3px);box-shadow:0 10px 26px rgba(25,42,86,.08)}
.tcard__q{width:34px;height:34px;color:var(--orange-300);margin-bottom:16px;flex:none}
.tcard blockquote{margin:0 0 22px;font-size:15.5px;line-height:1.62;color:var(--navy)}
.tcard__foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule)}
.tcard__stars{color:var(--orange);letter-spacing:2px;font-size:14px;display:block;margin-bottom:9px}
.tcard__name{font-weight:600;font-size:15px;color:var(--navy);display:block}
.tcard__meta{font-size:12.5px;color:var(--navy-500);margin-top:3px;display:block;letter-spacing:.02em}
.treviews{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(26px,3vw,38px)}
.treviews .btn svg{opacity:.75}

/* ── FAQ — photograph left, accordion right ────────────────────────────*/
.faqrow{align-items:center;row-gap:clamp(34px,4vw,54px)}
.faq__media{position:relative}
.faq__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:899px){.faq__media img{aspect-ratio:16/9}}
.faq__badge{position:absolute;left:0;bottom:0;transform:translate(-8%,26%);
  background:var(--orange);color:#fff;padding:14px 20px;text-align:center;min-width:118px;
  box-shadow:0 14px 34px rgba(25,42,86,.18)}
@media(max-width:899px){.faq__badge{transform:translate(4%,28%)}}
.faq__badge .v{display:block;font-family:var(--f-d);font-weight:800;font-size:1.75rem;line-height:1;
  font-variant-numeric:tabular-nums}
.faq__badge .l{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-top:9px;line-height:1.35}
.faq__h{font-size:clamp(1.6rem,2.7vw,2.05rem);line-height:1.12;margin:14px 0 10px}
.faq__s{font-size:15.5px;color:var(--navy-500);margin-bottom:clamp(16px,1.9vw,24px)}

/* ── Badge columns — circular icon, centred text ────────────────────────*/
.badgrid{grid-column:1/-1;display:grid;gap:clamp(34px,4vw,52px);text-align:center}
@media(min-width:820px){.badgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,56px)}}
.badcol{display:flex;flex-direction:column;align-items:center}
.badcol__ico{width:clamp(64px,6vw,78px);height:clamp(64px,6vw,78px);border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--orange-100);color:var(--orange);
  margin-bottom:clamp(18px,2vw,24px);transition:transform .25s var(--ease)}
.dark .badcol__ico,.s--dark .badcol__ico{background:rgba(237,102,46,.16)}
.badcol__ico svg{width:46%;height:46%}
.badcol:hover .badcol__ico{transform:translateY(-3px)}
.badcol h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.02em;margin-bottom:11px}
.badcol p{font-size:15.5px;line-height:1.6;color:var(--navy-500);max-width:34ch}
.dark .badcol p,.s--dark .badcol p{color:rgba(255,255,255,.72)}
.eyebrow--c{justify-content:center}
.svchead .eyebrow{margin-bottom:16px}

/* ── Brand marquee ──────────────────────────────────────────────────────
   Two identical tracks translated -50% give a seamless loop. Pauses on hover
   and on focus-within; under prefers-reduced-motion the animation stops and
   the rail becomes a normal horizontal scroller instead. */
.marquee{position:relative;overflow:hidden;padding:clamp(22px,2.6vw,34px) 0;
  background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,140px);
  z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.marquee::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.marquee__track{display:flex;width:max-content;animation:pv-marquee 46s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__row{display:flex;align-items:center;gap:clamp(40px,5vw,84px);
  list-style:none;margin:0;padding:0 clamp(20px,2.5vw,42px)}
.marquee__row img{height:clamp(30px,3.4vw,46px);width:auto;display:block;
  filter:grayscale(1);opacity:.62;transition:filter .25s var(--ease),opacity .25s var(--ease)}
.marquee__row img:hover{filter:none;opacity:1}
@keyframes pv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee__track{animation:none}
  .marquee__row[aria-hidden="true"]{display:none}
}

/* ── Product cards ──────────────────────────────────────────────────────
   Illustrated rather than photographed: no manufacturer is implied while the
   brand list is still unconfirmed, and they stay sharp at any size. */
.prodgrid{grid-column:1/-1;display:grid;gap:clamp(16px,1.8vw,26px);align-items:stretch;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prodcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.prodcard:hover{border-color:var(--navy-300);transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(25,42,86,.09)}
.prodcard__m{display:flex;align-items:center;justify-content:center;padding:clamp(20px,2.4vw,32px);
  background:#fff;border-bottom:1px solid var(--rule)}
.prod__art{width:auto;max-width:100%;height:clamp(196px,20vw,258px);display:block;object-fit:contain;
  transition:transform .45s var(--ease)}
.prodcard:hover .prod__art{transform:translateY(-5px) scale(1.03)}
.prodcard__b{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.1vw,28px)}
.prodcard h3{font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.02em;margin-bottom:11px}
.prodcard p{font-size:15px;color:var(--navy-500);line-height:1.58;margin-bottom:22px}
.prodcard__btn{margin-top:auto;width:100%;font-size:15px;padding:13px 18px;min-height:48px}
.prodcard:hover .prodcard__btn{background:var(--navy);color:#fff}
.prodcard__btn svg{transition:transform .22s var(--ease)}
.prodcard:hover .prodcard__btn svg{transform:translateX(4px)}

/* ── Review bar ─────────────────────────────────────────────────────────
   Platform tile, fractional stars, score, review count. The stars use a
   background-clip gradient so a 4.4 genuinely renders as 4.4 of 5 filled —
   not five identical glyphs pretending to be a rating. */
.revbar{background:var(--cloud);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.revbar__in{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,5vw,86px);padding:clamp(20px,2.4vw,30px) 0}
.revrow{display:flex;align-items:center;gap:14px}
.revrow__logo{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 1px 3px rgba(25,42,86,.06)}
.revrow__logo svg{width:23px;height:23px;color:var(--orange)}
.revrow__stars{font-size:19px;letter-spacing:3px;line-height:1;
  background-image:linear-gradient(90deg,var(--orange) var(--pct,100%),var(--navy-100) var(--pct,100%));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.revrow__score{font-family:var(--f-d);font-weight:800;font-size:19px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--navy)}
.revrow__sep{width:1px;height:18px;background:var(--navy-100)}
.revrow__count{font-size:14.5px;color:var(--navy-500);white-space:nowrap}
.revrow__plat{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-300);display:block;margin-bottom:6px}
@media(max-width:520px){.rev{gap:11px}.revrow__stars{font-size:17px;letter-spacing:2px}}

/* ── Trust strip ────────────────────────────────────────────────────── */
.trust{border-top:1.5px solid var(--navy);border-bottom:1px solid var(--rule)}
.trust__in{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;padding:18px 0}
.trust__i{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy-500);white-space:nowrap}
.trust__i b{font-family:var(--f-d);font-size:15px;color:var(--navy)}
.trust__i svg{width:15px;height:15px;color:var(--orange);flex:none}
.stars{color:var(--orange);letter-spacing:1.5px}

/* ── Manifesto — drop cap + marginalia ──────────────────────────────── */
.manifesto h2{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.06;margin-bottom:30px}
.mnotes{display:grid;gap:26px;align-content:start}
@media(max-width:899px){.mnotes{margin-top:36px;grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:560px){.mnotes{grid-template-columns:1fr}}

/* ── Ruled list — services / packages. Rules, not cards. ────────────── */
.rlist{grid-column:1/-1;border-top:1px solid var(--rule)}
.ritem{display:grid;grid-template-columns:1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--rule);
  align-items:start;position:relative;transition:background-color .2s var(--ease)}
@media(min-width:900px){.ritem{grid-template-columns:52px 148px minmax(0,1fr) 200px;gap:34px;align-items:center;padding:18px 0}}
.ritem:hover{background:var(--cloud)}
.dark .ritem:hover{background:rgba(255,255,255,.04)}
.ritem__n{font-family:var(--f-d);font-weight:800;font-size:13px;color:var(--orange);font-variant-numeric:tabular-nums}
.ritem__img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(min-width:900px){.ritem__img{aspect-ratio:3/2}}
.ritem h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.025em;margin-bottom:8px}
.ritem p{font-size:15.5px;color:var(--navy-500);line-height:1.55;max-width:58ch}
.dark .ritem p{color:rgba(255,255,255,.72)}
.ritem__act{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.ritem__act:hover{color:var(--orange-700)}
@media(min-width:900px){.ritem__act{justify-self:end}}

/* ── Full-bleed band with gable clip ────────────────────────────────── */
.band{position:relative;overflow:hidden;background:var(--navy-900)}
.band__img{width:100%;height:clamp(340px,44vw,560px);object-fit:cover;opacity:.42}
.band__over{position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(15,27,56,.92) 0%,rgba(15,27,56,.7) 45%,rgba(15,27,56,.15) 100%)}
.band__in{width:100%}
.band h2{font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.06;color:#fff;margin-bottom:18px}
.band p{font-size:clamp(1rem,1.4vw,1.18rem);color:rgba(255,255,255,.82);max-width:46ch}

/* ── Packages — ruled specification table ───────────────────────────── */
.pkg{grid-column:1/-1;border-top:1.5px solid var(--navy)}
.prow{display:grid;grid-template-columns:1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--rule);position:relative}
@media(min-width:960px){.prow{grid-template-columns:230px minmax(0,1fr) 190px 230px;gap:40px;align-items:center;padding:24px 0}}
.prow--feat{background:linear-gradient(90deg,var(--orange-100) 0%,rgba(253,237,229,0) 62%)}
.prow--feat::before{content:"";position:absolute;left:calc(var(--gut) * -1);top:0;bottom:0;width:3px;background:var(--orange)}
@media(max-width:959px){.prow--feat::before{left:-12px}}
.prow__size{font-family:var(--f-d);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.1rem);line-height:.94;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.prow__size span{font-size:.42em;letter-spacing:0;color:var(--navy-500);margin-left:4px}
.prow__tier{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-500);margin-bottom:10px}
.prow__flag{display:inline-block;background:var(--orange);color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:5px 10px;margin-bottom:10px}
.prow__spec{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.prow__spec li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15px;align-items:start;color:var(--navy-500)}
.prow__spec svg{width:14px;height:15px;color:var(--orange);margin-top:3px;flex:none}
.prow__save .k{font-family:var(--f-d);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;line-height:1.2}
.prow__save .l{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-500);margin-top:7px}
.prow__buy .from{font-size:13px;color:var(--navy-500)}
.prow__buy .amt{font-family:var(--f-d);font-weight:800;font-size:1.9rem;line-height:1.1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.prow__buy .note{font-size:12.5px;color:var(--navy-300);margin-bottom:14px}
.equip__band{width:100%;aspect-ratio:21/9;object-fit:cover}

/* equipment matrix — category label left, brands ruled right */
.emat{border-top:1px solid var(--rule)}
.erow{display:grid;grid-template-columns:1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:center}
@media(min-width:680px){.erow{grid-template-columns:130px minmax(0,1fr);gap:28px}}
.erow__l{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--orange-900)}
.dark .erow__l{color:var(--orange-300)}
.erow__b{display:flex;flex-wrap:wrap;gap:0}
.ebrand{font-family:var(--f-d);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--navy);
  padding:6px 18px;border-left:1px solid var(--rule);transition:color .18s}
.ebrand:first-child{padding-left:0;border-left:none}
.ebrand:hover{color:var(--orange)}
.fnote{grid-column:1/-1;margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--navy-500);max-width:88ch}
.dark .fnote{color:rgba(255,255,255,.6)}

/* ── Battery ────────────────────────────────────────────────────────── */
.bcards{display:grid;gap:0;border-top:1px solid var(--rule)}
.bcard{padding:20px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline}
.bcard__k{font-family:var(--f-d);font-weight:800;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums;min-width:112px}
.bcard__k span{font-size:.44em;color:var(--navy-500);margin-left:3px}
.dark .bcard__k span{color:rgba(255,255,255,.6)}
.bcard h3{font-size:1.15rem;margin-bottom:6px}
.bcard p{font-size:15px;color:var(--navy-500);line-height:1.55}
.dark .bcard p{color:rgba(255,255,255,.7)}

/* ── Process — ghost numerals ───────────────────────────────────────── */
.proc{grid-column:1/-1;border-top:1px solid var(--rule)}
.pstep{padding:clamp(28px,3.6vw,44px) 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:900px){
  .pstep{grid-template-columns:clamp(88px,9vw,132px) minmax(0,1fr) clamp(160px,17vw,220px);
         gap:clamp(28px,3.4vw,52px);align-items:center}
}
.pstep__n{font-family:var(--f-d);font-weight:800;font-size:clamp(3.4rem,7vw,5.6rem);line-height:.82;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--navy-300);
  user-select:none;font-variant-numeric:tabular-nums}
.dark .pstep__n{-webkit-text-stroke-color:rgba(255,255,255,.34)}
@media(max-width:899px){.pstep__n{font-size:3rem}}
.pstep h3{font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.03em;margin-bottom:12px}
.pstep p{font-size:16.5px;color:var(--navy-500);line-height:1.6;max-width:56ch}
.dark .pstep p{color:rgba(255,255,255,.72)}
.pstep__t{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  padding-top:9px;border-top:2px solid var(--orange);display:inline-block}
@media(min-width:900px){.pstep>div:last-child{justify-self:end;text-align:right}}

/* ── Calculator ─────────────────────────────────────────────────────── */
.calc__form{border-top:1px solid var(--rule)}
.fld{padding:13px 0 14px;border-bottom:1px solid var(--rule);display:grid;gap:7px;
  align-content:start}
.fld--plain{border-bottom:none}
.fld > label,.fld__l{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-500)}
.dark .fld > label,.dark .fld__l{color:rgba(255,255,255,.6)}
.inp{width:100%;min-height:46px;padding:10px 13px;font-family:inherit;font-size:16.5px;color:var(--navy);
  background:var(--cloud);border:1.5px solid transparent;border-bottom-color:var(--navy-300);
  border-radius:2px;transition:border-color .16s,background-color .16s}
.dark .inp{background:rgba(255,255,255,.07);color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.inp:focus{outline:none;background:#fff;border-color:var(--orange);box-shadow:0 0 0 3px rgba(237,102,46,.18)}
.dark .inp:focus{background:rgba(255,255,255,.12)}
.inp::placeholder{color:var(--navy-300)}
.hint{font-size:12.5px;line-height:1.4;color:var(--navy-500)}
.dark .hint{color:rgba(255,255,255,.58)}
.rangewrap{display:flex;align-items:center;gap:20px}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2px;background:var(--navy-300);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:0;
  background:var(--orange);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:0;background:var(--orange);cursor:pointer;border:none}
input[type=range]:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:6px}
.rval{font-family:var(--f-d);font-weight:800;font-size:1.5rem;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.seg{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--navy-100)}
.seg button{flex:1;min-width:92px;background:none;border:none;border-right:1.5px solid var(--navy-100);
  padding:14px 12px;font-size:14px;font-weight:600;color:var(--navy-500);cursor:pointer;transition:.16s}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--cloud)}
.seg button[aria-pressed=true]{background:var(--navy);color:#fff}
.seg button:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:-3px}
.calc__out{background:var(--navy-900);color:#fff;padding:clamp(30px,4vw,44px);position:relative;overflow:hidden}
.calc__out::before{content:"";position:absolute;top:-130px;right:-130px;width:360px;height:360px;
  background:radial-gradient(circle,rgba(237,102,46,.3),transparent 66%)}
.calc__out>*{position:relative}
.co__l{font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.co__v{font-family:var(--f-d);font-weight:800;font-size:clamp(2.3rem,5.4vw,3.4rem);line-height:1;
  letter-spacing:-.04em;margin:16px 0 0;font-variant-numeric:tabular-nums}
.co__g{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:26px 0;
  border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);margin:26px 0}
.co__g .v{font-family:var(--f-d);font-weight:800;font-size:1.55rem;font-variant-numeric:tabular-nums}
.co__g .l{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px}
.co__d{font-size:13px;color:rgba(255,255,255,.6);margin-top:20px;line-height:1.55}

/* ── Testimonials ───────────────────────────────────────────────────── */
.ba{display:inline-flex;align-items:center;gap:22px;border-top:2px solid var(--orange);padding-top:18px;margin-top:26px}
.ba .l{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ba .n{font-family:var(--f-d);font-weight:800;font-size:1.7rem;font-variant-numeric:tabular-nums;margin-top:5px}
.ba .n--was{color:rgba(255,255,255,.42);text-decoration:line-through}
.ba .n--now{color:var(--orange)}
.byline{display:flex;gap:14px;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.av{width:48px;height:48px;flex:none;background:var(--orange);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-weight:800;font-size:15px;color:#fff}
.byline .nm{font-weight:600;font-size:15.5px;color:#fff}
.byline .mt{font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-top:2px}
.tmini{border-top:1px solid rgba(255,255,255,.2);padding:24px 0}
.tmini:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.tmini blockquote{margin:12px 0 16px;font-size:15.5px;line-height:1.58;color:rgba(255,255,255,.86)}
.tmini .who{font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.tmini .who b{color:#fff;font-weight:600}

/* ── Rebates ────────────────────────────────────────────────────────── */
.rebl{list-style:none;padding:0;margin:24px 0;display:grid;gap:0;border-top:1px solid var(--rule)}
.rebl li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.rebl svg{width:15px;height:16px;color:var(--orange);margin-top:4px;flex:none}
.eff{display:inline-block;margin-top:20px;font-size:12.5px;letter-spacing:.06em;color:var(--navy-500);
  border-top:1px solid var(--rule);padding-top:12px}
.finbox{background:var(--navy-900);color:rgba(255,255,255,.82);padding:clamp(28px,3.5vw,40px)}
.finbox h3{color:#fff;font-size:1.5rem;margin-bottom:14px}
.finbox .amt{font-family:var(--f-d);font-weight:800;font-size:3rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;margin:22px 0 6px}
.finbox .amt span{font-size:.38em;color:rgba(255,255,255,.62)}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{border-top:1.5px solid var(--navy)}
@media(min-width:1024px){.faq__aside{position:sticky;top:118px}}
.acc{border-bottom:1px solid var(--rule)}
.acc__b{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:13px 0;background:none;border:none;cursor:pointer;text-align:left;color:var(--navy)}
.acc__n{font-family:var(--f-d);font-weight:800;font-size:12px;color:var(--orange);font-variant-numeric:tabular-nums}
.acc__q{font-family:var(--f-d);font-weight:800;font-size:clamp(1rem,1.35vw,1.12rem);letter-spacing:-.02em}
.acc__b:hover .acc__q{color:var(--orange)}
.acc__b:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:-3px}
.acc__i{width:20px;height:20px;flex:none;color:var(--orange);transition:transform .25s var(--ease)}
.acc__b[aria-expanded=true] .acc__i{transform:rotate(180deg)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
.acc__p[data-open=true]{grid-template-rows:1fr}
.acc__p>div{overflow:hidden}
.acc__p p{font-size:15.5px;line-height:1.62;color:var(--navy-500);padding:0 0 18px 30px;max-width:70ch}
@media(max-width:600px){.acc__p p{padding-left:0}}

/* ── Quote form ─────────────────────────────────────────────────────── */
.qform{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--navy);
  padding:0 clamp(20px,2.1vw,28px) clamp(20px,2.1vw,26px);box-shadow:0 10px 34px rgba(25,42,86,.07)}
.qform__h{font-size:clamp(1.18rem,1.6vw,1.35rem);letter-spacing:-.02em;padding-top:20px;margin-bottom:4px}
.qform__s{font-size:14px;color:var(--navy-500);margin-bottom:2px}
.inp--area{min-height:78px;padding:11px 13px;resize:vertical;line-height:1.5;font-family:inherit}
.fld__opt{font-weight:400;color:var(--navy-300);letter-spacing:0;text-transform:none}
.qprog{display:flex;align-items:center;gap:10px;padding:20px 0;border-bottom:1px solid var(--rule)}
.qprog__b{height:3px;flex:1;background:var(--navy-100)}
.qprog__b[data-on=true]{background:var(--orange)}
.qprog__t{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--navy-500);white-space:nowrap}
.frow{display:grid;gap:0}
@media(min-width:620px){
  .frow--2{grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,36px);align-items:stretch}
  .frow--2 > .fld{border-bottom:none}
  .frow--2{border-bottom:1px solid var(--rule)}
}
.chk{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:14px;
  line-height:1.45;color:var(--navy-500);padding:11px 0;border-bottom:1px solid var(--rule)}
.chk input{width:20px;height:20px;margin-top:2px;accent-color:var(--orange)}
.qwhy{display:grid;gap:0;border-top:1px solid var(--rule)}
.qwhy__i{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.qwhy__n{font-family:var(--f-d);font-weight:800;font-size:12px;color:var(--orange);padding-top:5px}
.qwhy h3{font-size:1.05rem;margin-bottom:6px}
.qwhy p{font-size:15px;color:var(--navy-500)}
.fok{display:none;padding:44px 0}
.fok[data-on=true]{display:block}
.fok h3{font-size:1.7rem;margin:0 0 14px}
.fok p{color:var(--navy-500);max-width:46ch}
.fok__r{width:44px;height:3px;background:var(--orange);margin-bottom:22px}

/* ── Colophon CTA + footer ──────────────────────────────────────────── */
.fcta{background:var(--orange);color:#fff;padding:clamp(64px,9vw,120px) 0;position:relative;overflow:hidden}
.fcta__arc{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(660px,74vw);
  opacity:.2;color:#fff;pointer-events:none}
@media(max-width:899px){.fcta__arc{right:-24%;width:min(520px,110vw);opacity:.16}}
.fcta .g{position:relative}
.fcta h2{font-size:clamp(2rem,5.6vw,4rem);line-height:1;letter-spacing:-.04em;color:#fff;margin-bottom:20px}
.fcta p{font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(255,255,255,.92);max-width:44ch;margin-bottom:34px}
.fcta__r{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.fcta .tel{color:#fff}
.fcta .tel:hover{color:#fff;border-bottom-color:#fff}

.foot{background:var(--navy-900);color:rgba(255,255,255,.72);padding:clamp(52px,6vw,84px) 0 28px}
.foot__logo img{height:56px;width:auto;margin-bottom:22px}
.foot__brand p{font-size:15.5px;max-width:32ch;margin-bottom:24px}
.foot h2{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  font-family:var(--f-b);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a{color:rgba(255,255,255,.72);text-decoration:none;font-size:15px}
.foot a:hover{color:#fff}
.foot__cols{display:grid;gap:38px;margin-bottom:44px}
@media(min-width:820px){.foot__cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}}
.soc{display:flex;gap:10px}
.soc a{width:42px;height:42px;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.soc svg{width:17px;height:17px}
.foot__lic{display:flex;flex-wrap:wrap;gap:10px;padding:26px 0;border-top:1px solid rgba(255,255,255,.16)}
.lic{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.2);padding:9px 13px}
.foot__base{padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;
  gap:14px 26px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.55)}
.foot__base nav{display:flex;flex-wrap:wrap;gap:22px}
.foot__base a{font-size:13px;color:rgba(255,255,255,.55)}

/* ── Sticky mobile CTA ──────────────────────────────────────────────── */
.mcta{position:fixed;inset:auto 0 0 0;z-index:60;display:grid;grid-template-columns:1fr 1.5fr;gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1.5px solid var(--navy);
  transform:translateY(115%);transition:transform .3s var(--spring)}
.mcta[data-on=true]{transform:translateY(0)}
@media(min-width:900px){.mcta{display:none}}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;background:var(--navy);color:#fff;padding:13px 22px;z-index:100;
  text-decoration:none;transition:top .15s}
.skip:focus{top:0}
.rev{opacity:0;transform:translateY(20px);transition:opacity .55s var(--spring),transform .55s var(--spring)}
.rev[data-in=true]{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   SIMPLIFICATION LAYER — 8 August 2026
   Brings the page down to the scale of a working Australian solar site
   (measured against solarchief.com.au at 1440px: h1 ≈ 41px, h2 ≈ 34px,
   body 16px, section padding ≈ 70px). Content, sections, functionality,
   branding and CTAs are unchanged — only the visual scale.
   Appended last so it overrides the editorial scale above without deleting it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Frame ─────────────────────────────────────────────────────────────── */
:root{--gut:clamp(18px,3vw,40px)}
.g{max-width:1240px;gap:0 20px}
body{font-size:16px;line-height:1.6}

/* ── Vertical rhythm — was 92px, now 64px ──────────────────────────────── */
.sec{padding:clamp(44px,4.6vw,64px) 0}
.sec--tight{padding:clamp(30px,3.4vw,44px) 0}
.sec + .sec,.sec--alt + .sec--alt,.dark + .dark{padding-top:clamp(22px,2.4vw,32px)}
.sec--alt + .sec:not(.sec--alt):not(.dark),
.dark + .sec:not(.dark):not(.sec--alt),
.sec:not(.sec--alt):not(.dark) + .sec--alt,
.sec:not(.sec--alt):not(.dark) + .dark,
.sec--alt + .dark,.dark + .sec--alt{padding-top:clamp(44px,4.6vw,64px)}

/* ── Type scale — the biggest single change ────────────────────────────── */
.heroB h1{font-size:clamp(1.95rem,3.4vw,2.75rem);line-height:1.08;letter-spacing:-.03em;
  margin-bottom:clamp(14px,1.6vw,20px)}
.svchead h2,#services h2,#products h2,#brands h2,#packages h2,#capabilities h2,
#why h2,#reviews h2,.faq__h,.about__body h2,#quote h2{
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.025em}
.svchead{max-width:660px;margin-bottom:clamp(24px,2.6vw,34px)}
.svchead p{font-size:16px;max-width:60ch}
.heroB__sub{font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.55;max-width:44ch;margin-bottom:0}
.about__body p{font-size:15.5px;line-height:1.6}
.eyebrow{font-size:11px;letter-spacing:.16em}
.eyebrow::before{width:22px}

/* ── Hero — was 767px ──────────────────────────────────────────────────── */
.heroB{min-height:min(62vh,540px)}
.heroB__in{padding-top:clamp(22px,3vw,38px);padding-bottom:clamp(24px,3vw,40px)}
.heroB__cta{gap:12px 18px;margin-top:22px}
.heroB__nav{gap:11px;padding-left:18px}
.heroB__arrow{width:36px;height:36px}
.heroB__dot{width:20px}

/* ── Buttons — smaller box, but the primary keeps 19px so white-on-orange
      stays above the WCAG large-text threshold (3.21:1) ─────────────────── */
.btn{font-size:17px;padding:13px 24px;min-height:46px}
.btn--p{font-size:19px;padding:12px 26px}
.btn--sm{font-size:15px;padding:10px 18px;min-height:40px}
.tel{font-size:15.5px}

/* ── Stat band ─────────────────────────────────────────────────────────── */
.statcell{padding:16px 18px 18px 0}
.statcell + .statcell{padding-left:18px}
.statcell__ico{width:clamp(34px,3.2vw,42px);height:clamp(34px,3.2vw,42px)}
.statcell__v{font-size:clamp(1.35rem,2vw,1.7rem)}
.statcell__l{font-size:13.5px;margin-top:6px}
.revbar__in{gap:16px clamp(20px,3.4vw,52px);padding:14px 0}
.revrow__logo{width:36px;height:36px}
.revrow__logo svg{width:19px;height:19px}
.revrow__stars{font-size:16px}
.revrow__score{font-size:16px}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.svcgrid,.prodgrid,.tgrid{gap:clamp(12px,1.3vw,18px)}
.svccard__b,.prodcard__b{padding:clamp(16px,1.5vw,20px)}
.svccard h3,.prodcard h3{font-size:clamp(1.02rem,1.2vw,1.15rem);margin-bottom:7px}
.svccard p,.prodcard p{font-size:14.5px;line-height:1.5;margin-bottom:14px}
.svccard__btn,.prodcard__btn{font-size:14px;padding:10px 14px;min-height:40px}
.svccard__n{font-size:10.5px;padding:5px 9px}
.prod__art{height:clamp(140px,13vw,180px)}
.prodcard__m{padding:clamp(14px,1.6vw,22px)}

/* ── Packages ──────────────────────────────────────────────────────────── */
.pcol__head{padding:20px 20px 16px}
.pcol__size{font-size:clamp(1.8rem,2.6vw,2.2rem);margin:8px 0 6px}
.pcol__for{font-size:13.5px}
.pcol__spec{padding:16px 20px;gap:10px}
.pcol__spec li{font-size:14px}
.pcol__save{padding:14px 20px}
.pcol__save .k{font-size:1.02rem}
.pcol__buy{padding:16px 20px 20px}
.pcol__buy .amt{font-size:clamp(1.4rem,1.9vw,1.6rem)}

/* ── Badge columns, marquee, about, FAQ, testimonials ──────────────────── */
.badgrid{gap:clamp(24px,2.6vw,36px)}
.badcol__ico{width:clamp(48px,4.4vw,58px);height:clamp(48px,4.4vw,58px);margin-bottom:14px}
.badcol h3{font-size:clamp(1.02rem,1.2vw,1.15rem);margin-bottom:8px}
.badcol p{font-size:14.5px;line-height:1.55}
.marquee{padding:16px 0}
.marquee__row img{height:clamp(26px,2.6vw,34px)}
.marquee__row{gap:clamp(30px,3.6vw,58px)}
.about{row-gap:clamp(28px,3vw,40px)}
.about__stat{padding:12px 18px 12px 14px;gap:12px}
.about__ring{width:clamp(50px,4.4vw,58px)}
.about__cta{margin-top:22px;gap:12px}
.faq__media img{aspect-ratio:3/2}
.faq__badge{padding:11px 16px;min-width:100px}
.faq__badge .v{font-size:1.4rem}
.faq__badge .l{font-size:9.5px;margin-top:6px}
.acc__b{padding:11px 0}
.acc__q{font-size:clamp(.95rem,1.1vw,1.02rem)}
.tcard{padding:18px}
.tcard__q{width:26px;height:26px;margin-bottom:11px}
.tcard blockquote{font-size:14.5px;line-height:1.55;margin-bottom:16px}
.tcard__foot{padding-top:14px}

/* ── Form ──────────────────────────────────────────────────────────────── */
.qform{padding:0 20px 20px}
.qform__h{font-size:1.15rem;padding-top:16px}
.fld{padding:10px 0 11px}
.inp{min-height:42px;font-size:15.5px;padding:9px 12px}
.inp--area{min-height:70px}
.fld > label,.fld__l{font-size:11px}

/* ── Footer ────────────────────────────────────────────────────────────── */
.ftr{padding:clamp(38px,4vw,56px) 0 24px}
.ftr__g{gap:28px;margin-bottom:30px}
.ftr a,.ftr__b p{font-size:14.5px}
.soc a{width:36px;height:36px}
.lic{font-size:10.5px;padding:7px 11px}

/* ── Decoration dialled back ───────────────────────────────────────────── */
.heroB__arc{width:min(420px,46vw);opacity:.5}

/* ── Accessibility corrections to the simplification layer ──────────────────
   Shrinking the buttons introduced three regressions. Fixed here rather than
   by giving up the smaller scale.                                            */

/* 1. White on Solar Orange is 3.21:1 — legal only at >=19px bold. Small
      primary buttons therefore darken to Orange 700 (4.60:1), which passes
      AA at any size. The full-size primary keeps the brand orange.           */
.btn--p.btn--sm{background:var(--orange-700)}
.btn--p.btn--sm:hover{background:#A63C12}

/* 2. Tap targets: 40px was below the 44px minimum.                           */
.btn--sm{min-height:44px;padding:11px 18px}
.svccard__btn,.prodcard__btn{min-height:44px}

/* 3. Micro-labels had dropped to 9.5px. 11px tracked uppercase is the floor. */
.pcol__flag{font-size:11px;letter-spacing:.1em}
.faq__badge .l{font-size:10.5px}
.statcell__l,.tcard__meta{font-size:13px}

/* 4. Carousel controls were below the 24x24 pointer-target minimum. The dots
      keep their thin visual bar but gain a transparent hit area around it.    */
.heroB__dot{padding:11px 0;background:none;position:relative}
.heroB__dot::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:3px;background:rgba(255,255,255,.36);transition:background-color .2s}
.heroB__dot:hover::after{background:rgba(255,255,255,.7)}
.heroB__dot[aria-selected="true"]::after{background:var(--orange)}
.heroB__arrow{width:44px;height:44px}

/* 5. FAQ accordion rows back above the 44px target.                          */
.acc__b{padding:13px 0;min-height:44px}
.svccard__n{font-size:11px}
/* micro-label floor: nothing below 11px anywhere on the page */
.faq__badge .l,.about__stat-l,.ba .l,.hstat .l,.bstat .l{font-size:11px}
.lic{font-size:11px}