/* ==========================================================================
   SW Electrical — site.css
   Palette direction A ("Navy & Brass") is active.
   To switch direction, replace the :root colour block with one of the
   alternates at the bottom of this file. Nothing else needs to change.
   ========================================================================== */

:root{
  /* Colour — matched to the business card / brand pack palette.
     Derived tones keep the same lightness relationship to the base that
     the previous navy palette had, so contrast behaviour is unchanged. */
  --ink:      #011E3E;   /* body text, deepest tone */
  --navy:     #012F63;   /* primary brand surface */
  --navy-lo:  #01438E;   /* hover / secondary navy */
  --brass:    #EE9D0D;   /* accent: rules, marks, icons */
  --brass-lo: #F3A720;   /* accent on dark backgrounds */
  --paper:    #F7F5F1;   /* page background */
  --white:    #FFFFFF;
  --slate:    #4B5B70;   /* secondary text */
  --line:     #E3E0D9;   /* hairlines */
  --green:    #075E54;   /* WhatsApp action — WhatsApp's own darker brand teal, chosen over the brighter #128C7E for contrast: white text on that lighter green was ~4.1:1, just under the 4.5:1 WCAG AA needs */
  --green-lo: #054F46;

  /* Type */
  --font-display: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gutter: 1.25rem;
  --max: 68rem;
  --radius: 6px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:4.5rem; /* room for mobile action bar */
}
@media (min-width:900px){ body{ padding-bottom:0; } }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.12;
  letter-spacing:-0.018em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 6vw, 3.4rem); font-weight:700; }
h2{ font-size:clamp(1.5rem, 3.6vw, 2.1rem); font-weight:700; }
h3{ font-size:1.15rem; font-weight:650; }
p{ margin:0 0 1.1em; max-width:78ch; }
ul,ol{ max-width:78ch; }
li{ margin-bottom:.35em; }

a{ color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--navy-lo); }

:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:2px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
/* Text-heavy pages: constrain the whole column, not just paragraphs, so
   headings, rules, notices and body copy share one consistent measure.
   Letting the container run full width while paragraphs stop at 62ch left
   a large empty gutter on the right and made pages look unbalanced.
   Wide elements (grids, carousels, maps) opt back out via .full-bleed. */
.narrow{ max-width:var(--max); }
.narrow p, .narrow ul, .narrow ol{ max-width:none; }

/* ---------- Header ---------- */
.site-head{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.head-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; min-height:4.25rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--navy); }
.brand svg{ width:38px; height:38px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  color:var(--navy); letter-spacing:-0.01em;
}
.brand-sub{
  font-size:.66rem; letter-spacing:.18em; color:var(--slate);
  font-weight:600; margin-top:.28rem;
}

.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:.55rem .8rem; font:inherit; font-size:.95rem; font-weight:600;
  color:var(--navy); cursor:pointer;
}
.nav-toggle svg{ width:18px; height:18px; }

#nav{ display:none; flex-basis:100%; }
#nav.open{ display:block; }
#nav ul{
  list-style:none; margin:0; padding:0 0 1rem;
  border-top:1px solid var(--line);
}
#nav li{ margin:0; }
#nav a{
  display:block; padding:.85rem .1rem; text-decoration:none;
  font-weight:550; border-bottom:1px solid var(--line);
}
#nav a[aria-current="page"]{ color:var(--navy); box-shadow:inset 3px 0 0 var(--brass); padding-left:.8rem; }
.nav-cta{ display:none; }

