/* ==========================================================================
   DeRosa Solutions — homepage mockup
   Style: Cobalt Wire (C6), light. Type: Inter.

   Layout system:
   - Hero: full-bleed dusk photo (Blue hour), transparent header over it.
   - Service Area and FAQ: 1/3 heading : 2/3 content (.split).
   - Services: bento grid. Reviews: spotlight quote.
     Why choose us: seven-step job timeline. Quote: banner form.
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --surface: #F4F7FB;
  --text: #17263B;
  --muted: #5E7189;
  --accent: #1D5FBF;
  --accent-strong: #164C9A;
  --accent-soft: #E8F0FB;
  --positive: #1B7E5A;
  --positive-soft: #E7F4EE;
  --negative: #C13440;
  --negative-soft: #FCEEF0;
  --line: #E0E7F0;
  --line-strong: #C8D3E1;
  --ph: #E9EEF5;
  --navy: #0B1D36;
  --star: #F2B04A;
  --on-dark-muted: rgba(255, 255, 255, 0.76);
  --on-dark-line: rgba(255, 255, 255, 0.18);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;

  --max: 1200px;
  --pad: 16px;
  --gap: 28px;
  --cw: min(100% - 2 * var(--pad), var(--max));
  --header-h: 64px;
  --sec-pad: clamp(72px, 11vw, 136px);

  --r-s: 8px;
  --r: 12px;
  --r-l: 18px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* entrances, reveals */
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);   /* photo settle, glare */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* exits, swaps */
}

@media (min-width: 640px) {
  :root { --pad: 32px; }
}

@media (min-width: 960px) {
  :root { --gap: 72px; --header-h: 76px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

@media (min-width: 960px) {
  body { font-size: 1.0625rem; }
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid rgba(29, 95, 191, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

.nw,
p a[href^="tel:"] { white-space: nowrap; }

#quote:focus { outline: none; }

.container {
  width: var(--cw);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: 600 1rem/1.2 var(--font);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn .icon { width: 20px; height: 20px; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 20px -10px rgba(29, 95, 191, 0.7);
}
.btn-primary:hover { background: var(--accent-strong); }

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--text); }
.btn-secondary .icon { color: var(--accent); }

/* On dark photos (hero) */
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: #E9EFF8; }

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.18); }

.btn-lg { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  text-decoration: none;
}

/* Logo: "Roofline". Roof and walls in one ink line with the bolt where the door would be,
   beside the name in capitals. Bolt and SOLUTIONS are cobalt on light, amber over the hero. */
.brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--text);
}

.brand-spark { fill: var(--accent); }

.brand-name {
  display: grid;
  gap: 0.2em;
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-word {
  font-weight: 800;
  letter-spacing: 0.07em;
}

.brand-sub {
  font-family: var(--font);
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: 0.5em;
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  text-decoration: none;
}

.header-phone .icon { width: 20px; height: 20px; }

.header-phone-num {
  display: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.header-cta { display: none; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.menu-toggle .icon-close { display: none; }
.site-header.is-open .menu-toggle .icon-menu { display: none; }
.site-header.is-open .menu-toggle .icon-close { display: block; }

/* Mobile menu panel */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--pad) 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(23, 38, 59, 0.25);
}

.site-header.is-open .site-nav { display: block; }

.site-nav ul a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}


@media (min-width: 400px) {
  .brand-name { font-size: 1.1875rem; }
}

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}

@media (min-width: 1100px) {
  .menu-toggle { display: none; }

  .site-nav {
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    margin-right: 8px;
  }

  .site-nav ul { display: flex; gap: 4px; }

  .site-nav ul a {
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.15s ease;
  }

  .site-nav ul a:hover { color: var(--text); }

  .nav-actions { display: none; }

  .header-phone {
    width: auto;
    height: 42px;
    padding: 0 14px 0 4px;
    border: 0;
    border-radius: var(--r-s);
  }

  .header-phone-num { display: inline; }
  .header-actions { gap: 12px; }
}

/* Over the hero photo: transparent with white text until the hero scrolls away (script toggles .is-over and .is-scrolled).
   An open mobile menu always gets the solid header. */
