/* Self-hosted variable fonts (latin subset) to avoid render-blocking third-party requests */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/spacegrotesk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   Two Gang Electrical
   Electric, dark, certified electrical-contractor system.
   Charcoal + brand orange + signal white, matching the van livery.
   Space Grotesk (display) + Inter (body)

   ────────────────────────────────────────────────
   ─── TO REBRAND ───
   Edit the variables in :root below.
   --ink / --ink-2 / --ink-3 = dark surfaces (van charcoal).
   --volt = brand orange (buttons, accents).
   --orange-ink = orange that meets contrast on light surfaces.
   --font-display / --font-body = the type system.
   ────────────────────────────────────────────────
   ============================================================ */

:root {
  --ink: #0c0d11;
  --ink-2: #14161c;
  --ink-3: #1c1f27;
  --volt: #f07d1e;          /* brand orange */
  --volt-2: #d96a12;        /* darker orange (hover) */
  --volt-soft: #f6a45a;     /* soft orange accent text on dark */
  --amber: #ffb02e;         /* bright highlight for stats */
  --orange-ink: #985008;    /* orange that passes AA on light bg */
  --paper: #f5f6fa;
  --paper-2: #e7eaf2;
  --muted: #9aa3b5;
  --line: #262a34;
  --line-light: #d4d9e6;
  --container: 1200px;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--container); width: 100%; margin: 0 auto; padding: 0 28px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--volt); color: #0c0d11; padding: 12px 18px; font-weight: 700; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }

/* Type */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
h1 { font-size: clamp(40px, 6.4vw, 78px); }
h2 { font-size: clamp(30px, 4.2vw, 54px); }
h3 { font-size: 23px; }
p { margin: 0; }
.lead { font-size: 18px; color: var(--muted); max-width: 56ch; line-height: 1.7; }
.eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--volt-soft); font-weight: 600; display: inline-flex; align-items: center; }

/* Nav */
.nav { background: rgba(12,13,17,0.97); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--paper); justify-self: start; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: 0.01em; display: inline-flex; align-items: center; color: #fff; }
.logo-power { display: inline-flex; width: 0.78em; height: 0.78em; color: var(--volt); margin: 0 0.02em; transform: translateY(1px); }
.logo-power svg { width: 100%; height: 100%; }
.logo-sub { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--volt); margin-top: 3px; }
.footer .logo-name { font-size: 22px; }

.nav-links { display: flex; gap: 2px; align-items: center; justify-self: center; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 7px; transition: color .15s, background .15s; }
.nav-links a:hover { color: var(--paper); background: var(--ink-3); }
.nav-cta { display: flex; align-items: center; gap: 14px; justify-self: end; }
.nav-phone { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--paper); display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }
.nav-phone .sub { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-soft); }
.nav-quote { white-space: nowrap; }
.nav-call, .nav-toggle { display: none; }
.nav-call { width: 44px; height: 44px; border: 1px solid var(--line-light); border-radius: 9px; color: var(--paper); place-items: center; }
.nav-call svg { width: 20px; height: 20px; }
.nav-toggle { background: none; border: 1px solid var(--line-light); border-radius: 9px; min-width: 44px; min-height: 44px; padding: 0 14px; color: var(--paper); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; min-height: 44px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; border-radius: 9px; border: 1px solid var(--line-light); background: transparent; color: var(--paper); transition: all .16s; }
.btn:hover { border-color: var(--volt); color: var(--volt-soft); }
.btn-volt { background: var(--volt); border-color: var(--volt); color: #0c0d11; font-weight: 700; box-shadow: 0 8px 26px -10px rgba(240,125,30,0.7); }
.btn-volt:hover { background: var(--volt-2); border-color: var(--volt-2); color: #0c0d11; transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.on-light .btn { border-color: rgba(12,13,17,0.2); color: var(--ink); }
.on-light .btn:hover { border-color: var(--volt); color: var(--orange-ink); }

/* Hero */
.hero { position: relative; padding: 86px 0 92px; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 78%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%); z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 52px; align-items: center; }
.hero h1 { margin: 20px 0 24px; }
.hero h1 .volt { color: var(--volt); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 36px; }
.hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hero-trust .item { background: var(--ink-2); padding: 18px 16px; }
.hero-trust .n { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--amber); line-height: 1; }
.hero-trust .l { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.hero-media { position: relative; }
/* Replaced 22-25 Aug 2026. The old hero was a 725x298 letterbox and that file was
   the only copy in existence, so every taller crop invented pixels and read as
   soft. The client supplied this one: 1536x2048 portrait, sharp, and current -
   the van is sign-written with the website and the NAPIT mark, neither of which
   the old photograph showed.

   Cropped to a 4:3 band centred on the van rather than cropped in the browser, so
   the framing is deterministic and nothing is downloaded to be thrown away. The
   band also drops the lens flare that ran across the bottom of the original.

   4:3 was the ratio originally asked for and it is now affordable: the hero column
   is a fixed 485px at any viewport above the 1200px container, so the 960w variant
   covers a 2x display exactly. There is no upscaling at any breakpoint. */
.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.hero-media-tag { position: absolute; left: 14px; bottom: 14px; right: 14px; display: inline-flex; align-items: center; background: rgba(12,13,17,0.92); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--paper); }

