/* ============================================================
   SolArk Electrical - Design System
   Built from: Brand/colours.md, Brand/visual-system.md,
               Brand/logo-rules.md, Brand/imagery.md
   Tokens are the source of truth. Do not hard-code colours.
   ============================================================ */

/* Self-hosted fonts (21 Oct 2026). Latin subset, variable weight, SIL Open Font
   License (the licence files sit beside them in assets/fonts/). No request
   leaves the site for a font. Preloaded in the page head. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/figtree-latin-var.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/rubik-latin-var.woff2') format('woff2')}

:root{
  /* --- Brand colour, print-verified (Brand/colours.md) --- */
  --yellow:#FFD22F;
  --ink:#000000;
  --grey-d:#808285;
  --grey-l:#D1D3D4;
  --white:#FFFFFF;

  /* --- Build-added, documented deviations ---
     #808285 on white measures 3.6:1 and FAILS WCAG AA for body text.
     --muted is #808285 darkened to pass AA (7.0:1) and is used for all
     secondary body copy. #808285 itself is retained for borders,
     dividers and disabled states only, where contrast rules do not apply. */
  --muted:#4A4C4F;
  --surface:#F6F6F4;
  --surface-2:#EDEDEA;
  --hairline:#E2E2DE;
  --yellow-dark:#E5B800;   /* button hover - visual-system.md flagged this as unspecified */
  /* Brand yellow darkened until it reads as text on a light band: 6.3:1 on
     white, 5.8:1 on --surface. Used for the label line on light bands only;
     on dark bands the label line is brand yellow itself (14.5:1 on ink). */
  --accent-ink:#7A5C00;

  /* --- Dark surface tints. Named because they were scattered as literals
     across the hero, the footer, the call bar and the dark sections, which
     meant a change to any one of them missed the others. --- */
  --ink-raise:#1f1f1f;      /* a panel lifted off the ink ground */
  --ink-sink:#0d0d0d;       /* behind an image, so a slow load is not a flash */
  --ink-line:#2A2A2A;       /* a divider on ink */
  --ink-band:#1a1a1a;       /* a band that must read as ink but not identical */
  --on-ink:#E8E8E4;         /* body copy on ink: 13.4:1, warmer than pure white */
  --star:#F5A623;           /* the review star. Not --yellow: it needs to read as
                               gold against white, where brand yellow does not */

  /* --- Form error states. The only semantic colour set on the site. Kept
     separate from the accent on purpose: an error must never be mistakable for
     a highlight. --- */
  --error:#B3261E;
  --error-ink:#8C1D18;
  --error-line:#F3C4C0;
  --error-tint:#FFF8F7;
  --error-tint-2:#FFF1F0;

  /* --- Spacing, 8px base (visual-system.md §4) --- */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:96px; --s9:128px;

  /* --- Radius --- */
  --r-btn:8px;       /* playbook, 21 Oct 2026 (was 5px from the old site) */
  --r-card:8px;

  --shadow-1:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-2:0 2px 6px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.08);

  --maxw:1200px;
  /* One section rhythm for every band (playbook: 96 to 112px desktop, 64 to
     72px on a phone, the same everywhere). */
  --sec-y:104px;
  /* Header height, full and scrolled (about 15 percent shorter). */
  --hdr-h:80px; --hdr-h-stuck:68px;
  --maxw-text:68ch;

  /* See shell.py FONTS for why this changed from Teko. */
  --font-display:'Figtree','Rubik','Inter',system-ui,-apple-system,sans-serif;
  --font-body:'Rubik','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
svg{display:block;flex:0 0 auto}
/* Default icon box. Every component that wants a different size overrides it. */
.btn svg,.textlink svg{width:16px;height:16px}

/* --- Type scale (visual-system.md §2, recommended scale) --- */
h1,h2,h3{letter-spacing:-.015em;font-weight:800}
h4{font-weight:700;letter-spacing:.4px}
.btn{font-weight:600}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.3px;
  margin:0;
  text-wrap:balance;
}
/* Playbook type scale (21 Oct 2026): headline clamp(2.6rem,6vw,5rem), 700 to
   800, line height about 1, -0.02em, balanced; section heading
   clamp(1.8rem,3.5vw,2.9rem). Sentence case everywhere. */
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.5vw,2.9rem);line-height:1.08;font-weight:700;letter-spacing:-.015em}
h3{font-size:2rem;line-height:1.18}
h4{font-size:1.5rem;line-height:1.28;text-transform:uppercase;letter-spacing:1px}
/* A heading that opens an aside column, where the list under it is the point. */
.h2--tight{margin-bottom:var(--s4)}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
a{color:var(--ink);text-decoration-color:var(--grey-d);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
strong{font-weight:600}
ul,ol{margin:0 0 var(--s3);padding-left:1.25em}
li{margin-bottom:var(--s2)}
li:last-child{margin-bottom:0}

/* The focus ring used to be outline:3px solid var(--ink) everywhere, and --ink
   is pure black. On the hero, the dark sections, the black utility bar, the
   footer and the sticky call bar that is a black ring on a black ground: 1:1,
   no ring at all. A keyboard user lost the cursor across roughly half of every
   page.
   The ring that carries the contrast is the outline, and it flips by ground.
   Ink measures 21:1 on the white page and 14.5:1 on the yellow button; yellow
   measures 14.5:1 on ink. The outer halo is the opposite colour, so the ring
   stays bounded wherever it lands. */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
  border-radius:2px;
  box-shadow:0 0 0 5px var(--yellow);
}
.hero :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible,
.site-header--overlay:not(.is-stuck) :focus-visible{
  outline-color:var(--yellow);
  box-shadow:0 0 0 5px rgba(0,0,0,.85);
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--white);padding:12px 20px;
  font-weight:500;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

/* ===================== LAYOUT ===================== */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
.section{padding:var(--sec-y) 0}
.section--tight{padding:var(--sec-y) 0}
@media(max-width:760px){:root{--sec-y:68px}}
.section--dark{background:var(--ink);color:var(--white)}
.section--dark a{color:var(--white)}
.section--surface{background:var(--surface)}
.lede{font-size:1.25rem;line-height:1.6;color:var(--muted);max-width:var(--maxw-text)}
.section--dark .lede{color:var(--grey-l)}
/* The label line above every section heading (playbook section 3): 13px,
   uppercase, 0.12em tracking, in the accent colour. It names the subject; the
   heading under it says the outcome. Darkened yellow on light bands, brand
   yellow on dark ones, so it reads on both. */
.eyebrow,.label{
  font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);
  margin:0 0 var(--s3);
}
.section--dark .eyebrow,.section--dark .label,
.hero .eyebrow,.hero .label,.stat-band .label,.cta-band.section--dark .label{color:var(--yellow)}
.rule{width:56px;height:4px;background:var(--yellow);border:0;margin:var(--s4) 0 0;border-radius:2px}
.sec-head{
  max-width:var(--maxw-text);margin:0 auto var(--s6);
  text-align:center;
}
.sec-head .lede{margin-inline:auto}
/* The rule under a centred heading centres with it. */
.sec-head .rule{margin:var(--s4) auto 0}
/* The yellow rule under section headings is retired: the label line above the
   heading carries the accent now, and both together was decoration twice. */
.sec-head .rule{display:none}
.sec-head h2+.lede{margin-top:var(--s4)}
.grid{display:grid;gap:var(--s4)}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .grid--2up{grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center}
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;
  font-family:var(--font-body);font-size:16px;font-weight:600;
  text-decoration:none;text-transform:none;
  border:2px solid transparent;border-radius:var(--r-btn);
  cursor:pointer;transition:background-color .18s ease,transform .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
/* The small arrow on every primary button (playbook). Drawn with a mask so it
   takes the text colour, and skipped on a phone-number button and the compact
   header button. */
.btn--primary:not([href^="tel:"]):not(.btn--noarrow)::after{
  content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h14M13 6.5l5.5 5.5L13 17.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12h14M13 6.5l5.5 5.5L13 17.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease;
}
.btn--primary:hover::after{transform:translateX(3px)}
.btn--primary:hover{background:var(--yellow-dark);border-color:var(--yellow-dark)}
.btn--dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--dark:hover{background:#1f1f1f}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.section--dark .btn--ghost{color:var(--white);border-color:var(--white)}
.section--dark .btn--ghost:hover{background:var(--white);color:var(--ink)}
/* Buttons on dark grounds. `.section--dark a{color:#fff}` and `.hero` would
   otherwise force white text onto brand yellow, which visual-system.md bans
   outright (white on #FFD22F measures 1.45:1). */
.section--dark .btn--primary,
.hero .btn--primary,
.cta-band .btn--primary{color:var(--ink)}
.hero .btn--ghost{color:var(--white);border-color:var(--white)}
.hero .btn--ghost:hover{background:var(--white);color:var(--ink)}
.section--dark .btn--dark{border-color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
@media(min-width:760px){.btn-row{margin-top:var(--s5)}}
.textlink{
  font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--yellow);padding-bottom:1px;
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
}
.textlink:hover{border-bottom-color:var(--ink)}

/* ===================== HEADER ===================== */
.dotsep{color:var(--grey-d)}
/* Mobile fold protection: the full four-item bar cost ~110px of the first
   screen, which pushed the hero CTA out of view. Phone and rating are the two
   items that earn their place at this width; the rest repeat in the trust strip
   immediately below the hero. */
@media(max-width:760px){
}

/* Header (playbook, 21 Oct 2026). Sticky, so anything above it in the flow
   (the staff test strip) scrolls away normally. It drops about 15 percent in
   height once scrolled (.is-stuck, set by site.js after 80px); the margin under
   it grows by the same amount, so nothing below it moves when it shrinks. */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--hairline);
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease,margin .2s ease}
.site-header .wrap{display:flex;align-items:center;gap:var(--s4);height:var(--hdr-h);transition:height .2s ease}
.site-header.is-stuck{margin-bottom:calc(var(--hdr-h) - var(--hdr-h-stuck));
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06)}
.site-header.is-stuck .wrap{height:var(--hdr-h-stuck)}
html{scroll-padding-top:calc(var(--hdr-h) + 16px)}
.brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:0 0 auto;text-decoration:none;min-height:44px;gap:2px}
.brand__logo{display:block}
.brand img{width:178px;height:auto}
.is-stuck .brand img{width:160px}
/* The licence number, on every page, because WA law requires it on all
   advertising including web pages (Electricity (Licensing) Regulations 1991
   reg 45(1)). Small, but plain text at full contrast, never hidden. */