.site-header { transition: background-color 0.3s ease, border-color 0.3s ease; }
.site-header.is-over:not(.is-open) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Scrolled but still over the hero: frosted navy, so the headline never shows through the nav. */
.site-header.is-over.is-scrolled:not(.is-open) {
  background: rgba(8, 20, 40, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.site-header.is-over:not(.is-open) .brand-name { color: #fff; }
.site-header.is-over:not(.is-open) .brand-mark { color: #fff; }
.site-header.is-over:not(.is-open) .brand-spark { fill: var(--star); }
.site-header.is-over:not(.is-open) .brand-sub { color: var(--star); }
.site-header.is-over:not(.is-open) .header-phone { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.site-header.is-over:not(.is-open) .header-phone-num { color: #fff; }
.site-header.is-over:not(.is-open) .menu-toggle { background: rgba(255, 255, 255, 0.14); color: #fff; }
.site-header.is-over:not(.is-open) :focus-visible { outline-color: #fff; }

@media (min-width: 1100px) {
  .site-header.is-over .site-nav ul a { color: var(--on-dark-muted); }
  .site-header.is-over .site-nav ul a:hover { color: #fff; }
}

/* ---------- Photo & map placeholders ---------- */

.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-l);
  background-color: var(--ph);
  background-image: repeating-linear-gradient(135deg, rgba(23, 38, 59, 0.045) 0 1px, transparent 1px 14px);
  border: 1px solid var(--line);
}

.ph-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.ph-label .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }

/* ---------- Hero: Blue hour ---------- */
/* Full-bleed dusk photo, headline low on the frame, glass rating card.
   The hero slides up under the sticky header, which stays transparent over it (see .site-header.is-over). */

.hero {
  --hero-ink: #06101F;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(620px, min(100svh, 940px));
  margin-top: calc(-1 * var(--header-h) - 1px);
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: -8% 0 0;             /* extra height gives the scroll parallax room to move */
  z-index: -2;
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.hero::before { /* legibility: darker at the top for the header, much darker at the bottom for the copy */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 31, 0.62) 0%, rgba(6, 16, 31, 0.08) 22%, rgba(6, 16, 31, 0.12) 45%, rgba(6, 16, 31, 0.78) 78%, rgba(6, 16, 31, 0.92) 100%),
    linear-gradient(90deg, rgba(6, 16, 31, 0.55) 0%, rgba(6, 16, 31, 0) 60%);
}

.hero-body {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 48px 0 clamp(28px, 4vw, 44px);
}

.hero-grid {
  display: grid;
  gap: 32px;
  align-items: end;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
}

.hero-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.7;
}

.hero-title {
  margin-top: 18px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.75rem, 1.2rem + 5.6vw, 5.75rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.036em;
}

/* Each line is its own mask so the words can rise into place on load. */
.hero-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero-line > span { display: block; }

.hero-lede {
  margin-top: 22px;
  max-width: 34rem;
  color: var(--on-dark-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-proof {
  max-width: 460px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(10, 24, 46, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.hero-proof-top { display: flex; align-items: center; gap: 14px; }

.hero-score {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero-stars { display: flex; gap: 2px; color: var(--star); }
.hero-stars .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.hero-proof-top small { display: block; margin-top: 4px; color: var(--on-dark-muted); font-size: 0.8125rem; }

.hero-proof blockquote {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.hero-proof blockquote::before { content: "\201C"; }
.hero-proof blockquote::after { content: "\201D"; }

.hero-proof-who { margin-top: 8px; color: var(--on-dark-muted); font-size: 0.8125rem; }
.hero-proof-who span { margin-left: 6px; opacity: 0.7; }

.hero-foot { border-top: 1px solid var(--on-dark-line); }

.hero-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  padding-block: 18px;
  color: var(--on-dark-muted);
  font-size: 0.875rem;
}

.hero-creds { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hero-creds li { display: inline-flex; align-items: center; gap: 8px; }
.hero-creds .icon { width: 17px; height: 17px; color: #fff; }

.hero-area a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 4px;
}
.hero-area a:hover { text-decoration-color: #fff; }

.hero :focus-visible { outline-color: #fff; }

@media (max-width: 479.98px) {
  .hero-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 999.98px) {
  .hero-media img { object-position: 62% 50%; }
}

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
}

/* Rating card glare: follows the pointer while the card tilts (script sets --gx, --gy, --glare). */
.hero-proof { position: relative; }
.hero-proof::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0) 65%);
  opacity: var(--glare, 0);
  transition: opacity 0.32s var(--ease-soft);
}

.hero-word { display: inline-block; }

/* Hero motion (Blur type and tilt): the photo settles out of focus, the headline resolves
   word by word from a soft blur, and the rating card floats up after it. With a mouse the card
   then leans toward the cursor (script). Everything is simply visible under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: hero-settle 2s var(--ease-soft) both; }
  .hero-kicker { animation: hero-fade 0.7s ease 0.14s both; }
  .hero-line { overflow: visible; } /* the blur needs room, so no line mask here */
  .hero-word { animation: hero-word 1.1s var(--ease-out) both; animation-delay: calc(0.26s + var(--w, 0) * 85ms); }
  .hero-lede { animation: hero-rise 0.9s var(--ease-out) 0.82s both; }
  .hero-actions { animation: hero-rise 0.9s var(--ease-out) 0.9s both; }
  .hero-proof { animation: hero-float 1.2s var(--ease-out) 0.95s both; will-change: transform; }
  .hero-foot { animation: hero-fade 0.9s ease 1.2s both; }
  /* Opacity only: a transform here would re-anchor the absolutely positioned mobile menu. */
  .site-header .header-inner { animation: hero-fade 0.8s ease 0.1s both; }
  .hero-media { will-change: transform; }
}

@keyframes hero-settle {
  from { transform: scale(1.06); filter: brightness(0.7) blur(6px); }
  to { transform: none; filter: none; }
}
/* Tracking opens slightly while blurred and closes to the headline's -0.036em. */
@keyframes hero-word {
  0% { opacity: 0; filter: blur(14px); letter-spacing: 0.03em; transform: translate3d(0, 0.06em, 0); }
  55% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); letter-spacing: -0.036em; transform: none; }
}
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
/* Individual translate/scale so the tilt script can own transform. */
@keyframes hero-float {
  from { opacity: 0; translate: 0 36px; scale: 0.96; filter: blur(8px); }
  to { opacity: 1; translate: 0 0; scale: 1; filter: none; }
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding: var(--sec-pad) 0;
}

.section-surface { background: var(--surface); }

.split {
  display: grid;
  gap: 40px;
}

.sec-head { position: relative; }

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
}

.sec-head h2 {
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  font-weight: 750;
}

.sec-sub {
  margin-top: 18px;
  max-width: 30rem;
  color: var(--muted);
}

@media (min-width: 960px) {
  /* 1/3 heading, 2/3 content */
  .split {
    grid-template-columns: 1fr 2fr;
    gap: var(--gap);
    align-items: start;
  }

  .sec-head {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

/* ---------- Services: bento grid ---------- */
/* One feature tile (Panel Upgrades), one loud tile (Emergency), the rest even. */

.svc-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head" "panel" "res" "com" "emer" "gen" "ev" "light" "pool" "guar";
}

@media (min-width: 640px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "head head"
      "panel panel"
      "res com"
      "emer emer"
      "gen ev"
      "light pool"
      "guar guar";
  }
}

@media (min-width: 1000px) {
  .svc-grid {
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "head head panel panel"
      "res com panel panel"
      "emer emer gen ev"
      "light pool guar guar";
  }
}

.svc-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 4px 24px;
}

.svc-head h2 {
  max-width: 15ch;
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  font-weight: 750;
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Lift and zoom only where a real pointer hovers, so taps on phones don't leave tiles stuck raised */
@media (hover: hover) and (pointer: fine) {
  .svc-tile.is-link:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -28px rgba(23, 38, 59, 0.45);
  }

  .svc-tile.is-link:hover .svc-media img { transform: scale(1.04); }
  .svc-tile:hover .svc-more::after { transform: translateX(3px); }
}

.svc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: var(--ph);
}

.svc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.svc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 0 22px 22px;
}

.svc-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 6px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgba(23, 38, 59, 0.35);
}

