/* =========================================================================
   DENT PICKS — AUTO HAIL REPAIR
   Design System v1.0
   Premium, editorial, conversion-first
   ========================================================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand colors */
  --navy-950: #001528;
  --navy-900: #002543;
  --navy-800: #0A3958;
  --navy-700: #1E4D70;
  --navy-600: #3D6987;
  --red-700: #8E1226;
  --red-600: #B41730;
  --red-500: #D02340;
  --silver: #ACBEC7;
  --silver-light: #CDD8E0;
  --cool-grey: #ACBEC7;
  --sky-blue: #00B1EB;

  /* Neutrals */
  --cream: #F4F7F9;
  --cream-2: #E8EEF2;
  --white: #FFFFFF;
  --ink: #001528;
  --ink-2: #1F2A40;
  --mute: #5B6B82;
  --mute-2: #8896A8;
  --border: #E5E8EE;
  --border-strong: #C9D0DC;

  /* Semantic */
  --bg: var(--cream);
  --bg-alt: var(--white);
  --bg-dark: var(--navy-900);
  --text: var(--ink);
  --text-mute: var(--mute);
  --accent: var(--red-600);
  --accent-hover: var(--red-500);

  /* Typography */
  --font-display: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-serif: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (clamp for fluid responsive) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 2vw + 0.5rem, 2.25rem);
  --fs-3xl: clamp(2rem, 2.4vw + 0.5rem, 2.875rem);
  --fs-4xl: clamp(2.25rem, 3.2vw + 0.5rem, 3.5rem);
  --fs-5xl: clamp(2.75rem, 4.5vw + 0.5rem, 4.5rem);

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 10rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(10,20,40,0.04), 0 1px 3px rgba(10,20,40,0.06);
  --sh-md: 0 4px 8px -2px rgba(10,20,40,0.06), 0 8px 20px -4px rgba(10,20,40,0.08);
  --sh-lg: 0 12px 24px -8px rgba(10,20,40,0.10), 0 24px 48px -16px rgba(10,20,40,0.16);
  --sh-xl: 0 24px 48px -12px rgba(10,20,40,0.18), 0 48px 96px -24px rgba(10,20,40,0.20);
  --sh-red: 0 8px 24px -8px rgba(200,16,46,0.45);

  /* Layout */
  --container: 1240px;
  --container-wide: 1400px;
  --container-narrow: 880px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---------- TYPOGRAPHY ---------- */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.no-bar::before { display: none; }
.eyebrow.dark { color: var(--silver); }

.display-1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-5xl);
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-4xl);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--navy-900);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
}
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.mute { color: var(--text-mute); }

/* Dark theme typography */
.dark .display-1,
.dark .display-2,
.dark .h2,
.dark .h3,
.dark .h4 { color: var(--white); }
.dark .lead { color: var(--silver-light); }
.dark .mute { color: var(--silver); }

/* ---------- LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}
.section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section-lg { padding-block: clamp(5rem, 10vw, 9rem); }

.section-dark {
  background: var(--navy-900);
  color: var(--silver-light);
}
.section-dark .h2,
.section-dark .h3,
.section-dark .h4,
.section-dark .display-1,
.section-dark .display-2 { color: var(--white); }

.section-cream { background: var(--cream-2); }
.section-white { background: var(--white); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

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

/* ---------- TOP STRIP ---------- */
.topstrip {
  background: var(--navy-950);
  color: var(--silver-light);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
/* The full hours + address + service-area line needs more room than the
   default 1240px container; let the strip use the wide container so the
   service-area chip fits without touching the social icons. */
.topstrip .container { max-width: var(--container-wide); }
.topstrip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
.topstrip a { color: inherit; transition: color 0.2s ease; }
.topstrip a:hover { color: var(--white); }
.topstrip-left, .topstrip-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
/* The left group absorbs any shortfall (its .topstrip-area span ellipsizes);
   the social/right group must never be overlapped or squeezed. */
.topstrip-left { flex: 1 1 auto; overflow: hidden; }
.topstrip-right { flex: 0 0 auto; }
.topstrip-left > span, .topstrip-right > span { white-space: nowrap; }
.topstrip-phone {
  font-weight: 700;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topstrip-phone .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.5);
  animation: pulse 2s infinite;
}
/* Outside business hours, set by js/main.js against the shop's own clock in
   Plano rather than the visitor's. Static instead of pulsing: the pulse reads
   as "someone is here", which is the opposite of what red means. Green stays
   the CSS default so a visitor with no JS sees the old behaviour, not a blank. */
.topstrip-phone .dot.is-closed {
  background: #f87171;
  box-shadow: none;
  animation: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.topstrip-social { display: inline-flex; gap: 14px; }
.topstrip-social a {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.topstrip-social a:hover { opacity: 1; }
.topstrip-social svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 768px) {
  /* Phones, phablets, and tablets in portrait: topstrip shows hours only.
     Address, service-area phrase, "Follow us" label, and social icons all hide.
     Social icons remain available in the footer — no functionality lost.
     This single breakpoint prevents text overlap from 320px through 768px. */
  .topstrip-left .hide-mobile { display: none; }
  .topstrip-right { display: none; }
  .topstrip-inner { justify-content: center; }
  .topstrip-left {
    width: 100%;
    /* The hours line carries "Online 24/7" too, which can outgrow a narrow
       phone. The words matter more than a tidy edge, so it scrolls sideways
       rather than clipping. Centring is an auto margin and NOT
       justify-content: a centred flex line that overflows puts its own left
       end out of reach, unscrollable in every browser. */
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* 22px of strip has no room for a bar */
  }
  .topstrip-left::-webkit-scrollbar { display: none; }
  .topstrip-phone { margin-inline: auto; }   /* centres while it still fits */
}

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(229,232,238,0.6);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  box-shadow: var(--sh-sm);
  border-bottom-color: var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: 76px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  height: 44px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1;
  justify-content: center;
}
.nav-link {
  position: relative;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.2s ease;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--accent); }
.nav-link.has-menu::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.nav-dropdown {
  position: relative;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown:hover .nav-link.has-menu::after {
  transform: translateY(0) rotate(-135deg);
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 50;
}
.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-menu a:hover {
  background: var(--cream-2);
  color: var(--accent);
}
.dropdown-menu .dropdown-meta {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--mute-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
/* "View all" footer row inside a dropdown — signals the parent link goes deeper */
.dropdown-menu a.dropdown-more {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding-top: 12px;
  color: var(--accent);
  font-weight: 700;
}
.dropdown-menu a.dropdown-more:hover {
  background: var(--cream-2);
  color: var(--red-700);
}

.nav-cta-group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}
.nav-phone {
  font-weight: 700;
  color: var(--navy-900);
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-phone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-phone-icon svg { width: 14px; height: 14px; fill: var(--white); }

.mobile-toggle {
  display: none;
  background: var(--navy-900);
  border: 0;
  padding: 12px;
  border-radius: var(--r-sm);
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}
.mobile-toggle span + span { margin-top: 5px; }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .mobile-toggle { display: inline-block; }
  .nav-phone-text { display: none; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  z-index: 200;
  padding: var(--s-6);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-7);
}
.mobile-menu-header img { height: 36px; }
.mobile-close {
  background: rgba(255,255,255,0.08);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu a {
  display: block;
  padding: 16px 0;
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu .sub-link {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--silver);
  padding: 12px 0 12px var(--s-5);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mobile-menu-cta {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-full);
  border: 0;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.btn-lg { padding: 18px 30px; font-size: var(--fs-base); }
.btn-sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn svg { width: 14px; height: 14px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-red {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--sh-red);
}
.btn-red:hover { background: var(--accent-hover); box-shadow: 0 12px 32px -8px rgba(200,16,46,0.55); }

.btn-navy {
  background: var(--navy-900);
  color: var(--white);
}
.btn-navy:hover { background: var(--navy-800); }

.btn-ghost {
  background: transparent;
  color: var(--navy-900);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--navy-900); background: rgba(10,31,58,0.04); }

.btn-ghost-dark {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.25);
}
.btn-ghost-dark:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }

.btn-white {
  background: var(--white);
  color: var(--navy-900);
}
.btn-white:hover { background: var(--cream); }

.btn-arrow::after {
  content: '→';
  font-size: 1.1em;
  transition: transform 0.2s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--silver-light);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.42;
}
.hero-bg img, .hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(10,31,58,0.92) 0%, rgba(10,31,58,0.55) 55%, rgba(10,31,58,0.85) 100%),
    radial-gradient(ellipse at 80% 20%, rgba(200,16,46,0.18) 0%, transparent 55%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-block: clamp(2rem, 6vw, 3.5rem);
  }
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.875rem, 3.4vw + 0.5rem, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
  max-width: 14ch;
}
.hero-title .accent {
  color: var(--red-500);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.hero-sub {
  margin-top: var(--s-4);
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.0625rem);
  line-height: 1.5;
  color: var(--silver-light);
  max-width: 520px;
}
.hero-ctas {
  margin-top: var(--s-5);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hero-trust {
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--silver);
}
.hero-trust-item strong { color: var(--white); font-weight: 700; }
.hero-trust-item svg { width: 18px; height: 18px; fill: #FFB400; }
.stars { display: inline-flex; gap: 2px; }

.hero-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 1.5vw + 0.75rem, 2rem);
  box-shadow: var(--sh-xl);
  position: relative;
  overflow: hidden;
}
.hero-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.hero-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--navy-900);
  margin-bottom: var(--s-2);
}
.hero-card p {
  color: var(--mute);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.hero-card-list {
  display: grid;
  gap: 10px;
  margin-bottom: var(--s-4);
}
.hero-card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.hero-card-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red-600);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-card .btn { width: 100%; }

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--silver);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.hero-scroll-line {
  width: 1px;
  height: 32px;
  background: var(--silver);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -32px;
  left: 0;
  width: 1px;
  height: 32px;
  background: var(--white);
  animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(64px); }
}

/* ---------- TICKER / MARQUEE ---------- */
.ticker {
  background: var(--accent);
  color: var(--white);
  overflow: hidden;
  padding-block: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.ticker-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: ticker 32s linear infinite;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ticker-track span::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ---------- BENEFITS BAND ---------- */
.benefits {
  background: var(--white);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.benefit {
  background: var(--white);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: background 0.25s ease;
}
.benefit:hover { background: var(--cream); }
.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.benefit-icon svg { width: 22px; height: 22px; stroke: var(--white); fill: none; stroke-width: 1.8; }
.benefit-icon.red { background: linear-gradient(135deg, var(--red-700), var(--red-500)); }
.benefit h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.benefit p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
}
@media (max-width: 900px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .benefits-grid { grid-template-columns: 1fr; }
}
/* Desktop-only 3-column variant (e.g. About page "promises" grid). Scoped to
   min-width so the responsive rules above still take over below 900px. */
@media (min-width: 901px) {
  .benefits-grid-3col { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- SECTION HEADER ---------- */
.section-head {
  max-width: 920px;
  margin-bottom: var(--s-7);
}
.section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head .lead {
  margin-top: var(--s-4);
  max-width: 640px;
}
.section-head-center .lead { margin-inline: auto; }

/* ---------- SERVICE CARDS ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
}
.service-card {
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}
.service-card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.service-card:hover .service-card-img img { transform: scale(1.05); }
.service-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,31,58,0.45) 100%);
}
.service-card-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.service-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.service-card p {
  font-size: var(--fs-sm);
  color: var(--mute);
  line-height: 1.6;
  flex: 1;
}
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  margin-top: var(--s-2);
}
.service-card-link::after {
  content: '→';
  transition: transform 0.2s var(--ease);
}
.service-card:hover .service-card-link::after { transform: translateX(4px); }

/* ---------- FEATURED STORY (Vytas) ---------- */
.founder {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; }
}
.founder-img {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--sh-xl);
}
.founder-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-img-badge {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  background: var(--white);
  padding: 14px 18px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sh-lg);
}
.founder-img-badge-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}
.founder-img-badge-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  line-height: 1.3;
}
.founder-body {
  max-width: 560px;
}
.founder-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw + 0.5rem, 2.2rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--navy-900);
  margin: var(--s-5) 0;
  letter-spacing: -0.015em;
}
.founder-sig {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.founder-sig-name {
  font-weight: 800;
  color: var(--navy-900);
}
.founder-sig-title {
  font-size: var(--fs-sm);
  color: var(--mute);
  margin-top: 2px;
}

/* ---------- PROCESS STEPS ---------- */
.process {
  background: var(--navy-900);
  color: var(--silver-light);
  position: relative;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  position: relative;
}
@media (max-width: 1000px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}
.process-step {
  position: relative;
  padding-top: var(--s-5);
}
.process-step-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--red-500);
  letter-spacing: -0.04em;
  margin-bottom: var(--s-3);
}
.process-step h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.process-step p {
  font-size: var(--fs-sm);
  color: var(--silver);
  line-height: 1.55;
}

