/* ==========================================================================
   Wingate's Air Conditioning - redesign v2
   Design system: Wingate navy + maroon, Fraunces display, Inter body.
   Editorial split hero, marquee ticker, numbered service tiles,
   floating CTA card. Section order follows the ADS master design brief.
   ========================================================================== */

/* 1. Reset & Box-Sizing
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* 2. CSS Custom Properties
   ========================================================================== */
:root {
  /* Brand */
  --color-primary:       #8e1f2c;   /* Wingate maroon (logo wordmark, van lettering) */
  --color-primary-dark:  #701622;
  --color-secondary:     #1d3a8f;   /* Wingate royal blue */
  --color-accent:        #b23140;   /* lighter maroon for eyebrows/underlines */

  /* Text */
  --color-text:          #232a3d;
  --color-text-muted:    #5d6478;
  --color-text-inverse:  #ffffff;
  --color-heading:       #101b3c;

  /* Backgrounds */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f4f6fa;
  --color-bg-tint:       #e9eef7;
  --color-bg-dark:       #0c1734;
  --color-bg-card:       #ffffff;

  /* Borders */
  --color-border:        #e5e8f0;
  --color-border-strong: #d1d6e0;

  /* Buttons */
  --btn-primary-bg:      var(--color-primary);
  --btn-primary-text:    #ffffff;
  --btn-primary-hover:   var(--color-primary-dark);
  --btn-ghost-border:    var(--color-heading);
  --btn-ghost-text:      var(--color-heading);

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

  /* Chrome */
  --utility-h: 44px;
  --header-h: 84px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 2px 10px rgba(16, 27, 60, 0.06);
  --shadow-card-hover: 0 14px 40px rgba(16, 27, 60, 0.14);
  --shadow-float: 0 24px 70px rgba(16, 27, 60, 0.18);
}

/* 3. Base Styles
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 4. Typography
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.1;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(37px, 4.8vw, 62px); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: clamp(28px, 3.3vw, 43px); font-weight: 700; letter-spacing: -0.028em; }
h3 { font-size: clamp(21px, 2vw, 25px); letter-spacing: -0.018em; }
h4 { font-size: 18px; letter-spacing: -0.012em; }
p  { max-width: 68ch; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.on-dark .section-label { color: #e9aeb5; }
.on-dark .section-label::before { background: #e9aeb5; }

.section-heading { margin-bottom: 18px; }
.section-subtitle { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-center .section-label { justify-content: center; }
.text-center p { margin-left: auto; margin-right: auto; }

/* Airz-style split section header: heading left, blurb + link right */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 56px;
}
.split-head .section-heading { margin-bottom: 0; }
.split-head-side { padding-bottom: 8px; display: flex; justify-content: flex-end; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.text-link:hover { border-color: var(--color-primary); gap: 12px; }
.text-link svg { width: 16px; height: 16px; }

/* 5. Layout
   ========================================================================== */
.container        { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px;  margin: 0 auto; padding: 0 24px; }
.section-pad      { padding: 104px 0; }
.bg-alt           { background: var(--color-bg-alt); }
.bg-dark          { background: var(--color-bg-dark); }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #ffffff; }
.on-dark { color: #c6cde0; }

/* 6. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  box-shadow: 0 10px 26px rgba(142, 31, 44, 0.28);
}
.btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); transform: translateY(-2px); }
.btn-ghost {
  border-color: var(--color-border-strong);
  color: var(--btn-ghost-text);
  background: #fff;
}
.btn-ghost:hover { border-color: var(--color-heading); transform: translateY(-2px); }
.btn-ghost.on-photo { border-color: rgba(255,255,255,0.85); color: #fff; background: transparent; }
.btn-ghost.on-photo:hover { background: #fff; color: var(--color-heading); }
.btn-full { width: 100%; border-radius: 10px; }

/* US flag mark (brand-toned) */
.flag-mark { width: 22px; height: 15px; border-radius: 3px; flex: none; }

/* 7. Utility Bar
   ========================================================================== */
.utility-bar {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: var(--utility-h);
  background: var(--color-bg-dark);
  color: #c6cde0;
  font-size: 14px;
  z-index: 999;                       /* always BELOW the sticky header */
  transition: transform 0.3s ease, opacity 0.25s ease;
  will-change: transform;
}
/* Slides up out of the way the moment the page scrolls, so it can never
   overlap the sticky header. */
.utility-bar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.utility-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}
.utility-bar a, .utility-bar span { display: inline-flex; align-items: center; gap: 8px; }
.utility-bar svg { width: 15px; height: 15px; color: #8fa0cc; }
.utility-phone { font-weight: 600; color: #fff; }
.utility-phone:hover { color: #e9aeb5; }

/* 8. Header & Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: var(--utility-h);
  left: 0; width: 100%;
  background: #ffffff;
  z-index: 1000;
  border-bottom: 1px solid var(--color-border);
  transition: top 0.3s ease, box-shadow 0.25s ease, height 0.25s ease;
}
.site-header.docked { top: 0; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(16, 27, 60, 0.10); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 24px;
}
.header-logo img { height: 56px; width: auto; }
.header-nav { display: flex; align-items: center; gap: 2px; }
.header-nav > li { position: relative; }
.header-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--color-heading);
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.header-nav > li > a:hover, .header-nav > li > a[aria-current="page"] { color: var(--color-primary); }
.header-nav .caret { width: 12px; height: 12px; transition: transform 0.2s ease; }
.header-nav li.open > a .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%; left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 27, 60, 0.16);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.18s ease;
  z-index: 1002;
}
.header-nav li:hover > .dropdown,
.header-nav li.open > .dropdown { opacity: 1; visibility: visible; transform: translateY(4px); }
.dropdown a { display: block; padding: 10px 14px; font-size: 15px; border-radius: 9px; }
.dropdown a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.header-cta { display: inline-flex; }
.header-cta .btn { padding: 12px 24px; font-size: 15px; }

.mobile-menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--color-heading);
}
.mobile-menu-toggle svg { width: 26px; height: 26px; }
.mobile-menu-toggle .icon-close { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 999;
  padding: 110px 24px 40px;
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 6px;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav .caret { width: 16px; height: 16px; transition: transform 0.2s ease; }
.mobile-nav li.open > a .caret { transform: rotate(180deg); }
.mobile-sub { display: none; padding-left: 14px; }
.mobile-nav li.open > .mobile-sub { display: block; }
.mobile-sub a { font-family: var(--font-body); font-size: 16px; font-weight: 500; padding: 12px 6px; }
.mobile-nav .btn {
  /* .mobile-nav a is a list-row rule (left-aligned, split, bottom border,
     dark heading colour). It was winning over .btn and leaving the CTA with
     navy text on maroon at 1.92:1. Reassert the button's own styling. */
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 16px 22px;
  color: var(--btn-primary-text);
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
}
.mobile-nav .btn.btn-primary:hover,
.mobile-nav .btn.btn-primary:focus-visible { background: var(--btn-primary-hover); }

/* 9. Hero (editorial split)
   ========================================================================== */
.hero-split {
  position: relative;
  background:
    radial-gradient(720px 520px at 86% 18%, rgba(29, 58, 143, 0.10), rgba(29, 58, 143, 0) 68%),
    radial-gradient(560px 480px at 70% 92%, rgba(142, 31, 44, 0.07), rgba(142, 31, 44, 0) 70%),
    linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
  padding: calc(var(--utility-h) + var(--header-h) + 72px) 0 96px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 18px 9px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-heading);
  box-shadow: var(--shadow-card);
  margin-bottom: 26px;
}
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy h1 em {
  font-style: normal;
  color: var(--color-primary);
}
.hero-subtitle { color: var(--color-text-muted); font-size: 17.5px; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  font-size: 14.5px;
  color: var(--color-text-muted);
}
.hero-trust .stars { color: #e8a33d; letter-spacing: 2px; font-size: 15px; }
.hero-trust strong { color: var(--color-heading); font-weight: 600; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 17px; height: 17px; color: var(--color-primary); }

.hero-visual { position: relative; padding: 0 0 72px 56px; }
.hero-photo-main {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.hero-photo-inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;               /* large enough to read the technician's face */
  border-radius: var(--radius);
  border: 6px solid #fff;
  box-shadow: var(--shadow-float);
}
.hero-chip {
  position: absolute;
  top: 26px;
  right: -14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-dark);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-float);
}
.hero-chip small { display: block; font-weight: 400; color: #aab3cc; font-size: 11.5px; line-height: 1.3; }

/* 10. Marquee ticker
   ========================================================================== */
.marquee-section {
  background: var(--color-bg-dark);
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: scroll-marquee 34s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes scroll-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 44px;
  color: #e8ecf6;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
}
.marquee-item svg { width: 14px; height: 14px; color: var(--color-accent); flex: none; }

/* 11a. Services (numbered editorial tiles)
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.service-tile { display: flex; flex-direction: column; }
.service-tile-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.service-tile-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.service-tile:hover .service-tile-media img { transform: scale(1.05); }
.service-tile-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 15, 38, 0.55) 0%, rgba(8, 15, 38, 0) 42%);
}
.service-tile-num {
  position: absolute;
  left: 20px; bottom: 12px;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: #fff;
  opacity: 0.9;
  line-height: 1;
}
.service-tile h3 { margin-bottom: 10px; }
.service-tile p { color: var(--color-text-muted); font-size: 15.5px; margin-bottom: 14px; flex: 1; }

/* 11b. About
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.about-media { position: relative; padding-bottom: 44px; }
.about-media > img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  width: 100%;
}
.about-badge {
  position: absolute;
  right: 22px;
  bottom: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-border);
}
.about-badge .flag-mark { width: 30px; height: 20px; border-radius: 4px; }
.about-badge-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--color-heading); line-height: 1.3; }
.about-badge-sub { font-size: 12.5px; color: var(--color-text-muted); }
.about-rating {
  position: absolute;
  left: -18px;
  top: 26px;
  background: var(--color-bg-dark);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  padding: 14px 18px;
  text-align: center;
}
.about-rating-score { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.about-rating .stars { color: #e8a33d; font-size: 12px; letter-spacing: 1.5px; }
.about-rating small { display: block; color: #aab3cc; font-size: 11px; margin-top: 2px; }
.about-content .subheading {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 21px);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 18px;
}
.about-content p { color: var(--color-text-muted); margin-bottom: 16px; }
.about-content p a { color: var(--color-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.about-content .btn { margin-top: 12px; }

/* 11c. Residential / Commercial split panels
   ========================================================================== */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.duo-panel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
}
.duo-panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.duo-panel:hover img { transform: scale(1.04); }
.duo-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 15, 38, 0.86) 0%, rgba(8, 15, 38, 0.24) 55%, rgba(8, 15, 38, 0.05) 100%);
}
.duo-content { position: relative; z-index: 1; padding: 36px; }
.duo-content h3 { color: #fff; margin-bottom: 16px; font-size: clamp(23px, 2.3vw, 30px); }

/* 11d. Floating CTA card
   ========================================================================== */
.cta-float {
  position: relative;
  padding: 104px 0;
}
.cta-float::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%; bottom: 0;
  background: var(--color-bg-dark);
}
.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.cta-card-body { padding: 64px; }
.cta-card-body p { color: var(--color-text-muted); margin-bottom: 14px; }
.cta-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 28px; }
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 30px);
  color: var(--color-heading);
}
.cta-phone svg { width: 26px; height: 26px; color: var(--color-primary); }
.cta-phone:hover { color: var(--color-primary); }
.cta-card-media { position: relative; min-height: 340px; }
.cta-card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 11e. Reviews
   ========================================================================== */