.svc-tile h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.svc-tile p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.svc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.svc-more::after { content: "→"; transition: transform 0.2s ease; }

/* The whole tile is the link target */
.svc-more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.svc-res { grid-area: res; }
.svc-com { grid-area: com; }
.svc-gen { grid-area: gen; }
.svc-ev { grid-area: ev; }
.svc-light { grid-area: light; }
.svc-pool { grid-area: pool; }

/* Feature tile */
.svc-panel { grid-area: panel; }
.svc-panel .svc-media { flex: 1; aspect-ratio: auto; min-height: 260px; }
.svc-panel .svc-body { flex: none; padding-top: 24px; }
.svc-panel h3 { font-size: 1.5rem; letter-spacing: -0.025em; }

.svc-kicker {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-tile p.svc-kicker { color: var(--accent); }

.svc-amp {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  box-shadow: 0 8px 24px -12px rgba(23, 38, 59, 0.5);
}

.svc-amp s { color: var(--muted); font-size: 1rem; font-weight: 600; text-decoration-thickness: 2px; }
.svc-amp b { color: var(--accent); font-size: 1.75rem; }
.svc-amp small { color: var(--muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; }

.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.svc-chips li {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Emergency tile */
.svc-emer {
  grid-area: emer;
  isolation: isolate;
  border-color: transparent;
  background: var(--text);
  color: #fff;
}

.svc-emer-bg { position: absolute; inset: 0; z-index: -1; }
.svc-emer-bg img { width: 100%; height: 100%; object-fit: cover; }

.svc-emer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12, 20, 34, 0.95) 0%, rgba(12, 20, 34, 0.84) 55%, rgba(12, 20, 34, 0.5) 100%);
}

.svc-emer .svc-body { padding: 26px; }

.svc-emer .svc-icon {
  margin: 0 0 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

.svc-emer h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.375rem;
}

.svc-emer p { max-width: 34rem; color: #C9D5E6; }

.svc-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5A66;
  animation: svc-pulse 1.8s infinite;
}

@keyframes svc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 102, 0.6); }
  80%, 100% { box-shadow: 0 0 0 10px rgba(255, 90, 102, 0); }
}

/* Services motion (Diagonal cascade): the heading rises, then the tiles arrive in a diagonal
   wave. The script sets each tile's --d from its grid position and adds .is-in as it scrolls
   into view. Tiles only start hidden when the script is running (.js). */
@media (prefers-reduced-motion: no-preference) {
  .js .svc-head > * { animation: svc-rise 1s var(--ease-out) backwards; }
  .js .svc-head > :nth-child(2) { animation-delay: 80ms; }
  .js .svc-head > :nth-child(3) { animation-delay: 160ms; }
  .js .svc-head > :nth-child(4) { animation-delay: 240ms; }

  .js .svc-tile:not(.is-in) { opacity: 0; }
  .svc-tile.is-in { animation: svc-tile 0.9s var(--ease-out) var(--d, 0ms) backwards; }

  /* The photo frame opens from a rounded inset while the image eases down from 1.12. */
  .svc-tile.is-in .svc-media,
  .svc-tile.is-in .svc-emer-bg { animation: svc-clip 1.1s var(--ease-out) var(--d, 0ms) backwards; }
  .svc-tile.is-in .svc-media img,
  .svc-tile.is-in .svc-emer-bg img { animation: svc-zoom 1.4s var(--ease-out) var(--d, 0ms) backwards; }

  .svc-tile.is-in .svc-body { animation: svc-rise 0.8s var(--ease-out) calc(var(--d, 0ms) + 140ms) backwards; }
  .svc-panel.is-in .svc-amp { animation: svc-badge 0.7s var(--ease-out) calc(var(--d, 0ms) + 520ms) backwards; }

  /* The live dot starts pulsing once the emergency tile has landed. */
  .js .svc-emer:not(.is-in) .svc-live::before { animation: none; }
  .svc-emer.is-in .svc-live::before { animation-delay: calc(var(--d, 0ms) + 700ms); }
}

@keyframes svc-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes svc-tile { from { opacity: 0; transform: translateY(32px); } }
@keyframes svc-clip {
  from { clip-path: inset(9% 9% 9% 9% round 14px); }
  to { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes svc-zoom { from { transform: scale(1.12); } }
@keyframes svc-badge { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }

.svc-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: auto;
  padding-top: 12px;
}

.svc-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.svc-num { min-height: 44px; }
.svc-num .icon { width: 26px; height: 26px; }
.svc-num:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.svc-tile .svc-note { color: #C9D5E6; font-size: 0.8125rem; }

/* Guarantee tile */
.svc-guar { grid-area: guar; background: var(--surface); }
.svc-guar .svc-body { gap: 16px; padding: 24px; }

.svc-guar-list {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 520px) {
  .svc-guar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svc-guar-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.svc-guar-list .icon { width: 22px; height: 22px; color: var(--accent); }
.svc-guar-list b { display: block; font-weight: 600; }
.svc-guar-list span { color: var(--muted); font-size: 0.875rem; }

.svc-guar-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.svc-tile .svc-guar-foot p { color: var(--text); font-weight: 600; }

/* ---------- Service area: radius map ---------- */
/* Stylized county map with drive-time rings around the New Haven shop. */

#service-area {
  --navy: #0F2A4F;
  --water: #E6EEF9;
  --water-line: #B9CCE6;
  --road: #E4EAF2;
  --label-bg: rgba(255, 255, 255, 0.92);
  --shadow: 0 18px 40px -28px rgba(23, 38, 59, 0.45);
}

.sa-lede { max-width: 34rem; }
.sa-intro h2 {
  max-width: 17ch;
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  font-weight: 750;
}
.sa-intro .sec-label { margin-bottom: 16px; }

.sa-layout {
  display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1180px) {
  .sa-layout { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: center; }
}

/* Drive-time readout (desktop) */
.sa-readout {
  margin-top: 28px; padding: 20px 22px;
  border-radius: var(--r-l); background: var(--bg); border: 1px solid var(--line);
  display: none;
}
@media (min-width: 720px) { .sa-readout { display: block; } }
.sa-readout-kicker { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.sa-readout-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.sa-readout-town { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.sa-readout-time {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--accent-strong); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sa-readout-note { margin-top: 6px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }

.sa-note { margin-top: 24px; color: var(--muted); font-size: 0.9375rem; }
.sa-note a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.sa-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Map */
.sa-map {
  position: relative; margin: 0;
  border-radius: calc(var(--r-l) + 4px); overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.sa-canvas { position: relative; aspect-ratio: 1100 / 920; }
.sa-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sa-ring { fill: var(--accent); stroke: var(--accent); vector-effect: non-scaling-stroke; }
.sa-ring-1 { fill-opacity: .07; stroke-opacity: .55; stroke-width: 1.5; }
.sa-ring-2 { fill-opacity: .045; stroke-opacity: .4; stroke-width: 1.25; }
.sa-ring-3 { fill-opacity: .03; stroke-opacity: .32; stroke-width: 1.25; stroke-dasharray: 6 6; }
.sa-ring-tag rect { fill: var(--bg); stroke: var(--line-strong); }
.sa-ring-tag text { fill: var(--accent-strong); font: 600 20px var(--font); }
.sa-water { fill: var(--water); }
.sa-coast { fill: none; stroke: var(--water-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sa-road { fill: none; stroke: var(--road); stroke-width: 7; stroke-linecap: round; }
.sa-sound { fill: #6F86A6; font: italic 500 22px var(--font); letter-spacing: .02em; }
@media (max-width: 719.98px) { .sa-ring-tag, .sa-sound { display: none; } }

.sa-towns { position: absolute; inset: 0; }
.sa-town {
  position: absolute; left: var(--x); top: var(--y);
  width: 0; height: 0;
}
.sa-town button {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-7px, -50%); /* dot centered on the point */
  white-space: nowrap;
}
.sa-town button::before { /* larger touch target */
  content: ""; position: absolute; left: -10px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%);
}
.sa-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  transition: transform .15s ease;
}
.sa-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 7px;
  background: var(--label-bg); color: var(--text);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
  box-shadow: 0 1px 0 rgba(23, 38, 59, .06);
}
.sa-time {
  display: none;
  font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums;
}
/* label on the left of the dot */
.sa-town.sa-l button { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.sa-town.sa-l button::before { left: auto; right: -10px; }
/* label above the dot */
.sa-town.sa-t button { flex-direction: column-reverse; gap: 3px; transform: translate(-50%, calc(-100% + 7px)); }
.sa-town.sa-t button::before { left: 50%; top: auto; bottom: 0; transform: translate(-50%, 10px); }
/* label under the dot */
.sa-town.sa-b button { flex-direction: column; gap: 3px; transform: translate(-50%, -7px); }
.sa-town.sa-b button::before { left: 50%; top: 0; transform: translate(-50%, -10px); }

.sa-town button:hover .sa-time, .sa-town button:focus-visible .sa-time, .sa-town.is-active .sa-time { display: inline; }
.sa-town button:hover .sa-dot, .sa-town button:focus-visible .sa-dot, .sa-town.is-active .sa-dot { transform: scale(1.25); }
.sa-town button:hover .sa-tag, .sa-town button:focus-visible .sa-tag, .sa-town.is-active .sa-tag {
  background: var(--bg); box-shadow: 0 6px 18px -8px rgba(23, 38, 59, .45), 0 0 0 1px var(--line-strong);
}
.sa-town:hover, .sa-town:focus-within, .sa-town.is-active { z-index: 3; }
.sa-town button:focus-visible { outline: none; }
.sa-town button:focus-visible .sa-tag { outline: 3px solid var(--accent); outline-offset: 2px; }

.sa-town.is-home .sa-dot {
  width: 22px; height: 22px; background: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 0 0 8px rgba(15, 42, 79, .12);
}
.sa-town.is-home button { transform: translate(calc(-100% + 11px), -50%); }
.sa-town.is-home .sa-tag { background: var(--navy); color: #fff; font-weight: 700; }
.sa-town.is-home .sa-tag .icon { width: 14px; height: 14px; }
.sa-town.is-home .sa-time { color: #CFE0F8; }
.sa-town.is-home button:hover .sa-tag, .sa-town.is-home button:focus-visible .sa-tag, .sa-town.is-home.is-active .sa-tag { background: var(--navy); }

/* Small screens: dots only, the list below carries the names */
@media (max-width: 719.98px) {
  .sa-town .sa-tag { display: none; }
  .sa-town.is-active .sa-tag { display: inline-flex; }
  .sa-dot { width: 12px; height: 12px; border-width: 2px; }
  .sa-town.is-home .sa-dot { width: 18px; height: 18px; }
  .sa-town.is-home .sa-tag { display: inline-flex; font-size: 0.75rem; }
  .sa-town.is-home button { flex-direction: row; transform: translate(-9px, -50%); }
}

.sa-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 18px; border-top: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--muted);
}
.sa-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sa-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sa-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.sa-legend i.is-home { width: 12px; height: 12px; background: var(--navy); }
.sa-legend i.is-ring { background: transparent; border: 1.5px dashed var(--accent); width: 14px; height: 14px; }

/* Drive-time list (small screens) */
.sa-list { border-top: 1px solid var(--line); padding: 16px 16px 18px; }
@media (min-width: 720px) { .sa-list { display: none; } }
.sa-list h3 { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.sa-band { margin-top: 14px; }
.sa-band-title { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.sa-band ul { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sa-band button {
  width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  text-align: left; font-size: 0.875rem; font-weight: 600; line-height: 1.35; cursor: pointer;
}
.sa-band button span:last-child { color: var(--accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.8125rem; }
.sa-band button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.sa-band .is-home button { background: var(--navy); border-color: var(--navy); color: #fff; }
.sa-band .is-home button span:last-child { color: #CFE0F8; }

/* One moment: rings open outward when the map scrolls into view */
.sa-rings .sa-ring { transform-box: fill-box; transform-origin: center; }
.sa-rings.is-pre .sa-ring { transform: scale(.6); opacity: 0; }
.sa-rings .sa-ring { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease; }
.sa-rings .sa-ring-2 { transition-delay: .12s; }
.sa-rings .sa-ring-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .sa-rings.is-pre .sa-ring { transform: none; opacity: 1; }
}

/* ---------- Reviews: spotlight quote ---------- */
/* One large quote at a time, switched by a row of customer tabs. */

.rv-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.rv-top h2 {
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.rv-top h2 span {
  margin-left: 10px;
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 520px) {
  .rv-top h2 span { display: block; margin: 6px 0 0; }
}

.rv-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.rv-rating b { color: var(--text); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.rv-rating a { color: var(--accent); font-weight: 600; text-decoration: none; }
.rv-rating a:hover { text-decoration: underline; text-underline-offset: 3px; }

.rv-stars { display: inline-flex; gap: 2px; color: var(--accent); }
.rv-stars .icon { width: 16px; height: 16px; fill: currentColor; stroke-width: 1; }
.rv-stars .off { fill: none; color: var(--line-strong); stroke-width: 1.5; }

.rv-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px dashed var(--negative);
  border-radius: 6px;
  background: var(--negative-soft);
  color: var(--negative);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* All quotes share one grid cell; only the active one shows */
.rv-stage {
  display: grid;
  padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px);
  padding-inline-start: clamp(0px, 12vw - 48px, 96px);
}

.rv-quote {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  min-width: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.rv-quote.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.12s, visibility 0s;
}

.rv-quote::before {
  content: "\201C";
  display: block;
  height: 0.42em;
  margin-left: -0.06em;
  color: var(--accent);
  font-size: clamp(7rem, 5rem + 9vw, 13rem);
  font-weight: 800;
  line-height: 0.8;
}

.rv-quote blockquote {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(1.625rem, 1.05rem + 2.4vw, 3rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.rv-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.rv-dash { flex: none; width: 40px; height: 2px; background: var(--accent); }
.rv-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rv-who strong { font-size: 1.0625rem; font-weight: 600; }
.rv-who span { color: var(--muted); font-size: 0.9375rem; }

/* Reviews motion (Word resolve): the script splits each quote into word spans (a visually
   hidden copy keeps the sentence whole for screen readers) and animates the swap itself,
   so the stylesheet's opacity transition steps aside. The big quote mark never moves. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv-quote { transition: none; }
  .js .rv-quote.is-leaving { opacity: 1; visibility: visible; } /* stays visible while it lifts away */
  .rv-w { display: inline-block; }
  .rv-dash { transform-origin: 0 50%; }

  /* Held back until the section scrolls into view */
  .js #reviews.rv-pre .rv-quote.is-active .rv-words,
  .js #reviews.rv-pre .rv-quote.is-active figcaption,
  .js #reviews.rv-pre .rv-pick { opacity: 0; }
}

.rv-picker {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .rv-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rv-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px 8px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rv-pick:hover { background: var(--surface); }
.rv-pick[aria-selected="true"] { background: var(--surface); border-color: var(--line-strong); }

.rv-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.rv-pick[aria-selected="true"] .rv-avatar { background: var(--accent); color: #fff; }

.rv-pick-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.rv-pick-text b,
.rv-pick-text small { overflow-wrap: anywhere; }

.rv-pick-text b { font-size: 0.875rem; font-weight: 600; }
.rv-pick-text small { color: var(--muted); font-size: 0.75rem; }

/* ---------- Why choose us: how a job works ---------- */
/* Seven-step stepper; each step tagged with the promise it keeps. */

.how-wrap { display: grid; gap: clamp(32px, 5vw, 56px); }

.how-head { display: grid; gap: 16px; }
.how-head > * { min-width: 0; }

@media (min-width: 900px) {
  .how-head { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
}

.how-head h2 {
  max-width: 15ch;
  font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.034em;
  font-weight: 750;
}

.how-head .sec-label { margin-bottom: 16px; }
.sec-label .icon { width: 18px; height: 18px; }
.how-side { display: grid; gap: 16px; }
.how-side > p { max-width: 34rem; color: var(--muted); }

.how-key { display: flex; flex-wrap: wrap; gap: 8px; }

.how-key li,
.how-promise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.how-key .icon,
.how-promise .icon { width: 16px; height: 16px; color: var(--accent); }

.how-steps { --dot: 44px; position: relative; display: grid; }

.how-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--dot) 1fr;
  align-content: start;
  column-gap: 18px;
  min-width: 0;
  padding-bottom: 28px;
}

.how-step:last-child { padding-bottom: 0; }

/* Connector */
.how-step::after {
  content: "";
  position: absolute;
  top: calc(var(--dot) + 6px);
  bottom: 6px;
  left: calc(var(--dot) / 2 - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}

.how-step:last-child::after { display: none; }

.how-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--surface);
}

.how-step.is-optional .how-dot {
  border: 2px dashed var(--accent);
  background: var(--bg);
  color: var(--accent);
}

.how-step.is-final .how-dot { background: var(--positive); }

.how-body { display: grid; align-content: start; gap: 6px; min-width: 0; padding-top: 8px; }

.how-step h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.015em; }

.how-opt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.how-step p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

.how-promise {
  justify-self: start;
  margin-top: 6px;
  border-color: transparent;
  background: var(--accent-soft);
}

.how-step.is-final .how-promise { background: var(--positive-soft); }
.how-step.is-final .how-promise .icon { color: var(--positive); }

@media (min-width: 1100px) {
  .how-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 14px; }

  .how-step { grid-template-columns: 1fr; row-gap: 14px; padding-bottom: 0; }

  .how-step::after {
    top: calc(var(--dot) / 2 - 1px);
    right: -4px;
    bottom: auto;
    left: calc(var(--dot) + 10px);
    width: auto;
    height: 2px;
  }

  .how-body { padding-top: 0; }
  .how-step h3 { font-size: 1rem; }
  .how-step p { font-size: 0.875rem; }
  .how-promise { font-size: 0.75rem; }
}

.how-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--bg);
  box-shadow: 0 18px 40px -28px rgba(23, 38, 59, 0.45);
}

.how-close p { flex: 1 1 300px; min-width: 0; color: var(--muted); }
.how-close strong { color: var(--text); }
.how-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--accent); }

.faq-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease;
}

.faq-toggle::after { transform: rotate(90deg); }

.faq details[open] .faq-toggle {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.faq details[open] .faq-toggle::after { transform: rotate(0deg); }

.faq-answer {
  padding: 0 52px 24px 0;
  color: var(--muted);
}

.faq-answer p + p { margin-top: 12px; }

.faq-answer a { color: var(--text); font-weight: 600; }

@media (min-width: 960px) {
  .faq summary { padding: 26px 0; font-size: 1.1875rem; }
}

/* ---------- Quote: banner form ---------- */
/* Cobalt-tinted band: headline, trust ticks, phone for callers, one-row form. */

.qb {
  --band: #EEF4FC;
  --grid-line: rgba(29, 95, 191, 0.07);
  --placeholder: #8A99AD;
  --ring: rgba(29, 95, 191, 0.16);
  --ring-neg: rgba(193, 52, 64, 0.16);

  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
  background:
    radial-gradient(56rem 28rem at 88% -12%, rgba(255, 255, 255, 0.9), transparent 62%),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 64px),
    var(--band);
}

.qb:focus { outline: none; }

/* Clips the decorative bolt; the band itself stays unclipped so the service list can open past it */
.qb-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.qb-bolt {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 360px;
  height: 360px;
  color: var(--accent);
  opacity: 0.08;
  stroke-width: 0.75;
  pointer-events: none;
}

.qb-inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.qb-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
}

@media (min-width: 940px) {
  .qb-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; }
}

.qb-pitch { display: grid; gap: 18px; min-width: 0; }

.qb-pitch h2 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.qb-pitch h2 em { color: var(--accent); font-style: normal; }
.qb-pitch .sec-label { margin-bottom: 0; }

.qb-ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; }

.qb-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9688rem;
  font-weight: 600;
}

.qb-ticks .icon { width: 22px; height: 22px; color: var(--accent); }
.qb-ticks span span { color: var(--muted); font-weight: 500; }

.qb-callers {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 940px) {
  .qb-callers {
    padding: 4px 0 4px 36px;
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }
}

.qb-callers small { color: var(--muted); font-size: 0.9375rem; font-weight: 500; }

/* Phone number always stays on one line */
.qb-num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 940px) {
  .qb-num { font-size: clamp(1.625rem, 3.6vw - 6px, 2.375rem); }
}

