/* =========================================================================
   Litmec Solar & Battery — site stylesheet
   Style: dark monochrome 3D (reference: a fintech hero on Dribbble the owner
   chose). Cool near-black grounds, metallic greys, ONE warm accent — Litmec
   gold, from the logo — on the primary button only. Bold, tight sans
   headlines, left aligned. Floating rounded nav. A light sheen sweeps the
   primary buttons. Blocks rise in as they enter the viewport.

   THE STAGE SWITCH: <html data-stage="pre"> or data-stage="live".
     .only-pre  shows until NETCC + Solar Victoria approval
     .only-live shows once approved
   Change that one attribute on every page; nothing else needs editing.
   ========================================================================= */

:root {
  --ink-0:#090B11;   /* page — matches the 3D scene's clear colour */
  --ink-1:#0E1118;   /* raised band */
  --ink-2:#141823;   /* card */
  --ink-3:#1C2130;   /* input well, hover */
  --text:#F3F4F7;
  --text-2:rgba(243,244,247,0.68);
  --text-3:rgba(243,244,247,0.46);
  --hair:rgba(243,244,247,0.09);
  --hair-2:rgba(243,244,247,0.18);
  --metal:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02) 40%,rgba(255,255,255,0.05));
  --gold:#FFC21A;
  --gold-2:#E8A50C;
  --on-gold:#17120A;

  --font:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;

  --sec-y:clamp(4.5rem,9vw,8.5rem);
  --gutter:clamp(1rem,4vw,3rem);
  --max:1240px;
  --r-btn:10px; --r-card:16px; --r-panel:22px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* ---------- stage switch ---------- */
html[data-stage="pre"] .only-live,
html[data-stage="live"] .only-pre { display:none !important; }

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px; }
body {
  margin:0; background:var(--ink-0); color:var(--text);
  font:400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; }