.reviews-section { background: var(--color-bg-tint); position: relative; overflow: hidden; }
/* The reviews carousel is a shared partial, so on pages where the section
   above it is already tinted it drops back to white to keep the
   light/tinted rhythm going. */
.section-pad.bg-alt + .reviews-section { background: var(--color-bg); }
/* Page-level opt-in for a white reviews band (mulat-avalon-fl). The cards
   are built by main.js, so they are tinted here rather than inline, or
   they would be white on white. */
.reviews-section.reviews-section--white { background: var(--color-bg); }
.reviews-section--white .testimonial-card { background: var(--color-bg-alt); }
.reviews-section::before {
  content: "\201C";
  position: absolute;
  top: -60px; right: 40px;
  font-family: var(--font-display);
  font-size: 460px;
  line-height: 1;
  color: rgba(29, 58, 143, 0.07);
  pointer-events: none;
}
.reviews-track-wrap { position: relative; }
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 56px) / 3);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 24px;
}
.reviews-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(229, 232, 240, 0.7);
}
.testimonial-quote { width: 30px; height: 30px; color: var(--color-primary); opacity: 0.55; }
.testimonial-stars { color: #e8a33d; letter-spacing: 3px; font-size: 15px; }
/* Every quote reserves exactly five lines so the cards stay the same size
   whether the review is two sentences or ten. The toggle row is always
   present (invisible on short quotes) so the author block lines up too. */
.testimonial-text {
  color: var(--color-text);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
  min-height: calc(5 * 1.7em);
}
.testimonial-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 21px;
  margin-top: -2px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  transition: color 0.15s ease;
}
.testimonial-more:hover { color: var(--color-primary-dark); }
.testimonial-more::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.22s ease;
}
.testimonial-more.is-open::after { transform: translateY(1px) rotate(-135deg); }
.testimonial-more.is-empty { visibility: hidden; pointer-events: none; }
.testimonial-spacer { flex: 1; }
.testimonial-author { font-weight: 600; color: var(--color-heading); font-size: 15px; }
.testimonial-source { font-size: 13px; color: var(--color-text-muted); }
.reviews-nav { display: flex; gap: 12px; }
.reviews-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-heading);
  transition: all 0.2s ease;
  font-size: 20px;
  line-height: 1;
}
.reviews-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 11f. Areas we serve
   ========================================================================== */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.area-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 18px 26px;
  font-weight: 600;
  color: var(--color-heading);
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}
.area-card svg { width: 19px; height: 19px; color: var(--color-primary); flex: none; }
.area-card:hover,
.area-card.hl { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); color: var(--color-primary); border-color: rgba(142,31,44,0.42); }
.area-card.hl svg { color: var(--color-accent); }