/* ---------- BEFORE/AFTER GALLERY ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4/3;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(10,20,40,0.85);
  color: white;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
/* <picture> wrappers must fill their tile, otherwise height:100% on the
   inner <img> resolves against an auto-height parent and the photo only
   covers the top slice of the card. */
.hero-bg picture,
.service-card-img picture,
.founder-img picture,
.gallery-item picture,
.resource-card-image picture,
.gallery-image-wrap picture,
.ba-card picture { display: block; width: 100%; height: 100%; }

.gallery-item.span-7 { grid-column: span 7; aspect-ratio: 16/10; }
.gallery-item.span-5 { grid-column: span 5; aspect-ratio: 4/3; }
.gallery-item.span-6 { grid-column: span 6; }
.gallery-item.span-4 { grid-column: span 4; }
.gallery-item.span-8 { grid-column: span 8; aspect-ratio: 16/10; }
.gallery-item.span-12 { grid-column: span 12; aspect-ratio: 21/9; }

/* Before/after strip photos: show the whole strip (both halves), never crop */
.gallery-item.is-strip { aspect-ratio: auto; align-self: center; background: transparent; }
.gallery-item.is-strip picture,
.gallery-item.is-strip img { height: auto; object-fit: contain; }

@media (max-width: 900px) {
  .gallery-item.span-7, .gallery-item.span-5,
  .gallery-item.span-6, .gallery-item.span-4,
  .gallery-item.span-8, .gallery-item.span-12 { grid-column: span 1; }
}

/* ---------- VIDEO BLOCK ---------- */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  box-shadow: var(--sh-xl);
}
.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  background: var(--white);
}
.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1000px) {
  .t-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .t-grid { grid-template-columns: 1fr; }
}
.t-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.t-card:hover { border-color: transparent; box-shadow: var(--sh-md); }
.t-card .stars { color: #FFB400; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.t-card-quote {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-2);
  flex: 1;
}
.t-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.t-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.t-card-name { font-weight: 700; color: var(--navy-900); font-size: var(--fs-sm); }
.t-card-meta { font-size: 12px; color: var(--mute); }
.t-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--cream-2);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.t-google svg { width: 14px; height: 14px; }

/* Rating summary card */
.rating-hero {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  color: var(--white);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.rating-hero-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.rating-hero-stars { display: flex; gap: 4px; color: #FFB400; font-size: 28px; line-height: 1; margin: 8px 0; }
.rating-hero p { color: var(--silver-light); margin: 0; }

/* ---------- LOCATIONS BLOCK ---------- */
.locations-band {
  background: var(--cream-2);
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 900px) {
  .locations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .locations-grid { grid-template-columns: 1fr; }
}
.location-card {
  background: var(--white);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  transition: all 0.25s var(--ease);
}
.location-card:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  transform: translateY(-2px);
}
.location-card:hover .location-card-name { color: var(--white); }
.location-card:hover .location-card-distance { color: var(--silver); }
.location-card:hover .location-card-arrow { color: var(--red-500); }
.location-card-name {
  font-weight: 800;
  color: var(--navy-900);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.location-card-distance {
  font-size: 11px;
  color: var(--mute);
  margin-top: 2px;
  transition: color 0.25s ease;
}
.location-card-arrow {
  font-size: 18px;
  color: var(--mute);
  transition: color 0.25s ease;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--s-5) 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--navy-900);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--navy-900);
  font-size: 22px;
  font-weight: 400;
  transition: transform 0.25s var(--ease), background 0.25s ease;
}
.faq-item[open] summary::after {
  content: '−';
  background: var(--accent);
  color: var(--white);
}
.faq-item-body {
  padding-top: var(--s-4);
  color: var(--ink-2);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 760px;
}
.faq-item-body p + p { margin-top: var(--s-3); }

/* ---------- FORM EMBED ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
}
.form-card-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.form-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  margin-bottom: var(--s-2);
}
.form-card p {
  color: var(--mute);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-5);
}
.form-embed {
  width: 100%;
  min-height: 540px;
  border: 0;
  border-radius: var(--r-md);
}

/* ---------- CTA BAND (PRE-FOOTER) ---------- */
.cta-band {
  background:
    radial-gradient(ellipse at top right, rgba(200,16,46,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 30%, rgba(200,16,46,0.10) 0%, transparent 40%),
    radial-gradient(circle at 15% 70%, rgba(200,16,46,0.06) 0%, transparent 35%);
  pointer-events: none;
}
.cta-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .cta-band-inner { grid-template-columns: 1fr; text-align: left; }
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw + 0.5rem, 3rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--white);
  text-wrap: balance;
}
.cta-band p {
  color: rgba(255,255,255,0.78);
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.0625rem);
  margin-top: var(--s-3);
  line-height: 1.55;
  max-width: 520px;
}
.cta-band-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: stretch;
}
.cta-band-actions .btn { justify-content: center; padding-block: 20px; }
.cta-band-phone {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
.cta-band-phone a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 22px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  transition: all 0.2s ease;
}
.cta-band-phone a:hover {
  border-color: var(--red-500);
  background: rgba(200,16,46,0.12);
  transform: translateY(-1px);
}
.cta-band-phone a::before {
  content: '';
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.07 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.8a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.8.72A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.cta-band-phone a strong {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.2vw + 0.75rem, 1.6rem);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--white);
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--navy-950);
  color: var(--silver);
  padding-block: var(--s-9) var(--s-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}
.footer-brand img { height: 44px; }
.footer-brand p {
  color: var(--silver);
  font-size: var(--fs-sm);
  margin-top: var(--s-4);
  max-width: 320px;
  line-height: 1.6;
}
.footer-social {
  margin-top: var(--s-5);
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: var(--accent); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; fill: var(--white); }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: var(--fs-sm);
  color: var(--silver);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--white); }
.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--silver);
}
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; fill: var(--red-500); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-xs);
  color: var(--mute-2);
}
.footer-bottom-links {
  display: inline-flex;
  gap: var(--s-5);
}
.footer-bottom a { color: var(--silver); }
.footer-bottom a:hover { color: var(--white); }

/* ---------- FLOATING CTAs ---------- */
.float-cta {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: none;
  gap: var(--s-3);
  background: var(--white);
  padding: 10px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border);
}
.float-cta .btn { padding: 12px 20px; font-size: var(--fs-xs); }
@media (max-width: 768px) {
  .float-cta { display: inline-flex; }
}

.chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-lg);
  transition: transform 0.2s ease;
  cursor: pointer;
  border: 0;
}
.chat-bubble:hover { transform: scale(1.08); }
.chat-bubble svg { width: 26px; height: 26px; fill: currentColor; }
.chat-bubble-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: chatPulse 2.4s ease-out infinite;
}
@keyframes chatPulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (max-width: 720px) {
  .chat-bubble { bottom: 90px; right: 16px; }
}

/* ---------- BREADCRUMBS ---------- */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--silver); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { opacity: 0.5; }

/* ---------- ARTICLE / CONTENT BLOCKS ---------- */
.prose {
  max-width: 760px;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink-2);
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  margin: var(--s-7) 0 var(--s-4);
  line-height: 1.15;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--navy-900);
  margin: var(--s-6) 0 var(--s-3);
  letter-spacing: -0.015em;
}
.prose h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy-900);
  margin: var(--s-5) 0 var(--s-3);
}
.prose p + p { margin-top: var(--s-4); }
.prose p { margin: 0; }
.prose ul, .prose ol {
  margin: var(--s-4) 0;
  padding-left: var(--s-5);
}
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
  padding-left: 30px;
  position: relative;
  margin-bottom: var(--s-3);
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6L5 8.5L9.5 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.prose ol { counter-reset: ol; padding-left: 0; list-style: none; }
.prose ol li {
  counter-increment: ol;
  padding-left: 40px;
  position: relative;
  margin-bottom: var(--s-4);
}
.prose ol li::before {
  content: counter(ol);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--navy-900);
  color: var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  font-family: var(--font-display);
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--red-700); }
.prose strong { color: var(--navy-900); font-weight: 700; }
/* Inline links inside article copy, process steps, FAQs and callouts must be
   visibly highlighted, not blend into the body text. */
.article-content p a:not(.btn):not(.inline-cta),
.article-content li a:not(.btn),
.process-step p a,
.faq-item p a,
.faq-item-body a,
.callout a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-content p a:not(.btn):not(.inline-cta):hover,
.article-content li a:not(.btn):hover,
.process-step p a:hover,
.faq-item p a:hover,
.faq-item-body a:hover,
.callout a:hover { color: var(--red-700); }

/* Article hero */
.article-hero {
  background: var(--navy-900);
  color: var(--silver-light);
  padding-block: clamp(4rem, 9vw, 7rem);
  position: relative;
  overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(200,16,46,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 0%, rgba(27,59,102,0.5) 0%, transparent 50%);
  pointer-events: none;
}
.article-hero-inner { position: relative; z-index: 1; max-width: 880px; }
.article-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-top: var(--s-3);
}
.article-hero p {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--silver-light);
  margin-top: var(--s-5);
  max-width: 680px;
}
.article-hero-cta {
  margin-top: var(--s-6);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Article layout with sidebar */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s-8);
  align-items: flex-start;
}
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
}
.article-aside {
  position: sticky;
  top: 100px;
}

/* Info / aside callout */
.callout {
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}
.callout h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: var(--s-3);
}
.callout ul li { font-size: var(--fs-sm); padding: 8px 0 8px 28px; border-bottom: 1px solid var(--border); }
.callout ul li:last-child { border-bottom: 0; }
.callout ul li::before {
  width: 14px; height: 14px; top: 13px;
}

/* Pull quote */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  line-height: 1.3;
  color: var(--navy-900);
  border-left: 3px solid var(--accent);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-6) 0;
  letter-spacing: -0.01em;
}