.qb-num { min-height: 44px; }
.qb-toggle { min-height: 44px; }

.qb-num .icon { width: 0.9em; height: 0.9em; color: var(--accent); stroke-width: 1.75; }
.qb-num:hover { color: var(--accent-strong); }

.qb-callers p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.qb-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qb-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--negative);
}

/* Form panel */
.qb-panel {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--bg);
  box-shadow: 0 40px 80px -44px rgba(23, 38, 59, 0.45), 0 2px 6px rgba(23, 38, 59, 0.05);
}

.qb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

@media (min-width: 900px) {
  .qb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .qb-row .btn { margin-top: 30px; }
}

@media (max-width: 899px) {
  .qb-row .btn { width: 100%; }
}

.qb-field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.qb-field > label { color: var(--text); font-size: 0.9063rem; font-weight: 600; }
.qb-field .req { color: var(--negative); }
.qb-field .opt { color: var(--muted); font-weight: 400; }

.qb-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.4 var(--font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.qb-input { min-height: 96px; resize: vertical; }

select.qb-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A99AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.qb-input::placeholder { color: var(--placeholder); }

/* Service picker: themed listbox driven by a hidden native select */
.qb-select { position: relative; }

.qb-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.qb-select-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 42px;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5FBF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.qb-select-btn:hover { border-color: var(--accent); }

.qb-select-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5FBF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.qb-select-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.qb-select-icon .icon { width: 18px; height: 18px; }
.qb-select-icon.is-emergency { background: var(--negative-soft); color: var(--negative); }

.qb-select-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.qb-select-value.is-placeholder { color: var(--placeholder); }

.qb-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: min(380px, 60vh);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 28px 56px -24px rgba(23, 38, 59, 0.38), 0 2px 6px rgba(23, 38, 59, 0.06);
  animation: qb-drop 0.14s ease-out;
}