.brand__lic{font-size:11.5px;line-height:1.2;font-weight:500;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.nav{margin-left:auto;display:none}
.nav ul{display:flex;align-items:center;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a{
  font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding:10px 2px;display:inline-block;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--yellow)}
.header-cta{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav+.header-cta{margin-left:var(--s4)}
.header-cta .btn{min-height:44px;padding:10px 18px}
/* The phone and quote buttons stay in the header at every width: there is no
   bottom call bar (Jack's decision). Below the nav breakpoint the phone button
   drops its number and keeps the icon, labelled for screen readers. */
.call-btn svg{width:18px;height:18px}
@media(min-width:1180px){.nav{display:block}}
@media(max-width:1179px){
  :root{--hdr-h:72px;--hdr-h-stuck:62px}
  .site-header .wrap{gap:var(--s2)}
  .brand img{width:160px}
  .call-btn__num{display:none}
  .header-cta .call-btn{padding:10px 12px;min-width:44px}
}
@media(max-width:520px){
  :root{--hdr-h:66px;--hdr-h-stuck:58px}
  .wrap{padding:0 16px}
  .brand{min-width:0}
  .brand img{width:128px}
  .is-stuck .brand img{width:118px}
  .brand__lic{font-size:10.5px}
  .brand__lic-pre{display:none}
  .header-cta{gap:6px}
  .header-cta .btn{padding:8px 12px;font-size:14px;min-height:44px}
  .menu-toggle{width:44px;height:44px;margin-left:2px}
}
@media(max-width:359px){
  .brand img{width:108px}
  .header-cta .btn--primary{padding:8px 10px}
}

/* Mobile drawer */
.menu-toggle{
  margin-left:var(--s2);width:48px;height:48px;display:inline-flex;
  align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--grey-l);border-radius:var(--r-btn);cursor:pointer;
}
@media(min-width:1180px){.menu-toggle{display:none}}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.drawer{border-top:1px solid var(--hairline);background:var(--white);padding:var(--s3) 0 var(--s5);
  max-height:calc(100vh - var(--hdr-h));max-height:calc(100dvh - var(--hdr-h));overflow-y:auto}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{margin:0;border-bottom:1px solid var(--surface-2)}
.drawer a{display:block;padding:14px 0;font-weight:500;text-decoration:none;font-size:1.0625rem}
@media(min-width:1180px){.drawer{display:none!important}}

/* ===================== HERO ===================== */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.hero__media{position:absolute;inset:0;background:#0d0d0d;overflow:hidden}
.hero__media img{color:transparent}   /* keeps a failed image's alt text off the hero */
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.76) 44%,rgba(0,0,0,.40) 100%);
}
/* Pages we have no honest photograph for get a deliberate treatment rather
   than a solar aerial that has nothing to do with the job on the page. Pure
   CSS, so it costs no bytes and never 404s. */
/* Longhands, not the `background` shorthand: the shorthand would reset
   background-color to transparent and leave white text on nothing if the
   gradients ever fail to paint. */
.hero--plain{
  background-color:var(--ink);
  background-image:
    radial-gradient(120% 90% at 88% 8%, rgba(255,210,47,.16) 0%, rgba(255,210,47,0) 58%),
    linear-gradient(160deg, #1A1A1C 0%, rgba(0,0,0,0) 62%);
}
.hero--plain::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px);
  mask-image:linear-gradient(100deg, transparent 34%, #000 100%);
  -webkit-mask-image:linear-gradient(100deg, transparent 34%, #000 100%);
}
@media (prefers-contrast:more){ .hero--plain::before{display:none} }

.hero__inner{position:relative;padding:var(--s7) 0 var(--s6)}
@media(min-width:760px){
  .hero__inner{padding:var(--s8) 0 var(--s7)}
  .hero--home .hero__inner{padding:var(--s9) 0 var(--s8)}
}
.hero__body{max-width:62ch}
.hero h1{color:var(--white)}
.hero--home h1{font-size:clamp(2.75rem,7.8vw,4.75rem)}
.hero__sub{font-size:1.1875rem;line-height:1.55;color:#E8E8E4;margin-top:var(--s3);max-width:56ch}
@media(min-width:760px){.hero__sub{font-size:1.1875rem;margin-top:var(--s4)}}
.hero .eyebrow{color:var(--yellow)}
.hero__note{margin-top:var(--s4);font-size:.9375rem;color:var(--grey-l)}

/* ---------- hero--art: the suburb illustrations ------------------------------
   A photograph hero is texture, so it goes behind the text and gets dimmed. An
   illustration is content: somebody researched the landmark and the whole point
   is that a local recognises it. So this variant puts the drawing BESIDE the
   text rather than under it, at its own aspect ratio, undimmed and uncropped.
   Nothing overlaps, so there is no contrast to protect and no reason to darken.
   On a phone the drawing sits above the text, complete, and the headline follows
   directly under it. ------------------------------------------------------- */
.hero--art{overflow:visible}
.hero--art .hero__inner{padding:0}
.hero--art .hero__inner > .wrap{
  display:grid;grid-template-columns:1fr;gap:0;
  /* The art comes first in the DOM, so on a phone it renders above the text with
     no reordering. */
}
.hero__art{
  position:relative;width:100%;background:#0d0d0d;
  /* The illustrations are 1376x768. Declaring the real ratio is what stops the
     top and bottom of the drawing being cut off. */
  aspect-ratio:1376 / 768;
}
.hero__art img{
  display:block;width:100%;height:100%;
  /* contain, not cover: the whole drawing, always. */
  object-fit:contain;object-position:center;
  color:transparent;
}
.hero--art .hero__inner > .wrap{padding-inline:0}
.hero--art .hero__body{
  max-width:62ch;padding:var(--s5) var(--s4) var(--s6);margin-inline:auto;
}

@media(min-width:900px){
  /* Side by side, art on the right. The text column keeps the headline and the
     quote button inside the first screen, which a stacked layout would push
     below it: the illustration alone is 810px tall at full width. */
  .hero--art .hero__inner > .wrap{
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    align-items:center;gap:var(--s6);
    padding:var(--s5) var(--s4);
  }
  .hero--art .hero__art{order:2;border-radius:var(--r-card);overflow:hidden}
  .hero--art .hero__body{order:1;padding:0;margin:0;max-width:46ch}
}
@media(min-width:1280px){
  .hero--art .hero__inner > .wrap{gap:var(--s7)}
}

/* The hero's phone button shows at every width now that there is no bottom
   call bar to stand in for it. */

/* Trust strip */
.trust{background:var(--white);border-bottom:1px solid var(--hairline)}
.trust ul{
  list-style:none;margin:0;padding:var(--s4) 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s4);
}
@media(min-width:760px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{margin:0;display:flex;gap:12px;align-items:flex-start}
.trust .ico{flex:0 0 auto;width:26px;height:26px;color:var(--ink)}
.trust b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.375rem;line-height:1.1}
.trust span{display:block;font-size:.8125rem;color:var(--muted);line-height:1.35;margin-top:2px}

/* ===================== CARDS ===================== */
.card{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:var(--s5);display:flex;flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.card--link:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--grey-l)}
.card h3{font-size:1.5rem;margin-bottom:var(--s2)}
.card p{color:var(--muted);font-size:.9375rem;flex:1}
.card .textlink{margin-top:var(--s4);align-self:flex-start}
.card__ico{
  width:44px;height:44px;border-radius:var(--r-btn);background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4);
}
.card__ico svg{width:24px;height:24px;color:var(--ink)}
.card--media{padding:0;overflow:hidden}
.card--media img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--surface-2)}
.card--media .card__body{padding:var(--s5)}

/* Numbered steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:step;margin:0;padding-top:var(--s4);border-top:3px solid var(--yellow)}
.steps li::before{
  content:"0" counter(step);display:block;font-family:var(--font-display);
  font-size:2rem;line-height:1;color:var(--ink);margin-bottom:var(--s2);
}
.section--dark .steps li::before{color:var(--yellow)}
.steps h3{font-size:1.25rem;margin-bottom:var(--s2)}
.steps p{font-size:.9375rem;color:var(--muted)}
.section--dark .steps p{color:var(--grey-l)}

/* Reviews */
.rev{background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column}
.stars{display:flex;gap:2px;margin-bottom:var(--s3)}
.stars svg{width:16px;height:16px;color:#F5A623}
.rev blockquote{margin:0;font-size:.9375rem;line-height:1.6;flex:1}
.rev cite{
  display:block;margin-top:var(--s4);font-style:normal;font-weight:500;font-size:.875rem;
  padding-top:var(--s3);border-top:1px solid var(--surface-2);
}
.rev cite span{display:block;font-weight:400;color:var(--muted);font-size:.8125rem;margin-top:2px}

/* Rating badge */
.rating{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4)}
.rating__num{font-family:var(--font-display);font-size:3.5rem;line-height:.9;font-weight:500}
.rating__meta{font-size:.9375rem;color:var(--muted)}
.section--dark .rating__meta{color:var(--grey-l)}

/* Proof / stat list */
.proof{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.proof li{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:1rem}
.proof svg{flex:0 0 auto;width:22px;height:22px;color:var(--yellow);margin-top:1px}

/* FAQ */
/* Centred in the page under a centred heading. The rows themselves stay
   left aligned, because centring accordion text makes it unreadable. */
.faq{max-width:var(--maxw-text);margin-inline:auto}
.faq details{border-bottom:1px solid var(--hairline);padding:var(--s2) 0}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s3) 40px var(--s3) 0;position:relative;
  font-family:var(--font-display);font-weight:500;font-size:1.375rem;line-height:1.25;
  min-height:44px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq__a{padding:0 0 var(--s4);color:var(--muted)}

/* Suburb / link chips */
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips li{margin:0}
.chips a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;
  background:var(--white);border:1px solid var(--grey-l);border-radius:var(--r-btn);
  font-size:.875rem;font-weight:500;text-decoration:none;
}
.chips a:hover{border-color:var(--ink);background:var(--yellow)}

.cols{columns:2;column-gap:var(--s6);font-size:.9375rem}
@media(min-width:900px){.cols{columns:4}}
.cols ul{list-style:none;padding:0;margin:0}
.cols li{margin-bottom:6px;break-inside:avoid;color:var(--muted)}

/* Accreditation row */
.accred{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;justify-content:center}
.accred img{height:64px;width:auto;object-fit:contain}
/* Worded fallback for an accreditation whose logo file is not in the build.
   Same three claims, same row, nothing broken. Grid rather than flex-wrap so
   three cards are three even columns instead of two and a stranded third. */
.accred:has(.accred__txt){display:grid;gap:var(--s3);
  grid-template-columns:1fr;max-width:64rem;margin-inline:auto}
@media(min-width:760px){
  .accred:has(.accred__txt){grid-template-columns:repeat(3,1fr);gap:var(--s4)}
}
.accred__txt{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  margin:0;padding:14px 16px;border:1px solid var(--hairline);
  border-radius:var(--r-card);background:var(--white)}
.accred__txt svg{width:22px;height:22px;margin-top:2px;color:var(--ink)}
.accred__txt b{display:block;font-size:.9375rem;line-height:1.3;font-weight:600}
.accred__txt span>*+*,.accred__txt b+*{margin-top:2px}
.accred__txt span{font-size:.8125rem;line-height:1.4;color:var(--muted)}
.section--dark .accred__txt{background:transparent;border-color:rgba(255,255,255,.22)}
.section--dark .accred__txt svg{color:var(--yellow)}
.section--dark .accred__txt span{color:var(--grey-l)}
.section--dark .accred__txt b{color:var(--white)}

/* Media block */
/* Before and after pair. Side by side from 560px so the comparison is a glance
   rather than a scroll; stacked below that, which on a phone still reads in the
   right order because Before comes first in the markup. */
.ba{display:grid;gap:var(--s3);grid-template-columns:1fr;margin:var(--s5) 0 var(--s3)}
@media(min-width:560px){.ba{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.ba__item{margin:0}
.ba__item img{border-radius:var(--r-card);width:100%;aspect-ratio:1/1;object-fit:cover;
  background:var(--surface-2);display:block}
.ba__item figcaption{margin-top:var(--s2);font-size:.9375rem;line-height:1.45;color:var(--muted)}
.ba__item figcaption b{color:var(--ink)}
.section--dark .ba__item figcaption{color:var(--grey-l)}
.section--dark .ba__item figcaption b{color:var(--white)}
.ba__note{font-size:.875rem;color:var(--muted);margin:0 0 var(--s5)}

/* One photograph inside prose, with a caption that does actual work.
   --shot-ratio comes from shot() so a portrait frame keeps its shape instead of
   being cover-cropped into a landscape box. Capped in height as well as width so
   a tall frame cannot push the rest of the section off the screen. */
.shot{margin:var(--s5) 0 var(--s3)}
.shot img{
  display:block;border-radius:var(--r-card);
  width:100%;max-width:100%;
  aspect-ratio:var(--shot-ratio,4 / 3);object-fit:cover;
  max-height:min(70vh,560px);
  background:var(--surface-2);
}
.shot figcaption{margin-top:var(--s2);font-size:.9375rem;line-height:1.45;color:var(--muted)}
.shot figcaption b{color:var(--ink)}
.shot__note{font-size:.875rem;color:var(--muted);margin:0 0 var(--s5)}
.shot--tall{max-width:26rem}
@media(min-width:760px){
  /* A single frame at full column width reads as a banner. Pull it in so it sits
     as a figure beside the argument it supports. */
  .shot{max-width:44rem}
}

.media img{border-radius:var(--r-card);width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.media--tall img{aspect-ratio:3/4}
figure{margin:0}
figcaption{font-size:.8125rem;color:var(--muted);margin-top:var(--s2)}

/* CTA band */
.cta-band{background:var(--yellow);color:var(--ink)}
.cta-band .wrap{padding:var(--s7) var(--s4);text-align:center}
.cta-band h2{max-width:24ch;margin:0 auto}
.cta-band p{max-width:52ch;margin:var(--s4) auto 0;font-size:1.0625rem}
.cta-band .btn-row{justify-content:center}
.cta-band .btn--dark{border-color:var(--ink)}
.cta-band .btn--ghost{border-color:var(--ink)}
.cta-band .btn--ghost:hover{background:var(--ink);color:var(--yellow)}

/* Contact / form */
.contact-grid{display:grid;gap:var(--s7)}
.form-single{max-width:var(--maxw-text);margin-inline:auto}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.form{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s5)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:6px}
.field .hint{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--grey-d);border-radius:var(--r-btn);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.form .btn{width:100%}
.formnote{font-size:.8125rem;color:var(--muted);margin-top:var(--s3)}

.dl{margin:0}
.dl div{padding:var(--s4) 0;border-bottom:1px solid var(--hairline);display:flex;gap:var(--s4);flex-wrap:wrap}
.dl dt{font-family:var(--font-display);font-size:1.125rem;font-weight:500;flex:0 0 140px;text-transform:uppercase;letter-spacing:.6px}
.dl dd{margin:0;flex:1 1 220px;color:var(--muted)}
.dl dd a{color:var(--ink);font-weight:500}

/* Prose (long-form pages) */
.prose{max-width:var(--maxw-text)}
.prose h2{margin-top:var(--s7)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.prose p,.prose ul,.prose ol{color:var(--muted)}
.prose strong{color:var(--ink)}

/* Breadcrumbs */
.crumbs{font-size:.8125rem;padding:var(--s3) 0;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--hairline)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li{margin:0;display:flex;gap:8px;align-items:center}
.crumbs li+li::before{content:"/";color:var(--grey-d)}
.crumbs a{color:var(--muted);display:inline-flex;align-items:center;padding:5px 0;min-height:24px}
.crumbs li>span{display:inline-block;padding:5px 0}

/* Callout */
.callout{background:var(--surface);border-left:4px solid var(--yellow);border-radius:0 var(--r-card) var(--r-card) 0;padding:var(--s4) var(--s5);margin:var(--s5) 0}
.callout p{margin-bottom:0;color:var(--ink)}
.pull{
  font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.125rem);line-height:1.2;
  font-weight:500;margin:var(--s6) 0;padding-left:var(--s5);border-left:4px solid var(--yellow);
}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--ink);color:var(--grey-l);font-size:.9375rem;padding:var(--s8) 0 var(--s5)}
.site-footer a{color:var(--grey-l);text-decoration:none}
.site-footer a:hover{color:var(--yellow)}
.foot-grid{display:grid;gap:var(--s6)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.site-footer img.flogo{width:200px;margin-bottom:var(--s4)}
.site-footer h3{color:var(--white);margin-bottom:var(--s4);
  /* Footer column headings are h3 for the document outline; the size here
     is the old h4 size, because their visual rank in the footer is lower
     than an h3 in the page body. */
  font-size:1.25rem;line-height:1.3;text-transform:uppercase;letter-spacing:1px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:4px}
.site-footer li a{display:inline-block;padding:6px 0;min-height:24px}
.site-footer .legal{
  margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid #2A2A2A;
  font-size:.8125rem;color:var(--grey-d);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
}
.site-footer .legal a{color:var(--grey-d)}
.site-footer address{font-style:normal;line-height:1.7}
.site-footer address a{display:inline-flex;align-items:center;padding:4px 0;min-height:24px}
@media(max-width:640px){
  /* Thumb targets on a phone. 24px passes WCAG 2.2 AA; 44 is what a thumb
     actually wants, and in the footer and breadcrumbs there is room for it. */
  .site-footer address a{min-height:44px}
  .crumbs a{min-height:44px;padding:11px 0;margin:-11px 0}
}
.site-footer .legal a{display:inline-block;padding:4px 0;min-height:24px}
.site-footer strong{color:var(--white)}

/* The sticky mobile call bar was removed on 21 Oct 2026 (Jack's decision: no
   bottom call/quote bar). The phone and quote buttons live in the header. */

/* Motion */
/* Reveal-on-scroll is gated on html.js, set by a one line script in the head.
   Without that gate a blocked, failed or slow script leaves whole sections at
   opacity:0 for good: the content is in the HTML, and nobody can read it. With
   it, no-script renders everything at full opacity and the animation is purely
   additive. */
/* Exactly the playbook snippet. html.js is only added when IntersectionObserver
   exists, so with no script (or an old browser) nothing is ever hidden. */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
@media(prefers-reduced-motion:reduce){
  /* Reduced motion means remove movement, not remove feedback. The old rule
     here killed every transition on the page to 0.01ms, which takes hover,
     focus and open/close cues with it: those carry information about what is
     interactive and what just changed. So travel and scroll animation go, and
     colour and opacity state changes stay. */
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .btn:hover,.card--link:hover,.chip:hover{transform:none}
  .btn,.card,.card--link,.chip,.textlink,a{transition-property:color,background-color,border-color,box-shadow,opacity,text-decoration-color}
}

/* ============================================================
   BROWSER SURFACES
   The parts of the page nobody draws still carry the design.
   Left at their defaults, selection, caret, scrollbars, list
   markers and numerals all ship in colours that belong to no
   design system. Themed from the brand palette below.
   ============================================================ */

::selection{background:var(--yellow);color:var(--ink)}
::-moz-selection{background:var(--yellow);color:var(--ink)}
.hero ::selection,.section--dark ::selection{background:var(--yellow);color:var(--ink)}

input,select,textarea{caret-color:var(--ink)}

/* Form controls inherit the brand rather than the OS accent */
input,select,textarea,button{accent-color:var(--yellow)}

/* List markers: brand yellow, not browser black */
.prose ul li::marker,.faq__a ul li::marker{color:var(--yellow)}
.prose ol li::marker{color:var(--muted);font-weight:500}

/* Numerals line up in the tables and spec lists */
.dl,.trust b,.rating__num,.cols,.crumbs{font-variant-numeric:tabular-nums}

/* Scrollbar, restrained. Firefox first, then WebKit. */
html{scrollbar-color:var(--grey-d) var(--surface);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{
  background:var(--grey-d);border-radius:8px;
  border:3px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.section--dark::-webkit-scrollbar-track,.hero::-webkit-scrollbar-track{background:#1a1a1a}

/* Inline links in body copy get a deliberate underline, not the default */
.prose a:not(.btn):not(.textlink),
.faq__a a,
.callout a,
.formnote a,
.dl dd a{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--yellow);
  text-underline-offset:3px;
}
.prose a:not(.btn):not(.textlink):hover,
.faq__a a:hover,.callout a:hover,.formnote a:hover,.dl dd a:hover{
  text-decoration-color:var(--ink);
}

/* Tap highlight on mobile, so the OS blue flash does not appear */
a,button,summary,label{-webkit-tap-highlight-color:rgba(255,210,47,.35)}

/* ============================================================
   FORM STATES
   Every state the form can actually be in, not just the happy one.
   ============================================================ */

.field .req{color:var(--muted);font-weight:400}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid,
.field [aria-invalid="true"]{
  border-color:#B3261E;
  border-width:2px;
  background:#FFF8F7;
}
.field-error{
  display:none;
  margin-top:6px;
  font-size:.8125rem;
  font-weight:500;
  color:#B3261E;
  align-items:center;
  gap:6px;
}
.field-error::before{
  content:"";flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  background:#B3261E;
  /* exclamation, drawn rather than a glyph */
  mask:radial-gradient(circle at 50% 78%,#000 1.4px,transparent 1.5px),
       linear-gradient(#000 0 0) center/2px 6px no-repeat;
  mask-composite:add;
  -webkit-mask:radial-gradient(circle at 50% 78%,#000 1.4px,transparent 1.5px),
       linear-gradient(#000 0 0) center/2px 6px no-repeat;
  -webkit-mask-composite:source-over;
}
.field.is-invalid .field-error{display:flex}

.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--grey-l);
  border-color:var(--grey-l);
  color:var(--muted);
  cursor:not-allowed;
  transform:none;
}
.btn[aria-busy="true"]{cursor:progress}
.btn.btn[aria-busy="true"]::after{
  -webkit-mask:none;mask:none;background:none;
  content:"";width:15px;height:15px;flex:0 0 auto;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .btn[aria-busy="true"]::after{animation-duration:2s}
}

.form-status{
  margin-top:var(--s3);padding:12px 14px;border-radius:var(--r-btn);
  font-size:.875rem;font-weight:500;display:none;
}
.form-status.is-error{display:block;background:#FFF1F0;color:#8C1D18;border:1px solid #F3C4C0}

/* ============================================================
   V2 — the area page redesign, on trial
   ------------------------------------------------------------
   Every rule here is scoped to `body.v2`, which only the Baldivis page carries.
   Nothing else on the site is touched. Promoting the design to another area page
   is adding `variant="v2"` to that suburb; there is no second copy of anything.

   What it changes, and why:
     - the illustration owns the first screen, uncropped, with nothing over it
       but the header
     - the header starts transparent over the image and turns solid on scroll
     - the headline is one centred line under the image rather than a column of
       prose beside it
     - service and suburb links become tiles that lift, and every one navigates
   ============================================================ */

/* Pale yellow, for a tile that is being hovered. Ink on this measures 17.4:1,
   so the label never gets harder to read as it highlights. */
:root{--tile-tint:#FFFAE8;--tile-line:#F0DC8C}

/* ---------- header over the image ------------------------------------------ */
.site-header--overlay{
  background:transparent;border-bottom-color:transparent;
}
.site-header--overlay .brand__light{display:block}
.site-header--overlay .brand__dark{display:none}
.site-header--overlay .nav a{color:#fff}
.site-header--overlay .nav a:hover{color:var(--yellow)}
.site-header--overlay .menu-toggle span,
.site-header--overlay .menu-toggle span::before,
.site-header--overlay .menu-toggle span::after{background:#fff}
/* The scrim, sized by measurement rather than by eye.
   The theory that a blue sky makes a scrim unnecessary does not hold for these
   illustrations. The brightest pixel behind the nav row is sky at rgb(105,180,223),
   which is only 2.28:1 against white text, and the first attempt at a scrim
   faded to nothing across the header itself so the nav sat in the weak part of
   it. This version holds ~45% black all the way through the nav row and does its
   fading BELOW the header, which measures 6.4:1 on that same pixel. */
.site-header--overlay::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-56px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.46) 58%,
    rgba(0,0,0,.30) 78%,
    rgba(0,0,0,0) 100%);
  transition:opacity .28s ease;
}
/* Scrolled past the image: solid white, dark links, scrim gone. */
.site-header--overlay.is-stuck{
  background:var(--white);border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
}
.site-header--overlay.is-stuck::before{opacity:0}
.site-header--overlay.is-stuck .brand__light{display:none}
.site-header--overlay.is-stuck .brand__dark{display:block}
.site-header--overlay.is-stuck .nav a{color:var(--ink)}
.site-header--overlay.is-stuck .menu-toggle span,
.site-header--overlay.is-stuck .menu-toggle span::before,
.site-header--overlay.is-stuck .menu-toggle span::after{background:var(--ink)}
/* No script, no scroll state, so the solid treatment is the resting state and
   the header is legible whatever is behind it. */
html:not(.js) .site-header--overlay{background:var(--white);border-bottom-color:var(--hairline)}
html:not(.js) .site-header--overlay::before{display:none}
html:not(.js) .site-header--overlay .brand__light{display:none}
html:not(.js) .site-header--overlay .nav a{color:var(--ink)}

/* Over the hero the licence line and the phone button go light as well. */
.site-header--overlay:not(.is-stuck) .brand__lic{color:#E8E8E4}
.site-header--overlay:not(.is-stuck) .call-btn{background:transparent;border-color:rgba(255,255,255,.85);color:#fff}
.site-header--overlay:not(.is-stuck) .call-btn:hover{background:#fff;color:var(--ink)}
.site-header--overlay:not(.is-stuck) .menu-toggle{border-color:rgba(255,255,255,.6)}
html:not(.js) .site-header--overlay .brand__lic{color:var(--muted)}
html:not(.js) .site-header--overlay .call-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
/* The drawer is white, so its links stay dark even while the bar is clear. */
.site-header--overlay .drawer a{color:var(--ink)}

/* ---------- the cover ------------------------------------------------------- */
/* The header has to sit ON the image, not above it, or the scrim renders as a
   grey wash over the white page and the full-bleed effect is lost. The header is
   sticky in normal flow, so the cover is pulled up underneath it by exactly the
   header's height and the header's own z-index keeps it on top. */
/* A page that opens on a dark hero or cover is pulled up under the header by
   exactly the header's height, so the header sits on the image. */
.v2 main > .cover:first-child,
.has-overlay main > .hero:first-child{margin-top:calc(-1 * var(--hdr-h))}
.has-overlay main > .hero:first-child .hero__inner{padding-top:calc(var(--hdr-h) + var(--s6))}
.cover{background:var(--ink)}
.cover__art{position:relative;background:var(--ink-sink)}
.cover__art img{
  display:block;height:auto;margin-inline:auto;color:transparent;
  /* Full width, natural height: the whole drawing, never cropped, never
     letterboxed. On a short screen its bottom edge sits just past the fold,
     which is what the scroll control is there to tell you. Capping the width to
     force it inside the fold put black bars down both sides, which read as a
     mistake rather than as an inset. */
  width:100%;
}
.cover__copy{background:var(--surface);text-align:center;padding:var(--s6) 0 var(--s6)}
.cover__copy h1{
  margin:0 auto;max-width:22ch;text-wrap:balance;
  font-size:clamp(2.5rem,6.2vw,4.25rem);line-height:1.02;
}
.cover .eyebrow{color:var(--muted);justify-content:center;display:block;margin-bottom:var(--s2)}
.cover__sub{
  margin:var(--s3) auto 0;max-width:60ch;
  font-size:1.1875rem;line-height:1.6;color:var(--muted);
}
.btn-row--center{justify-content:center}
.v2 .crumbs{background:transparent;border-bottom:0;padding-top:var(--s4);padding-bottom:0}

/* ---------- the scroll control ---------------------------------------------- */
.scrolldown{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:grid;justify-items:center;gap:6px;
  background:none;border:0;cursor:pointer;padding:6px;
}
.scrolldown__label{
  font-family:var(--font-body);font-size:.6875rem;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:#fff;
  /* The label lands on the sandy path, which measures rgb(252,232,177): 1.21:1
     against white. At 78% black the pill clears 10:1 even over pure white, so it
     is safe on any of the 21 illustrations without checking each one. */
  background:rgba(0,0,0,.78);border-radius:999px;padding:4px 11px;
}
.scrolldown__dial{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--yellow);color:var(--ink);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.scrolldown__dial svg{width:20px;height:20px}
.scrolldown:hover .scrolldown__dial{background:var(--yellow-dark)}
@media(prefers-reduced-motion:no-preference){
  .scrolldown__dial{animation:bob 2.4s cubic-bezier(.4,0,.2,1) infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(max-width:560px){
  .scrolldown{bottom:10px}
  .scrolldown__dial{width:34px;height:34px}
}

/* ---------- tiles ----------------------------------------------------------- */
.tiles{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:880px){.tiles--tight{grid-template-columns:repeat(4,1fr)}}
@media(min-width:520px) and (max-width:879px){.tiles--tight{grid-template-columns:repeat(2,1fr)}}

.tile{
  position:relative;display:flex;align-items:center;gap:var(--s3);
  min-height:64px;padding:var(--s3) var(--s4) var(--s3) var(--s4);
  background:var(--white);color:var(--ink);text-decoration:none;
  border:1px solid var(--hairline);border-radius:var(--r-card);
  /* The brand mark on a tile is a left edge in yellow. The craft floor refuses a
     coloured left border over 1px as a default; this one is asked for by name in
     the brief, which is what earns it. */
  border-left:4px solid var(--yellow);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),
             box-shadow .18s cubic-bezier(.2,.7,.3,1),
             background-color .18s ease,border-color .18s ease;
}
.tile__label{font-family:var(--font-display);font-weight:700;font-size:1.1875rem;line-height:1.25}
.tile__blurb{display:block;font-size:.875rem;line-height:1.45;color:var(--muted);margin-top:3px}
.tile > span:first-child{flex:1 1 auto;min-width:0}
.tile__go{
  flex:0 0 auto;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--surface);color:var(--ink);
  transition:background-color .18s ease,transform .18s cubic-bezier(.2,.7,.3,1);
}
.tile__go svg{width:16px;height:16px}
.tile:hover{
  transform:translateY(-4px);
  background:var(--tile-tint);
  border-color:var(--tile-line);border-left-color:var(--yellow);
  box-shadow:0 10px 22px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
}
.tile:hover .tile__go{background:var(--yellow);transform:translateX(3px)}
.tile:active{transform:translateY(-1px)}
.tile:focus-visible{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
  /* The highlight still happens; only the travel goes. */
  .tile,.tile__go{transition-property:background-color,border-color,box-shadow}
  .tile:hover,.tile:active,.tile:focus-visible{transform:none}
  .tile:hover .tile__go{transform:none}
}

/* ---------------------------------------------------------------- area index
   The service area listed by corridor rather than as one 265-item run. The
   headings are what make it scannable, so they get room above them and a
   hairline to separate one part of Perth from the next. */
.area-groups{display:grid;gap:var(--s6)}
.area-group h3{margin:0 0 var(--s3);font-size:1.5rem;letter-spacing:-.01em}
.area-group + .area-group{border-top:1px solid var(--hairline);padding-top:var(--s6)}

/* An area page whose illustration has not arrived yet. The copy is centred so
   the hero reads as composed rather than as a two column layout missing its
   picture, and it matches the centring used everywhere else in the redesign. */
.hero--center .hero__body{max-width:52ch;margin-inline:auto;text-align:center}
.hero--center .btn-row{justify-content:center}
.hero--center::before{
  mask-image:linear-gradient(180deg, transparent 20%, #000 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 20%, #000 100%);
}

/* ============================================================
   Recovered rules
   The stylesheet that came back with the build was an earlier,
   shorter generation of this file, and nine classes the pages
   emit had no rule left behind them: the blog article body and
   its dated meta line, the note under each area group, and the
   suburb finder on /areas-we-service/. Written against the
   tokens above so they inherit every later change to the system.
   ============================================================ */

/* --- prose headings -----------------------------------------
   Every heading on this site is margin:0, so a heading only has
   air under it if a rule puts it there, and .prose h2 had none:
   each one sat flush on the first line of its own paragraph.
   .prose h3 already carried this; h2 was the one that did not. */
.prose h2{margin-bottom:var(--s3)}

/* --- blog article ------------------------------------------ */
.prose--article{font-size:1.0625rem;line-height:1.75}
.prose--article p{margin-bottom:var(--s4)}

.post-meta{
  font-size:.875rem;line-height:1.5;color:var(--muted);
  letter-spacing:.01em;
}
.post-meta--lead{
  margin-bottom:var(--s5);padding-bottom:var(--s3);
  border-bottom:1px solid var(--hairline);
}

/* --- area groups ------------------------------------------- */
.area-group__note{
  color:var(--muted);font-size:.9375rem;line-height:1.6;
  max-width:var(--maxw-text);margin-bottom:var(--s3);
}

/* --- suburb finder -----------------------------------------
   Hidden until the script runs, so the list works without it. */
.suburb-find{margin-bottom:var(--s5);max-width:28rem}
.suburb-find[hidden]{display:none}
.suburb-find label{
  display:block;margin-bottom:var(--s2);
  font-size:.875rem;font-weight:600;color:var(--ink);
}
.suburb-find__row{display:flex;gap:var(--s2);align-items:stretch}
.suburb-find__row input{
  flex:1 1 auto;min-width:0;min-height:48px;padding:12px 14px;
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--grey-d);
  border-radius:var(--r-btn);
}
.suburb-find__row input:focus{
  outline:3px solid var(--ink);outline-offset:1px;border-color:var(--ink);
}
.suburb-find__clear{
  flex:0 0 auto;min-height:48px;padding:0 16px;
  font-family:var(--font-body);font-size:.875rem;font-weight:600;
  color:var(--ink);background:var(--white);cursor:pointer;
  border:1px solid var(--grey-d);border-radius:var(--r-btn);
}
.suburb-find__clear:hover{background:var(--yellow);border-color:var(--ink)}
.suburb-find__clear[hidden]{display:none}
.suburb-find__count{
  margin-top:var(--s2);font-size:.875rem;color:var(--muted);min-height:1.25rem;
}
.suburb-find__none{
  margin-top:var(--s3);font-size:.9375rem;color:var(--muted);
}

/* ---------------------------------------------------------------------------
   What it costs and when (/what-it-costs/). Figures come from
   _build/data/running_costs.csv; this only lays them out.
   --------------------------------------------------------------------------- */
.wic{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start}
.wic-pick{min-width:0}
@media(min-width:960px){
  .wic{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .wic-out{position:sticky;top:100px}
}
.wic-live{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);margin:0 0 var(--s3);padding:10px 12px;background:var(--white);border:1px solid var(--grey-l);border-radius:var(--r-card)}
.wic-live__text{flex:1 1 auto;min-width:0;margin:0;font-size:.9375rem;line-height:1.35;color:var(--muted)}
.wic-live b{color:var(--ink);font-size:1.125rem}
/* On a phone the running total stays at the top of the screen, under the
   header, while the list scrolls past (Nathan, 22 Oct 2026). */
@media(max-width:959px){.wic-live{position:sticky;top:calc(var(--hdr-h-stuck) + 8px);z-index:20;box-shadow:var(--shadow-1)}}
.wic-clear{flex:0 0 auto;font:inherit;font-weight:600;font-size:.875rem;min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:var(--r-btn);background:var(--white);color:var(--ink);cursor:pointer}
.wic-clear:hover{background:var(--surface-2)}
.wic-clear:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wic-rule{margin:0 0 var(--s3);font-size:.875rem;line-height:1.5;color:var(--muted)}
.wic-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.wic-item{display:grid;gap:var(--s3);padding:var(--s3);background:var(--white);border:1px solid var(--grey-l);border-radius:var(--r-card)}
@media(min-width:600px){.wic-item{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start}}
.wic-item.is-off{background:var(--surface);border-color:var(--hairline)}
.wic-item.is-off .wic-tick label{color:var(--muted)}
.wic-tick{display:flex;gap:12px;align-items:flex-start}
.wic-tick input{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.wic-tick label{font-weight:600;line-height:1.35;cursor:pointer}
/* The drawing on each row (tool_art.csv). Fixed size so nothing moves when it loads. */
.wic-art{flex:0 0 auto;width:56px;height:56px;border-radius:8px;border:1px solid var(--hairline);background:#fff;object-fit:contain}
.wic-item.is-off .wic-art{opacity:.55}
.wic-kwh{display:block;font-weight:400;font-size:.875rem;color:var(--muted)}
.wic-opts{display:grid;gap:10px;min-width:0}
.wic-field label{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:4px}
.wic-field select,.wic-field input{width:100%;font:inherit;font-size:.9375rem;padding:8px 10px;border:1px solid var(--grey-d);border-radius:var(--r-btn);background:var(--white);color:var(--ink)}
.wic-field select:focus,.wic-field input:focus,.wic-tick input:focus-visible,.wic-chk input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wic-fixed{margin:0;font-size:.875rem;color:var(--muted)}
.wic-seasons{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.wic-seasons legend{padding:0;margin-bottom:4px;font-size:.8125rem;color:var(--muted);width:100%}
.wic-chk{display:inline-flex;gap:8px;align-items:center;font-size:.9375rem;cursor:pointer}
.wic-chk input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.wic-wins{border:0;margin:0;padding:0;display:grid;gap:8px}
.wic-wins legend{padding:0;margin-bottom:4px;font-size:.8125rem;color:var(--muted)}
.wic-win{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px}
.wic-hrs{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--muted)}
.wic-hrs input{width:68px;font:inherit;font-size:.9375rem;padding:6px 8px;border:1px solid var(--grey-d);border-radius:var(--r-btn);background:var(--white);color:var(--ink)}
.wic-hrs input:disabled{opacity:.45;background:var(--surface)}
.wic-hrs input:focus{outline:3px solid var(--ink);outline-offset:2px}
.wic-out{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s4)}
.wic-out h3{font-size:1.125rem;line-height:1.3;margin:var(--s5) 0 var(--s2)}
.wic-out h3:first-child{margin-top:0}
.wic-total{font-family:var(--font-display);font-weight:800;font-size:2.5rem;line-height:1.1;margin:0}
.wic-sub{margin:4px 0 0;color:var(--muted);font-size:.9375rem}
.wic-bar{display:flex;height:28px;border-radius:var(--r-btn);overflow:hidden;background:var(--surface-2);border:1px solid var(--grey-l)}
.wic-seg{display:block;height:100%;width:0;transition:width .25s ease}
.wic-seg--day,.wic-key--day{background:var(--yellow)}
.wic-seg--eve,.wic-key--eve{background:var(--ink)}
.wic-seg--night,.wic-key--night{background:var(--grey-d)}
.wic-parts{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
.wic-part{display:grid;grid-template-columns:14px minmax(0,1fr);gap:2px 10px;font-size:.9375rem;line-height:1.45}
.wic-key{width:14px;height:14px;border-radius:3px;margin-top:4px;border:1px solid var(--grey-d)}
.wic-line{grid-column:2;color:var(--muted)}
.wic-rank{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wic-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:.9375rem;line-height:1.35}
.wic-row__cost{font-weight:700;text-align:right;white-space:nowrap}
.wic-row__track{grid-column:1 / -1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.wic-row__fill{display:block;height:100%;background:var(--ink)}
.wic-empty{color:var(--muted);font-size:.9375rem;margin:0}
.wic-note{font-size:.875rem;color:var(--muted);margin:var(--s4) 0 0}
.wic-next{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hairline)}
.wic-next p{margin:0 0 var(--s3);font-size:.9375rem;color:var(--muted)}
.wic-next .btn{white-space:normal;text-align:center;max-width:100%}
.wic-how{margin-inline:auto}
@media(prefers-reduced-motion:reduce){.wic-seg{transition:none}}

/* ---------------------------------------------------------------------------
   Solar and battery package explorer (/solar-and-battery-packages/).
   Wording comes from _build/data/package_explorer.csv; this only lays it out.
   Diagram colours (Nathan's feedback, 22 Oct 2026): brand yellow for the sun
   and panels, plus a green for the battery, a blue for the grid and a warm
   orange for the home, so each part reads at a glance. They are used only in
   this diagram, and only as tints and lines, never as text.
   --------------------------------------------------------------------------- */
.pkx{--pkx-sun:#FFD22F;--pkx-sun-line:#E5B800;--pkx-batt:#1E8A4C;--pkx-batt-tint:#E3F4EA;
  --pkx-grid:#2563A8;--pkx-grid-tint:#E3EDF9;--pkx-home:#C2571A;--pkx-home-tint:#FCEBDD;
  display:grid;gap:var(--s5);align-items:start}
.pkx-controls,.pkx-timebox,.pkx-stage,.pkx-side{min-width:0}
/* Phones: package, then the time slider straight above the diagram so the
   diagram stays in view while the slider moves, then the words. */
@media(min-width:960px){
  .pkx{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"controls time" "controls side" "stage side"}
  .pkx-controls{grid-area:controls}
  .pkx-timebox{grid-area:time}
  .pkx-stage{grid-area:stage}
  .pkx-side{grid-area:side}
}
.pkx-label{display:block;font-size:.875rem;font-weight:600;color:var(--muted);margin:0 0 var(--s2)}
.pkx-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.pkx-choice{font:inherit;font-weight:600;font-size:.9375rem;line-height:1.3;text-align:left;padding:12px 14px;min-height:52px;border:1px solid var(--grey-d);border-radius:var(--r-btn);background:var(--white);color:var(--ink);cursor:pointer}
.pkx-choice[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pkx-choice--badge{border:2px solid var(--yellow-dark)}
.pkx-badge{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:.75rem;font-weight:600;color:var(--accent-ink)}
.pkx-choice[aria-pressed="true"] .pkx-badge{color:var(--yellow)}
.pkx-bolt{display:inline-block;flex:0 0 auto;width:16px;height:16px;fill:currentColor}
.pkx-choice:focus-visible,.pkx-blackout:focus-visible,.pkx-callout__btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pkx-pkgtext{margin:var(--s3) 0 0;color:var(--muted);font-size:.9375rem;line-height:1.5}
.pkx-callout{display:flex;gap:12px;align-items:flex-start;margin-top:var(--s3);padding:var(--s3);background:#FFF8DB;border:1px solid var(--yellow-dark);border-left:6px solid var(--yellow);border-radius:var(--r-card)}
.pkx-callout>.pkx-bolt{width:26px;height:26px;margin-top:2px;fill:var(--ink)}
.pkx-callout__h{margin:0 0 4px;font-family:var(--font-display);font-weight:800;font-size:1.0625rem;line-height:1.3}
.pkx-callout p{margin:0;font-size:.9375rem;line-height:1.5}
.pkx-callout__btn{margin-top:10px;font:inherit;font-weight:600;font-size:.9375rem;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:var(--r-btn);background:var(--ink);color:var(--white);cursor:pointer}
.pkx-callout__btn:hover{background:var(--ink-raise)}
.pkx-stage{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s3)}
.pkx-flag{display:flex;align-items:center;gap:6px;width:fit-content;margin:0 auto var(--s2);padding:6px 14px;background:var(--ink);color:var(--yellow);font-weight:700;font-size:.875rem;border-radius:999px}
.pkx-flag[hidden]{display:none}
.pkx-diagram{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.pkx-sky{fill:var(--surface-2);transition:fill .3s ease}
.pkx-diagram[data-period="morning"] .pkx-sky{fill:#FFF4CC}
.pkx-diagram[data-period="midday"] .pkx-sky{fill:#FFE98F}
.pkx-diagram[data-period="late_afternoon"] .pkx-sky{fill:#FFEFC2}
.pkx-diagram[data-period="evening"] .pkx-sky{fill:var(--grey-l)}
.pkx-diagram[data-period="overnight"] .pkx-sky{fill:#2A2A2A}
.pkx-diagram[data-period="blackout"] .pkx-sky{fill:var(--ink)}
.pkx-orb{fill:var(--yellow);stroke:var(--yellow-dark);stroke-width:2;transition:fill .3s ease}
.pkx-diagram[data-period="evening"] .pkx-orb{fill:var(--grey-d);stroke:var(--grey-d)}
.pkx-diagram[data-period="overnight"] .pkx-orb,.pkx-diagram[data-period="blackout"] .pkx-orb{fill:var(--grey-l);stroke:var(--grey-l)}
.pkx-clock-svg{font-family:var(--font-display);font-weight:800;font-size:22px;fill:var(--ink)}
.pkx-diagram[data-period="overnight"] .pkx-clock-svg,.pkx-diagram[data-period="blackout"] .pkx-clock-svg{fill:var(--white)}
.pkx-wire{fill:none;stroke:var(--grey-l);stroke-width:3}
.pkx-flow{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:10 8;opacity:0;transition:opacity .2s ease}
.pkx-flow.is-active{opacity:1;animation:pkx-dash 1s linear infinite}
@keyframes pkx-dash{to{stroke-dashoffset:-18}}
.pkx-flow--solar{stroke:var(--pkx-sun-line)}
.pkx-flow--battery{stroke:var(--pkx-batt)}
.pkx-flow--grid{stroke:var(--pkx-grid)}
.pkx-ah--solar{fill:var(--pkx-sun-line)}
.pkx-ah--battery{fill:var(--pkx-batt)}
.pkx-ah--grid{fill:var(--pkx-grid)}
.pkx-box{fill:var(--white);stroke:var(--grey-l);stroke-width:2;stroke-dasharray:6 5;transition:fill .3s ease}
.pkx-pic{fill:#fff;stroke:var(--hairline);stroke-width:1}
.pkx-node:not(.is-on) .pkx-art{opacity:.4}
.pkx-name{font-family:var(--font-body);font-size:15px;fill:var(--muted);text-anchor:middle;dominant-baseline:middle}
.pkx-node.is-on .pkx-box{stroke:var(--ink);stroke-dasharray:none}
.pkx-node.is-on .pkx-name{fill:var(--ink);font-weight:600}
.pkx-node.is-on[data-part="panels"] .pkx-box{fill:var(--pkx-sun)}
.pkx-node.is-on.is-idle[data-part="panels"] .pkx-box{fill:#FFF3C4}
.pkx-node.is-on[data-part="battery"] .pkx-box{fill:var(--pkx-batt-tint);stroke:var(--pkx-batt)}
.pkx-node.is-on[data-part="grid"] .pkx-box{fill:var(--pkx-grid-tint);stroke:var(--pkx-grid)}
.pkx-node.is-on[data-part="house"] .pkx-box{fill:var(--pkx-home-tint);stroke:var(--pkx-home)}
@media(max-width:599px){.pkx-stage{padding:var(--s2)}.pkx-name{font-size:17px}}
.pkx-down{display:none;font-family:var(--font-body);fill:var(--error);font-size:13px;font-weight:600;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:var(--surface);stroke-width:5px}
.pkx-node.is-down .pkx-box{stroke:var(--error);stroke-dasharray:6 5;fill:var(--error-tint)}
.pkx-node.is-down .pkx-down{display:inline}
.pkx-legend{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.8125rem;color:var(--muted)}
.pkx-key{display:inline-block;width:20px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle}
.pkx-key--solar{background:var(--pkx-sun-line)}
.pkx-key--battery{background:var(--pkx-batt)}
.pkx-key--grid{background:var(--pkx-grid)}
.pkx-time{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 var(--s1)}
.pkx-clock{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1.1}
.pkx-period{color:var(--muted);font-size:.9375rem}
.pkx-slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.pkx-slider::-webkit-slider-runnable-track{height:14px;border-radius:7px;border:1px solid var(--grey-d);background:linear-gradient(to right,#2A2A2A 0%,#2A2A2A 22%,#FFE98F 30%,var(--yellow) 39%,var(--yellow) 65%,var(--yellow-dark) 72%,var(--grey-d) 82%,#2A2A2A 91%,#2A2A2A 100%)}
.pkx-slider::-moz-range-track{height:14px;border-radius:7px;border:1px solid var(--grey-d);background:linear-gradient(to right,#2A2A2A 0%,#2A2A2A 22%,#FFE98F 30%,var(--yellow) 39%,var(--yellow) 65%,var(--yellow-dark) 72%,var(--grey-d) 82%,#2A2A2A 91%,#2A2A2A 100%)}
.pkx-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-10px;border-radius:50%;background:var(--white);border:3px solid var(--ink);box-shadow:var(--shadow-1)}
.pkx-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--white);border:3px solid var(--ink)}
.pkx-slider:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.pkx-ticks{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
.pkx-blackout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:var(--s3);font:inherit;font-weight:700;font-size:1rem;min-height:52px;padding:10px 16px;border:2px solid var(--ink);border-radius:var(--r-btn);background:var(--white);color:var(--ink);cursor:pointer}
.pkx-blackout .pkx-bolt{width:20px;height:20px;fill:var(--ink)}
.pkx-blackout[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.pkx-blackout[aria-pressed="true"] .pkx-bolt{fill:var(--yellow)}
.pkx-bohint{margin:6px 0 0;font-size:.8125rem;color:var(--muted)}
.pkx-blackout[aria-pressed="false"]+.pkx-bohint{visibility:hidden}
.pkx-side h3{font-size:1.125rem;line-height:1.3;margin:var(--s4) 0 var(--s2)}
.pkx-side h3:first-child{margin-top:0}
.pkx-flowtext{margin:0;font-size:1.0625rem;line-height:1.5;min-height:4.5em}
.pkx-parts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pkx-parts li{font-size:.9375rem;line-height:1.45;color:var(--muted)}
.pkx-parts b{display:block;color:var(--ink)}
.pkx-job{max-width:var(--maxw-text);margin-inline:auto}
@media(prefers-reduced-motion:reduce){.pkx-flow.is-active{animation:none}.pkx-flow,.pkx-sky,.pkx-orb,.pkx-box{transition:none}}

/* ---------------------------------------------------------------------------
   Export reality check (/export-check/). Wording, rules and rates come from
   _build/data/export_check.csv; this only lays them out.
   --------------------------------------------------------------------------- */
.exc{display:grid;gap:var(--s5);align-items:start}
.exc-form,.exc-result{min-width:0}
@media(min-width:960px){.exc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.exc-result{position:sticky;top:100px}}
.exc-example{margin:0 0 var(--s4);padding:var(--s3);background:var(--surface);border-left:4px solid var(--yellow);border-radius:0 var(--r-card) var(--r-card) 0;font-size:.9375rem}
.exc-q{border:0;margin:0 0 var(--s4);padding:0}
.exc-q--art{position:relative;padding-right:72px;min-height:56px}
.exc-q--art>.exc-art{position:absolute;top:0;right:0}
.exc-art{display:block;width:56px;height:56px;border-radius:8px;border:1px solid var(--hairline);background:#fff;object-fit:contain}
.exc-art-row{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3)}
.exc-art-arrow{position:relative;width:22px;height:2px;background:var(--grey-d)}
.exc-art-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--grey-d);border-right:0}
.exc-q legend{font-family:var(--font-display);font-weight:700;font-size:1.125rem;line-height:1.3;padding:0;margin-bottom:4px}
.exc-hint{margin:0 0 var(--s2);font-size:.875rem;color:var(--muted)}
.exc-opts{display:grid;gap:var(--s2)}
@media(min-width:600px){.exc-opts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.exc-opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;min-height:48px;border:1px solid var(--grey-d);border-radius:var(--r-btn);background:var(--white);font-size:.9375rem;line-height:1.35;cursor:pointer}
.exc-opt input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.exc-opt:has(input:checked){border-color:var(--ink);background:var(--surface)}
.exc-opt input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.exc-help{margin:var(--s2) 0 0;font-size:.875rem;line-height:1.5;padding:10px 12px;background:var(--surface);border-radius:var(--r-btn)}
.exc-result{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s4)}
.exc-result h3{font-size:1.125rem;line-height:1.3;margin:0 0 var(--s2);color:var(--muted)}
.exc-result h4{font-size:1rem;line-height:1.3;margin:var(--s4) 0 4px}
.exc-result p{margin:0;font-size:.9375rem;line-height:1.55}
.exc-head{font-family:var(--font-display);font-weight:800;font-size:1.75rem!important;line-height:1.15!important;margin-bottom:var(--s2)!important}
.exc-pos{color:var(--ink)}
.exc-rates{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.exc-rate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:end;padding-left:12px;border-left:4px solid transparent}
.exc-rate.is-active{border-left-color:var(--yellow)}
.exc-rate__label{font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.3}
.exc-rate__label small{display:block;font-weight:400;font-size:.8125rem;color:var(--muted)}
.exc-rate__val{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1}
.exc-rate__track{grid-column:1 / -1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.exc-rate__fill{display:block;height:100%;background:var(--grey-d)}
.exc-rate.is-active .exc-rate__fill{background:var(--ink)}
.exc-links .btn{white-space:normal;text-align:center;height:auto;min-height:48px;padding-top:10px;padding-bottom:10px;line-height:1.3}
.exc-summary{max-width:var(--maxw-text);margin:var(--s5) auto 0;text-align:center;font-size:1.125rem;line-height:1.55}
.exc-note{max-width:var(--maxw-text);margin:var(--s3) auto 0;text-align:center;font-size:.875rem;color:var(--muted)}
.exc-sources{max-width:var(--maxw-text);margin:var(--s6) auto 0;text-align:center}
.exc-sources h3{font-size:1.125rem;margin-bottom:var(--s2)}
.exc-sources ul{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:6px;font-size:.9375rem}
.exc-sources p{font-size:.875rem;color:var(--muted);margin:0}

/* ---------------------------------------------------------------------------
   Legal pages (/privacy-policy/, /terms-of-use/, /warranty/, /terms-of-trade/),
   rendered from the lawyers' text by content_legal.py. Lettered sub-clauses sit
   one step in, roman numeral sub-clauses two, so the numbering reads.
   Also the estimate disclaimer on tools and the consent line under forms.
   ------------------------------------------------------------------------- */
.legal-doc p{margin-bottom:var(--s3)}
.legal-doc p.legal-l1{padding-left:1.75em}
.legal-doc p.legal-l2{padding-left:3.5em}
.legal-doc h3{font-size:1.125rem}
.legal-doc h4{font-size:1rem;margin-top:var(--s4);margin-bottom:var(--s2)}
.legal-table{width:100%;border-collapse:collapse;margin:var(--s4) 0}
.legal-table td{padding:.375em .75em .375em 0;vertical-align:top;color:var(--muted);overflow-wrap:break-word}
@media (max-width:640px){.legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:auto}.legal-table td:empty{display:none}}
.tool-disclaimer{max-width:var(--maxw-text)}
.form-consent{margin-top:var(--s2)}

/* ============================================================
   Synergy usage calculator (/synergy-usage-calculator/).
   Built by _build/content_interval.py; script assets/js/interval-calc.js.
   The calculator's own colours are tokens on .ic, taken from the site's.
   ============================================================ */
.ic,.ic-steps,.ic-guide-notes{
  --ic-ink:var(--ink); --ic-muted:var(--muted); --ic-line:var(--hairline); --ic-surface:var(--white);
  --ic-soft:var(--surface); --ic-accent:var(--yellow); --ic-accent-deep:#B58F00; --ic-batt:#E08A00;
  --ic-sent:#A35C00; --ic-use:var(--error); --ic-good:#1F7A3A;
  --ic-band1:#FFF4C7; --ic-band2:#F3F3EF; --ic-band3:#E6E7E8;
}
.ic-steps{list-style:none;margin:0 auto;padding:0;display:grid;gap:var(--s4);max-width:900px;counter-reset:icstep}
.ic-step{counter-increment:icstep;display:grid;gap:var(--s2);background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s4);min-width:0}
.ic-step h3{margin:0;font-size:1.15rem;display:flex;gap:var(--s2);align-items:baseline}
.ic-step h3::before{content:counter(icstep);display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:.85em;font-weight:700}
.ic-step p{margin:0}
.ic-shot{width:auto;max-width:100%;height:auto;border:1px solid var(--hairline);border-radius:6px;margin-top:var(--s2)}
.ic-guide-notes{margin-top:var(--s5)}
.ic-form{display:grid;gap:var(--s4);max-width:900px;margin:0 auto;text-align:left}
.ic-drop{border:2px dashed var(--grey-l);border-radius:var(--r-card);padding:var(--s4);display:grid;gap:var(--s2);background:var(--white);min-width:0}
.ic-drop.is-over{border-color:var(--ic-accent-deep);background:var(--ic-band1)}
.ic-label{margin:0;font-weight:600}
.ic-small{font-size:.92rem;color:var(--muted);margin:0}
.ic-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:end}
.ic-row--2>*{flex:1 1 220px}
.ic-pick{cursor:pointer}
.ic-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ic-file:focus-visible+span{outline:3px solid var(--ic-accent-deep)}
.ic-btn{white-space:normal}
.ic-files{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ic-files li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.95rem;min-width:0}
.ic-fname{min-width:0;overflow-wrap:anywhere}
.ic-pill{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--hairline);white-space:nowrap}
.ic-pill--ok{border-color:var(--ic-good);color:var(--ic-good)}
.ic-pill--bad{border-color:var(--error);color:var(--error)}
.ic-pill--tag{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.ic-err{color:var(--error)}
.ic-muted{color:var(--muted)}
.ic-example{margin:0;background:var(--ic-band1);border:1px solid var(--ic-accent-deep);border-radius:var(--r-card);padding:12px 16px}
.ic-qs{display:grid;gap:var(--s3)}
.ic-q{border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s3);margin:0;display:grid;gap:var(--s2);background:var(--white);min-width:0}
.ic-q legend{font-weight:600;padding:0 6px}
.ic-opt,.ic-check{display:flex;gap:10px;align-items:center;cursor:pointer;min-height:32px}
.ic-opt input,.ic-check input{width:20px;height:20px;accent-color:var(--ink);flex:0 0 auto}
.ic-solar-more{display:grid;gap:var(--s3)}
.ic-solar-more[hidden]{display:none}
.ic-field{display:grid;gap:4px;min-width:0}
.ic-field>span{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ic-field select,.ic-field input{font:inherit;font-size:1rem;padding:10px 12px;border:1px solid var(--grey-d);border-radius:var(--r-btn);background:var(--white);color:var(--ink);width:100%;min-width:0}
.ic select:focus-visible,.ic input:focus-visible{outline:3px solid var(--ic-accent-deep);outline-offset:2px}
.ic-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic-note{border-left:3px solid var(--yellow);padding:4px 0 4px 12px;color:var(--muted);margin:0}
.ic-note[hidden]{display:none}
.ic-out{display:grid;gap:var(--s3);max-width:1000px;margin:0 auto;text-align:left;min-width:0}
.ic-working{color:var(--muted);font-style:italic}
.ic-dates{margin:0;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.ic-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.ic-stat{background:var(--white);padding:14px 16px;display:grid;gap:2px;min-width:0}
.ic-stat b{font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums}
.ic-stat span{font-size:.85rem;color:var(--muted)}
.ic-block{display:grid;gap:var(--s2);min-width:0;max-width:1000px;margin:var(--s4) auto 0;text-align:left}
.ic-block h3{margin:0}
.ic-verdict{margin:0;font-weight:600;font-size:1.1rem}
.ic-inline{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0}
.ic-chart{min-width:0}
.ic-chart svg{width:100%;height:auto;display:block}
.ic-chart text{fill:var(--muted);font-family:var(--font-body);font-size:11px}
.ic-chart text.ic-val{fill:var(--ink);font-weight:600}
.ic-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--muted)}
.ic-sw{display:inline-block;width:12px;height:10px;margin-right:6px;vertical-align:middle;border:1px solid var(--hairline)}
.ic-sw--grid{background:var(--ic-ink)}
.ic-sw--solar{background:var(--ic-accent)}
.ic-sw--batt{background:var(--ic-batt)}
.ic-sw--sent{background:transparent;border:2px dashed var(--ic-sent)}
.ic-sw--use{background:transparent;border:0;border-top:2px solid var(--ic-use);height:2px}
.ic-tipwrap{position:relative}
.ic-tipwrap svg{touch-action:pan-x pan-y;cursor:crosshair}
.ic-tip{position:absolute;z-index:5;background:var(--white);color:var(--ink);border:1px solid var(--hairline);border-radius:6px;padding:8px 10px;font-size:.85rem;line-height:1.45;box-shadow:var(--shadow-2);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.ic-tip[hidden]{display:none}
.ic-tbl{overflow-x:auto;min-width:0}
.ic-table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:.95rem}
.ic-table th,.ic-table td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:top}
.ic-table th[scope="row"],.ic-table thead th:first-child{text-align:left;font-weight:500;color:var(--muted)}
.ic-table thead th{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ic-table--rates th,.ic-table--rates td{text-align:left}
.ic-cards{max-width:1000px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ic-card{border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s3);margin:0;display:grid;gap:var(--s2);background:var(--white);min-width:0}
.ic-card legend{font-weight:700;padding:0 6px}
.ic-card.is-off .ic-field{opacity:.5}
.ic-notes{margin:0;padding-left:1.2em;display:grid;gap:6px;color:var(--muted)}
.ic-email{max-width:720px}
.ic-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ic-privacy a{color:inherit}
.ic-msg{margin:0;min-height:1.5em}
.ic-ok{color:var(--ic-good)}
.ic-sources{max-width:900px;margin:var(--s5) auto 0;text-align:left}
.ic-sources ul{padding-left:1.2em}
@media (max-width:640px){
  .ic-chart{overflow-x:auto}
  .ic-chart svg{min-width:600px}
  .ic-chart text{font-size:13px}
  .ic-table th,.ic-table td{padding:8px 5px;font-size:.88rem}
  .ic-step{padding:var(--s3)}
}

/* ============================================================
   PLAYBOOK LAYER (21 October 2026)
   The SolArk website playbook applied to the shared parts and the home page:
   video hero with the accent clause and the proof strip under the headline,
   the quote form card overlapping the hero, edge-to-edge service photo tiles,
   "signs you need this", the stat band in the one still-background window,
   recent jobs, the dark closing band, and the staging-only placeholder and
   draft markers. Section wording centred (Jack's rule); long text and forms
   left-aligned inside.
   ============================================================ */

/* ---------- hero: video, accent clause, proof under the headline ---------- */
.hero--video{min-height:min(88vh,860px);display:flex;align-items:center}
.hero--video .hero__inner{width:100%;padding-bottom:calc(var(--s6) + 104px)}
.hero--video .hero__media img{opacity:.62}
.hero--video .hero__media::after{
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.50) 38%,rgba(0,0,0,.66) 72%,rgba(0,0,0,.86) 100%);
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hero__video.is-playing{opacity:.62}
.hero--video .hero__body{max-width:none;text-align:center;margin-inline:auto}
.hero--video h1{max-width:17ch;margin-inline:auto;text-wrap:balance}
.hero--video .hero__sub{margin-inline:auto;max-width:58ch;font-size:clamp(1.0625rem,1.6vw,1.25rem)}
/* The one accent clause on the page: the last words of the hero headline in
   brand yellow, which measures 14.5:1 on the dark hero. */
.hero .accent{color:var(--yellow)}
.hero-proof{
  list-style:none;margin:var(--s5) auto 0;padding:var(--s4) 0 0;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5);max-width:60rem;
}
.hero-proof li{margin:0;display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:500;color:#F2F2EE}
.hero-proof .ico{width:18px;height:18px;color:var(--yellow)}
@media(max-width:640px){
  .hero--video{min-height:0}
  .hero-proof{display:grid;grid-template-columns:1fr;justify-items:start;max-width:22rem;gap:10px;text-align:left}
}

/* ---------- the proof strip (other pages), static, wraps on a phone ---------- */
.trust ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s6);padding:var(--s4) 0}
@media(min-width:760px){.trust ul{display:flex}}
.trust li{align-items:center;gap:10px;font-size:.9375rem;font-weight:500}
.trust .ico{width:20px;height:20px;color:var(--accent-ink)}
.trust li span{display:inline;font-size:inherit;color:var(--ink);margin:0}

/* ---------- the quote form card, overlapping the hero bottom ---------- */
.formcard{position:relative;z-index:2;margin-top:-104px;padding-bottom:var(--s2)}
.formcard__card{
  background:var(--white);border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 48px rgba(0,0,0,.14);
  padding:var(--s5);max-width:72rem;margin-inline:auto;text-align:left;
}
.formcard__card--inline{box-shadow:var(--shadow-2)}
.qform__head{text-align:center;margin-bottom:var(--s4)}
.qform__head h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.qform__head .label{margin-bottom:var(--s2)}
.qform{background:none;border:0;padding:0;border-radius:0}
.qform__grid{display:grid;gap:0 var(--s3);grid-template-columns:1fr}
@media(min-width:700px){
  .qform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qform .field--email,.qform .field--wide,.qform .field--submit{grid-column:1 / -1}
}
@media(min-width:1040px){
  .qform__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .qform .field{grid-column:span 2}
  .qform .field--wide,.qform .field--service{grid-column:span 3}
  .qform .field--file{grid-column:1 / span 3}
  .qform .field--submit{grid-column:4 / span 3}
}
.qform .field--submit{display:flex;align-items:flex-end}
.qform .field--submit .btn{width:100%;min-height:52px;font-size:17px}
.qform .field--file input{min-height:48px;padding:10px;background:var(--surface)}
.qform .formnote,.qform .form-consent{text-align:center}
.form__h{margin-bottom:var(--s4);font-size:1.5rem}
@media(max-width:640px){
  .formcard{margin-top:-64px}
  .formcard__card{padding:var(--s4) var(--s3)}
}

/* ---------- service tiles: full-bleed photos with a label bar ---------- */
.section--flush{padding-bottom:0}
.ptiles{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:var(--s6);background:var(--ink)}
@media(min-width:900px){.ptiles{grid-template-columns:repeat(3,1fr)}}
.ptile{position:relative;display:block;aspect-ratio:1 / 1;overflow:hidden;background:var(--ink-raise);
  color:#fff;text-decoration:none}
@media(min-width:900px){.ptile{aspect-ratio:4 / 3}}
.ptile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.ptile:hover img{transform:scale(1.04)}
.ptile__bar{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:14px 18px;background:rgba(0,0,0,.78);
  font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.2;
}
.ptile__bar svg{width:20px;height:20px;color:var(--yellow);transition:transform .2s ease}
.ptile:hover .ptile__bar svg{transform:translateX(4px)}
.ptile--plain{display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(120% 90% at 85% 10%,rgba(255,210,47,.14) 0%,rgba(255,210,47,0) 60%),linear-gradient(160deg,#1A1A1C 0%,#000 70%)}
.ptile__ico{display:block;margin-bottom:56px}
.ptile__ico svg{width:56px;height:56px;color:var(--yellow);opacity:.85}
.ptile .ph-badge{position:absolute;top:12px;left:12px;right:12px}
@media(max-width:520px){.ptile__bar{padding:10px 12px}.ptile__ico svg{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.ptile img,.ptile__bar svg{transition:none}.ptile:hover img{transform:none}}

/* ---------- signs you need this ---------- */
.signs{list-style:none;margin:0 auto;padding:0;display:grid;gap:var(--s3);max-width:64rem;text-align:left}
@media(min-width:760px){.signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s5)}}
.signs li{margin:0;display:flex;gap:14px;align-items:flex-start;padding:var(--s3) 0;border-top:1px solid var(--hairline)}
.section--dark .signs li{border-top-color:var(--ink-line)}
.signs .ico{width:22px;height:22px;margin-top:3px;color:var(--accent-ink);flex:0 0 auto}
.section--dark .signs .ico{color:var(--yellow)}
.signs p{margin:0;color:var(--muted)}
.signs b{color:var(--ink);font-weight:600}
.section--dark .signs p{color:var(--grey-l)}
.section--dark .signs b{color:var(--white)}
.section--dark .btn--ghost{color:var(--white);border-color:var(--white)}

/* ---------- how it works: five steps ending on the warranty ---------- */
@media(min-width:900px){.steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.steps{text-align:left}
.steps a{text-decoration-color:var(--yellow);text-decoration-thickness:2px;display:inline-block;padding:2px 0;min-height:24px}

/* ---------- stat band: the page's one still-background window ---------- */
.window{background:var(--img) center/cover fixed}
@media (hover:none),(pointer:coarse){.window{background-attachment:scroll}}
.stat-band{position:relative;isolation:isolate}
.stat-band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.80)}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s6) var(--s8);text-align:center}
.stat{display:grid;gap:var(--s2);max-width:22rem}
.stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,7vw,5rem);line-height:1;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
.stat b small{font-size:.4em;font-weight:700;letter-spacing:0}
.stat span{color:var(--on-ink);font-size:1rem}
.stat--ph b{color:var(--grey-d)}

/* ---------- recent jobs ---------- */
.jobs{display:grid;gap:var(--s4);grid-template-columns:1fr;text-align:left}
@media(min-width:760px){.jobs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.job img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--r-card);background:var(--surface-2)}
.job figcaption{font-size:.9375rem;line-height:1.5;color:var(--muted);margin-top:var(--s2)}
.job figcaption b{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.125rem;margin-bottom:2px}

/* ---------- reviews: quoted as written, no stars ---------- */
.rev blockquote{font-size:1rem}
.section--dark .rev{background:var(--ink-raise);border-color:var(--ink-line);color:var(--white)}
.section--dark .rev cite{border-top-color:var(--ink-line)}
.section--dark .rev cite span{color:var(--grey-l)}
.grid.reveal,.jobs,.faq{text-align:left}

/* ---------- FAQ on a dark band ---------- */
.section--dark .faq details{border-bottom-color:var(--ink-line)}
.section--dark .faq summary::after{border-color:var(--white)}
.section--dark .faq .faq__a{color:var(--grey-l)}

/* ---------- closing band ---------- */
.cta-band{padding:var(--sec-y) 0}
.cta-band .wrap{padding-top:0;padding-bottom:0}
.cta-band.section--dark{background:var(--ink-band);color:var(--white);border-top:1px solid var(--ink-line)}
.cta-band.section--dark p{color:var(--on-ink)}
.cta-band.section--dark .btn--ghost{color:var(--white);border-color:var(--white)}
.cta-band.section--dark .btn--ghost:hover{background:var(--white);color:var(--ink)}
.cta-band--light{background:var(--surface);color:var(--ink)}
.cta-band--light .btn--ghost{color:var(--ink);border-color:var(--ink)}
.cta-band--light .btn--ghost:hover{background:var(--ink);color:var(--white)}
.cta-band .label{margin-bottom:var(--s3)}

/* ---------- thank-you ---------- */
.prose--center{margin-inline:auto}
.sent{font-size:1.25rem;color:var(--ink)!important}

/* ---------- staging-only marks (never printed by the live build) ---------- */
.ph-badge,.draft-badge{
  display:inline-block;font-family:var(--font-body);font-size:12px;font-weight:700;line-height:1.35;
  letter-spacing:.04em;text-transform:uppercase;text-align:left;
  background:#FF3D7F;color:#fff;padding:6px 10px;border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.hero__ph{margin:0 0 var(--s3)}
.stat .ph-badge{display:block;margin:0 auto var(--s2);max-width:22rem}
.draft-wrap{outline:4px dashed #FF3D7F;outline-offset:-4px;position:relative}
.draft-badge{display:block;width:fit-content;margin:var(--s4) auto 0;white-space:normal;max-width:calc(100% - 32px);text-align:center}
.draft-wrap > .draft-badge + .section{padding-top:var(--s6)}
@media(max-width:520px){.ptile .ph-badge{font-size:10px;padding:4px 6px;top:6px;left:6px;right:6px}}

/* ---------- small fixes ---------- */
.hero .btn-row--center{justify-content:center}

/* ---------- header fit between the nav breakpoint and wide screens ---------- */
.nav a{white-space:nowrap}
@media(min-width:1180px) and (max-width:1399px){
  .nav ul{gap:14px}
  .site-header .wrap{gap:var(--s3)}
  .nav+.header-cta{margin-left:var(--s3)}
  .brand img{width:160px}
  .call-btn__num{display:none}
  .header-cta .call-btn{padding:10px 12px;min-width:44px}
}
@media(max-width:1179px){.nav+.header-cta{margin-left:auto}}
@media(max-width:520px){.menu-toggle{width:44px;height:44px;margin-left:2px}}

/* ============================================================
   PLAYBOOK LAYER, PART 2 (21 October 2026): service, suburb pages
   ============================================================ */
/* Service page hero: the home hero's shape, sized to its content so the
   proof strip and the top of the form card sit on the first screen. */
.hero--svc{min-height:min(76vh,740px)}
.hero--svc h1{max-width:20ch;font-size:clamp(2.6rem,6vw,4.75rem);line-height:1.02;letter-spacing:-.02em}
.hero--svc.hero--plain .hero__inner{padding-bottom:calc(var(--s6) + 104px)}
@media(max-width:640px){.hero--svc{min-height:0}}
/* The accent clause on the pale cover band (electrician-perth) reads in the
   darkened accent, 6.4:1 on the surface colour. */
.cover .accent{color:var(--accent-ink)}

/* The form card as its own section under a cover or the suburb hero, where
   overlapping would sit on the drawing or the pale copy band. */
.formcard--flat{margin-top:0;padding:var(--s6) 0 var(--s2)}
@media(max-width:640px){.formcard--flat{margin-top:0;padding-top:var(--s5)}}

/* What is included: the page's own copy beside the checklist. */
.incl{align-items:start}
.incl .prose{text-align:left}
.incl__list{text-align:left}
.incl__list .btn-row{margin-top:var(--s5)}
.incl .prose h3{font-size:clamp(1.25rem,2vw,1.5rem);margin-top:var(--s6)}
.incl .prose h3:first-child{margin-top:0}

/* Recent jobs: a photo that is approved but not downloaded yet (staging only). */
.job__ph{aspect-ratio:4 / 3;border-radius:var(--r-card);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;padding:var(--s3)}
.section--dark .job figcaption{color:var(--grey-l)}
.section--dark .job figcaption b{color:var(--white)}

/* Closing band with the form: proof beside the form. */
.cta-form .sec-head{margin-bottom:var(--s6)}
.cta-form__grid{display:grid;gap:var(--s5);text-align:left;align-items:start}
@media(min-width:1000px){.cta-form__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6)}}
.cta-form__aside{display:grid;gap:var(--s3)}
.cta-form__rl{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.cta-form__more{margin:0}
.cta-form__more a{text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.cta-form .formcard__card{max-width:none;margin:0;color:var(--ink)}
.cta-form .qform__grid{grid-template-columns:1fr}
@media(min-width:560px){
  .cta-form .qform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-form .qform .field{grid-column:auto}
  .cta-form .qform .field--email,.cta-form .qform .field--wide,.cta-form .qform .field--service,
  .cta-form .qform .field--file,.cta-form .qform .field--submit{grid-column:1 / -1}
}
.cta-form .formcard__card a{color:var(--ink)}
.cta-form__areas{margin:var(--s6) auto 0;max-width:70ch;text-align:center;font-size:.9375rem}
.cta-form__areas a{text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.cta-form.section--dark .cta-form__areas{color:var(--on-ink)}
.cta-form.cta-band--light .rev{background:var(--white)}
.job--ph .job__ph{outline:2px dashed #FF3D7F;outline-offset:-2px}
.cta-form__form{min-width:0}

/* Careers application form (/careers/, 23 Oct 2026) */
.careers-form .field--file input{padding:10px}
.careers-form .field > .hint{display:block;margin-top:6px;font-size:.8125rem}
.careers-form button[disabled]{opacity:.6;cursor:not-allowed}
.form-done{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s5);text-align:left}
.form-done:focus{outline:none}

/* ---------------------------------------------------------------------------
   Quote decoder (/quote-decoder/). Built by _build/content_quote_decoder.py;
   every word is in _build/data/quote_decoder.csv. This only lays it out.
   --------------------------------------------------------------------------- */
.qd{display:grid;gap:var(--s5);align-items:start}
.qd-list,.qd-result{min-width:0}
@media(min-width:960px){.qd{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.qd-result{position:sticky;top:100px}}
.qd-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.qd-item{position:relative;background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s4)}
.qd-item:has(.qd-art){padding-right:calc(var(--s4) + 68px)}
.qd-art{position:absolute;top:var(--s4);right:var(--s4);width:56px;height:56px;border-radius:8px;border:1px solid var(--hairline);background:#fff;object-fit:contain}
.qd-item.is-covered{border-color:var(--ink);background:var(--surface)}
.qd-item.is-covered .qd-art{opacity:.6}
.qd-tick,.qd-na{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.qd-tick span{font-family:var(--font-display);font-weight:700;font-size:1.125rem;line-height:1.3}
.qd-tick input,.qd-na input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.qd-tick input:focus-visible,.qd-na input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.qd-why{margin:var(--s2) 0 0;font-size:.9375rem;line-height:1.55}
.qd-good{margin:var(--s2) 0 0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.qd-good strong{color:var(--ink);font-weight:600}
.qd-na{margin-top:var(--s3);font-size:.875rem}
.qd-result{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s4)}
.qd-result h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.3;margin:0 0 var(--s2)}
.qd-lede,.qd-none{margin:0 0 var(--s3);font-size:.9375rem}
.qd-asks{margin:0;padding-left:1.25em;display:grid;gap:var(--s3)}
.qd-asks li{font-size:.9375rem;line-height:1.5}
.qd-ask__item{display:block;font-size:.8125rem;font-weight:600;color:var(--muted)}
.qd-note{margin:var(--s4) 0 0;font-size:.8125rem;color:var(--muted)}
.qd-msg{margin:var(--s3) 0 0;font-size:.9375rem;font-weight:500}
.qd-msg:empty{display:none}
.qd-msg.is-err{color:var(--error)}
.qd-form .field input[type="file"]{padding:10px;background:var(--white)}

/* ---------------------------------------------------------------------------
   Synergy plan check (/synergy-plan-check/). Built by
   _build/content_plan_check.py; prices in _build/data/synergy_plans.csv and
   words in _build/data/synergy_plan_check.csv. This only lays them out.
   --------------------------------------------------------------------------- */
.spc{display:grid;gap:var(--s4);max-width:840px;margin-inline:auto}
.spc-card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s5) var(--s4);min-width:0}
.spc-step{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;font-weight:600}
.spc-card h2{font-size:1.375rem;line-height:1.25;margin:0 0 4px}
.spc-hint{margin:0 0 var(--s3);font-size:.9375rem;color:var(--muted)}
.spc-row{display:grid;gap:0 var(--s3)}
@media(min-width:640px){.spc-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spc-row .field{margin-bottom:var(--s3);min-width:0}
.spc-shapes{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:var(--s4)}
.spc-shape{text-align:left;background:var(--white);border:1px solid var(--grey-d);border-radius:var(--r-btn);padding:12px 14px;min-height:48px;cursor:pointer;font:inherit;color:var(--ink);line-height:1.35}
.spc-shape b{display:block;font-family:var(--font-display);font-size:1rem}
.spc-shape span{font-size:.8125rem;color:var(--muted)}
.spc-shape[aria-pressed="true"]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.spc-shape:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.spc-slider label{display:flex;justify-content:space-between;gap:var(--s3);font-size:.9375rem;font-weight:500;margin-bottom:6px}
.spc-slider output{font-weight:700}
.spc-slider input{width:100%;accent-color:var(--ink);height:32px}
.spc-bar{display:flex;height:32px;border-radius:var(--r-btn);overflow:hidden;border:1px solid var(--hairline);margin:var(--s3) 0 var(--s2)}
.spc-seg{display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden}
.spc-seg--day{background:var(--yellow);color:var(--ink)}
.spc-seg--eve{background:#B5400F;color:#fff}
.spc-seg--night{background:#3B5B8C;color:#fff}
.spc-key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:center;font-size:.8125rem;color:var(--muted);margin:0}
.spc-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.spc-checks{display:grid;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hairline)}
.spc-check{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;line-height:1.4;cursor:pointer}
.spc-check input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.spc-check input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.spc-check small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.45;margin-top:2px}
.spc-note{margin:var(--s3) 0 0;font-size:.875rem;line-height:1.5;padding:10px 12px;background:var(--surface);border-radius:var(--r-btn)}
.spc-verdict{font-family:var(--font-display);font-weight:800;font-size:1.25rem;line-height:1.3;margin:0 0 var(--s3)}
.spc-verdict:empty{display:none}
.spc-plans{display:grid;gap:var(--s3)}
.spc-plan{border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s4);background:var(--white)}
.spc-plan.is-best{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--yellow)}
.spc-plan.is-out{background:var(--surface)}
.spc-plan.is-out .spc-plan__blurb,.spc-plan.is-out .spc-rates{color:var(--muted)}
.spc-plan__head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.spc-plan h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.125rem;line-height:1.3}
.spc-tag{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--yellow);color:var(--ink)}
.spc-plan.is-out .spc-tag{background:var(--surface-2);color:var(--ink)}
.spc-plan__money{font-family:var(--font-display);font-weight:800;font-size:1.75rem;line-height:1.1;margin:var(--s2) 0 0;color:var(--ink)}
.spc-plan__why{margin:var(--s2) 0 0;font-weight:600}
.spc-plan__blurb{margin:var(--s2) 0 0;font-size:.9375rem}
.spc-rates{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:2px;font-size:.875rem}
.spc-rates li{display:flex;justify-content:space-between;gap:var(--s3);border-bottom:1px dashed var(--hairline);padding:3px 0}
.spc-plan__src{margin:var(--s2) 0 0;font-size:.8125rem;color:var(--muted)}
.spc-timing{margin-top:var(--s4)}
.spc-timing h3{margin:0 0 4px;font-family:var(--font-display);font-weight:700;font-size:1rem}
.spc-timing p{margin:0;font-size:.9375rem}
.spc-precise{max-width:840px;margin:var(--s6) auto 0;text-align:center;background:var(--ink);color:var(--white);border-radius:var(--r-card);padding:var(--s5) var(--s4)}
.spc-precise h2{color:var(--white);margin:0 0 var(--s2)}
.spc-precise p{margin:0 auto var(--s4);max-width:52ch;color:#E8E8E4}
.spc-precise .btn{white-space:normal;height:auto;min-height:48px;line-height:1.3}