/* ============================================================
   Best Choice Appliance Services — Global Stylesheet
   Blue #0000FF — light theme
   ============================================================ */

/* Fonts loaded via <link> in HTML head for performance */

:root {
  /* ---- Color: Blue #0000FF, light only ---- */
  --clay: #0000FF;
  --clay-deep: #0000C7;
  --clay-tint: #EBEBFF;
  --ink: #0B1033;
  --ink-soft: #4A5068;
  --cream: #FFFFFF;
  --cream-deep: #F4F5FF;
  --butter: #4D5CFF;
  --pine: #1A1F7A;
  --pine-tint: #EBEBFF;
  --white: #FFFFFF;
  --line: #DEE1F5;

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Spacing scale ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Signature "sticker" shadow: flat, hard-offset, no blur ---- */
  --shadow-sm: 0 1px 2px rgba(36,33,29,0.08);
  --shadow-card: 0 3px 0 0 var(--ink);
  --shadow-card-hover: 0 5px 0 0 var(--ink);
  --shadow-overlay: 0 16px 40px rgba(36,33,29,0.22); /* only for true overlays: drawer, sticky sidebar */

  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --container: 1240px;
}

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

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
/* iOS Safari ignores overflow-x on <body>, so the off-canvas drawer parked
   past the right edge widened the page. clip (where supported) stops the
   sideways scroll without making <html> a scroll container. */
@supports (overflow-x: clip) { html { overflow-x: clip; } }

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  font-synthesis: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

/* ========= ICON UTILITY ========= */
.icon {
  width: 20px; height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
  display: inline-block;
  /* Without this an inline-block SVG sits its *bottom edge* on the text
     baseline, so the icon floats above the text's optical centre. Ignored
     inside flex containers, so it is safe as a global default. */
  vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 32px; height: 32px; }

/* ========= REDUCED MOTION ========= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ========= GSAP REVEAL: no CSS pre-hiding =========
   Deliberately NOT hiding .reveal/.reveal-stagger/.hero-timeline content via
   CSS. All content is visible by default, full stop. When GSAP + ScrollTrigger
   load successfully, animations.js uses gsap.from() to own the entire
   hide-then-reveal lifecycle itself (GSAP sets its own "from" state right as
   each tween starts). This means a slow/blocked CDN, ad-blocker, or JS error
   can never leave page content permanently invisible — worst case, GSAP
   simply never loads and everything renders in its normal final state. */

/* ========= TYPOGRAPHY ========= */
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  /* Fraunces fuses "ff" into one glyph, which read badly in "Stafford". */
  font-variant-ligatures: no-common-ligatures;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 500; }
h4 { font-size: 1.15rem; font-weight: 700; font-family: var(--font-body); color: var(--ink); }
/* .t4 = h4 styling on an <h3>, used for card and footer titles that sit
   directly under an <h2> so the heading outline never skips a level. */
.t4 { font-size: 1.15rem; font-weight: 700; font-family: var(--font-body); color: var(--ink); }
.prose .t4 { margin-top: 0; }
p { color: var(--ink-soft); line-height: 1.75; }

.clay { color: var(--clay); }
.text-white { color: var(--white) !important; }
.text-white p, .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white .t4 { color: var(--white); }
.text-center { text-align: center; }

/* ========= LAYOUT ========= */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 128px 0; }
.bg-cream-deep { background: var(--cream-deep); }
.bg-ink { background: var(--clay-tint); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.flex { display: flex; align-items: center; gap: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ========= BUTTONS ========= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--clay);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover {
  background: var(--clay-deep);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-card-hover);
}
.btn-outline {
  background: transparent;
  color: var(--clay);
  border-color: var(--clay);
}
.btn-outline:hover {
  background: var(--clay-tint);
  border-color: var(--clay);
  transform: translate(-2px, -2px);
}
.btn-outline-ink {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline-ink:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }
.btn-dark {
  background: var(--clay);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn-dark:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-card-hover); }
.btn-phone {
  background: var(--clay);
  color: var(--cream);
  font-size: 1.02rem;
  font-weight: 700;
  padding: 16px 34px;
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn-phone:hover { background: var(--clay-deep); transform: translate(-3px, -3px); box-shadow: var(--shadow-card-hover); }

/* ========= HEADER / NAV ========= */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--cream);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 4px 10px rgba(11,16,51,0.08);
  transition: var(--transition);
  height: 76px;
  contain: layout style;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 24px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
}

/* Wordmark logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}
/* Brand shield mark. Sourced from the "New logo concept" artwork, background
   keyed out to real transparency and recoloured white — the previous PNG was
   opaque and drew a light rounded-square chip on the navy bar. */