@media (min-width:900px){
  .nav-toggle{ display:none; }
  #nav{ display:block !important; flex-basis:auto; min-width:0; }
  .head-row{ flex-wrap:nowrap; }
  #nav ul{
    display:flex; gap:1.1rem; border:0; padding:0;
    flex-wrap:nowrap;
  }
  #nav li{ flex:0 0 auto; }
  #nav a{
    white-space:nowrap; border:0; padding:.4rem 0;
    font-size:.93rem; display:inline-block;
  }
  #nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--brass); padding-left:0; }
  .nav-cta{
    white-space:nowrap; flex:0 0 auto;
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--navy); color:#fff; text-decoration:none;
    padding:.65rem 1.05rem; border-radius:var(--radius); font-weight:650; font-size:.97rem;
  }
  .nav-cta:hover{ background:var(--navy-lo); color:#fff; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:650; font-size:1rem;
  padding:.9rem 1.35rem; border-radius:var(--radius); border:1px solid transparent;
  text-decoration:none; cursor:pointer; min-height:48px;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn-primary{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.btn-primary:hover{ background:var(--brass-lo); color:var(--ink); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-lo); color:#fff; }
.btn-wa{ background:var(--green); color:#fff; }
.btn-wa:hover{ background:var(--green-lo); color:#fff; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); color:#fff; }
.btn-outline{ background:var(--white); color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0 0; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(115% 90% at 12% -10%, #024DA2 0%, rgba(2,77,162,0) 60%),
    linear-gradient(160deg, #013876 0%, #012F63 45%, #01254D 100%);
  color:#fff;
  padding:3.25rem 0 2.25rem;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 60% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(90% 70% at 60% 30%, #000 0%, transparent 75%);
}
.hero .wrap{ position:relative; z-index:1; }
/* Decorative logo mark bled off the right edge of the hero. Sits above the
   background gradient but below the grid overlay (::before) and all content,
   so it reads as texture rather than a second logo. Hidden below 900px:
   the hero text runs full width on mobile, so a watermark behind it would
   only cost contrast. */
.hero-mark{
  display:none;
  position:absolute; right:-18%; top:50%; transform:translateY(-50%);
  height:110%; width:auto;
  color:#fff; opacity:.06;
  pointer-events:none; z-index:0;
}
@media (min-width:900px){ .hero-mark{ display:block; } }
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--brass); opacity:.85;
}
.hero h1{ color:#fff; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--brass-lo); font-weight:650; font-size:.95rem; margin-bottom:1rem;
}
.hero .eyebrow::before{ content:""; width:26px; height:2px; background:var(--brass); }
.hero p.lede{ color:#D9E2EE; font-size:1.13rem; max-width:44ch; }
.hero-inner{ padding-bottom:2.5rem; }
@media (min-width:900px){ .hero-inner{ padding-bottom:3.25rem; } .hero .lede{ max-width:52ch; } }

.trust{
  list-style:none; padding:0; max-width:none;
  display:grid; grid-template-columns:1fr;
  gap:1px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  overflow:hidden;
  margin:2rem 0 0;
}
.trust li{
  margin:0; padding:.95rem 1rem;
  background:rgba(255,255,255,.018);
  transition:background .18s ease;
  /* Mobile: icon on the left, text stacked beside it. Compact, no stretch. */
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.85rem;
  align-items:center;
}
.trust li:hover{ background:rgba(255,255,255,.055); }
.trust-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  grid-row:1 / span 2;
  border-radius:8px;
  background:rgba(229,161,28,.14);
  color:var(--brass-lo);
}
.trust-icon svg{ width:19px; height:19px; }
.trust strong{
  display:block; color:#fff; font-family:var(--font-display);
  font-size:1rem; letter-spacing:-.012em; line-height:1.2;
  grid-column:2; margin-bottom:.12rem;
}
.trust-label{ color:#93A7BF; font-size:.86rem; line-height:1.35; grid-column:2; }

@media (min-width:760px){
  .hero{ padding-top:4.5rem; padding-bottom:3rem; }
  .trust{ grid-template-columns:repeat(5,1fr); }
  .trust li{
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    padding:1.4rem 1rem 1.45rem;
  }
  .trust-icon{ margin-bottom:.75rem; }
  .trust strong{ font-size:1.05rem; }
  .trust-label{ margin-top:auto; padding-top:.3rem; }
}

/* Page banner (interior pages) */
.banner{ background:var(--navy); color:#fff; padding:2.75rem 0 2.25rem; }
.banner h1{ color:#fff; margin-bottom:.4rem; }
.banner p{ color:#D9E2EE; max-width:52ch; margin:0; }
.crumbs{ font-size:.88rem; color:#9FB3CC; margin-bottom:1rem; }
.crumbs a{ color:#CBD8E8; }
.crumbs span{ padding:0 .4rem; }
.crumbs [aria-current="page"]{ color:#fff; }

/* ---------- Sections ---------- */
.section{ padding:3rem 0; }
.section-alt{ background:var(--white); border-block:1px solid var(--line); }
.section-dark{
  background:linear-gradient(165deg, #01254D 0%, #011E3E 100%);
  color:#C3D0E0;
}
.section-dark h2{ color:#fff; }
.section-dark .section-head p{ color:#9FB0C4; }
.section-dark .reasons strong{ color:#fff; }
.section-dark .reasons span{ color:#9FB0C4; }
.section-dark a{ color:var(--brass-lo); }
.section-head{ margin-bottom:1.75rem; padding-top:.9rem; border-top:3px solid var(--brass); display:inline-block; }
.section-dark .section-head{ border-top-color:var(--brass); }
/* The COMING SOON badge is styled for light backgrounds by default —
   on a dark section it needs an inverted treatment to stay legible. */
.section-dark .tag{ background:rgba(255,255,255,.12); color:#D9E2EE; }
.section-head p{ color:var(--slate); }

/* Service list: an index of what's covered, styled like the circuit
   directory inside a distribution board rather than a boxed card kit.
   Each entry gets a top rule; no per-item border, radius or shadow. */
.services{ display:grid; gap:0; }
@media (min-width:720px){ .services{ grid-template-columns:1fr 1fr; column-gap:2.75rem; } }
.service{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.5rem 0;
  border-top:1px solid var(--line);
}
.service-icon{
  flex:none; width:42px; height:42px; margin-top:.1rem;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--navy); border-radius:6px;
  color:var(--navy); background:var(--white);
}
.service-icon svg{ width:20px; height:20px; }
.service h3, .service h2{ margin-bottom:.4rem; }
/* Where a card or callout is a page's first-level section (e.g. the four
   cards on the services hub) its title is an h2 for a correct heading
   outline, but keeps the h3 visual size so nothing changes on screen. */
.service h2, .notice h2{ font-size:1.15rem; font-weight:650; }
.service p{ color:var(--slate); font-size:.98rem; margin-bottom:.9rem; }
.service a.more{ font-weight:650; font-size:.97rem; }
.service.soon .service-icon{ border-color:#C9C4B8; color:var(--slate); }

.tag{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  background:#EDEAE2; color:var(--slate); padding:.25rem .55rem; border-radius:100px;
  margin-bottom:.6rem;

}

/* Why-choose list */
.reasons{ list-style:none; padding:0; display:grid; gap:1.1rem; max-width:none; }
@media (min-width:720px){ .reasons{ grid-template-columns:1fr 1fr; gap:1.1rem 2.5rem; } }
.reasons li{ padding-left:2.1rem; position:relative; margin:0; }
.reasons li svg{ position:absolute; left:0; top:.2rem; width:22px; height:22px; }
.reasons strong{ display:block; color:var(--navy); font-family:var(--font-display); }
.reasons span{ color:var(--slate); font-size:.97rem; }

/* Gallery placeholder */
.gallery{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.shot{
  aspect-ratio:4/3; border:1px dashed #C9C4B8; border-radius:var(--radius);
  background:#EFECE5; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--slate); font-size:.86rem; padding:1rem;
}

/* Reviews */
.reviews{ display:grid; gap:1rem; }
@media (min-width:720px){ .reviews{ grid-template-columns:repeat(3,1fr); } }
.review{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem; color:var(--slate); font-size:.95rem;
}
.stars{ color:#C9C4B8; letter-spacing:.15em; margin-bottom:.5rem; }

/* Coverage */
.coverage{ display:grid; gap:1.5rem; }
@media (min-width:820px){ .coverage{ grid-template-columns:1.1fr .9fr; align-items:start; } }
/* "At a glance" card on the About page. Sits in the right-hand column of
   the .coverage grid, sticky on desktop so it stays alongside the prose. */
.glance{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.35rem 1.5rem 1.5rem; align-self:start;
}
@media (min-width:820px){ .glance{ position:sticky; top:5.5rem; } }
.glance-title{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--navy); margin:0 0 1rem;
  padding-top:.6rem; border-top:3px solid var(--brass); display:inline-block;
}
.glance dl{ margin:0; display:grid; gap:.85rem; }
.glance dl > div{ margin:0; }
.glance dt{ font-weight:650; color:var(--navy); font-size:.9rem; margin-bottom:.15rem; }
.glance dd{ margin:0; color:var(--slate); font-size:.95rem; line-height:1.5; }
.coverage-map{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:#EFECE5; width:100%;
}
/* Shown in place of the map when Google Maps fails to load. The section
   must still tell a visitor the service area rather than showing a blank
   box or Google's own grey error panel. */
.coverage-map-fallback{
  background:var(--white); padding:1.5rem; height:auto;
  display:flex; flex-direction:column; justify-content:center;
  min-height:230px; color:var(--slate); font-size:.95rem;
}
.coverage-map-fallback p{ margin:0 0 .75rem; max-width:none; }
.coverage-map-fallback p:last-child{ margin-bottom:0; }
.coverage-fallback-title{
  font-family:var(--font-display); font-weight:700;
  color:var(--navy); font-size:1.05rem;
  padding-top:.6rem; border-top:3px solid var(--brass);
  display:inline-block; align-self:flex-start;
}
.towns{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; max-width:none; }
.towns li{
  margin:0; background:var(--white); border:1px solid var(--line);
  border-radius:100px; padding:.35rem .8rem; font-size:.9rem; color:var(--slate);
}

/* CTA band */
.cta-band{ background:var(--navy); color:#fff; padding:3rem 0; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#D9E2EE; max-width:52ch; }

/* Homepage closing band, split by intent: someone planning work on the
   left, someone with a live problem on the right. On mobile the columns
   stack and the vertical divider becomes a horizontal rule. */
.cta-split-grid{ display:grid; gap:2rem; }
.cta-split-col h2{ font-size:1.45rem; margin:.25rem 0 .5rem; }
.cta-split-col p{ font-size:.98rem; margin-bottom:1.1rem; }
.cta-kicker{
  color:var(--brass-lo); font-weight:650; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; margin:0;
}
.cta-split-col + .cta-split-col{ border-top:1px solid rgba(255,255,255,.14); padding-top:2rem; }
@media (min-width:760px){
  .cta-split-grid{ grid-template-columns:1fr 1fr; gap:0; }
  .cta-split-col{ padding-right:2.5rem; }
  .cta-split-col + .cta-split-col{
    border-top:0; padding-top:0; padding-right:0; padding-left:2.5rem;
    border-left:1px solid rgba(255,255,255,.14);
  }
}

/* FAQ */
.faq{ border-top:1px solid var(--line); max-width:52rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:1.1rem .5rem 1.1rem 0; font-weight:650;
  font-family:var(--font-display); color:var(--navy); font-size:1.05rem;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brass); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 1.1rem; color:var(--slate); }

/* Grouped FAQs — themed columns so a long list scans as short ones */
.faq-groups{ max-width:none; }
@media (min-width:900px){
  .faq-groups{ column-count:2; column-gap:3.25rem; }
}
.faq-group{
  min-width:0;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin-bottom:2.25rem;
}
.faq-group:last-child{ margin-bottom:0; }
.faq-group-title{
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); margin:0 0 .35rem;
  display:flex; align-items:center; gap:.65rem;
}
.faq-group-title::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.faq-group .faq{ border-top:0; }
.faq-group .faq summary{ font-size:1rem; padding:.9rem .5rem .9rem 0; }
.faq-group .faq details p{ font-size:.95rem; }

/* Forms */
.form{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; }
.field{ margin-bottom:1.15rem; }
.field label{ display:block; font-weight:600; margin-bottom:.4rem; font-size:.97rem; }
.field .hint{ display:block; font-weight:400; color:var(--slate); font-size:.87rem; margin-top:.15rem; }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  padding:.8rem .85rem; border:1px solid #C9C4B8; border-radius:var(--radius);
  background:var(--white); min-height:48px;
}
/* Example text inside empty fields. Browser defaults are too pale to read
   (Chrome's is about 2.3:1); this is 5.0:1 on white, yet still clearly
   lighter than typed text, so it never reads as a filled-in value. */
.field input::placeholder, .field textarea::placeholder{ color:#66707E; opacity:1; }
.field textarea{ min-height:130px; resize:vertical; }
.radio-row{ display:flex; flex-wrap:wrap; gap:1rem; }
.radio-row label{ display:flex; align-items:center; gap:.45rem; font-weight:400; }
.radio-row input{ width:auto; min-height:auto; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:var(--slate); }
.consent input{ width:auto; min-height:auto; margin-top:.3rem; }
.form-note{ font-size:.9rem; color:var(--slate); }
.form-status{ margin-top:1rem; padding:.9rem 1rem; border-radius:var(--radius); display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#E7F3EC; border:1px solid #B7DCC6; color:#14532D; }
.form-status.err{ background:#FBEAEA; border:1px solid #E5B4B4; color:#7A1F1F; }
/* EV survey video upload progress */
.upload-bar{ height:10px; margin:.7rem 0 .4rem; background:#fff; border:1px solid #B7DCC6; border-radius:999px; overflow:hidden; }
.upload-bar span{ display:block; width:0; height:100%; background:var(--amber, #EE9D0D); transition:width .25s ease; }
/* Field-level errors: the message sits directly under the field at fault,
   and the field itself is outlined, so the customer sees what to fix
   without hunting for it. */
.field-error{ color:#7A1F1F; font-size:.92rem; font-weight:500; margin:.45rem 0 0; }
/* "Did you mean …?" under the email field. Informational, not an error. */
.field-suggest{ color:var(--ink); font-size:.92rem; margin:.45rem 0 0; }
.field-suggest-btn{
  font:inherit; font-weight:600; color:var(--navy); background:none; border:0;
  padding:.35rem .1rem; margin-left:.15rem; text-decoration:underline; cursor:pointer; min-height:44px;
}
.field [aria-invalid="true"]{ border-color:#B42318; box-shadow:0 0 0 3px rgba(180,35,24,.14); }
.photo-slot.has-error, .video-slot.has-error{ outline:2px solid #B42318; outline-offset:6px; border-radius:var(--radius); }

/* Contact detail rows */
.contact-list{ list-style:none; padding:0; margin:0 0 2rem; }
.contact-list li{ display:flex; gap:.9rem; padding:1rem 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.contact-list svg{ width:22px; height:22px; flex:none; margin-top:.15rem; }
.contact-list strong{ display:block; font-family:var(--font-display); color:var(--navy); }
.contact-list span{ color:var(--slate); font-size:.95rem; }

/* Accreditation panel */
.credentials{
  background:linear-gradient(165deg, #013876 0%, #012F63 55%, #012854 100%);
  border-radius:var(--radius);
  padding:1.6rem 1.4rem;
  margin:2rem 0 2.25rem;
  position:relative;
  overflow:hidden;
}
.credentials::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--brass);
}
.credentials-eyebrow{
  display:flex; align-items:center; gap:.6rem;
  color:var(--brass-lo); font-weight:650; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase;
  margin:0 0 1.25rem;
}
.credentials-eyebrow::after{
  content:""; flex:1; height:1px; background:rgba(255,255,255,.16);
}
.credentials-grid{ display:grid; gap:1.4rem; }
@media (min-width:680px){
  .credentials{ padding:1.9rem 1.8rem; }
  .credentials-grid{ gap:1.6rem; }
}
.credential{ display:flex; align-items:center; gap:1.15rem; }
@media (max-width:559px){
  .credential{ flex-direction:column; align-items:flex-start; gap:.85rem; }
}
.credential-badge{
  flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:6px; padding:.55rem .6rem;
  width:120px; height:68px;
}
.credential-badge img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.credential strong{
  display:block; color:#fff; font-family:var(--font-display);
  font-size:1rem; letter-spacing:-.01em; margin-bottom:.2rem;
}
.credential span{ color:#A9BBD0; font-size:.9rem; line-height:1.5; display:block; }

/* EV page government grants: two cards, same white-panel look as the About
   page's "At a glance" card, topped with the brass rule used on section
   headings. Side by side from 720px, stacked below. */
.grants{ display:grid; gap:1rem; margin:1.4rem 0 1.25rem; }
@media (min-width:720px){ .grants{ grid-template-columns:1fr 1fr; gap:1.25rem; } }
.grant{
  background:var(--white); border:1px solid var(--line); border-top:3px solid var(--brass);
  border-radius:var(--radius); padding:1.3rem 1.5rem 1.45rem;
}
.grant-amount{
  font-family:var(--font-display); font-weight:700; color:var(--navy);
  font-size:1.75rem; line-height:1.1; margin:0;
}
.grant-amount span{ font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--slate); margin-right:.15rem; }
.grant h3{ font-size:1.1rem; margin:.55rem 0 .35rem; }
.grant p{ margin:0 0 .6rem; }
.grant ul{ margin:0; padding-left:1.15rem; }
.grant li{ margin:.3rem 0; font-size:.96rem; color:var(--slate); }

.notice{
  display:flex; gap:1rem; align-items:flex-start;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.25rem 0; margin:1.5rem 0;
}
.notice-icon{
  flex:none; width:38px; height:38px; margin-top:.1rem;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--navy); border-radius:6px;
  color:var(--navy); background:var(--white);
}
.notice-icon svg{ width:18px; height:18px; }
.notice-icon-alert{ border-color:var(--brass); color:#B87D14; }
.notice p:last-child{ margin-bottom:0; }
.notice h3, .notice h2{ margin-bottom:.35rem; }

.steps{ counter-reset:step; list-style:none; padding:0; }
.steps li{
  counter-increment:step; position:relative; padding-left:2.6rem; margin-bottom:1.2rem;
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:.05rem;
  width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
}
.steps strong{ display:block; color:var(--navy); font-family:var(--font-display); }

/* Footer */
.site-foot{ background:var(--ink); color:#B9C6D6; padding:2.75rem 0 1.5rem; font-size:.94rem; }
.site-foot h2, .site-foot h3{ color:#fff; font-size:1rem; margin-bottom:.7rem; }
.site-foot a{ color:#DCE6F2; }
.foot-grid{ display:grid; gap:1.9rem; }
@media (min-width:600px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem 2.5rem; } .foot-brand{ grid-column:1 / -1; } }
@media (min-width:900px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; } .foot-brand{ grid-column:auto; } }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid li{ margin-bottom:.45rem; }
.foot-brand svg{ width:44px; height:44px; margin-bottom:.75rem; }
.foot-logo{ color:#fff; display:inline-block; }
.site-foot .foot-hours{ color:#8FA0B4; margin-top:.8rem; }
.foot-brand p{ max-width:34ch; }
.foot-social{ display:flex; gap:.5rem; margin-top:1rem; }
.foot-social li{ margin:0; }
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius);
  color:#DCE6F2; text-decoration:none;
}
.foot-social a:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); }
.foot-social svg{ width:20px; height:20px; margin:0; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.14); margin-top:2rem; padding-top:1.25rem;
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-size:.86rem; color:#8FA0B4;
}

/* Radio groups: strip the browser's default fieldset chrome */
.form fieldset{ border:0; padding:0; margin-inline:0; }
.form legend{ font-weight:600; margin-bottom:.4rem; padding:0; }
/* Spam honeypot: off-screen for people, still present for bots */
.hp{ position:absolute; left:-9999px; }
.cf-turnstile{ margin:1rem 0; }

/* Survey form sections within the boxed .form card */
.form h2{ font-size:1.15rem; margin-top:0; }
.form h2:not(:first-child){
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line);
}

/* Survey photo upload slots */
.photo-slots{ display:grid; gap:1.5rem; margin:1.25rem 0; }
@media (min-width:640px){ .photo-slots{ grid-template-columns:1fr 1fr; } }
.photo-slot{ display:flex; flex-direction:column; gap:.85rem; }
/* Example carousel — shows what a good photo of this thing looks like.
   A slot with no example images renders no carousel at all; it appears,
   with arrows and dots, once real photos are added to EXAMPLE_PHOTOS in
   build.py. */
.example-carousel{
  position:relative; aspect-ratio:4/5; border:1px solid var(--line);
  border-radius:var(--radius); background:#EFECE5; overflow:hidden;
}
/* Portrait (4:5) because the things being photographed are tall: a meter
   cupboard needs the meter at the top and the main fuse at the bottom in one
   shot. Example images are exported at exactly this shape. The charger
   carousel overrides the shape with its own fixed height. */
.example-badge{
  position:absolute; top:.65rem; left:.65rem; z-index:1;
  font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(1,30,62,.84); color:#fff; padding:.28rem .62rem; border-radius:100px;
}
.example-track{ position:relative; width:100%; height:100%; }
.example-slide{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:.6rem;
}
.example-slide.is-active{ display:flex; }
.example-slide img{ width:100%; height:100%; object-fit:cover; }
.example-caption{ color:var(--slate); font-size:.85rem; margin:0; }

/* Survey example photos: a modest thumbnail under the slot's description
   rather than a full-width image. 220px wide (275px tall at 4:5) leaves room
   on a phone for the instructions and the upload button; tapping enlarges it. */
.photo-slot .example-carousel{ width:min(100%, 220px); }
.photo-slot-text h3{ margin-bottom:.3rem; }
.photo-slot-text p{ margin:0; }
.photo-slot-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.photo-slot-actions .photo-thumbs, .photo-slot-actions .video-slot{ align-self:stretch; }
.example-zoom{ display:block; width:100%; height:100%; cursor:zoom-in; }
.example-zoom img{ width:100%; height:100%; object-fit:cover; display:block; }
.example-zoom:focus-visible{ outline:3px solid var(--brass); outline-offset:-3px; }
.example-zoom-icon{
  position:absolute; right:.55rem; bottom:.55rem; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(1,30,62,.84); color:#fff; border-radius:50%;
}
.example-zoom-icon svg{ width:18px; height:18px; }

/* Full-screen viewer for an enlarged example (native <dialog>). */
.zoom-dialog{
  padding:0; border:0; background:transparent; max-width:min(94vw, 760px); max-height:94vh;
  overflow:visible;
}
.zoom-dialog::backdrop{ background:rgba(1,20,42,.95); }
.zoom-dialog img{
  display:block; max-width:min(94vw, 760px); max-height:calc(94vh - 4rem); width:auto; height:auto;
  border-radius:var(--radius); background:#EFECE5; margin:0 auto;
}
/* The caption gets its own dark panel so it stays readable however much of
   the page behind shows through the backdrop. */
.zoom-caption{
  color:#fff; font-size:.92rem; text-align:center; max-width:60ch;
  margin:.7rem auto 0; padding:.55rem .9rem; border-radius:var(--radius);
  background:rgba(1,20,42,.92);
}
.zoom-close{
  position:absolute; top:-.4rem; right:-.4rem; transform:translate(25%, -25%);
  width:44px; height:44px; border-radius:50%; border:2px solid #fff;
  background:var(--navy); color:#fff; font:inherit; font-size:1.6rem; line-height:1; cursor:pointer;
}
.zoom-close:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; }
@media (max-width:560px){ .zoom-close{ top:.4rem; right:.4rem; transform:none; } }
html.zoom-open{ overflow:hidden; }
.photo-slot-icon{ width:40px; height:40px; color:#B5AFA0; display:block; }
.photo-slot-icon svg{ width:100%; height:100%; }
.example-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(12,27,46,.55); color:#fff; font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.example-nav:hover{ background:rgba(12,27,46,.75); }
.example-prev{ left:.6rem; }
.example-next{ right:.6rem; }
.example-dots{
  position:absolute; bottom:.6rem; left:0; right:0;
  display:flex; justify-content:center; gap:.4rem;
}
.example-dot{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55);
}
.example-dot.is-active{ background:#fff; }

/* Charger product carousel — reuses .example-carousel's box/nav/dots,
   adds product framing (contain, not cover) and a name+price caption. */
.charger-carousel{ background:var(--white); border:1px solid var(--line); aspect-ratio:auto; height:420px; }
.charger-carousel .example-track{ height:100%; }
.charger-carousel .example-slide{ position:static; height:100%; }
.charger-carousel .example-slide{ padding:1.5rem 1rem 3.5rem; gap:.75rem; }
.charger-media{ flex:1; display:flex; align-items:center; justify-content:center; min-height:0; }
.charger-media img{ max-width:85%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.charger-info{ text-align:center; }
.charger-info strong{ display:block; color:var(--navy); font-family:var(--font-display); font-size:1.05rem; }
.charger-info span{ color:var(--slate); font-size:.92rem; }
.charger-carousel .example-nav{ background:rgba(12,27,46,.35); }
.charger-carousel .example-nav:hover{ background:rgba(12,27,46,.6); }
.charger-carousel .example-dot{ background:#C9C4B8; }
.charger-carousel .example-dot.is-active{ background:var(--navy); }
/* Deliberately simple: no flex-grow, no stretch, no margin-top:auto.
   Each button sits directly after its own text, full stop. A previous,
   cleverer version tried to line buttons up across a row and repeatedly
   broke in ways that didn't reproduce in testing — this can't. */
.photo-slot-text h3{ font-size:.98rem; margin-bottom:.3rem; }
.photo-slot-text p{ color:var(--slate); font-size:.88rem; margin-bottom:.75rem; }
.photo-slot-btn{
  position:relative; display:inline-flex; cursor:pointer; overflow:hidden;
  align-self:flex-start;
}
.photo-slot-btn input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.photo-thumbs{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.photo-thumbs:empty{ display:none; }
.photo-thumb{
  position:relative; width:72px; height:72px; flex:none;
  border-radius:6px; overflow:hidden; border:1px solid var(--line);
}
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb-remove{
  position:absolute; top:2px; right:2px; width:20px; height:20px;
  border-radius:50%; background:rgba(12,27,46,.75); color:#fff;
  border:0; font-size:.9rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.photo-thumb-remove:hover{ background:var(--navy); }

.video-slot{ margin-top:1rem; }
.video-slot-file[hidden]{ display:none; }
.video-slot-file{
  display:flex; align-items:center; gap:.75rem; margin-top:.6rem;
  font-size:.9rem; color:var(--slate);
}
.video-remove{
  background:none; border:1px solid var(--line); border-radius:100px;
  padding:.25rem .7rem; font-size:.82rem; color:var(--slate); cursor:pointer;
}
.video-remove:hover{ border-color:#C9C4B8; color:var(--ink); }

.photo-slot-filename{
  display:block; margin-top:.5rem; font-size:.82rem; color:var(--slate);
  word-break:break-word;
}
.video-hint{
  margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line);
}

/* Mobile action bar */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.action-bar a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem .5rem; text-decoration:none; font-weight:650; font-size:1rem;
  background:var(--navy); color:#fff; min-height:56px;
}
.action-bar a.wa{ background:var(--green); }
.action-bar svg{ width:20px; height:20px; }
@media (min-width:900px){ .action-bar{ display:none; } }

/* Hero entrance: one orchestrated reveal, nothing else animates on scroll */
@media (prefers-reduced-motion: no-preference){
  .hero-inner > *{ animation:rise .55s cubic-bezier(.2,.7,.3,1) both; }
  .hero-inner > *:nth-child(2){ animation-delay:.07s; }
  .hero-inner > *:nth-child(3){ animation-delay:.14s; }
  .hero-inner > *:nth-child(4){ animation-delay:.21s; }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
}

.lead-in{ font-size:1.1rem; color:var(--slate); max-width:78ch; }
.small{ font-size:.9rem; color:var(--slate); }
.stack > * + *{ margin-top:1.5rem; }

/* ==========================================================================
   ALTERNATE PALETTES — swap the :root colour block above for one of these
   --------------------------------------------------------------------------
   Direction B — Graphite & Signal
   --ink:#111417; --navy:#1D2126; --navy-lo:#2C323A; --brass:#F5C518;
   --brass-lo:#FFD54A; --paper:#F5F5F3; --slate:#565E68; --line:#E2E2DE;

   Direction C — Deep Teal & Copper
   --ink:#0B1F1E; --navy:#123A38; --navy-lo:#1B524F; --brass:#C4703A;
   --brass-lo:#DE8A50; --paper:#F5F3EE; --slate:#4C5F5D; --line:#E0DDD5;
   ========================================================================== */