/* 11g. FAQ
   ========================================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;              /* copy sits centred against the photo */
}
.faq-grid-tall { align-items: start; }
.faq-grid-tall .faq-media { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-media { position: relative; }
.faq-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-float); width: 100%; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.faq-item[open] { box-shadow: var(--shadow-card-hover); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 26px;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  color: var(--color-primary);
  flex: none;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer { padding: 0 26px 22px; color: var(--color-text-muted); }
.faq-cta { margin-top: 26px; }

/* 11h. Blog cards
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card { display: flex; flex-direction: column; }
.blog-card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 20px;
  display: block;
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card h3 { font-size: 20px; line-height: 1.35; margin-bottom: 12px; }
.blog-card h3 a:hover { color: var(--color-primary); }

/* 12. Footer
   ========================================================================== */
.site-footer { color: #aab3cc; font-size: 15px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 84px 0 56px;
}
.footer-logo img { height: 62px; width: auto; margin-bottom: 20px; }
.footer-tagline { margin-bottom: 20px; }
.footer-flag { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: #d6dbeb; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.2s ease;
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.footer-contact svg { width: 17px; height: 17px; color: #e9aeb5; flex: none; margin-top: 4px; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.footer-license { color: #d6dbeb; font-weight: 500; }

/* 13. Forms & contact section (v2: dark immersive split)
   ========================================================================== */
.contact-v2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, #101f47 0%, #0a1230 58%, #0c1734 100%);
  color: #c4d0ea;
  padding: 104px 0 108px;
}
.contact-v2-glow {
  position: absolute;
  inset: -25% -10% auto -20%;
  height: 620px;
  z-index: -1;
  background:
    radial-gradient(46% 58% at 18% 30%, rgba(142, 31, 44, 0.42) 0%, rgba(142, 31, 44, 0) 68%),
    radial-gradient(40% 52% at 82% 12%, rgba(29, 58, 143, 0.48) 0%, rgba(29, 58, 143, 0) 70%);
  pointer-events: none;
}
.contact-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  pointer-events: none;
}
.contact-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}

/* --- left rail --- */
.section-label.on-dark { color: #e6a2ac; }
.section-label.on-dark::before { background: #e6a2ac; }
.contact-v2-heading {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 42px);
  margin: 16px 0 34px;
  max-width: 17ch;
}

/* Oversized click-to-call block */
.contact-call {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(142, 31, 44, 0.30), rgba(142, 31, 44, 0.12));
  border: 1px solid rgba(233, 174, 181, 0.28);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.contact-call:hover {
  transform: translateY(-3px);
  border-color: rgba(233, 174, 181, 0.6);
  background: linear-gradient(120deg, rgba(142, 31, 44, 0.44), rgba(142, 31, 44, 0.18));
}
.contact-call-icon {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(142, 31, 44, 0.9);
}
.contact-call-icon svg { width: 23px; height: 23px; }
.contact-call-text { display: block; }
.contact-call-text small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e2aeb6;
  margin-bottom: 3px;
}
.contact-call-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 29px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.contact-call-go { margin-left: auto; color: #e2aeb6; display: inline-flex; transition: transform 0.22s ease; }
.contact-call-go svg { width: 20px; height: 20px; }
.contact-call:hover .contact-call-go { transform: translateX(5px); }

/* Hairline detail rows, no boxes */
.contact-rows { list-style: none; margin: 34px 0 0; padding: 0; }
.contact-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.contact-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.contact-row-icon {
  width: 22px; height: 22px;
  flex: none;
  color: #8fa4d4;
  margin-top: 2px;
}
.contact-row-icon svg { width: 22px; height: 22px; }
.contact-row-body { display: block; }
.contact-row-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7f92c0;
  margin-bottom: 6px;
}
.contact-row-body a,
.contact-row-body p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.45;
  margin: 0;
}
.contact-row-body a:hover { color: #e9aeb5; }
.contact-row-note {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: #93a5cd;
  margin-top: 4px;
}

/* --- right: elevated form card --- */
.contact-form-card {
  background: #fff;
  /* .contact-v2 is the dark split section and sets color:#c4d0ea for text on
     navy. This card is white, so any descendant that does not set its own
     colour inherits pale blue on white -- which is what made typed form input
     almost invisible. Reset the card to normal body text. */
  color: var(--color-text);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px -32px rgba(3, 8, 24, 0.75), 0 2px 8px rgba(3, 8, 24, 0.25);
}
.contact-form-head {
  padding: 28px 38px 24px;
  background: linear-gradient(115deg, var(--color-primary) 0%, #a5283a 55%, var(--color-primary-dark) 100%);
  color: #fff;
}
.contact-form-head h3 { color: #fff; margin-bottom: 5px; }
.contact-form-head p { color: rgba(255, 255, 255, 0.82); font-size: 15px; margin: 0; max-width: none; }
.contact-form-body { padding: 32px 38px 34px; }
.contact-form-foot {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: none;
}
.contact-form-foot a { font-weight: 600; color: var(--color-primary); }
.contact-form-foot a:hover { text-decoration: underline; }

/* --- shared form controls --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}
.form-group input,
.form-group textarea {
  /* Set explicitly rather than left to inherit -- the base reset hands these
     controls their ancestor's colour, which is how the dark section's pale
     blue reached the fields. */
  color: var(--color-text);
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: #f7f9fc;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(29, 58, 143, 0.12);
}
.form-group textarea { resize: vertical; }
/* Now that the fields carry a real colour, pin the placeholder too, or typed
   text and placeholder look alike. opacity:1 undoes the Firefox default, which
   would otherwise fade this a second time. */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
.honey-row { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --- Services hub: full-bleed numbered image tiles --- */
.svc-showcase-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.svc-showcase-head h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.6vw, 50px);
  max-width: 14ch;
}
.svc-showcase-aside { text-align: right; }
.svc-showcase-aside p {
  margin: 0 0 22px auto;
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: 16.5px;
}
.svc-showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--color-heading);
}
.svc-showcase-link svg { width: 17px; height: 17px; transition: transform 0.22s ease; }
.svc-showcase-link:hover { color: var(--color-primary); }
.svc-showcase-link:hover svg { transform: translate(3px, -3px); }

/* edge-to-edge strip, hairline gaps like the reference */
.svc-showcase-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: var(--color-bg);
  width: 100%;
}
.svc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-height: 400px;
  /* aspect-ratio resolves against whichever axis is definite. min-height makes
     the height definite at 400px, so the ratio sized the WIDTH to 400px too and
     every tile overflowed its track -- the strip ran 114px past a 1440 viewport
     and 33px past a 375 one, on the one page the redesign is built around.
     An explicit width makes the inline axis definite instead, so the track sets
     the width and the ratio only drives height, with min-height still holding
     the 400px floor. min-width guards the item the way minmax(0, 1fr) already
     guards the tracks. */
  width: 100%;
  min-width: 0;
  background: var(--color-bg-dark);
  isolation: isolate;
}
.svc-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.svc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 15, 38, 0.94) 0%, rgba(8, 15, 38, 0.78) 22%, rgba(8, 15, 38, 0.42) 48%, rgba(8, 15, 38, 0.10) 74%, rgba(8, 15, 38, 0) 100%);
  transition: opacity 0.3s ease;
}
.svc-tile:hover img { transform: scale(1.07); }
.svc-tile:hover::after { opacity: 0.88; }
.svc-tile-caption {
  position: absolute;
  left: 26px; right: 22px; bottom: 24px;
  z-index: 1;
  color: #fff;
}
.svc-tile-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}
.svc-tile-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.svc-tile-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #f0b9c1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.svc-tile-go svg { width: 13px; height: 13px; }
.svc-tile:hover .svc-tile-go,
.svc-tile:focus-visible .svc-tile-go { opacity: 1; transform: translateY(0); }

