/*!
 * Bhullar Electricals & Solar: main stylesheet (hand-written, no build step).
 * Spec: /home/think/bhullar-redesign/DESIGN-BRIEF.md + DESIGN-DESLOP.md (25 Oct 2026: plain trade-business look:
 * 4-8px radii, 1px lines instead of shadows, no textures, glows, glass, icon tiles, eyebrows or serif accents).
 * Order: 1 tokens · 2 fonts · 3 reset/base · 4 type · 5 layout · 6 components · 7 header/mega/drawer/bar/footer/bands
 *        8 home · 8b-8i inner pages · 9 utilities · 10 motion · 11 reduced motion · 12 print · 13 blog (archive + posts)
 *        14 phones: compact card rows
 * Rules: orange #F26822 = fills/large only; small orange text on light = --orange-700; text on orange = charcoal.
 * No nesting (older Safari). Bump ASSET_VER in inc/config.php after every change (never reuse a value).
 */

/* =========================================================== 1. TOKENS */
:root{
  --orange-50:#FEF3EC; --orange-100:#FDE5D8; --orange-300:#FFAD7A; --orange-400:#FF8240;
  --orange-500:#F26822; --orange-600:#DE530D; --orange-700:#B3440C;
  --char-950:#0E0D0C; --char-900:#171513; --char-800:#211F1C; --char-700:#2D2A27;
  --stone-600:#5C564F; --stone-500:#857D74; --stone-200:#E5E0D9;
  --paper-200:#EFEBE5; --paper:#F7F5F2; --white:#FFFFFF;
  --text:var(--char-900); --text-muted:var(--stone-600); --text-on-dark-muted:#BDB6AD;
  --line:var(--stone-200); --line-strong:var(--stone-500); --line-on-dark:rgba(255,255,255,.16);
  --error:#B42318; --error-bg:#FEF3F2; --success:#22713C;
  --focus:var(--orange-700); --focus-on-dark:var(--orange-400);

  --font-sans:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-display:clamp(2.125rem, 1.45rem + 2.4vw, 3.25rem);   /* hero H1: 34 -> 52px */
  --fs-h1:clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-h2:clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --fs-h3:clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --fs-h4:clamp(1.0625rem, 1.03rem + .15vw, 1.1875rem);
  --fs-lead:clamp(1.0625rem, 1.02rem + .2vw, 1.25rem);
  --fs-body:clamp(1rem, .979rem + .093vw, 1.0625rem);
  --fs-small:clamp(.875rem, .854rem + .093vw, .9375rem);
  --fs-eyebrow:.875rem;

  --gutter:clamp(1rem, .5rem + 2.222vw, 2.5rem);
  --section-y:clamp(3.5rem, 2.75rem + 3.33vw, 6rem);
  --section-y-sm:clamp(2.5rem, 2rem + 2.2vw, 4rem);
  --stack-head:clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);

  /* 4-8px only: no pill buttons or chips */
  --r-xs:4px; --r-sm:4px; --r-md:4px; --r-lg:6px; --r-xl:8px;

  /* borders, not shadows: cards and panels get a 1px line or nothing. --e-3 is for overlays only (mega, drawer). */
  --e-3:0 12px 32px -12px rgba(23,21,19,.28), 0 0 0 1px rgba(23,21,19,.06);

  --dur-2:180ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --header-h:64px;
}
@media (min-width:1024px){:root{--header-h:84px}}

/* =========================================================== 2. FONTS (self-hosted, OFL) */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var-latin.woff2") format("woff2");font-weight:400 800;font-stretch:100% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:104%;ascent-override:88%;descent-override:21%}

/* =========================================================== 3. RESET + BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--char-950)}
body{margin:0;min-height:100vh;background:var(--white);color:var(--text);font-family:var(--font-sans);font-stretch:100%;font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,canvas,picture{display:block;max-width:100%}
img{height:auto}
/* A <picture> inside a fixed-ratio or absolutely sized frame must fill it, or img{height:100%} falls back to the photo's own ratio */
.hero__media picture,.map-poster picture{position:absolute;inset:0}
.green__media picture,.svc-hero__frame picture,.svc-overview__frame picture,.solar-type__media picture,.split__media picture,
.card-service__media picture,.resource__media picture,.g-tile__media picture,.city-card__media picture,.solar-battery-home__media picture{display:block;width:100%;height:100%}
svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;-webkit-tap-highlight-color:transparent}
p,ul,ol,dl,dd,figure,blockquote,h1,h2,h3,h4,h5,h6,address,fieldset{margin:0}
ul,ol{padding:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
address{font-style:normal}
[hidden]{display:none!important}
::selection{background:var(--orange-100);color:var(--char-900)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.site-footer :focus-visible,
.drawer__head :focus-visible,.map-poster :focus-visible{outline-color:var(--focus-on-dark)}
.utility :focus-visible{outline-color:var(--char-900);outline-offset:-3px}   /* the links fill the 36px strip, so the ring sits inside */
.band--quote :focus-visible{outline-color:var(--char-900)}
.hero .qform :focus-visible,.mega :focus-visible{outline-color:var(--focus)}
main:focus{outline:none}

/* =========================================================== 4. TYPOGRAPHY */
h1,h2,h3,h4{font-weight:700;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;color:inherit}
p,li,dd,blockquote{text-wrap:pretty}
/* small plain label (no orange dash, no letter-spacing, no caps): kept on purpose as the 'kicker' option of section_head() /
   page_hero(); no page uses it today (DESIGN-DESLOP: "sparingly") */
.kicker{display:block;margin:0 0 10px;font-size:var(--fs-eyebrow);font-weight:600;line-height:1.3;color:var(--text-muted)}
.prose a,.acc__inner a:not(.link-arrow):not(.drawer__item):not(.btn),.qform__privacy a,.qform__alert a:not(.btn),.qform__banner a,
.areas__note a,.footnotes a,.safe-steps a,.services-home__ask a,.why__intro a,.faq-sec__call a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur-2)}
.prose a:hover,.acc__inner a:not(.link-arrow):not(.drawer__item):not(.btn):hover,.qform__privacy a:hover,.areas__note a:hover,
.services-home__ask a:hover,.why__intro a:hover,.faq-sec__call a:hover,.safe-steps a:hover{color:var(--orange-700)}
sup.fn{font-size:.62em;line-height:0;vertical-align:super;font-weight:600;margin-left:1px}
sup.fn a{position:relative;z-index:3;text-decoration:none;color:inherit;padding:0 2px 0 1px;margin-right:-2px;border-radius:3px}
sup.fn a:hover{text-decoration:underline}

/* =========================================================== 5. LAYOUT */
.container{width:min(100% - 2*var(--gutter), 1240px);margin-inline:auto}
.container--narrow{width:min(100% - 2*var(--gutter), 760px);margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.section--sm{padding-block:var(--section-y-sm)}
.section--paper{background:var(--paper)}

.section-head{margin-bottom:var(--stack-head);max-width:760px}
.section-head__title{font-size:var(--fs-h2);font-weight:700;line-height:1.12;letter-spacing:-.015em}
.section-head__intro{margin-top:12px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:58ch}
/* variant: intro in its own right-hand column */
@media (min-width:1024px){
  .section-head--split2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px 64px;align-items:end;max-width:none}
  .section-head--split2 .section-head__intro{margin-top:0;padding-bottom:4px}
}

/* =========================================================== 6. COMPONENTS */

/* --- icons: small plain line icons, inline with text (no tinted tiles) */
.icon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle;stroke-width:1.75}
/* review 1, 4 Nov 2026: the sprite symbols no longer set stroke-width, so it inherits from here (and the per-icon rules
   below, e.g. the ticks, finally take effect; a stroke-width on the symbol beat them inside the <use> copy) */

/* --- small text labels (no pills) */
.tag{display:inline-block;padding:0;border-radius:0;background:none;color:var(--text-muted);font-size:14px;font-weight:600;line-height:1.3}

/* --- buttons: plain text, 4px radius, no chips */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-xs);border:1px solid transparent;font-size:16px;font-weight:650;line-height:1.2;letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.btn .btn__icon{width:18px;height:18px}
.btn--sm{min-height:44px;padding:0 16px;font-size:15px}
.btn--lg{min-height:52px;padding:0 24px;font-size:17px}
.btn--block{display:flex;width:100%;white-space:normal}
.btn--block .btn__label{min-width:0;text-align:center}
.btn--primary{background:var(--orange-500);color:var(--char-900)}
.btn--primary:active{background:var(--orange-600)}
.btn--dark{background:var(--char-900);color:#fff}
.btn--dark:active{background:var(--char-950)}
.btn--light{background:#fff;color:var(--char-900)}
.btn--outline{background:transparent;color:var(--char-900);border-color:var(--line-strong)}
.btn--call{background:transparent;color:var(--char-900);border-color:var(--char-900)}
.btn--call-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}
.btn--call .btn__label,.btn--call-light .btn__label{font-variant-numeric:tabular-nums}
.btn[aria-busy="true"]{pointer-events:none}
.btn__spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin 700ms linear infinite}
.btn[aria-busy="true"] .btn__spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- plain text link (the old arrow link: no arrow, no animated underline) */
.link-arrow{display:inline;color:var(--text);font-weight:650;line-height:1.4;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:4px;border-radius:2px;transition:color var(--dur-2)}
.link-arrow--light{color:#fff;text-decoration-color:var(--orange-400)}

/* --- icon buttons */
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:transparent;color:var(--char-900);flex:none;transition:background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.icon-btn .icon{width:20px;height:20px}
.icon-btn--dark{border-color:rgba(255,255,255,.4);color:#fff}
.icon-btn:disabled{opacity:.4;cursor:default}

/* --- hover (fine pointers only): colour changes, no lifts or glows */
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--orange-400)}
  .btn--dark:hover{background:var(--char-700)}
  .btn--light:hover{background:var(--paper)}
  .btn--outline:hover{border-color:var(--char-900);background:var(--paper)}
  .btn--call:hover{background:var(--char-900);color:#fff}
  .btn--call-light:hover{background:#fff;color:var(--char-900);border-color:#fff}
  .link-arrow:hover{color:var(--orange-700)}
  .link-arrow--light:hover{color:var(--orange-300)}
  .icon-btn:hover{background:var(--paper);border-color:var(--char-900)}
  .icon-btn--dark:hover{background:rgba(255,255,255,.08);border-color:#fff}
}

/* --- ticks list */
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;line-height:1.5}
.ticks .icon{width:18px;height:18px;margin-top:3px;color:var(--char-900);stroke-width:2.25}

/* --- fact line: a few short facts (no boxes, no icons). Stacked, or one row split by thin rules where it fits on one line. */
.factline{list-style:none;display:grid;gap:4px;font-size:15px;line-height:1.4}

/* --- service card: photo 3:2, title, one line. The whole card is the link; the title underlines on hover and focus. */
.card-service{position:relative;display:flex;flex-direction:column;background:none;border-radius:var(--r-lg)}
.card-service__media{position:relative;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.card-service__img{width:100%;height:100%;object-fit:cover}
.card-service__body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 0 0;flex:1}
.card-service__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3;letter-spacing:-.005em}
.card-service__link{color:inherit;text-decoration:none;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.card-service__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card-service__link:focus-visible{outline:none}
.card-service:focus-within{outline:3px solid var(--focus);outline-offset:6px}
.card-service:hover .card-service__link,.card-service:focus-within .card-service__link{text-decoration-line:underline}
.card-service__area{font-size:14px;font-weight:600;color:var(--text-muted);line-height:1.3}
.card-service__text{font-size:15.5px;line-height:1.55;color:var(--text-muted)}

/* --- directory list (replaces the boxed tiles with icons and chevrons) */
.dir-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;border-top:1px solid var(--line)}
.dir-list > li{border-bottom:1px solid var(--line)}
.dir-link{display:flex;flex-direction:column;gap:2px;padding:14px 0;color:var(--text);text-decoration:none;border-radius:2px}
.dir-link__title{font-weight:650;line-height:1.35;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.dir-link__desc{font-size:var(--fs-small);line-height:1.4;color:var(--text-muted)}
.dir-link:hover .dir-link__title,.dir-link:focus-visible .dir-link__title,.dir-link[aria-current] .dir-link__title{text-decoration-line:underline}
@media (min-width:640px){.dir-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.dir-list{grid-template-columns:repeat(4,minmax(0,1fr))}.dir-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- points: a bold lead and one sentence per item, on thin rules (benefits, signs, factors, promises). No icons or boxes.
   1 column, 2 from 640px; .points--wide uses --n columns (max 4) from 1024px. */
.points{list-style:none;display:grid;column-gap:clamp(24px, 3vw, 40px)}
.points__item{padding:16px 0 20px;border-top:1px solid var(--line)}
.points__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.points__text{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--text-muted);max-width:52ch}
@media (min-width:640px){.points--2,.points--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.points--wide{grid-template-columns:repeat(var(--n, 4),minmax(0,1fr))}}


/* --- a section's one "See all ..." link, under its content */
.section-more{margin-top:clamp(24px, 3vw, 32px)}

/* --- testimonial: a plain pull quote with a short orange rule */
.quote-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 0 0;border-top:2px solid var(--orange-500);background:none}
.quote-card__quote p{font-size:17px;line-height:1.65;color:var(--text)}
.quote-card__by{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin-top:auto;padding-top:4px;font-size:14.5px;line-height:1.4;color:var(--text-muted)}
.quote-card__name{font-weight:650;color:var(--text)}
.quote-card__name,.quote-card__tag{flex-basis:100%}
.quote-card--featured .quote-card__quote p{font-size:clamp(18px, 1rem + .35vw, 20px);line-height:1.6}

/* --- blog article card: photo, title, muted topic; the whole card is the link */
.resource{position:relative;display:flex;flex-direction:column;background:none}
.resource__media{aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.resource__img{width:100%;height:100%;object-fit:cover}
.resource__body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0 0;flex:1}
.resource__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.resource__link{color:inherit;text-decoration:none;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.resource__link::after{content:"";position:absolute;inset:0;z-index:1}
.resource__link:focus-visible{outline:none}
.resource:focus-within{outline:3px solid var(--focus);outline-offset:6px;border-radius:var(--r-lg)}
.resource:hover .resource__link,.resource:focus-within .resource__link{text-decoration-line:underline}
.resource--compact .resource__title{font-size:17px}


/* --- "What's included": a plain checklist */
.receipt{position:relative;padding:0;background:none;border-radius:0;box-shadow:none;-webkit-mask:none;mask:none}
.receipt__rows{list-style:none;border-top:1px solid var(--line)}
.receipt__row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);font-weight:550;line-height:1.45}
.receipt__tick{width:18px;height:18px;margin-top:2px;color:var(--char-900);stroke-width:2.5}
.receipt__label{min-width:0}

/* --- accordion: rows with 1px rules and a plain +/- */
.acc__item{border-bottom:1px solid var(--line)}
.acc__h{font-size:inherit;font-weight:inherit;line-height:inherit}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:56px;padding:18px 0;text-align:left;font-size:clamp(1.0625rem, 1rem + .2vw, 1.1875rem);font-weight:650;line-height:1.35;color:var(--char-900);border-radius:2px;transition:color var(--dur-2)}
.acc__icon{position:relative;width:16px;height:16px;flex:none}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;left:0;top:50%;width:16px;height:2px;margin-top:-1px;background:currentColor;transition:transform 200ms var(--ease-out)}
.acc__icon::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:rotate(90deg) scaleX(0)}
.acc__inner{padding:0 40px 22px 0;color:var(--text-muted)}
.acc__inner p + p{margin-top:12px}
.acc__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px}
html.js .acc__panel{height:0;overflow:hidden;visibility:hidden}
html.js .acc__panel.is-open{height:auto;visibility:visible}
html.js .acc__panel.is-animating{visibility:visible;overflow:hidden}
@media (hover:hover) and (pointer:fine){.acc__btn:hover .acc__q{text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:4px}}

