@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Regular.woff2") format("woff2"),
       url("/fonts/Satoshi-Regular.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0d135f;
  --navy-dark: #0d135f;
  --navy-tint: #1c236f;
  --accent: #a6ddd0;
  --accent-dark: #2d6f6a;
  --accent-tint: #e7f6f2;
  /* "Seafoam" gradient — the named pastel mint-to-blue highlight used on
     buttons, icon badges, eyebrow tags and the CTA band. Reference it by
     this name (--seafoam-gradient) when asking for changes to it. */
  --seafoam-gradient: linear-gradient(100deg, #e3fae9 0%, #dbe6fb 100%);
  --seafoam-gradient-hover: linear-gradient(100deg, #d5f3e0 0%, #c9daf7 100%);
  --seafoam-gradient-soft: linear-gradient(100deg, rgba(227,250,233,0.5) 0%, rgba(219,230,251,0.5) 100%);
  /* Even paler, 35% opacity — for large background bands (e.g. the home page
     reviews section) where the full-strength gradient would be too strong. */
  --seafoam-gradient-pale: linear-gradient(100deg, rgba(227,250,233,0.35) 0%, rgba(219,230,251,0.35) 100%);
  /* Deeper green-to-blue variant, for text that needs to stay readable on a pale background */
  --seafoam-gradient-text: linear-gradient(100deg, #55a47b 0%, #4f80c3 100%);
  /* Same two anchor colours plus a pale midpoint, so a solid-fill surface
     (not text) reads like a subtle metallic/satin sheen rather than a flat gradient.
     Lightened versions of the green/blue anchors so the card reads pastel,
     with dark text sitting on top rather than white. */
  --seafoam-gradient-metallic: linear-gradient(115deg, #91c4a9 0%, #f3f8f6 50%, #8dacd8 100%);
  --gray-bg: #f5fcf3;
  --text: #0d135f;
  --muted: #474d8d;
  --border: #e2e6ea;
  --max-width: 1160px;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(13,19,95, 0.06);
  --shadow-md: 0 8px 24px rgba(13,19,95, 0.10);
  --font-head: "Sora", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Satoshi", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.65;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--navy); margin-top: 0; letter-spacing: -0.01em; }
h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 1.6rem; margin-top: 2.2rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
main p { color: var(--text); }
main section p { max-width: 720px; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--seafoam-gradient); color: var(--navy-dark); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--seafoam-gradient-hover); box-shadow: var(--shadow-md); }

/* Blue quote-bar CTA — scoped to the homepage hero form only, so it pops
   against the mint/seafoam used everywhere else, without changing every
   other .btn-primary sitewide. */
.btn-quote { background: #3f7fd1; color: #fff; }
.btn-quote:hover { background: #326bb5; box-shadow: var(--shadow-md); }
.btn-outline { border: 2px solid #fff; color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark { border: 2px solid var(--navy); color: var(--navy); background: transparent; }
.btn-outline-dark:hover { background: var(--navy); color: #fff; text-decoration: none; }
.btn-call { background: var(--seafoam-gradient); color: var(--navy-dark); white-space: nowrap; }
.btn-call:hover { background: var(--seafoam-gradient-hover); }

/* Header */
.site-header { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.site-header.is-scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.35); }
.topbar { background: var(--navy-tint); font-size: 0.8rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 24px; color: rgba(255,255,255,0.65); }
.topbar-inner a { color: rgba(255,255,255,0.75); display: inline-flex; align-items: center; gap: 6px; transition: color 0.16s ease; }
.topbar-inner a:hover { color: var(--accent); text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-divider { width: 1px; height: 13px; background: rgba(255,255,255,0.18); }

/* Social icons in the top bar */
.topbar-social { display: inline-flex; align-items: center; gap: 4px; }
.topbar-social a {
  width: 24px; height: 24px; border-radius: 50%; justify-content: center; gap: 0;
  color: rgba(255,255,255,0.75); transition: color 0.16s ease, background 0.16s ease;
}
.topbar-social a:hover { color: var(--accent); background: rgba(255,255,255,0.1); }
.topbar-social svg { display: block; }

/* Strapline + certification logos (top left) */
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-brand {
  white-space: nowrap; color: #fff;
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  font-size: 0.74rem; letter-spacing: 0.1em;
}
.topbar-cert-logos { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-cert-logos img { height: 20px; width: auto; display: block; }

/* Trustpilot rating badge, centred in the topbar */
.topbar-center { display: inline-flex; align-items: center; gap: 10px; }
.topbar-center img { display: block; }
.topbar-center img:first-child { height: 16px; width: auto; }
.topbar-center img:last-child { height: 15px; width: auto; }

/* One lozenge visible at a time, cycling on a loop. Grid-stacking keeps
   the container as wide as the widest badge so nothing shifts around. */
.topbar-badges { display: inline-grid; align-items: center; }
.topbar-badge {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  color: var(--accent);
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  font-size: 0.74rem; letter-spacing: 0.1em;
  opacity: 0; animation: topbar-badge-cycle 12s ease-in-out infinite;
}
.topbar-badge:nth-child(1) { animation-delay: 0s; }
.topbar-badge:nth-child(2) { animation-delay: 4s; }
.topbar-badge:nth-child(3) { animation-delay: 8s; }
@keyframes topbar-badge-cycle {
  0%       { opacity: 0; transform: translateY(5px); }
  4%, 28%  { opacity: 1; transform: none; }
  33%,100% { opacity: 0; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-badge { animation: none; opacity: 0; }
  .topbar-badge:first-child { opacity: 1; }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }
.logo { color: #fff; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav > ul {
  list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 5px;
  border: 1.5px solid rgba(255,255,255,0.1); border-radius: 100px; background: rgba(255,255,255,0.03); flex-wrap: wrap;
  position: relative;
}
.main-nav > ul > li { position: relative; }
/* The wide dropdown centres on the nav bar (and so the page) rather than
   on its own nav item, by letting the <ul> be its positioning context. */
.main-nav > ul > li.has-dropdown-wide { position: static; }
.main-nav a {
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.85; transition: opacity 0.15s ease, background 0.15s ease;
}
.main-nav > ul > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border-radius: 100px; }
.main-nav > ul > li > a:hover { opacity: 1; background: rgba(255,255,255,0.1); text-decoration: none; }
.main-nav .caret { font-size: 0.6rem; transition: transform 0.15s ease; }
.main-nav li.has-dropdown:hover .caret { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-call { border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; }

/* Dropdown */
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #fff; border-radius: 10px; box-shadow: var(--shadow-md); padding: 14px 6px 6px; min-width: 220px;
  border-top: 3px solid var(--accent); z-index: 30;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Invisible bridge across the gap so the pointer can travel from the nav
   item down into the menu without the hover dropping out. It reaches back
   up past the nav bar's own padding and slightly overlaps the link, so
   there is no dead band anywhere along the way. */
.dropdown-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px;
}
li.has-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dropdown-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--navy);
  font-family: var(--font-body); text-transform: none; letter-spacing: normal;
  font-weight: 500; font-size: 0.88rem; border-radius: 6px; opacity: 1;
}
.dropdown-menu a:hover { background: var(--accent-tint); text-decoration: none; }
.dropdown-menu a + a { border-top: 1px solid var(--border); }
.dropdown-menu .drop-icon { display: flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; color: var(--accent-dark); }

/* Wide multi-column dropdown (Services) — icon-card grid with descriptions */
.dropdown-wide { min-width: 660px; max-width: calc(100vw - 40px); padding: 26px 28px 22px; }
.dropdown-wide .dropdown-section-label:first-child { margin-top: 0; }
.dropdown-section-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--accent-dark); margin: 0 0 16px;
}
.dropdown-badge {
  font-family: var(--font-head); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent-dark); border: 1px solid var(--accent-dark);
  border-radius: 100px; padding: 3px 10px;
}
.dropdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.dropdown-grid + .dropdown-divider { margin-top: 22px; }
.dropdown-divider { height: 1px; background: var(--border); margin: 0 0 22px; }

.drop-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 8px 8px; border-radius: 8px;
  opacity: 1; font-family: var(--font-body); text-transform: none; letter-spacing: normal;
}
.drop-card:hover { background: var(--accent-tint); text-decoration: none; }
.drop-card .drop-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy-dark);
  margin-top: 2px;
}
.drop-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop-title { font-family: var(--font-head); font-weight: 700; font-size: 0.96rem; color: var(--navy); line-height: 1.3; }
.drop-desc {
  font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .dropdown-wide { min-width: 480px; }
  .dropdown-grid { grid-template-columns: 1fr; }
  .drop-desc { white-space: normal; }
}