/* Sections */
.section { padding: 96px 0; }
.section-head { margin-bottom: 52px; max-width: 660px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 18px; }
.section.light { background: var(--paper); color: var(--ink); }
.section.light .lead { color: #4f5667; }
.section.light .section-head h2 { color: var(--ink); }
.section.light .eyebrow { color: var(--orange-ink); }

/* Accreditation strip (light) */
.cred-strip { background: var(--paper); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); padding: 34px 0; }
.cred-strip .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cred-label { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #5b6373; }
.creds { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px; }
.cred { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px 22px; background: #fff; border: 1px solid var(--line-light); border-radius: 12px; box-shadow: 0 1px 2px rgba(12,13,17,0.05); }
.cred svg { height: 38px; width: auto; display: block; }
.cred svg text { font-family: var(--font-display); }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, transform .2s; }
.service:hover { border-color: var(--volt); transform: translateY(-4px); }
.service .ico { width: 48px; height: 48px; border-radius: 11px; background: rgba(240,125,30,0.13); color: var(--volt-soft); display: grid; place-items: center; border: 1px solid var(--line); }
.service .ico svg { width: 24px; height: 24px; }
.service h3 { font-size: 21px; }
.service p { font-size: 14.5px; color: var(--muted); }
.service .more { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--volt-soft); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.service-cta { justify-content: center; text-align: center; align-items: center; border-style: dashed; }
.service-cta h3 { color: var(--paper); }

/* Service detail (services page) */
.service-detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: center; padding: 84px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.service-detail:first-of-type { border-top: none; }
.service-detail h2 { margin: 14px 0 18px; }
.service-detail p + p { margin-top: 14px; }
.service-detail .btn { margin-top: 26px; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.ticks li { font-size: 14.5px; padding-left: 28px; position: relative; color: var(--paper); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--volt); border-bottom: 2px solid var(--volt); transform: rotate(-45deg); }
.service-detail-media img { border: 1px solid var(--line); border-radius: 14px; width: 100%; }
.service-detail-media figcaption { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Process */
.process { background: var(--paper); color: var(--ink); padding: 96px 0; }
.process .section-head h2 { color: var(--ink); }
.process .section-head .lead { color: #4f5667; }
.process .section-head .eyebrow { color: var(--orange-ink); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { padding: 26px; background: #fff; border: 1px solid var(--line-light); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.step .num { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--orange-ink); line-height: 1; }
.step h3 { color: var(--ink); font-size: 20px; }
.step p { font-size: 14px; color: #4f5667; }

/* Recent work */
.work { padding: 96px 0; background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-figure { margin: 0; }
.work-figure img { width: 100%; border: 1px solid var(--line); border-radius: 16px; }
.work-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }

/* Social proof */
.proof { padding: 96px 0; }
.proof-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; }
.proof-score { background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: 36px; text-align: center; }
.proof-score .stars { color: var(--amber); font-size: 22px; letter-spacing: 4px; }
.proof-score .score { font-family: var(--font-display); font-size: 84px; line-height: 1; color: #fff; font-weight: 700; margin: 8px 0 6px; }
.proof-score .score-meta { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.proof-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.proof-points li { font-size: 15px; padding-left: 28px; position: relative; }
.proof-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--volt); border-bottom: 2px solid var(--volt); transform: rotate(-45deg); }

/* Portfolio gallery */
.gallery { padding: 96px 0; background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery figure { margin: 0; position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(rgba(12,13,17,0), rgba(12,13,17,0.88)); }

/* Testimonials */
.reviews-band { padding: 96px 0; }
.reviews-head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; margin-bottom: 42px; }
.reviews-head .eyebrow { margin-bottom: 16px; }
.reviews-head h2 { margin-bottom: 16px; }
.reviews-score { background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 26px; text-align: center; }
.reviews-score .stars { color: var(--amber); font-size: 18px; letter-spacing: 3px; }
.reviews-score .score { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: #fff; line-height: 1; margin: 6px 0 2px; }
.reviews-score .score-meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; }
.review .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.review p { font-size: 14.5px; color: var(--paper); line-height: 1.65; }
.review .who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--paper); }
.review .who small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; }

/* CTA */
.cta-strip { padding: 80px 0; position: relative; overflow: hidden; background: var(--volt); }
.cta-strip::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(12,13,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(12,13,17,0.06) 1px, transparent 1px); background-size: 40px 40px; }
.cta-strip .inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-strip h2 { color: #0c0d11; max-width: 20ch; }
.cta-strip .ph { font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px); color: #0c0d11; font-weight: 700; display: inline-block; }
.cta-strip .sub { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(12,13,17,0.82); font-weight: 600; margin-top: 6px; }

/* Form */
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt-soft); margin-bottom: 7px; }
.form input, .form textarea, .form select { font: inherit; font-size: 16px; width: 100%; padding: 13px 15px; min-height: 48px; background: var(--ink); border: 1px solid var(--line); border-radius: 9px; color: var(--paper); }
.form input::placeholder, .form textarea::placeholder { color: #6b7280; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(240,125,30,0.22); }
.form textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 12.5px; color: var(--muted); }
.form-success { display: none; background: var(--ink-2); border: 1px solid var(--volt); border-radius: 12px; padding: 26px; }
.form-success.show { display: block; }
.form-success h2 { color: #fff; margin-bottom: 8px; font-size: 20px; }
.form-success p { color: var(--muted); font-size: 15px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.contact-info { display: grid; gap: 16px; align-content: start; }
.info-card { padding: 22px 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; }
.info-card h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt-soft); margin-bottom: 8px; }
.info-card p { font-family: var(--font-display); font-size: 21px; color: var(--paper); font-weight: 600; }
.info-card p a { color: inherit; }
.info-card .sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* Page banner */
.page-banner { padding: 76px 0 58px; border-bottom: 1px solid var(--line); }
.page-banner .crumb { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--volt-soft); margin-bottom: 16px; }
.page-banner h1 { max-width: 18ch; }
.page-banner .lead { margin-top: 22px; }