/* --- tabs: plain underline tabs */
.tabs__list{position:relative;display:flex;gap:28px;max-width:100%;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--line)}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0;font-weight:600;font-size:16px;color:var(--text-muted);white-space:nowrap;transition:color var(--dur-2)}
.tabs__tab .icon{display:none}
.tabs__tab[aria-selected="true"]{color:var(--char-900);font-weight:700}
.tabs__indicator{position:absolute;z-index:2;left:0;bottom:0;height:2px;width:0;background:var(--orange-500);transition:transform 240ms var(--ease-out),width 240ms var(--ease-out)}
html:not(.js) .tabs__indicator{display:none}
html:not(.js) .tabs__tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--orange-500)}
.tabs__label--sm{display:none}
.tabs__panel{margin-top:clamp(24px, 3vw, 36px)}
html.js .tabs__panel[data-hidden]{display:none}
.tabs__nojs-title{display:none}
html:not(.js) .tabs__nojs-title{display:block;font-weight:700;font-size:var(--fs-h4);margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.tabs__tab:hover{color:var(--char-900)}}

/* --- process steps: a plain numbered list (a row of columns from 768px) */
.steps{list-style:none;display:grid;gap:24px}
.steps__item{padding-top:14px;border-top:1px solid var(--line-strong)}
.steps__num{display:block;margin-bottom:6px;font-size:14px;font-weight:700;line-height:1.3;color:var(--orange-700);font-variant-numeric:tabular-nums}
.steps__num::before{content:"Step "}
.steps__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.steps__text{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--text-muted);max-width:40ch}
@media (min-width:768px){.steps:not(.steps--v){grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}}
@media (min-width:1024px){.steps:not(.steps--v){grid-template-columns:repeat(var(--n),minmax(0,1fr))}}
.svc-sec .points,.svc-sec .steps{margin-top:24px}
/* under the process tabs the tab list's line is the one rule: no second rule on each step (fix2) */
.tabs__panel .steps__item{border-top:0;padding-top:0}
.process .tabs__panel{margin-top:28px}
.svc-block .points{margin-top:0}