/* Stat block */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--s-6) 0;
}
@media (max-width: 700px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--accent);
  line-height: 1;
}
.stat-num .small { font-size: 0.6em; vertical-align: 0.25em; }
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 8px;
}

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin: var(--s-5) 0;
}
.compare-table th, .compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  background: var(--navy-900);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compare-table th.win { background: var(--red-600); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tr:nth-child(even) td { background: var(--cream); }
.compare-table .check { color: #15803d; font-weight: 800; }
.compare-table .x { color: #dc2626; font-weight: 800; }

/* Image with caption */
.figure {
  margin: var(--s-6) 0;
}
.figure img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.figure figcaption {
  font-size: var(--fs-xs);
  color: var(--mute);
  margin-top: var(--s-3);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Related cards */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (max-width: 800px) {
  .related-grid { grid-template-columns: 1fr; }
}
.related-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s var(--ease);
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--sh-md);
}
.related-card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.related-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.related-card-link {
  margin-top: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--s-3);
}

/* ---------- LOCATIONS PAGE-SPECIFIC ---------- */
.location-hero {
  background: var(--navy-900);
  color: var(--silver-light);
  padding-block: clamp(4rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.location-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .location-hero-grid { grid-template-columns: 1fr; }
}
.location-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-light);
  border: 1px solid rgba(255,255,255,0.1);
}
.location-pill svg { width: 14px; height: 14px; fill: var(--red-500); }
.location-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-top: var(--s-4);
}
.location-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--red-500);
  font-weight: 400;
}

.map-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s-4);
  box-shadow: var(--sh-xl);
}
.map-card iframe {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--r-md);
  display: block;
}
.map-card-info {
  padding: var(--s-4) var(--s-3) var(--s-2);
  color: var(--ink-2);
}
.map-card-info-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 8px 0;
}
.map-card-info-row strong { color: var(--navy-900); font-weight: 700; }

/* ---------- UTILITIES ---------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.hidden { display: none; }
@media (max-width: 720px) { .hide-sm { display: none; } }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Print */
@media print {
  .site-header, .site-footer, .float-cta, .chat-bubble, .topstrip { display: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ============== QUOTE MODAL ============== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 58, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.45);
  transform: translateY(24px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--cream-2);
  color: var(--navy-900);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  font-weight: 400;
}
.modal-close:hover { background: var(--accent); color: var(--white); transform: rotate(90deg); }

.modal-header {
  padding: 36px 32px 14px;
  text-align: center;
}
.modal-header .eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--accent);
}
.modal-header h3 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  margin: 0;
  color: var(--navy-900);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.modal-header p {
  margin: 12px 0 0;
  color: var(--mute);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.modal-trust {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.modal-trust span {
  font-size: 11px;
  color: var(--navy-900);
  background: var(--cream-2);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.modal-form-wrap {
  padding: 14px 24px 26px;
}
.modal-form-wrap iframe {
  width: 100%;
  min-height: 580px;
  border: 0;
  display: block;
  border-radius: var(--radius-sm);
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-card {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .modal-header { padding: 60px 20px 10px; }
  .modal-form-wrap { padding: 8px 16px 24px; }
}


/* ============== HOME HERO: SEO sub-display under H1 ============== */
.hero-title-sub {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.8vw + 0.6rem, 1.4rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--silver-light);
  letter-spacing: 0.01em;
}
.hero-title-sub .accent {
  color: var(--red-500);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 1.15em;
}

/* ============== TOPSTRIP: service-area chip ============== */
.topstrip-area {
  color: var(--silver);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topstrip-area strong { color: var(--white); font-weight: 700; }
.topstrip-area .dot-sep {
  opacity: 0.35;
  display: inline-block;
  font-weight: 300;
  margin-right: 10px;
}
@media (max-width: 1420px) {
  .topstrip-area { display: none; }
}


/* ============== HERO: mobile compactness overrides ============== */
@media (max-width: 960px) {
  .hero-title { max-width: 22ch; }
  .hero-trust { gap: 0.875rem 1.25rem; row-gap: 0.5rem; }
  .hero-trust-item { font-size: 0.8125rem; }
  .hero-card-list li { font-size: 0.875rem; }
}
@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
    max-width: none;
  }
  .hero-title-sub {
    font-size: 0.95rem;
    margin-top: 0.4rem;
  }
  .hero-sub {
    font-size: 0.95rem;
    margin-top: 0.875rem;
  }
  .hero-ctas { margin-top: 1rem; gap: 0.5rem; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { margin-top: 1rem; gap: 0.625rem 1rem; }
  .hero-card { padding: 1.25rem; }
  .hero-card h3 { font-size: 1.2rem; }
  .hero-card p { font-size: 0.875rem; margin-bottom: 0.875rem; }
  .hero-card-list { gap: 8px; margin-bottom: 1rem; }
  .hero-card-list li { font-size: 0.875rem; }
  .hero-card-eyebrow { font-size: 0.6875rem; margin-bottom: 0.5rem; }
}


/* ============== CTA BAND: form-card and mobile compactness ============== */
.cta-band .form-card {
  background: var(--white);
  color: var(--ink);
  padding: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
}
.cta-band .form-card-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cta-band .form-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--navy-900);
  margin: 8px 0 6px;
}
.cta-band .form-card > p {
  color: var(--mute);
  font-size: 0.875rem;
  margin: 0 0 var(--s-4);
}
.cta-band .form-embed {
  width: 100%;
  min-height: 540px;
  border: 0;
  display: block;
}

@media (max-width: 900px) {
  .cta-band-inner { gap: var(--s-5); }
  .cta-band h2 br { display: none; }
  .cta-band-phone a { padding: 12px 18px; }
}
@media (max-width: 640px) {
  .cta-band { padding-block: 2.5rem; }
  .cta-band h2 { font-size: clamp(1.625rem, 6vw, 2rem); }
  .cta-band p { font-size: 0.9375rem; margin-top: 0.625rem; }
  .cta-band-phone { margin-top: 1.25rem; }
  .cta-band-phone a { padding: 12px 16px; gap: 10px; width: 100%; justify-content: center; }
  .cta-band-phone a::before { width: 32px; height: 32px; }
  .cta-band-phone a strong { font-size: 1.25rem; }
  .cta-band .form-card { padding: 1.25rem; }
  .cta-band .form-card h3 { font-size: 1.2rem; }
  .cta-band .form-embed { min-height: 480px; }
}


/* === BENEFIT: strong+span pattern fix (service + location pages) === */
/* Some pages use <div class="benefit"><div class="benefit-icon">…</div>
   <div><strong>Title</strong><span>Description</span></div></div>
   instead of the home page's <h3>+<p> pattern. Make strong/span behave
   like a heading + paragraph so they don't run together inline. */
.benefit > div:not(.benefit-icon) {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.benefit > div:not(.benefit-icon) > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.benefit > div:not(.benefit-icon) > span {
  display: block;
  color: var(--mute);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* === FORM-EMBED-CARD: match the home page's form-card styling === */
/* Service pages use .form-embed-card (just an iframe wrapper).
   Wrap it visually like .form-card with white background + shadow. */
.cta-band .form-embed-card {
  background: var(--white);
  color: var(--ink);
  padding: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
.cta-band .form-embed-card iframe {
  width: 100% !important;
  border: 0 !important;
  display: block;
  min-height: 540px;
  border-radius: var(--r-sm);
}
.form-embed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.form-embed-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--accent);
}
.form-embed-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  margin: 0 0 6px;
  line-height: 1.15;
}
.form-embed-card .form-embed-sub {
  color: var(--mute);
  font-size: 0.875rem;
  margin: 0 0 var(--s-4);
}


/* ============================================================
   ARTICLE / SERVICE PAGE SYSTEM
   Styles for .article-section + .article-content + .article-sidebar
   Used by: auto-hail-repair, paintless-dent-repair-plano, bumper-dent-repair
   ============================================================ */

.article-section {
  padding-block: clamp(2.5rem, 4vw + 1rem, 5rem);
  background: var(--cream);
}

/* ---- Article TOC ---- */
.article-toc {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.article-toc strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin-bottom: 0.75rem;
}
.article-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
}
.article-toc a {
  color: var(--navy-900);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.125rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.article-toc a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Article body typography ---- */
.article-content { color: var(--ink); }
.article-content > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.4vw + 0.75rem, 2rem);
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--silver-light);
}
.article-content > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.article-content > h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 1.75rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.article-content > p,
.article-content > ul,
.article-content > ol {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.article-content > ul,
.article-content > ol { padding-left: 1.5rem; }
.article-content > ul li,
.article-content > ol li { margin-bottom: 0.4rem; }
.article-content > p strong { color: var(--navy-900); font-weight: 700; }
.article-content > p a,
.article-content > ul li a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(180,23,48,0.3);
  transition: border-color 0.15s ease;
}
.article-content > p a:hover,
.article-content > ul li a:hover { border-bottom-color: var(--accent); }

/* ---- Callout box (info/highlight) - enhance the existing rules ---- */
.callout {
  margin: 1.5rem 0;
  border-left-width: 3px;
  border-left-color: var(--accent);
}

/* ---- Pullquote ---- */
.article-content .pullquote {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--navy-800);
}
.article-content .pullquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mute);
}

/* ---- Process steps (the 5-step "how it works" lists) ---- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
.article-content .process-step {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.25rem 4.25rem;
  position: relative;
}
.article-content .process-step .step-num {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.article-content .process-step strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 0.25rem;
  letter-spacing: -0.005em;
}
.article-content .process-step p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---- Comparison table ---- */
.comparison-table {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--silver-light);
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.9375rem;
}
.comparison-table th {
  background: var(--navy-900);
  color: var(--white);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.875rem 1rem;
}
.comparison-table td {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--silver-light);
  color: var(--ink-2);
  vertical-align: top;
}
.comparison-table tr:nth-child(even) td { background: rgba(0,37,67,0.02); }
.comparison-table .check { color: #22a06b; font-weight: 700; }
.comparison-table .x { color: var(--accent); font-weight: 700; }

/* ---- Before/After gallery ---- */
.ba-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.ba-card {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-900);
  position: relative;
}
.ba-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.ba-card.span-2 { grid-column: span 2; }
.ba-card.span-2 img { height: 280px; }
.ba-card figcaption {
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white);
  background: var(--navy-900);
  letter-spacing: 0.01em;
}

/* ---- Stat row (4.8★ / 7+ / 15+ / $0) ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.stat-item { text-align: center; }
.stat-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.5vw + 0.5rem, 2rem);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-item span {
  display: block;
  font-size: 0.75rem;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.375rem;
  font-weight: 500;
}
@media (max-width: 640px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; }
}

/* ---- In-article CTA box (before the bottom CTA-band) ---- */
.article-cta {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 2.5rem 0 0;
}
.article-cta h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 0.375rem;
  letter-spacing: -0.01em;
}
.article-cta p { margin: 0 0 1rem; color: var(--ink-2); }
.article-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}
.article-cta-buttons a.btn-ghost-dark {
  /* override: the ghost-dark default is white-on-dark; here we need it visible on light */
  color: var(--navy-900);
  border-color: var(--silver);
  background: transparent;
}
.article-cta-buttons a.btn-ghost-dark:hover {
  border-color: var(--navy-900);
  background: rgba(0,37,67,0.04);
}

/* ============================================================
   SIDEBAR — sticky, modular cards
   ============================================================ */
.article-sidebar {
  position: sticky;
  top: calc(72px + 1rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 1000px) {
  .article-sidebar { position: static; }
}

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 14px;
  padding: 1.25rem 1.375rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -16px rgba(0,37,67,0.12);
}
.sidebar-card h4 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 0.75rem;
  letter-spacing: -0.005em;
  text-transform: none;
}