.logo-mark { height: 40px; width: auto; flex-shrink: 0; }
.logo-main { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; position: relative; display: inline-block; }
.logo-word-1 { color: var(--ink); }
.logo-word-2 { color: var(--clay); position: relative; }
.logo-underline { position: absolute; left: -2px; right: -2px; bottom: -4px; width: calc(100% + 4px); height: 6px; }
.logo-sub {
  font-size: 0.62rem;
  color: var(--ink-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 6px;
}
/* The whole site is light now (footer included), so the base logo colors
   above are already the on-light ones; these overrides are kept for clarity. */
header .logo-word-1 { color: var(--ink); }
header .logo-word-2 { color: var(--clay); }
header .logo-sub { color: var(--ink-soft); }
/* Kept for any other light-background context that still uses the class. */
.logo-on-light .logo-word-1 { color: var(--ink); }
.logo-on-light .logo-word-2 { color: var(--clay); }
.logo-on-light .logo-sub { color: var(--ink-soft); }

nav { display: flex; align-items: center; gap: 2px; }
nav a {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 14px;
  letter-spacing: 0.01em;
}
nav a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
nav a:hover, nav a.active { color: var(--ink); }
nav a:hover::after, nav a.active::after { transform: scaleX(1); }

/* Services dropdown (desktop). Opens on hover and on :focus-within, so it is
   keyboard-reachable without any JS. The trigger is a real link — Services
   still navigates to the hub page; the menu is an addition, not a gate.
   .nav-dd is the full 76px header height on purpose: the menu sits at
   top:100%, flush with the header's bottom edge, so there is no dead gap for
   the pointer to cross on the way down.
   Note: header has `contain: layout style`, which does NOT clip painting
   (only `contain: paint` would), so the menu renders outside the header box. */
.nav-dd { position: relative; display: flex; align-items: center; height: 76px; }
/* The trigger is a flex row for the same reason .mnav-toggle is: it centres
   the caret against the label instead of hanging it off the baseline. */
.nav-dd > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a { padding: 9px 12px; font-size: 0.84rem; white-space: nowrap; border-radius: var(--radius-sm); }
.nav-dd-menu a:hover { background: var(--cream-deep); }
/* The global `nav a::after` underline would otherwise draw inside every
   dropdown row — the hover state here is the background tint instead. */
.nav-dd-menu a::after { display: none; }
/* icon-chevron points right (it is the breadcrumb separator), so it needs a
   quarter turn to read as a dropdown caret: down at rest, up when open. */
/* 13px, not the 16px .icon-sm default: the chevron's ink only fills the middle
   half of its viewBox, so a 16px box left a visible dead gap before the label.
   Spacing is the flex `gap` above — no margin, or the two would compound. */
.nav-dd-caret { transition: transform 0.2s ease; width: 13px; height: 13px; transform: rotate(90deg); }
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret { transform: rotate(-90deg); }

/* Wide two-column dropdown, used by Service Areas: its 13 subpages would be a
   ~500px tall single column otherwise. Anchored right instead of left so the
   widened panel grows leftward and cannot run past the header's right edge —
   Service Areas is the last dropdown in the bar. */
.nav-dd-menu--cols {
  left: auto; right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(168px, 1fr));
  column-gap: 8px;
  min-width: 400px;
}
/* Three-column variant, used by Brands: 20 brand pages split into a
   specialist column and two "also serviced" columns. Left-anchored, unlike
   --cols above, because Brands sits mid-bar — right-anchoring a 600px panel
   there would drag it back across the Services trigger. */
.nav-dd-menu--cols-3 {
  left: 0; right: auto;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  min-width: 500px;
}
.nav-dd-col { display: flex; flex-direction: column; min-width: 0; }
/* "All Service Areas" is the hub link, so it spans both columns as a header row. */
.nav-dd-all {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.nav-dd-group-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 10px 12px 4px;
}

.header-cta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.header-phone {
  color: var(--clay);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-phone:hover { color: var(--clay-deep); }
.header-cta .btn-primary { padding: 10px 20px; font-size: 0.82rem; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  z-index: 1001;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas drawer (slides from right) */
.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: var(--cream);
  padding: 96px 32px 32px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  /* Hidden while closed so it neither widens the page nor takes keyboard
     focus; visibility flips only after the slide-out finishes. */
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.35s;
  box-shadow: var(--shadow-overlay);
  /* The Services submenu adds 11 rows — without this the drawer overflows
     and the lower links become unreachable on short viewports. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0s; }
.mobile-nav-scrim {
  position: fixed; inset: 0;
  background: rgba(36,33,29,0.5);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-scrim.open { opacity: 1; pointer-events: auto; }
.mobile-nav a {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover { color: var(--clay); }
.mobile-nav .btn-phone { margin-top: 20px; text-align: center; justify-content: center; }

/* Services submenu inside the drawer. The toggle is a <button>, not an <a>,
   and that is deliberate: main.js closes the drawer on click of every <a>
   inside .mobile-nav, so an anchor here would dismiss the drawer instead of
   expanding the list. A button is not matched by that selector. */
.mnav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 14px 4px;
  cursor: pointer;
  text-align: left;
}
.mnav-toggle:hover { color: var(--clay); }
.mnav-toggle .icon { width: 16px; height: 16px; transition: transform 0.25s ease; flex-shrink: 0; }
.mnav-group.open .mnav-toggle .icon { transform: rotate(45deg); }
.mnav-sub { display: none; }
.mnav-group.open .mnav-sub { display: flex; flex-direction: column; }
.mnav-sub a { font-size: 0.94rem; font-weight: 500; padding: 11px 4px 11px 18px; }

/* ========= HERO ========= */
.hero {
  min-height: 92vh;
  min-height: 92svh;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  contain: layout;
  padding-top: 76px;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(115deg, rgba(0,0,255,0.05) 0px, rgba(0,0,255,0.05) 1px, transparent 1px, transparent 64px);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; position: relative; z-index: 2; }
.hero-content { max-width: 620px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,255,0.06);
  border: 1px solid rgba(0,0,255,0.25);
  color: var(--butter);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}