/* Full-screen mobile nav */
.mobile-nav {
  display: none; position: fixed; inset: 0; background: var(--navy-dark); z-index: 100;
  flex-direction: column; padding: 24px; overflow-y: auto;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav-close { align-self: flex-end; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; margin-bottom: 20px; }
.mobile-nav a { display: block; color: #fff; font-size: 1.05rem; font-weight: 500; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav a:hover { color: var(--accent); text-decoration: none; }
.mobile-nav-section { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 20px 0 6px; }
.mobile-nav-cta { margin-top: 20px; text-align: center; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(166,221,208, 0.16) 0%, transparent 45%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 72px 0 64px;
  position: relative;
}
.hero h1 { color: #fff; font-size: 2.6rem; max-width: 720px; }
.hero h1 .highlight { color: var(--accent); }
.hero p { color: #d7e0ea; font-size: 1.15rem; max-width: 600px; }
.hero .btn-primary { margin-top: 14px; }
.hero .quote-bar .btn-primary { margin-top: 0; }

.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(166,221,208,0.12); border: 1px solid rgba(166,221,208,0.3); color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; }
.hero-badge-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero-badge-link { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); transition: background 0.15s ease, border-color 0.15s ease; }
.hero-badge-link:hover { background: rgba(255,255,255,0.16); text-decoration: none; }
.hero-badge-link .stars { color: #ffb400; letter-spacing: 1px; }
.hero-stripe { width: 56px; height: 4px; background: var(--accent); margin: 18px 0 20px; border-radius: 2px; }

/* Split hero (service pages) — flush image left, dark content box right */
.hero-split {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch;
  min-height: 460px; padding: 0; background: none; overflow: visible;
}
.hero-split-media { position: relative; overflow: hidden; min-height: 320px; }
.hero-split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-split-content {
  background:
    radial-gradient(circle at 85% 20%, rgba(166,221,208, 0.16) 0%, transparent 45%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: center;
  padding: 56px 48px 56px 56px;
}
.hero-split-content h1 { color: #fff; font-size: 2.35rem; max-width: 560px; margin: 0 0 14px; }
.hero-split-content h1 .highlight { color: var(--accent); }
.hero-split-content p { color: #d7e0ea; font-size: 1.08rem; max-width: 520px; margin: 0 0 22px; }
.hero-split-content .hero-badges { margin-bottom: 18px; }
.hero-split-content .btn-primary { margin-top: 0; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-media { min-height: 220px; }
  .hero-split-content { padding: 40px 24px; }
}

/* Dark full-width infographic-style hero (service pages, v2) */
.hero-dark-split {
  background:
    radial-gradient(circle at 85% 20%, rgba(166,221,208, 0.16) 0%, transparent 45%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff; padding: 68px 0 60px; overflow: hidden;
}
.hero-dark-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; }
.hero-dark-content h1 { color: #fff; font-size: 2.4rem; max-width: 540px; margin: 0 0 14px; }
.hero-dark-content h1 .highlight { color: var(--accent); }
.hero-dark-content p { color: #d7e0ea; font-size: 1.08rem; max-width: 500px; margin: 0 0 24px; }

.hero-badges-sm { gap: 8px; margin-bottom: 14px; }
.hero-badge-sm { font-size: 0.66rem; padding: 5px 12px; letter-spacing: 1.1px; }
.hero-badge-sm .stars { font-size: 0.9em; }

.btn-pill { border-radius: 100px; padding: 0.7rem 1.6rem; }
.btn-transparent { background: transparent; border: 1.5px solid rgba(255,255,255,0.55); color: #fff; }
.btn-transparent:hover { background: rgba(255,255,255,0.12); border-color: #fff; text-decoration: none; }

.hero-dark-visual { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.hero-blob-dark {
  position: absolute; width: 105%; max-width: 480px; z-index: 0; opacity: 0.5;
  transform: translateX(-8%); animation: blob-morph 10s ease-in-out infinite;
}
.hero-dark-photo-frame {
  position: relative; z-index: 1; width: 82%; max-width: 380px; aspect-ratio: 1 / 1;
  border-radius: 42% 58% 63% 37% / 47% 39% 61% 53%;
  overflow: hidden; box-shadow: var(--shadow-md); transform: translateX(-10%);
}
.hero-dark-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-stat-chip {
  position: absolute; z-index: 2; background: #fff; color: var(--navy); border-radius: 14px;
  padding: 10px 16px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: flex-start;
  animation: float-badge 4s ease-in-out infinite;
}
.hero-stat-chip .stat-num { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; line-height: 1; color: var(--navy); }
.hero-stat-chip .stat-label { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.hero-stat-chip-1 { top: 8%; left: 0%; animation-delay: 0s; }
.hero-stat-chip-2 { bottom: 10%; right: 4%; animation-delay: 1.6s; }
.hero-dark-visual .hero-float-badge { background: var(--seafoam-gradient); color: var(--navy-dark); }
.hero-dark-visual .hero-float-badge-bulb { top: 42%; right: 6%; animation-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  .hero-blob-dark, .hero-stat-chip, .hero-dark-visual .hero-float-badge { animation: none !important; }
}
@media (max-width: 900px) {
  .hero-dark-inner { grid-template-columns: 1fr; }
  .hero-dark-visual { order: -1; min-height: 260px; margin-bottom: 8px; }
  .hero-dark-content h1 { font-size: 2rem; }
}

/* Hero with background photo (homepage) */
.hero-home { padding: 88px 0 72px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13,19,95,0.95) 0%, rgba(13,19,95,0.88) 38%, rgba(13,19,95,0.72) 65%, rgba(13,19,95,0.6) 100%);
}
.hero-home > .wrap { position: relative; z-index: 1; }

/* Centered hero with inline enquiry form */
.hero-centered { text-align: center; padding: 140px 24px 110px; }
.hero-centered .wrap { max-width: 760px; }
.hero-centered .hero-badges { justify-content: center; }
.hero-centered h1 { margin-left: auto; margin-right: auto; }
.hero-centered p { margin-left: auto; margin-right: auto; }

.hero-enquiry { margin-top: 40px; }
.hero-enquiry-label {
  color: var(--accent); font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 14px;
}
.hero-enquiry-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.hero-enquiry-form input {
  flex: 1 1 180px; padding: 13px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08); color: #fff; font-size: 0.95rem; font-family: var(--font-body);
}
.hero-enquiry-form input::placeholder { color: rgba(255,255,255,0.55); }
.hero-enquiry-form input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.14); }
.hero-enquiry-form button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 640px) {
  .hero-centered { padding: 120px 20px 80px; }
  .hero-enquiry-form { flex-direction: column; align-items: stretch; }
  .hero-enquiry-form input, .hero-enquiry-form button { width: 100%; }
}

/* Full-bleed image leading into a centered intro block */
.full-bleed-image { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: 460px; overflow: hidden; }
.full-bleed-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-block { max-width: 720px; margin: 0 auto; text-align: center; padding: 56px 24px 0; }
.intro-block p { font-size: 1.15rem; line-height: 1.75; margin-left: auto; margin-right: auto; }
.intro-block .lead-in { font-weight: 700; color: var(--navy); font-family: var(--font-head); margin-top: 1.6rem; margin-bottom: 0.8rem; font-size: 1.1rem; }
.intro-block .checklist { text-align: left; display: inline-block; margin: 4px auto 0; }

@media (max-width: 640px) {
  .full-bleed-image { height: 280px; }
}

/* Quote bar */
.quote-bar {
  display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 100px;
  padding: 6px; margin-top: 28px; max-width: 520px; box-shadow: var(--shadow-md); flex-wrap: nowrap;
}
.quote-bar select {
  border: none; background: transparent; font-family: var(--font-head); font-size: 0.94rem; line-height: 1.2;
  font-weight: 700; color: var(--navy); padding: 13px 34px 13px 18px; flex: 1.15; min-width: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23080c4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 13px;
}
.quote-bar input[name="postcode"] {
  border: none; background: var(--accent-tint); color: var(--navy); font-family: var(--font-body); line-height: 1.2;
  font-weight: 600; font-size: 0.94rem; padding: 13px 18px; border-radius: 100px; flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.quote-bar input[name="postcode"]::placeholder { color: var(--muted); opacity: 0.75; }
.quote-bar select:focus, .quote-bar input:focus { outline: none; }
.quote-bar button {
  flex-shrink: 0; white-space: nowrap; border-radius: 100px; padding: 13px 26px;
  border: none; margin: 0; font-family: var(--font-body); font-size: 0.94rem; font-weight: 700; line-height: 1.2; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.quote-bar-note { color: var(--accent); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; margin: 12px 0 0; min-height: 1.3em; }
.typewriter-cursor { display: inline-block; margin-left: 2px; color: var(--accent); animation: typewriter-blink 0.8s step-end infinite; }
@keyframes typewriter-blink { 50% { opacity: 0; } }

.stats-band { background: var(--navy-dark); padding: 36px 0; }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; text-align: center; }
.stats-strip .stat-num { display: block; font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff; }
.stats-strip .stat-label { display: block; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }

main { min-height: 40vh; }
.section { padding: 56px 0; }
.section-alt { background: var(--seafoam-gradient); }
.section h2 { text-align: left; }

/* Home page reviews band — extra breathing room, softer gradient, scroll-in animation on its own children */
.reviews-band { padding: 100px 0 120px; background: var(--seafoam-gradient-pale); }
.reviews-band .wrap { padding-left: 40px; padding-right: 40px; }
.reviews-band .rv-summary { border: none; }

.credentials-strip { display: flex; gap: 12px; flex-wrap: wrap; padding: 22px 0 0; list-style: none; margin: 0; }
.credentials-strip li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; background: var(--accent-tint); color: var(--navy);
  border-radius: 30px; font-size: 0.92rem; font-weight: 600;
}

ul.services-grid, ul.checklist { padding-left: 0; list-style: none; }
ul.checklist li { padding-left: 1.7em; position: relative; margin-bottom: 0.6em; }
ul.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-dark); font-weight: 700; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; list-style: none; padding: 0; }
.services-grid li {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.services-grid li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.services-grid a { font-weight: 700; font-family: var(--font-head); color: var(--navy); font-size: 1.02rem; }
.services-grid p { margin: 8px 0 0; font-size: 0.94rem; color: var(--muted); max-width: none; }
.services-grid .location-item { display: flex; align-items: center; gap: 10px; padding: 16px 20px; }

.icon-badge {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge.icon-sm { width: 30px; height: 30px; margin-bottom: 0; border-radius: 8px; }
.icon-badge.icon-sm svg { width: 16px; height: 16px; }

.review-card {
  background: #fff; border-radius: var(--radius); padding: 24px;
  margin-bottom: 16px; position: relative; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.review-card .stars { color: #f5a623; letter-spacing: 2px; }
.review-card p { font-size: 1.02rem; }
.review-card .author { font-weight: 700; margin-top: 10px; display: block; font-family: var(--font-head); color: var(--navy); }

/* Reviews carousel (multi-card) */
.eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dark); display: block; margin-bottom: 8px; }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.reviews-head h2 { margin-top: 0; margin-bottom: 0; }
.reviews-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-weight: 700; font-size: 0.9rem; color: var(--accent-dark); }
.reviews-link:hover { color: var(--navy); text-decoration: underline; }
.reviews-score {
  display: flex; align-items: center; gap: 18px; background: #fff; padding: 16px 26px;
  border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.reviews-score-logo { height: 2.6rem; width: auto; flex-shrink: 0; }
.reviews-score-big { font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1; font-family: var(--font-head); }
.reviews-score-detail { display: flex; flex-direction: column; gap: 3px; }
.reviews-score-detail .stars { color: #f5a623; font-size: 0.9rem; letter-spacing: 1px; }
.reviews-count { font-size: 0.78rem; color: var(--muted); font-weight: 600; }

.carousel-wrap { position: relative; overflow: hidden; }
.carousel-track { display: flex; gap: 20px; transition: transform 0.45s cubic-bezier(.25,.46,.45,.94); }
.carousel-track .review-card {
  flex: 0 0 calc(33.333% - 14px); margin-bottom: 0; display: flex; flex-direction: column;
}
.carousel-track .review-card p { flex: 1; }
.review-card-stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 12px; }
.review-meta { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
.review-avatar { flex-shrink: 0; display: flex; }
.review-avatar img { display: block; height: 100%; width: auto; }
.review-name { font-size: 0.88rem; font-weight: 700; color: var(--navy); font-family: var(--font-head); }
.review-source { font-size: 0.76rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.g-dot { width: 7px; height: 7px; border-radius: 50%; background: #4285f4; flex-shrink: 0; }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; }
.carousel-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--border); background: #fff;
  font-size: 1.1rem; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.carousel-btn:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background 0.15s ease, width 0.15s ease; }
.carousel-dot.active { background: var(--accent-dark); width: 22px; border-radius: 4px; }

@media (max-width: 1024px) {
  .carousel-track .review-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 700px) {
  .carousel-track .review-card { flex: 0 0 100%; }
  .reviews-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reviews page (summary cards + grid) ---------- */
.rv-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.rv-summary {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 36px 40px;
}
.rv-summary-top { display: flex; align-items: center; gap: 28px; margin-bottom: 26px; min-height: 150px; }
.rv-summary-logo-col { flex: 1; display: flex; align-items: center; justify-content: center; }
.rv-summary-logo { width: 190px; height: auto; display: block; }
.rv-summary-score { flex: 1; text-align: center; }
.rv-summary-score-num { font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; color: var(--navy-dark); line-height: 1; }
.rv-summary-stars { color: #f5a623; letter-spacing: 3px; font-size: 1.3rem; margin: 4px 0 2px; }
.rv-summary-stars .half-star { position: relative; display: inline-block; overflow: hidden; width: 0.5em; vertical-align: top; }
.rv-summary-count { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.rv-summary-divider { width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0; }
.rv-summary-body { width: 100%; }
.rv-summary-body p { color: var(--muted); margin: 0 0 18px; }
.rv-summary-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rv-source-badge {
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 100px;
  padding: 6px 16px 6px 6px; font-size: 0.82rem; font-weight: 700; color: var(--navy);
}
.rv-source-badge-icon {
  width: 20px; height: 20px; flex-shrink: 0; display: block;
}
@media (max-width: 900px) {
  .rv-summary-grid { grid-template-columns: 1fr; }
}

.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.rv-tile {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; padding-bottom: 112px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
  align-self: stretch;
}
.rv-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.rv-tile.is-featured { border-color: var(--accent-dark); border-width: 2px; }
.rv-featured-tag {
  position: absolute; top: -13px; left: 24px; background: var(--seafoam-gradient); color: var(--navy-dark);
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 100px; box-shadow: var(--shadow-sm);
}
.rv-tile-stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 12px; }
.rv-tile p { font-size: 0.96rem; color: var(--text); line-height: 1.6; }
/* Pinned to the tile's bottom edge (not flowed after the quote) so the Google
   logo + name row lines up across every card in a grid row regardless of
   how long each quote is. */
.rv-tile-meta {
  position: absolute; left: 28px; right: 28px; bottom: 28px; height: 42px;
  display: flex; align-items: stretch; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border);
  box-sizing: content-box;
}
.rv-avatar { flex-shrink: 0; display: flex; }
.rv-avatar img { display: block; height: 100%; width: auto; }
.rv-name { font-size: 0.88rem; font-weight: 700; color: var(--navy); font-family: var(--font-head); }
.rv-source { font-size: 0.76rem; color: var(--muted); }

@media (max-width: 1024px) {
  .rv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-summary { text-align: center; padding: 30px; }
  .rv-summary-top { flex-direction: column; }
  .rv-summary-divider { display: none; }
  .rv-summary-actions { justify-content: center; }
}

.faq dt { font-weight: 700; font-family: var(--font-head); margin-top: 1.3rem; color: var(--navy); }
.faq dd { margin: 0.35rem 0 0; color: var(--text); }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; padding: 44px 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 6px; font-size: 1.5rem; }
.cta-band p { color: #d7e0ea; margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--navy-dark); color: #c6d0da; padding: 48px 0 18px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; align-items: start; }
.footer-grid h3, .footer-grid h4 { color: #fff; font-family: var(--font-head); margin: 0 0 14px; font-weight: 700; }
.footer-grid h3 { font-size: 1.05rem; }
.footer-grid h4 { font-size: 0.92rem; letter-spacing: 0.03em; text-transform: uppercase; }
.footer-grid a { color: #dbe2e8; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; }
.footer-grid a:hover { color: var(--accent); }
.footer-links a { font-weight: 500; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; line-height: 1.4; }
.footer-icon { color: var(--accent); flex-shrink: 0; }
.footer-logo { height: 42px; width: auto; display: block; margin-bottom: 18px; }
.footer-grid .footer-contact { margin-bottom: 30px; }
.footer-contact li { color: #c6d0da; font-size: 0.92rem; }
.footer-credentials-head { margin-top: 0; }
.credentials-list { font-size: 0.9rem; color: #9fb0c0; }
.footer-cert-logos { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.footer-cert-logos img {
  height: 48px; width: 48px; object-fit: cover; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3); display: block; transition: transform 0.2s ease;
}
.footer-cert-logos a:hover img { transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid #23285f; margin-top: 28px; padding-top: 18px; font-size: 0.85rem; line-height: 1.7; }
.footer-bottom a { color: #fff; text-decoration: underline; }
.footer-bottom a:hover { color: var(--accent); }

/* Back to top */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--seafoam-gradient); color: var(--navy-dark); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--seafoam-gradient-hover); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.15s ease; }
}

/* Contact form */
form.contact-form { display: grid; gap: 14px; max-width: 560px; }
form.contact-form label { font-weight: 600; display: block; margin-bottom: 4px; }
form.contact-form input, form.contact-form textarea, form.contact-form select {
  width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem;
  font-family: var(--font-body); transition: border-color 0.15s ease;
}
form.contact-form input:focus, form.contact-form textarea:focus { border-color: var(--accent); outline: none; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.1rem; }
}
@media (max-width: 620px) {
  .quote-bar { flex-wrap: wrap; border-radius: 20px; max-width: 100%; }
  .quote-bar select, .quote-bar input[name="postcode"] { flex: 1 1 100%; padding: 12px 16px; border-radius: 100px; }
  .quote-bar button { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  .main-nav { display: none; }
  .topbar-inner { font-size: 0.75rem; }
  /* Trustpilot lockup is the widest piece — drop it first, cert logos stay */
  .topbar-badges, .topbar-center, .topbar-center-divider { display: none; }
}
/* Mobile: just the cert logos, centred — email, hours and socials drop
   away to keep the bar to one tidy line */
@media (max-width: 700px) {
  .topbar-right { display: none; }
  .topbar-inner { display: flex; justify-content: center; padding: 8px 16px; }
  .topbar-left { justify-content: center; }
}
@media (max-width: 480px) {
  .topbar-right span:not(.topbar-divider) { display: none; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .hero { padding: 48px 0; }
  .hero h1 { font-size: 1.8rem; }
  h2 { font-size: 1.35rem; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Page tag row (category badges) */
.page-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.page-tag { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; background: var(--accent-tint); color: var(--navy); }
.page-tag.is-dark { background: var(--navy); color: #fff; }
.page-tag-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.page-tag-icon svg { width: 17px; height: 17px; }

/* Split section (image + text, two-column) */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-section.split-reverse .split-image { order: 2; }
.split-section.split-reverse .split-content { order: 1; }
.split-content h2 { margin-top: 0; }
.split-content .lead-in { font-weight: 700; color: var(--navy); font-family: var(--font-head); margin-top: 1.4rem; margin-bottom: 0.6rem; }
.split-image { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.split-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.split-image-caption {
  position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(13,19,95,0.9);
  color: #fff; padding: 16px 20px; border-radius: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.3;
}
.split-image-caption.is-light { background: var(--accent-tint); color: var(--navy); font-weight: 600; font-size: 0.92rem; }

/* Dark feature grid */
.feature-band { background: var(--navy); padding: 64px 0; }
.feature-band h2 { color: #fff; text-align: center; margin-top: 0; }
.feature-band .band-subtext { color: #c3cbe0; text-align: center; max-width: 640px; margin: 12px auto 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; list-style: none; padding: 0; }
.feature-grid-4 { grid-template-columns: repeat(4, 1fr); }
.feature-item {
  background: transparent; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
  padding: 28px 26px; text-align: left;
}
.feature-item .icon-badge { background: var(--seafoam-gradient); color: var(--navy-dark); margin: 0 0 16px; }
.feature-item h3 { color: #fff; font-weight: 700; font-family: var(--font-head); margin: 0 0 8px; font-size: 0.98rem; }
.feature-item p { color: #c3cbe0; margin: 0; font-size: 0.85rem; line-height: 1.6; }

/* Map + coverage split */
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 0; width: 100%; height: 340px; display: block; }

/* Standalone location map, centred at the bottom of each location page */
.location-map-wrap { max-width: 720px; margin: 0 auto; }
.location-map-wrap .map-embed { height: 380px; }

/* Certification logos */
.cert-logos-row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; margin: 32px 0; }
.cert-logos-row img { height: 56px; width: auto; object-fit: contain; }
.cert-callout { text-align: center; max-width: 640px; margin: 0 auto; }
.cert-callout .lead-in { font-weight: 700; color: var(--navy); font-family: var(--font-head); font-size: 1.1rem; }

@media (max-width: 900px) {
  .split-section { grid-template-columns: 1fr; gap: 28px; }
  .split-section.split-reverse .split-image, .split-section.split-reverse .split-content { order: initial; }
  .feature-grid, .feature-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feature-grid, .feature-grid-4 { grid-template-columns: 1fr; }
  .cert-logos-row { gap: 28px; }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: none; }
.breadcrumb .current { color: var(--navy); font-weight: 700; }
.breadcrumb-sep { color: var(--border); }

/* How it works — process steps */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 44px; position: relative; }
.steps-grid::before {
  content: ""; position: absolute; top: 27px; left: calc(12.5% + 10px); right: calc(12.5% + 10px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 8px, transparent 8px, transparent 16px);
  opacity: 0.5;
}
.step-item { text-align: center; position: relative; z-index: 1; }
.step-num {
  width: 54px; height: 54px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.step-item h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step-item p { font-size: 0.9rem; color: var(--muted); max-width: 220px; margin: 0 auto; }

/* Pricing guide */
.pricing-note { background: var(--accent-tint); color: var(--navy); border-radius: 10px; padding: 14px 20px; font-size: 0.9rem; font-weight: 600; margin: 28px 0 0; text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; list-style: none; padding: 0; }
.pricing-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pricing-card h3 { font-size: 1rem; margin-bottom: 8px; }
.pricing-card .price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--accent-dark); display: block; margin-bottom: 6px; }
.pricing-card p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* Related services */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; list-style: none; padding: 0; }
.related-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--accent); text-decoration: none; }
.related-card .icon-badge { margin-bottom: 0; }
.related-card span.title { font-weight: 700; font-family: var(--font-head); color: var(--navy); font-size: 0.98rem; }
.related-card span.arrow { color: var(--accent-dark); font-weight: 700; font-size: 0.85rem; }

/* Customer review quotes */
.reviews-quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.review-quote {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-sm); margin: 0; transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.review-quote:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.review-quote p { font-size: 0.92rem; color: var(--navy); line-height: 1.6; margin: 0 0 14px; }
.review-quote cite { display: block; font-style: normal; font-weight: 700; font-family: var(--font-head); font-size: 0.85rem; color: var(--muted); }
@media (max-width: 860px) {
  .reviews-quote-grid { grid-template-columns: 1fr; }
}

/* Floating mobile CTA bar */
.mobile-cta-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.14); padding: 10px 14px; gap: 10px;
  transform: translateY(100%); transition: transform 0.25s ease;
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
.mobile-cta-btn {
  flex: 1; text-align: center; padding: 13px 10px; border-radius: 10px; font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mobile-cta-call { background: var(--seafoam-gradient); color: var(--navy); }
.mobile-cta-quote { background: var(--seafoam-gradient); color: var(--navy-dark); }
@media (max-width: 900px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 68px; }
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .steps-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}

/* Infographic hero (Home2 experiment) */
.hero-infographic {
  background: linear-gradient(180deg, #f0f8fc 0%, #ffffff 100%);
  padding: 76px 0 60px; overflow: hidden; position: relative;
}
.hero-infographic .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-infographic h1 { color: var(--navy); font-size: 2.6rem; max-width: 560px; }
.hero-infographic h1 .highlight { color: var(--accent-dark); }
.hero-infographic p { color: var(--muted); font-size: 1.1rem; max-width: 520px; }
.infographic-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.infographic-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(63,127,209,0.16); border: 1px solid rgba(63,127,209,0.35); color: #dbe7fa;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px;
}
.infographic-tag .stars { color: #dbe7fa; }
.hero-infographic .infographic-tag { background: var(--accent-tint); border-color: transparent; color: var(--navy); }
.hero-infographic .infographic-tag .stars { color: #f5a623; }
.hero-infographic .quote-bar { box-shadow: 0 12px 32px rgba(13,19,95,0.14); }
.hero-infographic .quote-bar-note { color: var(--accent-dark); }
.hero-infographic .typewriter-cursor { color: var(--accent-dark); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.hero-blob {
  position: absolute; width: 115%; max-width: 560px; z-index: 0; opacity: 0.9;
  animation: blob-morph 10s ease-in-out infinite;
}
@keyframes blob-morph {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.03); }
}
.hero-illustration { position: relative; z-index: 1; width: 100%; max-width: 420px; height: auto; }
.hero-illustration-stack {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  aspect-ratio: 507.99631 / 486.46461;
}
.hero-illustration-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.8s ease;
}
.hero-illustration-slide.is-active { opacity: 1; }

/* Homepage hero visual — rotating photo card + trust caption + stat pills */
.hero-visual-card { position: relative; width: 100%; max-width: 450px; flex: 0 1 450px; animation: hero-card-bob 6s ease-in-out infinite; }
@keyframes hero-card-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-visual-frame {
  position: relative; z-index: 1; border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
/* Same card, reused on a light (white) section background — the
   frosted-glass treatment above only reads against the dark hero. */
.hero-visual-card.is-on-light .hero-visual-frame {
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.hero-visual-carousel { position: relative; aspect-ratio: 1 / 1; }

/* Soft decorative rounded squares — reusable "bobbing" accent shapes used
   behind the homepage hero photo card and the "What We Do" figure below it.
   Purely decorative (aria-hidden in the markup). */
.soft-shape { position: absolute; z-index: 0; pointer-events: none; border-radius: 26px; animation: shape-bob 7s ease-in-out infinite; }
@keyframes shape-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}
/* Solid (not pale-tint) colours here — the pastel tint variants used
   elsewhere on light backgrounds disappear against the navy hero. */
.hero-shape-1 { width: 130px; height: 130px; top: -20px; left: -24px; background: var(--accent); opacity: 0.4; }
.hero-shape-2 { width: 84px; height: 84px; bottom: -16px; right: 10%; border-radius: 22px; background: #3f7fd1; opacity: 0.4; animation-delay: 1.6s; }
.hero-shape-3 { width: 42px; height: 42px; top: 42%; right: -18px; border-radius: 14px; background: var(--accent); opacity: 0.6; animation-delay: 3s; }

/* Floating stat + client-quote cards, overlapping the photo card corners */
.hero-stat-float, .hero-quote-float {
  position: absolute; z-index: 3; background: #fff; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(13,19,95,0.18); animation: hero-card-bob 6s ease-in-out infinite;
}
.hero-stat-float { top: -22px; left: -22px; padding: 16px 20px; text-align: center; min-width: 104px; animation-delay: 0.4s; }
.hero-stat-float .stat-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.65rem; color: var(--accent-dark); line-height: 1; }
.hero-stat-float .stat-label { display: block; font-size: 0.63rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 5px; line-height: 1.35; }
.hero-quote-float { bottom: -24px; right: -26px; padding: 16px 18px; max-width: 208px; animation-delay: 1.6s; }
.hero-quote-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.hero-quote-top svg { width: 15px; height: 15px; flex-shrink: 0; }
.hero-quote-top .stars { color: #f5a623; font-size: 0.7rem; letter-spacing: 1px; }
.hero-quote-float p { margin: 0 0 6px; font-size: 0.78rem; line-height: 1.4; color: var(--navy); font-style: italic; }
.hero-quote-float cite { font-size: 0.66rem; color: var(--muted); font-style: normal; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .soft-shape, .hero-stat-float, .hero-quote-float { animation: none !important; }
}
@media (max-width: 900px) {
  .hero-stat-float { top: -14px; left: -14px; padding: 11px 14px; min-width: 84px; }
  .hero-stat-float .stat-num { font-size: 1.3rem; }
  .hero-quote-float { bottom: -16px; right: -12px; max-width: 156px; padding: 11px 13px; }
  .hero-shape-1 { width: 90px; height: 90px; }
  .hero-shape-2 { width: 56px; height: 56px; }
  .hero-shape-3 { display: none; }
}

/* Full-bleed hero photo — fills the hero section edge to edge (ignoring
   the section's own padding, since inset positions relative to its
   padding box). The source image is pre-graded by the client to our exact
   --navy (#0d135f) with its own diagonal fade baked in, so rather than
   cropping a strip and layering a CSS fade on top (which would double up
   and risk cropping into the subject), we let it sit at its native
   proportions — object-fit:contain, anchored left — against a matching
   navy background. Any leftover space (there always is some, on the
   right) is filled by that identical navy, so the seam is invisible. */
.hero-bleed-photo { position: absolute; inset: 0; z-index: 0; background: var(--navy); }
.hero-bleed-photo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.svc-hero-freeform.is-photo-bleed { position: relative; z-index: 2; justify-content: flex-end; }
@media (max-width: 900px) {
  /* Drop the photo entirely on mobile rather than a short cropped strip —
     tightens the whole hero up considerably. */
  .hero-bleed-photo { display: none; }
  .svc-hero-freeform.is-photo-bleed { justify-content: center; }
}

/* Standalone trust badge above the H1 — replaces the old 3 text pills.
   Reuses the same rotating Google/Trustpilot markup that used to live in
   the visual card's caption strip (now removed, card is just the photo). */
.hero-rating-badge {
  display: inline-flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  padding: 6px 16px 6px 6px; border-radius: 100px; margin-bottom: 20px;
}
/* Icon (left) and rating text (right) fade independently but share the
   same rotation timing in heroIllustrationRotator.js, so Google/Trustpilot
   switch together even though they're visually split across the strip. */
.hero-review-icon-wrap { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
.hero-review-icon-slide {
  position: absolute; inset: 0; border-radius: 50%; background: #fff; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.6s ease;
}
.hero-review-icon-slide.is-active { opacity: 1; }
.hero-review-icon-slide svg { width: 100%; height: 100%; display: block; }

.hero-review-text-wrap { position: relative; height: 20px; min-width: 80px; }
.hero-review-text-slide {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 5px;
  opacity: 0; transition: opacity 0.6s ease; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; color: #fff;
}
.hero-review-text-slide.is-active { opacity: 1; }
.hero-review-text-slide .stars { color: var(--accent); letter-spacing: 1px; font-size: 0.68rem; }
/* Half-star trick — dim base glyph + clipped accent-coloured overlay at 50% width.
   Unscoped so it can be reused anywhere stars appear on a dark background
   (hero rating badge, review pills, etc). */
.star-half { position: relative; display: inline-block; color: rgba(255,255,255,0.28); }
.star-half::before {
  content: "\2605"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--accent);
}
@media (max-width: 900px) {
  .hero-visual-card { max-width: 360px; order: -1; }
}

.hero-icon-stack { position: relative; z-index: 1; width: 240px; height: 240px; margin: 0 auto; }
.hero-icon-slide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transform: scale(0.82); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-icon-slide.is-active { transform: scale(1); }
.hero-icon-slide svg { width: 120px; height: 120px; }
.hero-icon-label {
  font-family: var(--font-head); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.8rem; color: #fff;
}

/* Hero + marquee "fold" — fills the first screen, hero content centred in the
   space above, marquee pinned to the bottom, regardless of viewport height. */
.hero-fold { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h, 120px)); }
.hero-fold .svc-hero { flex: 1; display: flex; flex-direction: column; padding-top: 40px; padding-bottom: 0; }
.hero-fold .svc-hero > .wrap { flex: 1; display: flex; align-items: center; }
.hero-fold .svc-hero > .svc-marquee { flex-shrink: 0; margin-top: 40px; }
@media (max-width: 900px) {
  /* No photo to balance against on mobile any more, so the fold no
     longer needs to stretch to fill the viewport — let it size to its
     content so there's no dead space above the marquee. */
  .hero-fold { min-height: auto; }
  .hero-fold .svc-hero { padding-top: 28px; }
  .hero-fold .svc-hero > .svc-marquee { margin-top: 28px; }
}
/* Marquee sitting inside the dark hero itself — white text, transparent
   background (no separate coloured band), brighter accent separators. */
.svc-hero > .svc-marquee {
  background: transparent; border-bottom: none; border-top: none;
}
.svc-hero > .svc-marquee .svc-marquee-item { color: #fff; }
.svc-hero > .svc-marquee .svc-marquee-item::after { background: var(--accent); }
.hero-float-badge {
  position: absolute; background: #fff; border-radius: 50%; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  width: 62px; height: 62px; color: var(--accent-dark);
  animation: float-badge 4s ease-in-out infinite;
}
.hero-float-badge svg { width: 26px; height: 26px; }
.hero-float-badge-1 { top: 6%; left: 2%; animation-delay: 0s; }
.hero-float-badge-2 { bottom: 10%; right: 0%; animation-delay: 1.4s; color: var(--navy); }
@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-connector { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero-connector path {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; opacity: 0.55;
}

.infographic-stats { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.infographic-stat { display: flex; flex-direction: column; }
.infographic-stat .stat-num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; }
.infographic-stat .stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-float-badge, .hero-visual-card { animation: none !important; }
  .hero-illustration-slide { transition: none !important; }
}
@media (max-width: 900px) {
  .hero-infographic .wrap { grid-template-columns: 1fr; }
  .hero-visual { order: -1; min-height: 300px; }
  .hero-infographic h1 { font-size: 2.1rem; }
}

/* Custom service picker (replaces native <select> in quote-bar) */
.service-picker { position: relative; flex: 1.15; min-width: 0; }
.service-picker-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  border: none; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-size: 0.94rem; font-weight: 700; color: var(--navy);
  padding: 13px 14px 13px 18px;
}
.service-picker-trigger .chevron { color: var(--navy); flex-shrink: 0; transition: transform 0.2s ease; }
.service-picker-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.service-picker-trigger.has-value { color: var(--navy); }

.service-picker-modal {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.service-picker-modal.is-open { opacity: 1; pointer-events: auto; }
.service-picker-backdrop { position: absolute; inset: 0; background: rgba(13,19,95,0.5); backdrop-filter: blur(2px); }
.service-picker-panel {
  position: relative; background: #fff; border-radius: 22px; box-shadow: 0 24px 64px rgba(13,19,95,0.3);
  width: 100%; max-width: 360px; max-height: 70vh; overflow-y: auto; padding: 4px;
  transform: scale(0.94) translateY(10px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease;
}
.service-picker-modal.is-open .service-picker-panel { transform: scale(1) translateY(0); opacity: 1; }
.service-picker-panel-header {
  display: flex; align-items: center; justify-content: space-between; padding: 22px 14px 12px;
}
.service-picker-panel-header span { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.service-picker-close {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--seafoam-gradient); color: var(--navy);
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease; flex-shrink: 0;
}
.service-picker-close:hover { background: var(--accent-tint); }
.service-picker-step.is-hidden { display: none; }
.service-picker-back {
  display: flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer;
  color: var(--accent-dark); font-family: var(--font-body); font-weight: 700; font-size: 0.86rem;
  padding: 8px 14px; margin-bottom: 2px;
}
.service-picker-back:hover { text-decoration: underline; }
.service-picker-list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; }
.service-picker-option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: transparent;
  padding: 13px 10px; border-radius: 14px; cursor: pointer; font-family: var(--font-body); font-size: 0.96rem;
  font-weight: 600; color: var(--navy); transition: background 0.15s ease, transform 0.15s ease;
  border-bottom: 1px solid var(--border);
}
.service-picker-option:last-child { border-bottom: none; }
.service-picker-option:hover, .service-picker-option:focus-visible { background: var(--accent-tint); transform: translateX(2px); outline: none; }
.service-picker-option.is-selected { background: var(--accent-tint); }
.service-picker-option.is-selected .service-picker-check { opacity: 1; }
.service-picker-option-icon {
  width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-picker-option.is-selected .service-picker-option-icon { background: var(--accent); color: var(--navy-dark); }
.service-picker-option-icon svg { width: 16px; height: 16px; }
.service-picker-option-label { flex: 1; }
.service-picker-check { color: var(--accent-dark); opacity: 0; flex-shrink: 0; }
.service-picker-arrow { color: var(--muted); flex-shrink: 0; }

@media (max-width: 560px) {
  .service-picker-panel { max-height: 70vh; }
  .service-picker-panel-header { padding: 22px 10px 10px; }
  .service-picker-option { padding: 8px 8px; border-bottom: none; gap: 10px; }
  .service-picker-option-icon { width: 28px; height: 28px; border-radius: 8px; }
  .service-picker-option-icon svg { width: 14px; height: 14px; }
  .service-picker-option-label { font-size: 0.92rem; }
}

/* ============================================================
   BOLD SERVICE PAGE TEMPLATE  (svc-*)
   Self-contained design system for service pages. Namespaced so
   it never collides with the older .hero / .section styles.
   ============================================================ */

.svc-dark { background: var(--navy-dark); color: #fff; }
.svc-light { background: #fff; }
.svc-cream { background: var(--seafoam-gradient); }
/* Full-strength seafoam gradient (green to blue) rather than the 35%-
   opacity "soft" version, which washed both colours out to near-white. */
.home-stats-band { background: var(--seafoam-gradient); }

.svc-pad { padding: 84px 0; }
.svc-pad-sm { padding: 60px 0; }

/* Shared display heading — big, uppercase, two-tone */
.svc-display {
  font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.06; margin: 0 0 16px;
}
/* Gradient tint — default treatment for headings on white/soft backgrounds */
.svc-display .tint {
  background: var(--seafoam-gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc-display .ghost { color: rgba(13,19,95,0.16); }
.svc-dark .svc-display { color: #fff; }
.svc-dark .svc-display .ghost { color: rgba(255,255,255,0.18); }
/* On navy backgrounds the gradient loses contrast — fall back to solid accent */
.svc-dark .svc-display .tint,
.svc-hero:not(.is-light) .svc-display .tint {
  background: none; -webkit-text-fill-color: currentColor; color: var(--accent);
}
.svc-h2 { font-size: 2.3rem; }
.svc-center { text-align: center; }
.svc-center .svc-lede { margin-left: auto; margin-right: auto; }
.svc-lede { color: var(--muted); font-size: 1rem; max-width: 620px; margin: 0 0 40px; }
.svc-dark .svc-lede { color: #b9c2d6; }

/* Eyebrow pill */
.svc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(100deg, rgba(226,250,233,0.9) 0%, rgba(219,230,251,0.9) 100%);
  border: 1px solid rgba(13,19,95,0.15); color: var(--navy-dark); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 16px; border-radius: 100px; margin-bottom: 22px;
}

/* Pill buttons */
.btn-pill-lg { border-radius: 100px; padding: 0.85rem 1.8rem; font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 9px; }
.btn-ghost-light { background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.28); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); border-color: #fff; text-decoration: none; }
.svc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

/* ---------- HERO ---------- */
.svc-hero {
  position: relative; overflow: hidden; padding: 76px 0 68px;
  background: var(--navy);
  color: #fff;
}
/* Light variant — white/pale background, navy text, gradient-filled heading highlight */
.svc-hero.is-light { background: linear-gradient(180deg, #f0f8fc 0%, #ffffff 100%); color: var(--navy); }
.svc-hero.is-light h1 { color: var(--navy); }
.svc-hero.is-light .svc-hero-intro { color: var(--muted); }

/* Freeform hero — text and graphic sit as a centred, contained flex row
   (graphic stays fully on-page, no bleed past the viewport edge). */
.svc-hero-freeform { display: flex; align-items: center; justify-content: center; gap: 44px; }
.svc-hero-copy { max-width: 600px; flex: 1 1 420px; }
/* Wider than the shared 15ch hero h1 cap, scoped to just this variant, so
   "Electrician in Lewes." sits on its own line instead of wrapping again. */
.svc-hero .svc-hero-copy h1 { max-width: none; }
.hero-bleed-graphic { flex: 0 1 440px; display: flex; align-items: center; justify-content: center; }
.hero-bleed-graphic img { display: block; width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 40px 70px rgba(13,19,95,0.18)); }
@media (max-width: 900px) {
  .svc-hero-freeform { flex-direction: column; }
  .hero-bleed-graphic { max-width: 320px; order: -1; }
}
/* Extra breathing room left/right — hero only */
.svc-hero > .wrap { max-width: 1080px; padding-left: 64px; padding-right: 64px; }
.svc-hero.has-bleed-graphic > .wrap { max-width: 1100px; width: 100%; flex: 1 1 auto; }
.svc-hero-inner { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
/* Mirrored variant — photo column first (left), copy second (right) */
.svc-hero-inner.is-image-left { grid-template-columns: 0.92fr 1.08fr; }

/* Single-column hero variant — badge icon beside the title instead of a
   circular photo on the right (opt-in via svcHero frontmatter). */
.svc-hero:has(.svc-hero-copy-icon) > .wrap { max-width: 1280px; }
.svc-hero-copy-icon { position: relative; z-index: 2; max-width: 1140px; }
.svc-hero-title-row { display: flex; align-items: center; gap: 36px; }
.svc-hero-title-row > div { flex: 1 1 auto; min-width: 0; }
.svc-hero .svc-hero-title-row h1 { max-width: none; }
.svc-hero-badge-icon { width: 230px; height: auto; flex-shrink: 0; }
@media (max-width: 700px) {
  .svc-hero-title-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .svc-hero-badge-icon { width: 140px; }
}

/* Animated circuit background */
.svc-circuit {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; opacity: 0.5;
}
.svc-circuit-traces path {
  fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.16;
}
/* A short bright "pulse" travelling along each trace */
.svc-circuit-traces::after { content: none; }
.svc-circuit-traces path:nth-child(1) { stroke-dasharray: 90 1400; animation: svc-current 9s linear infinite; }
.svc-circuit-traces path:nth-child(2) { stroke-dasharray: 70 1400; animation: svc-current 11s linear infinite 1.4s; }
.svc-circuit-traces path:nth-child(3) { stroke-dasharray: 110 1400; animation: svc-current 10s linear infinite 2.6s; }
.svc-circuit-traces path:nth-child(4) { stroke-dasharray: 80 1400; animation: svc-current 12s linear infinite 0.7s; }
.svc-circuit-traces path:nth-child(5) { stroke-width: 1.2; opacity: 0.1; }
@keyframes svc-current {
  from { stroke-dashoffset: 1490; opacity: 0.55; }
  50%  { opacity: 0.85; }
  to   { stroke-dashoffset: 0; opacity: 0.55; }
}
.svc-circuit-nodes circle {
  fill: var(--accent); opacity: 0.22;
  animation: svc-node 4s ease-in-out infinite;
}
.svc-circuit-nodes circle:nth-child(3n) { animation-delay: 1.1s; }
.svc-circuit-nodes circle:nth-child(3n+1) { animation-delay: 2.3s; }
@keyframes svc-node {
  0%, 100% { opacity: 0.18; r: 4; }
  50% { opacity: 0.7; r: 6; }
}
.svc-hero h1 { font-size: 3.3rem; color: #fff; max-width: 15ch; }
.svc-hero-intro { color: #c6cfe2; font-size: 1.05rem; max-width: 44ch; margin: 0 0 28px; }

.svc-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.svc-chip {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); color: #dfe6f2; font-size: 0.76rem; font-weight: 600;
  padding: 7px 15px; border-radius: 100px;
}
.svc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Circular hero figure with glowing ring */
.svc-hero-figure { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.svc-ring {
  position: relative; z-index: 1; width: 90%; max-width: 380px; aspect-ratio: 1/1; border-radius: 50%;
  padding: 9px; background: linear-gradient(145deg, #dbe6fb 0%, rgba(219,230,251,0.15) 55%, rgba(219,230,251,0.5) 100%);
  box-shadow: 0 0 60px rgba(219,230,251,0.28);
  animation: svc-bob 6s ease-in-out infinite;
}
.svc-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@keyframes svc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.svc-stat-chip {
  position: absolute; z-index: 3; background: #fff; color: var(--navy); border-radius: 16px;
  padding: 12px 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.28); text-align: left;
  animation: svc-bob 5s ease-in-out infinite;
}
.svc-stat-chip .stat-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; line-height: 1; color: var(--navy); }
.svc-stat-chip .stat-label { display: block; font-size: 0.64rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; margin-top: 4px; }
.svc-stat-1 { top: 6%; left: -2%; animation-delay: 0.6s; }
.svc-stat-2 { bottom: 8%; right: -3%; animation-delay: 1.8s; }

/* Plain rounded-rect hero photo — simpler alternative to .svc-ring for the
   lean service-page template (no floating stat chips). Note: no overflow
   clipping on the wrapper itself, so an offset corner badge (.svc-hero-photo-badge)
   can sit partly outside the photo's edge — rounding/shadow live on the img instead. */
.svc-hero-photo-simple {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 4/3;
}
.svc-hero-photo-simple img, .svc-hero-photo-simple iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
  border-radius: 20px; box-shadow: 0 24px 54px rgba(0,0,0,0.28);
}
/* Square variant, for pages that want the photo/badge pairing */
.svc-hero-photo-simple.is-square { aspect-ratio: 1/1; }

/* Corner badge — offset outside the bottom-left corner, echoing the
   staggered/offset squares in the LH Electrical logo mark */
.svc-hero-photo-badge {
  position: absolute; left: -30px; bottom: -30px; aspect-ratio: 1/1;
  /* Fixed/clamped, not percentage-of-image — stays a consistent accent at any
     image or viewport size instead of scaling up uncontrolled on large screens. */
  width: clamp(84px, 24%, 120px);
  background: #fff; border-radius: 22%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 32px rgba(13,19,95,0.35);
  z-index: 2;
}
.svc-hero-photo-badge svg { width: 46%; height: 46%; }
@media (max-width: 620px) {
  .svc-hero-photo-badge { width: 78px; left: -24px; bottom: -24px; }
}

/* Google/Trustpilot review lozenges — same pill footprint as .btn-pill-lg,
   used in place of plain CTA buttons where the hero should lead with proof. */
.btn-review-pill {
  display: inline-flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 100px; padding: 8px 20px 8px 8px;
  color: #fff; text-decoration: none;
}
.btn-review-pill:hover { background: rgba(255,255,255,0.14); text-decoration: none; }
.review-pill-icon {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; padding: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.review-pill-icon svg { width: 100%; height: 100%; display: block; }
.review-pill-text { display: flex; flex-direction: column; line-height: 1.25; }
.review-pill-text .review-pill-rating { font-family: var(--font-head); font-weight: 800; font-size: 0.95rem; }
.review-pill-text .review-pill-rating .stars { color: var(--accent); letter-spacing: 1px; font-size: 0.7rem; margin-left: 4px; }
.review-pill-text .review-pill-source { font-size: 0.68rem; color: #c6cfe2; text-transform: uppercase; letter-spacing: 0.06em; }

/* Standalone trust strip — its own section, sits directly under the hero */
.svc-trust-strip-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 48px;
  margin: 0; padding: 0; list-style: none;
}
.svc-trust-strip-inner li {
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy-dark);
  letter-spacing: 0.01em;
}
.svc-trust-strip-inner .stars { color: var(--accent-dark); letter-spacing: 2px; margin-right: 4px; }

/* ---------- SIMPLE CHECKLIST ("What's Included") — filled cards ---------- */
.svc-check-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; list-style: none; padding: 0;
  margin: 0 auto; max-width: 920px;
}
.svc-check-item {
  display: flex; gap: 16px; padding: 24px 26px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.svc-check-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; color: var(--accent-dark);
}
.svc-check-icon svg { display: block; }
.svc-check-item .title { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy-dark); font-size: 1.08rem; line-height: 1.35; }
.svc-check-item .note { display: block; margin-top: 4px; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* Supporting photos dropped into a copy-heavy section */
.svc-photo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.svc-photo-row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm); }

/* ---------- "What's Included" band — checklist + sidebar cards on a pale
   background. Designed to be the one consolidated section that replaces a
   separate trust-strip + included-list + how-it-works stack, so pages stay
   short. Reusable across every service page. ---------- */
.svc-included-band { padding: 84px 0; background: var(--gray-bg); }
.svc-included-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.svc-included-grid > * { min-width: 0; }
.svc-included-sidebar { display: flex; flex-direction: column; gap: 22px; }
.svc-info-card, .svc-quote-card { border-radius: 20px; padding: 30px; }
.svc-info-card { background: #fff; box-shadow: var(--shadow-sm); }
.svc-info-card-eyebrow {
  display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--navy-dark); margin-bottom: 20px;
}
.svc-info-card-eyebrow svg { width: 16px; height: 16px; color: var(--accent-dark); flex-shrink: 0; }
.svc-info-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.svc-info-card-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; font-weight: 600; color: var(--navy-dark); line-height: 1.4; }
.svc-info-card-list svg { width: 18px; height: 18px; color: var(--accent-dark); flex-shrink: 0; margin-top: 2px; }
.svc-quote-card { background: var(--seafoam-gradient-metallic); color: var(--navy-dark); }
.svc-quote-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; margin: 0 0 10px; color: var(--navy-dark); }
.svc-quote-card p { color: rgba(13,19,95,0.82); font-size: 0.92rem; line-height: 1.6; margin: 0 0 22px; }

/* Compact qualifications card — small logo tiles side by side, sits between
   the "Why Choose" and "Get Your Free Quote" sidebar cards. */
.svc-qual-text { font-size: 0.88rem; color: var(--muted); line-height: 1.55; margin: 0 0 18px; }
.svc-qual-logos { display: flex; gap: 10px; }
.svc-qual-logo-tile {
  flex: 1 1 0; min-width: 0; background: var(--navy-dark); border-radius: 10px;
  padding: 10px 8px; display: flex; align-items: center; justify-content: center;
}
.svc-qual-logo-tile img { height: 22px; width: auto; max-width: 100%; display: block; }
@media (max-width: 900px) {
  .svc-included-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Sidebar "Blog Articles" link list — plain links, not the checklist-with-icon
   treatment used by .svc-info-card-list elsewhere. */
.svc-blog-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.svc-blog-list li { border-bottom: 1px solid var(--border); }
.svc-blog-list li:last-child { border-bottom: none; }
.svc-blog-list a {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 0;
  color: var(--navy-dark); font-weight: 700; font-size: 0.92rem; line-height: 1.4;
}
.svc-blog-list a:hover { color: var(--accent-dark); }
.svc-blog-list svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent-dark);
}

/* ---------- SINGLE-COLUMN PROSE — location pages (and similar text-led
   pages) that want typeset body copy with occasional highlight cards,
   rather than the two-column included-band layout. ---------- */
.svc-prose h2 { font-size: 1.7rem; margin: 52px 0 18px; }
.svc-prose h2:first-child { margin-top: 0; }
.svc-prose p { color: var(--muted); font-size: 1.03rem; line-height: 1.75; margin: 0 0 22px; }
.svc-prose p strong { color: var(--navy-dark); }
.svc-prose .svc-info-card { margin: 12px 0 34px; }
.svc-prose .svc-info-card-list li { font-weight: 500; }

/* ---------- HOW IT WORKS ---------- */
.svc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; padding: 0; margin: 0; }
.svc-step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy-dark); color: var(--accent);
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.svc-step h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-dark); margin-bottom: 8px; }
.svc-step p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* ---------- REVIEWS — light variant (for plain-background service pages) ---------- */
.svc-rating-line.is-light { color: var(--muted); }
.svc-rating-line.is-light strong { color: var(--navy-dark); }
.svc-rating-google-icon { display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; }
.svc-rating-google-icon svg { width: 100%; height: 100%; display: block; }
.svc-review-grid.is-light .svc-review { background: #fff; border-color: var(--border); }
.svc-review-grid.is-light .svc-review p { color: var(--text); }
.svc-review-grid.is-light .svc-review cite { color: var(--navy-dark); }
.svc-review-grid.is-light .svc-avatar { background: var(--accent-tint); color: var(--accent-dark); }

/* ---------- MARQUEE ---------- */
.svc-marquee { background: var(--seafoam-gradient); padding: 20px 0; overflow: hidden; border-bottom: 1px solid #e4ebdd; }
.svc-marquee-track { display: flex; width: max-content; animation: svc-scroll 34s linear infinite; }
.svc-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
/* Padding-left only, matching the gap, so the separator sits exactly
   midway between the word before it and the word after it. */
.svc-marquee-item {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.86rem; color: var(--navy); padding: 0 0 0 30px;
  display: inline-flex; align-items: center; gap: 30px; white-space: nowrap;
}
.svc-marquee-item::after {
  content: ""; width: 15px; height: 15px; flex-shrink: 0; background: var(--accent-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes svc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.svc-marquee:hover .svc-marquee-track { animation-play-state: paused; }

/* ---------- PRICING CARDS ---------- */
.svc-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.svc-price-card {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 30px 26px 26px;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.svc-price-card:hover { box-shadow: 0 16px 40px rgba(13,19,95,0.13); transform: translateY(-4px); border-color: var(--accent); }
.svc-price-card.is-featured { border-color: var(--accent); border-width: 2px; }
.svc-price-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--navy-dark);
  font-family: var(--font-head); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 100px;
}
.svc-price-card h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--navy); margin: 0 0 8px; }
.svc-price-card .svc-price { font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; color: var(--navy); line-height: 1; margin: 4px 0 12px; }
.svc-price-card p { font-size: 0.87rem; color: var(--muted); margin: 0 0 22px; flex: 1; }
.svc-price-card .btn { width: 100%; text-align: center; justify-content: center; }
.svc-price-foot { text-align: center; font-size: 0.86rem; color: var(--muted); margin: 30px auto 0; max-width: 640px; }

/* ---------- WORK GALLERY (dark) ---------- */
.svc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-shot { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
.svc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.svc-shot:hover img { transform: scale(1.06); }
.svc-shot-tag {
  position: absolute; top: 14px; left: 14px; background: var(--accent); color: var(--navy-dark);
  font-family: var(--font-head); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 100px;
}

/* ---------- SERVICES WE OFFER (centred intro + carousel + 3-col list) ---------- */
.svc-offer-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.svc-offer-head .svc-display { margin-bottom: 14px; }
.svc-offer-lede { color: #c6cfe2; margin: 0; }
/* Extra breathing room left/right on this band, plus room at the
   bottom for the green energy container to overlap into. */
.svc-offer-band { position: relative; z-index: 1; padding-bottom: 180px; }
.svc-offer-band > .wrap { max-width: 1080px; padding-left: 64px; padding-right: 64px; }

.svc-offer-kicker {
  font-family: var(--font-head); font-weight: 700; color: var(--accent); text-align: center;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 56px auto 40px; max-width: 100%;
}

/* 3-column service list with outlined square tick bullets */
.svc-offer-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.svc-offer-list li {
  display: flex; gap: 12px; align-items: flex-start;
  background: #141a67; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 15px 17px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.svc-offer-list li:hover { background: #1a2277; border-color: rgba(166,221,208,0.22); }
.svc-offer-list li::before {
  content: ""; flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px;
  border: 1.5px solid var(--accent); border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfea97' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.svc-offer-list .title { display: block; font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 0.9rem; line-height: 1.35; }
.svc-offer-list .note { display: block; font-size: 0.77rem; color: #9aa5be; line-height: 1.45; margin-top: 3px; }

/* Continuous two-up carousel */
.svc-carousel { position: relative; }
.svc-carousel-viewport {
  overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.svc-carousel-viewport::-webkit-scrollbar { display: none; }
.svc-carousel-viewport.is-dragging { cursor: grabbing; }
.svc-carousel-track { display: flex; gap: 18px; }
.svc-slide {
  flex: 0 0 calc(50% - 9px); margin: 0; position: relative; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md);
}
.svc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.svc-slide figcaption {
  position: absolute; left: 0; bottom: 0; background: rgba(13,19,95,0.93); color: #fff;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 11px 18px;
  border-radius: 0 12px 0 16px;
  display: inline-flex; align-items: center; gap: 9px;
}
.svc-slide figcaption::after {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfea97' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.18s ease;
}
.svc-slide:hover figcaption::after { transform: translateX(3px); }

/* Full-bleed variant — sits outside .wrap so it spans the whole screen,
   held just off the edges so the images don't run clean off. */
.svc-carousel-full { margin: 0; padding: 0 18px; }
.svc-carousel-full .svc-slide { border-radius: 12px; box-shadow: none; }
@media (min-width: 1200px) {
  /* Wider aspect on big screens so full-width images stretch across
     rather than becoming very tall */
  .svc-carousel-full .svc-slide { aspect-ratio: 16 / 9; }
}

/* Controls sit below the images, centred with the dots */
.svc-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.svc-carousel-btn {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  background: transparent; border: 1.5px solid rgba(166,221,208,0.45); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.svc-carousel-btn:hover { background: rgba(166,221,208,0.16); border-color: var(--accent); }
.svc-carousel-btn svg { width: 15px; height: 15px; }
.svc-carousel-dots { display: flex; justify-content: center; gap: 8px; }
.svc-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.28); transition: background 0.16s ease, width 0.16s ease;
}
.svc-carousel-dot.is-active { background: var(--accent); width: 22px; border-radius: 100px; }

/* ---------- ENERGY EFFICIENCY BAND (green container) ----------
   Transparent section so the container itself can ride up and
   straddle the dark band above it. */
.svc-eco-section { background: transparent; position: relative; z-index: 2; padding: 0; }
.svc-eco-section > .wrap { max-width: 1040px; padding-left: 64px; padding-right: 64px; }
.svc-eco {
  display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: stretch;
  background: var(--accent); border-radius: 26px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(13,19,95,0.22);
  margin-top: -132px;
}
.svc-eco-body { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.svc-eco-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
  background: rgba(13,19,95,0.12); color: var(--navy);
  font-family: var(--font-head); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 100px; margin-bottom: 18px;
}
.svc-eco-title {
  color: var(--navy); font-size: 2.5rem; margin: 0 0 14px; max-width: 16ch;
}
.svc-eco-title span { display: block; color: rgba(13,19,95,0.42); }
.svc-eco-body > p {
  color: rgba(13,19,95,0.82); font-size: 0.98rem; margin: 0 0 22px; max-width: 46ch;
}
.svc-eco-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.svc-eco-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--navy); font-weight: 600; line-height: 1.4; }
.svc-eco-list li::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px;
  border: 1.5px solid rgba(13,19,95,0.55); border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d135f' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.svc-eco-list a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.svc-eco-body .btn { align-self: flex-start; }
.svc-eco-figure { position: relative; min-height: 300px; }
.svc-eco-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- ABOUT SPLIT (floating stat card) ---------- */
.svc-about-band { padding-top: 60px; }
.svc-about-head { max-width: 660px; margin: 0 auto 52px; }
.svc-about { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.svc-about-figure { position: relative; }
.svc-about-figure > img { width: 100%; border-radius: 20px; display: block; box-shadow: var(--shadow-md); }
.svc-float-card {
  position: absolute; right: -22px; bottom: -26px; background: #fff; border-radius: 16px;
  padding: 20px 24px; box-shadow: 0 16px 40px rgba(13,19,95,0.16); text-align: center; min-width: 122px;
}
.svc-float-card .stat-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--accent-dark); line-height: 1; }
.svc-float-card .stat-label { display: block; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; line-height: 1.4; }

.svc-ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; list-style: none; padding: 0; margin: 26px 0 0; }
.svc-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.svc-ticks li::before {
  content: "\2713"; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-dark); font-size: 0.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ---------- REVIEWS (dark) ---------- */
.svc-rating-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 40px; max-width: 100%; font-size: 0.92rem; color: #b9c2d6; }
.svc-rating-line strong { color: #fff; font-family: var(--font-head); }
.svc-rating-line .stars { color: var(--accent); letter-spacing: 2px; }
.svc-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-review {
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  padding: 26px 24px; margin: 0; display: flex; flex-direction: column;
}
.svc-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.svc-review-top .stars { color: var(--accent); letter-spacing: 2px; font-size: 0.88rem; }
.svc-review-top .when { font-size: 0.72rem; color: #8f9ab5; }
.svc-review p { color: #dbe2ef; font-size: 0.9rem; line-height: 1.6; margin: 0 0 20px; flex: 1; }
.svc-review-by { display: flex; align-items: center; gap: 11px; }
.svc-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--navy-dark);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 0.88rem; flex-shrink: 0;
}
.svc-review cite { font-style: normal; font-weight: 700; font-family: var(--font-head); color: #fff; font-size: 0.88rem; }

/* ---------- BIG CTA BAND ---------- */
.svc-cta-band {
  background: var(--seafoam-gradient); padding: 76px 0; text-align: center;
}
.svc-cta-band .svc-display { color: var(--navy-dark); }
.svc-cta-band p { color: rgba(13,19,95,0.78); max-width: 560px; margin: 0 auto 30px; font-size: 1.02rem; }
.svc-cta-band .svc-actions { justify-content: center; margin-bottom: 0; }
/* Blue variant — solid navy background instead of the pale seafoam default */
.svc-cta-band.is-dark { background: var(--navy-dark); }
.svc-cta-band.is-dark .svc-display { color: #fff; }
.svc-cta-band.is-dark p { color: rgba(255,255,255,0.78); }
.btn-on-accent { background: var(--navy-dark); color: #fff; }
.btn-on-accent:hover { background: var(--navy); text-decoration: none; }
.btn-on-accent-ghost { background: transparent; border: 1.5px solid rgba(13,19,95,0.45); color: var(--navy-dark); }
.btn-on-accent-ghost:hover { background: rgba(255,255,255,0.35); border-color: var(--navy-dark); text-decoration: none; }

/* ---------- TRUST LOGOS ---------- */
.svc-trust-intro {
  font-family: var(--font-head); font-weight: 700; color: var(--navy);
  font-size: 1.18rem; line-height: 1.5; max-width: 720px; margin: 0 auto 34px;
}
.svc-logos { display: flex; align-items: stretch; justify-content: center; gap: 22px; flex-wrap: wrap; }
.svc-logo-tile {
  background: var(--navy-dark); border-radius: 16px; padding: 22px 34px;
  display: flex; align-items: center; justify-content: center; min-width: 190px;
  box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc-logo-tile img { height: 58px; width: auto; display: block; }

/* ---------- FAQ ---------- */
.svc-faq { max-width: 780px; margin: 0 auto; }
.svc-faq details {
  border-bottom: 1px solid var(--border); padding: 20px 0;
}
.svc-faq summary {
  cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--accent-dark); line-height: 1; flex-shrink: 0; }
.svc-faq details[open] summary::after { content: "\2013"; }
.svc-faq details p { margin: 14px 0 0; color: var(--muted); font-size: 0.93rem; }

/* ---------- RESPONSIVE ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-ring, .svc-stat-chip { animation: none !important; }
  .svc-marquee-track { animation: none !important; }
  .svc-circuit-traces path, .svc-circuit-nodes circle { animation: none !important; }
}
@media (max-width: 980px) {
  .svc-hero > .wrap { padding-left: 40px; padding-right: 40px; }
  .svc-hero-inner, .svc-hero-inner.is-image-left { grid-template-columns: 1fr; gap: 40px; }
  .svc-hero h1 { font-size: 2.5rem; max-width: none; }
  .svc-hero-figure { order: -1; min-height: 300px; }
  .svc-about { grid-template-columns: 1fr; gap: 56px; }
  .svc-offer-band > .wrap { padding-left: 40px; padding-right: 40px; }
  .svc-offer-list { grid-template-columns: repeat(2, 1fr); }
  .svc-offer-band { padding-bottom: 150px; }
  .svc-eco { grid-template-columns: 1fr; margin-top: -108px; }
  .svc-eco-section > .wrap { padding-left: 40px; padding-right: 40px; }
  .svc-eco-body { padding: 40px 32px; }
  .svc-eco-figure { min-height: 260px; order: 2; }
  .svc-about-head { margin-bottom: 40px; }
  .svc-price-grid, .svc-review-grid, .svc-gallery { grid-template-columns: repeat(2, 1fr); }
  .svc-h2 { font-size: 1.9rem; }
  .svc-hero-photo-simple { max-width: none; }
  .svc-steps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .svc-pad { padding: 56px 0; }
  .svc-hero > .wrap { padding-left: 24px; padding-right: 24px; }
  .svc-circuit { opacity: 0.32; }
  .svc-hero h1 { font-size: 2.05rem; }
  .svc-price-grid, .svc-review-grid, .svc-gallery, .svc-ticks, .svc-check-grid { grid-template-columns: 1fr; }
  .svc-trust-strip-inner { gap: 12px 28px; }
  .svc-trust-strip-inner li { font-size: 0.98rem; }
  .svc-photo-row { grid-template-columns: 1fr; gap: 16px; }
  .svc-stat-1 { left: -4%; }
  .svc-stat-2 { right: -4%; }
  .svc-logos { gap: 14px; }
  .svc-logo-tile { padding: 16px 22px; min-width: 0; flex: 1 1 130px; }
  .svc-logo-tile img { height: 40px; }
  .svc-offer-band > .wrap { padding-left: 24px; padding-right: 24px; }
  .svc-offer-list { grid-template-columns: 1fr; }
  .svc-offer-band { padding-bottom: 120px; }
  .svc-eco { margin-top: -80px; }
  .svc-eco-section > .wrap { padding-left: 24px; padding-right: 24px; }
  .svc-eco-body { padding: 34px 24px; }
  .svc-eco-title { font-size: 1.85rem; }
  .svc-eco-list { grid-template-columns: 1fr; }
  .svc-about-band { padding-top: 44px; }
  .svc-slide { flex: 0 0 calc(85% - 9px); }
  .svc-h2 { font-size: 1.6rem; }
}

/* ============================================================
   BLOG  — clean single-column article template + index/category
   card grids. Reuses svc- tokens (colours, display heading,
   eyebrow pill, cta band) for visual consistency with the
   service page template.
   ============================================================ */

/* Blog post hero — full-bleed photo behind the nav, white content card on top.
   ~65vh rather than a full-viewport photo, so the article itself isn't
   pushed below the fold. */
.blog-hero-photo { position: relative; min-height: 65vh; display: flex; align-items: flex-end; overflow: visible; }
.blog-hero-photo-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.blog-hero-photo-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero-photo-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Seafoam colour wash on top of a navy vignette — knocks the photo back
     so it reads as tinted/brand-coloured rather than a plain dark scrim.
     Kept fairly dark throughout so the header nav stays legible over it. */
  background:
    linear-gradient(100deg, rgba(85,164,123,0.4) 0%, rgba(79,128,195,0.4) 100%),
    linear-gradient(180deg, rgba(13,19,95,0.9) 0%, rgba(13,19,95,0.62) 25%, rgba(13,19,95,0.42) 50%, rgba(13,19,95,0.7) 100%);
}
.blog-hero-photo > .wrap { position: relative; z-index: 1; padding: 160px 24px 0; width: 100%; }
.blog-hero-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 30px 34px; max-width: 560px;
  /* Shifts down by exactly half its own (variable) height, so the card's
     centre lands precisely on the hero's bottom edge regardless of content length. */
  transform: translateY(50%);
}
.blog-hero-card .svc-eyebrow { margin-bottom: 0; }
.blog-hero-title {
  font-family: var(--font-head); font-weight: 700; text-transform: none; letter-spacing: normal;
  color: var(--navy-dark); font-size: 1.6rem; line-height: 1.3; margin: 14px 0 16px;
}
.blog-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.blog-back-link { color: var(--navy-dark); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.blog-back-link:hover { color: var(--accent-dark); text-decoration: underline; }

/* Optional icon + dark variant, opt-in per page via heroIcon / heroCardDark frontmatter */
.blog-hero-card-inner { display: flex; align-items: center; gap: 22px; }
.blog-hero-icon { height: 194px; width: auto; flex-shrink: 0; display: block; }
.blog-hero-card.is-dark { background: var(--navy-dark); }
.blog-hero-card.is-dark .svc-eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.blog-hero-card.is-dark .blog-hero-title { color: #fff; }
.blog-hero-card.is-dark .blog-back-link { color: #fff; }
.blog-hero-card.is-dark .blog-back-link:hover { color: var(--accent); }
@media (max-width: 640px) {
  .blog-hero-card-inner { gap: 16px; }
  .blog-hero-icon { height: 132px; }
}

/* Transparent header floating over the photo hero, solidifies once scrolled */
body:has(.blog-hero-photo) .site-header { position: absolute; top: 0; left: 0; width: 100%; background: transparent; box-shadow: none; }
body:has(.blog-hero-photo) .site-header .topbar { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.15); }
body:has(.blog-hero-photo) .site-header.is-scrolled { position: fixed; background: var(--navy); }
body:has(.blog-hero-photo) .site-header.is-scrolled .topbar { background: var(--navy-dark); border-bottom: none; }

@media (max-width: 640px) {
  .blog-hero-photo { min-height: 60vh; }
  .blog-hero-photo > .wrap { padding: 130px 20px 0; }
  .blog-hero-card { padding: 24px 22px; max-width: none; }
  .blog-hero-title { font-size: 1.35rem; }
}

/* Extra clearance below the hero so the overlapping card doesn't crowd the
   first line of the article. */
.blog-hero-photo + .svc-included-band { padding-top: 150px; }
@media (max-width: 640px) {
  .blog-hero-photo + .svc-included-band { padding-top: 130px; }
}

/* Article body — now the left column of the same included-band/sidebar
   layout used on service and location pages, so no standalone max-width. */
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose p { font-size: 1.06rem; line-height: 1.8; color: var(--text); margin: 0 0 22px; }
.blog-prose h2 {
  font-family: var(--font-head); font-weight: 800; color: var(--navy-dark); font-size: 1.55rem;
  margin: 48px 0 18px; line-height: 1.25;
}
.blog-prose h3 {
  font-family: var(--font-head); font-weight: 700; color: var(--navy-dark); font-size: 1.18rem;
  margin: 32px 0 14px;
}
.blog-prose ul, .blog-prose ol { margin: 0 0 22px; padding-left: 1.3em; }
.blog-prose li { font-size: 1.02rem; line-height: 1.75; color: var(--text); margin-bottom: 8px; }
.blog-prose strong { color: var(--navy-dark); }
.blog-prose a { color: var(--accent-dark); text-decoration: underline; }
.blog-prose a:hover { color: var(--navy-dark); }
.blog-prose hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.blog-prose img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-md); margin: 0 0 22px; }
.blog-prose blockquote {
  margin: 30px 0; padding: 20px 26px; background: var(--seafoam-gradient); border-left: 4px solid var(--accent-dark);
  border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--navy-dark);
}
.blog-prose blockquote p { margin: 0; font-size: 1.05rem; }
.blog-prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 0.95rem;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.blog-prose th, .blog-prose td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.blog-prose th { background: var(--navy-dark); color: #fff; font-family: var(--font-head); font-weight: 700; }
.blog-prose tr:last-child td { border-bottom: none; }
.blog-prose tr:nth-child(even) td { background: var(--accent-tint); }

@media (max-width: 640px) {
  .blog-prose { padding: 40px 0; }
  .blog-prose table { display: block; overflow-x: auto; }
}

/* Blog index / category card grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 20px 22px 24px; }
.blog-card-cat {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 10px;
}
.blog-card h3 {
  font-family: var(--font-head); font-weight: 700; color: var(--navy-dark); font-size: 1.08rem;
  line-height: 1.35; margin: 0 0 10px;
}
.blog-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* Homepage blog teaser — reuses the .blog-grid/.blog-card component */
.home-blog-band { padding: 64px 0; background: var(--seafoam-gradient-soft); }
.home-blog-head { text-align: center; margin-bottom: 40px; }
.home-blog-cta { text-align: center; margin-top: 36px; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }

.contact-cards { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.contact-card-icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.contact-card-main { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0 0 4px; }
.contact-card-main a { color: var(--navy); }
.contact-card-main a:hover { color: var(--accent-dark); }
.contact-card p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.contact-card-link { font-weight: 700; color: var(--accent-dark); font-size: 0.88rem; display: inline-block; margin-top: 6px; }
.contact-card-link:hover { color: var(--navy); }

.contact-hours { list-style: none; margin: 0; padding: 0; }
.contact-hours li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; color: var(--text); }
.contact-hours li.is-closed { color: var(--muted); }
.contact-hours li span:first-child { font-weight: 600; }

.contact-form-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 36px 38px;
}
.contact-form-card h2 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--navy); margin: 0 0 10px; font-size: 1.4rem; }
.contact-form-card > p { color: var(--muted); margin: 0 0 26px; }

.contact-form-grid { display: grid; gap: 18px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form-grid label {
  display: block; font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 6px;
}
.contact-form-grid input, .contact-form-grid select, .contact-form-grid textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.96rem;
  font-family: var(--font-body); background: #f6fbfc; transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-form-grid input:focus, .contact-form-grid select:focus, .contact-form-grid textarea:focus {
  outline: none; border-color: var(--accent-dark); background: #fff;
}
.contact-form-grid textarea { resize: vertical; min-height: 120px; }
.contact-form-submit { width: 100%; justify-content: center; margin-top: 4px; }
.contact-form-note { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 12px 0 0; }

.contact-map-wrap { position: relative; max-width: 1160px; margin: 0 auto; }
.contact-map-wrap .map-embed { height: 420px; }
.contact-map-link {
  position: absolute; top: 16px; left: 16px; z-index: 2; background: #fff; color: var(--navy);
  font-weight: 700; font-size: 0.85rem; padding: 9px 16px; border-radius: 8px; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: 6px;
}
.contact-map-link:hover { color: var(--accent-dark); text-decoration: none; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 28px 24px; }
  .contact-map-wrap .map-embed { height: 300px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Hero photo (rounded rectangle, not the circular svc-ring) */
.about-hero-figure img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; }
.about-cert-row { display: flex; align-items: center; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.about-cert-row img { height: 40px; width: auto; object-fit: contain; opacity: 0.92; }

/* Stats band */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; text-align: center; }
.about-stats li { display: flex; flex-direction: column; }
.about-stats .stat-num { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; color: var(--navy-dark); line-height: 1; }
.about-stats .stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 8px; }

/* Homepage stats — centred cluster with subtle dividers, large but light numbers */
.home-stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
  max-width: 800px; margin: 0 auto;
}
.home-stats li { position: relative; padding: 0 44px; }
.home-stats li:first-child { padding-left: 0; }
.home-stats li:last-child { padding-right: 0; }
.home-stats li + li::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: rgba(13,19,95,0.16);
}
.home-stats .stat-num { font-size: 3.1rem; font-weight: 600; color: rgba(13,19,95,0.78); }
.home-stats .stat-label { font-weight: 600; }
@media (max-width: 700px) {
  /* Switch to grid here — flex-basis:50% on these items was wrapping to
     one per row regardless of available width, so grid replaces it with
     an explicit, predictable 2-column layout. */
  .home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; max-width: 420px; }
  .home-stats li { padding: 0; }
  .home-stats li + li::before { display: none; }
}

/* Timeline */
.about-timeline { display: flex; justify-content: space-between; position: relative; margin-top: 48px; gap: 20px; }
.about-timeline::before { content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 2px; background: var(--border); z-index: 0; }
.about-timeline-item { position: relative; z-index: 1; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.about-timeline-year {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800;
  font-size: 0.82rem; margin-bottom: 18px; box-shadow: 0 0 0 6px #fff;
}
.about-timeline-item h3 { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1rem; margin: 0 0 8px; }
.about-timeline-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; margin: 0; max-width: 220px; }

/* Trust cards (3-up) */
.trust-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 100px; }
.trust-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 28px; text-align: center; box-shadow: var(--shadow-sm); }
/* Dark tile, not the seafoam gradient — same treatment as the logo tiles
   elsewhere on the site, needed because these logo files are white/transparent
   (designed to sit on a dark background) and would vanish on pale mint.
   Negative top margin lifts it so it straddles the card's top edge — half
   floating above the card, half sitting inside it. */
.trust-card-icon {
  width: 100px; height: 100px; border-radius: 22px; background: var(--navy-dark);
  display: flex; align-items: center; justify-content: center;
  margin: -84px auto 22px; padding: 16px; box-shadow: var(--shadow-md);
  position: relative; z-index: 1;
}
.trust-card-icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.trust-card h3 { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0 0 10px; }
.trust-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 16px; }
.trust-card a { font-weight: 700; color: var(--accent-dark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.trust-card a:hover { color: var(--navy); }

/* ---------- SERVICES SHOWCASE GRID ----------
   8-up grid: square photo on top, title always visible, description
   reveals on hover (desktop) by shrinking the image slightly and sliding
   the title up. On touch devices (no real hover) the description is just
   always shown. Card 8 is a distinct full-bleed CTA tile. */
.services-intro { text-align: center; max-width: 560px; margin: 0 auto; }
@media (min-width: 700px) {
  .services-intro { max-width: none; white-space: nowrap; }
}
.showcase-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  list-style: none; padding: 0; margin: 0;
}
.showcase-grid > li { min-width: 0; }
.showcase-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s ease;
}
.showcase-card:hover, .showcase-card:focus-visible { box-shadow: var(--shadow-md); text-decoration: none; }

.showcase-media-pad { padding: 8px; }
.showcase-media-frame { position: relative; aspect-ratio: 1 / 1; }
.showcase-media-inner {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: 12px; overflow: hidden;
}
.showcase-media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.showcase-text-row { position: relative; flex: 1; display: flex; align-items: center; padding: 0 16px; }
.showcase-text-inner { position: relative; width: 100%; min-width: 0; }
.showcase-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0 10px; }
.showcase-icon { flex-shrink: 0; width: 19px; height: 19px; color: var(--accent-dark); }
.showcase-icon svg { width: 100%; height: 100%; display: block; }
.showcase-text-inner h3 {
  font-family: var(--font-head); font-weight: 700; color: var(--navy-dark); font-size: 0.98rem;
  margin: 0; min-width: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showcase-text-inner p {
  position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0; color: var(--muted);
  font-size: 0.82rem; line-height: 1.5; opacity: 0;
}

/* Hover-reveal, desktop only (genuine hover support) */
@media (hover: hover) and (pointer: fine) {
  .showcase-media-inner {
    transition: height 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .showcase-card:hover .showcase-media-inner,
  .showcase-card:focus-within .showcase-media-inner { height: calc(100% - 50px); }
  .showcase-text-inner {
    transform: translateY(0);
    transition: transform 0.25s ease-out;
  }
  .showcase-card:hover .showcase-text-inner,
  .showcase-card:focus-within .showcase-text-inner { transform: translateY(-50px); }
  .showcase-text-inner p { transition: opacity 0.25s ease-out 0.1s; }
  .showcase-card:hover .showcase-text-inner p,
  .showcase-card:focus-within .showcase-text-inner p { opacity: 1; }
}
/* Touch / no-hover — description always visible, laid out in normal flow */
@media not all and (hover: hover) {
  .showcase-text-inner p { position: static; opacity: 1; margin-top: 6px; }
}

/* Card 8 — solid-colour CTA tile, no photo, distinct treatment */
.showcase-card-cta { background: var(--navy-dark); justify-content: center; align-items: center; }
.showcase-cta-body {
  position: relative; margin: auto; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px; text-align: center;
}
.showcase-cta-body h3 { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0; }
.showcase-cta-arrow {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
}
.showcase-card-cta:hover .showcase-cta-arrow, .showcase-card-cta:focus-visible .showcase-cta-arrow {
  transform: translateX(3px); background: rgba(255,255,255,0.24);
}

@media (min-width: 700px) {
  .showcase-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Renewables promo panels — deliberately a different, more graphical
   treatment to the plain white service cards above: full-bleed photo,
   gradient-scrim text, hover zoom. First pass — to be refined further. */
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.promo-panel {
  position: relative; display: block; min-height: 380px; border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none;
}
.promo-panel:hover, .promo-panel:focus { text-decoration: none; }
.promo-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.promo-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,19,95,0) 28%, rgba(13,19,95,0.82) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .promo-panel:hover img { transform: scale(1.07); }
}
.promo-panel-body {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px; min-height: 380px;
}
.promo-panel-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--seafoam-gradient);
  color: var(--navy-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.promo-panel-icon svg { width: 24px; height: 24px; }
.promo-panel-body h3 { color: #fff; font-family: var(--font-head); font-size: 1.5rem; margin: 0 0 8px; }
.promo-panel-body p { color: rgba(255,255,255,0.85); margin: 0 0 18px; font-size: 0.95rem; }
.promo-panel-cta {
  display: inline-flex; align-items: center; gap: 8px; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
}
.promo-panel-cta svg { transition: transform 0.2s ease; }
.promo-panel:hover .promo-panel-cta svg { transform: translateX(3px); }
@media (max-width: 800px) {
  .promo-grid { grid-template-columns: 1fr; }
  .promo-panel, .promo-panel-body { min-height: 300px; }
}

@media (max-width: 900px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .about-hero-figure img { height: 260px; }
  .about-timeline { flex-direction: column; align-items: flex-start; gap: 28px; }
  .about-timeline::before { top: 0; bottom: 0; left: 22px; right: auto; width: 2px; height: auto; }
  .about-timeline-item { flex-direction: row; text-align: left; align-items: flex-start; gap: 18px; }
  .about-timeline-item p { max-width: none; }
  .about-timeline-year { margin-bottom: 0; }
  .trust-cards { grid-template-columns: 1fr; }
}