.sidebar-card-primary {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: var(--white);
  border: none;
  position: relative;
  overflow: hidden;
}
.sidebar-card-primary::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(180,23,48,0.18), transparent 70%);
  pointer-events: none;
}
.sidebar-card-primary > * { position: relative; }
.sidebar-card-primary h4 { color: var(--white); margin-bottom: 0.5rem; }
.sidebar-card-primary p {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.sidebar-card-primary .btn { width: 100%; justify-content: center; }
.sidebar-card-primary .btn + .btn { margin-top: 0.5rem; }
/* ghost-dark works on the navy bg here */

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-list li + li { border-top: 1px solid var(--silver-light); }
.sidebar-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  color: var(--navy-900);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.18s ease, padding 0.18s ease;
}
.sidebar-list a::after {
  content: '→';
  color: var(--silver);
  font-weight: 400;
  font-size: 1rem;
  transition: transform 0.18s ease, color 0.18s ease;
}
.sidebar-list a:hover { color: var(--accent); padding-left: 0.25rem; }
.sidebar-list a:hover::after { color: var(--accent); transform: translateX(3px); }

/* ============================================================
   MOBILE TUNING (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  .article-section { padding-block: 2rem; }
  .article-content > h2 { font-size: 1.375rem; margin-top: 1.75rem; padding-top: 1rem; }
  .article-content > p { font-size: 1rem; }
  .article-toc ul { grid-template-columns: 1fr; }
  .ba-gallery { grid-template-columns: 1fr; }
  .ba-card.span-2 { grid-column: span 1; }
  .ba-card img,
  .ba-card.span-2 img { height: 200px; }
  .article-content .process-step { padding: 1rem 1rem 1rem 3.75rem; }
  .article-content .process-step .step-num { left: 0.875rem; top: 1rem; }
  .comparison-table th,
  .comparison-table td { padding: 0.625rem 0.625rem; font-size: 0.8125rem; }
  .article-cta-buttons .btn { flex: 1 1 100%; justify-content: center; }
}


/* ============================================================
   ===== SALES COMPONENTS (auto-hail-repair sales transformation)
   ============================================================ */

/* H1 sub-slogan (now nested inside H1 — keeps SEO power but reads like a slogan) */
.hero-title-sub {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.58em;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.86);
  line-height: 1.2;
}

/* --- Insurer logo strip (Authority Bias) --- */
.insurer-strip {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.insurer-strip-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-align: center;
  margin-bottom: 1rem;
}
.insurer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2rem;
}
.insurer-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--cool-grey);
  text-transform: uppercase;
  white-space: nowrap;
  filter: saturate(0.7);
  transition: color 0.18s ease, filter 0.18s ease;
}
.insurer-logo:hover { color: var(--navy-700); filter: saturate(1); }
@media (max-width: 640px) {
  .insurer-logos { gap: 0.5rem 1.25rem; }
  .insurer-logo { font-size: 0.8125rem; }
}

/* --- Guarantee box (Risk Reversal) --- */
.guarantee-box {
  background: linear-gradient(135deg, rgba(180,23,48,0.05) 0%, rgba(0,37,67,0.04) 100%);
  border: 1px solid rgba(180,23,48,0.15);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.guarantee-box-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.guarantee-box-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guarantee-box-body { flex: 1; min-width: 0; }
.guarantee-box-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy-900);
  margin: 0 0 0.375rem;
  letter-spacing: -0.005em;
}
.guarantee-box p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
@media (max-width: 640px) {
  .guarantee-box { padding: 1.25rem; gap: 1rem; flex-direction: column; }
  .guarantee-box-icon { flex-basis: 44px; width: 44px; height: 44px; }
  .guarantee-box-icon svg { width: 22px; height: 22px; }
}

/* --- Featured step (highlighted #2 in process) --- */
.article-content .process-step.featured {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 4px rgba(180,23,48,0.06), 0 8px 24px -12px rgba(180,23,48,0.22);
  background: linear-gradient(180deg, var(--white) 0%, rgba(180,23,48,0.02) 100%);
}
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-top: 0.75rem;
}
.step-badge::before { content: "✓"; font-size: 0.8125rem; }

/* --- Inline CTA pill (after sections) --- */
.inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.625rem 1.125rem;
  background: rgba(180,23,48,0.06);
  border: 1px solid rgba(180,23,48,0.18);
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  margin: 1rem 0 1.5rem;
}
.inline-cta::after {
  content: "→";
  transition: transform 0.18s ease;
}
.inline-cta:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.inline-cta:hover::after { transform: translateX(4px); }


/* ============================================================
   MOBILE UX FIXES — bottom-CTA orchestration + nav declutter
   ============================================================ */

/* 1) Mobile menu — respect device safe-area so logo isn't behind status bar */
.mobile-menu {
  padding-top: calc(var(--s-6) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}

/* 2) Hide chat-bubble on mobile — float-cta already has Call Now,
      stacking both is visual clutter and they fight for the same screen real estate */
@media (max-width: 768px) {
  .chat-bubble { display: none !important; }
}

/* 3) Declutter navbar on mobile — hide phone icon button + small Get-a-Quote button.
      Both actions are 1 tap away in the hamburger menu and on the floating CTA. */
@media (max-width: 768px) {
  .site-header .nav-cta-group .nav-phone { display: none; }
  .site-header .nav-cta-group .btn.btn-red.btn-sm { display: none; }
}

/* 4) Process step mobile layout — number INLINE with title, description spans below
      (was: 56px italic number on its own line above title — wasted vertical space) */
@media (max-width: 640px) {
  .process-grid { gap: 1.5rem; }
  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.875rem;
    row-gap: 0.375rem;
    padding-top: 0;
    align-items: baseline;
  }
  .process-step-num {
    font-size: 1.875rem;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .process-step h4 {
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1.0625rem;
  }
  .process-step p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.25rem;
  }
}

/* 5) Float-cta scroll behavior — fade out while hero is in view, fade in once past it */
.float-cta {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (max-width: 768px) {
  .float-cta.float-cta-hide {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
    pointer-events: none;
  }
}


/* ============================================================
   RESOURCES HUB — index page with search, filter, pagination
   ============================================================ */
.resources-hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: var(--white);
  padding-block: clamp(3rem, 6vw + 1rem, 5.5rem);
  position: relative;
  overflow: hidden;
}
.resources-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(180,23,48,0.13), transparent 65%);
  pointer-events: none;
}
.resources-hero .container { position: relative; z-index: 1; }
.resources-hero .eyebrow { color: var(--accent); }
.resources-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.5vw + 0.75rem, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.5rem 0 0.75rem;
  text-wrap: balance;
}
.resources-hero .lead {
  color: rgba(255,255,255,0.78);
  font-size: 1.0625rem;
  max-width: 640px;
  margin: 0 0 2rem;
}

/* Search bar */
.resources-search {
  position: relative;
  max-width: 640px;
}
.resources-search input {
  width: 100%;
  padding: 0.95rem 1rem 0.95rem 3rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 999px;
  outline: none;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.4);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.resources-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(180,23,48,0.18), 0 12px 32px -16px rgba(0,0,0,0.4);
}
.resources-search input::placeholder { color: var(--mute); }
.resources-search svg {
  position: absolute;
  left: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--mute);
  stroke-width: 2;
  pointer-events: none;
}
.resources-search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--cream-2);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}
.resources-search.has-query .resources-search-clear { display: inline-flex; }

/* Category chips */
.resources-filters {
  background: var(--cream);
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--silver-light);
  position: sticky;
  top: 72px;
  z-index: 30;
}
.resources-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.resources-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 999px;
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.resources-chip:hover { background: var(--cream-2); }
.resources-chip.is-active {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}
.resources-chip .count {
  display: inline-block;
  padding: 0 0.45rem;
  margin-left: 0.25rem;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.resources-chip.is-active .count { background: rgba(255,255,255,0.18); }
.resources-count {
  margin-left: auto;
  color: var(--mute);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Article grid */
.resources-body { padding-block: clamp(2rem, 3vw + 0.5rem, 3.5rem); background: var(--cream); }
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.resource-card {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -20px rgba(0,37,67,0.25);
  border-color: var(--silver);
}
.resource-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream-2);
  position: relative;
}
.resource-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.resource-card:hover .resource-card-image img { transform: scale(1.04); }
.resource-card-body {
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.625rem;
}
.resource-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.resource-card-cat {
  background: rgba(180,23,48,0.08);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.resource-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.resource-card p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.resource-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  color: var(--mute);
  font-size: 0.8125rem;
}
.resource-card-meta strong { color: var(--navy-700); }
.resource-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.875rem;
}
.resource-card-arrow::after { content: "→"; transition: transform 0.2s ease; }
.resource-card:hover .resource-card-arrow::after { transform: translateX(3px); }

/* Empty state when no results */
.resources-empty {
  text-align: center;
  padding-block: clamp(2.5rem, 4vw, 4rem);
  color: var(--mute);
}
.resources-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.resources-empty h3 { margin: 0 0 0.375rem; color: var(--navy-900); font-family: var(--font-display); font-weight: 700; }
.resources-empty p { margin: 0; }

/* Pagination */
.resources-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.resources-pagination button {
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--silver-light);
  background: var(--white);
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  padding: 0 0.625rem;
}
.resources-pagination button:hover:not(:disabled) {
  background: var(--cream-2);
  border-color: var(--silver);
}
.resources-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.resources-pagination button.is-current {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}
.resources-pagination-info {
  color: var(--mute);
  font-size: 0.8125rem;
  margin: 0 0.5rem;
}

/* Mobile tuning */
@media (max-width: 640px) {
  .resources-filters { top: 60px; padding-block: 0.875rem; }
  .resources-chips { gap: 0.4rem; }
  .resources-chip { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
  .resources-count { width: 100%; margin: 0.25rem 0 0; }
  .resources-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .resource-card-image { aspect-ratio: 16 / 10; }
  .resource-card-body { padding: 1rem 1.125rem 1.25rem; }
  .resource-card h3 { font-size: 1.0625rem; }
}


/* ============================================================
   LOCATION — Free Pickup & Delivery 3-step block (concierge service)
   ============================================================ */
.pickup-process {
  background: var(--cream);
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--silver-light);
}
.pickup-process-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.pickup-process-head .eyebrow { color: var(--accent); }
.pickup-process-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2vw + 0.75rem, 2.25rem);
  font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -0.015em;
  margin: 0.4rem 0 0.5rem;
  text-wrap: balance;
}
.pickup-process-head .lead {
  color: var(--ink-2);
  margin: 0;
  font-size: 1rem;
}
.pickup-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pickup-step {
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pickup-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -20px rgba(0,37,67,0.25);
}
.pickup-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
  box-shadow: 0 6px 14px -6px rgba(180,23,48,0.4);
}
.pickup-step h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.pickup-step p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .pickup-process-grid { grid-template-columns: 1fr; gap: 1rem; }
  .pickup-step { padding: 1.5rem 1.25rem; }
  .pickup-process-head { margin-bottom: 1.75rem; }
}


/* Location map — fallback / handoff link below the embed */
.location-map-fallback {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: right;
}
.location-map-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--accent);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: rgba(180,23,48,0.06);
  transition: background 0.15s ease, color 0.15s ease;
}
.location-map-fallback a:hover {
  background: var(--accent);
  color: var(--white);
}
@media (max-width: 720px) {
  .location-map-fallback { text-align: center; }
}


/* ============================================================
   MOBILE MENU CTA — sticky-bottom block with size parity + strong contrast
   ============================================================ */