/* Scoped with :not(.hero-home) — the homepage hero is a LIGHT section, and
   these dark-hero defaults were previously painting its h1 white and its
   body copy cream, i.e. invisible on white. */
.hero:not(.hero-home) h1 { color: var(--ink); margin-bottom: 20px; }
.hero:not(.hero-home) h1 .clay-mark { color: var(--clay); }
.hero:not(.hero-home) p { color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 36px; max-width: 560px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-trust { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; gap: 4px; }
.trust-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--clay); line-height: 1; }
.trust-label { font-size: 0.76rem; color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; }
.trust-divider { width: 1px; height: 36px; background: var(--line); }

/* Hero illustration panel (right column) — line-art in a tinted panel */
.hero-illustration {
  background: rgba(0,0,255,0.05);
  border: 1px solid rgba(0,0,255,0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}
.hero-illustration svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-illustration, .idx-hero-illustration { display: none; } }

/* ========= SECTION HEADERS ========= */
.section-header { margin-bottom: 56px; max-width: 640px; }
.section-header.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clay);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-label .icon { color: var(--clay); }
.section-header.on-dark .section-label { color: var(--clay); }
.section-header.on-dark .section-label .icon { color: var(--clay); }
.section-header h2 { margin-bottom: 16px; }
.section-header p { font-size: 1.05rem; max-width: 560px; }
.section-header.centered p { margin: 0 auto; }

/* ========= CARDS (flat hairline system) =========
   Matches the homepage's .idx-service-card treatment: a hairline
   --line border on white with a whisper of shadow, and hover moves
   the border to clay rather than sliding the card around. The old
   sticker system (2px ink border + hard 3px offset shadow +
   translate on hover) is what made every inner page read as a
   different site from the homepage. */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--clay); }
.card h3 { margin-bottom: 12px; font-size: 1.3rem; }
.card p { font-size: 0.93rem; }
.problems-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.problems-list li { font-size: 0.85rem; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 8px; }
.problems-list li .icon { color: var(--clay); margin-top: 2px; }

.card-dark {
  background: var(--clay-tint);
  border-color: var(--clay);
  color: var(--ink);
  box-shadow: 0 3px 0 0 var(--clay);
}
.card-dark h3, .card-dark h4, .card-dark .t4 { color: var(--ink); }
.card-dark p { color: var(--ink-soft); }

/* ========= BRANDS STRIP (static, no marquee) ========= */
.brands-strip { background: var(--cream); padding: 80px 0; }
.brand-grid-featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.brand-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}
.brand-card:hover { border-color: var(--clay); }
.brand-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
.brand-card p { font-size: 0.82rem; }
.brand-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pine-tint); color: var(--pine);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin-top: 12px;
}
.brand-badge .icon { width: 13px; height: 13px; }
.brand-chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-chip {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 0.86rem; font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.brand-chip:hover { border-color: var(--clay); color: var(--clay); }

/* ========= SERVICE GRID ========= */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
/* Same card as the homepage filmstrip (.idx-service-card), just laid
   out in a responsive grid instead of a moving track. */
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}
.service-card:hover { border-color: var(--clay); }
.service-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clay-tint);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  color: var(--clay);
}
.service-icon .icon { width: 24px; height: 24px; }
.service-body h4, .service-body .t4 { margin-bottom: 6px; }
.service-body p { font-size: 0.88rem; }

/* ========= WHY CHOOSE US ========= */
.why-section { background: var(--cream); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.why-points { display: flex; flex-direction: column; gap: 28px; }
.why-point { display: flex; gap: 20px; align-items: flex-start; }
.why-num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  color: var(--clay); line-height: 1; flex-shrink: 0; width: 52px;
}
.why-point h4, .why-point .t4 { color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }
.why-point p { color: var(--ink-soft); font-size: 0.9rem; }

/* ========= HOW IT WORKS ========= */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.how-line { position: absolute; top: 40px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line); z-index: 0; }
.how-step { text-align: center; position: relative; z-index: 1; padding: 0 16px; }
.how-icon {
  width: 80px; height: 80px; background: var(--clay-tint); border: 3px solid var(--clay);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; color: var(--clay);
}
.how-num { font-family: var(--font-display); font-size: 1.9rem; color: var(--clay); font-weight: 600; margin-bottom: 4px; }
.how-step h4, .how-step .t4 { margin-bottom: 8px; }
.how-step p { font-size: 0.88rem; }
@media (max-width: 768px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 40px 0; } .how-line { display: none; } }

/* ========= AREAS GRID ========= */
.areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.area-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-weight: 600; font-size: 0.9rem; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.area-chip:hover { border-color: var(--clay); color: var(--clay); }
.area-chip .icon { color: var(--clay); }
.area-chip.view-all { justify-content: center; color: var(--clay); font-weight: 700; }