/* About */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-intro img { width: 100%; border: 1px solid var(--line); border-radius: 16px; }
.about-intro p + p { margin-top: 16px; }
.about-intro .body p { color: var(--muted); font-size: 16.5px; }
.about-intro .body p strong { color: var(--paper); }

/* 404 */
.error-page { padding: 120px 0; text-align: center; }
.error-page .big { font-family: var(--font-display); font-size: clamp(80px, 16vw, 180px); font-weight: 700; line-height: 1; color: var(--ink-3); letter-spacing: -0.04em; }
.error-page h1 { margin: 10px 0 18px; }
.error-page .lead { margin: 0 auto 30px; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.footer { background: var(--ink); padding: 70px 0 30px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer-brand p { font-size: 14px; color: var(--muted); margin-top: 16px; max-width: 36ch; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social .social { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--muted); transition: color .15s, border-color .15s; }
.footer-social .social:hover { color: var(--volt-soft); border-color: var(--volt); }
.footer-social .social svg { width: 20px; height: 20px; }
.footer h2 { font-size: 11px; color: var(--volt-soft); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { color: var(--muted); font-size: 14px; }
.footer-top ul a, .footer-top li { min-height: 44px; display: flex; align-items: center; }
.info-card p a { word-break: break-word; }
.footer a:hover { color: var(--paper); }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; letter-spacing: 0.02em; color: #949cad; }
.footer-bottom a { color: var(--volt-soft); text-decoration: underline; }
.footer-bottom a:hover { color: var(--volt); }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid, .contact-grid, .proof-grid, .about-intro, .service-detail, .reviews-head { grid-template-columns: 1fr; }
  .service-detail { gap: 28px; padding: 56px 0; }
  .service-detail-media { order: -1; }
  .services-grid, .process-steps, .gallery-grid, .reviews-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .section, .process, .work, .proof, .gallery, .reviews-band { padding: 64px 0; }
  .about-intro img { order: -1; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-phone, .nav-quote { display: none; }
  .nav-call { display: grid; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 76px; left: 0; right: 0; margin: 0; background: var(--ink-2); padding: 12px 20px 18px; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(0,0,0,0.6); }
  .nav-links.open a { font-size: 16px; padding: 0 8px; min-height: 50px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .services-grid, .process-steps, .footer-top, .hero-trust, .reviews-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .form .row2 { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 64px; }
  .cta-strip .inner { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .service:hover, .btn-volt:hover { transform: none; }
}

/* ── Safari-safe selects ─────────────────────────────────────────────
   Safari ignores padding/height/width on a native <select> unless
   appearance is reset, which is why the dropdown rendered as a tiny
   default-styled control. Resetting appearance restores the field's own
   sizing; the caret is redrawn with currentColor so it matches each
   field's text colour on any theme. */
.form select, .field select, .book-card select,
.booking select, .reserve-form select, .shop-results-head select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* ============================================================
   Utilities replacing the five inline style attributes the demo
   carried. Moving them here is what lets the CSP drop
   'unsafe-inline' from style-src entirely, per checklist §9.
   ============================================================ */
.inline-link { color: var(--volt-soft); }
.flush { margin: 0; }
.section-tight { padding-top: 0; }
.info-action { margin-top: 8px; }
.btn-block { width: 100%; justify-content: center; }

/* Footer trader identity (e-commerce reg. 6; Companies Act s.82 where the
   trader is a company). Generated by build-legal.js from the BUSINESS object,
   and absent entirely while the identity is unconfirmed. */
.footer-legal {
  padding-top: 20px;
  max-width: 78ch;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.7;
  color: #9aa3b5;
}
.footer-attr { color: var(--muted); }
.footer-bottom nav[aria-label="Legal"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.footer-bottom nav[aria-label="Legal"] a {
  color: var(--muted);
  font-size: 13px;
}
.footer-bottom nav[aria-label="Legal"] a:hover { color: var(--paper); }

/* ============================================================
   Legal pages (/privacy, /cookies, /terms, /accessibility)
   The global reset strips list and table styling, so the long-form
   documents get it back inside a .legal scope rather than by
   loosening the reset for the whole site.
   ============================================================ */
/* The element is both .wrap and .legal, so it keeps the site container width
   and the reading measure goes on the children. Capping .legal itself would
   centre the whole document and pull it out of line with the banner above. */
.legal { max-width: var(--container); }
.legal > * { max-width: 76ch; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 27px;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--paper);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.legal h3 { font-family: var(--font-display); font-size: 19px; margin: 26px 0 10px; color: var(--paper); }
.legal p, .legal li, .legal td, .legal th {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  /* #c6cdda on --ink gives 11.2:1, comfortably past AA for body text. */
  color: #c6cdda;
}
.legal p { margin-bottom: 14px; }
.legal a { color: var(--volt-soft); text-decoration: underline; }
.legal a:hover { color: var(--amber); }
.legal ul, .legal ol { margin: 0 0 16px 22px; padding: 0; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 9px; padding-left: 4px; }
.legal strong { color: var(--paper); font-weight: 600; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  /* Long tables scroll inside themselves rather than forcing the page sideways,
     which is what keeps the 320px requirement satisfiable. */
  display: block;
  overflow-x: auto;
}
.legal thead th {
  text-align: left;
  background: var(--ink-3);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal th, .legal td { border: 1px solid var(--line); padding: 11px 13px; vertical-align: top; }

.legal-updated {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

/* ---- Draft-only furniture. All of it disappears when DRAFT is false. ---- */
.legal-draft {
  background: #3a2a0c;
  border: 1px solid #7a5a1c;
  border-left: 5px solid var(--amber);
  padding: 16px 20px;
  margin-bottom: 28px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: #f4dfb4;
}
.legal-review {
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 28px 30px;
  margin-bottom: 40px;
}
.legal-review h2 { border-top: 0; padding-top: 0; margin: 0 0 10px; font-size: 27px; }
.legal-review h3 {
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 28px 0 6px;
}
.legal-review h3.u { color: var(--amber); }
.legal-review h3.q { color: var(--volt-soft); }
.legal-review h3.a { color: #9ec8a8; }
.legal-review .intro { font-size: 14.5px; margin-bottom: 14px; }
.legal-review ul, .legal-review ol { margin-left: 20px; }
.legal-review li { margin-bottom: 14px; }
.legal-review li strong { display: block; margin-bottom: 3px; }
.legal-review li span { display: block; font-size: 14px; color: #a9b2c2; }
.legal-review li span.where {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ec8a8;
  margin-bottom: 3px;
}
mark.ask, mark.assumed {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
}
mark.ask { background: #ffe0a3; color: #5a3d05; }
mark.assumed { background: #d9e6dd; color: #26402f; }

@media (max-width: 700px) {
  .legal h2 { font-size: 23px; }
  .legal-review { padding: 22px 20px; }
}

/* The model cancellation form the Consumer Contracts Regs 2013 require to be
   made available. Set apart from the surrounding prose so it reads as a form to
   copy rather than as another paragraph. */
.legal-cancellation {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 20px 22px;
  margin: 0 0 22px;
}
.legal-cancellation p:last-child { margin-bottom: 0; }

/* Full-width service section, for the two that have no photograph yet. The
   default .service-detail is a 1.3fr/1fr grid with a figure in the second
   column; without one the body would stretch to a 900px measure. Cap it
   instead, and keep the vertical rhythm identical so the page still reads as
   one list. Remove the modifier when the client sends EV charger and testing
   photos, and drop an image in. */
.service-detail--wide { grid-template-columns: 1fr; }
.service-detail--wide .service-detail-body { max-width: 74ch; }

/* ============================================================
   Generated marketing pages: the service pages, the /services hub
   and /reviews. Built by build-pages.js from page-content.js.
   ============================================================ */
.svc { max-width: var(--container); }
.svc > *, .svc-block > * { max-width: 74ch; }
.svc-block { margin-bottom: 40px; }
.svc-block h2 {
  font-family: var(--font-display);
  font-size: 27px;
  margin: 44px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--paper);
}
.svc-block:first-of-type h2 { border-top: 0; padding-top: 0; margin-top: 4px; }
.svc-block p {
  font-size: 16.5px;
  line-height: 1.75;
  /* #c6cdda on --ink is 11.2:1, well clear of AA. */
  color: #c6cdda;
  margin-bottom: 14px;
}
.svc-block a { color: var(--volt-soft); text-decoration: underline; }
.svc-block a:hover { color: var(--amber); }
.svc-block strong { color: var(--paper); font-weight: 600; }

/* The tick list is reused from the old services page. */
.svc .ticks { list-style: none; margin: 0 0 16px; padding: 0; }
.svc .ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  font-size: 16px;
  color: #c6cdda;
}
.svc .ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--volt);
  border-bottom: 2.5px solid var(--volt);
  transform: rotate(-45deg);
}

/* Page-specific questions. Visible HTML only: no FAQPage schema, because
   Google retired FAQ rich results in 2026 and the markup now earns nothing. */
.faq { margin-bottom: 22px; }
.faq h3 {
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 6px;
}
.faq p { margin: 0; }

/* Repeated primary action. Same action offered again at each decision point,
   not a second competing one. */
.page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 36px 0 40px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* A photograph of the trade, dropped in after the opening block. Capped at 560px
   rather than filling the 74ch text column, because the source files are 640x480
   and that is all there is: every extra pixel of width is invented.

   At 560px it runs 1.75x on a 2x display, which is softer than the hero (1.01x)
   and softer than the home page gallery (about 1.13x, because those tiles are
   only 360px wide). That is a deliberate trade rather than an oversight. These
   sit well below the fold, they are supporting evidence rather than the thing the
   page is judged on, and dropping to 420px to match the gallery would make them
   read as thumbnails in a 629px column. Narrow the cap, or replace the source
   files, if they ever start looking soft in context. */
.svc-photo { margin: 4px 0 34px; max-width: 560px; }
.svc-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.svc-photo figcaption {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 10px;
}

.svc-related { margin-bottom: 34px; }
.svc-related h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  border: 0;
  padding: 0;
}
.svc-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.svc-related a { color: var(--volt-soft); font-size: 15.5px; }
.svc-related a:hover { color: var(--amber); text-decoration: underline; }

/* Named attribution and a visible updated date. Both are AI-citation furniture
   from the SEO playbook, and both happen to be true, which is the only reason
   they are here. */
.svc-meta {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.svc-meta a { color: var(--volt-soft); }

.services-grid-hub .service .eyebrow { margin-bottom: 8px; display: block; }

/* /reviews */
.reviews-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 0 0 40px;
  max-width: none;
}
.review-card {
  margin: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}
.review-card .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.review-card blockquote {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #c6cdda;
}
.review-card figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--paper);
}
.review-card figcaption small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .svc-block h2 { font-size: 23px; }
  .page-cta .btn { width: 100%; justify-content: center; }
}

/* Optional-field marker and the one-of-two contact hint on the enquiry form.
   The hint is visible before the button rather than only on error, so the
   requirement is never a surprise after someone has hit send. */
.form label .opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.86em;
}
.field-hint {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: -4px 0 6px;
}
.form-error {
  margin: 0 0 12px;
  padding: 11px 14px;
  border: 1px solid var(--volt);
  border-radius: 8px;
  background: rgba(240, 125, 30, 0.09);
  /* #f6a45a on the panel is 7.4:1, and the message is not carried by colour
     alone: it is text, in a live region, and focus moves to the field. */
  color: var(--volt-soft);
  font-size: 14.5px;
  line-height: 1.6;
}


/* Second phone number in a contact card. Sits under the primary rather than
   beside it, so the mobile stays the obvious one to ring. */
.info-card .info-second { margin-top: 12px; }

/* Service-area list on the about page. A plain list of towns, not a set of
   location pages: those are a separate piece of work with an overlap gate and a
   portfolio-footprint warning attached. */
.area-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
}
.area-list li {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-2);
  font-size: 15px;
  color: #c6cdda;
}

/* Used on the about page's qualifications block. Classes rather than inline
   style attributes, because the CSP is style-src 'self' with no 'unsafe-inline'
   and an inline style= attribute is blocked by it. */
.svc-full { max-width: none; }
.svc-block-last { margin-bottom: 0; }

/* The about page's "Who you actually get" heading sits inside .about-intro,
   which had no h2 rule, so it butted straight onto its first paragraph. */
.about-intro .body h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--paper);
}

/* The reading-measure cap on .svc children was also catching the services grid
   and the reviews grid on the hub and /reviews, squashing both into a 74ch
   column and leaving a third of the page empty. Prose gets the measure; grids
   and full-width blocks do not. */
.svc > .services-grid,
.svc > .reviews-page-grid,
.svc > .page-cta,
.svc > .svc-full { max-width: none; }

/* Separator rules were doubling up around the call to action. A .svc-block opens
   with a border-top on its h2 and .page-cta also carries one, so a heading
   immediately followed by the CTA drew two lines a few rems apart. Whichever
   order they appear in, only the first one keeps its rule. */
.page-cta + .svc-block > h2,
.page-cta + .svc-block { border-top: 0; padding-top: 0; margin-top: 0; }
.svc-block + .page-cta { border-top: 0; margin-top: 0; padding-top: 0; }

/* Emergency in the primary nav. Marked with the brand orange so it reads as the
   urgent one at a glance, without becoming a second competing CTA next to
   "Get a quote". Six items still fits comfortably; below 1100px the nav
   collapses to the menu button anyway. */
.nav-links a.nav-urgent { color: var(--volt-soft); }
.nav-links a.nav-urgent:hover { color: var(--amber); }