.mobile-menu-cta {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy-900);
  padding-top: var(--s-5);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  margin-top: var(--s-7);
  /* hairline separator above so the sticky block is distinguishable
     from menu items when the menu scrolls */
  box-shadow: 0 -1px 0 rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  z-index: 2;
}
.mobile-menu-cta .btn {
  width: 100%;
  /* Force btn-lg sizing for both buttons (visual symmetry) */
  padding: 18px 24px;
  font-size: var(--fs-base);
  font-weight: 700;
}
/* Stronger outline on the secondary button — 25% white is too faint on navy */
.mobile-menu-cta .btn-ghost-dark {
  border: 2px solid rgba(255,255,255,0.55);
  background: transparent;
  color: var(--white);
}
.mobile-menu-cta .btn-ghost-dark:hover,
.mobile-menu-cta .btn-ghost-dark:active,
.mobile-menu-cta .btn-ghost-dark:focus {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
}


/* Article inline figure (real photo evidence inside resource articles) */
.article-figure {
  margin: 2rem 0;
}
.article-figure img {
  width: 100%;
  border-radius: 14px;
  display: block;
}
.article-figure figcaption {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.45;
  text-align: center;
  font-style: italic;
}


/* ============================================================
   .benefit cards — mobile horizontal layout (icon inline with title)
   ============================================================ */
@media (max-width: 720px) {
  .benefit {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: start;
    padding: 1.375rem 1.25rem;
  }
  .benefit-icon {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }
  .benefit-icon svg { width: 20px; height: 20px; }
  /* h3 + p variant (home page) */
  .benefit > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: 1.0625rem;
  }
  .benefit > p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 0.9375rem;
  }
  /* div-wrapped variant (service pages with <strong>+<span>) */
  .benefit > div:not(.benefit-icon) {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    gap: 4px;
  }
}


/* ============================================================
   Hide hero scroll indicator on mobile
   (overlaps with the hero CTA button — mobile users know to scroll)
   ============================================================ */
@media (max-width: 768px) {
  .hero-scroll { display: none !important; }
}


/* ============================================================
   MOBILE GALLERY CAROUSEL — horizontal scroll-snap, one photo per
   viewport with peek of the next photo as a swipe hint.
   ============================================================ */
@media (max-width: 720px) {
  .gallery {
    /* Override the grid from desktop — become a flex scroll container */
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 8px 16px;
    margin: 0 -16px; /* edge-to-edge feel */
    scroll-padding-left: 16px;
    /* hide scrollbar visually, keep functional */
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }

  /* Each item: ~85% of viewport width so the NEXT item peeks ~15% on the
     right — this peek is the strongest signal that swiping is possible */
  .gallery-item,
  .gallery-item.span-7,
  .gallery-item.span-5,
  .gallery-item.span-6,
  .gallery-item.span-4,
  .gallery-item.span-8,
  .gallery-item.span-12 {
    flex: 0 0 85%;
    grid-column: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
  /* Before/after strips keep their own height in the carousel as well */
  .gallery-item.is-strip {
    aspect-ratio: auto;
    align-self: center;
  }

  /* Badge: comfortable size now that photos are large again */
  .gallery-item-tag {
    top: 12px;
    left: 12px;
    padding: 5px 11px;
    font-size: 10px;
    letter-spacing: 0.05em;
    background: rgba(0, 20, 40, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
    50%      { opacity: 1; }
  }
}



/* ============================================================
   Gallery carousel controls — dots + arrow buttons (mobile only)
   ============================================================ */
.gallery-controls { display: none; }

@media (max-width: 720px) {
  .gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin: 1.25rem 0 0;
  }
  /* Arrow buttons */
  .gallery-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--silver-light);
    background: var(--white);
    color: var(--navy-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  }
  .gallery-arrow:hover,
  .gallery-arrow:focus-visible {
    background: var(--cream-2);
    border-color: var(--silver);
    outline: none;
  }
  .gallery-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .gallery-arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Dots */
  .gallery-dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: var(--silver-light);
    padding: 0;
    cursor: pointer;
    transition: background 0.22s ease, width 0.22s ease, border-radius 0.22s ease;
  }
  .gallery-dot.is-active {
    background: var(--accent);
    width: 22px;
    border-radius: 999px;
  }
  .gallery-dot:hover:not(.is-active) {
    background: var(--silver);
  }
}


/* Accent callout — for mid-article conversion hooks (red-themed) */
.callout.callout-accent {
  background: linear-gradient(135deg, rgba(180,23,48,0.04) 0%, rgba(180,23,48,0.08) 100%);
  border-left-color: var(--accent);
}
.callout.callout-accent strong:first-child {
  color: var(--accent);
}
.callout.callout-accent a {
  color: var(--accent);
  font-weight: 700;
}


/* ============================================================
   Our Work Gallery — page styles
   ============================================================ */
.gallery-chip {
  background: var(--white);
  border: 1.5px solid var(--silver-light);
  color: var(--ink);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
.gallery-chip:hover { border-color: var(--silver); transform: translateY(-1px); }
.gallery-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.gallery-chip .chip-count {
  opacity: 0.7;
  font-weight: 400;
  margin-left: 0.25rem;
}

.our-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.gallery-item {
  display: flex;
  flex-direction: column;
}
.gallery-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  background: var(--cream-2, #f5f1eb);
}
.gallery-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-item:hover .gallery-image-wrap img {
  transform: scale(1.04);
}
.gallery-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--white);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.gallery-caption {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .our-work-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
  }
  .gallery-filter {
    gap: 0.5rem !important;
    margin-bottom: 2rem !important;
  }
  .gallery-chip {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
  }
}


/* ============================================================
   Resources search — autocomplete dropdown
   ============================================================ */
.search-suggestions {
  /* position: fixed so it escapes overflow:hidden on .resources-hero and
     stays above the sticky .resources-filters strip. Coords set by JS. */
  position: fixed;
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 16px;
  box-shadow: 0 24px 48px -16px rgba(0, 37, 67, 0.28), 0 4px 12px rgba(0,0,0,0.06);
  max-height: 440px;
  overflow-y: auto;
  z-index: 1000;
  padding: 6px;
  scrollbar-width: thin;
}
.search-suggestions[hidden] { display: none; }

.search-suggestion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease;
}
.search-suggestion:hover,
.search-suggestion.is-active {
  background: var(--cream-2, #f5f1eb);
}
.search-suggestion-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.search-suggestion-title mark {
  background: rgba(180, 23, 48, 0.18);
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}
.search-suggestion-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.78rem;
  color: var(--mute);
  flex-wrap: wrap;
}
.search-suggestion-meta .cat-tag {
  display: inline-block;
  padding: 2px 9px;
  background: rgba(0, 37, 67, 0.08);
  color: var(--navy-900);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.search-suggestions-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--mute);
  font-size: 0.92rem;
  font-style: italic;
}

.search-suggestion-footer {
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.72rem;
  color: var(--mute);
  border-top: 1px solid var(--silver-light);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Mobile adjustments — dropdown still fits, item text stays readable */
@media (max-width: 640px) {
  .search-suggestions {
    max-height: 60vh;
    border-radius: 14px;
    top: calc(100% + 6px);
  }
  .search-suggestion {
    padding: 0.625rem 0.875rem;
  }
  .search-suggestion-title {
    font-size: 0.92rem;
  }
  .search-footer-hint {
    display: none;  /* Keyboard hints not relevant on mobile touch */
  }
}


/* ============== BEFORE/AFTER COMPARE SLIDER (leather2-style) ============== */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
  margin-top: 3rem;
}
@media (max-width: 860px) {
  .ba-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.ba-figure { margin: 0; }
.ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--navy-950);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: ew-resize;
  box-shadow: 0 10px 30px -12px rgba(0,37,67,0.35);
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-img-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: rgba(255,255,255,0.95);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0,0,0,0.35);
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-950);
  border: 2px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  padding: 0;
}
.ba-handle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ba-handle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-label {
  position: absolute;
  top: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(2, 24, 45, 0.78);
  pointer-events: none;
}
.ba-label-before { left: 12px; }
.ba-label-after { right: 12px; background: var(--accent); }
.ba-caption {
  margin-top: 0.875rem;
  color: var(--mute);
  font-size: 0.925rem;
}
.ba-more { text-align: center; margin-top: 3rem; }


/* ============== RESOURCES 2.0: article template components ============== */
.answer-box {
  background: linear-gradient(135deg, rgba(0,37,67,0.03), rgba(180,23,48,0.04));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0;
}
.answer-box-title {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.625rem;
}
.answer-box p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }

.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 1.25rem 0 1.75rem;
  font-size: 0.875rem;
  color: var(--mute);
}
.article-byline a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-byline .byline-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--accent);
}
.article-byline .byline-sep { opacity: 0.4; }
.review-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(22,101,52,0.08); color: #166534;
  border: 1px solid rgba(22,101,52,0.25);
  font-size: 0.75rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.review-badge.pending { background: rgba(146,64,14,0.08); color: #92400e; border-color: rgba(146,64,14,0.25); }
.article-dates { font-size: 0.8125rem; color: var(--mute); margin: 0.25rem 0 0; }
.article-dates strong { color: var(--ink-2); font-weight: 600; }

.article-sources {
  background: var(--cream-2, #f7f5f0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
}
.article-sources h2, .article-sources h3 { margin-top: 0; font-size: 1.125rem; }
.article-sources ol { margin: 0.75rem 0 0; padding-left: 1.25rem; list-style: decimal; }
.article-sources li { margin-bottom: 0.5rem; font-size: 0.9rem; line-height: 1.6; }
.article-sources a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

.reviewer-block {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 2.25rem 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.reviewer-block img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--accent); flex-shrink: 0; }
.reviewer-block h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.reviewer-block p { margin: 0.375rem 0 0; font-size: 0.9rem; color: var(--mute); line-height: 1.65; }
.reviewer-block .reviewer-role { color: var(--accent); font-weight: 600; font-size: 0.8125rem; }

.related-guides { margin: 2.25rem 0; }
.related-guides h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.related-guides ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.related-guides li { border: 1px solid var(--border); border-radius: 10px; }
.related-guides a { display: block; padding: 0.875rem 1.125rem; font-weight: 600; color: var(--ink-2); }
.related-guides a:hover { color: var(--accent); background: var(--cream-2, #f7f5f0); border-radius: 10px; }
.related-guides .related-cat { display: block; font-size: 0.75rem; font-weight: 600; color: var(--mute-2); margin-top: 2px; }

/* ============== RESOURCES 2.0: hub components ============== */
.trust-strip { border-bottom: 1px solid var(--border); background: var(--white); }
.trust-strip-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; padding: 1.125rem 0;
}
.trust-strip-item { display: flex; align-items: center; gap: 10px; font-size: 0.8425rem; font-weight: 600; color: var(--ink-2); }
.trust-strip-item .tick { color: var(--accent); font-weight: 800; }
.trust-strip-item a { color: inherit; }
.trust-strip-item a:hover { color: var(--accent); }

.featured-answers { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.featured-answer {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent); border-radius: 12px; padding: 1.375rem 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.featured-answer .fa-cat { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); }
.featured-answer h3 { margin: 0.5rem 0; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }
.featured-answer p { margin: 0; font-size: 0.9rem; color: var(--mute); line-height: 1.65; }
.featured-answer .fa-meta { margin-top: 0.875rem; font-size: 0.75rem; color: var(--mute-2); }
.featured-answer:hover h3 { color: var(--accent); }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.topic-card {
  display: block; padding: 1.125rem 1.25rem; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px; color: var(--ink-2); font-weight: 700;
}
.topic-card .topic-count { display: block; font-size: 0.75rem; font-weight: 600; color: var(--mute-2); margin-top: 3px; }
.topic-card:hover { border-color: var(--accent); color: var(--accent); }

.expert-module {
  display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center;
  background: var(--navy-950); color: var(--silver-light);
  border-radius: 16px; padding: 2rem 2.25rem; margin: 3rem 0;
}
.expert-module img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--accent); }
.expert-module h2 { color: var(--white); margin: 0 0 0.25rem; font-size: 1.375rem; }
.expert-module .expert-role { color: var(--accent); font-weight: 700; font-size: 0.875rem; }
.expert-module p { margin: 0.625rem 0 0.875rem; max-width: 56ch; font-size: 0.9375rem; line-height: 1.7; }
.expert-module a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; margin-right: 1.25rem; font-size: 0.9rem; }
.expert-module a:hover { color: var(--accent); }

.resources-pagination-static {
  display: flex; justify-content: center; align-items: center; gap: 0.5rem;
  margin: 2.5rem 0 0.5rem; flex-wrap: wrap;
}
.resources-pagination-static a, .resources-pagination-static span {
  min-width: 40px; padding: 0.5rem 0.875rem; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  font-weight: 700; font-size: 0.875rem; color: var(--ink-2); background: var(--white);
}
.resources-pagination-static a:hover { border-color: var(--accent); color: var(--accent); }
.resources-pagination-static .current { background: var(--navy-950); color: var(--white); border-color: var(--navy-950); }
.resources-pagination-static .disabled { opacity: 0.4; }

@media (max-width: 640px) {
  .reviewer-block { flex-direction: column; }
  .expert-module { padding: 1.5rem; }
}


/* ===== RESOURCES HUB POLISH ===== */
/* ---------- card footers ----------
   The footer used to be one flex row with space-between, so a long reviewer
   badge and a long date collided and wrapped mid-phrase. Stack them, pin the
   block to the bottom, and clamp title and summary so a row of cards aligns. */
.resources-grid { align-items: stretch; }

/* visually-hidden label, still read by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.resource-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.resource-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
  min-height: 4.4em;
}
.resource-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--mute-2);
}
.resource-card-meta .review-badge {
  font-size: 0.6875rem;
  padding: 2px 9px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.resource-card-meta strong { color: var(--ink-2); font-weight: 600; }
.resource-card-meta .card-dates { white-space: normal; }

/* ---------- dark cards ----------
   Links across the site inherit their colour, but .sidebar-list a forces
   navy — which vanished against the dark primary card (the phone number in
   the shop box was effectively invisible). Restate the light colours for every
   dark surface so this cannot come back. */
.sidebar-card-primary .sidebar-list li { color: rgba(255,255,255,0.92); }
.sidebar-card-primary .sidebar-list li + li { border-top-color: rgba(255,255,255,0.16); }
.sidebar-card-primary .sidebar-list a,
.sidebar-card-primary a:not(.btn) { color: var(--white); }
.sidebar-card-primary .sidebar-list a:hover { color: rgba(255,255,255,0.78); }
.sidebar-card-primary .sidebar-list a::after { color: rgba(255,255,255,0.6); }

/* ---------- mobile menu accordions ----------
   Locations and Resources are dropdowns on desktop but were flat links on a
   phone, so the nine city pages could only be reached from the footer. These
   are <details> elements: no script, keyboard-operable, and every row is a
   comfortable finger target. */
/* ---------- header ----------
   The bar was rgba(255,255,255,0.94) with a backdrop blur, so a dark hero
   scrolling under it tinted the whole header — navy nav links on a darkened
   bar, and the logo's own white background standing out as a rectangle. A
   solid bar keeps the contrast the design assumes at every scroll position. */
.site-header { background: var(--white); }

/* The call buttons were position:sticky with an opaque background INSIDE the
   scrolling menu, so they floated over the list and hid whatever scrolled
   underneath — McKinney, Allen and Austin were behind them. Give the menu a
   proper three-part layout: fixed header, one scrolling list, buttons pinned
   below it. Nothing overlaps because the buttons are outside the scroll area. */
.mobile-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-menu-header { flex: none; }
.mobile-menu > nav {
  flex: 1 1 auto;
  overflow-y: auto;
  /* overflow-y on its own computes overflow-x to auto, and the summary rows
     run 2px past the box, so the open menu showed a horizontal scrollbar
     across the bottom of the list. Nothing in the menu scrolls sideways. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 0.5rem;
}
.mobile-menu-cta {
  position: static;
  flex: none;
  margin-top: 0;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mobile-sub { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}
.mobile-sub > summary::-webkit-details-marker { display: none; }
.mobile-sub > summary::after {
  content: '';
  width: 10px;
  height: 10px;
  margin-left: 1rem;
  border-right: 2px solid rgba(255,255,255,0.6);
  border-bottom: 2px solid rgba(255,255,255,0.6);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
  flex: none;
}
.mobile-sub[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mobile-sub[open] > summary { color: var(--red-500); }
.mobile-menu .mobile-sub a {
  padding: 12px 0 12px 1.125rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(255,255,255,0.86);
  border-bottom: 0;
  border-left: 2px solid rgba(255,255,255,0.14);
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile-sub-links { padding-bottom: 0.5rem; }

/* Nine city names one per line made the open menu longer than the screen, so
   the last of them sat below the fold. City labels are short, so they go two
   across; only Austin, which carries a second line, spans the full width. */
.mobile-sub-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}
.mobile-sub-cities .mobile-sub-wide { grid-column: 1 / -1; }
@media (max-width: 340px) {
  .mobile-sub-cities { grid-template-columns: 1fr; }
}
.mobile-sub-meta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

/* ---------- dark sections: body text ----------
   .section-dark lightened the headings but never .lead or .mute, so paragraph
   text rendered dark-grey on navy and was effectively unreadable. .dark had the
   rules; .section-dark did not. Bring them into line. */
.section-dark .lead { color: var(--silver-light); }
.section-dark .mute { color: var(--silver); }
.section-dark p:not([class]) { color: var(--silver-light); }
.section-dark strong { color: var(--white); }

/* ---------- self-contained card row ----------
   Used by /thank-you/. Deliberately does not reuse .process-step or .benefit:
   those only get their card styling inside .article-content, and outside it
   their text colour is tuned for a dark background — which is how the steps on
   the thank-you page ended up pale grey on near-white. Everything here is
   defined outright so it renders the same wherever it is dropped. */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 3rem;
}
.card-row > * {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 4px 14px rgba(0,37,67,0.05);
}
.card-row .card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.3;
  margin: 0 0 0.6rem;
  min-height: 2.6em;                 /* keeps a one-line and a two-line title level */
}
.card-row .card-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.card-row a.card-title { display: block; }
.card-row .card-num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;
  flex: none;
}
@media (max-width: 640px) {
  .card-row .card-title { min-height: 0; }
  .card-row { gap: 1rem; margin-top: 2rem; }
}

/* Headings on generated pages break more evenly with balanced wrapping than
   with whatever the line box happens to allow. */
.balance { text-wrap: balance; }

/* ---------- article hero meta ----------
   Three inline spans with no rule behind them, so they ran together with no
   separator: "8 min read Last reviewed Aug 19". Present on every article hero. */
.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
}
.article-hero-meta span { white-space: nowrap; }

/* ---------- code block ----------
   <pre> never wraps, so an unstyled formula block pushed the whole page
   sideways on a phone. Give it its own scroll, same as tables. */
.seo-code-block { margin: 1.75rem 0; }
.seo-code-block pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 1.25rem 1.375rem;
  background: var(--navy-950);
  border-radius: 12px;
  color: var(--silver-light);
  font-size: 0.85rem;
  line-height: 1.65;
}
.seo-code-block code,
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- link grid ----------
   Named a grid but rendered as a single bullet column, so eight city links ran
   down the page one per line. */
.link-grid {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.25rem 1.5rem;
}
.link-grid li { padding: 0.4rem 0; margin: 0; }
.prose .link-grid li { padding-left: 0; }
.prose .link-grid li::before { content: none; }

/* ---------- About page roster ----------
   Plain name/title list. The title sits under the name on narrow cards rather
   than fighting it for the same line. */
.roster-list { list-style: none; margin: 0; padding: 0; }
.roster-list li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.roster-list li:first-child { border-top: 0; padding-top: 0; }
.roster-list li span {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--mute-2);
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* ---------- featured answers ---------- */
.featured-answers { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.featured-answer { display: flex; flex-direction: column; }
.featured-answer h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.featured-answer p {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-answer .fa-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem;
  margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.featured-answer .fa-meta .review-badge { font-size: 0.6875rem; padding: 2px 9px; white-space: nowrap; }

/* ---------- search + filter toolbar ---------- */
.rx-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px -14px rgba(0,37,67,0.35);
}
.rx-toolbar-inner { padding: 0.875rem 0 0.75rem; }
.rx-searchrow { display: flex; gap: 0.625rem; align-items: center; }
.rx-search {
  position: relative; flex: 1 1 auto; display: flex; align-items: center;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0 0.875rem; height: 46px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(180,23,48,0.10); }
.rx-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--mute-2); stroke-width: 2; stroke-linecap: round; }
.rx-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 0.9375rem; color: var(--ink); padding: 0 0.625rem;
}
.rx-search input::placeholder { color: var(--mute-2); }
.rx-clear {
  border: 0; background: transparent; color: var(--mute-2); font-size: 1.375rem;
  line-height: 1; cursor: pointer; padding: 0 0.25rem; display: none;
}
.rx-search.has-query .rx-clear { display: block; }
.rx-clear:hover { color: var(--accent); }

.rx-chips { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 0 0.125rem; scrollbar-width: thin; }
.rx-chips::-webkit-scrollbar { height: 4px; }
.rx-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.rx-chip {
  flex: none; cursor: pointer;
  border: 1px solid var(--border); background: var(--white);
  color: var(--ink-2); font: inherit; font-size: 0.8125rem; font-weight: 600;
  padding: 0.4rem 0.875rem; border-radius: 999px; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rx-chip:hover { border-color: var(--accent); color: var(--accent); }
.rx-chip .n { opacity: 0.55; margin-left: 0.375rem; font-weight: 600; }
.rx-chip[aria-pressed="true"] { background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }
.rx-chip[aria-pressed="true"] .n { opacity: 0.7; }
.rx-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.rx-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.625rem; font-size: 0.8125rem; color: var(--mute); }
.rx-status strong { color: var(--ink); font-weight: 700; }
.rx-reset { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; padding: 0; }
.rx-reset[hidden] { display: none; }

/* search term highlight */
.resource-card mark, .rx-sugg mark { background: rgba(255,214,0,0.35); color: inherit; padding: 0 1px; border-radius: 2px; }

/* suggestions dropdown */
.rx-sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 44px -20px rgba(0,37,67,0.35); overflow: hidden;
}
.rx-sugg a { display: block; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--ink-2); border-bottom: 1px solid var(--border); }
.rx-sugg a:last-child { border-bottom: 0; }
.rx-sugg a:hover, .rx-sugg a.is-active { background: var(--cream-2); color: var(--accent); }
.rx-sugg .rx-sugg-cat { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute-2); margin-top: 2px; }

/* ===================== ESTIMATE REQUEST FORM =====================
   First-party replacement for the GoHighLevel embed. Everything below uses the
   site's own design system, so the form stops looking like a third-party box
   pasted into the page. Markup: scripts/lib/quote-form.mjs. */