@media (max-width: 1200px) {
  .svc-showcase-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .svc-showcase-head { grid-template-columns: 1fr; gap: 26px; align-items: start; margin-bottom: 38px; }
  .svc-showcase-aside { text-align: left; }
  .svc-showcase-aside p { margin-left: 0; }
  .svc-showcase-head h2 { max-width: 18ch; }
  .svc-showcase-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-tile-caption { left: 18px; right: 16px; bottom: 18px; }
}
@media (max-width: 520px) {
  .svc-showcase-strip { grid-template-columns: 1fr; }
  .svc-tile { aspect-ratio: 4 / 3; }
}

/* Callout band with a photo on the right (About page) */
.callout-band-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: 48px;
  align-items: center;
}
.callout-band-split .callout-band-copy > *:last-child { margin-bottom: 0; }
.callout-band-media img {
  width: 100%;
  border-radius: 18px;
  display: block;
  box-shadow: 0 26px 50px -26px rgba(3, 8, 24, 0.8);
}
.callout-band-split.band-media-fill { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr); }
.callout-band-split.band-media-fill.media-left { grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr); }
.callout-band-split.band-media-fill .callout-band-media { display: flex; }
.callout-band-split.band-media-fill .callout-band-media img { height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .callout-band-split { grid-template-columns: 1fr; gap: 30px; }
  .callout-band-split.band-media-fill { grid-template-columns: 1fr; }
  .callout-band-split.band-media-fill.media-left { grid-template-columns: 1fr; }
  .callout-band-media { max-width: 420px; }
  .callout-band-split.band-media-fill .callout-band-media img { height: auto; }
  .callout-band-split.media-left .callout-band-media { order: 2; }
  .callout-band-split.media-left .callout-band-copy { order: 1; }
}

/* 14. GMB map
   ========================================================================== */
.gmb-map-section iframe { width: 100%; height: 400px; border: 0; display: block; filter: saturate(0.92); }
.gmb-map-note { margin: 14px 0 0; text-align: center; font-size: 14.5px; }
.gmb-map-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gmb-map-section { padding-bottom: 18px; }

/* ==========================================================================
   SUB-PAGE TEMPLATES
   ========================================================================== */

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 22px;
}
.breadcrumbs a { opacity: 0.75; transition: opacity 0.15s ease; }
.breadcrumbs a:hover { opacity: 1; }
.breadcrumbs .sep { opacity: 0.45; }
.breadcrumbs .current { opacity: 1; font-weight: 600; }

/* --- Service page hero (dark split) --- */
.svc-hero {
  background:
    radial-gradient(680px 420px at 88% 100%, rgba(142, 31, 44, 0.22), rgba(142, 31, 44, 0) 65%),
    radial-gradient(600px 420px at 10% 0%, rgba(29, 58, 143, 0.30), rgba(29, 58, 143, 0) 62%),
    var(--color-bg-dark);
  color: #c6cde0;
  padding: calc(var(--utility-h) + var(--header-h) + 64px) 0 0;
  position: relative;
  z-index: 3;
}
.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}
.svc-hero-copy { padding-bottom: 88px; }
.svc-hero-copy .breadcrumbs { color: #aab3cc; }
.svc-hero-copy h1 { color: #fff; margin-bottom: 20px; font-size: clamp(34px, 4vw, 54px); }
/* Second line of a service H1: its own block so it keeps a tight leading
   instead of inheriting the H1 line box. */
h1 .h1-sub {
  display: block;
  margin-top: 12px;
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #aab3cc;
}
h1 .h1-sub.on-light { color: var(--color-text-muted); }
.svc-hero-copy .lede { color: #c6cde0; margin-bottom: 30px; }
.svc-hero-copy .lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-hero-media { position: relative; align-self: end; z-index: 10; margin-bottom: -76px; }
.svc-hero + .section-pad { padding-top: 152px; }
.svc-hero-media img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  display: block;
}
.svc-hero-media .hero-chip { top: 22px; right: 20px; background: #fff; color: var(--color-heading); }
.svc-hero-media .hero-chip small { color: var(--color-text-muted); }

/* --- Icon checklist (verbatim li items) --- */
.icon-list { display: grid; gap: 14px; margin: 26px 0; }
.icon-list.two-col { grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.icon-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  font-size: 15.5px;
}
.icon-list li svg { width: 20px; height: 20px; color: var(--color-primary); flex: none; margin-top: 3px; }
.icon-list li strong { color: var(--color-heading); }
.icon-list li {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.icon-list li:hover {
  transform: translateY(-3px);
  border-color: rgba(142, 31, 44, 0.28);
  box-shadow: var(--shadow-card-hover);
}
/* Staggered reveal, driven by the parent .fade-in-up going .visible */
.icon-list.stagger li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.visible .icon-list.stagger li { opacity: 1; transform: translateY(0); }
.visible .icon-list.stagger li:hover { transform: translateY(-3px); }
.icon-list.stagger li:nth-child(1) { transition-delay: 0.04s; }
.icon-list.stagger li:nth-child(2) { transition-delay: 0.10s; }
.icon-list.stagger li:nth-child(3) { transition-delay: 0.16s; }
.icon-list.stagger li:nth-child(4) { transition-delay: 0.22s; }
.icon-list.stagger li:nth-child(5) { transition-delay: 0.28s; }
.icon-list.stagger li:nth-child(6) { transition-delay: 0.34s; }

/* --- Content split (prose + media) --- */
.content-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: start;
}
.content-split.flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.content-split { align-items: center; }
.content-split .media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-float); width: 100%; }
/* Photo matched to the height of the copy beside it. Only above 1280px: on a
   narrower window the copy grows taller than the frame the photo was cut from,
   and object-fit would crop the sides off the subject. */
@media (min-width: 1280px) {
  .content-split.media-fill { align-items: stretch; }
  /* The photo is taken out of flow so it cannot set the row height: the copy
     decides how tall the row is and the photo fills exactly that. */
  .content-split.media-fill .media { position: relative; min-height: 300px; }
  .content-split.media-fill .media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content-split.media-fill .prose { align-self: center; }
}
.prose p { color: var(--color-text-muted); margin-bottom: 16px; }
.prose p a { color: var(--color-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose h2 { margin: 34px 0 16px; font-size: clamp(24px, 2.6vw, 34px); }
.prose h3 { margin: 28px 0 12px; }
.prose h4 { margin: 24px 0 10px; font-size: 17px; }
.prose ul:not(.icon-list) { margin: 0 0 18px; display: grid; gap: 10px; }
.prose ul:not(.icon-list) li {
  position: relative;
  padding-left: 26px;
  color: var(--color-text-muted);
}
.prose ul:not(.icon-list) li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.prose-rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 34px 0 30px;
}
.prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 6px 0 6px 22px;
  margin: 22px 0;
  color: var(--color-heading);
  font-size: 18px;
}

/* --- Numbered process: medallion on a connector line --- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 60px;
}
.process-step {
  position: relative;
  text-align: center;
  padding-top: 8px;
}
/* the rule that joins one medallion to the next */
.process-step::before {
  content: "";
  position: absolute;
  top: 64px;
  left: calc(50% + 62px);
  right: calc(-50% + 62px);
  height: 1px;
  background: var(--color-border-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease 0.35s;
}
.process-step:last-child::before { display: none; }
.visible .process-step::before { transform: scaleX(1); }

.process-medallion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(16, 27, 60, 0.07);
  border: 1px solid transparent;
  color: var(--color-heading);
  margin-bottom: 26px;
  z-index: 1;
  transition: background 0.32s ease, border-color 0.32s ease,
              color 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-medallion svg { width: 40px; height: 40px; stroke-width: 1.6; }
.process-num {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(142, 31, 44, 0.32);
}
.process-step h3 { font-size: 19px; margin-bottom: 10px; }
.process-step p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 30ch;
  margin: 0 auto;
}
.process-step:hover .process-medallion {
  transform: translateY(-4px);
  border-color: rgba(142, 31, 44, 0.28);
  background: rgba(142, 31, 44, 0.09);
  color: var(--color-primary);
}

/* staggered reveal, driven by the parent .fade-in-up going .visible */
.process-steps.stagger .process-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-steps.stagger.visible .process-step { opacity: 1; transform: translateY(0); }
.process-steps.stagger .process-step:nth-child(1) { transition-delay: 0.05s; }
.process-steps.stagger .process-step:nth-child(2) { transition-delay: 0.16s; }
.process-steps.stagger .process-step:nth-child(3) { transition-delay: 0.27s; }
.process-steps.stagger .process-step:nth-child(4) { transition-delay: 0.38s; }
.process-steps.stagger .process-step:nth-child(2)::before { transition-delay: 0.46s; }
.process-steps.stagger .process-step:nth-child(3)::before { transition-delay: 0.57s; }
.process-steps.stagger .process-step:nth-child(1)::before { transition-delay: 0.35s; }

/* --- Opening statement band (long hero copy, given room) --- */
.intro-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: start;
}
.intro-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--color-heading);
  margin: 0;
  text-wrap: balance;
}
.intro-band-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.intro-col p { color: var(--color-text-muted); margin: 0; font-size: 16px; line-height: 1.7; }
.intro-col-rule {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  margin-bottom: 20px;
}
.intro-band-cols.stagger .intro-col {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro-band-cols.stagger.visible .intro-col { opacity: 1; transform: translateY(0); }
.intro-band-cols.stagger .intro-col:nth-child(1) { transition-delay: 0.06s; }
.intro-band-cols.stagger .intro-col:nth-child(2) { transition-delay: 0.16s; }

/* --- Topic rows: one full-width row per subject, hairline separated --- */
.handle-rows { display: grid; margin-top: 8px; }
.handle-row {
  display: grid;
  grid-template-columns: minmax(0, 0.27fr) minmax(0, 0.73fr);
  gap: 48px;
  padding: 46px 0;
  border-top: 1px solid var(--color-border);
}
.handle-row:first-child { border-top: 0; padding-top: 0; }
.handle-row:last-child { padding-bottom: 0; }
.handle-row-head { display: flex; align-items: baseline; gap: 16px; }
.handle-row-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  flex: none;
  padding-top: 2px;
}
.handle-row-head h3 {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.022em;
}
.handle-row-body p {
  color: var(--color-text-muted);
  margin: 0 0 24px;
  max-width: 64ch;
}
.handle-row-body > *:last-child { margin-bottom: 0; }
.handle-row-body .icon-list {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px 20px;
  align-items: start;          /* no card padded out to match its tallest sibling */
}


.section-subtitle-centered {
  margin: 34px auto 0;
  max-width: 74ch;
  text-align: center;
}
/* Location pages open with two paragraphs of similar length, so the lead
   column runs a little wider and a little smaller than the service-page
   version to keep the two columns close in height. */
.intro-lead.intro-lead-sm { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; }
.intro-band-grid.lead-wide { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 56px; }
.intro-band-cols.one-up { grid-template-columns: minmax(0, 1fr); }

/* --- District columns: hairline-separated subjects with an icon each --- */
.district-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 44px;
}
.district-col {
  padding: 0 40px;
  border-left: 1px solid var(--color-border);
}
.district-col:first-child { padding-left: 0; border-left: 0; }
.district-col:last-child { padding-right: 0; }
.district-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(142, 31, 44, 0.08);
  color: var(--color-primary);
  margin-bottom: 22px;
}
.district-icon svg { width: 23px; height: 23px; }
.district-col h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.district-col p {
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.district-col p:last-child { margin-bottom: 0; }
.district-col { display: flex; flex-direction: column; }
/* two lines reserved so a heading that wraps does not shift its column */
.district-col h3 { min-height: calc(2 * 1.15em); }
.district-body { position: relative; overflow: hidden; transition: max-height 0.4s ease; }
.district-body.is-cut::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58px;
  background: linear-gradient(to bottom, rgba(244, 245, 249, 0), var(--color-bg-alt) 92%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.district-body.is-cut.is-open::after { opacity: 0; }
.district-more {
  align-self: flex-start;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 21px;
}
.district-more::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.district-more.is-open::after { transform: translateY(1px) rotate(-135deg); }
.district-more:hover { color: var(--color-primary-dark); }
/* the row stays in the layout when a column already fits, so all three align */
.district-more.is-empty { visibility: hidden; pointer-events: none; }
.district-cols.stagger .district-col {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.district-cols.stagger.visible .district-col { opacity: 1; transform: translateY(0); }
.district-cols.stagger .district-col:nth-child(1) { transition-delay: 0.06s; }
.district-cols.stagger .district-col:nth-child(2) { transition-delay: 0.17s; }
.district-cols.stagger .district-col:nth-child(3) { transition-delay: 0.28s; }

/* --- Numbered service ledger --- */
.svc-ledger {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
}
.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 4px 22px 0;
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.28s ease, padding 0.28s ease;
}
.ledger-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  flex: none;
  min-width: 22px;
}
.ledger-text {
  flex: 1;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--color-heading);
  font-weight: 500;
}
.ledger-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger-row:hover { border-color: rgba(142, 31, 44, 0.35); }
.ledger-row:hover svg { opacity: 1; transform: translateX(0); }
.svc-ledger.stagger .ledger-row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s ease;
}
.svc-ledger.stagger.visible .ledger-row { opacity: 1; transform: translateY(0); }
.svc-ledger.stagger .ledger-row:nth-child(1) { transition-delay: 0.04s; }
.svc-ledger.stagger .ledger-row:nth-child(2) { transition-delay: 0.10s; }
.svc-ledger.stagger .ledger-row:nth-child(3) { transition-delay: 0.16s; }
.svc-ledger.stagger .ledger-row:nth-child(4) { transition-delay: 0.22s; }
.svc-ledger.stagger .ledger-row:nth-child(5) { transition-delay: 0.28s; }
.svc-ledger.stagger .ledger-row:nth-child(6) { transition-delay: 0.34s; }

