/* ============================================================
   Watt Works – shared stylesheet
   Brand: dark charcoal + orange accent (#FD5521)
   ============================================================ */

:root{
  --orange:#FD5521;
  --orange-dark:#e34612;
  --ink:#12151b;        /* darkest bg */
  --panel:#1a1e26;      /* section bg */
  --panel-2:#222732;    /* card bg */
  --line:#2c313d;
  --text:#eef1f6;
  --muted:#aab2c0;
  --white:#ffffff;
  --radius:14px;
  --maxw:1160px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ff:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff);
  color:var(--text);
  background:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;font-weight:700;letter-spacing:.2px}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.accent{color:var(--orange)}
.section{padding:76px 0}
.section--tight{padding:52px 0}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--muted);max-width:720px}
.center .lead,.lead.center{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:14px 26px;border-radius:40px;font-weight:600;font-size:1rem;
  cursor:pointer;border:2px solid transparent;transition:.2s ease;
}
.btn-primary{background:var(--orange);color:var(--ink)}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(15,17,23,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.15rem}
.brand img{width:46px;height:46px}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text);font-weight:500;font-size:.98rem;padding:6px 0;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--orange)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-call{color:var(--orange);font-weight:700}
.menu-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.menu-toggle svg{width:28px;height:28px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,16,.9) 0%,rgba(10,12,16,.62) 55%,rgba(10,12,16,.35) 100%);
  z-index:1;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .container{position:relative;z-index:2;padding-top:40px;padding-bottom:40px}
.hero .kicker{color:var(--orange);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;margin-bottom:14px}
.hero p{max-width:560px;color:#dfe4ee;font-size:1.12rem}
.hero .btn-row{margin-top:26px}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:linear-gradient(160deg,#171b22,#0f1217);padding:96px 0 64px;text-align:center;border-bottom:1px solid var(--line)}
.page-hero .kicker{color:var(--orange);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.82rem}

/* ---------- Feature rows (Residential / Commercial / Industrial on home) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:56px 0}
.feature:nth-child(even) .feature-media{order:2}
.feature-media img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.feature-media img.portrait{max-height:560px}
.feature h3{color:var(--orange);font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}

/* ---------- Services grid ---------- */
.grid{display:grid;gap:26px}
.grid-3{display:flex;flex-wrap:wrap;justify-content:center}
.grid-3 .card{flex:0 1 calc((100% - 52px)/3)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;transition:.2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--orange)}
.card .ico{width:52px;height:52px;margin-bottom:16px;color:var(--orange)}
.card .ico svg{width:100%;height:100%;fill:var(--orange)}
.card h3{margin-bottom:.35em}
.card p{color:var(--muted);margin:0}

/* ---------- Service detail blocks (services page) ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:46px 0;border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:0}
.svc:nth-child(even) .svc-media{order:2}
.svc-media img{width:100%;height:340px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.svc-media img.portrait{height:560px}
.svc h2{color:var(--orange)}

/* ---------- About ---------- */
.about-split{display:grid;grid-template-columns:1.3fr 1fr;gap:46px;align-items:center}
.about-split img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:360px;object-fit:cover}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px}
.value h3{color:var(--orange)}
.value p{color:var(--muted)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.contact-media img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
form.ww-form{display:grid;gap:16px}
/* A grid item stretches to the full column by default, which made the submit
   button span the whole form with its label shoved to the left. Size it to its
   own content and centre the label inside it. */
form.ww-form button[type="submit"]{justify-self:start;justify-content:center;min-width:190px}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;color:var(--muted);font-weight:600}
.field.req label::after{content:" *";color:var(--orange)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input,textarea{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font:inherit;
}
input:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(253,85,33,.35)}
textarea{min-height:140px;resize:vertical}