/* ========= TESTIMONIALS =========
   Same editorial pull-quote treatment as the homepage wall
   (.idx-testimonial-block): a hairline rule on top, Fraunces for
   the quote, no box. */
.testimonials-section { background: var(--cream-deep); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-8); }
.testimonial {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.testimonial-quote-mark { color: var(--butter); width: 34px; height: 26px; margin-bottom: 12px; }
.stars { display: flex; gap: 3px; color: var(--butter); margin-bottom: 16px; }
.stars .icon { width: 15px; height: 15px; }
.testimonial p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.5; margin-bottom: 18px; color: var(--ink); }
.reviewer { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.reviewer-loc { font-size: 0.8rem; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.reviewer-loc .icon { width: 12px; height: 12px; color: var(--clay); }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ========= CTA BAND ========= */
.cta-band { background: var(--clay-tint); padding: 88px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band .hero-pattern { opacity: 0.35; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--ink); margin-bottom: 16px; }
.cta-band p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ========= BOOKING WIDGET ========= */
/* One unified card (was two separate cards side by side on a plain
   background) — a pale info panel fused directly to the white form panel,
   so it reads as a single booking object rather than "form + sidebar." */
.contact-section { background: var(--cream); }
.booking-card {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-card);
}
.booking-info {
  background: var(--cream-deep);
  border-right: 1px solid var(--line);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.booking-info h2 { color: var(--ink); font-size: 1.5rem; }
.booking-info > p { color: var(--ink-soft); font-size: 0.92rem; }
.booking-info-list { display: flex; flex-direction: column; gap: 18px; }
.booking-info-item { display: flex; gap: 14px; align-items: flex-start; }
.booking-info-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--clay-tint);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--clay);
}
.booking-info-item h4, .booking-info-item .t4 { color: var(--ink); font-size: 0.86rem; margin-bottom: 2px; }
.booking-info-item p, .booking-info-item a { color: var(--ink-soft); font-size: 0.88rem; }
.booking-info-item a:hover { color: var(--clay); }
.booking-profiles { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.booking-profiles a { color: var(--clay); font-weight: 700; }
.booking-guarantees {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.booking-guarantee-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.booking-guarantee-item .icon { width: 16px; height: 16px; color: var(--clay); flex-shrink: 0; }
.booking-info .btn-phone { width: 100%; justify-content: center; }

.booking-form { background: var(--white); padding: 48px 40px; }
@media (max-width: 860px) {
  .booking-card { grid-template-columns: 1fr; }
  .booking-info { padding: 36px 28px; }
  .booking-form { padding: 36px 28px; }
}
/* Trust strip — sits above the fields so reassurance (speed, warranty,
   licensing) is visible before someone commits to filling anything out. */
.form-trust { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.form-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.form-trust-item .icon { width: 18px; height: 18px; color: var(--clay); flex-shrink: 0; }
/* Numbered sections replace one long undifferentiated field list, so the
   form reads as three short, clearly-scoped steps instead of one block. */
.form-section { margin-bottom: 32px; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.form-section-num {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--clay); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
}
.form-section-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  transition: var(--transition);
  width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(0,0,255,0.15);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-honeypot { display: none; }
.form-submit {
  width: 100%;
  padding: 16px;
  background: var(--clay);
  color: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-card);
}
.form-submit:hover { background: var(--clay-deep); transform: translate(-3px, -3px); box-shadow: var(--shadow-card-hover); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 12px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-note .icon { width: 14px; height: 14px; }
.form-error { background: #FFF1F1; border: 1.5px solid #D93025; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.88rem; color: var(--ink); margin-top: 16px; display: none; }
.form-error.show { display: block; }
.form-success { text-align: center; padding: 48px 0; }
.form-success .icon { width: 56px; height: 56px; color: var(--pine); margin: 0 auto 16px; }
.form-success h3 { margin-bottom: 12px; font-size: 1.6rem; }
.form-success p { font-size: 1rem; }
.form-success p + p { margin-top: 8px; }
.form-success a { color: var(--clay); font-weight: 700; }

/* ========= FOOTER ========= */
footer { background: var(--cream-deep); border-top: 1px solid var(--line); color: var(--ink-soft); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand p { font-size: 0.88rem; margin-top: 16px; line-height: 1.7; max-width: 280px; }
.footer-phone { color: var(--clay); font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; }
.footer-email { color: var(--ink-soft); font-size: 0.85rem; }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a { padding: 5px 14px; font-size: 0.8rem; font-weight: 700; color: var(--clay); border: 1.5px solid var(--clay); border-radius: var(--radius-pill); transition: background 0.2s ease; }
.footer-social a:hover { background: var(--clay-tint); }
.footer-col h4, .footer-col .t4 {
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 0.88rem; color: var(--ink-soft); transition: var(--transition); display: inline-block; }
.footer-col ul li a:hover { color: var(--clay); transform: translateX(4px); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { font-size: 0.8rem; color: var(--ink-soft); }

/* ========= PAGE HERO (inner pages) =========
   A plain single-column title block: breadcrumb, headline, sub copy,
   CTAs. It shares the homepage's cream background and .hero3-*
   type/button primitives so the pages read as one site, but the
   split layout with the brand lockup and the stat rail is reserved
   for the homepage — inner pages get straight to their content.
   (This used to be a dark navy band, which made the site change its
   whole visual register the moment you left the homepage.) */
.page-hero {
  background: var(--cream-deep);
  padding: 132px 0 52px;
  position: relative;
  overflow: hidden;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: var(--ink); margin-bottom: 16px; }
.page-hero .hero3-content { max-width: 760px; }
.page-hero .hero3-sub { max-width: 640px; margin-bottom: 28px; }
.page-hero .hero3-actions { margin-bottom: 0; }

/* Breadcrumb now sits on cream, not navy. */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb .icon { width: 12px; height: 12px; color: var(--ink-soft); opacity: 0.6; }
.breadcrumb a { color: var(--clay); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink-soft); }

@media (max-width: 1024px) {
  .page-hero { padding: 104px 0 44px; }
}

/* ========= AREA / BRAND / BRAND-AREA PAGE ========= */
.deep-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.sidebar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: sticky;
  top: 96px;
  box-shadow: var(--shadow-sm);
}
.sidebar-header { background: var(--clay-tint); border-bottom: 1px solid var(--line); padding: 24px; }
.sidebar-header h3 { color: var(--ink); font-size: 1.2rem; }
.sidebar-header p { color: var(--ink-soft); font-size: 0.85rem; margin-top: 4px; }
.sidebar-body { padding: 24px; }
.sidebar-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--radius-pill); font-weight: 700; text-align: center; margin-bottom: 10px; transition: var(--transition); border: 1.5px solid transparent; }
.sidebar-cta a.primary { background: var(--clay); color: var(--cream); border-color: var(--clay); }
.sidebar-cta a.primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.sidebar-cta a.secondary { background: var(--white); color: var(--ink); border-color: var(--ink); }
.sidebar-cta a.secondary:hover { background: var(--clay); border-color: var(--clay); color: var(--white); }
.sidebar-list { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.sidebar-list li { font-size: 0.88rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
/* Rows behave like the homepage's .idx-area-link — the whole row is the
   link, and hover nudges it right rather than boxing it. */
.sidebar-list li > a,
.sidebar-list li > span { display: flex; align-items: center; gap: 8px; padding: 9px 0; color: inherit; transition: color 0.2s ease, padding-left 0.2s ease; }
.sidebar-list li > a:hover { color: var(--clay); padding-left: 6px; }
.sidebar-list li .icon { width: 13px; height: 13px; color: var(--clay); flex-shrink: 0; }
.sidebar-badges { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
@media (max-width: 900px) { .deep-page-grid { grid-template-columns: 1fr; } .sidebar { position: static; } }

/* ========= LANDING PAGE =========
   Single-column title block like the other inner pages, on the same
   cream background — the landing pages just keep their extra
   conversion furniture (urgency badge, availability block, checklist)
   above the CTAs. No brand lockup: that's homepage-only. */
.lp-hero { background: var(--cream-deep); padding: 132px 0 52px; position: relative; overflow: hidden; }
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero h1 { color: var(--ink); margin-bottom: 16px; }
.lp-hero .hero3-content { max-width: 760px; }
.lp-hero .hero3-sub { max-width: 640px; }
.lp-urgent {
  background: var(--clay-tint); border: 1px solid var(--clay); color: var(--clay);
  padding: 8px 16px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; text-transform: uppercase;
}
.lp-phone-block { background: var(--cream-deep); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 22px 26px; margin: 26px 0; display: inline-block; }
.lp-phone-block .lp-phone-label { font-size: 0.78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.lp-phone-block .lp-phone-hours { font-family: var(--font-display); font-size: 1.6rem; color: var(--clay); font-weight: 600; display: block; }
.lp-checklist { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.lp-checklist li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 0.95rem; }
.lp-checklist li .check-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--clay-tint); border: 1px solid var(--clay); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-checklist li .check-badge .icon { width: 13px; height: 13px; color: var(--clay); }

@media (max-width: 1024px) {
  .lp-hero { padding: 104px 0 44px; }
}

/* ========= 404 PAGE ========= */
.error-page { min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 140px 24px 80px; background: var(--cream); }
.error-mark { width: auto; height: 96px; margin: 0 auto 24px; display: block; }
.error-num { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 10rem); color: var(--clay); font-weight: 600; line-height: 1; }
.error-page p { font-size: 1.1rem; max-width: 460px; margin: 16px auto 32px; }
.error-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }

/* ========= PROSE / CONTENT ========= */
.content-section { padding: 72px 0; }
.prose h2 { margin-bottom: 16px; margin-top: 40px; }
.prose h3 { margin-bottom: 12px; margin-top: 28px; }
.prose p { margin-bottom: 16px; }
.prose ul { margin-left: 4px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.prose ul li { font-size: 0.95rem; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 8px; }
.prose ul li .icon { color: var(--clay); margin-top: 4px; flex-shrink: 0; }

/* ========= VALUE CARDS (about page) ========= */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { text-align: left; }
/* Same badge as .service-icon / .idx-service-icon so the about page's
   value cards sit in the same family as every other icon block. */
.value-icon-badge {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--clay-tint);
  display: flex; align-items: center; justify-content: center; color: var(--clay);
  margin-bottom: 16px;
}
.value-icon-badge .icon { width: 24px; height: 24px; }

/* ========= STAT STRIP ========= */
.stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; text-align: center; }
.stat-strip .trust-item { align-items: center; }
.stat-strip .trust-num { color: var(--clay); font-size: 2.1rem; }
.stat-strip .trust-label { color: var(--ink-soft); }
@media (max-width: 768px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ========= FAQ ========= */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--line); overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; font-weight: 700; color: var(--ink); font-size: 1rem; gap: 16px; }
.faq-q .chevron { flex-shrink: 0; color: var(--clay); transition: transform 0.3s ease; }
.faq-a { height: 0; overflow: hidden; }
.faq-a p { padding-bottom: 20px; }
.faq-item.open .faq-a { height: auto; }
.faq-item.open .chevron { transform: rotate(45deg); }

/* ========= FLOATING CTA ========= */
/* Mobile action bar: Call Now + Book Repair pinned to the bottom of the
   screen at 768px and below. Sits under the drawer scrim (998). */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 997;
  gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--cream); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(10, 20, 60, 0.08);
}
.mobile-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  border: 1.5px solid var(--ink);
}
.mobile-bar-call { background: var(--cream); color: var(--clay); }
.mobile-bar-book { background: var(--clay); color: var(--cream); }
#repair-request-form { scroll-margin-top: 96px; }