p { margin:0 0 1em; }
h1,h2,h3 { font-family:var(--font); font-weight:500; letter-spacing:-0.035em; line-height:1.02; margin:0; text-wrap:balance; }
h1 { font-size:clamp(2.7rem,6.2vw,5.6rem); }
h2 { font-size:clamp(2.1rem,4.4vw,3.6rem); letter-spacing:-0.03em; line-height:1.05; }
h3 { font-size:clamp(1.2rem,1.7vw,1.4rem); letter-spacing:-0.015em; line-height:1.25; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.lede { color:var(--text-2); font-size:clamp(1.02rem,1.3vw,1.15rem); max-width:38rem; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus { left:1rem; top:1rem; z-index:100; background:var(--text); color:var(--ink-0); padding:.6rem 1rem; border-radius:var(--r-btn); }

.kicker {
  display:inline-block; font:500 .8rem/1 var(--font); letter-spacing:.02em; color:var(--text-2);
  padding:.5rem .8rem; border:1px solid var(--hair-2); border-radius:999px; margin-bottom:1.4rem;
  background:rgba(255,255,255,0.03);
}

/* ---------- buttons ---------- */
.btn {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:500 .98rem/1 var(--font); text-decoration:none; cursor:pointer; white-space:nowrap;
  padding:1rem 1.45rem; border-radius:var(--r-btn); border:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active { transform:translateY(1px); }
.btn-gold { background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:var(--on-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.btn-dark { background:rgba(255,255,255,0.06); color:var(--text); border-color:var(--hair); }
.btn-dark:hover { background:rgba(255,255,255,0.1); }
/* the reference's sheen: a soft band of light crossing the button */
.sheen::after {
  content:""; position:absolute; inset:-2px auto -2px -60%; width:45%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.38),transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0;
}
.btn-gold.sheen::after { z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent); }
@media (prefers-reduced-motion:no-preference){
  .sheen::after { animation:sheen 4.2s var(--ease) 1.2s infinite; }
  @keyframes sheen { 0% { left:-60%; opacity:1; } 38% { left:120%; opacity:1; } 39%,100% { left:120%; opacity:0; } }
}

/* ---------- floating nav ---------- */
.site-head { position:fixed; top:14px; left:0; right:0; z-index:50; padding:0 var(--gutter); pointer-events:none; }
.nav-bar {
  pointer-events:auto; max-width:calc(var(--max) - 2*var(--gutter)); margin:0 auto; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 .6rem 0 1.25rem;
  background:rgba(14,17,24,0.72); border:1px solid var(--hair); border-radius:16px;
  backdrop-filter:saturate(140%) blur(16px); -webkit-backdrop-filter:saturate(140%) blur(16px);
  transition:background .3s var(--ease);
}
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.brand img { height:30px; width:auto; }
.brand span { font:500 .8rem/1 var(--font); color:var(--text-2); border:1px solid var(--hair-2); border-radius:8px; padding:.4rem .55rem; }
.nav-links { display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav-links a { text-decoration:none; font-size:.95rem; color:var(--text); opacity:.86; }
.nav-links a:hover { opacity:1; }
.nav-cta { display:flex; align-items:center; gap:.4rem; }
.nav-cta .tel { text-decoration:none; font-size:.95rem; padding:.6rem .8rem; color:var(--text); opacity:.86; }
.nav-cta .btn { padding:.8rem 1.1rem; font-size:.92rem; }
.menu-btn { display:none; background:rgba(255,255,255,0.06); border:1px solid var(--hair); color:var(--text); border-radius:var(--r-btn); padding:.7rem .95rem; font:500 .88rem/1 var(--font); cursor:pointer; }
.mobile-menu { display:none; }
@media (max-width:960px){
  .nav-links, .nav-cta .tel { display:none; }
  .menu-btn { display:inline-flex; }
  .brand span { display:none; }
  .mobile-menu.open {
    display:block; pointer-events:auto; max-width:calc(var(--max) - 2*var(--gutter)); margin:.5rem auto 0;
    background:rgba(14,17,24,0.96); border:1px solid var(--hair); border-radius:16px; padding:.5rem 1.25rem 1.25rem;
  }
  .mobile-menu a:not(.btn) { display:block; padding:.95rem 0; border-bottom:1px solid var(--hair); text-decoration:none; }
  .mobile-menu .btn { width:100%; margin-top:1rem; }
}
@media (max-width:420px){ .nav-cta .btn { display:none; } }

/* ---------- hero ---------- */
.hero { position:relative; min-height:max(640px,min(100svh,980px)); display:flex; flex-direction:column; overflow:hidden;
  background:radial-gradient(90% 70% at 72% 40%,#1a1e2b 0%,var(--ink-0) 62%); }
.hero-3d { position:absolute; inset:0; z-index:0; }
.hero-3d canvas { width:100% !important; height:100% !important; display:block; opacity:0; transition:opacity 1.4s var(--ease); }
.hero-3d.is-ready canvas { opacity:1; }
/* the sun: a glowing disc composited over the scene, moved by hero3d.js */
.hero-sun { position:absolute; left:0; top:0; z-index:1; width:340px; height:340px; margin:-170px 0 0 -170px; pointer-events:none;
  background:radial-gradient(circle, #FFF8E6 0 7%, rgba(255,226,150,0.9) 9%, rgba(255,200,90,0.32) 16%, rgba(255,185,70,0.1) 34%, rgba(255,185,70,0) 62%);
  mix-blend-mode:screen; opacity:0; transition:opacity 1.6s var(--ease); will-change:transform; }
.hero-3d.is-ready .hero-sun { opacity:1; }
@media (max-width:1023px){ .hero-sun { width:170px; height:170px; margin:-85px 0 0 -85px; } }
/* scrims so text always reads over the scene */
.hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(9,11,17,0.82) 0%,rgba(9,11,17,0.45) 34%,rgba(9,11,17,0) 58%),
             linear-gradient(0deg,var(--ink-0) 0%,rgba(9,11,17,0) 22%); }
.hero-body { position:relative; z-index:2; flex:1; display:flex; align-items:center; padding:calc(14px + 64px + 3rem) 0 3rem; }
.hero-body .wrap { width:100%; }
.hero h1 { max-width:11.5ch; }
.hero .lede { margin:1.4rem 0 2.1rem; max-width:31rem; }
.hero-ctas { display:flex; gap:.6rem; flex-wrap:wrap; }
.hero-status { margin-top:1.6rem; font-size:.88rem; color:var(--text-3); display:flex; align-items:center; gap:.55rem; }
.hero-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(255,194,26,0.14); }
.creds { position:relative; z-index:2; border-top:1px solid var(--hair); }
.creds ul { list-style:none; margin:0; padding:1.15rem 0; display:flex; flex-wrap:wrap; gap:.5rem 2.25rem; }
.creds li { font-size:.86rem; color:var(--text-2); }
.creds b { color:var(--text); font-weight:500; }
@media (max-width:1023px){
  .hero::before { background:linear-gradient(180deg,rgba(9,11,17,0.9) 0%,rgba(9,11,17,0.7) 42%,rgba(9,11,17,0) 70%),
                              linear-gradient(0deg,var(--ink-0) 0%,rgba(9,11,17,0) 18%); }
  .hero-body { align-items:flex-start; padding-top:calc(14px + 64px + 2.5rem); padding-bottom:clamp(320px, 66vw, 600px); }
}
@media (prefers-reduced-motion:no-preference){
  .hero-body .wrap > * { animation:rise 1s var(--ease) both; }
  .hero-body .wrap > *:nth-child(2){ animation-delay:.08s; }
  .hero-body .wrap > *:nth-child(3){ animation-delay:.16s; }
  .hero-body .wrap > *:nth-child(4){ animation-delay:.24s; }
  .hero-body .wrap > *:nth-child(5){ animation-delay:.32s; }
  @keyframes rise { from { opacity:0; transform:translateY(18px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
}

/* ---------- scroll reveal (only when JS has opted in) ---------- */
html.js-motion .reveal { opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js-motion .reveal.in { opacity:1; transform:none; }
html.js-motion .reveal.d1 { transition-delay:.08s; }
html.js-motion .reveal.d2 { transition-delay:.16s; }
html.js-motion .reveal.d3 { transition-delay:.24s; }

/* ---------- sections ---------- */
section { padding:var(--sec-y) 0; position:relative; }
.sec-head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:2rem 4rem; align-items:end; margin-bottom:3.25rem; }
.sec-head .lede { margin:0; }
@media (max-width:900px){ .sec-head { grid-template-columns:1fr; } }
.band { background:var(--ink-1); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }

/* metal card: soft top highlight + hairline, like lit brushed metal */
.card {
  position:relative; background:var(--metal), var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-card);
  padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; overflow:hidden;
}
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent); }
.card h3 { margin-bottom:.55rem; }
.card p { color:var(--text-2); font-size:.96rem; margin:0; }
.card .ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:1.6rem;
  background:linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.03)); border:1px solid var(--hair-2); }
.card .ico svg { width:24px; height:24px; color:var(--text); }
.card .foot { margin-top:auto; padding-top:1.4rem; font-size:.84rem; color:var(--text-3); }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1040px){ .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .grid-3 { grid-template-columns:1fr; } }
@media (max-width:560px){ .grid-4 { grid-template-columns:1fr; } }

/* figures row */
.figures { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.figure { border-top:1px solid var(--hair-2); padding-top:1.3rem; }
.figure b { display:block; font:500 clamp(2.4rem,4.6vw,3.8rem)/1 var(--font); letter-spacing:-0.04em; margin-bottom:.6rem;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,0.55)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.figure span { font-size:.92rem; color:var(--text-2); display:block; max-width:22rem; }
@media (max-width:700px){ .figures { grid-template-columns:1fr; gap:1.5rem; } }

/* stepped panel */
.stepped { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.steps { list-style:none; margin:2.25rem 0 0; padding:0; counter-reset:s; }
.steps li { counter-increment:s; display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.2rem 0; border-top:1px solid var(--hair); }
.steps li::before { content:counter(s,decimal-leading-zero); font:500 .9rem/1.6 var(--font); color:var(--text-3); font-variant-numeric:tabular-nums; }
.steps h3 { font-size:1.08rem; letter-spacing:-0.01em; margin-bottom:.3rem; }
.steps p { margin:0; color:var(--text-2); font-size:.96rem; }
.media { position:sticky; top:104px; border-radius:var(--r-panel); overflow:hidden; background:var(--ink-2); border:1px solid var(--hair); aspect-ratio:4/5; }
.media img { width:100%; height:100%; object-fit:cover; object-position:64% 50%; filter:grayscale(.55) contrast(1.05) brightness(.8); }
.media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,11,17,0) 45%,rgba(9,11,17,0.75)); }
.media .float { position:absolute; z-index:1; left:1rem; right:1rem; bottom:1rem;
  background:rgba(20,24,35,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair-2); border-radius:var(--r-card); padding:1.15rem 1.25rem; }
.media .float b { display:block; font-weight:500; font-size:1.1rem; letter-spacing:-0.01em; margin-bottom:.3rem; }
.media .float span { font-size:.92rem; color:var(--text-2); }
@media (max-width:900px){ .stepped { grid-template-columns:1fr; } .media { position:relative; top:0; aspect-ratio:4/3; } }

/* split with drawing */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.split .art { border:1px solid var(--hair); border-radius:var(--r-panel); background:var(--metal), var(--ink-2); padding:clamp(1.5rem,4vw,3rem); color:var(--text-2); }
.split .art .gold { stroke:var(--gold); }
.ticks { list-style:none; padding:0; margin:1.6rem 0 0; }
.ticks li { position:relative; padding:.8rem 0 .8rem 1.6rem; border-top:1px solid var(--hair); color:var(--text-2); font-size:.98rem; }
.ticks li::before { content:""; position:absolute; left:0; top:1.18rem; width:9px; height:5px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); }
.ticks li b { color:var(--text); font-weight:500; }
@media (max-width:900px){ .split { grid-template-columns:1fr; } }

.note { margin-top:1.6rem; color:var(--text-3); font-size:.88rem; max-width:52rem; }

/* about */
.about { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.about figure { margin:0; border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--hair); }
.about figure img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:12% 40%; filter:grayscale(.45) brightness(.85); }
.about figcaption { padding:.8rem 1rem; font-size:.82rem; color:var(--text-3); background:var(--ink-2); }
@media (max-width:900px){ .about { grid-template-columns:1fr; } }

/* faq */
.faq { max-width:54rem; }
.faq details { border-top:1px solid var(--hair); }
.faq details:last-child { border-bottom:1px solid var(--hair); }
.faq summary { list-style:none; cursor:pointer; padding:1.35rem 3rem 1.35rem 0; position:relative; font:500 clamp(1.05rem,1.5vw,1.2rem)/1.35 var(--font); letter-spacing:-0.01em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--hair-2); border-radius:8px; font-weight:400; color:var(--text-2); transition:transform .35s var(--ease); }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details > div { padding:0 0 1.4rem; color:var(--text-2); max-width:46rem; }
.faq details > div p:last-child { margin:0; }

/* form basics (shared by the estimator and booking step) */
form.qf { background:var(--metal), var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-panel); padding:clamp(1.25rem,3vw,2.25rem); }
.qf fieldset { border:0; margin:0; padding:0; min-width:0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:560px){ .row { grid-template-columns:1fr; } }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:700px){ .row3 { grid-template-columns:1fr; } }
.field { margin-bottom:1.15rem; min-width:0; }
.field label, .field .lbl { display:block; font:500 .88rem/1.3 var(--font); margin-bottom:.5rem; }
.field .hint { font-weight:400; color:var(--text-3); }
.qf input[type=text], .qf input[type=number], .qf input[type=email], .qf input[type=tel], .qf select, .qf textarea {
  width:100%; font:400 1rem/1.4 var(--font); color:var(--text);
  background:var(--ink-3); border:1px solid var(--hair); border-radius:var(--r-btn); padding:.85rem 1rem;
  -webkit-appearance:none; appearance:none;
}
.qf input[type=number] { -moz-appearance:textfield; }
.qf input[type=number]::-webkit-inner-spin-button, .qf input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.qf ::placeholder { color:var(--text-3); }
.qf select { background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.5rem; }
.qf textarea { min-height:100px; resize:vertical; }
.qf input:focus, .qf select:focus, .qf textarea:focus { outline:none; border-color:var(--gold); }
.qf input[type=file] { font:400 .9rem/1.4 var(--font); color:var(--text-2); width:100%; }
.qf input[type=file]::file-selector-button { font:500 .86rem/1 var(--font); color:var(--text); background:rgba(255,255,255,0.06); border:1px solid var(--hair-2); border-radius:var(--r-btn); padding:.65rem 1rem; margin-right:.8rem; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chips label { position:relative; margin:0; }
.chips input { position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.chips span { display:inline-block; padding:.8rem 1.05rem; border:1px solid var(--hair-2); border-radius:var(--r-btn); font:500 .94rem/1 var(--font); color:var(--text-2); transition:all .2s var(--ease); background:rgba(255,255,255,0.02); }
.chips label:hover span { border-color:rgba(243,244,247,0.32); color:var(--text); }
.chips input:checked + span { background:var(--text); color:var(--ink-0); border-color:var(--text); }
.chips input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.consent { display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:var(--text-2); margin:.25rem 0 1.5rem; }
.consent input { margin-top:.2rem; width:18px; height:18px; accent-color:var(--gold); flex:none; }
.consent a { color:var(--text); }
.hp { position:absolute; left:-9999px; }
.form-foot { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.form-foot p { margin:0; font-size:.85rem; color:var(--text-3); flex:1 1 16rem; }
.form-error { color:#FFB4A8; font-size:.92rem; margin:0 0 1rem; }
.muted-s { color:var(--text-2); font-size:.95rem; margin:0 0 1.5rem; max-width:44rem; }

/* ---------- bill estimator ---------- */
.est-section { overflow:hidden; }
.est-section::before { content:""; position:absolute; inset:-20% -10% auto auto; width:60%; height:70%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,194,26,0.08),transparent); }
form.est { position:relative; min-width:0; padding:clamp(1.25rem,3.4vw,2.6rem); box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
form.est::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:var(--r-panel) var(--r-panel) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); }
.est-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,20rem); gap:1.5rem; align-items:start; }
.est-aside { position:sticky; top:100px; border:1px solid var(--hair); border-radius:var(--r-panel); padding:1.75rem 1.5rem; background:rgba(255,255,255,0.015); }
.est-aside .kind { font:500 .8rem/1 var(--font); color:var(--gold); margin:0 0 .8rem; letter-spacing:.02em; }
.est-aside h3 { font-size:1.35rem; letter-spacing:-0.02em; }
.est-aside .ticks { margin-top:1.1rem; }
.est-aside .ticks li { font-size:.92rem; }
.est-aside .who { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--hair); display:grid; gap:.3rem; font-size:.88rem; color:var(--text-3); }
.est-aside .who b { color:var(--text); font-weight:500; font-size:.95rem; }
.est-aside .who a { color:var(--text); margin-top:.5rem; text-underline-offset:3px; text-decoration-color:var(--gold); }
@media (max-width:1080px){ .est-layout { grid-template-columns:1fr; } .est-aside { position:static; } }
@media (max-width:1080px) and (min-width:700px){ .est-aside .ticks { display:grid; grid-template-columns:1fr 1fr; column-gap:1.5rem; } }
.est h3 { font-size:clamp(1.45rem,2.6vw,2rem); letter-spacing:-0.025em; margin:0 0 1.6rem; outline:none; }
.est-progress { display:none; list-style:none; margin:0 0 2.2rem; padding:0; gap:.4rem; counter-reset:none; }
.est-progress li { flex:1; display:flex; align-items:center; gap:.55rem; font:500 .84rem/1.2 var(--font); color:var(--text-3); padding-top:.85rem; border-top:2px solid var(--hair); transition:color .3s var(--ease), border-color .3s var(--ease); }
.est-progress li span { width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.74rem; border:1px solid var(--hair-2); }
.est-progress li.is-done { color:var(--text-2); border-color:rgba(255,194,26,.45); }
.est-progress li.is-on { color:var(--text); border-color:var(--gold); }
.est-progress li.is-on span, .est-progress li.is-done span { background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
@media (max-width:620px){ .est-progress li { font-size:0; gap:0; } .est-progress li.is-on { font-size:.8rem; gap:.5rem; flex:2.4; } }

/* panels: without JS every input step shows and the result step stays hidden */
.est-panel + .est-panel { margin-top:2.4rem; padding-top:2.4rem; border-top:1px solid var(--hair); }
.est .only-js, .est [data-go], .est .est-nav { display:none; }
.est.est-ready .est-progress { display:flex; }
.est.est-ready .est-panel { display:none; }
.est.est-ready .est-panel.is-active { display:block; margin:0; padding:0; border:0; }
.est.est-ready [data-go] { display:inline-flex; }
.est.est-ready .est-nav { display:flex; }
.est.est-ready [data-needs-estimate][hidden] { display:none; }
@media (prefers-reduced-motion:no-preference){
  .est.est-ready .est-panel.is-active { animation:panel-in .55s var(--ease) both; }
  @keyframes panel-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}
.est-nav { flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-top:2rem; }
.skip-link { font-size:.9rem; color:var(--text-2); text-underline-offset:3px; text-decoration-color:var(--hair-2); }
.skip-link:hover { color:var(--text); }

/* bill amount */
.bill-row { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.money { position:relative; flex:0 0 13rem; }
.money span { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); font:500 1.8rem/1 var(--font); color:var(--text-2); pointer-events:none; }
.qf .money input { font:500 2.2rem/1 var(--font); letter-spacing:-0.03em; padding:1rem 1rem 1rem 2.6rem; }
.bill-range { flex:1 1 14rem; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; margin:0; cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 0 var(--p,30%),var(--ink-3) var(--p,30%) 100%); }
.bill-range::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--text); border:5px solid var(--gold); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.bill-range::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--text); border:5px solid var(--gold); }
.bill-range:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }
@media (max-width:560px){ .money { flex:1 1 100%; } }

.exact { margin:.6rem 0 0; border:1px solid var(--hair); border-radius:var(--r-card); background:rgba(255,255,255,0.015); }
.exact summary { cursor:pointer; list-style:none; padding:1rem 1.15rem; font:500 .92rem/1.3 var(--font); color:var(--text-2); display:flex; justify-content:space-between; gap:1rem; }
.exact summary::-webkit-details-marker { display:none; }
.exact summary::after { content:"+"; color:var(--text-3); transition:transform .3s var(--ease); }
.exact[open] summary::after { transform:rotate(45deg); }
.exact > div { padding:0 1.15rem .4rem; }
.est-how > div { padding-bottom:1rem; color:var(--text-2); font-size:.92rem; }
.est-how > div p:last-child { margin:0; }

/* results */
.est-usage { color:var(--text-2); font-size:1.05rem; margin:-.6rem 0 1.6rem; max-width:44rem; }
.est-usage b { color:var(--text); font-weight:500; }
.est-options { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.est-options.one { grid-template-columns:1fr; }
@media (max-width:760px){ .est-options { grid-template-columns:1fr; } }
.opt { position:relative; border:1px solid var(--hair-2); border-radius:var(--r-card); padding:1.5rem 1.4rem 1.35rem; background:rgba(255,255,255,0.02); display:flex; flex-direction:column; }
.opt.is-rec { border-color:rgba(255,194,26,.6); background:linear-gradient(180deg,rgba(255,194,26,0.07),rgba(255,194,26,0) 60%), rgba(255,255,255,0.02); }
.opt .tag { position:absolute; top:-.7rem; left:1.2rem; font:600 .72rem/1 var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--on-gold); background:var(--gold); border-radius:999px; padding:.4rem .65rem; }
.opt .kind { font:500 .84rem/1.2 var(--font); color:var(--text-3); margin:0 0 .4rem; }
.opt .sys { font:500 1.3rem/1.2 var(--font); letter-spacing:-0.02em; margin:0 0 1.2rem; }
.opt .save { margin:0 0 .2rem; font:600 clamp(2rem,4vw,2.6rem)/1 var(--font); letter-spacing:-0.04em; }
.opt .save small { font-size:.4em; font-weight:500; letter-spacing:0; color:var(--text-2); }
.opt .per { color:var(--text-2); font-size:.9rem; margin:0 0 1.3rem; }
.meter { margin:0 0 1.1rem; }
.meter-top { display:flex; justify-content:space-between; font-size:.84rem; color:var(--text-2); margin-bottom:.45rem; }
.meter-top b { color:var(--text); font-weight:500; }
.meter-bar { height:8px; border-radius:8px; background:var(--ink-3); overflow:hidden; }
.meter-bar i { display:block; height:100%; width:var(--w,0%); border-radius:8px; background:linear-gradient(90deg,var(--gold-2),var(--gold)); }
@media (prefers-reduced-motion:no-preference){ .meter-bar i { animation:grow 1.1s var(--ease) .2s both; } @keyframes grow { from { width:0; } } }
.opt dl { margin:0 0 1.3rem; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; font-size:.88rem; }
.opt dt { color:var(--text-3); }
.opt dd { margin:0; text-align:right; color:var(--text-2); }
.opt .btn { margin-top:auto; width:100%; }
.opt .meh { color:var(--text-2); font-size:.92rem; margin:0 0 1.3rem; }
.est-notes { margin-top:1.6rem; }
.est-notes li { font-size:.93rem; }
.est-how { margin-top:1rem; }
.est-cta { margin-top:1.8rem; display:flex; align-items:center; gap:1.25rem 2rem; flex-wrap:wrap; padding:1.4rem 1.5rem; border-radius:var(--r-card);
  background:linear-gradient(100deg,rgba(255,194,26,0.12),rgba(255,194,26,0.03)); border:1px solid rgba(255,194,26,.3); }
.est-cta > div { flex:1 1 22rem; }
.est-cta b { display:block; font-weight:500; font-size:1.12rem; letter-spacing:-0.01em; margin-bottom:.3rem; }
.est-cta span { color:var(--text-2); font-size:.93rem; }
.est-chosen { margin:-.6rem 0 1.2rem; padding:.9rem 1.1rem; border-radius:var(--r-btn); border:1px solid rgba(255,194,26,.3); background:rgba(255,194,26,0.06); font-size:.93rem; color:var(--text-2); }
.est-chosen b { color:var(--text); font-weight:500; }

/* final call to action */
.final-cta { text-align:center; overflow:hidden; }
.final-cta::before { content:""; position:absolute; left:50%; top:50%; width:min(900px,120vw); height:500px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,194,26,0.13),transparent); }
.final-cta .wrap { position:relative; }
.final-cta h2 { max-width:16ch; margin:0 auto; }
.final-cta .lede { margin:1.25rem auto 2rem; }
.final-cta .hero-ctas { justify-content:center; }

/* sticky phone call to action */
.mcta { display:none; }
@media (max-width:760px){
  .mcta { display:flex; gap:.5rem; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; padding:.5rem;
    background:rgba(14,17,24,0.86); border:1px solid var(--hair-2); border-radius:14px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transform:translateY(140%); transition:transform .45s var(--ease); }
  .mcta .btn { padding:.9rem 1rem; }
  .mcta .btn-gold { flex:1; }
  html.mcta-on .mcta { transform:none; }
  .site-foot { padding-bottom:6rem; }
}

/* footer */
.site-foot { border-top:1px solid var(--hair); padding:4rem 0 2.5rem; background:var(--ink-1); }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.foot-grid h4 { font:500 .8rem/1 var(--font); color:var(--text-3); margin:0 0 1rem; }
.foot-grid ul { list-style:none; margin:0; padding:0; }
.foot-grid li { margin-bottom:.55rem; font-size:.94rem; color:var(--text-2); }
.foot-grid a { text-decoration:none; color:var(--text-2); }
.foot-grid a:hover { color:var(--text); }
.foot-grid img { height:30px; width:auto; margin-bottom:1.25rem; }
.legal { border-top:1px solid var(--hair); margin-top:3rem; padding-top:1.5rem; font-size:.82rem; color:var(--text-3); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
@media (max-width:820px){ .foot-grid { grid-template-columns:1fr; } }

/* plain content pages (complaints, privacy, thanks) */
.page { padding:calc(14px + 64px + clamp(3rem,7vw,6rem)) 0 var(--sec-y);
  background:radial-gradient(70% 40% at 80% 0%,#171b27 0%,var(--ink-0) 70%); }
.prose { max-width:46rem; }
.prose h1 { font-size:clamp(2.4rem,5vw,4rem); margin-bottom:1.5rem; }
.prose h2 { font-size:clamp(1.4rem,2.4vw,1.8rem); letter-spacing:-0.02em; margin:2.75rem 0 1rem; }
.prose p, .prose li { color:var(--text-2); }
.prose ol, .prose ul { padding-left:1.25rem; margin:0 0 1.25rem; }
.prose li { margin-bottom:.55rem; }
.prose strong { color:var(--text); font-weight:500; }
.prose a { color:var(--text); text-decoration-color:var(--gold); text-underline-offset:3px; }
.prose .lede { font-size:1.15rem; color:var(--text); max-width:none; }
.callout { border:1px solid var(--hair-2); border-radius:var(--r-card); background:var(--metal), var(--ink-2); padding:1.25rem 1.4rem; margin:1.5rem 0; }
.callout p:last-child { margin:0; }

/* ---------- process steps + who-does-what (simple site, Nov 2026) ---------- */
.process li { padding:1.35rem 0; }
.process .tag { display:inline-block; margin-top:.75rem; padding:.28rem .6rem; border:1px solid var(--hair-2); border-radius:999px;
  font-size:.78rem; line-height:1.2; color:var(--text-2); letter-spacing:.01em; }
.card .kind { font:500 .8rem/1 var(--font); color:var(--gold); margin:0 0 .8rem; letter-spacing:.02em; }
.card .ticks { margin-top:1rem; }
.card .ticks li { font-size:.94rem; }

/* New-build enquiry */
.nb-jump { margin:-1.25rem 0 0; font-size:.96rem; color:var(--text-2); grid-column:2; }
.nb-jump a { color:var(--text); text-underline-offset:3px; text-decoration-color:var(--gold); }
@media (max-width:900px){ .nb-jump { grid-column:auto; } }

/* =========================================================================
   Guide, tool and suburb pages (Nov 2026). Generated by tools/build.py.
   ========================================================================= */
.phero { padding:calc(14px + 64px + clamp(2.5rem,6vw,5rem)) 0 clamp(2.5rem,5vw,4rem);
  background:radial-gradient(70% 60% at 85% 0%,#1b2030 0%,var(--ink-0) 70%); border-bottom:1px solid var(--hair); }
.phero h1 { font-size:clamp(2.3rem,5.2vw,4.4rem); max-width:18ch; }
.phero .lede { margin:1.3rem 0 0; max-width:40rem; }
.phero .hero-ctas { margin-top:2rem; }
.crumbs { font-size:.84rem; color:var(--text-3); margin:0 0 1.4rem; display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; }
.crumbs li + li::before { content:"/"; margin-right:.4rem; color:var(--text-3); }
.crumbs a { color:var(--text-2); text-decoration:none; }
.crumbs a:hover { color:var(--text); }
.updated { font-size:.82rem; color:var(--text-3); margin:1.4rem 0 0; }

/* the direct answer: first thing under the hero, written to be quoted */
.answer { border:1px solid var(--hair-2); border-left:3px solid var(--gold); border-radius:var(--r-card);
  background:var(--metal), var(--ink-2); padding:1.4rem 1.5rem; margin:0; max-width:52rem; }
.answer p { margin:0; color:var(--text); font-size:clamp(1.02rem,1.3vw,1.14rem); }
.answer p + p { margin-top:.7rem; color:var(--text-2); font-size:.98rem; }
.sec-tight { padding:clamp(2.5rem,5vw,4rem) 0; }

/* long-form body */
.article { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,5vw,5rem); align-items:start; }
.article .prose { max-width:44rem; }
.article .prose h2 { font-size:clamp(1.5rem,2.6vw,2.1rem); margin:3rem 0 1rem; }
.article .prose h2:first-child { margin-top:0; }
.article .prose h3 { font-size:1.15rem; margin:2rem 0 .6rem; }
.side { position:sticky; top:104px; display:flex; flex-direction:column; gap:1rem; }
.side .card p { font-size:.92rem; }
.side .btn { margin-top:1rem; width:100%; }
.side .card ul { list-style:none; margin:.6rem 0 0; padding:0; }
.side .card li { padding:.45rem 0; border-top:1px solid var(--hair); font-size:.92rem; }
.side .card li a { color:var(--text-2); text-decoration:none; }
.side .card li a:hover { color:var(--text); }
@media (max-width:1000px){ .article { grid-template-columns:minmax(0,1fr); } .side { position:static; } }
.article > * { min-width:0; }
.prose .links { padding-left:0; }
.prose ul.links li { margin:0; }

/* key facts */
.kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--hair);
  border:1px solid var(--hair); border-radius:var(--r-card); overflow:hidden; margin:1.5rem 0; }
.kv div { background:var(--ink-2); padding:1rem 1.15rem; }
.kv dt { font-size:.8rem; color:var(--text-3); margin:0 0 .35rem; }
.kv dd { margin:0; font-size:1.05rem; color:var(--text); font-variant-numeric:tabular-nums; }
.kv dd small { color:var(--text-2); font-size:.82rem; }

/* data tables */
.tbl { width:100%; overflow-x:auto; margin:1.5rem 0; border:1px solid var(--hair); border-radius:var(--r-card); -webkit-overflow-scrolling:touch; }
.tbl table { width:100%; border-collapse:collapse; font-size:.93rem; min-width:420px; }
.tbl caption { text-align:left; padding:.9rem 1rem; font-size:.84rem; color:var(--text-3); caption-side:bottom; border-top:1px solid var(--hair); }
.tbl th, .tbl td { padding:.7rem 1rem; text-align:right; border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align:left; }
.tbl thead th { font-weight:500; color:var(--text-3); font-size:.8rem; background:var(--ink-2); }
.tbl tbody td { color:var(--text-2); }
.tbl tbody th { font-weight:500; color:var(--text); }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom:0; }
.tbl tr.hl td, .tbl tr.hl th { color:var(--text); background:rgba(255,194,26,0.06); }
.tbl a { color:var(--text); text-decoration-color:var(--gold); text-underline-offset:3px; }

/* monthly bar chart (inline SVG, no script) */
.chart { margin:1.5rem 0; border:1px solid var(--hair); border-radius:var(--r-card); background:var(--ink-2); padding:1.2rem 1.2rem .6rem; }
.chart svg { width:100%; height:auto; }
.chart .bar { fill:rgba(243,244,247,0.22); }
.chart .bar.alt { fill:var(--gold); }
.chart text { fill:var(--text-3); font:500 11px var(--font); }
.chart .val { fill:var(--text-2); }
.chart .grid { stroke:var(--hair); }
.chart figcaption { font-size:.84rem; color:var(--text-3); padding:.6rem 0 .3rem; }
.legend { display:flex; gap:1.2rem; font-size:.82rem; color:var(--text-2); margin:.2rem 0 .4rem; flex-wrap:wrap; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.4rem; vertical-align:-1px; background:rgba(243,244,247,0.22); }
.legend i.alt { background:var(--gold); }

/* interactive tools */
.tool { border:1px solid var(--hair-2); border-radius:var(--r-panel); background:var(--metal), var(--ink-2); padding:clamp(1.25rem,3vw,2rem); margin:1.75rem 0; }
.tool h3 { margin-bottom:1rem; }
.tool .field { margin-bottom:1.1rem; }
.tool-out { border-top:1px solid var(--hair); margin-top:1.2rem; padding-top:1.2rem; }
.tool-out .big { font:500 clamp(2rem,4vw,2.8rem)/1 var(--font); letter-spacing:-0.035em; margin:0 0 .5rem; }
.tool-out .big small { font-size:.9rem; color:var(--text-2); letter-spacing:0; }
.tool-out p { color:var(--text-2); margin:.4rem 0 0; font-size:.96rem; }
.tool-out .btn { margin-top:1.2rem; }
.qf input[type=range].plain { width:100%; accent-color:var(--gold); }
.verdict { display:inline-block; padding:.3rem .7rem; border-radius:999px; font-size:.82rem; font-weight:500; margin-bottom:.8rem; border:1px solid var(--hair-2); }
.verdict.good { color:#9BE3B0; border-color:rgba(155,227,176,.35); }
.verdict.ok { color:var(--gold); border-color:rgba(255,194,26,.35); }
.verdict.bad { color:#FF9F8A; border-color:rgba(255,159,138,.35); }

/* link grids: nearby suburbs, related guides */
.links { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.links a { display:block; padding:.9rem 1rem; border:1px solid var(--hair); border-radius:12px; background:var(--ink-2); text-decoration:none; color:var(--text); font-size:.95rem; transition:border-color .2s var(--ease); }
.links a:hover { border-color:var(--hair-2); }
.links a span { display:block; font-size:.82rem; color:var(--text-3); margin-top:.2rem; }
.guide-cards .card { text-decoration:none; color:inherit; transition:border-color .2s var(--ease); }
.guide-cards .card:hover { border-color:var(--hair-2); }
.guide-cards .card .kind { margin-bottom:1rem; }
.foot-grid.four { grid-template-columns:1.3fr 1fr 1fr 1fr; }
@media (max-width:1000px){ .foot-grid.four { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid.four { grid-template-columns:1fr; } }
.foot-grid.four > div:first-child ul { margin-top:1rem; }

/* ---------- installs paused notice (PAUSED in tools/parts.py) ---------- */
.pause-note { margin:0 0 1.75rem; padding:1rem 1.15rem; max-width:46rem; background:rgba(255,194,26,0.08);
  border:1px solid rgba(255,194,26,0.4); border-radius:var(--r-card); font-size:.95rem; color:var(--text-2); }
.pause-note p { margin:0; }
.pause-note b { color:var(--text); font-weight:600; }
.pause-note a { color:var(--gold); font-weight:500; white-space:nowrap; }
.hero .pause-note { margin-top:1.75rem; margin-bottom:0; max-width:34rem; background:rgba(14,17,24,0.78); }
.referral { margin:.25rem 0 1.25rem; padding:1rem 1.1rem; border:1px solid rgba(255,194,26,0.4); border-radius:var(--r-card); background:rgba(255,194,26,0.06); }
.referral .lbl { color:var(--text); }
.referral p { font-size:.9rem; color:var(--text-2); margin:.35rem 0 .8rem; }
.referral .chips label { flex:1 1 15rem; }
.referral[aria-invalid="true"] { border-color:#ff8a7a; }
.referral .chips span { display:block; height:100%; line-height:1.35; }

/* ---------- estimator: "your place" illustration (js/house.js) ---------- */
.est-house { margin:1.6rem 0 0; border:1px solid var(--hair-2); border-radius:var(--r-card); overflow:hidden; background:var(--ink-1); }
.est-house[hidden] { display:none; }
.eh-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; padding:1.25rem 1.4rem 1.1rem; }
.eh-kicker { margin:0 0 .35rem; font:500 .8rem/1 var(--font); color:var(--gold); letter-spacing:.02em; }
.eh-title { margin:0; font:500 1.25rem/1.2 var(--font); letter-spacing:-0.02em; }
.eh-own { margin:.35rem 0 0; color:var(--text-2); font-size:.92rem; }
.eh-ctrls { display:flex; flex-wrap:wrap; gap:.6rem; }
.eh-seg { display:inline-flex; padding:3px; border:1px solid var(--hair-2); border-radius:999px; background:var(--ink-2); }
.eh-seg[hidden] { display:none; }
.eh-seg button { appearance:none; border:0; background:none; color:var(--text-2); font:500 .84rem/1 var(--font); padding:.55rem .9rem; border-radius:999px; cursor:pointer; min-height:36px; }
.eh-seg button:hover { color:var(--text); }
.eh-seg button[aria-pressed="true"] { background:var(--text); color:var(--ink-0); }
.eh-art { line-height:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:#0B0E15; }
.eh-art svg { display:block; width:100%; height:auto; }
.eh-key { list-style:none; margin:0; padding:1.1rem 1.4rem .4rem; display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.6rem; }
@media (max-width:700px){ .eh-key { grid-template-columns:1fr; } }
.eh-key li { display:flex; gap:.75rem; align-items:flex-start; font-size:.92rem; color:var(--text-2); }
.eh-key b { color:var(--text); font-weight:500; }
.eh-n { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 .76rem/1 var(--font); background:var(--gold); color:var(--on-gold); margin-top:.05rem; }
.eh-key li.is-grid .eh-n { background:#9FB2D8; }
.eh-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.5rem; padding:.9rem 1.4rem 1.25rem; }
.eh-foot p { margin:0; flex:1 1 22rem; color:var(--text-3); font-size:.82rem; }
.eh-dl small { font-size:.75em; opacity:.65; margin-left:.35rem; }
@media (max-width:520px){ .eh-top, .eh-key, .eh-foot { padding-left:1rem; padding-right:1rem; } .eh-ctrls, .eh-seg { width:100%; } .eh-seg button { flex:1; } .eh-dl { width:100%; } }

/* ---------- system finder (finder.js) ---------- */
.finder .finder-intro { color:var(--text-2); font-size:.96rem; margin:-.4rem 0 1.4rem; max-width:44rem; }
.finder .tool-out.finder-out { margin-top:1.6rem; padding-top:1.8rem; }
.finder-res { padding-top:1.9rem; }
.finder-res .sys { margin-bottom:.9rem; }
.finder-res dl { grid-template-columns:auto 1fr; }
.finder-res dd { text-align:left; }
.finder-why { margin-top:.2rem; }
.finder-why li { font-size:.93rem; }
.finder-why a { color:var(--text); }
.finder-cta { margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:center; }
.finder-cta .btn { width:auto; margin-top:0; }
.finder-cta p { flex:1 1 18rem; margin:0; color:var(--text-2); font-size:.88rem; }
.sys-band .grid-3 .card .sys { font:500 1.15rem/1.25 var(--font); letter-spacing:-0.015em; color:var(--text); margin:.2rem 0 .7rem; }
.sys-band .grid-3 .card p.use { color:var(--text-3); font-size:.86rem; margin-top:.9rem; }
.sys-band .finder { margin-top:0; }
@media (max-width:560px){ .finder-res dl { grid-template-columns:1fr; } .finder-res dt { margin-top:.35rem; } .finder-cta .btn { width:100%; } }

/* homepage regions band: country Victoria first */
.town-find { max-width:40rem; margin:0 0 2rem; }
.town-find label { display:block; font-weight:500; margin-bottom:.5rem; }
.town-find .tf-row { display:flex; gap:.6rem; }
.town-find input { flex:1; min-width:0; font:inherit; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--hair); border-radius:12px; padding:.8rem 1rem; }
.town-find input:focus { outline:2px solid var(--gold); outline-offset:1px; }
.town-find .tf-miss { color:var(--text-2); font-size:.9rem; margin:.5rem 0 0; }
.rg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.rg-card { border:1px solid var(--hair-2); border-radius:14px; padding:1rem 1.1rem; background:rgba(255,255,255,.02); }
.rg-card .kind { font:500 .78rem/1.2 var(--font); color:var(--gold); margin:0 0 .45rem; }
.rg-card h3 { font-size:1.02rem; margin:0 0 .4rem; }
.rg-card h3 a { color:var(--text); text-decoration:none; }
.rg-card h3 a:hover { text-decoration:underline; }
.rg-towns { margin:0; font-size:.88rem; color:var(--text-3); line-height:1.5; }
.rg-towns a { color:var(--text-2); text-decoration:none; }
.rg-towns a:hover { color:var(--text); text-decoration:underline; }
.rg-alt { background:transparent; border-style:dashed; }
.rg-cta { display:block; text-decoration:none; border-color:var(--gold); background:rgba(232,184,74,.08); }
.rg-cta h3 { color:var(--text); }
.rg-cta:hover { background:rgba(232,184,74,.14); }
.rg-note { color:var(--text-2); font-size:.92rem; margin-top:1.5rem; max-width:52rem; }
@media (max-width:1000px){ .rg-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .town-find .tf-row { flex-direction:column; } .rg-card { padding:.85rem .9rem; } }