/* ---------- Testimonials ---------- */
.testi-wrap{
  position:relative;display:grid;grid-template-columns:44px 1fr 44px;grid-template-areas:"prev viewport next";
  align-items:center;column-gap:18px;max-width:760px;margin:38px auto 0;
}
.testi-viewport{grid-area:viewport;min-width:0;overflow:hidden}
.testi-prev{grid-area:prev}
.testi-next{grid-area:next}
.testi-track{list-style:none;margin:0;padding:0}
.testi-slide{display:none}
.testi-slide.is-active{display:block;animation:testiFade .4s ease}
@keyframes testiFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.testi-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 34px;box-shadow:var(--shadow);min-height:310px;
}
.testi-stars{color:var(--orange);font-size:1.1rem;letter-spacing:3px;margin-bottom:14px}
.testi-quote{margin:0 0 18px;font-size:1.15rem;line-height:1.6;color:var(--text)}
.testi-quote::before{content:"\201C"}
.testi-quote::after{content:"\201D"}
.testi-author{margin:0;font-weight:700;color:var(--text)}
.testi-source{margin:2px 0 0;color:var(--muted);font-weight:500;font-size:.86rem}
.testi-arrow{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--line);background:var(--panel-2);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease;
}
.testi-arrow svg{width:20px;height:20px}
.testi-arrow:hover,.testi-arrow:focus-visible{border-color:var(--orange);color:var(--orange)}
.testi-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.testi-dot{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer}
.testi-dot.is-active{background:var(--orange)}
.testi-dot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(90deg,var(--orange),var(--orange-dark));text-align:center;padding:58px 0}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--ink)}
.cta-band .btn-ghost{border-color:var(--ink);color:var(--ink)}
.cta-band .btn-ghost:hover{background:#fff;color:var(--ink)}
.cta-band .btn-primary{background:#12151b;color:#fff}
.cta-band .btn-primary:hover{background:#000}

/* ---------- Get in touch ---------- */
.touch{text-align:center}
.touch img{width:120px;height:120px;margin:0 auto 18px}
.touch a{display:block;font-size:1.5rem;font-weight:700;margin:6px 0;color:#fff}
.touch a:hover{color:var(--orange)}

/* ---------- Footer ---------- */
.site-footer{background:#0c0e13;border-top:1px solid var(--line);padding:46px 0 28px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-footer h4{color:#fff;margin:0 0 14px;font-size:1rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--orange)}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.foot-brand img{width:44px;height:44px}
.foot-bottom{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;text-align:center;font-size:.86rem}

/* ---------- Solar calculator ---------- */
.calc-grid{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start}
.calc-form{display:grid;gap:26px;margin:0}

.calc-step{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 30px;margin:0;min-width:0;
}
/* A legend is painted inside the fieldset's top border by default, which sits it
   flush against the card edge and swallows the padding. Floating it full width
   puts it back into normal flow; everything after it is a flex/grid box or a
   paragraph, so all of it clears the float on its own. */
.calc-step legend{
  float:left;width:100%;
  display:flex;align-items:center;gap:12px;
  font-size:1.3rem;font-weight:700;line-height:1.15;padding:0;margin-bottom:14px;
}
.calc-step::after{content:"";display:block;clear:both}
.calc-num{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--orange);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:700;
}
.calc-hint{color:var(--muted);font-size:.94rem;margin:0 0 20px}
/* Hover/tap help bubble, sits at the right-hand end of a step legend. */
.calc-help{
  position:relative;flex:0 0 auto;margin-left:auto;
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line);background:var(--panel);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;line-height:1;cursor:help;transition:.2s ease;
}
.calc-help:hover,.calc-help:focus{border-color:var(--orange);color:var(--orange);outline:none}
.calc-tip{
  position:absolute;top:calc(100% + 10px);right:-2px;z-index:30;
  width:min(300px,74vw);padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  color:var(--muted);font-size:.85rem;font-weight:400;line-height:1.5;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s ease;pointer-events:none;
}
.calc-help:hover .calc-tip,.calc-help:focus .calc-tip{opacity:1;visibility:visible;transform:none}
.calc-hint--tight{margin:14px 0 0;font-size:.88rem}
.calc-rule{border:0;border-top:1px solid var(--line);margin:26px 0 20px}
.calc-sub{font-weight:700;font-size:1rem;margin:0 0 14px}

/* Size stepper */
.size-picker{display:flex;align-items:center;justify-content:center;gap:22px}
.size-btn{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--line);background:var(--panel);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease;
}
.size-btn svg{width:22px;height:22px}
.size-btn:hover:not(:disabled),.size-btn:focus-visible{border-color:var(--orange);color:var(--orange)}
.size-btn:disabled{opacity:.35;cursor:not-allowed}
.size-read{text-align:center;min-width:170px}
.size-kw{margin:0;font-size:clamp(2.6rem,7vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-1px}
.size-unit{font-size:1.3rem;font-weight:600;color:var(--orange);margin-left:6px}
.size-sub{margin:8px 0 0;color:var(--muted);font-size:.94rem}

.size-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;margin:26px 0 0;padding:0;border:0;border-radius:3px;
  background:var(--line);cursor:pointer;
}
.size-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--orange);border:3px solid var(--panel-2);cursor:pointer;
}
.size-range::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--orange);border:3px solid var(--panel-2);cursor:pointer;
}
.size-range:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.size-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;margin-top:8px}

/* Option cards */
.opt-grid{display:grid;gap:14px}
.opt-2{grid-template-columns:repeat(2,1fr)}
.opt-3{grid-template-columns:repeat(3,1fr)}
.opt-stack{grid-template-columns:1fr}
.opt-gap{margin-top:14px}
.opt{display:block;cursor:pointer;min-width:0}
.opt input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.opt-body{
  display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;
  padding:18px 14px;text-align:center;
  background:var(--panel);border:2px solid var(--line);border-radius:12px;
  transition:.2s ease;
}
.opt:hover .opt-body{border-color:rgba(253,85,33,.55)}
.opt input:checked + .opt-body{border-color:var(--orange);background:rgba(253,85,33,.1)}
.opt input:focus-visible + .opt-body{outline:2px solid var(--orange);outline-offset:3px}
.opt-ico{width:44px;height:28px;color:var(--orange);flex:0 0 auto}
.opt-title{font-weight:700;font-size:1rem;line-height:1.25}
.opt-note{color:var(--muted);font-size:.86rem;line-height:1.45}

.opt-wide .opt-body{
  flex-direction:row;align-items:flex-start;text-align:left;gap:16px;
  padding:18px 20px;flex-wrap:wrap;
}
.opt-wide .opt-ico{width:30px;height:30px}
.opt-wide .opt-title{flex:1 1 auto;min-width:0;padding-top:3px}
.opt-wide .opt-note{flex:1 1 100%}

/* Location chips */
.chip-grid{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-block;cursor:pointer}
.chip input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.chip span{
  display:inline-block;padding:10px 20px;border-radius:40px;
  background:var(--panel);border:2px solid var(--line);
  font-weight:600;font-size:.95rem;transition:.2s ease;
}
.chip:hover span{border-color:rgba(253,85,33,.55)}
.chip input:checked + span{border-color:var(--orange);background:rgba(253,85,33,.1);color:var(--orange)}
.chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:3px}

/* Live quote panel */
.calc-summary{
  position:sticky;top:94px;
  /* A sticky panel taller than the window puts its own bottom permanently out of
     reach, which is how the Enquire button gets lost. The card is sized to fit
     without this, so the scrollbar only ever appears on a very short window with
     a battery caveat showing. */
  max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin;
}
.calc-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.calc-card-body{padding:22px 28px 24px}

/* The drawn system, full bleed across the top of the card. Shorter on a short
   window, so the card as a whole stays inside the sticky panel. */