.qf {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 44px -28px rgba(0,37,67,0.38);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.qf-form { margin: 0; }

/* The whole step machine depends on the hidden attribute, and [hidden] is only
   a UA rule that ANY author display declaration beats. .btn is inline-flex and
   .qf-field is block, so "Back", "Send my request" and the hail-only storm
   question all rendered on step one. Nothing inside the form opts out of it. */
.qf [hidden] { display: none !important; }

/* The form drops into dark bands (the homepage hero card, the pre-footer CTA)
   where section rules paint paragraphs white. On the form's own white card that
   is white-on-white: the step counter, the helper lines and the notes vanished.
   Restate them at a specificity those section rules cannot reach. */
.qf .qf-legend { color: var(--navy-900); }
.qf .qf-help,
.qf .qf-note,
.qf .qf-progress-text,
.qf .qf-drop-note { color: var(--mute); }
.qf .qf-sublabel,
.qf .qf-progress-text strong,
.qf .qf-chip-label,
.qf .qf-drop-title,
.qf .qf-facts-title,
.qf .qf-facts dt,
.qf .qf-field label { color: var(--navy-900); }
.qf .qf-chip-sub,
.qf .qf-optional { color: var(--mute); }
.qf .qf-facts dd,
.qf .qf-tips li,
.qf .qf-consent,
.qf .qf-server-error { color: var(--ink-2); }
.qf .qf-error { color: var(--accent); }
.qf .qf-foot { color: var(--mute); }
.qf .qf-done h3 { color: var(--navy-900); }
.qf .qf-done p { color: var(--ink-2); }
.qf .qf-field input,
.qf .qf-field select,
.qf .qf-field textarea { color: var(--ink); }
.qf-step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.qf-legend {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.2;
  padding: 0;
  margin-bottom: 0.5rem;
}
.qf-help { margin: 0 0 1.5rem; color: var(--mute); font-size: 0.9375rem; line-height: 1.6; }
.qf-sublabel { margin: 1.75rem 0 0.75rem; font-weight: 700; color: var(--navy-900); font-size: 0.9375rem; }
.qf-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--mute); line-height: 1.55; }
.qf-optional { font-weight: 500; color: var(--mute-2); font-size: 0.78rem; }

