/* ============================================
   Mississauga Garage Door Repair — Design System
   Navy + Orange, Switzer (single family, weight contrast)
   ============================================ */

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

:root,
[data-theme='light'] {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.125rem);
  --text-2xl: clamp(1.875rem, 1.2rem + 2.1vw, 3rem);
  /* Switzer sets ~7% wider than the previous display face, so the top of
     the scale comes down to keep hero headlines at three lines */
  --text-3xl: clamp(2.25rem, 1.15rem + 3.1vw, 3.9rem);

  /* Elevation — layered, soft, realistic */
  --shadow-xs: 0 1px 2px rgba(15,31,66,0.05);
  --elev-1: 0 1px 2px rgba(15,31,66,0.04), 0 2px 6px rgba(15,31,66,0.04);
  --elev-2: 0 1px 2px rgba(15,31,66,0.04), 0 4px 12px rgba(15,31,66,0.06), 0 12px 28px rgba(15,31,66,0.05);
  --elev-3: 0 2px 4px rgba(15,31,66,0.05), 0 12px 28px rgba(15,31,66,0.09), 0 32px 64px rgba(15,31,66,0.09);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Colors — Navy + Orange brand */
  --color-bg: #f8f8f6;
  --color-surface: #ffffff;
  --color-surface-2: #fbfbf9;
  --color-surface-offset: #f1efe9;
  --color-surface-dynamic: #e9e6de;
  --color-divider: #e2e0d8;
  --color-border: #d8d5cb;

  --color-text: #12203f;
  --color-text-muted: #56607a;
  /* WCAG AA 4.5:1 against both --color-surface (#fff) and --color-bg (#f8f8f6).
     Was #9aa0b3, which measured 2.45:1 on --color-bg and failed AA. */
  --color-text-faint: #6b7285;
  /* Accessible orange for TEXT on light surfaces. --color-primary (#d9691e)
     measures only 3.51:1 on white, which fails AA for anything under 24px.
     #b04d0e measures 5.37:1 on white and 5.05:1 on --color-bg. Reserve
     --color-primary itself for fills, borders, icons and text on navy. */
  --color-primary-text: #b04d0e;
  --color-accent: var(--color-primary-text);
  --color-text-inverse: #f8f8f6;

  --color-navy: #0f1f42;
  --color-navy-2: #17275c;
  /* availability accent, hero live strip only */
  --color-live: #4ade80;
  --color-navy-light: #22366e;

  --color-primary: #d9691e;
  --color-primary-hover: #b8540f;
  --color-primary-active: #96430a;
  --color-primary-highlight: #f6ddc4;

  --color-success: #2f7a4f;
  --color-success-highlight: #d3e8da;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(15, 25, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 25, 45, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 25, 45, 0.16);

  --content-narrow: 640px;
  --content-default: 980px;
  --content-wide: 1240px;

  /* One family, weight contrast rather than font contrast. Switzer is a
     Swiss neo-grotesk: precise, no decorative quirks, corporate-credible. */
  --font-display: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

[data-theme='dark'] {
  --color-bg: #0b1226;
  --color-surface: #101a34;
  --color-surface-2: #131f3c;
  --color-surface-offset: #16223f;
  --color-surface-dynamic: #1b2a4c;
  --color-divider: #223055;
  --color-border: #2a3a63;
  --color-text: #eceef4;
  --color-text-muted: #a4acc4;
  /* Was #6b7494 at 3.73:1 on --color-surface. #8b93ad measures 5.64:1. */
  --color-text-faint: #8b93ad;
  /* On the dark surface a lighter orange is needed instead. 6.49:1 on #101a34. */
  --color-primary-text: #e8863f;
  --color-text-inverse: #0b1226;
  --color-navy: #0b1226;
  --color-navy-2: #101a34;
  --color-live: #4ade80;
  --color-navy-light: #1b2a4c;
  --color-primary: #f0904a;
  --color-primary-hover: #f3a468;
  --color-primary-active: #f6b985;
  --color-primary-highlight: #3a2b1c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
}
h1 { letter-spacing: -0.032em; line-height: 1.04; }
h2 { letter-spacing: -0.026em; line-height: 1.08; }
h3 { letter-spacing: -0.018em; }
p, li, figcaption { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(217, 105, 30, 0.25); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

a, button, [role='button'], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

.sr-only {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap; border-width: 0;
}

/* ============ Layout ============ */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.wrap-narrow { max-width: var(--content-default); }
section { padding-block: clamp(var(--space-20), 9vw, var(--space-32)); }

/* ============ Announcement bar ============ */
.announce-bar {
  position: relative;
  z-index: 101;
  background: linear-gradient(90deg, var(--color-navy-2) 0%, var(--color-navy-light) 55%, var(--color-navy-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  overflow: hidden;
}
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding-block: 0;
}
.announce-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.announce-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  margin: 0;
  padding: 0 var(--space-2);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  line-height: 1.25;
  color: rgba(255,255,255,0.94);
  opacity: 0;
  visibility: hidden;
  transform: translateY(90%);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.55s;
  pointer-events: none;
}
.announce-item.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.announce-item.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateY(-90%);
}
.announce-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}
.announce-icon svg { width: 15px; height: 15px; display: block; }
.announce-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announce-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.announce-nav svg { width: 14px; height: 14px; display: block; }
.announce-nav:hover { color: #fff; background: rgba(255,255,255,0.12); }
.announce-dots {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: var(--space-1, 0.25rem);
}
.announce-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.announce-dot > span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.32);
  transition: background-color 0.25s ease, width 0.25s ease;
}
.announce-dot:hover > span { background: rgba(255,255,255,0.6); }
.announce-dot.is-active > span { width: 14px; border-radius: var(--radius-full); background: var(--color-primary); }