/* ========= RESPONSIVE ========= */
/* The full desktop menu needs about 1200px; below that, switch to the
   drawer but keep Call Now and Book Repair in the header until 768px. */
nav a { white-space: nowrap; }
@media (max-width: 1200px) {
  nav { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .brand-grid-featured { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  nav { display: none; }
  .hamburger { display: flex; }
  .header-phone { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .booking-form { padding: 28px 20px; }
  .booking-info { padding: 32px 20px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .mobile-bar { display: flex; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .section { padding: 64px 0; }
  .header-cta .btn-primary { display: none; }
  /* Both CTA children are hidden here; drop the empty box so its flex gap
     doesn't push the hamburger past the right edge. */
  .header-cta { display: none; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .header-inner { padding: 0 16px; gap: 12px; }
  header .logo-sub { letter-spacing: 0.08em; font-size: 0.58rem; }
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   SHARED EDITORIAL LAYOUT (.idx- prefix)
   Originally written for index.html only. These are now the
   site-wide components — every page uses them, and the legacy
   .card/.brand-card/.service-card/.area-chip/.testimonial rules
   above have been brought onto the same flat hairline treatment
   so inner pages read as the same site as the homepage.

   Design intent: stop repeating "bordered box in a grid" for every
   section (that's what produced the mismatched card/pill look).
   Instead each section gets its own honest layout — a directory
   list, a horizontal filmstrip, a column index, an editorial
   pull-quote wall — tied together by one typographic language
   (Fraunces for numerals/marks, thin hairline dividers, the same
   navy/clay palette) instead of one repeated component shape.

   The .hero3-* block below is the shared hero for EVERY page:
   .hero-home (homepage), .page-hero (inner pages) and .lp-hero
   (landing pages) all lay out through it.
   ============================================================ */

/* ---------- Hero v3 (white, split: copy left, navy proof panel right) ----------
   Homepage hero only (.hero-home modifier) — flips the shared dark
   .hero to white so the page opens light and alternates downward
   through the existing section rhythm.

   The right column used to be a straight <img> of the logo lockup. Two
   problems with that: the PNG has an opaque off-white background baked in
   (it has no alpha channel), so it drew a visible grey rectangle on the
   white hero; and it repeated the wordmark already sitting in the header
   ~40px above it. Replaced with a navy panel that earns its space — the
   guarantee, the four things every visit includes, and a second phone CTA
   above the fold. It also gives the white hero one block of brand colour. */
/* Sized to its content rather than the viewport: the shared .hero min-height
   left big empty bands above and below on tall desktop screens. Top padding
   clears the fixed 76px bar plus breathing room. */
.hero.hero-home { background: var(--cream-deep); min-height: 0; padding: 150px 0 88px; }
.hero3-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8);
  align-items: center; position: relative; z-index: 2;
}
.hero3-content { max-width: 640px; }
.hero3-headline { color: var(--ink); margin-bottom: 20px; }
.hero3-headline .clay-mark { color: var(--clay); }
/* City line under page H1s: keeps the headline short while naming the service area. */
.hero3-headline .h1-loc { display: block; font-size: 0.45em; font-weight: 500; margin-top: 0.35em; color: var(--ink-soft); letter-spacing: 0; }
.hero3-sub { color: var(--ink-soft); font-size: 1.12rem; margin-bottom: 36px; max-width: 540px; }
.hero3-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }

/* Stats: a fixed 4-up grid with hairline rules drawn by the cells
   themselves. The old version used free-flowing flex plus standalone
   divider <div>s, which left an orphaned divider dangling at the end of
   a row whenever the set wrapped. */
.hero3-trust { display: grid; grid-template-columns: repeat(4, max-content); gap: 22px 0; justify-content: start; }
.hero3-stat { display: flex; flex-direction: column; gap: 5px; padding: 0 20px; border-left: 1px solid var(--line); }
.hero3-stat:first-child { padding-left: 0; border-left: none; }
.hero3-stat:last-child { padding-right: 0; }
.hero3-stat-num { font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1; white-space: nowrap; }
.hero3-stat-label { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }

/* Brand mark, sitting on a soft radial wash so it reads as a composed hero
   visual rather than a PNG floating in white space. The artwork itself is the
   keyed, genuinely transparent shield — the old hero-badge.png was opaque and
   painted a grey rectangle here. */
.hero3-media {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.hero3-media::before {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: 125%; height: 125%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--clay-tint) 0%, rgba(235,235,255,0.5) 42%, transparent 68%);
  pointer-events: none;
}
.hero3-mark { position: relative; width: auto; height: auto; max-height: 380px; max-width: 100%; }

@media (max-width: 1024px) {
  .hero3-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero.hero-home { min-height: 0; padding: 112px 0 72px; }
  .hero3-content { max-width: none; order: 2; }
  .hero3-media { order: 1; }
  .hero3-mark { max-height: 230px; }
  .hero3-media::before { width: 300px; }
}
@media (max-width: 768px) {
  /* Equal fractional columns that may shrink: with max-content columns the
     four stats forced the hero wider than the screen. */
  .hero3-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero3-stat { padding: 0 16px; }
  .hero3-stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .hero3-stat-num { white-space: normal; }
}
@media (max-width: 640px) {
  .hero3-actions { flex-direction: column; align-items: stretch; }
  .hero3-actions .btn { justify-content: center; }
  .hero3-mark { max-height: 180px; }
}

/* ---------- Brand directory (replaces brand cards + pill cloud) ----------
   One row primitive for every brand, linked or not. A dotted leader
   line does the "structure" work a border used to. No captions, no
   descriptions — just the name, moving. A small check-badge icon is
   the only marker on the 7 brands that have a dedicated guide page;
   everything else about the row is identical. */
.idx-marquee-row {
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.idx-marquee-row:last-child { border-bottom: 1px solid var(--line); }
.idx-marquee-track {
  display: flex;
  width: max-content;
  animation: idx-marquee-left 34s linear infinite;
}
.idx-marquee-row--reverse .idx-marquee-track { animation-name: idx-marquee-right; animation-duration: 40s; }
.idx-marquee-row:hover .idx-marquee-track { animation-play-state: paused; }
.idx-marquee-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600;
  color: var(--ink-soft); padding: 0 34px; white-space: nowrap; position: relative;
}
.idx-marquee-item::after { content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--line); transform: translateY(-50%); }
a.idx-marquee-item { color: var(--ink); transition: color 0.2s ease; }
a.idx-marquee-item:hover { color: var(--clay); }
.idx-marquee-item .icon { width: 16px; height: 16px; color: var(--clay); flex-shrink: 0; }
/* Three identical copies of the set live in the markup, and one full copy is
   the travel distance — so at the moment the animation resets, two copies
   still cover the row. With the previous two-copy / -50% setup the travel
   distance equalled the *visible* content, which left a growing empty gap at
   the trailing edge on any viewport wider than one copy (~1370px for the
   service row, so it showed on ordinary laptops). */
@keyframes idx-marquee-left { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
@keyframes idx-marquee-right { from { transform: translateX(calc(-100% / 3)); } to { transform: translateX(0); } }

/* ---------- Services: static grid of cards, one per service ---------- */
.idx-services-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; gap: var(--space-4); }
/* Every card spans 2 of 8 columns (4 per row); grid-auto-rows: 1fr makes all
   rows the same height, so every card is the same size. The 5th card starts
   one column in, centering the 3-card second row. */
.idx-services-grid > .idx-service-card { grid-column: span 2; display: flex; flex-direction: column; }
.idx-services-grid > .idx-service-card:nth-child(5) { grid-column: 2 / span 2; }
/* Links pinned to the bottom of each card so they line up across a row. */
.idx-service-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: var(--space-4); }
.idx-service-links a, .idx-service-more { font-size: 0.85rem; font-weight: 700; color: var(--clay); }
a.idx-service-card:hover .idx-service-more { color: var(--clay-deep); text-decoration: underline; }
.idx-service-links a:hover { color: var(--clay-deep); text-decoration: underline; }
@media (max-width: 1100px) {
  .idx-services-grid { grid-template-columns: repeat(3, 1fr); }
  .idx-services-grid > .idx-service-card, .idx-services-grid > .idx-service-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 768px) { .idx-services-grid { grid-template-columns: repeat(2, 1fr); } }
/* Phones: compact two-column tiles (icon, name, links) so all seven services
   fit in about one screen. Descriptions are hidden; the service pages have them. */
@media (max-width: 600px) {
  .idx-services-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 10px; }
  .idx-services-grid > .idx-service-card:last-child { grid-column: 1 / -1; }
  .idx-services-grid .idx-service-card { padding: 14px; }
  .idx-services-grid .idx-service-card p { display: none; }
  .idx-services-grid .idx-service-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .idx-services-grid .idx-service-icon .icon { width: 20px; height: 20px; }
  .idx-services-grid .idx-service-card .t4 { font-size: 0.95rem; line-height: 1.25; margin-bottom: 0; }
  .idx-services-grid .idx-service-links { flex-direction: column; gap: 6px; padding-top: 10px; }
  .idx-services-grid .idx-service-links a, .idx-services-grid .idx-service-more { font-size: 0.8rem; }
}
.idx-service-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
  white-space: normal;
}
.idx-service-card:hover { border-color: var(--clay); }
.idx-service-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clay-tint);
  border-radius: var(--radius-sm);
  color: var(--clay);
  margin-bottom: var(--space-4);
}
.idx-service-icon .icon { width: 24px; height: 24px; }
.idx-service-card h4, .idx-service-card .t4 { margin-bottom: 6px; }
.idx-service-card p { font-size: 0.88rem; }