.qb-options.is-up { top: auto; bottom: calc(100% + 8px); }

@media (min-width: 900px) {
  .qb-options { width: max(100%, 340px); }
}

@keyframes qb-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.qb-opt {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.qb-opt.is-emergency {
  margin-top: 6px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 -7px 0 -6px var(--line);
}

.qb-opt.is-active { background: var(--surface); }

.qb-opt-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}

.qb-opt-icon .icon { width: 20px; height: 20px; }
.qb-opt.is-emergency .qb-opt-icon { background: var(--negative-soft); color: var(--negative); }

.qb-opt-text { display: grid; min-width: 0; line-height: 1.3; }
.qb-opt-text b { color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.qb-opt-text small { color: var(--muted); font-size: 0.8125rem; }

.qb-opt-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--negative-soft);
  color: var(--negative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.qb-opt-check { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.25; visibility: hidden; }
.qb-opt[aria-selected="true"] .qb-opt-check { visibility: visible; }
.qb-opt[aria-selected="true"] .qb-opt-text b { color: var(--accent-strong); }

/* Narrow phones: tighter rows, names only, so every option stays on one line */
@media (max-width: 479.98px) {
  .qb-opt {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 10px;
    min-height: 48px;
    padding: 6px 8px;
  }

  .qb-opt-icon { width: 32px; height: 32px; }
  .qb-opt-icon .icon { width: 18px; height: 18px; }
  .qb-opt-text b { font-size: 0.9063rem; }
  .qb-opt-text small { display: none; }
  .qb-opt-check { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .qb-options { animation: none; }
}


.qb-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}

.has-error .qb-input { border-color: var(--negative); }
.has-error .qb-input:focus { box-shadow: 0 0 0 4px var(--ring-neg); }

.qb-error { color: var(--negative); font-size: 0.8438rem; font-weight: 500; }
.qb-error:empty { display: none; }

.qb-count {
  justify-self: end;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.qb-below {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 16px;
}

.qb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 0.9375rem/1.3 var(--font);
  cursor: pointer;
}

.qb-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.qb-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.qb-toggle:hover { color: var(--accent-strong); }

.qb-fine { color: var(--muted); font-size: 0.8438rem; }

.qb-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}

@media (min-width: 700px) {
  .qb-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-more .qb-full { grid-column: 1 / -1; }
}

.qb-alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--negative-soft);
  color: var(--negative);
  font-size: 0.9375rem;
  font-weight: 500;
}

.qb-success {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}

.qb-success:focus { outline: none; }

.qb-success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--positive-soft);
  color: var(--positive);
}

.qb-success-icon .icon { width: 28px; height: 28px; stroke-width: 2; }

.qb-success-body { display: grid; justify-items: start; gap: 10px; min-width: 0; }

.qb-success h3 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.qb-success p { max-width: 40rem; color: var(--muted); }
.qb-success p a { color: var(--text); font-weight: 700; white-space: nowrap; }

@media (max-width: 480px) {
  .qb-success { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer: light minimal ---------- */
/* Brand statement and phone left, three quiet link columns right. */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 104px) 32px;
  font-size: 0.9375rem;
}

.ft-top {
  display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .ft-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
}

/* Left: brand, statement, direct lines */
.ft-statement {
  margin-top: 28px;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.35; letter-spacing: -0.02em; font-weight: 500;
  max-width: 24ch;
}
.ft-lines { margin-top: 32px; display: grid; gap: 6px; }
.ft-phone {
  display: inline-flex; align-items: baseline; gap: 12px; justify-self: start;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .25s ease, color .15s ease;
}
.ft-phone:hover { color: var(--accent-strong); background-size: 100% 1.5px; }
.ft-lines .ft-note { color: var(--muted); }
.ft-lines .ft-note b { color: var(--text); font-weight: 600; }
.ft-mail { justify-self: start; margin-top: 10px; color: var(--accent); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.ft-mail:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Right: three columns */
.ft-cols {
  display: grid; gap: 40px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ft-cols > * { min-width: 0; }
.ft-visit { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .ft-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.1fr); }
  .ft-visit { grid-column: auto; }
}
.ft-col-title {
  margin-bottom: 18px;
  color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0;
}
.ft-links li + li { margin-top: 10px; }
.ft-links a { text-decoration: none; }
.ft-links a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }

.ft-visit address { line-height: 1.6; }
.ft-visit .ft-dir { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 500; text-decoration: none; }
.ft-visit .ft-dir:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft-hours { margin-top: 20px; display: grid; gap: 4px; }
.ft-hours div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 12px; }
.ft-hours dt { color: var(--muted); }

/* Service area line */
.ft-area {
  display: grid; gap: 6px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (min-width: 1000px) {
  .ft-area { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
}
.ft-area h2 { color: var(--muted); font-size: 0.8125rem; font-weight: 500; line-height: 1.8; }
.ft-area p { color: var(--muted); }
.ft-area p b { color: var(--text); font-weight: 600; }

/* Bottom bar */
.ft-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.8125rem;
}
.ft-bottom-meta { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.ft-legal { display: flex; gap: 24px; }
.ft-legal a { text-decoration: none; color: var(--text); }
.ft-legal a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ft-phone { transition: none; }
}

.site-footer address { font-style: normal; }
.site-footer dl,
.site-footer dd { margin: 0; }
.site-footer .brand { margin-right: 0; }
.site-footer .brand-name { font-size: 1.25rem; }
.site-footer .brand-mark { width: 44px; height: 44px; }
.ft-phone { min-height: 44px; align-items: center; white-space: nowrap; }

/* Comfortable tap targets for footer links on phones and touch screens */
@media (max-width: 767.98px), (pointer: coarse) {
  .ft-links li + li { margin-top: 0; }

  .ft-links a,
  .ft-legal a,
  .ft-visit .ft-dir,
  .ft-mail {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .ft-col-title { margin-bottom: 6px; }
  .ft-hours { margin-top: 12px; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .svc-live::before { animation: none; }
}