@media (max-width: 860px) {
  .announce-nav { display: none; }
  .announce-item { font-size: 0.75rem; }
  .announce-icon svg { width: 14px; height: 14px; }
}
@media (max-width: 560px) {
  .announce-dots { display: none; }
  .announce-inner { min-height: 38px; }
  .announce-track { height: 38px; }
  .announce-item { font-size: 0.72rem; letter-spacing: 0; }
}

/* Very narrow screens: let the message wrap to two lines instead of clipping. */
@media (max-width: 400px) {
  .announce-inner { min-height: 46px; }
  .announce-track { height: 46px; }
  .announce-item { align-items: center; gap: 0.45em; }
  .announce-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.28;
  }
  .announce-icon { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .announce-item,
  .announce-item.is-active,
  .announce-item.is-leaving { transition: opacity 0.2s ease; transform: none; }
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--color-navy) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: var(--space-3);
}
.site-header .wrap > div:last-child { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 1;
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
}
/* Brand lockup: mark + "MISSISSAUGA" over a letterspaced descriptor.
   The mark inherits colour from .logo, so it reverses on the navy header
   and prints navy in the light footer without duplicate markup. */
.logo .logo-mark { flex-shrink: 0; width: 34px; height: 31px; }
.logo .logo-text { display: flex; flex-direction: column; min-width: 0; }
.logo .logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  font-size: 1.02em;
  line-height: 1;
}
.logo .logo-tag {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 0.5em;
  letter-spacing: 0.148em;
  line-height: 1;
  margin-top: 0.34em;
  /* trailing tracking would otherwise push the block off-centre */
  margin-right: -0.148em;
}
@media (min-width: 420px) { .logo { font-size: 0.95rem; } .logo .logo-mark { width: 38px; height: 35px; } }
@media (min-width: 640px) { .logo { font-size: var(--text-base); } .logo .logo-mark { width: 44px; height: 40px; } }

.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
}
.main-nav a {
  color: rgba(255,255,255,0.82);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color 0.25s var(--ease-out);
}
.main-nav a:hover { color: #fff; }
.main-nav .has-dropdown { position: relative; }
/* Top-level nav links: keep label + chevron on one line */
.main-nav > a,
.main-nav .has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
/* Chevron points down for dropdown parents, and flips on open */
.main-nav .has-dropdown > a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(90deg);
  opacity: 0.6;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.main-nav .has-dropdown:hover > a svg,
.main-nav .has-dropdown:focus-within > a svg {
  transform: rotate(-90deg);
  opacity: 1;
}
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  min-width: 260px;
  max-height: 380px;
  overflow-y: auto;
  display: grid;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity var(--transition-interactive), transform var(--transition-interactive), visibility var(--transition-interactive);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a { color: var(--color-text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.dropdown a:hover { background: var(--color-surface-offset); color: var(--color-primary-text); }

.header-cta { display: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.btn-ghost:hover { background: rgba(255,255,255,0.16); }
.btn-outline { background: transparent; color: var(--color-navy); border: 1.5px solid var(--color-border); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; }

.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1;
}
.header-cta { display: none; }
@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}

@media (min-width: 900px) {
  .main-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .mobile-toggle { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: 80px 0 0 0;
  background: var(--color-navy);
  z-index: 99;
  padding: var(--space-6);
  overflow-y: auto;
  display: none;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  color: #fff;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--text-base);
}
.mobile-menu .mm-group-label { color: var(--color-primary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--space-6); font-weight: 600; }
.mobile-menu .mm-sub { padding-left: var(--space-4); color: rgba(255,255,255,0.7); }
.mobile-menu .mm-cta { display: inline-flex; margin-top: var(--space-6); border-bottom: none; padding: var(--space-3) var(--space-6); width: fit-content; }

/* ============ Hero ============ */
.hero {
  background: var(--color-navy);
  color: #fff;
  padding-block: clamp(var(--space-20), 10vw, var(--space-32));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Photographic backdrop */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Slight polish so the photo reads crisp rather than muddy under the scrim */
.hero-media img { filter: saturate(1.06) contrast(1.03); }
/* Scrim: anchored behind the copy on the left, then falls away fast so most
   of the photograph stays visible. Stops are tokens so each hero variant can
   dial its own strength. */
.hero {
  --scrim-a: 0.86;
  --scrim-b: 0.66;
  --scrim-c: 0.24;
  --scrim-d: 0.04;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(9,19,44,var(--scrim-a)) 0%,
      rgba(9,19,44,var(--scrim-b)) 30%,
      rgba(11,23,52,var(--scrim-c)) 58%,
      rgba(11,23,52,var(--scrim-d)) 100%),
    radial-gradient(120% 90% at 88% 10%, rgba(217,105,30,0.09), transparent 62%);
  pointer-events: none;
}
/* Interior heroes need a slightly firmer scrim than the homepage, not a lighter
   one: their photos are the brightest in the set and no booking card covers the
   right half, so the headline sits directly on open sky. Still far lighter than
   the original 0.93/0.84/0.58/0.34. */
.hero-compact, .neigh-hero { --scrim-a: 0.90; --scrim-b: 0.78; --scrim-c: 0.46; --scrim-d: 0.18; }
/* Between 900px and ~1180px the copy occupies proportionally more of the
   viewport, so it reaches into the falloff stops. Firm those up here only. */
@media (min-width: 900px) and (max-width: 1180px) {
  .hero-compact, .neigh-hero { --scrim-c: 0.64; --scrim-d: 0.38; }
}
/* On narrow screens the copy spans full width, so darken evenly -- but only
   as much as the text actually needs */
@media (max-width: 899px) {
  .hero::before {
    background:
      linear-gradient(to bottom, rgba(9,19,44,0.76) 0%, rgba(9,19,44,0.62) 48%, rgba(9,19,44,0.82) 100%);
  }
  /* Push the focal point of the photo into the visible band */
  .hero-media img { object-position: center 45%; }
}
/* Fine grain so large dark areas don't band */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.hero .wrap { position: relative; z-index: 1; }
/* Compact photo hero for interior pages */
.hero-compact { padding-block: clamp(var(--space-16), 7vw, var(--space-24)); }
.hero-compact .hero-media img { object-position: center 55%; }
/* Homepage crop, per breakpoint. These selectors are more specific than the
   generic mobile rule below, so each breakpoint must be stated explicitly or
   the desktop value would leak down and strand the hero on empty sky. */
@media (min-width: 900px) {
  /* Booking card covers the right half: bias left and down to the door. */
  .hero:not(.hero-compact) .hero-media img { object-position: 38% 72%; }
}
@media (max-width: 899px) {
  /* Full-width copy: centre on the door itself so the photo still reads. */
  .hero:not(.hero-compact) .hero-media img { object-position: 60% 66%; }
}
.hero-grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); } }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  /* Two shadows: a tight one for edge definition against bright highlights,
     and a wide soft one that pools darkness around the glyphs. */
  text-shadow: 0 1px 2px rgba(6,14,34,0.55), 0 2px 28px rgba(6,14,34,0.5);
}
.hero .lede {
  font-size: var(--text-lg);
  /* Full white, not 0.9 alpha: over a photo the alpha silently costs contrast */
  color: #fff;
  max-width: 46ch;
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(6,14,34,0.6), 0 1px 20px rgba(6,14,34,0.45);
}
/* Interior heroes have no side-by-side grid, so cap the measure to keep the
   headline inside the scrimmed zone instead of running into bright sky. */
@media (min-width: 900px) {
  .hero-compact h1, .neigh-hero h1 { max-width: 26ch; }
  .hero-compact .lede, .neigh-hero .lede { max-width: 44ch; }
  .hero-compact .breadcrumbs, .neigh-hero .breadcrumbs { max-width: 60ch; }
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }
.hero-trustbar { display: flex; gap: var(--space-10); flex-wrap: wrap; padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.14); }
.trust-item { display: flex; flex-direction: column; gap: var(--space-1); }
.trust-item .num { font-family: var(--font-display); font-size: var(--text-xl); color: #fff; letter-spacing: -0.03em; }
.trust-item .label { font-size: var(--text-xs); color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }

.hero-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  box-shadow: var(--elev-3);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.6);
}
[data-theme='dark'] .hero-card { border-color: rgba(255,255,255,0.08); }
.hero-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.hero-card .sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }

/* ============ Sections ============ */
.section-head { text-align: center; max-width: 660px; margin-inline: auto; margin-bottom: clamp(var(--space-12), 5vw, var(--space-20)); }
.section-head .eyebrow { justify-content: center; color: var(--color-primary-text); }
.section-head h2 { font-size: var(--text-2xl); color: var(--color-navy); margin-bottom: var(--space-5); }
.section-head p { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.65; }

/* Editorial left-aligned section head with hairline rule */
.section-head.align-start {
  text-align: left;
  margin-inline: 0;
  max-width: 720px;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.section-head.align-start .eyebrow { justify-content: flex-start; }
[data-theme='dark'] .section-head h2 { color: var(--color-text); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
/* Single column on phones — two photo cards side by side leaves each
   too narrow and cramps the headings */
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 620px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* grid3-two-col-ladder -- three-up from 760px squeezed guide cards to 241px,
   which forced three-line headings and nine-line body copy. Two-up first,
   three-up only once each card can hold about 335px. */
/* grid3-two-col-700 -- two-up at 620px still left cards at 274px. */
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .icon-box {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-highlight);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); color: var(--color-navy); }
[data-theme='dark'] .card h3 { color: var(--color-text); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.card .card-link { color: var(--color-primary-text); font-weight: 600; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); }

.bg-offset { background: var(--color-surface-offset); }
.bg-navy { background: var(--color-navy); color: #fff; }
.bg-navy .section-head h2 { color: #fff; }
.bg-navy .section-head p { color: rgba(255,255,255,0.7); }
/* Dark-section overrides. .btn-outline defaults to navy text on a transparent
   background, which renders navy-on-navy (1.0:1, invisible) inside .bg-navy.
   The eyebrow's --color-primary-text is darkened for light surfaces and only
   reaches 3.02:1 on navy, so both need light-context values here. */
.bg-navy .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.38); }
.bg-navy .btn-outline:hover { color: var(--color-navy); background: #fff; border-color: #fff; }
.bg-navy .eyebrow, .bg-navy .section-head .eyebrow { color: #f0a86e; }
.bg-navy .card p { color: var(--color-text-muted); }

/* Area / neighbourhood chips grid */
/* minmax(0, 1fr) is required — a bare 1fr has an automatic minimum of
   min-content, so long names like "Clarkson-Lorne Park" push the track
   wider than the viewport on small phones */
.area-chip-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 400px) { .area-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .area-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .area-chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-navy);
}
[data-theme='dark'] .area-chip { color: var(--color-text); }
.area-chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); box-shadow: var(--shadow-sm); }
.area-chip svg { color: var(--color-primary); flex-shrink: 0; }

/* Steps */
.steps { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; padding-left: var(--space-16); }
.step .step-num {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy); color: var(--color-primary);
  border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
}
.step h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Testimonials */
.testimonial { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.stars { color: var(--color-primary); font-size: var(--text-sm); margin-bottom: var(--space-4); letter-spacing: 0.1em; }
.testimonial p { font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-5); }
.testimonial .author { font-weight: 600; font-size: var(--text-sm); color: var(--color-navy); }
[data-theme='dark'] .testimonial .author { color: var(--color-text); }
.testimonial .role { color: var(--color-text-faint); font-size: var(--text-xs); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  padding: var(--space-5) 0;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
[data-theme='dark'] .faq-item summary { color: var(--color-text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: var(--text-lg); color: var(--color-primary-text); transition: transform var(--transition-interactive); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); max-width: 68ch; }

/* Booking form */
.booking-form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); color: var(--color-navy); }
[data-theme='dark'] .field label { color: var(--color-text); }
.field .req { color: var(--color-primary-text); }
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-primary); }
.textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: var(--text-xs); color: var(--color-text-faint); }
.form-success {
  display: none;
  background: var(--color-success-highlight);
  color: var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
}
.form-success.show { display: block; }

/* Footer */
.site-footer { background: var(--color-navy); color: rgba(255,255,255,0.75); padding-block: var(--space-16) var(--space-8); }
.footer-grid { display: grid; gap: var(--space-10); margin-bottom: var(--space-12); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h4 { color: #fff; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-5); font-family: var(--font-body); font-weight: 700; }
.footer-col a, .footer-col p { display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.65); margin-bottom: var(--space-3); }
/* Footer link rows sit at 23px from line-height alone; lift to the 24px minimum
   tap target (WCAG 2.5.8) without changing the visual rhythm. */
.footer-col a { display: flex; align-items: center; min-height: 24px; }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--text-xs); color: rgba(255,255,255,0.5); }

/* Breadcrumb */
.breadcrumb { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-8); flex-wrap: wrap; row-gap: 0; }
.breadcrumb a {
  color: var(--color-text-muted);
  /* WCAG 2.5.8 target size: the 12px breadcrumb text only rendered ~19px tall.
     Vertical padding lifts the hit area past 24px without moving the text, and
     the negative row gap keeps the crumb row visually the same height. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 3px;
}
.breadcrumb a:hover { color: var(--color-primary-text); }
/* Heroes paint a dark navy base behind the photo, so the default grey crumb
   colours measured 2.59:1. Scope light values to breadcrumbs inside a hero. */
.hero .breadcrumb { color: #aab5d0; }
.hero .breadcrumb a { color: #c8d0e4; }
.hero .breadcrumb a:hover { color: #ffffff; }
.hero .breadcrumb svg { color: #8f9bbd; }
/* Eyebrows inside a hero sit on navy, where the darkened --color-primary-text
   drops to 3.02:1. Use a lighter tint that clears 4.5:1 on #0f1f42. */
.hero .eyebrow { color: #f0a86e; }
.hero .eyebrow .dot, .hero .eyebrow svg { color: #f0a86e; }

/* Neighbourhood page specific */
.neigh-hero { padding-block: clamp(var(--space-16), 8vw, var(--space-20)); }
.local-info-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .local-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.local-info-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.local-info-item svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.local-info-item .local-info-label { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-1); color: var(--color-navy); }
[data-theme='dark'] .local-info-item .local-info-label { color: var(--color-text); }
.local-info-item p { font-size: var(--text-xs); color: var(--color-text-muted); }

.nearby-list { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nearby-list a {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
}
[data-theme='dark'] .nearby-list a { color: var(--color-text); }
.nearby-list a:hover { border-color: var(--color-primary); color: var(--color-primary-text); }

/* CTA banner */
.cta-banner {
  background: linear-gradient(120deg, var(--color-navy), var(--color-navy-2));
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(217,105,30,0.25), transparent 55%); }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.75); margin-bottom: var(--space-8); max-width: 50ch; margin-inline: auto; }
.cta-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.8);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
}
.theme-toggle:hover { background: rgba(255,255,255,0.16); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ============================================
   Premium photo components
   ============================================ */

/* Media card: photo-topped service card */
.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elev-1);
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.media-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-4px);
  border-color: var(--color-border);
}
.media-card .mc-figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-offset);
}
.media-card .mc-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out);
}
.media-card:hover .mc-figure img { transform: scale(1.045); }
/* Subtle navy wash unifies varied photography */
.media-card .mc-figure::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,31,66,0.30) 0%, rgba(15,31,66,0.04) 45%, transparent 75%);
  pointer-events: none;
}
.media-card .mc-body {
  padding: var(--space-6) var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.media-card h3 {
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin: 0;
}
[data-theme='dark'] .media-card h3 { color: var(--color-text); }
.media-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.media-card .card-link {
  color: var(--color-primary-text);
  font-weight: 600;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.media-card .card-link svg { transition: transform 0.35s var(--ease-out); }
.media-card:hover .card-link svg { transform: translateX(4px); }
/* Whole card clickable */
.media-card .mc-overlay-link {
  position: absolute; inset: 0;
  z-index: 2;
}

/* Split: asymmetric image + copy layout */
.split {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split.split-wide-media { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); }
  .split.reverse .split-media { order: 2; }
}
.split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elev-2);
  aspect-ratio: 4 / 3;
}
.split-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.split-copy h2 { font-size: var(--text-xl); color: var(--color-navy); margin-bottom: var(--space-5); }
[data-theme='dark'] .split-copy h2 { color: var(--color-text); }
.split-copy p { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; margin-bottom: var(--space-4); }

/* Feature list with hairline dividers */
.feature-list { display: flex; flex-direction: column; margin-top: var(--space-6); }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-divider);
  list-style: none;
}
.feature-list li:last-child { border-bottom: 1px solid var(--color-divider); }
.feature-list .fl-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--color-primary);
  margin-top: 2px;
}
.feature-list .fl-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-navy);
  margin-bottom: 2px;
  letter-spacing: -0.015em;
}
[data-theme='dark'] .feature-list .fl-text strong { color: var(--color-text); }
.feature-list .fl-text span { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }

/* Full-bleed photographic band with stats */
.photo-band {
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
}
.photo-band .pb-media { position: absolute; inset: 0; z-index: -2; }
.photo-band .pb-media img { width: 100%; height: 100%; object-fit: cover; }
.photo-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(9,19,44,0.94) 0%, rgba(9,19,44,0.82) 50%, rgba(11,23,52,0.62) 100%);
}
.photo-band h2 { color: #fff; }
.photo-band p { color: rgba(255,255,255,0.76); }

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 800px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.stat .stat-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.stat .stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.62);
  font-weight: 500;
}

/* Inline figure with caption */
.figure { margin: 0; }
.figure img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
}
.figure figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* Refine base card to match new elevation language */
.card {
  transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
  box-shadow: var(--elev-1);
  border-color: var(--color-divider);
}
.card:hover { box-shadow: var(--elev-2); transform: translateY(-4px); border-color: var(--color-border); }

/* Area chips: quieter, more refined */
.area-chip {
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.area-chip:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.area-chip svg { color: var(--color-primary); opacity: 0.55; transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.area-chip:hover svg { opacity: 1; transform: translateX(3px); }

/* ============================================
   <picture> is inline by default — make it a
   proper block so object-fit percentages resolve
   ============================================ */
picture { display: block; }
.hero-media picture,
.pb-media picture,
.media-card .mc-figure picture,
.split-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-media picture > img,
.pb-media picture > img,
.media-card .mc-figure picture > img,
.split-media picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.figure picture > img { width: 100%; height: auto; display: block; }

/* Equalise media-card title heights so rows align cleanly */
.media-card h3 { min-height: 2.2em; display: flex; align-items: flex-start; }
@media (max-width: 639px) { .media-card h3 { min-height: 0; } }

/* ============================================
   Mobile media-card tuning
   ============================================ */
@media (max-width: 619px) {
  /* Wider crop so a full-width card isn't excessively tall */
  .media-card .mc-figure { aspect-ratio: 16 / 9; }
  .media-card .mc-body { padding: var(--space-6); gap: var(--space-3); }
  .media-card h3 { font-size: var(--text-base); }
  .media-card p { font-size: var(--text-sm); }
  /* Cards are full width on phones, so soften the lift */
  .media-card:hover { transform: none; }
}
/* Two-up tablet range: columns are wide enough that titles fit on one
   line, so drop the reserved second line rather than leaving dead space */
@media (min-width: 620px) and (max-width: 959px) {
  .media-card h3 { min-height: 0; }
}

/* ============================================
   Long CTA labels on narrow phones
   e.g. "Book Service in Clarkson-Lorne Park"
   ============================================ */
@media (max-width: 520px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    line-height: 1.3;
  }
  .btn.btn-lg { padding-inline: var(--space-5); }
  /* Keep the chevron from being orphaned on its own line */
  .btn svg { flex-shrink: 0; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }
}

/* ============================================
   Switzer typographic refinements

   With one family doing all the work, hierarchy has to come from
   weight, size and tracking rather than a change of typeface.
   ============================================ */

/* Switzer is slightly wider than the previous display face, so headlines
   need marginally tighter tracking to hold the same compact silhouette. */
h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.03; }
h2 { font-weight: 700; letter-spacing: -0.028em; line-height: 1.07; }
h3 { font-weight: 600; letter-spacing: -0.02em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.015em; }

/* Body copy sits at 400 so the 600/700 headings read as a clear step up */
body { font-weight: 400; }

/* Lining tabular figures keep the stat row and postal codes aligned
   and stop numerals looking like body text */
.trust-item .num,
.stat .num,
.stat-row .num { font-variant-numeric: tabular-nums lining-nums; }

/* Small uppercase labels need looser tracking in a neo-grotesk, otherwise
   the caps crowd each other */
.eyebrow,
.footer-col h4,
.num-lbl,
.stat-label { letter-spacing: 0.07em; }

/* Optical alignment: large display text benefits from kerning being on */
h1, h2, h3 { font-kerning: normal; font-feature-settings: 'ss01' off; }

/* ============================================
   Hero trust bar on phones

   Flex-wrap left "Same-Day" stranded on its own row with a large gap.
   A 3-up grid keeps the three stats on one tidy row instead.
   ============================================ */
@media (max-width: 700px) {
  .hero-trustbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-6);
    align-items: start;
  }
  .trust-item .num { font-size: var(--text-lg); }
  .trust-item .label {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    line-height: 1.25;
    color: rgba(255,255,255,0.72);
  }
}

/* ============================================
   Expanded mobile menu

   The menu now lists every service and every neighbourhood, so it needs
   to scroll cleanly and end clear of the phone's own nav bar.
   ============================================ */
.mobile-menu {
  /* Stop the page behind the menu from scrolling when the menu hits its end */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Clear the on-screen system nav bar / home indicator */
  padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
}

/* 22 neighbourhoods in one column would be a very long scroll, so pair
   them up. Service names are long, so those stay full width. */
.mobile-menu .mm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}
.mobile-menu .mm-grid .mm-sub {
  padding-block: var(--space-3);
  font-size: var(--text-sm);
}

/* Tighter rhythm now that the list is long, while keeping every row a
   comfortable tap target */
.mobile-menu .mm-sub {
  padding-block: var(--space-3);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-menu .mm-group-label {
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Single column for the neighbourhood pairs on very narrow phones */
@media (max-width: 359px) {
  .mobile-menu .mm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Footer: continuation column + secondary nav */
.footer-col-cont { display: none; }
@media (min-width: 760px) { .footer-col-cont { display: block; } }
.footer-meta-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; margin: calc(var(--space-2) * -1) 0; }
/* Vertical padding lifts these to the 24px minimum tap target (WCAG 2.5.8). */
.footer-meta-nav a { color: rgba(255,255,255,0.65); display: inline-flex; align-items: center; min-height: 24px; padding: var(--space-1) 0; }
.footer-meta-nav a:hover { color: var(--color-primary); }

/* Footer lockup: .footer-col a is more specific than .logo, so restate */
.footer-col a.logo-footer {
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}
.footer-col a.logo-footer:hover { color: #fff; }
.footer-col a.logo-footer .logo-tag { color: var(--color-primary); }

/* ---------------------------------------------------------------------------
   Centred hero (booking page). A left-anchored scrim fights centred text, so
   this variant switches to a symmetric wash and centres the whole stack.
   --------------------------------------------------------------------------- */
.hero-center::before {
  background:
    linear-gradient(180deg, rgba(9,19,44,0.80) 0%, rgba(9,19,44,0.62) 45%, rgba(9,19,44,0.84) 100%),
    radial-gradient(70% 78% at 50% 46%, rgba(9,19,44,0.42), transparent 72%);
}
.hero-centered { text-align: center; }
.hero-centered .eyebrow { justify-content: center; }
.hero-centered h1 { max-width: 22ch; margin-inline: auto; }
.hero-centered .lede { max-width: 58ch; margin-inline: auto; }

/* ---- In-card lists (local knowledge cards on neighbourhood pages) ---- */
.plain-list,
.link-list {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.plain-list li,
.link-list li { margin-bottom: 8px; }
.plain-list li:last-child,
.link-list li:last-child { margin-bottom: 0; }
.plain-list li::marker,
.link-list li::marker { color: var(--color-accent); }

.link-list a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.link-list a:hover,
.link-list a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* --- Long-form local copy on area pages ------------------------------- */
/* Measure capped near 68ch: past roughly 75 characters the eye loses the
   line start on the return sweep, which is what makes long copy tiring. */
.prose-block { max-width: 68ch; }
.prose-block p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
}
.prose-block p + p { margin-top: var(--space-4); }
.prose-block p:last-child { margin-bottom: 0; }

/* Card body copy is denser than hero prose but must not drop below 1.6 */
.card > p { line-height: 1.7; }

.micro {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.micro a { color: var(--color-primary-text); font-weight: 600; }
.micro a:hover { text-decoration: underline; }
/* Source links wrap as a group rather than breaking mid-label */
.micro a { display: inline-block; }

/* Stacked variant of .steps for 4-5 sequential items, where a 3-up grid
   would orphan the last row. Overrides the 760px 3-column rule. */
.steps-stack { gap: var(--space-6); list-style: none; }
@media (min-width: 760px) {
  .steps-stack { grid-template-columns: 1fr; }
}
.steps-stack .step { padding-left: var(--space-16); }
.steps-stack .step h3 { font-size: var(--text-lg); }
.steps-stack .step p { font-size: var(--text-base); line-height: 1.7; max-width: 62ch; }

/* --- Guide pages ------------------------------------------------------- */
/* Pulled-forward direct answer. Left rule rather than a filled panel so it
   reads as emphasis without competing with the hero above it. */
.answer-box {
  border-left: 3px solid var(--color-primary);
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding-right: var(--space-6);
}
.answer-box p {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 0;
  max-width: 60ch;
}
.step-verdict {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.step-verdict strong { color: var(--color-navy); }
[data-theme='dark'] .step-verdict strong { color: var(--color-primary); }

/* Two text columns (no image): centring each column independently leaves the
   eyebrows and headings on different baselines. Align to the top instead. */
.split.split-text { align-items: start; }
.split.split-text .split-copy p { max-width: 58ch; }


/* ============ Polish: sticky CTA, reveal, form states ============ */

/* ---- Scroll reveal -------------------------------------------------------
   Gated behind html.js so no-JS visitors and crawlers always get full content.
   .reveal-ready is set by JS only for elements below the fold, which keeps
   above-the-fold content from flashing in on load.                         */
.js [data-reveal].reveal-ready {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js [data-reveal].reveal-ready.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.js [data-reveal].reveal-ready.is-visible[data-reveal-delay="1"] { transition-delay: .08s; }
.js [data-reveal].reveal-ready.is-visible[data-reveal-delay="2"] { transition-delay: .16s; }
.js [data-reveal].reveal-ready.is-visible[data-reveal-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal].reveal-ready,
  .js [data-reveal].reveal-ready.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Sticky mobile CTA (three buttons) ----------------------------------
   Equal-width flex children so the row never overflows on a 320px phone.
   One solid brand button flanked by two translucent ones: three identical
   loud buttons would give the thumb no idea which one is the main action. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99;
  display: none;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--color-navy-2);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -6px 22px rgba(6, 12, 30, .28);
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.is-on { transform: translateY(0); }

.sticky-cta-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-decoration: none;
  /* 44px minimum touch target. */
  min-height: 44px;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .12s var(--ease-out);
}
.scb-primary { background: var(--color-primary); color: #fff; }
.scb-primary:hover, .scb-primary:focus-visible { background: var(--color-primary-hover); }
.scb-ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}
.scb-ghost:hover, .scb-ghost:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .34);
}
.sticky-cta-btn:active { transform: translateY(1px); }

@media (max-width: 860px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 76px; }
}
@media (max-width: 380px) {
  /* "Get a Quote" is the widest label; tighten rather than let it wrap. */
  .sticky-cta { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .sticky-cta-btn { font-size: .79rem; padding: 11px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ---- Form loading / validation states ------------------------------------ */
.btn-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn.is-loading { pointer-events: none; opacity: .92; }
.btn.is-loading .btn-label { display: none; }
.btn.is-loading .btn-spinner { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2s; }
}

.booking-form .field.has-error .input,
.booking-form .field.has-error .select,
.booking-form .field.has-error .textarea {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}
.field-error {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  font-weight: 500;
  color: #c0392b;
}
[data-theme='dark'] .field-error { color: #ff8a76; }
[data-theme='dark'] .booking-form .field.has-error .input,
[data-theme='dark'] .booking-form .field.has-error .select,
[data-theme='dark'] .booking-form .field.has-error .textarea {
  border-color: #ff8a76;
  box-shadow: 0 0 0 3px rgba(255, 138, 118, .16);
}

.form-error-summary {
  margin: 4px 0 14px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(192, 57, 43, .34);
  background: rgba(192, 57, 43, .08);
  color: #a5321f;
  font-size: .88rem;
  font-weight: 500;
}
.form-error-summary[hidden] { display: none; }
[data-theme='dark'] .form-error-summary {
  color: #ffb3a4;
  border-color: rgba(255, 138, 118, .4);
  background: rgba(255, 138, 118, .1);
}

/* ---- Thank-you page ------------------------------------------------------ */
.thanks-hero { padding-top: 62px; padding-bottom: 52px; }
.thanks-mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(217, 105, 30, .14);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.thanks-mark svg { width: 30px; height: 30px; stroke-width: 2.4; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-bottom: 1px solid var(--color-border); }
.link-list li:last-child { border-bottom: 0; }
.link-list a {
  display: block;
  padding: 13px 2px;
  font-weight: 500;
  font-size: var(--text-base);
}


/* ---- Proudly Canadian hero badge ---- */
.ca-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 15px 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.3;
}
.ca-flag {
  width: 30px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
@media (max-width: 560px) {
  .ca-badge { font-size: .8rem; padding: 7px 13px 7px 10px; gap: 9px; }
  .ca-flag { width: 26px; height: 13px; }
}
@media (max-width: 400px) {
  .ca-badge { align-items: flex-start; }
  .ca-flag { margin-top: 2px; }
}

/* ---- Tighten hero top spacing on small screens ---- */
@media (max-width: 899px) {
  .hero:not(.hero-compact):not(.neigh-hero) {
    padding-top: var(--space-10);
  }
}
@media (max-width: 560px) {
  .hero:not(.hero-compact):not(.neigh-hero) {
    padding-top: var(--space-8);
  }
  .hero .ca-badge { margin-bottom: var(--space-4); }
}


/* ---- Compact booking form: soft filled fields, tighter rhythm ---- */
.booking-form { gap: var(--space-4); }
.form-row { gap: var(--space-4); }
.form-row.cols-2-always { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 420px) { .form-row.cols-2-always { grid-template-columns: 1fr; gap: var(--space-4); } }

.field label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .005em;
  margin-bottom: 5px;
  color: var(--color-text-muted);
}
[data-theme='dark'] .field label { color: var(--color-text-muted); }

.input, .select, .textarea {
  padding: 9px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-offset);
  font-size: .9rem;
  line-height: 1.35;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-faint); }
.input:focus, .select:focus, .textarea:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(217,105,30,.16);
  outline: none;
}
[data-theme='dark'] .input:focus,
[data-theme='dark'] .select:focus,
[data-theme='dark'] .textarea:focus { box-shadow: 0 0 0 3px rgba(240,144,74,.22); }
.textarea { min-height: 62px; }

.booking-form .btn-lg { padding: 12px var(--space-6); font-size: .95rem; }
.form-note { font-size: .72rem; line-height: 1.45; margin-top: -2px; }

.hero-card { padding: clamp(var(--space-5), 2.4vw, var(--space-8)); }
.hero-card h3 { font-size: 1.15rem; }
.hero-card .sub { font-size: .82rem; margin-bottom: var(--space-4); line-height: 1.45; }

/* Keep the submit label and chevron on one line */
.btn-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn-label svg { display: inline-block; flex: none; }
/* Native date picker legible in dark mode */
[data-theme='dark'] .input[type="date"] { color-scheme: dark; }

/* Badge hugs its text: drop the descriptor before it can wrap to a second line */
.ca-badge { max-width: 100%; }
.ca-text { min-width: 0; }
@media (max-width: 660px) { .ca-more { display: none; } }
@media (max-width: 400px) { .ca-badge { align-items: center; } .ca-flag { margin-top: 0; } }

/* ---- Trust badge strip under the booking form ---- */
.trust-badges {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.trust-badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--color-text-muted);
}
.tb-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--color-primary-text);
}
.tb-ico svg { width: 100%; height: 100%; display: block; }
.tb-ico svg[aria-label="Flag of Canada"] {
  width: 18px;
  height: 9px;
  border-radius: 1.5px;
}
@media (max-width: 400px) {
  .trust-badges { gap: 7px 12px; }
  .trust-badges li { font-size: .71rem; }
}

/* ---- Brands we service ---- */
.brands-band { padding-block: var(--space-16); }
.brands-head { max-width: 62ch; margin-bottom: var(--space-8); }
.brands-head h2 { margin: var(--space-2) 0 var(--space-3); }
.brands-head p { color: var(--color-text-muted); margin: 0; }

/* BRAND_LOGOS_APPLIED */
.brand-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.brand-mark {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3) var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.brand-mark:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 31, 66, .10);
}
.brand-mark picture { display: block; width: 100%; }
.brand-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 168px;
  margin-inline: auto;
}
.bm-text {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: #1d2433;
}
@media (min-width: 620px) {
  .brand-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .brand-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .brand-mark { min-height: 88px; }
  .brand-mark img { max-width: 190px; }
}
.brands-note {
  margin: var(--space-5) 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--color-text-faint);
  max-width: 78ch;
}
@media (max-width: 480px) {
  .brand-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .brand-mark { min-height: 58px; }
  .bm-a, .bm-b { font-size: .78rem; letter-spacing: .04em; }
}


/* REALWORK_BAND -- genuine job photo shown site-wide */
.realwork-band {
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-offset);
}
.rw-figure {
  margin: 0;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.rw-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 10px);
}
.rw-caption { margin: 0; }
.rw-caption p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted, inherit);
  font-size: .95rem;
  line-height: 1.6;
}
.rw-caption p:last-child { margin-bottom: 0; }
.rw-lead {
  font-weight: 700;
  font-size: 1.05rem !important;
  color: var(--color-text) !important;
}
@media (min-width: 900px) {
  .rw-figure {
    grid-template-columns: 420px minmax(0, 1fr);
    gap: var(--space-8);
  }
}


/* Real-photo badge under the home services heading.
   Centred to match .section-head, but the text inside stays left-aligned so a
   three-line wrap on mobile does not turn into a ragged centred block. */
.photo-note {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  max-width: 560px;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.photo-note svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-primary);
}
.photo-note strong { color: var(--color-navy); font-weight: 600; }
[data-theme='dark'] .photo-note { background: var(--color-surface-2); }
[data-theme='dark'] .photo-note strong { color: var(--color-text); }

/* ---------- Booking form: undelivered-request panel ----------
   Shown only when the POST genuinely failed or no receiver exists. Styled as a
   warning, never as a confirmation, so it can't be mistaken for success. */
.form-fallback {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-primary);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.form-fallback[hidden] { display: none; }
.form-fallback p { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.6; }
.form-fallback .ff-title {
  font-weight: 700;
  color: var(--color-primary-text, var(--color-primary));
  font-size: 1rem;
}
.form-fallback .ff-note { margin-bottom: 0; color: var(--color-text-muted); }
.ff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ff-actions .btn { flex: 1 1 auto; justify-content: center; }
.ff-actions .btn[hidden] { display: none; }

/* ---- Hero live same-day strip -------------------------------------------
   Sits under the hero buttons on the dark hero image. Translucent so it reads
   as a secondary signal, not a third competing CTA. The pulsing dot is an
   attention accent and is switched off under prefers-reduced-motion. */
.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* The trustbar below has a border-top with no margin, so without this the
     divider line would sit flush against the pill. */
  margin: var(--space-5) 0 var(--space-6);
  padding: 0.62rem 1.15rem 0.62rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.hero-live:hover,
.hero-live:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .42);
  transform: translateY(-1px);
}
.live-dot {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-live);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-live);
  animation: liveDotPulse 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes liveDotPulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}
@media (max-width: 600px) {
  .hero-live {
    font-size: .93rem;
    padding: .58rem 1rem .58rem .85rem;
    margin: var(--space-4) 0 var(--space-5);
  }
}

/* ---- Location map -------------------------------------------------------
   Fixed aspect ratio so the lazy iframe cannot shift the page when it loads.
   Google's iframe cannot be styled from here, so the rounded corners come
   from the wrapper clipping it. */
.map-frame {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .map-frame { aspect-ratio: 4 / 3; }
}

/* MAP_POLISH: hairline above the map so it reads as its own block even when
   the section preceding it shares the page background. */
.map-section {
  border-top: 1px solid var(--color-divider);
}
.map-section .section-head {
  margin-bottom: var(--space-8);
}
.map-section .map-note {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}


/* ============================================
   Dark-theme contrast
   ============================================ */
/* dark-theme primary-fill contrast fix */
/* In dark theme --color-primary lightens to #f0904a; white ink on that fill
   measures 2.39:1 (hover 2.03, active 1.72), under the 3.0 large-text AA
   floor. Navy ink on the same fills measures 6.79 / 7.97 / 9.42. */
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .scb-primary,
[data-theme='dark'] .skip-link {
  color: #0f1f42;
}
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-primary:active,
[data-theme='dark'] .scb-primary:hover,
[data-theme='dark'] .scb-primary:active {
  color: #0f1f42;
}
[data-theme='dark'] .btn-primary .btn-label,
[data-theme='dark'] .scb-primary .btn-label {
  color: inherit;
}


/* header-lockup-overflow-fix */
/* The desktop header needs ~1092px: logo lockup 173 + nav 619 + theme toggle
   and CTA 228 + 48 wrap padding. The nav previously switched on at 900px, so
   between 900 and 1091px the shrinkable .logo collapsed and its nowrap
   wordmark overlapped the nav links. Hold the mobile menu until 1140px. */
@media (min-width: 640px) {
  .site-header .logo { flex-shrink: 0; }
}
@media (max-width: 1139px) {
  .site-header .main-nav { display: none; }
  .site-header .mobile-toggle { display: flex; }
}
@media (min-width: 1140px) {
  .site-header .main-nav { display: flex; }
  .site-header .mobile-toggle { display: none; }
}




/* nav-panel-and-card-polish */

/* 1. No reserved title block. A fixed three-line reservation left a full empty
      line under short headings, which read as a layout gap. Card heights stay
      even because `.media-card p { flex: 1 }` already pushes the link down. */
.media-card .mc-body h3 { min-height: 0; }

/* 2. Roomier card grid. Four-up started at 960px, which squeezed cards to
      about 219px. Three-up on laptops, four-up only when there is room. */
@media (min-width: 900px) and (max-width: 1239px) {
  .grid.grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  .grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 3. Dropdown panels. 260px was narrower than the longest service name, so
      every label wrapped, and a 380px max-height added an inner scrollbar.
      Anchored to the trigger, sized to its content, laid out in two columns. */
.main-nav .dropdown {
  left: 0;
  right: auto;
  transform: translateY(8px);
  width: max-content;
  max-width: min(92vw, 640px);
  min-width: 0;
  max-height: none;
  overflow: visible;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  gap: 0;
}
.main-nav .has-dropdown:hover .dropdown,
.main-nav .has-dropdown:focus-within .dropdown { transform: translateY(0); }
.main-nav .dropdown .dd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--space-5);
}
.main-nav .dropdown a {
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
}
.main-nav .dropdown .dd-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-primary-text);
  font-weight: 600;
  font-size: var(--text-sm);
}
.main-nav .dropdown .dd-all:hover { background: transparent; text-decoration: underline; }
.main-nav .dropdown .dd-all svg { width: 15px; height: 15px; }

/* Both panels fit inside the viewport left-anchored at every width where the
   desktop nav is shown, so no right-edge fallback is needed. */

/* phone-wiring-v1 -- header/footer/sticky Call link styling. Only renders
   when a site's data.PHONE_NUMBER is set; sites with no number never emit
   these elements, so this CSS is inert dead weight there (harmless). */
.header-call {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.22);
}
.header-call:hover, .header-call:focus-visible { background: rgba(255,255,255,0.1); color: var(--color-primary); border-color: var(--color-primary); }
.header-call svg { flex-shrink: 0; }
@media (min-width: 1140px) {
  .header-call { display: inline-flex; }
}

.footer-call {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  color: #fff !important;
  font-weight: 600;
  margin-top: var(--space-2);
}
.footer-call:hover { color: var(--color-primary) !important; }
.footer-call svg { flex-shrink: 0; }