/* ---------- Homepage reviews: links to third-party review profiles ---------- */
.review-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-6); }
.review-links-label { font-size: 0.9rem; color: var(--ink-soft); }
.review-links a {
  padding: 8px 18px; font-size: 0.88rem; font-weight: 700; color: var(--clay);
  background: var(--white); border: 1.5px solid var(--clay); border-radius: var(--radius-pill);
  transition: background 0.2s ease;
}
.review-links a:hover { background: var(--clay-tint); }

/* ---------- Service areas: area cards (with their ZIP codes) beside a drawn coverage map ---------- */
.cov-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-8); align-items: center; }
.cov-intro h2 { margin-bottom: 16px; font-family: var(--font-body); font-weight: 700; letter-spacing: -0.02em; }
.cov-lead { font-size: 1.05rem; max-width: 520px; margin-bottom: var(--space-6); }
.cov-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cov-area {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cov-area:hover { border-color: var(--clay); transform: translateY(-2px); }
.cov-area-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.cov-area-meta { font-size: 0.8rem; color: var(--ink-soft); }
.cov-zips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cov-zip { padding: 3px 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--clay); background: var(--clay-tint); border-radius: var(--radius-pill); }
.cov-area--base .cov-zip { background: var(--white); }
.cov-area--base { background: var(--clay-tint); border-color: var(--clay); }
.cov-area--wide { grid-column: 1 / -1; }
.cov-map { margin: 0; padding: var(--space-5); background: var(--cream-deep); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cov-map svg { display: block; width: 100%; height: auto; }
.cov-map figcaption { margin-top: 8px; font-size: 0.75rem; color: var(--ink-soft); text-align: right; }
@media (max-width: 900px) { .cov-grid { grid-template-columns: 1fr; gap: var(--space-7); } }
/* Phones: compact two-column area tiles (name + ZIPs) and no map, so the
   whole section fits in about one screen. The area pages carry the detail. */
@media (max-width: 600px) {
  .cov-areas { gap: 8px; }
  .cov-area { padding: 12px; }
  .cov-area-meta { display: none; }
  .cov-zips { gap: 4px; margin-top: 6px; }
  .cov-zip { padding: 2px 8px; font-size: 0.72rem; }
  .cov-lead { margin-bottom: var(--space-5); }
  .cov-map { display: none; }
}

/* ---------- Testimonials: editorial pull-quote wall (replaces boxed cards) ---------- */
/* Every block carries its own top rule. The old version stripped the rule from
   :nth-child(-n+2) on the assumption that items 1 and 2 head the two columns —
   but `columns` fills down first (1,2,3 | 4,5,6), so the rule was removed from
   the second item of column one and left on the first item of column two,
   which is what made the two columns start at visibly different heights. */
.idx-testimonial-wall { columns: 2; column-gap: var(--space-8); }
.idx-testimonial-block { break-inside: avoid; padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.idx-testimonial-mark {
  font-family: var(--font-display); font-size: 3rem; font-weight: 600;
  line-height: 0.75; color: #C5C9FF; display: block; margin-bottom: 10px;
}
.idx-testimonial-stars { display: flex; gap: 3px; color: var(--butter); margin-bottom: 12px; }
.idx-testimonial-stars .icon { width: 13px; height: 13px; }
.idx-testimonial-block p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--ink); line-height: 1.5; margin-bottom: 18px; }
.idx-testimonial-foot { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; flex-wrap: wrap; }
.idx-testimonial-name { font-weight: 700; color: var(--ink); }
.idx-testimonial-loc { color: var(--ink-soft); }
@media (max-width: 768px) { .idx-testimonial-wall { columns: 1; } }

/* ---------- Blog: post cards on /blog/, meta line on posts ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-5); box-shadow: var(--shadow-sm); transition: border-color 0.2s ease;
}
.blog-card:hover { border-color: var(--clay); }
.blog-card-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
.blog-card h2 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 10px; }
.blog-card p { font-size: 0.9rem; }
.blog-card-more { margin-top: auto; padding-top: var(--space-4); font-size: 0.85rem; font-weight: 700; color: var(--clay); }
.blog-card:hover .blog-card-more { color: var(--clay-deep); text-decoration: underline; }
.post-meta { font-size: 0.9rem; }
.prose > h2:first-child, .prose > p:first-child { margin-top: 0; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }