/* Self-hosted fonts. Nothing is requested from a font CDN: that is a compliance
   requirement for this site (a visitor's IP address must not reach Google). */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter.woff2) format("woff2")}

/* ============================================================
   HD Electrical
   Brand red + charcoal + chalk
   Barlow Condensed (display) + Inter (body)

   ────────────────────────────────────────────────
   ─── TO REBRAND ───
   Edit the variables in :root below.
   --navy, --safety, --chalk drive the palette.
   --font-display / --font-body drive the type system.
   Best for plumbers, electricians, HVAC, roofers, builders.
   ────────────────────────────────────────────────
   ============================================================ */

:root {
  /* Charcoal (the logo "HD" black) replaces navy; brand red replaces safety yellow. */
  --navy: #1c1c22;
  --navy-2: #3a3a44;
  --navy-deep: #121216;
  --safety: #d92c20;
  --safety-dark: #b21f17;
  --red-bright: #ff6256;
  --chalk: #f5f3ef;
  --paper: #fbfaf7;
  --ink: #1a1a1a;
  --muted: #6e7280;
  --rule: #ddd8cc;
  --green: #1f7a4a;
  --container: 1280px;
  --font-display: "Barlow Condensed", "Arial Narrow", 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(--chalk);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* Type */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; line-height: 0.95; text-transform: uppercase; }
h1 { font-size: clamp(56px, 9vw, 144px); }
h2 { font-size: clamp(40px, 6vw, 84px); }
h3 { font-size: 28px; }
p { margin: 0; }
.lead { font-size: 18px; color: var(--navy-2); max-width: 56ch; line-height: 1.6; }
.eyebrow {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--safety-dark); font-weight: 700;
}
.eyebrow.on-navy { color: var(--red-bright); }

/* Nav */
.nav { background: var(--chalk); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.logo-img { height: 62px; width: auto; display: block; }
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy); padding: 10px 14px;
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--safety-dark); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--navy);
  letter-spacing: 0.02em;
}
.nav-phone .sub { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--safety-dark); }
.nav-toggle { display: none; background: none; border: 2px solid var(--navy); padding: 8px 12px; color: var(--navy); font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 3px solid var(--navy);
  background: var(--chalk);
  color: var(--navy);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--navy); color: var(--chalk); }
.btn-yellow {
  background: var(--safety);
  border-color: var(--safety);
  color: #fff;
}
.btn-yellow:hover { background: var(--safety-dark); border-color: var(--safety-dark); color: #fff; }
.btn-sm { padding: 10px 16px; font-size: 11px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; height: clamp(600px, min(56.25vw, calc(100vh - 80px)), 900px); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,22,0.95) 0%, rgba(10,12,22,0.85) 22%, rgba(10,12,22,0.4) 42%, rgba(10,12,22,0) 58%), linear-gradient(to right, rgba(10,12,22,0.6) 0%, rgba(10,12,22,0.3) 38%, rgba(10,12,22,0) 62%); }
.hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 24px; padding-bottom: 56px; }
.hero h1 { color: #fff; margin: 0 0 18px; line-height: 1.06; font-size: clamp(38px, 4.2vw, 64px); text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.hero h1 .yellow { background: var(--safety); padding: 0.02em 0.14em 0; margin-top: 0.1em; display: inline-block; text-shadow: none; }
.hero .lead { color: rgba(255,255,255,0.92); font-size: 18px; max-width: 46ch; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero .hero-actions { margin-bottom: 0; }
.hero .btn:not(.btn-yellow) { background: transparent; border-color: #fff; color: #fff; }
.hero .btn:not(.btn-yellow):hover { background: #fff; color: var(--navy); }
.hero .btn:focus-visible { outline-color: #fff; }
@media (max-width: 760px) {
  .hero { height: auto; display: flex; flex-direction: column; }
  .hero-bg { position: static; height: auto; aspect-ratio: 5 / 4; object-position: 50% 30%; }
  .hero-shade { display: none; }
  .hero .hero-content { position: static; padding-top: 30px; padding-bottom: 44px; }
  .hero .lead { font-size: 16px; }
  .hero .hero-actions { flex-direction: column; gap: 12px; }
  .hero .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
}
.hero-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px 22px;
  background: var(--navy);
  color: var(--chalk);
  border-left: 6px solid var(--safety);
}
.hero-trust .item { display: flex; flex-direction: column; gap: 2px; }
.hero-trust .n { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--red-bright); line-height: 1; }
.hero-trust .l { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243,241,236,0.75); }


/* Service grid */
.section { padding: 100px 0; }
.section-head { margin-bottom: 56px; }
.section-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.section-head h2 { color: var(--navy); max-width: 18ch; margin-bottom: 18px; }

.service.wide { grid-column: span 2; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--navy); padding: 4px; border: 4px solid var(--navy); }
.service {
  background: var(--paper);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: background .2s;
}
.service:hover { background: var(--safety); }
.service .ico {
  width: 56px; height: 56px;
  background: var(--navy);
  color: var(--red-bright);
  display: grid; place-items: center;
  border: 2px solid var(--navy);
}
.service .ico svg { width: 28px; height: 28px; }
.service h3 { color: var(--navy); font-size: 32px; }
.service p { font-size: 14px; color: var(--navy-2); line-height: 1.6; }
.service .more { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin-top: auto; padding-top: 16px; border-top: 2px solid var(--navy); display: flex; justify-content: space-between; }
.service:hover .ico { background: #fff; color: var(--safety); border-color: #fff; }
.service:hover h3, .service:hover p, .service:hover .more { color: #fff; }
.service:hover .more { border-top-color: rgba(255,255,255,0.55); }

/* Process */
.process { background: var(--navy); color: var(--chalk); padding: 100px 0; }
.process .section-head h2 { color: var(--chalk); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--safety); padding: 4px; }
.step {
  background: var(--navy);
  padding: 32px 24px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.step .num { font-family: var(--font-display); font-size: 64px; font-weight: 700; color: var(--red-bright); line-height: 1; }
.step h3 { color: var(--chalk); font-size: 26px; }
.step p { font-size: 14px; color: rgba(243,241,236,0.78); }

/* Reviews */
.reviews-band { padding: 80px 0; background: var(--paper); border-top: 4px solid var(--safety); border-bottom: 4px solid var(--safety); }
.reviews-band .top { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; }
.reviews-band h2 { color: var(--navy); }
.reviews-band .score { font-family: var(--font-display); font-size: 84px; line-height: 1; color: var(--navy); font-weight: 700; }
.reviews-band .score-meta { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-2); font-weight: 600; margin-top: 6px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review {
  background: var(--chalk);
  padding: 28px;
  border-top: 4px solid var(--safety);
}
.review .stars { color: var(--safety-dark); font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; }
.review p { font-size: 15px; color: var(--ink); line-height: 1.6; }
.review .who { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.04em; }
.review .who small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* CTA big band */
.cta-strip {
  background: var(--safety);
  border-top: 12px solid var(--navy);
  border-bottom: 12px solid var(--navy);
  padding: 56px 0;
}
.cta-strip .inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-strip h2 { color: var(--navy); font-size: clamp(40px, 5vw, 72px); max-width: 16ch; }
.cta-strip .ph { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); color: var(--navy); font-weight: 700; }
.cta-strip .sub { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; font-weight: 700; }

/* Credentials */
.credentials-band { padding: 60px 0; background: var(--chalk); border-bottom: 1px solid var(--rule); }
.credentials { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; align-items: center; }
.credential { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-2); letter-spacing: 0.02em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.credential::before { content: ""; width: 36px; height: 36px; background: var(--navy); display: inline-block; }
.credential.svc1::before { background: var(--safety); }
.credential.svc2::before { background: var(--navy); }

/* Form */
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.form input, .form textarea, .form select {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 2px solid var(--navy);
  color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; background: var(--paper); border-color: var(--safety); box-shadow: 0 0 0 3px rgba(228,53,42,0.22); }
.form textarea { min-height: 120px; resize: vertical; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; }
.contact-info { display: grid; gap: 18px; align-content: start; }
.info-card { padding: 24px; background: var(--navy); color: var(--chalk); border-left: 6px solid var(--safety); }
.info-card h3 { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 8px; }
.info-card p { font-family: var(--font-display); font-size: 26px; color: var(--chalk); font-weight: 700; }
.info-card .sub { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: rgba(243,241,236,0.75); margin-top: 4px; }

/* Page banner */
.page-banner { padding: 60px 0 50px; border-bottom: 4px solid var(--safety); background: var(--paper); }
.page-banner .crumb { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--safety-dark); margin-bottom: 14px; }
.page-banner h1 { color: var(--navy); max-width: 18ch; }
.page-banner .lead { margin-top: 22px; }

/* Footer */
.footer { background: var(--navy-deep); color: var(--chalk); padding: 70px 0 30px; border-top: 8px solid var(--safety); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 50px; border-bottom: 1px solid rgba(243,241,236,0.18); }
.footer-brand .logo { color: var(--chalk); }
.footer-brand p { font-size: 14px; color: rgba(243,241,236,0.7); margin-top: 14px; max-width: 32ch; line-height: 1.7; }
.footer .footer-head { font-family: var(--font-body); color: var(--red-bright); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { color: var(--chalk); font-size: 14px; }
.footer a:hover { color: var(--red-bright); }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243,241,236,0.5); font-weight: 600; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
  .services-grid, .process-steps, .reviews, .plans, .posts { grid-template-columns: 1fr 1fr; }
  .service.wide { grid-column: auto; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .credentials { grid-template-columns: 1fr 1fr 1fr; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .section { padding: 72px 0; }
}
@media (max-width: 640px) {
  .services-grid, .process-steps, .reviews, .footer-top, .hero-trust { grid-template-columns: 1fr; }
  .credentials-band { padding: 36px 0; }
  .credentials { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .credential { font-size: 15px; gap: 8px; }
  .credential::before { width: 22px; height: 22px; flex-shrink: 0; }
  .service.wide { grid-column: auto; display: flex; }
  .service.wide .more { margin-top: auto; padding-top: 16px; border-top: 2px solid var(--navy); }
  .service.wide:hover .more { border-top-color: rgba(255,255,255,0.55); }
  .form .row2 { grid-template-columns: 1fr; }
}

/* ============================================================
   HD Electrical - rebrand additions
   (new components, accessibility floor, responsive)
   ============================================================ */

/* Accessibility: skip link + visible focus */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--red-bright);
  padding: 12px 18px; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.skip-link:focus { left: 12px; top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--safety-dark);
  outline-offset: 2px;
}
.nav-cta .btn:focus-visible,
.cta-strip .btn:focus-visible { outline-color: var(--navy); }

/* Touch targets (>= 44px) */
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.btn { min-height: 44px; }
.nav-toggle { min-height: 44px; min-width: 44px; }
.nav-phone { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }
.footer a { display: inline-block; min-height: 24px; padding: 4px 0; }
.muted-line { color: rgba(243,241,236,0.55); }

/* Active nav link */
.nav-links a.active { color: var(--safety-dark); border-bottom: 3px solid var(--safety); }

/* Proof band (why choose us) */
.proof-band { padding: 90px 0; background: var(--paper); border-top: 4px solid var(--safety); border-bottom: 4px solid var(--safety); }
.proof-band .top { display: flex; justify-content: space-between; align-items: end; margin-bottom: 44px; flex-wrap: wrap; gap: 24px; }
.proof-band h2 { color: var(--navy); }
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--navy); padding: 4px; border: 4px solid var(--navy); }
.proof { background: var(--chalk); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.proof-ico { width: 52px; height: 52px; background: var(--navy); color: var(--red-bright); display: grid; place-items: center; }
.proof-ico svg { width: 26px; height: 26px; }
.proof h3 { color: var(--navy); font-size: 28px; }
.proof p { font-size: 14px; color: var(--navy-2); line-height: 1.6; }

/* Services detail */
.svc-list { padding-top: 72px; }
.svc-detail { padding: 40px 0; border-top: 2px solid var(--rule); scroll-margin-top: 100px; }
.svc-detail:first-child { border-top: none; padding-top: 0; }
.svc-detail-grid { display: grid; grid-template-columns: 0.72fr 1.05fr 0.92fr; gap: 40px; align-items: start; }
.svc-detail-head .eyebrow { display: inline-block; margin-bottom: 12px; }
.svc-detail-head h2 { color: var(--navy); font-size: clamp(34px, 4vw, 52px); }
.svc-detail-head .svc-sub { font-size: 16px; color: var(--navy-2); line-height: 1.6; margin-top: 16px; max-width: 34ch; }
.svc-detail-body .svc-subhead { font-size: 26px; color: var(--navy); margin-bottom: 12px; }
.svc-detail-body .svc-listhead { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--navy); margin: 22px 0 10px; }
.svc-callout { margin-top: 26px; padding-top: 20px; border-top: 2px solid var(--rule); }
.svc-detail-body .svc-callout h4 { font-size: 26px; color: var(--navy); line-height: 1.1; margin-bottom: 8px; }
.svc-detail-body .svc-callout p { color: var(--navy-2); font-size: 15px; line-height: 1.6; margin: 0; }
.svc-callout .svc-price { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.svc-callout .svc-price .lbl { font-size: 15px; color: var(--navy); }
.svc-callout .svc-price .amt { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--safety); line-height: 1; flex-shrink: 0; }
.svc-detail-body .svc-call { margin: 14px 0 0; }
.svc-detail-body p.svc-call a { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy); text-decoration: none; }
.svc-detail-body p.svc-call a:hover { color: var(--safety-dark); }
.svc-detail-body .svc-callout .ph { display: inline-block; margin-top: 10px; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: 0.01em; }
.svc-detail-body .svc-callout .ph:hover, .svc-detail-body .svc-callout .ph:focus-visible { color: var(--safety-dark); }
.svc-detail-body p { font-size: 16px; color: var(--navy-2); line-height: 1.7; margin-bottom: 14px; }
.svc-detail-body p:last-child { margin-bottom: 0; }
.svc-detail-body a:not(.btn) { color: var(--safety-dark); text-decoration: underline; }
.svc-detail-body a:not(.btn):hover { color: var(--navy); }
/* Closing "not listed" row: no photo, so the copy takes the last two columns. */
.svc-detail--other .svc-detail-body { grid-column: 2 / -1; max-width: 62ch; }
.svc-detail--other .hero-actions { margin: 22px 0 0; }
.svc-points { list-style: none; padding: 18px 0 0; margin: 0; display: grid; gap: 9px; border-top: 2px solid var(--rule); }
.svc-points li { font-size: 14px; color: var(--navy); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.svc-points .tick { width: 18px; height: 18px; background: var(--safety); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.svc-detail-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); border: 4px solid var(--navy); }
.svc-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail-media svg { display: block; width: 100%; height: 100%; }

/* About */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.prose { max-width: 62ch; }
.prose h2 { color: var(--navy); font-size: 30px; margin: 36px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--navy-2); font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
.prose a { color: var(--safety-dark); text-decoration: underline; }
.prose a:hover { color: var(--navy); }
.about-side { display: grid; gap: 18px; align-content: start; position: sticky; top: 100px; }
.about-points { list-style: none; padding: 24px; margin: 0; background: var(--paper); border: 2px solid var(--navy); display: grid; gap: 12px; }
.about-points li { font-size: 15px; color: var(--navy); font-weight: 500; display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
.about-points .tick { width: 22px; height: 22px; background: var(--safety); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* Contact info cards as links */
.info-link { text-decoration: none; transition: background .15s; }
a.info-link:hover { background: var(--navy-2); }
.social-inline { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.social-inline a { width: 44px; height: 44px; display: grid; place-items: center; background: var(--safety); color: #fff; }
.social-inline a:hover { background: var(--safety-dark); }
.social-links a { display: inline-flex; align-items: center; gap: 10px; }
.social-links svg { flex-shrink: 0; }

/* Contact form */
.contact-form-wrap { background: var(--paper); border: 3px solid var(--navy); padding: 32px; }
.form input, .form textarea { font-size: 16px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.form-note a { color: var(--safety-dark); text-decoration: underline; }
/* 404 */
.notfound { padding: 110px 0; text-align: center; }
.notfound .code { font-family: var(--font-display); font-size: clamp(120px, 18vw, 220px); line-height: 0.9; color: var(--navy); }
.notfound .code .yellow { background: var(--safety); color: var(--navy); padding: 0 0.08em; display: inline-block; }
.notfound h1 { color: var(--navy); margin-top: 18px; font-size: clamp(34px, 4vw, 60px); }
.notfound p { color: var(--navy-2); font-size: 17px; margin: 18px auto 28px; max-width: 52ch; line-height: 1.6; }

/* CTA strip links inherit colour */
.cta-strip .ph a { color: var(--navy); }
.cta-strip .ph a:hover { color: var(--navy-deep); }

/* Footer attribution */
.footer-bottom { text-transform: none; letter-spacing: 0.02em; }
.footer-attr a { color: var(--red-bright); text-decoration: underline; }
.footer-attr a:hover { color: var(--chalk); }

/* Responsive for new components */
@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-detail-grid { grid-template-columns: 1fr 0.85fr; gap: 28px 32px; }
  .svc-detail-head { grid-column: 1 / -1; }
  .svc-detail--other .svc-detail-body { grid-column: 1 / -1; }
  .proof-row { grid-template-columns: 1fr 1fr; }
  .about-side { position: static; }
}
@media (max-width: 680px) {
  .nav-phone, .nav-links, .nav-cta > .btn-sm { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-inner { gap: 8px; }
  .logo { font-size: 19px; white-space: nowrap; }
  .logo-img { height: 50px; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--chalk); padding: 14px 18px 20px;
    border-bottom: 4px solid var(--safety);
    box-shadow: 0 14px 24px rgba(18,18,22,0.14);
  }
  .nav-links.open .nav-drawer-cta { display: grid; }
  .proof-row { grid-template-columns: 1fr; }
  .svc-detail-grid { grid-template-columns: 1fr; }
  .svc-detail--other .svc-detail-body { grid-column: auto; }
  .cta-strip .inner { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .wrap { padding: 0 18px; }
}

/* ── Mobile call button ───────────────────────────────────────────────
   Below 680px the header phone number and the quote button are both hidden
   for space, which left a trades site with no tap-to-call above the fold.
   This compact button takes their place; the drawer carries the full pair. */
.nav-call { display: none; align-items: center; gap: 8px; background: var(--safety); color: #fff; padding: 0 14px; min-height: 44px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 3px solid var(--safety); }
.nav-call:hover { background: var(--safety-dark); border-color: var(--safety-dark); }
.nav-call svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Phone + quote at the top of the open mobile drawer. */
.nav-drawer-cta { display: none; gap: 10px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 2px solid var(--rule); }
.nav-drawer-cta .drawer-phone { display: flex; flex-direction: column; justify-content: center; min-height: 52px; background: var(--navy); color: var(--chalk); padding: 8px 16px; border-left: 5px solid var(--safety); font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: 0.02em; }
.nav-drawer-cta .drawer-phone span { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-bright); }
.nav-drawer-cta .btn { justify-content: center; }

/* ── Contact form status ──────────────────────────────────────────────
   Replaces the old "always show success" panel. One region, three states,
   announced politely so a screen reader hears the outcome. */
.form-status { display: none; padding: 16px 18px; margin: 0; font-size: 15px; line-height: 1.55; border: 2px solid; }
.form-status.is-sending { display: block; background: var(--paper); border-color: var(--rule); color: var(--navy-2); }
.form-status.is-ok { display: block; background: #eaf4ee; border-color: var(--green); color: #14532c; }
.form-status.is-err { display: block; background: #fbeceb; border-color: var(--safety); color: #8a1e17; }
.form-status strong { display: block; font-family: var(--font-display); font-size: 21px; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 5px; }
.form-status a { color: inherit; text-decoration: underline; }
.form-status .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.form-status .acts .btn { font-size: 12px; padding: 11px 18px; text-decoration: none; }
.form-status .acts .btn-ghost { background: transparent; border-color: currentColor; color: inherit; }

/* Inline field errors, paired with aria-invalid on the input. */
.field-error { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8a1e17; margin-top: 6px; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--safety); background: #fdf6f5; }

/* ── Reduced motion ───────────────────────────────────────────────────
   The stylesheet forces smooth scrolling globally and the form scrolls the
   status into view; both are switched off for anyone who asked their OS
   for less movement. script.js checks the same preference before scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Headings that exist for the document outline, not the eye. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Recent work ──────────────────────────────────────────────────────
   Same 4px-gutter-over-navy grid as the services cards, so the page reads
   as part of the set. Cards are not links - there are no detail pages -
   so they deliberately carry no hover state. */

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--navy); padding: 4px; border: 4px solid var(--navy); }
.work-card { background: var(--paper); display: flex; flex-direction: column; }
.work-card.featured { grid-column: span 2; }

.work-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.work-card.featured .work-media { aspect-ratio: 16 / 9; }
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-tag { position: absolute; top: 0; left: 0; background: var(--safety); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; }

.work-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.work-meta { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--safety-dark); }
.work-card h3 { color: var(--navy); font-size: 27px; line-height: 1.08; }
.work-card.featured h3 { font-size: clamp(30px, 3.4vw, 40px); }
.work-card p { font-size: 14px; color: var(--navy-2); line-height: 1.65; }
.work-card.featured .work-body > p { font-size: 15px; }

.work-specs { list-style: none; padding: 18px 0 0; margin: auto 0 0; display: grid; gap: 9px; border-top: 2px solid var(--rule); }
.work-specs li { font-size: 13px; color: var(--navy); display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.work-specs .tick { width: 18px; height: 18px; background: var(--safety); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
/* ── Video cards ──────────────────────────────────────────────────────
   Where a post is a video rather than a photo, the card plays it in place.
   preload="none" means the file is only fetched when someone presses play,
   so the page costs no more than the poster until then. The frames are
   portrait, so they are contained rather than cropped - the navy behind
   them is the same navy as the grid gutters, so it reads as intentional. */
.work-media.is-video .clip { width: 100%; height: 100%; object-fit: contain; background: var(--navy); display: none; }
.work-media.is-video[data-clip="before"] .clip[data-clip="before"] { display: block; }
.work-media.is-video[data-clip="after"]  .clip[data-clip="after"]  { display: block; }

/* Before / after switch. Sits opposite the category tag so the two corners
   of the frame carry one control each. */
.work-switch { position: absolute; top: 0; right: 0; display: flex; }
.work-switch button {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 12px; border: 0; cursor: pointer;
  background: rgba(18,18,22,0.72); color: rgba(255,255,255,0.72);
  transition: background .15s, color .15s;
}
.work-switch button:hover { background: rgba(18,18,22,0.9); color: #fff; }
.work-switch button[aria-pressed="true"] { background: var(--safety); color: #fff; }

.work-play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(18,18,22,0.34);
  border: 0; color: #fff; cursor: pointer;
  transition: background .15s;
}
.work-play:hover { background: rgba(18,18,22,0.18); }
.work-play .tri {
  width: 62px; height: 62px; background: var(--safety);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(18,18,22,0.4);
}
.work-play .tri::after {
  content: ""; width: 0; height: 0;
  border-left: 20px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 5px;
}
.work-play:hover .tri { background: var(--safety-dark); }
.work-play .lbl {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(18,18,22,0.7);
  display: flex; align-items: center; gap: 10px;
}
.work-play .dur {
  font-variant-numeric: tabular-nums;
  border-left: 1px solid rgba(255,255,255,0.5); padding-left: 10px;
}
.work-media.is-playing .work-play { display: none; }

.work-link { margin-top: 16px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--safety-dark); display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.work-link:hover { color: var(--navy); }

@media (max-width: 980px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card.featured { grid-column: span 2; }
}
@media (max-width: 680px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.featured { grid-column: span 1; }
  .work-card.featured .work-media { aspect-ratio: 4 / 3; }
}

/* Mobile-only display for the components defined above. This block must stay
   last: .nav-call's base `display: none` is declared after the main 680px
   media query, and at equal specificity source order decides. */
@media (max-width: 680px) {
  .nav-call { display: inline-flex; }
}

/* Get in touch buttons under sections */
.section-cta { margin-top: 36px; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: #fff; border-color: #fff; color: var(--navy); }
.cta-strip .cta-action { margin-top: 18px; }
.cta-strip .btn:focus-visible { outline-color: #fff; }

/* Tablet fixes: the logo image is wider than the old text logo, so the full
   nav no longer fits between 681px and 1000px. Collapse to the menu button
   (same as phones) up to 1000px, and give touch targets 44px. This block must
   stay last so it wins over the earlier .nav-call and 680px rules. */
@media (max-width: 1000px) {
  .nav-phone, .nav-links, .nav-cta > .btn-sm { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-inner { gap: 8px; }
  .nav-call { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--chalk); padding: 14px 28px 20px;
    border-bottom: 4px solid var(--safety);
    box-shadow: 0 14px 24px rgba(18,18,22,0.14);
  }
  .nav-links.open .nav-drawer-cta { display: grid; }
  .nav-links.open .nav-drawer-cta .btn, .nav-links.open .nav-drawer-cta .btn:hover { color: #fff; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .work-link { min-height: 44px; }
  .work-switch button { min-height: 44px; }
}

/* <address> is italic by default; keep the footer address upright. */
address { font-style: normal; }

/* ---- Utilities that replace inline style="" attributes (the CSP blocks them) ---- */
.u-center { justify-content: center; }
.btn-block { width: 100%; justify-content: center; }
h2.on-dark { color: var(--chalk); }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mb-48 { margin-bottom: 48px; }

/* ---- Footer: trader identity (E-Commerce Regs reg. 6) and policy links ----
   The identity row is generated by build-legal.js and is absent until the
   identity is confirmed. The policy links are filled in by the server only
   where the legal pages actually resolve. */
.footer-id { margin: 0; padding: 20px 0 0; font-size: 13px; line-height: 1.6; color: rgba(243,241,236,0.7); max-width: 80ch; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-bottom nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgba(243,241,236,0.75); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom nav a:hover { color: var(--chalk); }

/* ---- Legal pages (/privacy, /cookies, /terms, /accessibility), generated by build-legal.js ---- */
.legal { max-width: calc(var(--container) + 48px); }
.legal > * { max-width: 76ch; }
.legal h2 { margin: 48px 0 14px; padding-top: 24px; border-top: 1px solid var(--rule); font: 700 28px/1.2 var(--font-display); letter-spacing: 0; }
.legal h2:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.legal h3 { margin: 28px 0 8px; font: 600 21px/1.25 var(--font-display); letter-spacing: 0; text-transform: none; }
.legal p, .legal li, .legal td, .legal th { font-size: 16.5px; line-height: 1.72; color: var(--navy-2); }
.legal p { margin: 0 0 14px; }
.legal a { border-bottom: 2px solid var(--safety); color: var(--navy); font-weight: 500; }
.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(--navy); font-weight: 600; }
.legal table { display: block; width: 100%; margin: 0 0 22px; border-collapse: collapse; overflow-x: auto; }
.legal thead th { background: var(--chalk); color: var(--navy); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; }
.legal th, .legal td { border: 1px solid var(--rule); padding: 11px 13px; vertical-align: top; }
.legal-updated { margin-bottom: 26px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.legal-nextlink { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); }
.legal-form { margin: 0 0 18px; padding: 18px 22px; border: 1px solid var(--rule); background: #fff; }
.legal-form p { margin-bottom: 10px; }
.legal-form p:last-child { margin-bottom: 0; }
.legal-draft { margin-bottom: 28px; padding: 16px 20px; border: 1px solid #e0c377; border-left: 5px solid #c9962c; background: #fff4d6; font-size: 15px; line-height: 1.65; color: #5a4416; }
.legal-review { margin-bottom: 40px; padding: 28px 30px; border: 1px solid var(--rule); background: #fff; }
.legal-review h2 { margin: 0 0 10px; padding-top: 0; border-top: 0; font-size: 26px; }
.legal-review h3 { margin: 28px 0 6px; font: 600 14px/1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.legal-review h3.u { color: #7d5612; }
.legal-review h3.q { color: var(--navy); }
.legal-review h3.a { color: #3f4a5e; }
.legal-review .intro { margin-bottom: 14px; font-size: 15px; }
.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: 14.5px; color: var(--muted); }
.legal-review li > span.where { margin-bottom: 3px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #3f4a5e; }
mark.ask { padding: 1px 5px; background: #ffe08a; color: #3d2d00; }
mark.assumed { padding: 1px 5px; background: #e5eefb; color: #1f3556; }
@media (max-width: 700px) { .legal h2 { font-size: 24px; } .legal-review { padding: 22px 20px; } }