/* --- forms: fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font-size:15px;font-weight:620;color:var(--text);line-height:1.35}
.field__opt{font-weight:400;color:var(--text-muted)}
.field__hint{font-size:14px;color:var(--text-muted);line-height:1.4}
.field__wrap{position:relative}
.field__input{display:block;width:100%;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;font-size:16px;line-height:1.3;color:var(--text);transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2);-webkit-appearance:none;appearance:none}
.field__input::placeholder{color:#8B847B;opacity:1}
.field__input--area{height:auto;min-height:120px;padding:12px 14px;resize:vertical}
.field__input:hover{border-color:var(--char-900)}
.field__input:focus,.field__input:focus-visible{outline:none;border-color:var(--orange-700);box-shadow:0 0 0 3px rgba(242,104,34,.28)}
.field__select{padding-right:44px;cursor:pointer}
.field__chev{position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;pointer-events:none;color:var(--char-900)}
.field__ok{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--success);opacity:0;transition:opacity var(--dur-2);pointer-events:none;stroke-width:2.5}
.field.is-valid .field__ok{opacity:1}
.field.is-valid .field__input{padding-right:42px}
.field.is-invalid .field__input,.field__input[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg)}
.field__error{display:flex;align-items:flex-start;gap:6px;font-size:14px;line-height:1.4;color:var(--error);font-weight:550}
.field__error .icon{width:16px;height:16px;margin-top:1px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* --- service options (radio chips): simple bordered options; the chosen one turns charcoal */
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chips > .chip:last-child:nth-child(odd){grid-column:1 / -1}
.chip{position:relative;display:block;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip__body{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;font-size:15px;font-weight:600;line-height:1.2;text-align:center;color:var(--char-900);transition:background-color 140ms,border-color 140ms,color 140ms}
.chip__short{display:none}
.chip input:checked + .chip__body{background:var(--char-900);border-color:var(--char-900);color:#fff}
.chip input:focus-visible + .chip__body{outline:3px solid var(--focus);outline-offset:2px}
.field--chips.is-invalid .chip__body{border-color:var(--error)}
@media (hover:hover) and (pointer:fine){.chip:hover .chip__body{border-color:var(--char-900)}}

/* --- segmented choices (home/business, how soon, contact): the same plain bordered options */
.seg{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.seg__opt{position:relative;cursor:pointer;min-width:0}
.seg__opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg__label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;font-size:15px;font-weight:600;color:var(--char-900);white-space:nowrap;transition:background-color 140ms,border-color 140ms,color 140ms}
.seg__label .icon{display:none}
.seg__label > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.seg__opt input:checked + .seg__label{background:var(--char-900);border-color:var(--char-900);color:#fff}
.seg__opt--urgent input:checked + .seg__label{background:var(--orange-500);border-color:var(--orange-500);color:var(--char-900)}
.seg__opt input:focus-visible + .seg__label{outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.seg__opt:hover .seg__label{border-color:var(--char-900)}}
.field--seg .field__label{margin-bottom:2px}

/* --- urgency rows (contact) */
.urgency{display:grid;gap:8px}
.urgency__card{position:relative;cursor:pointer}
.urgency__card input{position:absolute;opacity:0;width:1px;height:1px}
.urgency__body{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:#fff;font-weight:600;font-size:15px;line-height:1.25}
.urgency__card input:checked + .urgency__body{background:var(--char-900);border-color:var(--char-900);color:#fff}
.urgency__card--emergency input:checked + .urgency__body{background:var(--orange-500);border-color:var(--orange-500);color:var(--char-900)}
.urgency__card input:focus-visible + .urgency__body{outline:3px solid var(--focus);outline-offset:2px}

/* --- quote form card */
.qform{container-type:inline-size;position:relative;background:#fff;color:var(--text);border-radius:var(--r-xl);box-shadow:0 0 0 1px var(--line);padding:clamp(20px, 2.2vw, 28px)}
.qform__head{margin-bottom:16px}
.qform__title{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.qform__sub{margin-top:4px;font-size:15px;line-height:1.5;color:var(--text-muted)}
.qform__progress{display:flex;align-items:center;gap:12px;margin-top:12px}
.qform__count{font-size:13.5px;font-weight:650;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.qform__bar{position:relative;flex:1;height:2px;background:var(--line);overflow:hidden}
.qform__bar > span{position:absolute;inset:0;background:var(--orange-500);transform:scaleX(.5);transform-origin:left;transition:transform 240ms var(--ease-out)}
.qform[data-step="2"] .qform__bar > span{transform:scaleX(1)}
.qform__form{display:flex;flex-direction:column;gap:16px}
.qform__req{font-size:13.5px;color:var(--text-muted);line-height:1.4;margin-top:-4px}
.qform__steps{display:grid}
.qform__step{display:flex;flex-direction:column;gap:16px;min-width:0}
html.js .qform--hero .qform__step[data-inactive]{display:none}
/* the step legend sits outside the fieldset's flex gap, so it carries its own space (and room for its focus ring) */
.qform__step-title{font-size:18px;font-weight:700;line-height:1.3;padding:0;margin-bottom:14px}
.qform--hero .qform__step{gap:12px}
/* step 2 of the hero card stays within the hero (<= ~690px at 1440x900): no sub line, and name/phone/email/suburb two a row */
.qform--hero[data-step="2"] .qform__sub{display:none}
.qform--hero .field{gap:4px}
.qform--hero .qform__step > .qform__req{margin-top:-8px}
.qform__addmsg{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin:-6px 0;padding:0 10px 0 6px;border-radius:var(--r-xs);font-size:15px;font-weight:620;color:var(--char-900)}
.qform__addmsg .icon{width:18px;height:18px;color:var(--char-900);transition:transform var(--dur-2)}
.qform__addmsg[aria-expanded="true"] .icon{transform:rotate(45deg)}
.qform__addmsg:hover{background:var(--paper)}
html.js .qform__msg[data-collapsed]{display:none}
html:not(.js) .qform__addmsg{display:none}
.qform__back{display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 8px 0 2px;margin:-10px -8px -10px 0;border-radius:var(--r-xs);font-weight:600;font-size:14px;color:var(--text-muted)}
.qform__back .icon{width:18px;height:18px}
.qform__back:hover{color:var(--char-900)}
html:not(.js) .qform__back,html:not(.js) .qform__next,html:not(.js) .qform__progress{display:none}
.qform__grid{display:grid;gap:14px}
@container (min-width:360px){.qform__grid{grid-template-columns:1fr 1fr;align-items:start}}
/* the card in the desktop hero (not when it is docked below the photo on phones): two fields a row from a 300px content box */
@container (min-width:300px){.hero .qform__grid{grid-template-columns:1fr 1fr;align-items:start;gap:12px}}
/* chip labels: the short label when a chip is narrow (the full label stays the accessible name) */
@container (max-width:359px){
  .qform .chip__long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .qform .chip__short{display:inline}
}
@container (max-width:339px){.qform .seg__label{padding:0 4px;font-size:14.5px}}
@container (max-width:279px){.qform .chip__body{padding:6px;font-size:14px}.qform .seg{gap:4px}.qform .seg__label{padding:0 2px;font-size:14px}}
@media (max-width:359px){.qform{padding:16px}}
/* three options a row once there is room (hero card on desktop, contact form): 9 chips = 3 even rows */
@container (min-width:320px){
  .qform--hero .chips,.qform--full .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qform--hero .chip__body{padding:6px}
  .qform--hero .chips > .chip:last-child:nth-child(odd),.qform--full .chips > .chip:last-child:nth-child(odd){grid-column:auto}
}
@container (min-width:320px) and (max-width:439px){
  .qform--hero .chip__long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .qform--hero .chip__short{display:inline}
}
.qform__submit{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.qform__privacy{font-size:13px;line-height:1.45;color:var(--text-muted);text-align:center}
/* plain notes: an orange rule and the text, no tinted box */
.qform__area{font-size:14.5px;line-height:1.45;color:var(--text);padding:2px 0 2px 12px;border-left:3px solid var(--orange-500);background:none}
.qform__alert{display:flex;gap:12px;padding:2px 0 2px 12px;border-radius:0;background:none;border-left:3px solid var(--orange-500);font-size:15px;line-height:1.45}
.qform__alert .btn{margin-top:10px}
.qform__banner{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;padding:14px 16px;border-radius:var(--r-xs);background:var(--error-bg);border-left:3px solid var(--error);font-size:15px;line-height:1.45}
.qform__banner .icon{width:20px;height:20px;color:var(--error);margin-top:1px}
.qform__summary{padding:14px 16px;border-radius:var(--r-xs);background:var(--error-bg);border-left:3px solid var(--error);font-size:15px}
.qform__summary-title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--error)}
.qform__summary-title .icon{width:18px;height:18px}
.qform__summary ul{margin:8px 0 0 26px}
.qform__summary a{color:var(--error);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.qform__section{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.qform__section:first-of-type{border-top:0;padding-top:0}
.qform__section-title{display:flex;align-items:baseline;gap:6px;font-size:var(--fs-h4);font-weight:700;margin-bottom:4px}
.qform__num{display:inline;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-size:inherit;font-weight:700}
@container (min-width:520px){.urgency{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- safe steps: a plain numbered list */
.safe-steps{padding:20px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:none;color:inherit}
.safe-steps__title{display:block;font-size:var(--fs-h4);font-weight:700;margin-bottom:12px}
.safe-steps__list{list-style:decimal;padding-left:1.25em;display:grid;gap:10px}
.safe-steps__list li{padding-left:4px;font-size:15.5px;line-height:1.5;color:inherit}
.safe-steps__list li::marker{font-weight:700}

/* --- breadcrumb */
.crumbs__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--text-muted)}
.crumbs__item{display:inline-flex;align-items:center;gap:6px;min-width:0}
.crumbs__item a{color:inherit;text-decoration:none}
.crumbs__item a:hover{color:var(--orange-700);text-decoration:underline}
.crumbs__sep{width:14px;height:14px}
.crumbs [aria-current]{color:var(--text);font-weight:600}


/* =========================================================== 7. HEADER · MEGA · DRAWER · ACTION BAR · FOOTER · BANDS */
.skip-link{position:absolute;left:12px;top:-100px;z-index:200;padding:12px 18px;border-radius:var(--r-xs);background:var(--orange-500);color:var(--char-900);font-weight:700;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{top:12px;outline:3px solid var(--char-900);outline-offset:2px}

/* utility strip: slim orange bar above the white header, charcoal text (5.9:1) (owner, 4 Nov 2026: "change the colour of the top
   bar above the header to orange") */
.utility{display:none;position:relative;z-index:46;background:var(--orange-500);color:var(--char-900);font-size:14px;line-height:1.2}   /* z: above .mega-scrim (45), below the header (50) */
.utility__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:36px}
.utility__status{display:flex;align-items:center;gap:12px;white-space:nowrap}
.utility__status strong{font-weight:700}
.utility__links{list-style:none;display:flex;align-items:center}
.utility__links li{display:flex;align-items:center}
.utility__links li + li::before{content:"";width:1px;height:14px;background:rgba(23,21,19,.4);margin:0 14px}
.utility__links a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:inherit;white-space:nowrap;text-decoration:none;text-underline-offset:3px}
.utility__links a:hover,.utility__links a[aria-current]{text-decoration:underline}
.utility__links .icon{width:15px;height:15px}
.utility__phone{font-weight:700;font-variant-numeric:tabular-nums}
.utility__email{display:none!important}
@media (min-width:768px){.utility{display:block}}
@media (min-width:1280px){
  .utility__email{display:flex!important}
  /* the header shows the number from 1280px, so the strip leaves it out there (owner: duplication) */
  .utility__links .utility__tel{display:none}   /* beats .utility__links li{display:flex} */
}

/* header (owner reference, 4 Nov 2026): a white bar; the orange-and-white logo sits on a charcoal panel (owner: "this colour on
   the left side of the header") that runs in from the left edge of the screen and ends in a slanted edge, with an orange stripe
   beside it; bold capitals in the menu; a square orange quote button */
.site-header{--slant:22px;position:sticky;top:0;z-index:50;background:#fff;color:var(--char-900);border-bottom:1px solid var(--line);transition:transform 280ms var(--ease-drawer)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__inner{display:flex;align-items:center;gap:10px;height:var(--header-h);transition:height 200ms var(--ease-out)}
.site-header__logo{position:relative;z-index:0;align-self:stretch;display:flex;align-items:center;flex:none;margin-right:auto;padding-right:calc(var(--slant) + 18px);border-radius:0}
.site-header__logo::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;left:-100vw;background:var(--char-900);clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
/* the orange stripe: parallel to the slant, 8px off it, 18px wide */
.site-header__logo::after{content:"";position:absolute;z-index:-2;top:0;bottom:0;right:-26px;width:calc(var(--slant) + 18px);background:var(--orange-500);clip-path:polygon(var(--slant) 0,100% 0,18px 100%,0 100%)}
.site-header__logo-img{width:124px;height:auto}
@media (max-width:359px){.site-header__logo-img{width:100px}}   /* 320 (classic scrollbar): keeps the orange stripe clear of the call button */
/* focus: the ring goes round the logo itself (round the whole link it ran into the charcoal strip and across the slant) */
.site-header__logo:focus-visible{outline:none}
.site-header__logo:focus-visible .site-header__logo-img{outline:3px solid var(--focus-on-dark);outline-offset:4px;border-radius:2px}
.site-header__actions{display:flex;align-items:center;gap:8px}
.site-header__call,.site-header__quote{display:none!important}
.nav{display:none}
@media (min-width:1024px){
  .site-header{--slant:30px}
  .site-header.is-condensed .site-header__inner{height:68px}
  .site-header__logo{margin-right:0}
  .site-header__logo-img{width:150px}
  .nav{display:block;margin-inline:auto}
  .site-header__menu{display:none!important}
  .site-header__inner{gap:12px}
  .site-header__quote{display:inline-flex!important;min-height:48px;padding:0 18px;border-radius:0;font-size:14px;font-weight:750;letter-spacing:.03em;text-transform:uppercase}
}
/* 1024-1199: a narrower panel, logo and button so the seven capitals fit (was 24px over at 1024) */
@media (min-width:1024px) and (max-width:1199px){
  .site-header{--slant:24px}
  .site-header__logo{padding-right:calc(var(--slant) + 12px)}
  .site-header__logo-img{width:136px}
  .site-header__quote{padding:0 14px}
}
/* the pale stripe hangs 26px outside the logo box, so the logo keeps that much room on its right and the menu centres between
   the stripe and the actions (review: SERVICES ran into the stripe at 1024) */
@media (min-width:1100px){.site-header__logo{margin-right:26px}}
@media (min-width:1024px) and (max-width:1099px){.site-header__logo{margin-right:20px}.site-header__logo-img{width:116px}}
@media (min-width:1280px){.site-header.is-condensed .site-header__logo-img{width:150px}}   /* breathing room in the 68px bar */
/* the phone number needs the room: icon-only until 1280 */
@media (min-width:1280px){
  .site-header__logo-img{width:172px}
  .site-header__call{display:inline-flex!important;min-height:44px;padding:0 6px;border-color:transparent;font-size:15.5px;font-weight:750}
  .site-header__call .btn__icon{color:var(--orange-700)}
  .site-header__callicon{display:none!important}
}
@media (hover:hover) and (pointer:fine){.site-header__call:hover{background:transparent;color:var(--orange-700)}}
@media (min-width:1400px){.site-header__inner{gap:16px}.site-header__quote{padding:0 22px}}
.nav__list{list-style:none;display:flex;align-items:center;gap:2px}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 clamp(5px, .6vw - 1px, 10px);color:var(--char-900);font-size:clamp(13px, .25vw + 10.5px, 14.5px);font-weight:750;line-height:1;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-radius:4px}
.nav__link::after{content:"";position:absolute;left:clamp(5px, .6vw - 1px, 10px);right:clamp(5px, .6vw - 1px, 10px);bottom:4px;height:2px;background:var(--orange-500);transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)}
.nav__link[aria-current]::after,.nav__item--mega.is-open .nav__link::after{transform:scaleX(1)}
.nav__link--urgent{color:var(--orange-700)}
.nav__dot{width:6px;height:6px;border-radius:50%;background:var(--orange-500)}
.nav__item--mega .nav__link{padding-right:2px}
.nav__item--mega .nav__link::after{right:2px}
.nav__toggle{display:inline-grid;place-items:center;width:26px;height:44px;margin-right:4px;border-radius:4px;color:var(--char-900)}
.nav__toggle .icon{width:18px;height:18px;transition:transform var(--dur-2) var(--ease-out)}
.nav__toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
html:not(.js) .nav__toggle{display:none}
/* "Service areas" reads "Areas" in the desktop bar (the capitals need the room since 4 Nov 2026); the drawer keeps the long label */
.nav__lbl-short{display:none}
@media (min-width:1024px){.nav__lbl-long{display:none}.nav__lbl-short{display:inline}}
html:not(.js) .nav__item--mega .nav__link{padding-right:clamp(5px, .6vw - 1px, 10px)}
@media (hover:hover) and (pointer:fine){
  .nav__link:hover::after{transform:scaleX(1)}
  .nav__link:hover{color:var(--char-900)}
  .nav__toggle:hover{background:var(--paper)}
}

/* mega menu: a plain text directory */
.mega{position:absolute;left:0;right:0;top:100%;z-index:-1;visibility:hidden;opacity:0;transition:opacity 140ms var(--ease-in),visibility 0s linear 140ms}
.mega.is-open{visibility:visible;opacity:1;transition:opacity 180ms var(--ease-out),visibility 0s}
.mega__panel{background:#fff;color:var(--text);border-top:1px solid var(--line);box-shadow:var(--e-3);max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
.mega__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding:28px 0 24px}
/* group titles: small orange label over a hairline, so they don't read like the links below (owner, 26 Oct 2026) */
.mega__title{margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700;line-height:1.3;color:var(--orange-700)}
.mega__list,.mega__guide-list{list-style:none}
.mega-item{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-radius:2px;color:var(--char-900);text-decoration:none}
.mega-item__title{font-size:15.5px;font-weight:600;line-height:1.3;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.mega-item__desc{font-size:14px;line-height:1.35;color:var(--text-muted)}
.mega-item:hover .mega-item__title,.mega-item:focus-visible .mega-item__title,.mega-item[aria-current="page"] .mega-item__title{text-decoration-line:underline}
.mega__guide-list a{display:block;padding:7px 0;border-radius:2px;font-size:15px;font-weight:550;line-height:1.35;color:var(--text);text-decoration:none;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.mega__guide-list a:hover,.mega__guide-list a:focus-visible,.mega__guide-list a[aria-current="page"]{text-decoration-line:underline}
.mega__guide-list .mega__all{font-weight:700}
.mega__strip{background:var(--paper);border-top:1px solid var(--line)}
.mega__strip-inner{display:flex;align-items:center;justify-content:space-between;gap:8px 28px;flex-wrap:wrap;min-height:52px;padding-block:12px;font-size:15px}
.mega__strip a{color:var(--text);font-weight:650;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;font-variant-numeric:tabular-nums}
.mega__strip a:hover{color:var(--orange-700)}
.mega__areas strong{font-weight:700}
/* 1024-1279: titles only, so the panel fits a 768px-tall screen */
@media (min-width:1024px) and (max-width:1279px){.mega-item__desc{display:none}.mega__grid{gap:20px}}
.mega-scrim{position:fixed;inset:0;z-index:45;background:rgba(14,13,12,.4);opacity:0;visibility:hidden;transition:opacity 140ms var(--ease-in),visibility 0s linear 140ms}
.mega-scrim.is-on{opacity:1;visibility:visible;transition:opacity 180ms var(--ease-out),visibility 0s}
@media (max-width:1023px){.mega,.mega-scrim{display:none}}

/* drawer */
.drawer{position:fixed;inset:0;z-index:100}
.drawer__backdrop{position:absolute;inset:0;background:rgba(14,13,12,.55);opacity:0;transition:opacity 240ms var(--ease-out)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(100vw,420px);height:100vh;height:100dvh;background:#fff;box-shadow:var(--e-3);transform:translateX(100%);transition:transform 340ms var(--ease-drawer)}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 12px 0 16px;background:var(--char-900);flex:none}
.drawer__logo-img{width:120px;height:auto}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px}
.drawer__call{display:grid;gap:10px;padding:4px 0 16px;border-bottom:1px solid var(--line)}
.drawer__live{font-size:14px;line-height:1.4;color:var(--text-muted)}
.drawer__acc .acc__item{border-bottom:1px solid var(--line)}
.drawer__acc .acc__btn{min-height:56px;padding:14px 0;font-size:18px;font-weight:700}
.drawer__acc .acc__inner{padding:0 0 14px;color:var(--text)}
.drawer__areas{font-size:14.5px;line-height:1.45;color:var(--text-muted)}
.drawer__group{margin:16px 0 2px;font-size:13.5px;font-weight:700;color:var(--orange-700)}
.drawer__list{list-style:none}
.drawer__item{display:flex;align-items:center;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line);font-weight:550;font-size:16px;color:var(--char-900);text-decoration:none;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.drawer__list li:last-child .drawer__item{border-bottom:0}
.drawer__item[aria-current="page"]{font-weight:700;text-decoration-line:underline}
.drawer__acc .drawer__acc-btn[aria-current] .acc__q{text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:5px}
.drawer__all{margin:12px 0 0}
.drawer__all a{font-weight:700;color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.drawer__links{list-style:none}
.drawer__links a{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;color:var(--char-900);text-decoration:none;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--orange-500)}
.drawer__links a[aria-current]{text-decoration-line:underline}
.drawer__links a.drawer__urgent{color:var(--orange-700)}
.drawer__links .nav__dot{display:inline-block;margin-right:10px;vertical-align:3px}
.drawer__links .icon{display:none}
.drawer__offices{display:grid;gap:16px;padding:16px 0 0;font-size:15px}
.drawer__office-name{font-weight:700}
.drawer__office-svc,.drawer__office-addr{color:var(--text-muted);line-height:1.45}
.drawer__office a,.drawer__email{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text);font-weight:650;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.drawer__email{text-decoration:none;overflow-wrap:anywhere}
.drawer__email .icon{width:18px;height:18px;color:var(--orange-700)}
html.is-locked{overflow:hidden}
@media (min-width:1024px){.drawer{display:none!important}}

/* mobile action bar: solid white, one rule on top */
.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);transform:translateY(110%);transition:transform 300ms var(--ease-drawer);visibility:hidden}
.action-bar.is-visible,html:not(.js) .action-bar{transform:none;visibility:visible}
.action-bar.is-visible{transition:transform 300ms var(--ease-drawer),visibility 0s}
.action-bar__btn{min-height:48px;padding:0 12px;font-size:16px}
.action-bar--single{grid-template-columns:1fr}
@media (min-width:768px){.action-bar{display:none}}

/* footer: a plain multi-column directory */
.site-footer{position:relative;background:var(--char-950);color:var(--text-on-dark-muted);padding:clamp(48px, 6vw, 80px) 0 24px;font-size:15px}
/* room for the fixed bar at the end of the page, painted in the footer colour */
@media (max-width:767px){.site-footer{padding-bottom:calc(24px + 68px + env(safe-area-inset-bottom))}}
.footer__cols{display:grid;gap:0}
.footer__col--brand{padding-bottom:24px;border-bottom:1px solid var(--line-on-dark)}
.footer__logo{display:inline-block;border-radius:4px}
.footer__logo-img{width:170px;height:auto}
.footer__tagline{margin-top:14px;max-width:40ch;line-height:1.6}
.footer__contact{list-style:none;display:grid;gap:2px;margin-top:16px}
.footer__phone,.footer__email{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;text-decoration:none;border-radius:2px}
.footer__phone{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.footer__phone .icon,.footer__email .icon{width:18px;height:18px;color:var(--orange-400)}
.footer__email{overflow-wrap:anywhere}
.footer__phone:hover span,.footer__email:hover span{text-decoration:underline;text-decoration-color:var(--orange-400);text-underline-offset:3px}
.footer__note{display:block;margin-top:-6px;font-size:14px}
.footer__h{font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--orange-400);margin:24px 0 8px}   /* column labels match the menu labels (owner, 26 Oct) */
.footer__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;font:inherit;color:inherit;text-align:left}
.footer__toggle .icon{width:18px;height:18px;transition:transform var(--dur-2)}
.footer__toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
.footer__col.is-acc{border-bottom:1px solid var(--line-on-dark)}
.footer__col.is-acc .footer__h{margin:0;font-size:15px;color:#fff}   /* phone accordion toggles stay plain */
.footer__col.is-acc .footer__links{padding-bottom:16px}
.footer__links{list-style:none;display:grid;gap:0}
.footer__links a{display:inline-flex;align-items:center;min-height:36px;color:var(--text-on-dark-muted);text-decoration:none;line-height:1.35;border-radius:2px;transition:color var(--dur-2)}
.footer__links a:hover,.footer__links a[aria-current]{color:#fff}
.footer__links a[aria-current]{text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:5px}
.footer__links .footer__all{color:#fff;font-weight:620}
.footer__office + .footer__office{margin-top:18px}
.footer__office-name a{color:#fff;font-weight:650;text-decoration:none}
.footer__office-name a:hover,.footer__office-name a[aria-current]{text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:4px}
.footer__office-svc{font-size:14px;margin-bottom:2px}
.footer__office address{line-height:1.55}
.footer__dir{display:inline-flex;align-items:center;min-height:40px;color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--orange-400);text-decoration-thickness:1.5px;text-underline-offset:3px}
.footer__notes{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-on-dark)}
.footnotes{list-style:none;font-size:13.5px;line-height:1.5}
.footnotes li{display:flex;align-items:baseline;gap:6px}
.footnotes__mark{font-size:.8em;vertical-align:super;color:#fff;font-weight:700}
.footnotes__back{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:4px;border-radius:4px;color:var(--orange-400)}
.footnotes__back .icon{width:14px;height:14px}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-on-dark);font-size:14px}
.footer__top-link{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--orange-400);text-underline-offset:3px}
@media (min-width:768px){
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  .footer__col--brand{grid-column:1 / -1}
}
@media (min-width:1024px){
  .footer__cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
  .footer__col--brand{grid-column:auto;padding-bottom:0;border-bottom:0}
  .footer__h{margin-top:0}
}

/* closing bands: flat, full width, straight onto the footer (no inset panel, texture, glow or photo overlay).
   The emergency band is white with an orange top rule (fix1): charcoal on the charcoal footer read as one dark block. */
.band--emergency,.band--quote{position:relative;padding-block:0}
.band__panel{position:relative;color:var(--text);background:#fff;border-top:4px solid var(--orange-500);padding-block:clamp(48px, 6vw, 80px)}
.band__inner{display:grid;gap:32px}
.band__main{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.band__label{font-size:15px;font-weight:700;color:var(--orange-700)}
.band__title{font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.015em;max-width:18ch}
.band__text{font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:50ch}
.band__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.band .safe-steps__list li{color:var(--text-muted)}
.band .safe-steps__list li strong{color:var(--text)}
@media (max-width:479px){.band__actions .btn{width:100%}}
@media (min-width:1024px){.band__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px, 5vw, 80px);align-items:center}}

/* quote band: flat orange with charcoal text (5.9:1) */
.band--quote{color:var(--char-900)}
.band--quote__panel{background:var(--orange-500);padding-block:clamp(40px, 5vw, 64px)}
.band--quote__inner{display:grid;gap:24px;align-items:center}
.band--quote__title{font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.015em;max-width:20ch}
.band--quote__text{margin-top:10px;font-size:var(--fs-lead);line-height:1.5;max-width:52ch}
.band--quote__actions{display:flex;flex-wrap:wrap;gap:12px}
.band--quote .btn--call{border-color:var(--char-900)}
@media (max-width:479px){.band--quote__actions .btn{width:100%}}
@media (min-width:1024px){.band--quote__inner{grid-template-columns:minmax(0,1fr) auto;gap:20px 48px}}

/* =========================================================== 8. PAGE SECTIONS: HOME */

/* --- hero: a full-bleed photo with the header over it (one composition).
   Phones/tablets: the photo on top (house, panels and battery all in frame), then the text on charcoal, then the quote form
   in its own section (main.js quoteDock). >=1024: the photo fills the hero; text bottom-left on a dark fade, the white form
   card on the right. Crop: --hero-x / --hero-y (object-position) per breakpoint, so a new photo only needs new values. */
.hero{position:relative;isolation:isolate;background:var(--char-950);color:#fff;overflow:hidden}
.hero__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--char-800)}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-x, 50%) var(--hero-y, 55%)}   /* hero-solar-aerial: battery ~47-56% x, array 37-80% x */
@media (min-width:600px){.hero__media{aspect-ratio:3/2}}
.hero__inner{position:relative;padding:24px 0 40px}
.hero__text{display:flex;flex-direction:column;align-items:flex-start}
.hero__title{font-size:var(--fs-display);font-weight:750;line-height:1.08;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.hero__hl{color:var(--orange-500)}
@media (min-width:600px){.hero__hl{white-space:nowrap}}   /* "20 years of experience" stays on one line; phones may wrap it */
@media (max-width:599px){.hero__title{font-size:clamp(28px, calc((100vw - 48px) / 10.8), var(--fs-display))}}   /* small phones: the phrase (~10.5em wide) fits its own line, so the H1 stays at three lines */
.hero__lead{margin-top:14px;font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.86);max-width:50ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero__facts{margin-top:24px;color:rgba(255,255,255,.86)}
.hero__facts li{border-color:rgba(255,255,255,.32)}
@media (min-width:1024px){
  .hero__facts{display:flex;flex-wrap:wrap;gap:6px 0;max-width:35rem;margin:18px 0 -6px -14px;padding-block:6px;overflow:hidden;font-size:14.5px}   /* 35rem: the third fact always wraps back to the dark left side (on one line it sat on bright grass, ~3.9:1 at 1280) */   /* the 6px padding (room for the footnote's focus ring) is netted out, so the H1 does not move */
  .hero__facts li{margin-left:-1px;padding:0 14px;border-left:1px solid rgba(255,255,255,.32);white-space:nowrap}
}
.hero__card{padding-top:32px}
.hero__sentinel{position:relative;display:block;width:1px;height:1px}
@media (max-width:479px){.hero__ctas .btn{width:100%}}
/* tablets: the text block uses the width (it sat in the left ~55%), and the three facts sit in one row split by thin rules */
@media (min-width:768px) and (max-width:1023px){
  .hero__title{max-width:22ch}
  .hero__lead{max-width:60ch}
  .hero__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:760px}
  .hero__facts li{padding:0 16px;border-left:1px solid rgba(255,255,255,.32)}
  .hero__facts li:first-child{padding-left:0;border-left:0}
}
@media (min-width:1024px){
  .hero{display:flex;align-items:flex-end;min-height:clamp(576px, calc(100svh - 36px - var(--header-h)), 856px)}   /* 4 Nov: the header is solid and above the hero now */
  /* the photo still runs up behind the header's height (clipped by .hero's overflow), so it scales and crops exactly as it did
     under the old transparent header */
  .hero__media{position:absolute;inset:calc(-1 * var(--header-h)) 0 0;z-index:-1;aspect-ratio:auto}
  /* shade behind the text: one long eased fade across the full width and height, darkest on the left and a light tint
     on the right, so no edge, corner or band shows (4 Nov: the owner found a radial patch, a bottom-left-only shade and a
     short fade unnatural). Measured 1024-2560 (~/bhullar-redesign/tools/hero_contrast.py): orange phrase >= 3:1, lead >= 8:1 */
  .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,12,.92) 0%,rgba(14,13,12,.92) 20%,rgba(14,13,12,.89) 30%,rgba(14,13,12,.81) 40%,rgba(14,13,12,.7) 50%,rgba(14,13,12,.56) 60%,rgba(14,13,12,.42) 70%,rgba(14,13,12,.31) 80%,rgba(14,13,12,.23) 90%,rgba(14,13,12,.2) 100%)}
  .hero__img{--hero-x:30%;--hero-y:50%}   /* battery lands in the gap between the H1 and the card */
  .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px, 28vw, 400px);gap:clamp(32px, 4vw, 64px);align-items:end;width:min(100% - 2*var(--gutter), 1240px);padding:32px 0 clamp(40px, 4vw, 56px)}
  .hero__title{max-width:18ch}   /* 18ch: the orange phrase (~17.4ch) fits on its own line */
  .hero__card{padding-top:0}
  /* a fine ring keeps the card's edge visible where it sits on the white battery; one soft shadow below */
  .hero .qform{padding:24px;box-shadow:0 0 0 1px rgba(23,21,19,.16),0 24px 56px -24px rgba(0,0,0,.65)}
}
/* 1024-1279: a narrower card (368px keeps a 320px content box: three chips a row) and the photo shifted right, so the house,
   the panels and more of the battery show */
@media (min-width:1024px) and (max-width:1279px){
  .hero__img{--hero-x:15%}   /* 26 Oct: was 50%, which put the white battery behind the orange phrase (1024: 1.2:1, 1200: 2.4:1); 15% keeps it >=4.4:1 */
  .hero__lead{max-width:46ch}
  .hero__inner{grid-template-columns:minmax(0,1fr) 368px}
}

/* quote card dock: in the hero >=1024, its own paper section below (moved by JS) */
.quote-dock{padding-inline:var(--gutter)}
.quote-dock .qform{max-width:640px;margin-inline:auto}
.quote-dock:empty,html:not(.js) .quote-dock{display:none}
@media (max-width:1023px){html.js .hero__card{display:none}}
@media (min-width:1024px){.quote-dock{display:none}}
.is-filtering-out,.is-filtering-in{opacity:0}
[data-group]{transition:opacity 240ms var(--ease-out)}

/* --- services (home): an even grid of photo cards, then a plain directory */
.card-grid{display:grid;gap:36px 24px}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}}
/* exactly three cards (related services, Adelaide's main services): one row of three from 640px, so no card sits alone */
@media (min-width:640px) and (max-width:1023px){.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 20px}.card-grid--3 .card-service__text{font-size:15px}}
.services-home__more{margin-top:clamp(44px, 5vw, 60px)}
.services-home__subtitle{margin-bottom:0;padding-bottom:10px;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--orange-700)}   /* label over the list's top rule, like the menu */
.services-home__ask{margin-top:28px;font-size:var(--fs-body)}
.services-home__ask a{font-weight:650;font-variant-numeric:tabular-nums}
.services-home__all{margin-top:10px}

/* --- why customers choose us: one photo + a plain list in two columns split by a thin rule */
.why__layout{display:grid;gap:32px}
.why__media{margin:0}
.why__media picture{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:var(--paper)}
.why__img{width:100%;height:100%;object-fit:cover}
.why__intro{margin-top:12px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:52ch}
.why__list{list-style:none;margin-top:24px}
.why__intro a{font-weight:650;color:var(--text)}
.why__item{padding:16px 0;border-top:1px solid var(--line)}
.why__title{font-size:17px;font-weight:700;line-height:1.3}
.why__text{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--text-muted)}
/* >=768: six items in two columns of three (filled top to bottom, rows aligned) split by one thin vertical line (fix2) */
@media (min-width:768px){
  .why__list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:48px}
  .why__list::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line)}
}
@media (min-width:1024px){
  .why__layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px, 5vw, 72px);align-items:center}
  .why__media picture{aspect-ratio:4/5;max-height:640px}
}

/* --- process */
.process__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px, 4vw, 44px)}
@media (max-width:479px){.process__ctas .btn{width:100%}}
@media (max-width:639px){.process .tabs__label--lg{display:none}.process .tabs__label--sm{display:inline}}

/* --- solar: a static, flat diagram */
.flow{display:grid;gap:24px;margin:0}
.flow__canvas{position:relative}
.flow__svg{width:100%;height:auto;overflow:visible}
.flow__svg--h{display:none}
.flow__svg--v{display:block;max-width:300px;margin-inline:auto}
@media (max-width:639px){.flow__svg--v{max-width:240px}}
@media (min-width:640px) and (max-width:1023px){.flow{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px 36px;align-items:center}}
@media (min-width:1024px){.flow__svg--h{display:block}.flow__svg--v{display:none}}
.flow__path{fill:none;stroke:var(--orange-500);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.flow__path--opt{stroke-dasharray:2 8}
.flow__line{fill:none;stroke:var(--char-900);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow__box{fill:#fff;stroke:var(--char-900);stroke-width:2;stroke-linejoin:round}
.flow__panel{fill:var(--char-700);stroke:var(--char-900);stroke-width:2;stroke-linejoin:round}
.flow__cells{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.5}
.flow__disc{fill:none;stroke:var(--orange-600);stroke-width:2.5}
.flow__rays{stroke:var(--orange-600);stroke-width:2.5;stroke-linecap:round}
.flow__caps{min-width:0}
.flow__list{list-style:none;display:grid;gap:12px}
.flow__cap{display:block;font-size:15.5px;line-height:1.5;color:var(--text-muted)}
.flow__cap strong{color:var(--text);font-weight:700}
.flow__cap-num{font-weight:750;color:var(--orange-700);font-variant-numeric:tabular-nums}
.flow__cap-num::after{content:". "}
/* >=1024: five columns, each centred under its node in the drawing */
@media (min-width:1024px){.flow__list{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:start;text-align:center}}
.solar-battery-home{display:grid;gap:24px;margin-top:clamp(44px, 5vw, 64px);padding-top:clamp(40px, 5vw, 56px);border-top:1px solid var(--line)}
.solar-battery-home__media picture{aspect-ratio:3/2;border-radius:var(--r-xl);overflow:hidden;background:var(--paper)}
.solar-battery-home__img{width:100%;height:100%;object-fit:cover}
.solar-battery-home__title{font-size:var(--fs-h3);font-weight:700}
.solar-battery-home__body > p{margin-top:12px;color:var(--text-muted);max-width:52ch}
.solar-battery-home__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.solar-battery-home__body > .solar-battery-home__more{margin-top:16px}
@media (max-width:479px){.solar-battery-home__ctas .btn{width:100%}}
@media (min-width:768px){.solar-battery-home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px, 5vw, 64px);align-items:center}}
.resources-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-top:clamp(44px, 5vw, 64px);padding-top:clamp(40px, 5vw, 56px);border-top:1px solid var(--line)}
.resources-row{display:grid;gap:32px;margin-top:clamp(20px, 2vw, 28px)}
/* Home: "From the blog" is its own section (fix2): the H2 with "All articles" on its baseline */
.home-blog__head{margin:0;padding:0;border:0}
.home-blog .resources-row{margin-top:var(--stack-head)}
.home-blog + .areas-strip{border-top:0}
@media (min-width:640px) and (max-width:1023px){.resources-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.resources-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}

/* --- testimonials: plain pull quotes */
.testimonials__grid{display:grid;gap:36px;max-width:680px}
@media (min-width:1024px){.testimonials__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;max-width:none}}

/* --- offices + maps (About, Contact): the offices are plain text tabs on thin rules; the chosen one is underlined */
.areas{display:grid;gap:24px}
.areas__side{display:flex;flex-direction:column;gap:20px;min-width:0}
.areas__tabs{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;border-top:1px solid var(--line)}
.office{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:14px 0;border-bottom:1px solid var(--line);text-align:left;color:var(--text-muted);border-radius:0}
.office__city{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--char-900);text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:5px}
.office__addr{display:none;font-size:15px;line-height:1.45}
.office__svc{font-size:14px;font-weight:600;line-height:1.35;color:var(--text)}
.office.is-selected .office__city{text-decoration-line:underline}
.office:focus-visible{outline-offset:2px}
@media (hover:hover) and (pointer:fine){.office:not(.is-selected):hover .office__city{text-decoration-line:underline;text-decoration-color:var(--line-strong)}}
.areas__note{font-size:15px;line-height:1.5;color:var(--text-muted)}
.map-panel__frame{position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
/* the iframe fades in over the poster only after its load event (main.js adds .has-map); until then the poster is usable */
.map-panel__frame iframe{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity 300ms var(--ease-out)}
.map-panel.has-map .map-panel__frame iframe{opacity:1;pointer-events:auto}
.map-poster{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;color:#fff;isolation:isolate;background:var(--char-800)}
.map-poster picture{position:absolute;inset:0;z-index:-2}
.map-poster__img{width:100%;height:100%;object-fit:cover}
.map-poster::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,13,12,.62)}
.map-poster__content{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}
.map-poster__pin{display:grid;place-items:center;width:48px;height:48px}
.map-poster__pin .icon{width:40px;height:40px;color:var(--orange-400)}
.map-poster__addr{font-size:17px;line-height:1.45}
.map-touch{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:transparent;color:#fff}
.map-touch span{padding:8px 14px;border-radius:var(--r-xs);background:rgba(14,13,12,.78);font-size:14px;font-weight:600}
.map-panel__foot{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.map-panel__addr{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.map-panel__addr .icon{width:20px;height:20px;color:var(--orange-700);margin-top:2px}
.map-panel__actions{display:grid;gap:10px}
.map-panel__actions .btn{width:100%}
@media (min-width:768px){
  .office__addr{display:block}
  .areas__tabs{grid-template-columns:1fr}
  .map-panel__frame{aspect-ratio:4/3}
  .map-panel__foot{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .map-panel__actions{display:flex;flex-wrap:wrap}
  .map-panel__actions .btn{width:auto}
}
@media (min-width:1024px){
  .areas{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 4vw, 56px);align-items:center}
  .map-panel__frame{aspect-ratio:16/10}
  .office__city{font-size:22px}
}

/* --- FAQ */
.faq-sec__grid{display:grid;gap:24px}
.faq-sec__head .section-head{margin-bottom:12px}
.faq-sec__list .acc__item:first-child{border-top:1px solid var(--line)}
@media (min-width:1024px){
  .faq-sec__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px, 6vw, 96px);align-items:start}
  .faq-sec__head{position:sticky;top:100px}
}
@media (max-width:1023px){
  .faq-sec__head{display:contents}
  .faq-sec__head .section-head{order:0;margin-bottom:0}
  .faq-sec__call{order:2}
  .faq-sec__list{order:1}
}

/* =========================================================== 8b. THANK-YOU + 404 (light, plain) */
.thanks__inner{display:flex;flex-direction:column;align-items:flex-start}
.thanks__title{font-size:var(--fs-h1);font-weight:700;line-height:1.1;letter-spacing:-.015em;max-width:20ch;text-wrap:balance}
.thanks__lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:52ch}
.thanks__urgent{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);line-height:1.55;max-width:56ch}
.thanks__urgent a{font-weight:700;color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.thanks__h2{margin-top:40px;font-size:var(--fs-h4);font-weight:700}
.thanks__steps{display:grid;gap:8px;margin-top:12px;padding-left:1.4em;line-height:1.5}
.thanks__steps li::marker{font-weight:700}
.thanks__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.nf{background:none;border-bottom:1px solid var(--line);padding-block:clamp(40px, 6vw, 88px)}
.nf__inner{display:flex;flex-direction:column;align-items:flex-start}
.nf__title{font-size:var(--fs-h1);font-weight:700;line-height:1.1;letter-spacing:-.015em}
.nf__lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:48ch}
.nf__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:479px){.nf__actions .btn{width:100%}}
.nf-links__title{font-size:var(--fs-h3);font-weight:700;line-height:1.2;margin-bottom:16px}
.nf-links__more{display:flex;flex-wrap:wrap;gap:10px 28px}

/* =========================================================== 8c. INNER PAGES: shared */
.prose p{max-width:68ch;color:var(--text-muted);line-height:1.7}
.prose p + p{margin-top:16px}

/* --- compact page hero (paper, under the charcoal header): crumbs, H1, lead, buttons; an optional photo on the right */
.page-hero{padding-block:clamp(16px, 2.4vw, 28px) var(--section-y-sm)}
.page-hero .crumbs,.svc-hero .crumbs{margin-bottom:clamp(20px, 3vw, 36px)}
.page-hero__grid{display:grid;gap:28px;align-items:end}
.page-hero__title,.svc-hero__title{font-size:var(--fs-h1);font-weight:700;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.page-hero__title{max-width:20ch}
.page-hero__lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:56ch}
.page-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.page-hero__facts{margin-top:24px;color:var(--text-muted)}
/* >=768: one row split by thin rules, wrapping where needed. Each item has a left rule; the list is shifted left and clips, so
   the first item on every line loses its rule (fix1: three stacked muted lines read like fine print) */
@media (min-width:768px){
  .page-hero__facts{display:flex;flex-wrap:wrap;gap:6px 0;margin:16px 0 0 -14px;padding-block:8px;overflow:hidden}
  .page-hero__facts li{margin-left:-1px;padding:0 14px;border-left:1px solid var(--line-strong)}
}
/* text-only heroes: white with a rule under them, not a paper band with an empty right half (fix1) */
.page-hero--blog .page-hero__title{max-width:26ch}
@media (max-width:479px){.page-hero__actions .btn,.svc-hero__ctas .btn{width:100%}.svc-hero__ctas{align-self:stretch}}

/* --- filter toolbar (services hub, gallery): plain text toggles on one rule, like tabs */
.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 24px;margin:0 0 clamp(28px, 3.4vw, 44px);border-bottom:1px solid var(--line)}
.filter-bar__scroll{display:flex;gap:4px 22px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.filter-bar__scroll::-webkit-scrollbar{display:none}
.filter-chip{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 2px;color:var(--text-muted);font-size:15.5px;font-weight:600;line-height:1.2;white-space:nowrap;transition:color var(--dur-2)}
.filter-chip[aria-pressed="true"]{color:var(--char-900);font-weight:700;box-shadow:inset 0 -2px 0 var(--orange-500)}
.filter-chip:focus-visible{outline-offset:-3px}
.filter-bar__live{padding-bottom:14px;font-size:14px;color:var(--text-muted);white-space:nowrap}
html:not(.js) .filter-bar{display:none}
@media (hover:hover) and (pointer:fine){.filter-chip:not([aria-pressed="true"]):hover{color:var(--char-900)}}
@media (max-width:767px){
  .filter-bar{margin-inline:calc(-1 * var(--gutter))}
  .filter-bar__scroll{width:100%;padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .filter-bar__live{padding-inline:var(--gutter);padding-top:10px}
}

/* --- "On this page": a plain row of jump links under the hero (not sticky) */
.onpage{border-bottom:1px solid var(--line);background:#fff}
.onpage__inner{display:flex;flex-wrap:wrap;align-items:center;gap:2px 24px;padding-block:10px}
.onpage__label{font-size:14px;font-weight:600;color:var(--text-muted)}
.onpage__list{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px}
.onpage__link{display:inline-flex;align-items:center;min-height:40px;color:var(--text);font-size:15px;font-weight:600;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color var(--dur-2)}
.onpage__link:hover{color:var(--orange-700)}
@media (pointer:coarse){.onpage__link{min-height:44px}}
/* phones: the links scroll sideways on one line, like the hub filters, instead of wrapping to four ragged rows (fix2) */
@media (max-width:639px){
  .onpage__inner{flex-wrap:nowrap;gap:16px;padding-block:2px}
  .onpage__label{flex:none}
  .onpage__list{flex-wrap:nowrap;gap:0 20px;min-width:0;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .onpage__list::-webkit-scrollbar{display:none}
  .onpage__link{white-space:nowrap}
  .onpage__link:focus-visible{outline-offset:-3px}
  .onpage__list.is-end{-webkit-mask-image:none;mask-image:none}
}

/* --- areas strip */
.areas-strip{padding-block:28px clamp(40px, 4vw, 56px);border-top:1px solid var(--line)}
.areas-strip__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.areas-strip__text{display:flex;align-items:flex-start;gap:10px;line-height:1.5;flex:1 1 520px;max-width:none}
.areas-strip__text .icon{width:20px;height:20px;margin-top:2px;color:var(--orange-700)}
.areas-strip__text strong{font-weight:700}
.areas-strip--band{background:var(--paper);border-top:0;padding-block:clamp(22px, 3vw, 30px)}
/* Home "Where we work": text beside a static map of SE Australia with the two offices (where_map(), owner 3 Nov 2026) */
.areas-strip--map{padding-block:clamp(44px, 5vw, 72px)}
.areas-map{display:grid;gap:24px;align-items:center}
.areas-map__text .section-head__title{margin-bottom:14px}
.areas-map__text .link-arrow{display:inline-block;margin-top:16px}
@media (min-width:900px){.areas-map{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 4vw, 64px)}}
.where-map{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#DFE7EA}
.where-map__img{position:absolute;inset:0;display:block;width:100%;height:100%}
.where-map__state{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font-size:12.5px;font-weight:600;color:var(--text-muted);white-space:nowrap;pointer-events:none}   /* plain case: no tracked caps (DESIGN-DESLOP) */
.where-map__pins{list-style:none;margin:0;padding:0}
.where-map__pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.where-map__pin a{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;transform:translate(-8px,-50%);color:var(--text);text-decoration:none;border-radius:4px}
.where-map__pin--melbourne a{flex-direction:row-reverse;transform:translate(calc(-100% + 8px),-50%)}
.where-map__dot{flex:none;width:16px;height:16px;border-radius:50%;background:var(--orange-500);border:3px solid #fff;box-shadow:0 0 0 1px rgba(23,21,19,.4)}
.where-map__label{display:flex;flex-direction:column;padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:4px;line-height:1.3;white-space:nowrap}
.where-map__pin--melbourne .where-map__label{align-items:flex-end}
.where-map__label strong{font-size:14px;font-weight:700}
.where-map__label > span{font-size:12.5px;color:var(--text-muted)}
.where-map__pin a:hover strong,.where-map__pin a:focus-visible strong{text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:479px){.where-map__state{display:none}.where-map__label{padding:5px 8px}.where-map__label strong{font-size:13px}.where-map__label > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}   /* small phones: office name only on the map (the line beside it says what we do where); the second line stays for screen readers */

/* --- call box (emergency page aside): a bordered panel, the number in large charcoal type */
.call-box{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:24px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:#fff}
.call-box__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.call-box__text{color:var(--text-muted);line-height:1.5}
.call-box__more{font-size:15px;line-height:1.5}
.call-box__more a{font-weight:650;color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}

/* --- a plain block of text in a card grid's free cells (hub "Not sure which service", Melbourne "Need an electrician?") */
.svc-hub__ask,.card-grid__note{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.svc-hub__ask-title,.card-grid__note-title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.svc-hub__ask-text,.card-grid__note p{color:var(--text-muted);line-height:1.6;max-width:46ch}
.svc-hub__ask a,.card-grid__note a{font-weight:650;color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;font-variant-numeric:tabular-nums}
.svc-hub__ask a:hover,.card-grid__note a:hover{color:var(--orange-700)}
@media (max-width:1023px){.svc-hub__ask,.card-grid__note{grid-column:1 / -1;padding-top:20px;border-top:1px solid var(--line)}}
@media (min-width:1024px){.svc-hub__ask,.card-grid__note{padding:4px 0 0 28px;border-left:1px solid var(--line)}}

/* =========================================================== 8d. SERVICES HUB */
.svc-hub{padding-top:clamp(28px, 3.4vw, 44px)}
.svc-hub__grid{list-style:none;display:grid;gap:36px 24px}
.svc-hub__item{display:flex;min-width:0}
.svc-hub__item > .card-service{flex:1}
@media (min-width:640px){.svc-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.svc-hub__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}.svc-hub__ask{grid-column:span 2}}
.goals-sec{padding-top:0}
.goals-sec > .container{padding-top:var(--section-y-sm);border-top:1px solid var(--line)}
.dir-multi{display:flex;flex-direction:column;gap:2px;padding:14px 0}
.dir-multi .dir-link__title{color:var(--text)}
.dir-multi a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.dir-multi a:hover{color:var(--orange-700)}
/* homes + businesses: photo, title, a link list with thin rules, one pull quote; no panels */
.split{display:grid;gap:56px}
.split__col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.split__media{width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.split__img{width:100%;height:100%;object-fit:cover}
.split__title{margin-top:20px;font-size:var(--fs-h3);font-weight:700;line-height:1.2}
.split__list{list-style:none;display:grid;width:100%;margin-top:14px;column-gap:28px;border-top:1px solid var(--line)}
.split__list a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);color:var(--char-900);font-weight:600;text-decoration:none;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.split__list a:hover,.split__list a:focus-visible{text-decoration-line:underline}
.split__quote{width:100%;margin-top:28px;padding-top:16px;border-top:2px solid var(--orange-500)}
.split__quote blockquote p{font-size:17px;line-height:1.6}
.split__quote figcaption{margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--text-muted)}
.split__quote figcaption strong{font-weight:650;color:var(--text)}
@media (min-width:640px){.split__list{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px, 5vw, 72px)}}

/* =========================================================== 8e. SERVICE DETAIL (+ city pages, which share the hero) */
.svc-hero{padding-block:clamp(16px, 2.4vw, 28px) clamp(40px, 5vw, 72px)}
.svc-hero__grid{display:grid;gap:30px}
.svc-hero__media{position:relative;width:100%}
.svc-hero__frame{overflow:hidden;background:var(--paper)}
.svc-hero__img{width:100%;height:100%;object-fit:cover}
.svc-hero__text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.svc-hero__text > .hero__sentinel{position:relative;display:block;width:1px;height:1px}
.svc-hero__title{max-width:19ch}
.svc-hero__lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:54ch}
.svc-hero__area{display:flex;align-items:flex-start;gap:10px;margin-top:16px;max-width:56ch;font-size:15.5px;line-height:1.5;color:var(--text-muted)}
.svc-hero__area .icon{width:18px;height:18px;margin-top:3px;color:var(--orange-700)}
.svc-hero__area strong{color:var(--text);font-weight:700}
.svc-hero__area a{color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.svc-hero__area a:hover{color:var(--orange-700)}
.svc-hero__ticks{margin-top:20px;gap:8px;font-weight:600}
/* emergency: the number itself, large, above the buttons */
.svc-hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
/* phones: the buttons move above the ticks, so they sit in the first viewport */
@media (max-width:639px){
  .svc-hero__ctas{order:1}
  .svc-hero__text > .hero__sentinel{order:2}
    .svc-hero__ticks{order:4}
}
/* emergency: the safe steps sit under the hero in a plain bordered box */
.svc-safe{background:var(--paper);padding-block:clamp(24px, 3vw, 40px);border-top:1px solid var(--line)}
.svc-safe .safe-steps{border-color:var(--line-strong);background:#fff}
@media (min-width:768px){.safe-steps--row .safe-steps__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}}
@media (min-width:1024px){.safe-steps--row .safe-steps__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* body: overview + aside form, then full-width sections (.svc-rest), each opening with a thin rule */
.svc-body{padding-block:clamp(44px, 5.5vw, 80px)}
.svc-body__grid{display:grid;gap:clamp(48px, 6vw, 72px)}
.svc-main{min-width:0}
/* signs under a photo-less overview, in the main column beside the quote form (fix2) */
.svc-main > .svc-sec + .svc-sec{margin-top:clamp(36px, 4.5vw, 56px);padding-top:clamp(36px, 4.5vw, 56px);border-top:1px solid var(--line)}
.svc-sec__title{font-size:var(--fs-h2);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.svc-sec__intro{margin-top:12px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:58ch}
.svc-aside{display:flex;flex-direction:column;gap:20px;min-width:0}
.svc-rest{display:flex;flex-direction:column;gap:clamp(48px, 5.5vw, 72px);margin-top:clamp(48px, 5.5vw, 72px)}
.svc-rest > .svc-sec:not(.svc-quote){padding-top:clamp(36px, 4.5vw, 56px);border-top:1px solid var(--line)}
@media (min-width:1024px){
  .svc-body__grid{grid-template-columns:minmax(0,8fr) minmax(344px,4fr);gap:clamp(40px, 4.6vw, 72px)}
  .svc-aside__sticky{position:sticky;top:96px}
}
/* a section on a full-width paper band (How it works): breaks the long white run of a service page (fix1). The band is a
   pseudo-element as wide as the viewport (html clips the overflow), so the section keeps the container's width. */
.svc-rest > .svc-sec.svc-sec--band{position:relative;isolation:isolate;border-top:0;padding-block:clamp(40px, 5vw, 64px)}
.svc-sec--band::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--paper)}
/* signs beside a photo (solar "Is solar right for you?", switchboard "Signs you need …") */
.svc-signs{display:grid;gap:24px}
.svc-signs__media{position:relative;aspect-ratio:3/2;border-radius:var(--r-xl);overflow:hidden;background:var(--paper)}
.svc-signs__media picture{position:absolute;inset:0}
.svc-signs__img{width:100%;height:100%;object-fit:cover}
.svc-signs__list{margin-top:20px}
.svc-signs__list .points__item:last-child{padding-bottom:0}
@media (min-width:768px){
  .svc-signs{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 4.5vw, 72px);align-items:stretch}
  .svc-signs__media{aspect-ratio:auto;min-height:360px}
}
.svc-block{margin-top:clamp(36px, 4vw, 52px)}
.svc-block__title{margin-bottom:14px;font-size:var(--fs-h3);font-weight:700;line-height:1.2}

/* overview */
.svc-overview{display:grid;gap:28px}
.svc-overview__prose{margin-top:18px}
.svc-overview__prose p:first-child{font-size:var(--fs-lead);color:var(--text);line-height:1.6}
.svc-overview__media{margin:0}
.svc-overview__frame{aspect-ratio:3/2;border-radius:var(--r-xl);overflow:hidden;background:var(--paper)}
.svc-overview__img{width:100%;height:100%;object-fit:cover}
@media (min-width:768px) and (max-width:1023px){
  .svc-overview{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px, 3.6vw, 48px);align-items:start}
  .svc-overview__frame{aspect-ratio:1/1}
}
@media (min-width:1024px){.svc-overview__frame{aspect-ratio:16/9}}
.svc-overview.svc-overview--text{grid-template-columns:minmax(0,1fr)}

/* what's included: heading and the guarantee on the left, the checklist on the right */
.svc-included{display:grid;gap:24px}
.svc-included__note{margin-top:16px;font-size:15.5px;line-height:1.55;color:var(--text-muted);max-width:44ch}
.svc-included__note strong{color:var(--text)}
@media (min-width:768px){.svc-included{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 4vw, 64px);align-items:start}}
/* in the main column beside the quote form (fix2): stacked from 1024px, where that column is 560-780px wide */
@media (min-width:1024px){.svc-main .svc-included{grid-template-columns:minmax(0,1fr);gap:20px}.svc-main .svc-included__note{margin-top:10px}}

/* testimonial + FAQ */
.svc-quote .quote-card{max-width:820px}
.svc-faq__head{margin-bottom:20px}
.svc-faq__call,.faq-sec__call{color:var(--text-muted);line-height:1.55;max-width:40ch}
.svc-faq__call{margin-top:10px}
.svc-faq__call a,.faq-sec__call a{font-weight:700;color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-faq__call a:hover{color:var(--orange-700)}
.svc-faq .acc__item:first-child{border-top:1px solid var(--line)}
@media (min-width:1024px){
  .svc-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px, 6vw, 96px);align-items:start}
  .svc-faq__head{position:sticky;top:96px;margin:0;grid-row:1 / span 2}
}

/* solar extras: homes | businesses tabs, the static diagram, batteries */
.solar-types{margin-top:24px}
.solar-type{display:grid;gap:22px;margin-top:24px}
.solar-type__media{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.solar-type__img{width:100%;height:100%;object-fit:cover}
.solar-type__body{min-width:0}
.solar-type__title{font-size:var(--fs-h3);font-weight:700;line-height:1.2}
.solar-type__text{margin-top:8px;color:var(--text-muted);line-height:1.6;max-width:52ch}
.solar-type__points{margin-top:18px;gap:12px;font-size:15.5px;color:var(--text-muted)}
.solar-type__points strong{color:var(--text);font-weight:700}
@media (min-width:768px){.solar-type{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px, 4vw, 56px)}}
.solar-battery{margin-top:0}
.solar-battery__text{margin-top:14px;font-size:var(--fs-lead);line-height:1.55;color:var(--text);max-width:48ch}
.solar-battery__cta{margin-top:22px}
.svc-flow{margin-top:28px}

/* further reading: article titles on thin rules under the FAQs (2 columns from 768px; in the FAQ column from 1024px) */
.svc-reading{margin-top:clamp(36px, 4vw, 52px)}
.svc-reading__title{margin-bottom:0;padding-bottom:10px;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--orange-700)}
.dir-list.reading-list{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.dir-list.reading-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.svc-faq > .svc-reading{grid-column:2}}

/* =========================================================== 8f. ABOUT */
.story__grid{display:grid;gap:32px}
.facts{display:grid;border-top:1px solid var(--line)}
.facts__row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45}
.facts dt{font-size:14px;font-weight:600;color:var(--text-muted)}
.facts dd{font-weight:600;min-width:0;overflow-wrap:break-word}
@media (max-width:479px){.facts__row{grid-template-columns:minmax(0,1fr);gap:2px}}
.facts a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.facts a:hover{color:var(--orange-700)}
.story__prose p{font-size:var(--fs-lead)}
.story__links{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:24px}
@media (min-width:1024px){.story__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px, 6.5vw, 104px);align-items:start}.story__prose{padding-top:52px}}
.promise__quote{margin-top:12px}
.promise__quote p{font-size:15.5px;font-weight:600;line-height:1.5;color:var(--text)}
.promise__quote figcaption{margin-top:4px;font-size:14px;color:var(--text-muted)}
.promises__foot{margin-top:28px;line-height:1.55;color:var(--text-muted)}
.promises__foot strong{color:var(--text)}
.green__grid{display:grid;gap:32px}
.green__media{aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:var(--paper)}
.green__img{width:100%;height:100%;object-fit:cover}
.green__text{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.green__title{font-size:var(--fs-h2);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.green__lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:52ch}
.green__links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:4px}
@media (min-width:1024px){.green__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px, 6vw, 96px);align-items:center}}

/* =========================================================== 8g. GALLERY: an even grid of 3:2 photos, the caption under each */
.gallery{padding-top:clamp(28px, 3.4vw, 44px)}
.gallery__grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
@media (min-width:768px){.gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}}
.g-item{min-width:0}
.g-tile{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;color:var(--text);text-align:left;cursor:zoom-in;border-radius:2px}
.g-tile__media{display:block;aspect-ratio:3/2;border-radius:var(--r-xs);overflow:hidden;background:var(--paper)}
.g-tile__img{width:100%;height:100%;object-fit:cover}
.g-tile__cap{display:flex;flex-direction:column;gap:2px}
.g-tile__title{font-size:15.5px;font-weight:650;line-height:1.3;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--orange-500)}
.g-tile__group{font-size:14px;line-height:1.35;color:var(--text-muted)}
.g-tile:hover .g-tile__title,.g-tile:focus-visible .g-tile__title{text-decoration-line:underline}
.g-tile:focus-visible{outline-offset:6px}

/* lightbox (native <dialog>) */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(14,13,12,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[open]{animation:fade-in 200ms var(--ease-out)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.lightbox__inner{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.lightbox__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lightbox__count{padding-left:6px;font-size:14px;font-weight:650;color:var(--text-on-dark-muted);font-variant-numeric:tabular-nums}
.lightbox__figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0;margin:0}
.lightbox__img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);border-radius:var(--r-xs);object-fit:contain;transition:opacity 200ms var(--ease-out)}
.lightbox[open] .lightbox__img{animation:lb-in 280ms var(--ease-out)}
.lightbox__img.is-swapping{opacity:.2}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lightbox__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;text-align:center}
.lightbox__title{font-weight:650}
.lightbox__svc{color:var(--text-on-dark-muted)}
.lightbox__nav{display:flex;justify-content:center;gap:12px;padding-top:10px}
.lightbox .icon-btn{width:48px;height:48px;background:rgba(255,255,255,.06)}
.lightbox :focus-visible{outline-color:var(--focus-on-dark)}
html:has(.lightbox[open]){overflow:hidden}
@media (min-width:768px){
  .lightbox__inner{padding:20px 24px}
  .lightbox__nav{position:absolute;left:16px;right:16px;top:50%;justify-content:space-between;padding:0;transform:translateY(-50%);pointer-events:none}
  .lightbox__nav .icon-btn{width:56px;height:56px;pointer-events:auto}
  .lightbox__img{max-width:calc(100vw - 190px);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}
}

/* =========================================================== 8h. CONTACT: the form, plain contact details beside it */
.contact-main{padding-top:clamp(40px, 5vw, 64px)}
.contact-main__grid{display:grid;gap:40px}
.contact-side{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--line)}
.contact-side__block{padding:20px 0;border-bottom:1px solid var(--line)}
.contact-side__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.contact-side__num{display:inline-block;margin-top:6px;font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);font-weight:750;line-height:1.1;color:var(--char-900);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.contact-side__num:hover{color:var(--orange-700)}
.contact-side__text{margin-top:8px;color:var(--text-muted);line-height:1.55}
.contact-side__block > p:not(.contact-side__text){margin-top:6px}
.contact-side__link{font-weight:650;color:var(--text);overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.contact-side__link:hover,.contact-side__urgent a:hover{color:var(--orange-700)}
.contact-side__steps{display:grid;gap:6px;margin-top:10px;padding-left:1.3em;color:var(--text-muted);line-height:1.5}
.contact-side__steps li::marker{font-weight:700;color:var(--text)}
.contact-side__urgent{line-height:1.55}
.contact-side__urgent a{font-weight:700;color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:1024px){
  .contact-main__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px, 5vw, 72px);align-items:start}
  .contact-side{position:sticky;top:96px}
}
.faq-groups{display:flex;flex-direction:column;gap:clamp(28px, 3vw, 40px)}
.faq-group__title{padding-bottom:12px;border-bottom:2px solid var(--char-900);font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.faq-groups .acc__item:first-child{border-top:0!important}
.faq-group .acc__btn{font-size:17px}
@media (max-width:359px){
  .process .tabs__tab{padding:0 6px;font-size:14.5px}
  .qform__alert .btn{white-space:normal}
}

/* =========================================================== 8i. SERVICE AREAS (Melbourne = solar only, Adelaide = every service) */
/* hub: two cities (no boxes), a plain sentence, the services table */
.areas-hub{padding-top:clamp(28px, 3.4vw, 44px)}
.areas-hub__grid{display:grid;gap:48px}
@media (min-width:720px){.areas-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px, 4vw, 56px)}}
.city-card{display:flex;flex-direction:column;min-width:0}
.city-card__media{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.city-card__img{width:100%;height:100%;object-fit:cover}
.city-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;flex:1;padding-top:20px}
.city-card__title{font-size:var(--fs-h3);font-weight:700;line-height:1.15}
.city-card__link{color:inherit;text-decoration:none;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:5px}
.city-card__link:hover{text-decoration-line:underline}
.city-card__svc{font-size:17px;font-weight:600;line-height:1.45}
.city-card__facts{display:grid;width:100%;border-top:1px solid var(--line)}
.city-card__facts > div{display:grid;grid-template-columns:124px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45}
.city-card__facts dt{font-size:14px;font-weight:600;color:var(--text-muted)}
.city-card__facts dd{font-weight:600}
.city-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:auto;padding-top:4px}
@media (max-width:479px){.city-card__btn{width:100%}}
@media (min-width:720px) and (max-width:899px){.city-card__facts > div{grid-template-columns:minmax(0,1fr);gap:4px}}
.areas-hub__ask{margin-top:clamp(36px, 4vw, 52px);padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-lead);line-height:1.5;max-width:72ch}
.areas-hub__ask a{font-weight:700;color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.areas-hub__ask a:hover{color:var(--orange-700)}
.cover-sec__grid{display:grid;gap:8px}
.cover-sec__head .section-head{margin-bottom:16px}
.cover-sec__more{margin:0 0 24px}
@media (min-width:1024px){
  .cover-sec__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px, 6vw, 96px);align-items:start}
  .cover-sec__head{position:sticky;top:96px}
  .cover-sec__more{margin:0}
}
.cover__table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.35}
.cover__table th,.cover__table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cover__table th:first-child{padding-left:0}
.cover__table thead th{font-size:14.5px;font-weight:700;border-bottom:2px solid var(--char-900)}
.cover__table thead th:not(:first-child),.cover__table td{width:22%;text-align:center}
.cover__table thead a{color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.cover__table tbody th{font-weight:600}
.cover__table tbody th a{color:var(--char-900);text-decoration:none;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.cover__table tbody th a:hover{text-decoration-line:underline}
.cover__yes .icon{width:20px;height:20px;color:var(--char-900);stroke-width:2.5}
.cover__no{color:var(--stone-500);font-weight:700}
@media (max-width:479px){.cover__table{font-size:14.5px}.cover__table th,.cover__table td{padding:10px 8px}}

/* city pages */
.area-hero .svc-hero__title{max-width:17ch}
.area-office__grid{display:grid;gap:28px}
@media (min-width:1024px){.area-office__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 4vw, 56px);align-items:stretch}}
@media (min-width:1024px) and (max-width:1199px){.area-office__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.office-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.office-card__label{font-size:14px;font-weight:600;color:var(--text-muted)}
.office-card__addr{display:flex;gap:10px;font-size:var(--fs-h4);font-weight:700;line-height:1.35}
.office-card__addr .icon{width:20px;height:20px;margin-top:3px;color:var(--orange-700)}
.office-card__list{list-style:none;display:grid;gap:12px;width:100%;padding-top:16px;border-top:1px solid var(--line)}
.office-card__list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;line-height:1.45}
.office-card__list .icon{width:18px;height:18px;margin-top:3px;color:var(--orange-700)}
.office-card__list a{color:var(--text);text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;overflow-wrap:anywhere}
.office-card__list a:hover{color:var(--orange-700)}
.office-card__sub{display:block;margin-top:2px;font-size:14px;color:var(--text-muted)}
.office-card__svc{width:100%;padding-top:16px;border-top:1px solid var(--line);font-weight:600;line-height:1.45}
.office-card__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}
@media (max-width:479px){.office-card__actions .btn{width:100%}}
.office-map .map-panel__frame{aspect-ratio:4/3}
@media (min-width:1024px){.office-map,.office-map .map-panel{height:100%}.office-map .map-panel__frame{height:100%;min-height:400px;aspect-ratio:auto}}
.area-services__more{margin-top:clamp(36px, 4vw, 52px)}
/* suburbs: a heading per region and the names as a plain two-column list (no chips) */
.suburbs{display:grid;gap:36px 40px}
@media (min-width:768px){.suburbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.suburbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.suburbs__group{padding-top:14px;border-top:1px solid var(--line-strong)}
.suburbs__summary{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;list-style:none}
.suburbs__summary::-webkit-details-marker{display:none}
.suburbs__title{font-size:17px;font-weight:700;line-height:1.3}
.suburbs__count,.suburbs__pm{display:none}
.suburbs__list{list-style:none;columns:2;column-gap:24px;font-size:15px;line-height:1.4}
.suburb{padding:3px 0;break-inside:avoid}
.suburb--office strong{font-weight:700}
.suburbs__cta{margin-top:clamp(28px, 3vw, 40px);font-size:var(--fs-lead);line-height:1.5}
.suburbs__cta a{font-weight:700;color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.suburbs__cta a:hover{color:var(--orange-700)}
@media (max-width:767px){
  .suburbs{gap:0;border-bottom:1px solid var(--line-strong)}
  .suburbs__group{padding-top:0}
  .suburbs__summary{align-items:center;min-height:52px;margin:0;cursor:pointer}
  .suburbs__group[open]{padding-bottom:16px}
  .suburbs__count{display:inline;margin-left:auto;font-size:14px;color:var(--text-muted);white-space:nowrap}
  .suburbs__pm{position:relative;display:block;flex:none;width:14px;height:14px}
  .suburbs__pm::before,.suburbs__pm::after{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--char-900);transition:transform 200ms var(--ease-out)}
  .suburbs__pm::after{transform:rotate(90deg)}
  .suburbs__group[open] .suburbs__pm::after{transform:rotate(90deg) scaleX(0)}
}
@media (min-width:768px){.suburbs__summary{cursor:default;pointer-events:none}}
.area-quote{padding-top:0}
.area-quote .quote-card{max-width:820px}
@media print{.office-map,.city-card__media{display:none!important}}

/* =========================================================== 9. UTILITIES */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* =========================================================== 10. MOTION
   The scroll reveals, hero entrance, rotator, counters, glowing rails and animated diagram were removed (de-slop, 25 Oct 2026),
   and the inert [data-reveal] attributes were deleted from the markup (build 2). Only small state transitions (menus,
   accordions, buttons, the filter fade) and the lightbox fade remain. */

/* =========================================================== 11. REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* =========================================================== 12. PRINT */
@media print{
  .utility,.site-header,.mega,.mega-scrim,.drawer,.action-bar,.map-panel__frame,.skip-link,.hero__media,.svc-hero__media,.page-hero__media,.page-hero__bg,.qform,.onpage,.filter-bar,.lightbox,.svc-aside{display:none!important}
  body{padding:0!important;background:#fff;color:#000}
  .hero,.band__panel,.band--quote__panel,.band--emergency,.band--quote,.site-footer{background:#fff!important;color:#000!important}
  .hero__lead,.hero__facts{color:#333!important}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:.85em}
  html.js .acc__panel{height:auto!important;visibility:visible!important}
}

/* =========================================================== 13. BLOG (archive blog.php + posts blog/<slug>.php)
   Every selector is scoped to .blog-* / .article-* / .page-blog. No nesting (older Safari). De-slop build 2 (25 Oct 2026):
   plain topic links, no boxed cards or charcoal service card, no textures or shadows. */
/* ----------------------------------------------------------- blog: shared */
.page-blog{--aside-w:280px;--aside-gap:clamp(40px, 4vw, 64px);--article-fs:clamp(1.0625rem, 1.03rem + .14vw, 1.125rem)}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:14.5px;line-height:1.4;color:var(--text-muted)}
.blog-meta__item{display:inline-flex;align-items:center}
.blog-meta__item + .blog-meta__item::before{content:"·";margin:0 12px 0 -8px;color:var(--stone-500)}
.blog-meta__dot{margin-inline:7px;color:var(--stone-500)}

/* ----------------------------------------------------------- blog: archive */
.page-hero--blog .page-hero__lead a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur-2)}
.page-hero--blog .page-hero__lead a:hover{color:var(--orange-700)}

/* topics: a plain row of links (?topic=key, so they work without JS); the current one is bold and underlined */
.blog-topics{margin:0 0 clamp(28px, 3.4vw, 44px);padding-bottom:10px;border-bottom:1px solid var(--line)}
.blog-topics__list{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px}
.blog-topics__link{display:inline-flex;align-items:center;gap:4px;min-height:40px;color:var(--text);font-size:15.5px;font-weight:600;text-decoration:none;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:5px}
.blog-topics__link:hover{text-decoration-line:underline}
.blog-topics__link[aria-current]{font-weight:700;text-decoration-line:underline}
.blog-topics__count{font-weight:400;color:var(--text-muted);font-variant-numeric:tabular-nums}
@media (pointer:coarse){.blog-topics__link{min-height:44px}}
/* phones: one scrolling line, like the hub and gallery filters (fix2); main.js keeps the current topic in view */
@media (max-width:639px){
  .blog-topics{margin-inline:calc(-1 * var(--gutter))}
  .blog-topics__list{flex-wrap:nowrap;gap:0 20px;overflow-x:auto;scrollbar-width:none;padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .blog-topics__list::-webkit-scrollbar{display:none}
  .blog-topics__link{white-space:nowrap}
  .blog-topics__link:focus-visible{outline-offset:-3px}
  .blog-topics__list.is-end{-webkit-mask-image:none;mask-image:none}
}

/* featured post: image left, text right, no box; the whole block is the link */
.blog-feature{position:relative;display:grid;gap:20px;margin-bottom:clamp(48px, 6vw, 72px)}
.blog-feature__media{aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.blog-feature__media picture{display:block;width:100%;height:100%}
.blog-feature__img{width:100%;height:100%;object-fit:cover}
.blog-feature__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.blog-feature__title{font-size:var(--fs-h2);font-weight:700;line-height:1.12;letter-spacing:-.015em;max-width:22ch}
.blog-feature__link{color:inherit;text-decoration:none;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:5px}
.blog-feature__link::after{content:"";position:absolute;inset:0;z-index:1}
.blog-feature__link:focus-visible{outline:none}
.blog-feature:focus-within{outline:3px solid var(--focus);outline-offset:6px;border-radius:var(--r-lg)}
.blog-feature:hover .blog-feature__link,.blog-feature:focus-within .blog-feature__link{text-decoration-line:underline}
.blog-feature__excerpt{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.55;max-width:48ch}
@media (min-width:700px){.blog-feature{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px, 4vw, 56px);align-items:center}}

/* list head + grid */
.blog-index__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:clamp(20px, 2.4vw, 28px)}
.blog-index__title{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.blog-index__count{font-size:14.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.blog-grid{display:grid;gap:36px 24px}
@media (min-width:640px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}}

/* card = .resource + these: photo, muted topic, title, a short excerpt, the date */
.blog-card .resource__body{gap:8px}
.blog-card .resource__title{font-size:clamp(1.0625rem, 1.03rem + .15vw, 1.1875rem);line-height:1.3}
.blog-card__excerpt{font-size:15px;line-height:1.55;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__meta{display:flex;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:2px;font-size:13.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.blog-feature .blog-card__meta{margin-top:0}
/* Victoria-only posts carry a small area line (Melbourne is solar only) */
.blog-card__note{font-size:13.5px;line-height:1.4;color:var(--text-muted)}

/* pagination */
.blog-pager{margin-top:clamp(36px, 4vw, 56px)}
.blog-pager__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.blog-pager__num,.blog-pager__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-xs);border:1px solid var(--line-strong);background:#fff;color:var(--char-900);font-size:15px;font-weight:650;text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color 160ms,background-color 160ms}
.blog-pager__step .icon{width:18px;height:18px}
.blog-pager__num.is-current{background:var(--char-900);border-color:var(--char-900);color:#fff}
@media (hover:hover) and (pointer:fine){a.blog-pager__num:hover,.blog-pager__step:hover{border-color:var(--char-900)}}

/* ----------------------------------------------------------- blog: post: header */
.article-hero{padding-block:clamp(16px, 2.4vw, 28px) clamp(36px, 4vw, 56px)}
.article-hero__inner,.article-layout{width:min(100% - 2 * var(--gutter), 760px);margin-inline:auto}
.article-hero .crumbs{margin-bottom:clamp(20px, 3vw, 36px)}
.article-hero .crumbs__item:last-child{min-width:0;max-width:100%}
.article-hero .crumbs__item:last-child > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767px){
  .article-hero .crumbs__item:last-child{display:none}
  .article-hero .crumbs__item:nth-last-child(2) .crumbs__sep{display:none}
}
.article-hero__topic{margin-bottom:12px}
.article-hero__topic-link{display:inline-flex;text-decoration:none;text-decoration-color:var(--orange-500);text-underline-offset:3px}
.article-hero__topic-link:hover .tag{text-decoration:underline;text-decoration-color:var(--orange-500);text-underline-offset:3px}
.article-hero__title{font-size:clamp(2rem, 1.55rem + 2vw, 3.25rem);font-weight:700;line-height:1.1;letter-spacing:-.015em;text-wrap:balance;max-width:24ch}
.article-hero__lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:58ch}
.article-hero__meta{margin-top:20px}

/* featured photo: in the header, on the right from 1024px (see "inner-page heroes" below) */
.article-hero__media{position:relative;margin:0;overflow:hidden;background:var(--paper)}
.article-hero__media picture{position:absolute;inset:0}
.article-hero__img{width:100%;height:100%;object-fit:cover}

/* ----------------------------------------------------------- blog: post: reading layout */
.article-layout{display:flex;flex-direction:column;padding-block:clamp(36px, 4.4vw, 64px) var(--section-y-sm)}
.article-main{min-width:0}
.article-aside{display:flex;flex-direction:column;gap:20px;min-width:0}
.article-layout .blog-cta--aside{display:none}
@media (min-width:1100px){
  .article-layout{width:min(100% - 2 * var(--gutter), 1080px)}
  .article-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w);column-gap:var(--aside-gap);align-items:start}
  .article-layout > .blog-note{grid-column:1;grid-row:1}
  .article-main{grid-column:1;grid-row:2}
  .article-aside{grid-column:2;grid-row:1 / span 2;position:sticky;top:88px}
  .article-layout .blog-cta--aside{display:flex}
  .article-layout .blog-cta--inline{display:none}
}

/* contents (details: open on desktop, collapsed on small screens by a two-line script; open without JS) */
.article-toc{margin-bottom:8px}
.article-toc__details{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.article-toc__summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;cursor:pointer;list-style:none;font-size:15px;font-weight:700;border-radius:inherit}
.article-toc__summary::-webkit-details-marker{display:none}
.article-toc__pm{position:relative;flex:none;width:14px;height:14px}
.article-toc__pm::before,.article-toc__pm::after{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--char-900);transition:transform 200ms var(--ease-out)}
.article-toc__pm::after{transform:rotate(90deg)}
.article-toc__details[open] .article-toc__pm::after{transform:rotate(90deg) scaleX(0)}
.article-toc__list{list-style:none;margin:0;padding:0 10px 14px 18px}
.article-toc__link{display:block;padding:7px 10px 7px 14px;border-left:2px solid var(--line);color:var(--text-muted);font-size:14.5px;line-height:1.4;text-decoration:none;transition:color 160ms,border-color 160ms}
.article-toc__link:hover{color:var(--char-900);border-left-color:var(--stone-500)}
.article-toc__link.is-current{color:var(--char-900);font-weight:650;border-left-color:var(--orange-500)}
@media (min-width:1100px){
  .article-toc{margin-bottom:0}
  .article-toc__list{max-height:max(160px, calc(100vh - 560px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
}

/* related service: a plain bordered box (label, service name as a link, where we do it, one line, one button) */
.blog-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px 22px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:#fff}
.blog-cta__label{font-size:14px;font-weight:600;color:var(--text-muted)}
.blog-cta__title{font-size:19px;font-weight:700;line-height:1.25}
.blog-cta__title a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:2px;text-underline-offset:4px}
.blog-cta__title a:hover{color:var(--orange-700)}
.blog-cta__area{font-size:14.5px;font-weight:600}
.blog-cta__text{font-size:15px;line-height:1.55;color:var(--text-muted)}
.blog-cta__actions{margin-top:8px}
.blog-cta--inline{margin-top:clamp(36px, 4vw, 48px)}

/* service-area note (Victoria posts): plain text between two thin rules */
.blog-note{margin-bottom:clamp(24px, 3vw, 32px);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.55;max-width:68ch}
.blog-note a{color:inherit;font-weight:650;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px}
.blog-note a:hover{color:var(--orange-700)}

/* ----------------------------------------------------------- blog: post: article typography */
.article-body{max-width:68ch;font-size:var(--article-fs);line-height:1.75;color:var(--text)}
.article-body::after{content:"";display:table;clear:both}
.article-body > * + *{margin-top:1.1em}
.article-body h2{clear:both;margin-top:2.1em;font-size:clamp(1.5rem, 1.25rem + 1.1vw, 2rem);font-weight:700;line-height:1.16;letter-spacing:-.015em;scroll-margin-top:96px}
.article-body h3{clear:both;margin-top:1.75em;font-size:clamp(1.1875rem, 1.12rem + .34vw, 1.375rem);font-weight:700;line-height:1.3;letter-spacing:-.006em;scroll-margin-top:96px}
.article-body h2 + *,.article-body h3 + *{margin-top:.55em}
.article-body h2 + h3{margin-top:1em}
.article-body > :first-child{margin-top:0}
.article-body p,.article-body li{text-wrap:pretty}
.article-body strong{font-weight:680}
.article-body a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur-2)}
.article-body a:hover{color:var(--orange-700)}
.article-body ul,.article-body ol{padding-left:1.35em}
.article-body li{padding-left:.25em}
.article-body li + li{margin-top:.55em}
.article-body ul > li::marker{color:var(--orange-700)}
.article-body ol > li::marker{color:var(--char-900);font-weight:700;font-variant-numeric:tabular-nums}
.article-body li > strong:first-child{color:var(--char-900)}
.article-body blockquote{padding:4px 0 4px 20px;border-left:2px solid var(--line-strong);font-size:1.08em;line-height:1.6}
.article-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px;line-height:1.5}
.article-body th,.article-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article-body th{background:var(--paper);font-weight:680}
.article-body figure{margin-block:1.6em}
.article-body figure img{border-radius:var(--r-md);background:var(--paper)}
.article-body figcaption{margin-top:8px;font-size:14px;color:var(--text-muted)}
/* smart-meter steps: small photo beside each step, as in the original post */
.article-body .article-figure--step{float:left;clear:left;width:min(38%, 200px);margin:.35em 20px 10px 0}
.article-body .article-figure--step + p{margin-top:0;margin-bottom:18px;display:flow-root}
@media (max-width:599px){.article-body .article-figure--step{float:none;width:100%;max-width:480px;margin:1.1em 0 10px}}
.article-body .article-figure--step img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm)}

.article-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(36px, 4vw, 48px);padding-top:20px;border-top:1px solid var(--line)}
.article-foot__by{font-size:14.5px;color:var(--text-muted)}
.article-faq{margin-top:clamp(40px, 5vw, 56px)}
.article-faq > h2{margin-bottom:20px;font-size:clamp(1.5rem, 1.25rem + 1.1vw, 2rem);font-weight:700;line-height:1.16;letter-spacing:-.015em}
/* one reading measure (68ch at the body text size) for the photo, contents box, note, text, FAQ, box and foot */
.article-hero__media,.article-toc,.article-faq,.article-foot,.blog-cta--inline{font-size:var(--article-fs);max-width:68ch}
.article-faq .acc__inner,.article-foot__back,.blog-cta--inline .btn,.blog-cta--inline p{font-size:var(--fs-body)}
.blog-cta--inline .blog-cta__title{font-size:19px}
.blog-cta--inline .blog-cta__label,.blog-cta--inline .blog-cta__area{font-size:14.5px}
@media (min-width:1100px){.article-hero__media{max-width:min(68ch, calc(100% - var(--aside-w) - var(--aside-gap)))}}

/* related articles */
.blog-grid--related{margin-top:0}

/* ----------------------------------------------------------- blog: print */
@media print{
  .article-aside,.blog-cta,.blog-related,.blog-topics,.blog-pager,.article-foot__back{display:none!important}
  .article-hero{padding-bottom:16px;background:none}
  .article-hero__media{aspect-ratio:auto;max-height:9cm}
  .article-body{max-width:none;font-size:11pt}
  .article-body a{text-decoration:none}
}

/* =========================================================== 14. PHONES: compact card rows
   Service and article cards become rows (a small square photo beside the text), so a grid of ten cards isn't ten screens of
   full-width 3:2 photos (fix1, 25 Oct 2026). Last in the file, so it wins over the section 8/8d/13 grid gaps. */
@media (max-width:639px){
  .card-grid .card-service,.svc-hub .card-service,.resource{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:14px;align-items:start}
  .card-grid .card-service__media,.svc-hub .card-service__media,.resource__media{aspect-ratio:1/1;border-radius:var(--r-xs)}
  .card-grid .card-service__body,.svc-hub .card-service__body,.resource__body{padding-top:0;gap:4px}
  .card-grid .card-service__text{font-size:15px;line-height:1.5}
  .card-grid,.svc-hub__grid,.resources-row,.blog-grid{gap:20px}
}

/* fix2 finish (25 Oct 2026): on phones the "On this page" links and the blog topic links scroll sideways in one row
   instead of wrapping into 3-4 ragged rows. The page itself never scrolls sideways (the row clips inside its box). */
@media (max-width:767px){
  .onpage__list,.blog-topics__list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .onpage__list::-webkit-scrollbar,.blog-topics__list::-webkit-scrollbar{display:none}
  .blog-topics__list{margin-right:0}   /* .blog-topics already bleeds to the screen edge below 640px (review: "Hiring" was clipped) */
  .onpage__list > li,.blog-topics__list > li{flex:none;white-space:nowrap}
}

/* =========================================================== 15. INNER-PAGE HEROES: PHOTO ON THE RIGHT
   Owner reference (4 Nov 2026), service + city pages, Services, Gallery and posts: the text sits on the paper band (the one
   light background, owner 4 Nov); from 1024px the photo fills the right
   half from the top of the band to the bottom (owner, 4 Nov: "maybe make it full height", after first asking for a gap) and out
   to the edge of the screen, its bottom-left corner cut off at 45 degrees with a sharp edge ("no radius"). The cut is a
   fixed-size corner (--cut) drawn by three mask layers, so its angle doesn't change with the photo's proportions.
   Below 1024 the photo runs full width under the text, to the band's bottom edge, with the same cut.
   Service + city pages (.svc-hero), page_hero() with 'media' (Services, Gallery) and posts. Blog, About, Contact and Service
   areas use the compact banner (page_hero 'banner', end of this file). */
:root{--cut:clamp(64px, 10vw, 160px);--hero-corner:linear-gradient(45deg,transparent calc(50% - .5px),#000 calc(50% + .5px))}
.svc-hero,.page-hero--split,.article-hero{background:var(--paper)}
.svc-hero__frame,.page-hero__frame,.article-hero__media{border-radius:0;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--cut) + 1px) no-repeat,linear-gradient(#000 0 0) 100% 100%/calc(100% - var(--cut) + 1px) var(--cut) no-repeat,var(--hero-corner) 0 100%/var(--cut) var(--cut) no-repeat;
  mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--cut) + 1px) no-repeat,linear-gradient(#000 0 0) 100% 100%/calc(100% - var(--cut) + 1px) var(--cut) no-repeat,var(--hero-corner) 0 100%/var(--cut) var(--cut) no-repeat}
.page-hero__frame{position:relative;overflow:hidden;background:var(--paper)}
.page-hero__img{width:100%;height:100%;object-fit:cover}
.page-hero__frame picture{display:block;width:100%;height:100%}
@media (max-width:1023px){
  /* the photo is the band's last thing: full width, touching the band's bottom edge */
  .svc-hero,.page-hero--split,.article-hero{padding-bottom:0}
  .svc-hero__media,.page-hero__media,.article-hero__media{width:auto;max-width:none;margin:28px calc(-1 * var(--gutter)) 0}
  .article-hero__media{margin-inline:0}
  .svc-hero__frame,.page-hero__frame,.article-hero__media{aspect-ratio:16/10}
  .svc-hero__grid,.page-hero--split .page-hero__grid{gap:0}
}
@media (min-width:1024px){
  .svc-hero,.page-hero--split,.article-hero{--split-gap:clamp(40px, 4.5vw, 72px);position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(40px, 5vw, 72px)}
  .svc-hero__grid,.page-hero--split .page-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--split-gap);align-items:center;min-height:clamp(360px, 32vw, 500px)}
  .svc-hero__media,.page-hero__media,.article-hero__media{position:absolute;z-index:-1;top:0;bottom:0;right:0;left:calc(50% + var(--split-gap) / 2);width:auto;max-width:none;margin:0;aspect-ratio:auto;justify-self:stretch;align-self:stretch}   /* stretch: abspos boxes honour justify-self now (the old end alignment made it 0 wide) */
  .svc-hero__frame,.page-hero__frame{position:absolute;inset:0;aspect-ratio:auto}
  .page-hero--split .page-hero__aside{position:static}
  /* posts: the text keeps the left half of a full-width container */
  .article-hero__inner{width:min(100% - 2 * var(--gutter), 1240px);display:flex;flex-direction:column;justify-content:center;min-height:clamp(340px, 28vw, 440px)}
  .article-hero__inner > *{max-width:calc(50% - var(--split-gap) / 2)}
  /* most post photos are only 600-880px wide (the old site's files), so the post photo is at most 720px wide and the band a
     little shorter, keeping the stretch near 1x; the extra space shows as paper between the text and the photo */
  .article-hero__media{left:max(calc(50% + var(--split-gap) / 2), calc(100% - 720px))}
}