/* ---- progress ---- */
.qf-progress { margin-bottom: 1.5rem; }
.qf-progress-bar { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.qf-progress-fill {
  display: block; height: 100%; width: 25%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.qf-progress-text { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--mute); }
.qf-progress-text strong { color: var(--navy-900); }

/* ---- selectable chips ---- */
.qf-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.625rem; }
.qf-chips-sm { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.qf-chip { position: relative; display: block; cursor: pointer; }
.qf-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qf-chip-body {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.qf-chip-label { font-weight: 700; color: var(--navy-900); font-size: 0.9375rem; line-height: 1.3; }
.qf-chip-sub { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--mute); line-height: 1.4; }
.qf-chip:hover .qf-chip-body { border-color: var(--border-strong); }
.qf-chip input:checked + .qf-chip-body {
  border-color: var(--accent);
  background: rgba(180,23,48,0.045);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.qf-chip input:focus-visible + .qf-chip-body { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- text inputs ---- */
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.qf-row-3 { grid-template-columns: 90px 1fr 1fr; }
.qf-field { display: block; margin-top: 1.5rem; }
.qf-row .qf-field { margin-top: 0; }
.qf-field label { display: block; font-weight: 700; color: var(--navy-900); font-size: 0.875rem; margin-bottom: 0.4rem; }
.qf-field input,
.qf-field select,
.qf-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qf-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.qf-field input:focus,
.qf-field select:focus,
.qf-field textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(180,23,48,0.10);
}
.qf-field input::placeholder, .qf-field textarea::placeholder { color: var(--mute-2); }

/* ---- the questions every customer asks ---- */
.qf-facts {
  margin-top: 1.75rem;
  padding: 1.25rem 1.375rem;
  background: var(--cream);
  border-radius: 14px;
  border-left: 3px solid var(--accent);
}
.qf-facts-title {
  margin: 0 0 0.75rem;
  font-weight: 800;
  color: var(--navy-900);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qf-facts dl { margin: 0; }
.qf-facts dt { font-weight: 700; color: var(--navy-900); font-size: 0.9375rem; margin-top: 0.875rem; }
.qf-facts dt:first-of-type { margin-top: 0; }
.qf-facts dd { margin: 0.25rem 0 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.6; }

/* ---- photo step ---- */
.qf-tips { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.qf-tips li {
  padding: 0.625rem 0.875rem;
  background: var(--cream);
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.qf-tips strong { color: var(--navy-900); }
.qf-drop {
  border: 2px dashed var(--border-strong);
  border-radius: 14px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.qf-drop:hover, .qf-drop.is-over { border-color: var(--accent); background: rgba(180,23,48,0.03); }
.qf-drop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qf-drop.is-full { opacity: 0.55; pointer-events: none; }
.qf-drop svg { width: 30px; height: 30px; color: var(--mute-2); }
.qf-drop-title { margin: 0.5rem 0 1rem; font-weight: 700; color: var(--navy-900); }
.qf-drop-actions { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; }
.qf-drop-note { margin: 1rem 0 0; font-size: 0.78rem; color: var(--mute-2); }

.qf-thumbs {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.75rem;
}
.qf-thumb { position: relative; border-radius: 10px; overflow: hidden; background: var(--cream-2); aspect-ratio: 1; }
.qf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qf-thumb.is-working img { opacity: 0.5; }
.qf-thumb-size {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  font-size: 0.6875rem;
  color: var(--white);
  background: rgba(0,21,40,0.72);
}
.qf-thumb-remove {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: rgba(0,21,40,0.72);
  color: var(--white);
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.qf-thumb-remove:hover { background: var(--accent); }

/* ---- consent, errors, actions ---- */
.qf-consent {
  display: flex; align-items: flex-start; gap: 0.625rem;
  margin-top: 1.5rem;
  font-size: 0.875rem; line-height: 1.55; color: var(--ink-2);
  cursor: pointer;
}
.qf-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.qf-error { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--accent); font-weight: 600; display: none; }
.qf-error.is-shown { display: block; }
.qf-server-error {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: rgba(180,23,48,0.07);
  border-left: 3px solid var(--accent);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf-actions {
  display: flex; gap: 0.75rem; align-items: center;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.qf-actions .btn[data-qf-next], .qf-actions .btn[data-qf-submit] { margin-left: auto; }
.qf-foot { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--mute); }

/* ---- inside a hero or CTA card ----
   The form sits in a narrow column there, next to a headline rather than as the
   whole page. Tighten the rhythm so a step fits without the card running past
   the fold, and drop the card chrome since the surrounding card supplies it. */
.form-card .qf,
.form-embed-card .qf {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.form-card .qf-legend,
.form-embed-card .qf-legend { font-size: 1.125rem; }
.form-card .qf-help,
.form-embed-card .qf-help { margin-bottom: 1rem; font-size: 0.875rem; }
/* In a hero card the form competes with the headline for the fold, so the
   options lose their explanatory second line and sit two across. The full page
   at /request-a-quote/ keeps both. */
.form-card .qf-chip-body,
.form-embed-card .qf-chip-body { min-height: 44px; padding: 0.5rem 0.75rem; }
.form-card .qf-chip-sub,
.form-embed-card .qf-chip-sub { display: none; }
.form-card .qf-chip-label,
.form-embed-card .qf-chip-label { font-size: 0.875rem; }
.form-card .qf-chips,
.form-embed-card .qf-chips {
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Photo tips go — the drop zone still explains itself, and the full page keeps
   them. The insurance answers stay: rates, Carfax and paying cash are the three
   things the field team says people ask before they will fill anything in. */
.form-card .qf-tips,
.form-embed-card .qf-tips { display: none; }
.form-card .qf-facts dd,
.form-embed-card .qf-facts dd { font-size: 0.8125rem; }
.form-card .qf-row,
.form-card .qf-field,
.form-embed-card .qf-row,
.form-embed-card .qf-field { margin-top: 1rem; }
.form-card .qf-actions,
.form-embed-card .qf-actions { margin-top: 1.25rem; padding-top: 1rem; }
.form-card .qf-progress,
.form-embed-card .qf-progress { margin-bottom: 1rem; }
.form-card .qf-facts,
.form-embed-card .qf-facts { margin-top: 1.25rem; padding: 1rem 1.125rem; }

/* ===================== NAVIGATION =====================
   The dropdown was a plain white box floating four pixels below its trigger:
   nothing tied it to the item you hovered, and that gap dropped the menu if the
   mouse crossed it slowly. It is now anchored to the left edge of its trigger,
   bridged so the pointer can travel, and the items read as rows rather than as
   links stacked in a card. */
.nav-link {
  padding: 8px 12px;
  border-radius: 8px;
}
/* An underline that grows from the centre, instead of colour as the only cue. */
.nav-link::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::before,
.nav-dropdown:hover > .nav-link::before,
.nav-dropdown:focus-within > .nav-link::before { transform: scaleX(1); }
.nav-link.active::before { transform: scaleX(1); }
.nav-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The bridge: an invisible strip across the gap so the menu survives the trip. */
.nav-dropdown > .nav-link::after { margin-left: 5px; width: 5px; height: 5px; }
.nav-dropdown .dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 10px;
}

.dropdown-menu {
  top: calc(100% + 6px);
  left: 0;
  transform: translateY(-6px);
  min-width: 300px;
  border-radius: 14px;
  border: 1px solid rgba(0,37,67,0.07);
  box-shadow: 0 2px 6px rgba(0,37,67,0.05), 0 18px 44px -18px rgba(0,37,67,0.30);
  padding: 8px;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { transform: translateY(0); }

.dropdown-menu a {
  position: relative;
  padding: 9px 12px 9px 14px;
  border-radius: 10px;
}
/* A rail that slides in on hover, rather than the whole row turning red. */
.dropdown-menu a::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 3px; height: 0;
  border-radius: 3px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 0.18s ease;
}
.dropdown-menu a:hover::before,
.dropdown-menu a:focus-visible::before { height: 22px; }
.dropdown-menu a:hover { background: var(--cream); color: var(--navy-900); }
.dropdown-menu a:hover .dd-title { color: var(--accent); }
.dd-title { display: block; transition: color 0.15s ease; }
.dropdown-menu .dropdown-meta { font-size: 0.6875rem; line-height: 1.4; }

/* Locations: nine cities read badly as one tall column. */
.dropdown-menu-wide { min-width: 420px; }
.dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dropdown-feature {
  margin-top: 6px;
  padding-top: 12px !important;
  border-top: 1px solid var(--border);
  border-radius: 0 0 10px 10px !important;
}
.dropdown-feature .dd-title { color: var(--accent); font-weight: 700; }

/* ===================== TEASER + MODAL =====================
   A hero card gets the short version; the button opens the real form over the
   page. Four steps inline made the card taller than the fold. */
.qf-teaser-points { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.qf-teaser-points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.qf-teaser-points li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.qf-teaser-btn { width: 100%; justify-content: center; }
.qf-teaser-foot { margin: 0.875rem 0 0; font-size: 0.8125rem; color: var(--mute); text-align: center; }
/* Dark cards carry the teaser too, so restate the text colours. */
.form-card .qf-teaser-points li,
.form-embed-card .qf-teaser-points li { color: var(--ink-2); }
.form-card .qf-teaser-foot,
.form-embed-card .qf-teaser-foot { color: var(--mute); }

.qf-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 4vh, 3rem) 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.qf-modal[hidden] { display: none; }
.qf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,21,40,0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.qf-modal.is-open .qf-modal-backdrop { opacity: 1; }
.qf-modal-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 40px 80px -30px rgba(0,21,40,0.55);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.qf-modal.is-open .qf-modal-panel { opacity: 1; transform: none; }
.qf-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 0;
}
.qf-modal-eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.qf-modal-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0.375rem 0 0;
  line-height: 1.2;
}
.qf-modal-close {
  flex: none;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--navy-900);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.qf-modal-close:hover { background: var(--accent); color: var(--white); }
.qf-modal-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qf-modal-body { padding: 1.25rem 1.75rem 1.75rem; }
.qf-modal .qf {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Stop the page behind the dialog from scrolling under it. */
.qf-modal-lock, .qf-modal-lock body { overflow: hidden; }

@media (max-width: 640px) {
  .qf-modal { padding: 0; align-items: stretch; }
  .qf-modal-panel { max-width: none; border-radius: 0; min-height: 100%; margin: 0; }
  .qf-modal-head { padding: 1.125rem 1.125rem 0; }
  .qf-modal-title { font-size: 1.1875rem; }
  .qf-modal-body { padding: 1rem 1.125rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qf-modal-panel, .qf-modal-backdrop { transition: none; }
}

/* ===================== LANGUAGE SWITCH =====================
   A segmented pill rather than a dropdown: two languages do not need a menu,
   and a control that shows both options tells a Spanish speaker the site has
   their language without them having to open anything. The indicator slides
   between them, so the change reads as a state change rather than a page jump. */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  flex: none;
}
.lang-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--navy-900);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.lang-switch[data-active="es"]::before { transform: translateX(100%); }
.lang-opt {
  position: relative;
  z-index: 1;
  min-width: 42px;
  padding: 5px 10px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mute);
  border-radius: 999px;
  transition: color 0.2s ease;
}
.lang-opt.is-active { color: var(--white); }
.lang-opt:not(.is-active):hover { color: var(--navy-900); }
.lang-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* On a dark surface — the mobile menu and the top strip — invert it. */
.lang-switch-dark {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.lang-switch-dark::before { background: var(--red-600); }
.lang-switch-dark .lang-opt { color: rgba(255,255,255,0.72); }
.lang-switch-dark .lang-opt.is-active { color: var(--white); }
.lang-switch-dark .lang-opt:not(.is-active):hover { color: var(--white); }

/* In the header it sits next to the phone; below 1080px the desktop nav is gone
   and the switcher moves into the mobile menu, so hide the header copy there. */
.nav-cta-group .lang-switch { margin-right: 0.25rem; }
@media (max-width: 1080px) {
  .nav-cta-group .lang-switch { display: none; }
}
.mobile-menu .lang-switch {
  width: 100%;
  justify-content: stretch;
  margin-bottom: 1.25rem;
}
.mobile-menu .lang-opt { flex: 1; padding: 10px; font-size: 0.875rem; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.mobile-menu .lang-switch::before { width: calc(50% - 3px); }

/* ===================== REVIEWS PAGE ===================== */
.review-grid {
  columns: 3 320px;
  column-gap: 1.5rem;
  margin-top: 3rem;
}
.review-card {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  padding: 1.625rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 28px -22px rgba(0,37,67,0.35);
}
.review-stars { color: #E8A33D; letter-spacing: 2px; font-size: 0.9375rem; }
.review-card blockquote {
  margin: 0.75rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.review-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.review-name { font-weight: 700; color: var(--navy-900); font-size: 0.9375rem; }
.review-meta { font-size: 0.78rem; color: var(--mute); }

/* ===================== HOW IT WORKS ===================== */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: stretch;
}
.hiw-step {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
}
.hiw-num {
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  margin-bottom: 1rem;
}
.hiw-step h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.hiw-step p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.section-cream .hiw-step { background: var(--white); }

@media (max-width: 640px) {
  .review-grid { columns: 1; }
  .review-card { padding: 1.25rem; }
}

/* ---- the doorstep questions, under the form ---- */
.qa-list { display: grid; gap: 1rem; margin-top: 2.5rem; }
.qa-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.625rem;
}
.qa-item h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.qa-item p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.65; }

/* ---- success ---- */
.qf-done { text-align: center; padding: 1.5rem 0; }
.qf-done-mark {
  width: 62px; height: 62px; margin: 0 auto 1.25rem;
  border-radius: 50%; background: var(--red-600); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.qf-done h3 { font-family: var(--font-display); font-size: 1.375rem; color: var(--navy-900); margin: 0 0 0.5rem; }
.qf-done p { margin: 0; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 640px) {
  .rx-toolbar { position: static; }
  .qf { padding: 1.125rem; border-radius: 14px; }
  .qf-row, .qf-row-3 { grid-template-columns: 1fr; gap: 1.125rem; }
  .qf-chips, .qf-chips-sm { grid-template-columns: 1fr; }
  .qf-actions { flex-direction: column-reverse; align-items: stretch; }
  .qf-actions .btn { width: 100%; justify-content: center; }
  .qf-actions .btn[data-qf-next], .qf-actions .btn[data-qf-submit] { margin-left: 0; }
  .qf-thumbs { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .resource-card h3 { min-height: 0; }
  .resource-card p { min-height: 0; -webkit-line-clamp: 4; }
  .featured-answer h3 { min-height: 0; }

  /* ---------- phone readability ----------
     Type that is fine at arm's length on a monitor is a squint on a phone.
     Nothing a customer has to read drops below about 13px on a small screen;
     category tags and counts, which are glanced at rather than read, get 11px. */
  .t-card-meta,
  .t-google,
  .location-card-distance,
  .stat-item span,
  .featured-answer .fa-meta,
  .resource-card-meta,
  .roster-list li span,
  .search-suggestion-meta,
  .search-suggestion-footer,
  .article-dates,
  .qf-optional,
  .qf-drop-note,
  .review-meta,
  .lang-opt,
  .card-row .card-body { font-size: 0.8125rem; }

  .gallery-item-tag,
  .search-suggestion-meta .cat-tag,
  .resource-card-cat,
  .rx-chip .n { font-size: 0.6875rem; }

  /* Buttons side by side on a phone end up too narrow to read; let them stack
     and fill the width instead. */
  .article-hero-cta,
  .cta-band-actions,
  .mobile-menu-cta { flex-direction: column; align-items: stretch; }
  .article-hero-cta .btn,
  .cta-band-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- agency credit ----------
   Sits in the bottom-right of the footer row. .footer-bottom is already a
   space-between flex row, so the credit needs to sit with the links rather
   than claim a third slot that would push the legal links to the middle. */
.footer-credit { color: var(--mute-2); }
.footer-credit a { color: var(--white); font-weight: 700; }
.footer-credit a:hover { color: var(--red-400, #ef4444); }
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ---------- images must never be sized on one axis only ----------
   .article-figure img and .figure img set width:100% and left the height to the
   HTML height attribute. That attribute is a presentational hint and still
   applies, so a 1400x1779 shop photo rendered 1779px tall inside a 700px column
   and got worse the narrower the screen — the "distorted picture, even worse on
   mobile" report. Both axes, or neither. */
.article-figure img,
.figure img { height: auto; }

/* ---------- the wordmark must never be squashed ----------
   Every logo sits in a flex row next to something else, and a replaced element
   whose width is clamped by max-width while its height stays pinned comes out
   stretched. Pin the ratio, keep the picture from being stretched as a flex
   item, and let object-fit protect the artwork whatever the box ends up doing. */
.nav-logo picture,
.mobile-menu-header picture,
.footer-brand picture { flex: 0 0 auto; display: block; width: -moz-max-content; width: max-content; max-width: 100%; }
.nav-logo img,
.mobile-menu-header img,
.footer-brand img { object-fit: contain; object-position: left center; max-width: 100%; }
.nav-logo img { aspect-ratio: 500 / 188; height: 44px; width: auto; }
.mobile-menu-header img { aspect-ratio: 500 / 202; height: 34px; width: auto; }
.footer-brand img { aspect-ratio: 500 / 202; height: 44px; width: auto; }

/* ---------- estimate form: two routes, one shape ----------
   Step one now offers hail or a single ding and nothing else, so the chips read
   better as a pair than as an auto-fitting row that leaves one of them orphaned
   on a narrow screen. */
.qf-chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .qf-chips-2 { grid-template-columns: 1fr; } }
.qf-consent-note { margin: 1.25rem 0 0; font-size: 0.8125rem; color: var(--mute); line-height: 1.55; }
/* Field labels are dark on a light card. Stated rather than inherited, because
   the modal has been shipped over a navy footer before. */
.qf-field label, .qf-sublabel { color: var(--navy-900); }

/* ---------- the modal on a phone ----------
   It used to be one long page-level scroll: the panel grew past the viewport,
   the fixed backdrop did not, and everything below the fold was drawn straight
   over the footer — dark labels on a dark background. Now the panel is exactly
   one viewport tall, the head and the buttons stay put, and only the body
   scrolls. That is also why Continue is always reachable without scrolling. */
@media (max-width: 640px) {
  .qf-modal { padding: 0; align-items: stretch; overflow: hidden; }
  .qf-modal-panel {
    max-width: none; border-radius: 0; margin: 0;
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; min-height: 0;
  }
  .qf-modal-head {
    flex: 0 0 auto;
    padding: calc(0.875rem + env(safe-area-inset-top, 0px)) 1.125rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .qf-modal-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 1rem 1.125rem 0;
  }
  .qf-modal-body .qf-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 1.5rem;
    background: var(--white);
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
  }
  .qf-modal-body .qf-foot { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .qf-modal-body .qf-progress { position: sticky; top: 0; z-index: 2; background: var(--white); padding-top: 0.25rem; }
}

/* ---------- mobile menu ----------
   Mobile is the majority of this site's traffic, so the menu gets the same
   care as the desktop header: a logo that keeps its shape, rows with an
   affordance that they open, and a call-to-action block that never scrolls
   out of reach. */
.mobile-menu-header { margin-bottom: var(--s-5); }
.mobile-menu > nav { scroll-padding-bottom: 2rem; }
.mobile-menu .has-sub > a,
.mobile-menu [data-mobile-toggle] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mobile-menu a { transition: color 0.15s ease; }
.mobile-menu a:active { color: var(--red-400, #ef4444); }
.mobile-menu .mobile-sub a { padding-left: var(--s-4); }

/* ---------- reviewer identity ----------
   The circle beside the founder's name held a photograph of a different member
   of the team, which reads as a portrait of him whatever the alt text says.
   Until DentPicks sends a portrait of Vytas it carries the brand mark, which
   claims nothing. object-fit has to be contain here: the mark is a tall glyph
   and cover would crop it to a red smear. */
.article-byline .byline-avatar-mark,
.reviewer-block .reviewer-mark {
  object-fit: contain;
  background: var(--cream);
  border-radius: 50%;
}
.article-byline .byline-avatar-mark { width: 40px; height: 40px; padding: 7px; }
.reviewer-block .reviewer-mark { padding: 12px; }

/* ---------- a button label must not push the page sideways ----------
   .btn is white-space: nowrap, which is right on a desktop and wrong on a
   phone the moment a label grows: the Spanish "Ver la galería completa de
   antes y después" is 393px against a 375px screen, so the whole home page
   scrolled horizontally and the hero text was cut off at the left edge. Below
   600px the label is allowed to wrap — short labels are unaffected, since a
   line only breaks when it has to. */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
  }
  /* The floating call bar is a flex row of two short buttons: let them wrap and
     flex-shrink squeezes both into two cramped lines even though they fit. */
  .float-cta .btn {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}