/* --- Callout band (navy) --- */
.callout-band {
  background:
    radial-gradient(520px 320px at 90% 20%, rgba(142, 31, 44, 0.28), rgba(142, 31, 44, 0) 65%),
    var(--color-bg-dark);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
  color: #c6cde0;
}
.callout-band h2, .callout-band h3 { color: #fff; }
.callout-band p { color: #c6cde0; margin-bottom: 14px; }
.callout-band .icon-list li { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #e8ecf6; box-shadow: none; }
.callout-band .icon-list li svg { color: #e9aeb5; }
.callout-band .icon-list li:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(233, 174, 181, 0.4);
  box-shadow: none;
}
.callout-band .btn-ghost { background: transparent; border-color: rgba(255,255,255,0.7); color: #fff; }
.callout-band .btn-ghost:hover { background: #fff; color: var(--color-heading); }

/* --- Related services rail --- */
.rail-intro { color: var(--color-text-muted); margin: 0; font-size: 16px; max-width: 44ch; justify-self: end; }
.related-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 26px 24px 24px;
  color: var(--color-heading);
  box-shadow: var(--shadow-card);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease, border-color 0.32s ease;
}
/* Colour wash that rises from the bottom on hover */
.related-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(142, 31, 44, 0) 0%, rgba(142, 31, 44, 0.05) 100%);
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Accent rule that draws across the top on hover */
.related-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.related-card-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(16, 27, 60, 0.07);
  transition: color 0.32s ease;
}
.related-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(142, 31, 44, 0.08);
  color: var(--color-primary);
  margin-bottom: 18px;
  transition: background 0.32s ease, color 0.32s ease, transform 0.32s ease;
}
.related-card-icon svg { width: 21px; height: 21px; }
.related-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin-bottom: 7px;
}
.related-card-blurb {
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  flex: 1;
}
.related-card-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.related-card-go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.related-card:hover {
  transform: translateY(-6px);
  border-color: rgba(142, 31, 44, 0.28);
  box-shadow: var(--shadow-card-hover);
}
.related-card:hover::before { transform: translateY(0); }
.related-card:hover::after { transform: scaleX(1); }
.related-card:hover .related-card-num { color: rgba(142, 31, 44, 0.16); }
.related-card:hover .related-card-icon {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.related-card:hover .related-card-go svg { transform: translateX(5px); }
.related-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

/* Staggered reveal for the rail cards */
.related-rail.stagger .related-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease, border-color 0.32s ease;
}
.related-rail.stagger.visible .related-card { opacity: 1; transform: translateY(0); }
.related-rail.stagger.visible .related-card:hover { transform: translateY(-6px); }
.related-rail.stagger .related-card:nth-child(1) { transition-delay: 0.05s; }
.related-rail.stagger .related-card:nth-child(2) { transition-delay: 0.12s; }
.related-rail.stagger .related-card:nth-child(3) { transition-delay: 0.19s; }
.related-rail.stagger .related-card:nth-child(4) { transition-delay: 0.26s; }
.related-rail.stagger .related-card:nth-child(5) { transition-delay: 0.33s; }

/* --- Location page hero (light, map-forward) --- */
.loc-hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
  padding: calc(var(--utility-h) + var(--header-h) + 60px) 0 84px;
  overflow: hidden;
}
.loc-hero-ghost {
  position: absolute;
  right: -20px;
  bottom: -30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 17vw, 260px);
  letter-spacing: -0.04em;
  color: rgba(29, 58, 143, 0.055);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.loc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
  position: relative;
}
.loc-hero-copy .breadcrumbs { color: var(--color-text-muted); }
.loc-hero-copy h1 { margin-bottom: 20px; font-size: clamp(34px, 4vw, 54px); }
.loc-hero-copy .lede { color: var(--color-text-muted); margin-bottom: 30px; }

/* --- Interactive service-area map (light cartographic panel) --- */
.area-map-card {
  position: relative;
  background: #eceae5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 48px -26px rgba(16, 27, 60, 0.34), 0 2px 6px rgba(16, 27, 60, 0.07);
  overflow: hidden;
}
.area-map-card svg.area-map { width: 100%; height: auto; display: block; }

/* Floating control chip, top-left of the panel */
.area-map-chip {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px 9px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(16, 27, 60, 0.09);
  box-shadow: 0 3px 10px rgba(16, 27, 60, 0.14);
  pointer-events: none;
}
.area-map-chip span { display: block; }
.area-map-chip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1.4;
}
.area-map-chip > span:last-child {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.35;
}
.area-map-chip-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
  animation: am-live 2.4s ease-out infinite;
}
@keyframes am-live {
  0%   { box-shadow: 0 0 0 0 rgba(142, 31, 44, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(142, 31, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(142, 31, 44, 0); }
}

/* Base geography */
.area-map .land { fill: #f2f0eb; }
.area-map .land.island { fill: #efece5; }
.area-map .green { fill: #d3e7c6; }
.area-map .water { fill: #a5d0ec; }
.area-map .county-line {
  fill: none;
  stroke: #bab6ae;
  stroke-width: 1.4;
  stroke-dasharray: 6 6;
}
.area-map .county-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: #a3a099;
}
.area-map .water-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-style: italic;
  fill: #4e83b0;
  letter-spacing: 0.05em;
}

/* Roads: casing pass, then fill pass */
.area-map .roads path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.area-map .road-casing.local path    { stroke: #e0ddd6; stroke-width: 3.4; }
.area-map .road-fill.local path      { stroke: #ffffff; stroke-width: 2; }
.area-map .road-casing.arterial path { stroke: #d5d1c8; stroke-width: 6; }
.area-map .road-fill.arterial path   { stroke: #ffffff; stroke-width: 4; }
.area-map .road-casing.motorway path { stroke: #e0b171; stroke-width: 8; }
.area-map .road-fill.motorway path   { stroke: #fbdca9; stroke-width: 5.5; }

/* Route shields */
.area-map .road-shield rect { fill: #ffffff; stroke: #c9c5bc; stroke-width: 1; }
.area-map .road-shield.shield-i rect { fill: #35558c; stroke: #2a4370; }
.area-map .road-shield text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  fill: #4a4740;
  letter-spacing: 0.01em;
}
.area-map .road-shield.shield-i text { fill: #ffffff; }

/* Soft service-radius overlay centred on the Milton shop */
.area-map .service-radius {
  fill: rgba(142, 31, 44, 0.045);
  stroke: rgba(142, 31, 44, 0.16);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
}

/* Cartographic furniture */
.area-map .map-scale path { fill: none; stroke: #97938c; stroke-width: 1.3; }
.area-map .map-scale text {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  fill: #8d8981;
}
.area-map .map-compass .needle-n { fill: rgba(142, 31, 44, 0.75); }
.area-map .map-compass .needle-s { fill: #b9b5ad; }
.area-map .map-compass text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: #8d8981;
}

/* Pins */
.area-map .pin { cursor: pointer; }
.area-map .pin-mark {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1);
  filter: url(#am-drop);
}
.area-map .pin-body { fill: var(--color-primary); stroke: #ffffff; stroke-width: 1.6; transition: fill 0.22s ease; }
.area-map .pin-core { fill: #ffffff; }
.area-map .pin-halo {
  fill: rgba(142, 31, 44, 0.14);
  stroke: rgba(142, 31, 44, 0.4);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.55);
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.area-map .pin-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  fill: #23262e;
  paint-order: stroke;
  stroke: #f7f5f1;
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: fill 0.2s ease;
}
.area-map .pin-hq-tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--color-secondary);
  paint-order: stroke;
  stroke: #f7f5f1;
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* Hover / list-sync state */
.area-map .pin:hover .pin-mark,
.area-map .pin:focus-visible .pin-mark,
.area-map .pin.hl .pin-mark { transform: scale(1.32); }
.area-map .pin:hover .pin-halo,
.area-map .pin:focus-visible .pin-halo,
.area-map .pin.hl .pin-halo { opacity: 1; transform: scale(1); }
.area-map .pin:hover .pin-body,
.area-map .pin.hl .pin-body { fill: var(--color-accent); }
.area-map .pin:hover .pin-label,
.area-map .pin.hl .pin-label { fill: var(--color-primary); }
.area-map .pin:focus { outline: none; }

/* Headquarters pin */
.area-map .pin.hq .pin-body { fill: var(--color-secondary); }
.area-map .pin.hq .pin-halo { fill: rgba(29, 58, 143, 0.14); stroke: rgba(29, 58, 143, 0.4); opacity: 1; transform: scale(0.9); animation: am-pulse 3s ease-out infinite; }
.area-map .pin.hq:hover .pin-body { fill: #2c50b8; }
@keyframes am-pulse {
  0%   { opacity: 0.85; transform: scale(0.7); }
  70%  { opacity: 0;    transform: scale(1.5); }
  100% { opacity: 0;    transform: scale(1.5); }
}

/* Current-page pin on location pages */
.area-map .pin.active .pin-mark { transform: scale(1.36); }
.area-map .pin.active .pin-body { fill: var(--color-accent); stroke: #ffffff; stroke-width: 2; }
.area-map .pin.active .pin-halo { opacity: 1; transform: scale(1.1); }
.area-map .pin.active .pin-label { fill: var(--color-primary); }

/* Legend strip */
.area-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 13px 20px;
  border-top: 1px solid var(--color-border);
  background: #ffffff;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-pin {
  width: 10px; height: 10px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--color-primary);
  flex: none;
}
.legend-pin.hq { background: var(--color-secondary); }
.legend-hint { margin-left: auto; color: #9aa2b4; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .area-map-chip-dot, .area-map .pin.hq .pin-halo { animation: none; }
}

.areas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
}
.areas-layout .areas-grid { grid-template-columns: 1fr 1fr; }

/* --- Location stat strip (verbatim figures) --- */
.loc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 48px;
}
.loc-stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 44px);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.loc-stat-label { color: var(--color-text-muted); font-size: 14.5px; line-height: 1.5; }

/* Stats as a 2x2 card block beside the opening copy */
.loc-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.loc-stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.loc-stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.loc-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(142, 31, 44, 0.28);
  box-shadow: var(--shadow-card-hover);
}
.loc-stat-card .loc-stat-number { font-size: clamp(28px, 2.6vw, 38px); }
.loc-stat-cards.stagger .loc-stat-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.loc-stat-cards.stagger.visible .loc-stat-card { opacity: 1; transform: translateY(0); }
.loc-stat-cards.stagger.visible .loc-stat-card:hover { transform: translateY(-4px); }
.loc-stat-cards.stagger .loc-stat-card:nth-child(1) { transition-delay: 0.05s; }
.loc-stat-cards.stagger .loc-stat-card:nth-child(2) { transition-delay: 0.13s; }
.loc-stat-cards.stagger .loc-stat-card:nth-child(3) { transition-delay: 0.21s; }
.loc-stat-cards.stagger .loc-stat-card:nth-child(4) { transition-delay: 0.29s; }

/* --- Feature cards --- */
.feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* a two-card row fills the width instead of leaving an empty third track */
.feature-cards.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-cards.stagger .feature-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-cards.stagger.visible .feature-card { opacity: 1; transform: translateY(0); }
.feature-cards.stagger .feature-card:nth-child(1) { transition-delay: 0.06s; }
.feature-cards.stagger .feature-card:nth-child(2) { transition-delay: 0.17s; }
.feature-cards.stagger .feature-card:nth-child(3) { transition-delay: 0.28s; }
.feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.feature-card .fc-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(142, 31, 44, 0.09);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature-card .fc-icon svg { width: 22px; height: 22px; }
.feature-card h2, .feature-card h3, .feature-card h4 { font-size: 18px; margin-bottom: 10px; }
/* Card titles kept at H2 for the page outline (mulat-avalon-fl), set at 35px. */
.feature-card h2 { font-size: 35px; margin-bottom: 14px; }
/* The global reset zeroes p margins, so multi-paragraph cards need their own gap. */
.feature-card p + p { margin-top: 12px; }
/* Opt-in alt surface for a card row sitting on a white band
   (mulat-avalon-fl, pea-ridge-fl), so the cards are not white on white. */
.feature-cards--alt .feature-card { background: var(--color-bg-alt); }
.feature-card p { color: var(--color-text-muted); font-size: 15px; }

/* --- Article (blog post) --- */
.article-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
  padding: calc(var(--utility-h) + var(--header-h) + 56px) 0 56px;
}
.article-hero h1 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 12px; }
.article-hero .breadcrumbs { color: var(--color-text-muted); }
.article-media { margin: 0 0 44px; }
.article-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-float); width: 100%; }
.article-body h2 { font-size: clamp(23px, 2.4vw, 30px); }
.article-cta {
  margin-top: 44px;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 30px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* --- Testimonial wall --- */
.review-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.review-wall .testimonial-card { margin: 0; display: flex; flex-direction: column; }
.review-wall .testimonial-text { margin: 10px 0 14px; }

/* --- 404 --- */
.error-404-section {
  padding: calc(var(--utility-h) + var(--header-h) + 90px) 0 110px;
  text-align: center;
}
.error-404-content { max-width: 760px; margin: 0 auto; }
.error-404-content .section-label { justify-content: center; }
.error-404-content h1 { margin-bottom: 18px; }
.error-404-content p { margin: 0 auto 30px; color: var(--color-text-muted); }
.error-404-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* --- Sub-page responsive --- */
@media (max-width: 1024px) {
  .svc-hero-grid, .loc-hero-grid, .content-split, .content-split.flip { grid-template-columns: 1fr; gap: 44px; }
  /* stacked, a split photo would otherwise run the full container width */
  .content-split .media { max-width: 560px; }
  .svc-hero-copy { padding-bottom: 0; }
  .svc-hero { padding-top: calc(var(--header-h) + 48px); }
  .svc-hero-media { max-width: 560px; margin-bottom: 0; }
  .svc-hero + .section-pad { padding-top: 72px; }
  .svc-hero-media img { border-radius: var(--radius-lg); }
  .svc-hero-grid { padding-bottom: 64px; }
  .loc-hero { padding-top: calc(var(--header-h) + 44px); }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
  .process-step::before { display: none; }
  .intro-band-grid { grid-template-columns: 1fr; gap: 36px; }
  .related-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail-intro { justify-self: start; }
  .areas-layout { grid-template-columns: 1fr; }
  .review-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-stats { grid-template-columns: repeat(2, 1fr); padding: 34px; }
  .loc-intro-grid { grid-template-columns: 1fr; gap: 44px; }
  .feature-cards { grid-template-columns: 1fr; }

  /* .two-up is two classes, so it outranked the 1fr rule above and kept
     two narrow columns on phones (east-milton-fl, pea-ridge-fl). */
  .feature-cards.two-up { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .icon-list.two-col { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .intro-band-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .related-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .related-card { padding: 22px 20px 20px; }
  .related-card-num { font-size: 28px; top: 14px; right: 16px; }
  .review-wall { grid-template-columns: minmax(0, 1fr); }
  .callout-band { padding: 36px 28px; }
  .loc-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .loc-stat-cards { gap: 14px; }
  .loc-stat-card { padding: 22px 20px 20px; }
  .areas-layout .areas-grid { grid-template-columns: 1fr 1fr; }
}

/* 15. Animations
   ========================================================================== */
.fade-in-up { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
.fade-in-up.stagger { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in-up { opacity: 1; transform: none; transition: none; }
  .icon-list.stagger li,
  .feature-cards.stagger .feature-card,
  .loc-stat-cards.stagger .loc-stat-card,
  .district-cols.stagger .district-col,
  .svc-ledger.stagger .ledger-row,
  .related-rail.stagger .related-card,
  .process-steps.stagger .process-step,
  .intro-band-cols.stagger .intro-col { opacity: 1; transform: none; transition: none; }
  .process-step::before { transform: scaleX(1); transition: none; }
  .marquee-track { animation: none; }
  * { animation: none !important; }
}

/* 16. Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-track { grid-auto-columns: calc((100% - 28px) / 2); }
  .hero-grid { gap: 44px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .utility-bar { display: none; }
  .site-header { top: 0 !important; }
  .section-pad { padding: 72px 0; }
  .header-nav, .header-cta { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
  .split-head { grid-template-columns: 1fr; align-items: start; gap: 14px; margin-bottom: 40px; }
  .split-head-side { justify-content: flex-start; }
  .hero-split { padding: calc(var(--header-h) + 52px) 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { max-width: 560px; }
  .about-grid, .faq-grid { grid-template-columns: 1fr; gap: 52px; }
  .handle-row { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; }
  .district-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .district-col { padding: 34px 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .district-col:first-child { padding-top: 0; border-top: 0; }
  .district-col:last-child { padding-bottom: 0; }
  .district-col h3 { min-height: 0; }
  .district-body { max-height: none !important; transition: none; }
  .district-body.is-cut::after { display: none; }
  .svc-ledger { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .faq-media, .faq-grid-tall .faq-media { position: static; max-width: 520px; }
  .about-rating { left: 10px; }
  .cta-card { grid-template-columns: 1fr; }
  .cta-card-body { padding: 44px 36px; }
  .cta-card-media { min-height: 300px; }
  .contact-v2-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-v2 { padding: 74px 0 78px; }
  .contact-v2-heading { max-width: 20ch; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 64px 0 44px; }
}

@media (max-width: 768px) {
  .section-pad { padding: 52px 0; }
  .services-grid, .blog-grid, .duo-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .area-card { padding: 15px 20px; font-size: 15px; }
  .reviews-track { grid-auto-columns: 92%; }
  .hero-actions .btn { width: 100%; }
  .hero-visual { padding: 0 0 56px 34px; }
  .hero-photo-inset { width: 42%; }
  .hero-chip { right: 0; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-head { padding: 24px 22px 20px; }
  .contact-form-body { padding: 26px 22px 28px; }
  .contact-call { padding: 16px 18px; gap: 14px; }
  .contact-call-icon { width: 46px; height: 46px; }
  .duo-panel { min-height: 340px; }
  .gmb-map-section iframe { height: 300px; }
  .marquee-item { font-size: 17px; }
  .cta-float { padding: 72px 0; }
  .reviews-section::before { font-size: 300px; right: 10px; }
}

/* One card per row on phones: two columns squeezes both the service name
   and the CTA onto three lines each. */
@media (max-width: 560px) {
  .related-rail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .related-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .related-card-icon { margin-bottom: 0; }
  .related-card-title { flex: 1; margin-bottom: 0; }
  .related-card-blurb { flex-basis: 100%; margin-top: 10px; }
  .related-card-go { flex-basis: 100%; margin-top: 12px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .areas-grid,
  .areas-layout .areas-grid { grid-template-columns: 1fr; }
  .header-logo img { height: 46px; }
  .cta-card-actions { flex-direction: column; align-items: flex-start; }
}

/* Map panel furniture scales down so it never covers the northern pins */
@media (max-width: 760px) {
  /* the chip becomes a header strip so it can never cover the northern pins */
  .area-map-chip {
    position: static;
    display: flex;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
  }
  .area-map-chip strong { font-size: 10px; letter-spacing: 0.14em; }
  .area-map-chip > span:last-child { font-size: 12px; }
  .area-map-legend { padding: 11px 14px; font-size: 11.5px; gap: 8px 14px; }
  .legend-hint { font-size: 11px; }
}
@media (max-width: 480px) {
  .area-map-legend { justify-content: space-between; }
  .legend-hint { margin-left: 0; width: 100%; }
}

/* 26. Sticky mobile call bar
   Hidden on desktop, where the utility bar already carries the phone.
   Shown at <=1024px, exactly where .utility-bar is hidden.
   z-index sits above .mobile-nav (999) so calling stays one tap away
   even with the menu open. */
.call-bar { display: none; }

@media (max-width: 1024px) {
  .call-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: var(--color-bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -6px 22px rgba(12, 23, 52, 0.24);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 56px; padding: 12px 10px;
    font-family: var(--font-body);
    font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
    text-decoration: none;
    border-bottom: 0;
  }
  .call-bar a svg {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .call-bar .cb-call {
    background: var(--color-primary);
    color: #fff;
  }
  .call-bar .cb-call:hover,
  .call-bar .cb-call:focus-visible { background: var(--color-primary-dark); }
  .call-bar .cb-quote { color: #fff; }
  .call-bar .cb-quote:hover,
  .call-bar .cb-quote:focus-visible { background: rgba(255, 255, 255, 0.09); }

  /* keep the footer and the open mobile menu clear of the fixed bar */
  body { padding-bottom: 56px; }
  .mobile-nav { padding-bottom: 96px; }
}