/* --- compact banner hero (owner, 4 Nov 2026): Blog, About, Contact and Service areas get "just a small hero with text,
   background image and dark overlay". The photo is decoration (alt ""), so the overlay keeps the white text >= 7:1 on phones
   (flat .72) and >= 5:1 across the text column from 768px (left-to-right fade). */
.page-hero--banner{position:relative;isolation:isolate;overflow:hidden;background:var(--char-900);color:#fff;padding-block:clamp(20px, 2.6vw, 32px) clamp(44px, 5.5vw, 80px)}
.page-hero__bg{position:absolute;inset:0;z-index:-1}
.page-hero__bg picture{display:block;width:100%;height:100%}
.page-hero__bg-img{width:100%;height:100%;object-fit:cover}
.page-hero__bg::after{content:"";position:absolute;inset:0;background:rgba(14,13,12,.72)}
@media (min-width:768px){.page-hero__bg::after{background:linear-gradient(90deg,rgba(14,13,12,.86) 0%,rgba(14,13,12,.74) 45%,rgba(14,13,12,.5) 100%)}}
.page-hero--banner .crumbs{margin-bottom:clamp(20px, 3vw, 32px)}
.page-hero--banner .crumbs__list,.page-hero--banner .crumbs__item a{color:rgba(255,255,255,.8)}
.page-hero--banner .crumbs [aria-current],.page-hero--banner .crumbs__item a:hover{color:#fff}
.page-hero--banner .page-hero__title{color:#fff}
.page-hero--banner .page-hero__lead{color:rgba(255,255,255,.9)}
.page-hero--banner .page-hero__lead a{color:#fff}
.page-hero--banner :focus-visible{outline-color:var(--focus-on-dark)}
.page-hero--banner .btn--call{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}   /* any dark-outline call button reads on the overlay */
@media (min-width:1024px){.page-hero--banner .page-hero__grid{min-height:clamp(120px, 11vw, 180px);align-items:end}}
@media print{
  .page-hero--banner{background:none;padding-block:16px}
  /* white-on-dark text and buttons print black (banners, the Home hero buttons, the closing quote band, the footer) */
  .page-hero--banner,.page-hero--banner *,.hero__ctas .btn,.band--quote,.band--quote *,.site-footer,.site-footer *{color:#000!important}
  .page-hero--banner .btn,.hero__ctas .btn,.band--quote .btn{background:none!important;border-color:#000!important}
}

/* =========================================================== 16. SERVICE PAGE V2 (inc/service-v2.php)
   Owner, 4 Nov 2026: "not wow … too much text without proper images and icons, service pages designed like a blog". From the
   research (scratchpad/research-svc/notes.md): a photo or an icon group on every screen, white / paper bands alternating, larger
   orange line icons (no tinted tiles), orange circles only on the numbered steps, one charcoal photo band at the end. */
.sv-sec{--sec-bg:#fff;padding-block:var(--section-y)}
.sv-sec--paper{--sec-bg:var(--paper);background:var(--paper)}
/* two white bands in a row (the band above the FAQ): a hairline at the container width instead of a colour change */
.sv-sec--ruled{padding-top:0}
.sv-sec--ruled > .container{padding-top:var(--section-y);border-top:1px solid var(--line)}
.sv-subtitle{margin-top:clamp(40px, 5vw, 64px);font-size:var(--fs-h3);font-weight:700;line-height:1.25}
.sv-actions{margin-top:clamp(20px, 2.6vw, 28px)}
.sv-title{font-size:var(--fs-h2);font-weight:750;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.sv-lead{margin-top:14px;font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted);max-width:56ch}
.sv-lead a{color:var(--text);font-weight:650;text-decoration:underline;text-decoration-color:var(--orange-500);text-decoration-thickness:1.5px;text-underline-offset:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-head{max-width:720px;margin-bottom:clamp(28px, 4vw, 48px)}
.sv-head--center{margin-inline:auto;text-align:center}
.sv-head--center .sv-lead{margin-inline:auto}
/* photo + body, side by side from 1024px (photo first; --flip puts it on the right) */
.sv-split{display:grid;gap:clamp(28px, 4vw, 40px)}
.sv-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-xl);background:var(--paper)}
.sv-photo picture{display:block;width:100%;height:100%}
.sv-photo__img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
  .sv-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px, 5.5vw, 88px);align-items:center}
  .sv-split--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .sv-split--solo{grid-template-columns:minmax(0,1fr)}
  .sv-photo{aspect-ratio:4/5}
}
/* icon grid (signs): 2 x 2 from 640px, each a 32px orange line icon beside a title and one line */
.sv-icon-grid{list-style:none;display:grid;gap:24px 32px;margin-top:clamp(24px, 3vw, 36px)}
@media (min-width:640px){.sv-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-icon-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;align-content:start}
/* beside a photo with an odd number of items: one column, so no row is left half empty */
@media (min-width:640px) and (max-width:1023px){.sv-icon-grid--stack{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .sv-icon-grid--stack .sv-icon-item{grid-template-columns:minmax(0,1fr);gap:14px}}
@media (min-width:1024px){.sv-icon-grid.sv-icon-grid--stack{grid-template-columns:minmax(0,1fr)}}
/* full width (no photo beside it): 3 or 4 across, icon above the text */
@media (min-width:640px){.sv-icon-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}
  .sv-icon-grid--3 .sv-icon-item{grid-template-columns:minmax(0,1fr);gap:14px}}
@media (min-width:1024px){.sv-icon-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 36px}
  .sv-icon-grid--4 .sv-icon-item{grid-template-columns:minmax(0,1fr);gap:14px}}
.sv-icon{width:42px;height:42px;color:var(--orange-600);stroke-width:1.6}
.sv-icon-item__title{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.sv-icon-item__text{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--text-muted)}
/* option cards: white cards on paper, 3 across from 1024px */
.sv-cards{list-style:none;display:grid;gap:20px}
@media (min-width:768px){.sv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sv-card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px, 2.6vw, 32px);border:1px solid var(--line);border-top:3px solid var(--orange-500);border-radius:var(--r-xl);background:#fff}
.sv-sec:not(.sv-sec--paper) .sv-card{background:var(--paper)}   /* on a white band (air-con) the cards are paper */
.sv-card__icon{width:52px;height:52px;color:var(--orange-600);stroke-width:1.5}
.sv-card__title{margin-top:4px;font-size:var(--fs-h3);font-weight:700;line-height:1.25}
.sv-card__text{font-size:16px;line-height:1.6;color:var(--text-muted)}
/* checklist */
.sv-checks{list-style:none;display:grid;gap:14px;margin-top:clamp(20px, 2.6vw, 28px)}
@media (min-width:640px) and (max-width:1023px){.sv-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:var(--fs-body);font-weight:600;line-height:1.45}
.sv-checks__icon{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--orange-500);color:var(--char-900);stroke-width:3}
.sv-checks--sm{gap:12px;margin-top:18px}
.sv-checks--sm li{font-size:15.5px;font-weight:500;color:var(--text-muted)}
.sv-checks--sm li strong{color:var(--text);font-weight:700}
/* solar: homes / businesses as two photo cards */
.sv-types{list-style:none;display:grid;gap:24px}
@media (min-width:768px){.sv-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-type{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff}
.sv-type__photo{aspect-ratio:16/10!important;border-radius:0}
.sv-type__body{padding:clamp(22px, 2.6vw, 32px)}
.sv-type__title{display:flex;align-items:center;gap:12px;font-size:var(--fs-h3);font-weight:700;line-height:1.25}
.sv-type__icon{flex:none;width:30px;height:30px;color:var(--orange-600);stroke-width:1.75}
.sv-type__text{margin-top:10px;font-size:16px;line-height:1.6;color:var(--text-muted)}
.sv-flow{margin-top:8px}
/* steps: orange circles with a white icon, joined by a thin line from 1024px */
.sv-steps{list-style:none;display:grid;gap:32px 24px;counter-reset:none}
@media (min-width:640px){.sv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sv-steps{grid-template-columns:repeat(var(--n),minmax(0,1fr))}}
.sv-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.sv-step__body{display:flex;flex-direction:column;align-items:inherit}
.sv-step__badge{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 8px var(--sec-bg, var(--paper))}
.sv-step__icon{width:28px;height:28px;color:var(--char-900);stroke-width:1.9}
@media (min-width:1024px){.sv-step:not(:last-child)::after{content:"";position:absolute;top:32px;left:calc(50% + 40px);right:calc(-50% + 16px);height:2px;background:var(--line-strong);opacity:.35}}
.sv-step__title{margin-top:18px;font-size:var(--fs-h4);font-weight:700;line-height:1.3}
.sv-step__num{color:var(--orange-700)}
.sv-step__text{margin-top:8px;max-width:30ch;font-size:15.5px;line-height:1.55;color:var(--text-muted)}
/* quote: heading and icon points beside the form */
.sv-quote{display:grid;gap:32px}
/* phones: text, form, then the review; from 1024px the review sits under the text, beside the form */
@media (min-width:1024px){.sv-quote{grid-template-columns:minmax(0,1fr) minmax(380px,460px);grid-template-rows:auto 1fr;column-gap:clamp(48px, 6vw, 96px);row-gap:40px;align-items:start}
  .sv-quote__text{grid-column:1;grid-row:1}.sv-quote__form{grid-column:2;grid-row:1 / span 2}.sv-quote__review{grid-column:1;grid-row:2}}
.sv-quote__review{position:relative;max-width:560px;padding:clamp(24px, 3vw, 36px);border-radius:var(--r-xl);background:var(--paper)}
.sv-quote__mark{display:block;width:40px;height:40px;margin-bottom:12px;color:var(--orange-500)}
.sv-quote__review .quote-card{padding:0;border:0;background:none;box-shadow:none}
.sv-quote__review .quote-card__quote p{font-size:var(--fs-h4);line-height:1.6;font-weight:500}
.sv-points{list-style:none;display:grid;gap:16px;margin-top:clamp(24px, 3vw, 32px)}
.sv-points li{display:flex;align-items:center;gap:16px;font-size:var(--fs-h4);font-weight:650}
.sv-points__icon{flex:none;width:52px;height:52px;padding:13px;border-radius:50%;background:var(--paper);color:var(--orange-600);stroke-width:1.75}
.sv-quote__form .qform{box-shadow:var(--e-3)}
/* on a paper band the review box and the icon discs turn white, or they vanish into the band */
.sv-sec--paper .sv-quote__review,.sv-sec--paper .sv-points__icon{background:#fff}
/* testimonial on paper: one quote, centred and roomy */
.sv-testimonial .container{display:flex;flex-direction:column;align-items:center;text-align:center}
.sv-testimonial__mark{width:56px;height:56px;color:var(--orange-500)}
.sv-testimonial .quote-card{max-width:820px;margin-inline:auto;border-top:0;padding-top:12px;align-items:center}
.sv-testimonial .quote-card__quote p{font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem);line-height:1.6;font-weight:500}
.sv-testimonial .quote-card__by{justify-content:center;flex-direction:column;align-items:center}
/* FAQ: heading on the left, the accordion on the right */
.sv-faq{display:grid;gap:28px}
@media (min-width:1024px){.sv-faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(48px, 6vw, 96px);align-items:start}}
/* phones: heading, questions, then the reading links; from 1024px the reading links sit under the heading */
@media (min-width:1024px){.sv-faq{grid-template-rows:auto 1fr;row-gap:32px}.sv-faq__head{grid-column:1;grid-row:1}.sv-faq__list{grid-column:2;grid-row:1 / span 2}.sv-faq__more{grid-column:1;grid-row:2}}
.sv-faq__more{margin-top:0}
.sv-faq__more .reading-list{grid-template-columns:1fr!important;columns:auto!important}
/* closing emergency band: a dark photo band; the safe steps as an icon row */
.sv-emergency{position:relative;isolation:isolate;overflow:hidden;background:var(--char-900);color:#fff;padding-block:var(--section-y)}
.sv-emergency__bg{position:absolute;inset:0;z-index:-1}
.sv-emergency__bg picture{display:block;width:100%;height:100%}
.sv-emergency__img{width:100%;height:100%;object-fit:cover}
.sv-emergency__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,12,.9) 0%,rgba(14,13,12,.82) 50%,rgba(14,13,12,.72) 100%)}
.sv-emergency__inner{display:grid;gap:36px}
@media (min-width:1024px){.sv-emergency__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px, 6vw, 96px);align-items:center}}
.sv-emergency__title{font-size:var(--fs-h2);font-weight:750;line-height:1.12;letter-spacing:-.015em;color:#fff}
.sv-emergency__text{margin-top:14px;font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.88);max-width:44ch}
.sv-emergency__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sv-emergency__safe-title{font-size:var(--fs-h4);font-weight:700;color:#fff}
.sv-safe{list-style:none;display:grid;gap:18px 28px;margin-top:18px}
@media (min-width:640px){.sv-safe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-safe__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.9)}
.sv-safe__item strong{color:#fff}
.sv-safe__icon{width:30px;height:30px;color:var(--orange-400);stroke-width:1.75}
.sv-emergency :focus-visible{outline-color:var(--focus-on-dark)}
/* emergency page: the safe steps as a light icon row right under the hero */
.sv-safe-band{padding-block:clamp(32px, 4vw, 52px)}
.sv-safe-band__title{font-size:var(--fs-h4);font-weight:700}
.sv-safe--light .sv-safe__item{color:var(--text)}
.sv-safe--light .sv-safe__item strong{color:var(--text)}
.sv-safe--light .sv-safe__icon{color:var(--orange-600)}
@media (min-width:1024px){.sv-safe--light{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:479px){.sv-emergency__ctas .btn{width:100%}}
@media print{.sv-emergency{background:none;color:#000}.sv-emergency__bg{display:none}.sv-emergency *{color:#000!important}.sv-photo{display:none}}
/* phones: the signs photo goes under the list (the hero photo is right above), and the steps read as a compact list */
@media (max-width:1023px){.sv-split:not(.sv-split--flip) .sv-split__media{order:2}}
@media (max-width:639px){
  .sv-step{flex-direction:row;align-items:flex-start;gap:16px;text-align:left}
  .sv-step__badge{flex:none;width:52px;height:52px;box-shadow:none}
  .sv-step__icon{width:24px;height:24px}
  .sv-step__title{margin-top:4px}
  .sv-step__text{max-width:none}
  .sv-steps{gap:24px}
}