/* ═══════════════════════════════════════════════════════════════════════
   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 ─────────────────────────────────────────────── */
/* The dotted underline was removed at the client's request. The class is kept
   on every unresolved value so placeholders stay greppable before launch:
       grep -o 'class="[^"]*\bph\b' final/*.html
   Re-add the border below to make them visible again while filling in real data. */
.ph{display:inline}
div.ph,p.ph,li.ph{display:inline-block}
/* a table cell must stay a table cell — display:inline drops it out of the
   column and it collapses to its text width. */
td.ph,th.ph{display:table-cell}
.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}
.dark .pull{color:#fff}
.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}
/* On dark sections the navy outline button measures 1.22:1 — invisible.
   White outline on navy-900 is 17.02:1. */
.dark .btn--o,.pkgcta .btn--o,.rebband .btn--o{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.dark .btn--o:hover,.pkgcta .btn--o:hover,.rebband .btn--o:hover{background:#fff;color:var(--navy);
  box-shadow:inset 0 0 0 1.5px #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:clamp(18px,2vw,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:clamp(12px,1.4vw,20px);margin-left:auto}
/* 1280: a seventh item (Rebates) grew the bar to ~644px. Between 1160-1279px the
   nav fitted but pushed .mast__act past the right edge and the page scrolled
   sideways. All three masthead queries must use the SAME breakpoint — if .nav
   appears before .mast__act does, the header is broken. */
@media(min-width:1280px){.nav{display:flex}}
/* 13px / tighter tracking: seven items plus two dropdown chevrons overflowed the
   masthead below ~1334px at 14px. This buys back ~45px so the desktop nav can
   still appear on 1300px laptops. */
.nav a,.nav__top{font-size:13px;letter-spacing:.045em}
.nav a{font-weight:600;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:clamp(14px,1.6vw,22px);margin-left:auto}
@media(min-width:1280px){.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:1280px){.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:1.15rem;letter-spacing:-.025em;
  text-decoration:none;padding:13px 0;border-bottom:1px solid var(--rule);min-height:48px;
  display:flex;align-items:center}
.drawer__f{margin-top:auto;display:grid;gap:10px;padding-top:16px}

/* ── 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))}}
/* subgrid so the rule, stars and name line up across cards. With flex, a card
   whose meta wraps to two lines pushed its whole footer up by that line. */
.tcard{display:grid;grid-template-rows:auto 1fr auto;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;align-self:start;font-size:15.5px;line-height:1.62;color:var(--navy)}
.tcard__foot{padding-top:18px;border-top:1px solid var(--rule);align-self:start}
.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}}
/* orange-700, not orange: the 10.5px label is normal-size text and needs 4.5:1.
   White on --orange is 3.21:1 (large text only); on --orange-700 it is 4.60:1. */
.faq__badge{position:absolute;left:0;bottom:0;transform:translate(-8%,26%);
  background:var(--orange-700);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}
/* Solid orange tile with a white glyph. The tinted block read as an empty box,
   and it disappeared entirely on the dark sections. */
.badcol__ico{width:clamp(58px,5vw,66px);height:clamp(58px,5vw,66px);flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--orange-700);color:#fff;
  margin-bottom:clamp(16px,1.8vw,22px);
  transition:transform .25s var(--ease),background-color .2s var(--ease)}
.dark .badcol__ico,.s--dark .badcol__ico{background:var(--orange)}
.badcol__ico svg{width:44%;height:44%}
.badcol:hover .badcol__ico{transform:translateY(-3px);background:var(--orange-900)}
.dark .badcol:hover .badcol__ico{background:var(--orange-700)}
.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}
/* .revrow, not .rev — .rev is the scroll-reveal hook and setting gap on it
   leaked into every flex/grid container that reveals on scroll. */
@media(max-width:520px){.revrow{gap:11px}.revrow__stars{font-size:17px;letter-spacing:2px}}

/* ── Interior page banner (photo) ───────────────────────────────────────── */
.chero{position:relative;overflow:hidden;background:var(--navy-900)}
.chero__img{width:100%;height:clamp(210px,24vw,320px);object-fit:cover;opacity:.42;display:block}
.chero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,27,56,.34) 0%,rgba(15,27,56,.62) 100%)}
.chero__in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 var(--gut)}
.chero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.03em;color:#fff}
.chero__crumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;
  font-size:13px;color:rgba(255,255,255,.74);margin-top:12px}
.chero__crumb a{color:rgba(255,255,255,.74);text-decoration:none}
.chero__crumb a:hover{color:#fff}
.chero__crumb span{color:var(--orange)}

/* ── 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 ─────────────────────────────────────────────────────── */
.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__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 ──────────────────────────────────────────────────────────────── */
.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}

/* ── 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}

/* ══════════════════════════════════════════════════════════════════════════
   OPTION 3 — "CLASSIC"
   Solid navy panel beside the photography, square edges, visible borders and
   a denser grid. Reads as established and corporate. Same content, sections,
   CTAs and branding.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Panel hero ────────────────────────────────────────────────────────── */
.heroK{background:var(--navy-900)}
.heroK__grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.heroK__grid{grid-template-columns:minmax(0,47fr) minmax(0,53fr)}}
.heroK__panel{background:var(--navy-900);color:rgba(255,255,255,.82);display:flex;align-items:center;
  padding:clamp(34px,4vw,56px) var(--gut)}
@media(min-width:900px){.heroK__panel{padding-right:clamp(28px,3.4vw,52px)}}
.heroK__inner{width:100%;max-width:540px;margin-left:auto}
.heroK__inner .eyebrow{color:var(--orange);margin-bottom:14px}
.heroK h1{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.03em;color:#fff;margin-bottom:14px}
.heroK h1 .em{color:var(--orange)}
.heroK__sub{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.76);max-width:44ch;margin-bottom:22px}
.heroK__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:22px}
.heroK__cta .tel{color:#fff}
.heroK__list{list-style:none;margin:0;padding:18px 0 0;display:grid;gap:9px;
  border-top:1px solid rgba(255,255,255,.18)}
.heroK__list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:14.5px;color:rgba(255,255,255,.82)}
.heroK__list svg{color:var(--orange);margin-top:4px}
.heroK__media{position:relative;min-height:clamp(300px,40vw,520px);overflow:hidden}
.heroK__media .heroB__slides{position:absolute;inset:0}
.heroK__media .heroB__slide img{width:100%;height:100%;object-fit:cover}
.heroK__ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 18px;
  background:linear-gradient(0deg,rgba(15,27,56,.7),transparent)}
.heroK__ctrl .heroB__nav{margin-left:0;padding-left:0;border-left:none;justify-content:flex-end}

/* ── Denser, squarer, more structured ──────────────────────────────────── */
.sec{padding:clamp(38px,4vw,54px) 0}
.svccard,.prodcard,.tcard,.pcol{border-radius:0;box-shadow:none;border:1px solid var(--navy-100)}
.svccard:hover,.prodcard:hover,.tcard:hover{transform:none;border-color:var(--navy);box-shadow:none}
.svccard__b,.prodcard__b,.tcard{padding:16px}
.svcgrid,.prodgrid,.tgrid{gap:14px}
.btn{border-radius:0}
.inp{border-radius:0}
.statband{border-top:2px solid var(--navy)}
.statcell + .statcell::before{background:var(--navy-100)}
.svchead{margin-bottom:clamp(20px,2.2vw,28px)}
.svchead h2,.faq__h,.about__body h2{letter-spacing:-.02em}
.about__stat,.faq__badge,.revbar{background:var(--navy-900);border-color:transparent}
.revrow__plat{color:rgba(255,255,255,.55)}
.revrow__score,.revrow__count{color:#fff}
.revrow__count{color:rgba(255,255,255,.72)}
.revrow__logo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.revrow__sep{background:rgba(255,255,255,.24)}

/* ══════════════════════════════════════════════════════════════════════════
   INTERIOR PAGES
   Shared furniture for every page other than the homepage: a compact navy
   page header with breadcrumb, and a prose column for written content.
   ══════════════════════════════════════════════════════════════════════════ */

.prose{max-width:70ch}
.prose h2{font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.2;margin:clamp(26px,3vw,38px) 0 12px}
.prose h3{font-size:1.15rem;margin:24px 0 10px}
.prose p{font-size:16px;line-height:1.68;color:var(--navy-500);margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:0;list-style:none;display:grid;gap:10px}
.prose li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:15.5px;
  color:var(--navy-500);align-items:start}
.prose li::before{content:"";width:6px;height:6px;background:var(--orange);margin-top:8px;flex:none}
.prose a{color:var(--orange-900);font-weight:600}
.prose strong{color:var(--navy)}
.pside{position:sticky;top:96px;border:1px solid var(--navy-100);padding:20px}
.pside h2,.pside h3{font-size:1.05rem;margin-bottom:10px}
.pside p{font-size:14.5px;color:var(--navy-500);margin-bottom:14px}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — panel range, process steps
   Cards are deliberately light: a short image band on a tinted ground, the
   wattage inline with the brand rather than a solid block over the photo, a
   tight spec list, and a text-link action instead of a full button.
   ══════════════════════════════════════════════════════════════════════════ */
.pgrid{grid-column:1/-1;display:grid;gap:14px;align-items:stretch;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pancard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--navy-100);
  transition:border-color .2s var(--ease)}
.pancard:hover{border-color:var(--navy-300)}
/* fixed 4:3 well, white ground so the product shots' baked-in white blends, and
   the image fills it. The old height cap left each product floating small in a
   tinted box at a different size. */
.pancard__m{display:flex;align-items:center;justify-content:center;padding:12px;
  background:#fff;border-bottom:1px solid var(--navy-100);aspect-ratio:4/3;overflow:hidden}
.pancard__m img{width:100%;height:100%;object-fit:contain;display:block}
.pancard__b{display:flex;flex-direction:column;flex:1;padding:14px 15px 15px}
.pancard__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.pancard__brand{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy-300)}
.pancard__w{font-family:var(--f-d);font-weight:800;font-size:11.5px;letter-spacing:.02em;
  color:var(--orange-900);background:var(--orange-100);padding:3px 8px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pancard h3{font-size:1rem;letter-spacing:-.02em;line-height:1.25;margin-bottom:10px}
.pancard ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:5px}
.pancard li{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:13.5px;line-height:1.45;
  color:var(--navy-500);align-items:start}
.pancard li svg{width:11px;height:12px;color:var(--orange);margin-top:4px;flex:none}
.pancard__go{margin-top:auto;padding-top:10px;border-top:1px solid var(--navy-100)}
.pancard__link{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--orange);text-decoration:none;
  min-height:34px;padding:6px 0}
.pancard__link:hover{color:var(--orange-700)}
.pancard__link svg{transition:transform .2s var(--ease)}
.pancard__link:hover svg{transform:translateX(3px)}

/* three-step process strip */
.steps3{grid-column:1/-1;display:grid;gap:0;border-top:1px solid var(--navy-100)}
@media(min-width:820px){.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step3{padding:22px 20px 24px 0;border-bottom:1px solid var(--navy-100)}
@media(min-width:820px){
  .step3{border-right:1px solid var(--navy-100);padding-left:20px}
  .step3:first-child{padding-left:0}
  .step3:last-child{border-right:none;padding-right:0}
}
/* orange-700: this numeral is 13px — normal-size text, so it needs 4.5:1.
   White on --orange is 3.21:1. */
.step3__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:var(--orange-700);color:#fff;font-family:var(--f-d);font-weight:800;font-size:13px;
  margin-bottom:13px}
.step3 h3{font-size:1.05rem;margin-bottom:8px}
.step3 p{font-size:14.5px;line-height:1.55;color:var(--navy-500)}

/* three-step process strip */
.steps3{grid-column:1/-1;display:grid;gap:0;border-top:1px solid var(--navy-100)}
@media(min-width:820px){.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step3{padding:22px 20px 24px 0;border-bottom:1px solid var(--navy-100)}
@media(min-width:820px){
  .step3{border-right:1px solid var(--navy-100);padding-left:20px}
  .step3:first-child{padding-left:0}
  .step3:last-child{border-right:none;padding-right:0}
}
.step3__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:var(--orange-700);color:#fff;font-family:var(--f-d);font-weight:800;font-size:13px;
  margin-bottom:13px}
.step3 h3{font-size:1.05rem;margin-bottom:8px}
.step3 p{font-size:14.5px;line-height:1.55;color:var(--navy-500)}
/* current page marker in the main nav */
.nav a[aria-current="page"]{color:var(--orange)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--orange)}

/* ── Main-menu dropdowns ───────────────────────────────────────────────────*/
.nav{align-items:center}
.nav__has{position:relative}
/* matches .nav a exactly — the header is white, so the label must be navy */
.nav__top{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:6px 0;
  font-family:var(--f-b);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:inherit;cursor:pointer;position:relative}
.nav__top::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__has[data-open="true"] .nav__top::after,.nav__top:hover::after{transform:scaleX(1)}
.nav__top:focus-visible{outline:3px solid rgba(237,102,46,.55);outline-offset:3px}
.nav__chev{width:13px;height:13px;transition:transform .2s var(--ease)}
.nav__has[data-open="true"] .nav__chev{transform:rotate(180deg)}
.nav__drop{position:absolute;top:100%;left:-14px;min-width:228px;background:#fff;
  border:1px solid var(--navy-100);box-shadow:0 14px 34px rgba(25,42,86,.16);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:60}
.nav__has[data-open="true"] .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop a{display:block;padding:10px 14px;font-size:14.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--navy);text-decoration:none}
.nav__drop a::after{display:none}
.nav__drop a:hover{background:var(--cloud);color:var(--orange-900)}
.nav__drop a[aria-current="page"]{color:var(--orange);font-weight:600}
.nav__drop .soon{display:block;padding:10px 14px;font-size:14.5px;color:var(--navy-300);cursor:default}

/* drawer version — expands inline instead of floating */
.drawer .nav__has{position:static;border-bottom:1px solid var(--rule)}
/* matches .drawer nav a exactly */
.drawer .nav__top{width:100%;justify-content:space-between;font-family:var(--f-d);font-weight:800;
  font-size:1.15rem;letter-spacing:-.025em;text-transform:none;color:var(--navy);
  padding:13px 0;min-height:48px}
.drawer .nav__chev{width:18px;height:18px}
.drawer .nav__top::after{display:none}
.drawer .nav__drop{position:static;opacity:1;visibility:visible;transform:none;border:none;
  box-shadow:none;padding:0 0 8px;min-width:0;display:none;background:none}
.drawer .nav__has[data-open="true"] .nav__drop{display:block}
.drawer .nav__drop a{padding:0 0 0 14px;border-left:2px solid var(--rule);font-size:15px;
  font-weight:600;letter-spacing:0;min-height:44px;border-bottom:none}


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   Photo banner, dark information card beside a light form panel, then a
   full-width location block. Prime Volt navy/orange throughout.
   ══════════════════════════════════════════════════════════════════════════ */

.crow{align-items:stretch;row-gap:20px}

/* dark information card */
.ccard{display:flex;flex-direction:column;background:var(--navy-900);height:100%}
.ccard__m img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ccard__b{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.ccard h2{font-size:1.15rem;color:#fff;padding-bottom:14px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.18)}
.ccard__list{display:grid;gap:0}
.ccard__row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ccard__row:last-child{border-bottom:none}
.ccard__ico{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--orange);color:#fff}
.ccard__ico svg{width:18px;height:18px}
.ccard__l{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:4px}
.ccard__v{display:block;font-family:var(--f-d);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  color:#fff;text-decoration:none;line-height:1.35}
a.ccard__v:hover{color:var(--orange-300)}

/* light form panel */
.cpanel{background:var(--cloud);padding:clamp(22px,2.6vw,34px);height:100%}
.cpanel h2{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.15;margin-bottom:10px}
.cpanel__s{font-size:15px;color:var(--navy-500);max-width:56ch;margin-bottom:20px}
.cpanel .fld{border-bottom:none;padding:0 0 14px}
.cpanel .inp{background:#fff;border:1.5px solid var(--navy-100)}
.cpanel .inp:focus{border-color:var(--orange);background:#fff}
.cpanel .frow--2{border-bottom:none;gap:0 clamp(14px,1.6vw,20px)}
.cpanel .chk{border-bottom:none;padding:6px 0}

/* location block */
.cloc{text-align:center}
.cloc__pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--orange-900);background:var(--orange-100);
  padding:7px 15px;margin-bottom:14px}
.cloc h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin-bottom:12px}
.cloc p{font-size:15.5px;color:var(--navy-500);max-width:62ch;margin:0 auto}
.cmap{grid-column:1/-1;position:relative;margin-top:clamp(22px,2.6vw,32px);
  border:1px solid var(--navy-100);background:var(--cloud);aspect-ratio:21/8;overflow:hidden}
@media(max-width:760px){.cmap{aspect-ratio:4/3}}
.cmap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}
.cmap__a{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:11px 16px;background:#fff;color:var(--navy);font-size:13.5px;font-weight:600;
  text-decoration:none;box-shadow:0 4px 16px rgba(25,42,86,.18)}
.cmap__a:hover{background:var(--navy);color:#fff}
.cmap__a:focus-visible{outline:3px solid rgba(237,102,46,.6);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.ctarow{grid-column:1/-1;display:grid;gap:24px;align-items:center}
@media(min-width:900px){.ctarow{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px)}}
.ctarow h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.14;margin-bottom:10px}
.ctarow p{font-size:15.5px;color:var(--navy-500);max-width:56ch}
.ctarow__go{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:900px){.ctarow__go{justify-content:flex-end}}

/* ══════════════════════════════════════════════════════════════════════════
   REBATES PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* the four programs */
.rebgrid{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:20px;
  margin-top:clamp(28px,3.4vw,42px)}
@media(min-width:820px){.rebgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.rebcard{background:var(--cloud);border:1px solid var(--navy-100);padding:clamp(22px,2.4vw,30px)}
.rebcard__ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:var(--orange-100);color:var(--orange-900);margin-bottom:16px}
.rebcard__ico svg{width:21px;height:21px}
.rebcard h3{font-size:clamp(1.12rem,1.7vw,1.3rem);letter-spacing:-.025em;margin-bottom:10px}
.rebcard p{font-size:15px;line-height:1.6;color:var(--navy-500)}

/* navy highlight band */
.rebband{background:var(--navy);padding:clamp(34px,4.4vw,58px) 0}
.rebpills{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:780px){.rebpills{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rebpill{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:16px 18px}
.rebpill svg{width:19px;height:19px;color:var(--orange-300);margin-top:1px}
.rebpill span{font-size:14.5px;line-height:1.45;color:#fff}
.rebband__go{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;
  gap:12px;margin-top:clamp(22px,2.6vw,32px);text-align:center}
.rebband__n{font-size:13.5px;color:rgba(255,255,255,.76);max-width:60ch}

/* FAQ — expanded, not an accordion */
.rebfaq{grid-column:1/-1;display:grid;gap:16px;max-width:880px;margin-inline:auto;
  margin-top:clamp(26px,3vw,38px)}
.rebq{border:1px solid var(--navy-100);padding:clamp(18px,2vw,24px)}
.rebq h3{font-size:clamp(1.02rem,1.5vw,1.15rem);letter-spacing:-.02em;margin-bottom:9px}
.rebq p{font-size:15px;line-height:1.62;color:var(--navy-500)}

/* centred closing CTA */
.ctac{grid-column:1/-1;text-align:center;max-width:720px;margin-inline:auto}
.ctac h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.14;margin:12px 0 12px}
.ctac p{font-size:15.5px;color:var(--navy-500);margin-inline:auto}
.ctac__go{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* generic split CTA (about page) */
.ctarow{grid-column:1/-1;display:grid;gap:24px;align-items:center}
@media(min-width:900px){.ctarow{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px)}}
.ctarow h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.14;margin-bottom:10px}
.ctarow p{font-size:15.5px;color:var(--navy-500);max-width:56ch}
.ctarow__go{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:900px){.ctarow__go{justify-content:flex-end}}

/* ══════════════════════════════════════════════════════════════════════════
   PACKAGES PAGE
   Four tiers held in one grid. Each card is a subgrid spanning 7 rows so the
   tag, title, description, specs, badge and price line up across all four —
   that alignment is what makes the tiers comparable at a glance.
   ══════════════════════════════════════════════════════════════════════════ */
/* the fact row under the intro */
.pkgfacts{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  list-style:none;padding:16px 0 0;margin:14px 0 0;border-top:1px solid var(--rule)}
.pkgfacts li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--navy)}
.pkgfacts svg{width:16px;height:16px;color:var(--orange-700);flex:none}

/* the four tiers */
.pkgrid{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:20px;
  margin-top:clamp(26px,3vw,38px)}
@media(min-width:760px){.pkgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(min-width:1180px){.pkgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}

/* Six rows, not seven. The NSW GOV badge now lives inside .pkgc__body — the
   flexible 1fr row — so tiers without one simply have more breathing space
   rather than a fixed empty band above the price. */
.pkgc{display:grid;grid-template-rows:auto auto auto auto 1fr auto;
  background:#fff;border:1px solid var(--navy-100);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
@supports(grid-template-rows:subgrid){
  .pkgrid{grid-template-rows:auto}
  @media(min-width:760px){.pkgc{grid-row:span 6;grid-template-rows:subgrid}}
}
.pkgc:hover{border-color:var(--navy-300);box-shadow:0 14px 34px rgba(25,42,86,.1);transform:translateY(-2px)}

/* Product banner: 4:3 with `contain`, not `cover`. The sources are square studio
   shots — cropping them to a letterbox cut the battery units in half. Contain
   keeps each product whole while still filling the box top to bottom. */
.pkgc__m{background:#fff;border-bottom:1px solid var(--navy-100);aspect-ratio:4/3;
  overflow:hidden;padding:10px;display:flex;align-items:center;justify-content:center}
.pkgc__m img{width:100%;height:100%;object-fit:contain;display:block}

.pkgc__tag{padding:16px 18px 0}
.pkgc__tag span{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-900);background:var(--orange-100);
  padding:5px 9px;line-height:1.35}
.pkgc h3{padding:11px 18px 0;font-size:clamp(1.08rem,1.35vw,1.2rem);letter-spacing:-.025em;line-height:1.25}
.pkgc__d{padding:8px 18px 0;font-size:13.5px;line-height:1.55;color:var(--navy-500)}

.pkgc__body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px}
.pkgc__s{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.pkgc__s li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:13.5px;line-height:1.45;
  color:var(--navy-500)}
.pkgc__s svg{width:15px;height:15px;color:var(--orange-700);margin-top:2px}
.pkgc__gov{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:9px 11px;background:var(--cloud);border-left:3px solid var(--navy);
  font-size:11.5px;color:var(--navy-500);line-height:1.4}
.pkgc__gov span{font-family:var(--f-d);font-weight:800;font-size:10px;letter-spacing:.1em;
  color:#fff;background:var(--navy);padding:3px 7px;flex:none}

/* price + CTA sit on a tinted footer so they read as the action zone */
.pkgc__f{padding:15px 18px 18px;border-top:1px solid var(--navy-100);background:var(--cloud);
  display:grid;gap:11px}
.pkgc__p{display:flex;align-items:baseline;gap:8px}
.pkgc__pl{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--navy-500)}
.pkgc__pv{font-family:var(--f-d);font-weight:800;font-size:clamp(1.55rem,2.1vw,1.85rem);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--navy);line-height:1}
.pkgc__cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:46px;padding:12px 16px;background:var(--orange-700);color:#fff;font-size:14.5px;
  font-weight:600;letter-spacing:.02em;text-decoration:none;transition:background-color .16s}
.pkgc__cta:hover{background:var(--orange-900)}
.pkgc__cta:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:2px}

.pkgnote{grid-column:1/-1;margin-top:clamp(20px,2.4vw,28px);text-align:center;
  font-size:15px;color:var(--navy-500)}
.pkgnote a{color:var(--orange-900);font-weight:600}

/* brands — static grid, not a marquee */
.blogos{grid-column:1/-1;list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--navy-100);
  border:1px solid var(--navy-100)}
@media(min-width:620px){.blogos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.blogos{grid-template-columns:repeat(5,minmax(0,1fr))}}
.blogos li{background:#fff;display:flex;align-items:center;justify-content:center;
  padding:22px 18px;min-height:96px}
.blogos img{max-height:34px;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .2s var(--ease),opacity .2s var(--ease)}
.blogos li:hover img{filter:none;opacity:1}

/* closing CTA */
.pkgcta{background:var(--navy);padding:clamp(46px,5.6vw,76px) 0}
.pkgcta__b{grid-column:1/-1;text-align:center;max-width:660px;margin-inline:auto}
.pkgcta__b h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;color:#fff;margin:12px 0 12px}
.pkgcta__b p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.85)}
.pkgcta__go{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}


/* ══════════════════════════════════════════════════════════════════════════
   SERVICE PAGES — prose column beside the "All Services" sidebar
   ══════════════════════════════════════════════════════════════════════════ */
.svcpage{row-gap:32px;align-items:start}
.svcbody h2{font-size:clamp(1.6rem,2.9vw,2.25rem);line-height:1.14;margin-bottom:18px}
.svcbody p{font-size:16px;line-height:1.72;color:var(--navy-500);max-width:70ch}
.svcbody p + p{margin-top:16px}
.svclede{font-size:17.5px !important;color:var(--navy) !important;font-weight:500}

/* key figures lifted out of the prose — square and ruled, like the rest of the site */
.svcfacts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--navy-100);
  border:1px solid var(--navy-100);margin:0 0 26px}
@media(min-width:620px){.svcfacts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svcfact{background:#fff;padding:15px 17px;display:grid;gap:4px}
.svcfact__v{font-family:var(--f-d);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;
  color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.svcfact__l{font-size:12px;font-weight:600;color:var(--navy-500);line-height:1.4}

.svcside{background:var(--cloud);border:1px solid var(--navy-100);padding:clamp(18px,2vw,24px)}
@media(min-width:900px){.svcside{position:sticky;top:104px}}
.svcside h2{font-size:1.15rem;margin-bottom:14px}
.svclist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.svclist__a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid var(--navy-100);padding:13px 15px;min-height:48px;
  font-size:14.5px;font-weight:600;color:var(--navy);text-decoration:none;
  transition:background-color .16s,border-color .16s,color .16s}
.svclist__a svg{flex:none;color:var(--orange-700);transition:color .16s,transform .16s var(--ease)}
.svclist__a:hover{border-color:var(--navy-300)}
.svclist__a:hover svg{transform:translateX(3px)}
.svclist__a:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:2px}
.svclist__a.is-on{background:var(--orange-700);border-color:var(--orange-700);color:#fff}
.svclist__a.is-on svg{color:#fff}
.svclist__a.is-on:hover{background:var(--orange-900);border-color:var(--orange-900)}

/* ══════════════════════════════════════════════════════════════════════════
   COMPARE PACKAGES
   ══════════════════════════════════════════════════════════════════════════ */
.cmp-wrap{grid-column:1/-1;margin-top:clamp(26px,3vw,38px);overflow-x:auto;
  border:1px solid var(--navy-100);-webkit-overflow-scrolling:touch}
.cmp-wrap:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:2px}
.cmp{width:100%;min-width:820px;border-collapse:collapse;background:#fff}
.cmp thead th{background:var(--cloud);text-align:left;vertical-align:middle;
  font-family:var(--f-b);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-500);padding:12px 16px;
  border-bottom:1.5px solid var(--navy)}
.cmp tbody tr{border-bottom:1px solid var(--navy-100)}
.cmp tbody tr:last-child{border-bottom:none}
.cmp tbody tr:hover{background:var(--cloud)}
.cmp th[scope=row]{text-align:left;font-family:var(--f-d);font-weight:800;font-size:14.5px;
  letter-spacing:-.015em;color:var(--navy);padding:13px 16px;vertical-align:middle;white-space:nowrap}
.cmp td{padding:13px 16px;font-size:14px;line-height:1.5;color:var(--navy-500);vertical-align:middle}
.cmp-b{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;white-space:nowrap}
.cmp-b--y{background:var(--orange-100);color:var(--orange-900)}
.cmp-b--n{background:var(--cloud);color:var(--navy-500);border:1px solid var(--navy-100)}
.cmp-p{font-family:var(--f-d);font-weight:800;font-size:1.18rem;letter-spacing:-.025em;
  color:var(--navy) !important;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;
  padding:9px 15px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--orange-900);background:var(--orange-100);text-decoration:none;white-space:nowrap;
  transition:background-color .16s var(--ease),color .16s var(--ease)}
.cmp-a:hover{background:var(--orange-700);color:#fff}
.cmp-a:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:2px}
.cmp-a svg{transition:transform .16s var(--ease)}
.cmp-a:hover svg{transform:translateX(3px)}
.cmp-note{grid-column:1/-1;margin-top:14px;font-size:13px;color:var(--navy-500);text-align:center}

.cmp-guide{grid-column:1/-1;list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.cmp-guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.cmp-guide li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  background:#fff;border:1px solid var(--navy-100);padding:17px 19px}
.cmp-guide svg{width:19px;height:19px;color:var(--orange-700);margin-top:1px;flex:none}
.cmp-guide span{font-size:14.5px;line-height:1.55;color:var(--navy-500)}
.cmp-guide strong{color:var(--navy);font-weight:600}

/* ══════════════════════════════════════════════════════════════════════════
   PACKAGE DETAIL PAGES
   ══════════════════════════════════════════════════════════════════════════ */
.ptab thead th{white-space:nowrap}
.ptab__pc{white-space:nowrap}
.ptab__pc .cmp-p{display:block;margin-bottom:6px}
.ptab .cmp-p{color:var(--navy)}

/* NSW government finance band */
.govband{background:var(--navy);padding:clamp(16px,2vw,22px) 0}
.govband__b{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.govband__t{font-family:var(--f-d);font-weight:800;font-size:10.5px;letter-spacing:.1em;
  color:var(--navy);background:#fff;padding:5px 9px;flex:none}
.govband__b p{font-size:13.5px;color:rgba(255,255,255,.9);flex:1 1 320px;line-height:1.45}
.govband__a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:11px 16px;
  font-size:13px;font-weight:600;color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);transition:background-color .16s,color .16s}
.govband__a:hover{background:#fff;color:var(--navy)}
.govband__a:focus-visible{outline:3px solid rgba(237,102,46,.6);outline-offset:2px}

/* hardware strip */
.pstrip{grid-column:1/-1;list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;max-width:660px;
  margin-inline:auto}
.pstrip li{background:#fff;border:1px solid var(--navy-100);padding:16px;text-align:center}
.pstrip img{width:100%;aspect-ratio:1/1;object-fit:contain;margin-bottom:10px}
.pstrip span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-500)}

.bhero{grid-column:1/-1;max-width:300px;margin:clamp(24px,3vw,34px) auto 0;text-align:center;
  background:#fff;border:1px solid var(--navy-100);padding:20px}
.bhero img{width:100%;aspect-ratio:1/1;object-fit:contain;margin-bottom:10px}
.bhero span{font-size:12.5px;font-weight:600;color:var(--navy-500)}

/* battery capacity tiers */
.btiers{grid-column:1/-1;display:grid;gap:20px}
.btier{background:#fff;border:1px solid var(--navy-100)}
.btier__h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:14px;padding:20px 20px 18px;border-bottom:1px solid var(--navy-100)}
.btier__e{margin-bottom:8px}
.btier h3{font-family:var(--f-d);font-weight:800;font-size:clamp(1.35rem,2.2vw,1.7rem);
  letter-spacing:-.03em;line-height:1.1}
.btier__h p{margin-top:7px;font-size:14.5px;color:var(--navy-500);max-width:52ch}
.btier__p{text-align:right;flex:none}
.btier__pl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy-500);margin-bottom:4px}
.btier__pv{display:block;font-family:var(--f-d);font-weight:800;font-size:clamp(1.4rem,2.1vw,1.75rem);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--navy);line-height:1}
.btier .cmp-wrap{border:none;margin-top:0}
.btier .cmp{min-width:520px}

/* inclusions */
.incl h2{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.14;margin:12px 0 18px}
.incl__l{list-style:none;margin:0;padding:0;display:grid;gap:11px}
@media(min-width:760px){.incl__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 28px}}
.incl__l li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:15px;line-height:1.5;color:var(--navy-500)}
.incl__l svg{width:18px;height:18px;color:var(--orange-700);margin-top:2px;flex:none}
.incl__n{margin-top:20px;font-size:14.5px;color:var(--navy-500);font-style:italic}
.incl__n a{color:var(--orange-900);font-weight:600;font-style:normal}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGES
   ══════════════════════════════════════════════════════════════════════════ */
.prod{align-items:start;row-gap:28px}
.prod__m{background:#fff;border:1px solid var(--navy-100);padding:clamp(20px,2.4vw,32px);
  display:flex;align-items:center;justify-content:center}
.prod__m img{width:100%;max-width:420px;aspect-ratio:1/1;object-fit:contain;display:block}
.prod__meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:12px}
.prod__brand{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-500)}
.prod__badge{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--orange-900);
  background:var(--orange-100);padding:4px 10px}
.prod__b h2{font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.1;letter-spacing:-.03em}
.prod__lede{margin-top:14px;font-size:16px;line-height:1.65;color:var(--navy-500);max-width:56ch}
.prod__f{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--navy-100);
  display:grid;gap:10px}
.prod__f li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:15px;line-height:1.5;color:var(--navy-500)}
.prod__f svg{width:18px;height:18px;color:var(--orange-700);margin-top:2px;flex:none}
.prod__go{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.prod__n{margin-top:16px;font-size:13.5px;color:var(--navy-500)}
.prod__n a{color:var(--orange-900);font-weight:600}

.prod__h{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.15;margin-bottom:clamp(16px,1.8vw,22px)}
.prod__t{min-width:0}
.prod__t th[scope=row]{width:38%;white-space:normal;font-family:var(--f-b);font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-500);
  background:var(--cloud);vertical-align:middle;padding:13px 16px}
.prod__t td{color:var(--navy);font-size:14.5px;vertical-align:middle;padding:13px 16px}

.prod__side{align-self:start;background:#fff;border:1px solid var(--navy-100);padding:clamp(18px,2vw,24px)}
@media(min-width:900px){.prod__side{position:sticky;top:104px}}
.prod__side h2{font-size:1.1rem;margin-bottom:14px}
.prod__inc{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.prod__inc li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:14px;line-height:1.5;color:var(--navy-500)}
.prod__inc svg{width:16px;height:16px;color:var(--orange-700);margin-top:2px;flex:none}

.relgrid{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:clamp(22px,2.6vw,32px)}
@media(min-width:700px){.relgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.relc a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--navy-100);
  text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.relc a:hover{border-color:var(--navy-300);box-shadow:0 12px 30px rgba(25,42,86,.1);transform:translateY(-2px)}
.relc a:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:2px}
.relc img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:16px;
  border-bottom:1px solid var(--navy-100)}
.relc__b{display:block;padding:14px 16px 0;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy-500)}
.relc h3{padding:6px 16px 0;font-size:1rem;letter-spacing:-.02em;line-height:1.3;color:var(--navy)}
.relc__a{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:14px 16px 16px;
  font-size:13px;font-weight:600;color:var(--orange-900)}
.relc a:hover .relc__a svg{transform:translateX(3px)}
.relc__a svg{transition:transform .16s var(--ease)}

/* ══════════════════════════════════════════════════════════════════════════
   LEGAL + INFORMATION PAGES
   ══════════════════════════════════════════════════════════════════════════ */
.legal__d{font-size:13px;color:var(--navy-500);padding-bottom:16px;margin-bottom:24px;
  border-bottom:1px solid var(--navy-100)}
.legal__i{font-size:17px;line-height:1.7;color:var(--navy);margin-bottom:10px}
.legal h2{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.2;margin:32px 0 12px}
.legal p{font-size:15.5px;line-height:1.72;color:var(--navy-500);max-width:70ch}
.legal p + p{margin-top:12px}
.legal__v{margin-top:36px;border-left:3px solid var(--orange);background:var(--orange-100);
  padding:16px 18px;font-size:14.5px;line-height:1.6;color:var(--orange-900)}
.legal__v strong{color:var(--navy)}

/* service areas */
.areas__v{border-left:3px solid var(--orange);background:var(--orange-100);padding:14px 18px;
  font-size:14px;line-height:1.6;color:var(--orange-900);margin-bottom:28px}
.arearow{padding:22px 0;border-top:1px solid var(--navy-100)}
.arearow h2{font-size:clamp(1.1rem,1.7vw,1.3rem);margin-bottom:14px}
.arealist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.arealist li{font-size:14px;color:var(--navy-500);background:var(--cloud);
  border:1px solid var(--navy-100);padding:8px 14px}

/* Home link + linked drawer logo */
.nav__home{font-size:13px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;
  text-decoration:none;padding:6px 0;position:relative}
.nav__home::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__home:hover::after,.nav__home:focus-visible::after{transform:scaleX(1)}
.drawer__logo{display:block}
.drawer__logo img{display:block}

/* review-platform marks sit on a light tile so brand colours stay legible on navy */
.revrow__logo--brand{background:#fff;border-color:rgba(255,255,255,.9)}
.revrow__logo--brand svg{width:22px;height:22px;color:inherit}
.revrow__logo--brand img{width:22px;height:22px;object-fit:contain;display:block}
/* the spec table is nested inside a column, not a direct grid child — .cmp-wrap's
   own top margin would push it below the sidebar it should line up with */
.prod__wrap{margin-top:0}

/* ══════════════════════════════════════════════════════════════════════════
   QUOTE MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.qm{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,32px)}
.qm[data-open=true]{display:flex}
.qm__bd{position:absolute;inset:0;background:rgba(15,27,56,.62);animation:qmFade .2s var(--ease)}
@keyframes qmFade{from{opacity:0}to{opacity:1}}
.qm__box{position:relative;background:#fff;width:100%;max-width:560px;max-height:calc(100dvh - 24px);
  overflow-y:auto;padding:clamp(16px,1.8vw,22px);box-shadow:0 30px 80px rgba(15,27,56,.4);
  animation:qmIn .22s var(--spring)}
@keyframes qmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qm__x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;background:none;border:none;color:var(--navy-500);cursor:pointer;
  transition:color .16s,background-color .16s}
.qm__x:hover{color:var(--navy);background:var(--cloud)}
.qm__x:focus-visible{outline:3px solid rgba(237,102,46,.5);outline-offset:-3px}
.qm__box h2{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.15;padding-right:44px}
.qm__sub{margin-top:5px;font-size:14px;line-height:1.5;color:var(--navy-500)}
#qmForm{margin-top:clamp(12px,1.5vw,16px)}
.qm__row{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:540px){.qm__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}}
.qm__f{margin-bottom:8px}
.qm__f label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy-500);margin-bottom:4px}
.qm__f abbr{color:var(--orange-900);text-decoration:none;border:none}
/* navy-300 measured 2.95:1 here, below AA for this 12.5px label */
.qm__opt{font-weight:500;letter-spacing:0;text-transform:none;color:var(--navy-500);opacity:.85}
.qm .inp{width:100%;background:#fff;border:1.5px solid var(--navy-100);padding:8px 12px;
  font-family:var(--f-b);font-size:16px;color:var(--navy)}
.qm .inp:focus{outline:none;border-color:var(--orange)}
.qm .inp:focus-visible{outline:3px solid rgba(237,102,46,.45);outline-offset:1px}
.qm select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233B4C7A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.qm .inp--area{resize:vertical;min-height:46px}
.qm .inp[aria-invalid=true]{border-color:var(--error,#C62828)}
.qm__chk{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:13.5px;line-height:1.45;color:var(--navy-500);margin:2px 0 10px}
.qm__chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange-700)}
.qm__chk a{color:var(--orange-900);font-weight:600}
.qm__go{width:100%;justify-content:center;min-height:48px;font-size:15.5px}
.qm .fok{padding:26px 0}
.qm .fok h3{font-size:1.3rem}

/* pricing tables: the money and the action group to the right */
.ptab td.cmp-p,.ptab thead th.is-num{text-align:right}
.ptab td:last-child,.ptab thead th:last-child{text-align:right}
.ptab tbody tr:hover .cmp-a{background:var(--orange-700);color:#fff}

@supports(grid-template-rows:subgrid){
  @media(min-width:680px){
    .tgrid{grid-template-rows:auto}
    .tcard{grid-row:span 3;grid-template-rows:subgrid}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TAP TARGETS
   Audited at 375px: footer links measured 19px tall, legal links 21px, social
   36px. WCAG 2.5.5 wants 44px; these are the most-tapped links on the site.
   ══════════════════════════════════════════════════════════════════════════ */
.foot li a{display:flex;align-items:center;min-height:44px}
.foot ul{gap:0}
.foot__base nav a{display:inline-flex;align-items:center;min-height:44px}
.soc a{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.drawer__logo{display:flex;align-items:center;min-height:44px}
@media(min-width:900px){
  /* desktop keeps the tighter rhythm — pointer targets are less demanding */
  .foot li a{min-height:34px}
  .foot__base nav a{min-height:32px}
}

/* Mobile tap targets, measured at 375px. Inline links inside a sentence are
   exempt under WCAG 2.5.5, so prose and consent links are left alone. */
.heroK__cta .tel,a.tel{display:inline-flex;align-items:center;min-height:44px}

.chero__crumb a{display:inline-flex;align-items:center;min-height:44px}
.pancard__link{min-height:44px}

/* dots: keep the 2px bar but give it a 44px hit area via a transparent overlay
   that does not disturb the bar itself */
.heroB__dot{position:relative}
.heroB__dot > i.hit{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.cmp-a{min-height:44px}
.ccard__v[href]{display:inline-flex;align-items:center;min-height:44px}

/* Mobile overflow fixes found in the 375px audit.
   .btier: the 520px min-width table inside it expanded the grid track instead of
   letting .cmp-wrap scroll. .pstrip: minmax(150px,...) could not shrink below
   three tracks, pushing the row past the viewport. */
.btiers,.btier{min-width:0}
.btier .cmp-wrap{max-width:100%}
.pstrip{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
@media(max-width:520px){
  .pstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstrip li:last-child:nth-child(odd){grid-column:1/-1}
}

/* ══════════════════════════════════════════════════════════════════════════
   STATS BAND — MOBILE
   One column made four short stats occupy 345px, 43% of a phone viewport.
   Two-up with the icon above the number halves that and stays readable.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:619px){
  .statband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statcell{flex-direction:column;align-items:flex-start;gap:9px;padding:16px 14px}
  .statcell + .statcell{padding-left:14px}
  .statcell + .statcell::before{display:none}
  .statcell{border-bottom:1px solid var(--navy-100)}
  .statcell:nth-child(odd){border-right:1px solid var(--navy-100)}
  .statcell:nth-last-child(-n+2){border-bottom:none}
  .statcell__ico{width:30px;height:30px}
  .statcell__v{font-size:1.45rem}
  .statcell__l{font-size:12.5px;margin-top:5px;line-height:1.3}
  .statcell__stars{font-size:12px;letter-spacing:2px;margin-bottom:3px}
}

/* 320px reflow (WCAG 1.4.10): the review buttons are nowrap and ran to 361px,
   wider than the viewport. Let them wrap and fill the column. */
@media(max-width:400px){
  .treviews{flex-direction:column}
  .treviews .btn,.rebband__go .btn{width:100%;white-space:normal;text-align:center;
    line-height:1.35;padding-block:12px}
}