.calc-viz{
  margin:0;border-bottom:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
  background:radial-gradient(125% 95% at 50% 6%,#242a38 0%,#171b23 72%);
  overflow:hidden;
}
/* 203px is the 400px column at the drawing’s own 176:104, so at full height it
   fills the width exactly with nothing letterboxed. */
.calc-viz-stage{
  height:clamp(140px,20vh,203px);
  display:flex;align-items:center;justify-content:center;
}
.iso-svg{width:100%;height:100%}
.calc-viz figcaption{
  padding:0 18px 10px;text-align:center;
  color:var(--muted);font-size:.8rem;line-height:1.45;
}

/* The scene. Every face is flat shaded by which way it points, which is all the
   depth cue an isometric drawing needs. */
.iso-wall-a{fill:#2f3644}
.iso-wall-b{fill:#232935}
.iso-roof{fill:#3c4453}
/* Over the ridge and turned away from the light, so a shade down from the front. */
.iso-roof-back{fill:#313846}
.iso-fascia{fill:#1d222c}
.iso-ridge{stroke:#535d70;stroke-width:1.2}
.iso-tex{stroke:#333a49;stroke-width:.7}
.iso-etch{stroke:#14181f;stroke-width:.9;opacity:.8}
.iso-glass{fill:#5f7799;opacity:.9}
.iso-door{fill:#1b2028}
.iso-panel{fill:url(#wwPanel);stroke:#0c111a;stroke-width:.5}
.iso-kit.iso-top{fill:#e2e7ee}
.iso-kit.iso-side{fill:#c8d0dc}
.iso-kit.iso-front{fill:#a9b3c2}
.iso-batt.iso-top{fill:#eef1f6}
.iso-batt.iso-side{fill:#dfe4ec}
.iso-batt.iso-front{fill:#c3cad6}
.iso-stand.iso-top{fill:#333a47}
.iso-stand.iso-side{fill:#272d38}
.iso-stand.iso-front{fill:#1f242e}
.iso-ghost{fill:rgba(253,85,33,.07);stroke:var(--orange);stroke-width:.8;stroke-dasharray:3 2.2}
/* Between the battery modules. Finer than iso-etch, because at a realistic
   300mm a module the seams sit close enough together to merge otherwise. */
.iso-seam{stroke:#8d97a6;stroke-width:.35}
.calc-card-kicker{
  color:var(--orange);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-size:.78rem;margin:0 0 6px;
}
.calc-price{margin:0;font-size:clamp(2.4rem,5vw,3rem);font-weight:700;line-height:1.05;letter-spacing:-1px}
.calc-price-sub{margin:6px 0 0;color:var(--muted);font-size:.92rem}

.calc-lines{list-style:none;margin:16px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.calc-lines li{display:flex;justify-content:space-between;gap:16px;font-size:.93rem}
.calc-lines li span:first-child{color:var(--muted)}
.calc-lines li span:last-child{font-weight:600;white-space:nowrap}

/* One rule above the pair, rather than one above each, which is most of the
   height the drawing needed. */
.calc-specs{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:grid;gap:6px;
}
.calc-spec{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin:0;font-size:.93rem;
}
.calc-spec span{color:var(--muted)}
.calc-spec strong{color:var(--orange);text-align:right}

/* The headline savings numbers live in their own section further down. This is
   the one-line trailer for them. */
.calc-saving{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.87rem;line-height:1.5;
}
.calc-saving strong{color:var(--text);font-size:1rem}
.calc-saving a{color:var(--orange);font-weight:600}
.calc-saving a:hover{text-decoration:underline}

.calc-actions{margin-top:14px}
.calc-actions .btn{flex:1 1 auto;justify-content:center}
.calc-note{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.85rem;line-height:1.55;
}
.calc-fineprint{margin:26px auto 0;color:var(--muted);font-size:.82rem;line-height:1.6}
.calc-fineprint a{color:var(--orange);font-weight:600}
.calc-fineprint a:hover{text-decoration:underline}

/* Running-total bar for small screens only, see the note in the markup */
.calc-bar{display:none}

/* ---------- What the system saves ---------- */
.savings-section{background:var(--panel);border-top:1px solid var(--line)}
.savings-section .kicker{
  color:var(--orange);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-size:.82rem;margin:0 0 8px;
}
.savings-section .lead strong{color:var(--text)}

/* The two usage fields. Prefilled, so they read as a refinement rather than a
   sixth question standing between someone and their price. */
.sav-usage{
  display:grid;grid-template-columns:1fr 1.15fr;gap:26px 34px;align-items:center;
  margin-top:34px;padding:24px 26px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
}
.sav-usage-intro h3{margin:0 0 6px}
.sav-usage-intro p{color:var(--muted);font-size:.94rem;margin:0}
.sav-usage-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.sav-field{display:grid;gap:6px;align-content:start}
.sav-field label{font-size:.9rem;color:var(--text);font-weight:600}
.sav-input{position:relative;display:block}
.sav-input input{padding-right:52px;font-weight:700;font-size:1.05rem}
/* The unit sits inside the field, so it cannot be mistaken for something to fill in. */
.sav-unit{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.88rem;font-weight:600;pointer-events:none;
}
/* type="number" still gets us a numeric keypad on a phone, but the browser's own
   spinner lands on top of the kWh label and reads as a stray scrollbar. These
   figures get typed, not nudged one step at a time. */
.sav-input input::-webkit-outer-spin-button,
.sav-input input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.sav-input input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sav-field-note{color:var(--muted);font-size:.82rem;line-height:1.45}
.sav-usage-read{grid-column:1 / -1;margin:0;display:grid;gap:3px}
.sav-usage-val{font-size:1.35rem;font-weight:700;line-height:1.1;color:var(--orange)}

.savings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.sav-tile{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:grid;align-content:start;gap:5px;
}
.sav-tile--hero{
  grid-column:1 / -1;
  border-color:rgba(253,85,33,.45);
  background:linear-gradient(145deg,rgba(253,85,33,.14),var(--panel-2) 60%);
}
.sav-val{font-size:1.6rem;font-weight:700;line-height:1.1;letter-spacing:-.5px}
.sav-tile--hero .sav-val{font-size:clamp(2.2rem,4.6vw,3rem);color:var(--orange)}
.sav-lbl{color:var(--text);font-weight:600;font-size:.95rem}
.sav-note{color:var(--muted);font-size:.88rem;line-height:1.55;margin-top:2px;max-width:56ch}

.sav-chart-card{
  margin-top:18px;padding:26px 26px 22px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
}
.sav-chart-head h3{margin:0 0 5px}
.sav-chart-head p{color:var(--muted);font-size:.94rem;margin:0 0 20px}
.sav-svg{width:100%;height:auto;display:block;overflow:visible}
.sav-area-neg{fill:#fff;opacity:.07}
.sav-area-pos{fill:url(#wwSavUp)}
.sav-line{fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linejoin:round}
.sav-axis{stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 4}
.sav-mark{stroke:rgba(253,85,33,.5);stroke-width:1.4;stroke-dasharray:4 4}
.sav-dot{fill:var(--orange);stroke:var(--panel-2);stroke-width:3}
.sav-cap{fill:var(--orange);font:700 15px var(--ff)}
.sav-end{fill:var(--text);font:700 15px var(--ff)}
.sav-tick{fill:var(--muted);font:600 13px var(--ff)}

.sav-legend{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
  margin:18px 0 0;padding:0;color:var(--muted);font-size:.86rem;
}
.sav-legend li{display:flex;align-items:center;gap:9px}
.sav-key{width:16px;height:10px;border-radius:3px;flex:0 0 auto}
.sav-key--neg{background:rgba(255,255,255,.14)}
.sav-key--pos{background:rgba(253,85,33,.42)}
.sav-assumptions{margin-top:24px}

/* Send-me-this-quote */
.calc-enquiry{background:var(--panel);border-top:1px solid var(--line)}
.calc-enquiry-inner{max-width:720px;margin:0 auto}
.calc-enquiry h2{color:var(--orange)}
.calc-enquiry .ww-form{margin-top:26px}
.calc-recap{
  display:grid;gap:4px;padding:18px 20px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);
}
.calc-recap span{color:var(--muted);font-size:.9rem}
.calc-recap-price{color:var(--orange)!important;font-weight:700;font-size:1rem!important;margin-top:4px}

/* ---------- Responsive ---------- */
/* Five nav items plus the phone number get tight before the burger kicks in. */
@media (max-width:1080px) and (min-width:861px){
  .nav-links{gap:20px}
  .nav-links a{font-size:.92rem}
  .nav-cta{gap:12px}
  .nav-call{font-size:.92rem}
}
@media (max-width:860px){
  .nav-links{
    position:absolute;top:74px;left:0;right:0;background:var(--panel);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0;border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:19px 22px;width:100%;font-size:1.02rem;display:block}
  .nav-links a.active::after{content:none}
  .nav-links a:hover,.nav-links a:focus-visible,.nav-links a:active{background:var(--panel-2)}
  .menu-toggle{display:inline-flex}
  .nav-call span{display:none}
  .feature,.svc,.about-split,.contact-grid{grid-template-columns:1fr}
  .feature:nth-child(even) .feature-media,.svc:nth-child(even) .svc-media{order:0}
  .grid-2,.values,.foot-grid{grid-template-columns:1fr}
  .grid-3 .card{flex-basis:100%}
  .contact-media img{height:260px;min-height:0}
  .svc-media img.portrait{height:441px}
  .row-2{grid-template-columns:1fr}
  .hero{min-height:70vh}
  .testi-wrap{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"viewport viewport" "prev next";
    row-gap:16px;column-gap:12px;
  }
  .testi-prev,.testi-next{justify-self:center}
  .testi-card{padding:28px 20px;min-height:385px}
  .testi-quote{font-size:1.05rem}
  .calc-grid{grid-template-columns:1fr;gap:28px}
  /* Sticking the quote panel to the top would cover the inputs on a phone, and
     with nothing pinned there is no height to cap either. */
  .calc-summary{position:static;max-height:none;overflow:visible}
  .calc-card-body{padding:24px 20px 26px}
  .calc-viz-stage{height:clamp(190px,52vw,240px)}
  .savings-grid{grid-template-columns:1fr;gap:14px;margin-top:14px}
  .sav-usage{grid-template-columns:1fr;gap:18px;padding:20px 18px;margin-top:28px}
  .sav-usage-fields{grid-template-columns:1fr 1fr;gap:14px}
  .sav-chart-card{padding:22px 16px 18px}
  /* The narrow chart is a taller viewBox scaled to a much smaller box, so the
     type and strokes inside it have to be sized up to survive the reduction. */
  .sav-svg--narrow .sav-cap,.sav-svg--narrow .sav-end{font-size:30px}
  .sav-svg--narrow .sav-tick{font-size:26px}
  .sav-svg--narrow .sav-line{stroke-width:4.5}
  .sav-svg--narrow .sav-axis{stroke-width:2.5;stroke-dasharray:9 7}
  .sav-svg--narrow .sav-mark{stroke-width:2.5;stroke-dasharray:7 7}
  .sav-svg--narrow .sav-dot{stroke-width:5}
  .calc-step{padding:24px 20px 26px}
  .opt-3{grid-template-columns:1fr 1fr}
  /* Three storey would be left stranded on its own row at two columns. */
  .opt-3 .opt:last-child{grid-column:1 / -1}
  .opt-wide .opt-body{gap:14px}
  .calc-bar{
    display:flex;flex-direction:column;gap:6px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:rgba(15,17,23,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .calc-bar-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .calc-bar-text{display:grid;line-height:1.25}
  .calc-bar-lbl{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:1.5px}
  .calc-bar-price{font-size:1.35rem;font-weight:700}
  .calc-bar .btn{padding:11px 20px;font-size:.94rem}
  .calc-bar-hint{margin:0;text-align:center;color:var(--muted);font-size:.72rem}
  /* Keep the bar off the last of the footer. */
  .page-solar{padding-bottom:82px}
}
@media (max-width:420px){
  .nav-call{display:none}
}
@media (max-width:1024px) and (min-width:861px){
  .grid-3 .card{flex-basis:calc((100% - 26px)/2)}
  .calc-grid{grid-template-columns:1fr 330px;gap:28px}
}
@media (prefers-reduced-motion: reduce){
  .testi-slide.is-active{animation:none}
}