/* Train With Dave — Premium fitness brand (Barry's / Peloton / Tonal feel)
   Confident sans typography, black/white/cream/red, refined cards, soft shadows.
   ========================================================= */

:root {
  /* Palette — bold, clean, minimal */
  --red: #D81920;
  --red-dark: #A3131A;
  --red-hot: #F22730;
  --black: #0B0B0B;
  --black-2: #141414;
  --black-3: #1F1F1F;
  --white: #FFFFFF;
  --cream: #F6F3ED;
  --cream-2: #EEE8DC;
  --line: #E5E0D6;
  --line-2: #D9D3C4;
  --line-dark: #262626;
  --text: #0B0B0B;
  --text-2: #3E3E3E;
  --text-3: #6B6B6B;
  --muted: #9B9B9B;
  --gold: #C9A14A;

  /* Legacy aliases */
  --ink: var(--black);
  --ink-2: var(--black-2);
  --bone: var(--cream);
  --paper: var(--white);

  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.12);
  --shadow-red: 0 10px 30px rgba(216,25,32,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 200ms var(--ease);
  --slow: 500ms var(--ease);

  --container: 1280px;
  --container-narrow: 880px;
  --container-wide: 1500px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Archivo', 'Inter Tight', -apple-system, sans-serif;
  --font-impact: 'Archivo', 'Inter Tight', sans-serif;
}

/* ————— Reset ————— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-weight: 400;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: all var(--fast); }
/* In-body content links must not rely on color alone (WCAG 1.4.1).
   Underline links inside paragraphs, list items, FAQ answers, blog body,
   and footer text-context locations. */
p > a:not(.btn),
li > a:not(.btn),
.faq-a a,
.blog-post-body a:not(.btn),
.author-bio-meta a,
.footer-bottom a,
.footer-contact a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

/* ————— Typography ————— */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--black);
  font-style: normal;
}
h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.02;
}
h2 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
}
h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
}
h4 {
  font-size: 1.08rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}
p {
  color: var(--text-2);
  font-size: 1.015rem;
  line-height: 1.7;
  font-weight: 400;
}
p.lead { font-size: 1.18rem; line-height: 1.6; color: var(--text); font-weight: 500; }
strong { color: var(--black); font-weight: 700; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) {
  .container, .container-narrow, .container-wide, .page-hero-inner { padding: 0 20px; }
}

/* ————— Utilities ————— */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--red);
  display: inline-block;
}
.section-dark .eyebrow { color: rgba(255,255,255,.6); }
.section-dark .eyebrow::before { background: var(--red-hot); }

.section { padding: clamp(80px, 10vw, 130px) 0; }
.section-sm { padding: clamp(60px, 7vw, 90px) 0; }
.section-dark { background: var(--black); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,.75); }
.section-cream { background: var(--cream); }
.section-bone { background: var(--cream); }

.text-center { text-align: center; }
.red-text { color: var(--red); }
.highlight {
  background: linear-gradient(180deg, transparent 64%, rgba(216,25,32,.18) 64%);
  padding: 0 4px;
}

/* ————— Buttons — refined premium feel ————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: all var(--fast);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  text-decoration: none;
  border-radius: var(--radius);
  line-height: 1;
  position: relative;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--fast); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary, .btn-red {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-red);
}
.btn-primary:hover, .btn-red:hover {
  background: var(--red-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(216,25,32,.42);
}
.btn-black {
  background: var(--black);
  color: var(--white);
}
.btn-black:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-white {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-outline:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}
.btn-ghost:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  transform: translateY(-2px);
}
.btn-secondary {
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
}
.btn-secondary:hover { background: var(--black); color: var(--white); }

.btn-sm { padding: 11px 20px; font-size: .78rem; letter-spacing: .08em; }
.btn-lg { padding: 19px 34px; font-size: .92rem; letter-spacing: .08em; }
.btn-xl { padding: 22px 40px; font-size: .98rem; letter-spacing: .08em; }

/* Link arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  transition: all var(--fast);
  text-decoration: none;
}
.link-arrow:hover { gap: 14px; color: var(--red-dark); }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--fast); }
.link-arrow:hover svg { transform: translateX(4px); }
.section-dark .link-arrow { color: var(--red-hot); }
.section-dark .link-arrow:hover { color: var(--white); }

/* ————— Top strip ————— */
.top-strip {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .78rem;
  text-align: center;
  padding: 10px 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.top-strip .red-text { color: var(--red-hot); }

/* ————— Navigation ————— */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: all var(--fast);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 720px) { .nav-inner { padding: 12px 20px; } }
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.logo:hover { opacity: .85; }
.logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.footer .logo-img { filter: invert(1) brightness(1.05); height: 44px; }
/* legacy logo-mark — hidden (replaced by real logo image) */
.logo-mark { display: none !important; }
@media (max-width: 720px) { .logo-img { height: 32px; } }
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  color: var(--black);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-display);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width var(--fast);
}
.nav-links a:hover, .nav-links a.active { color: var(--red); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--black);
  font-size: .88rem;
  letter-spacing: .02em;
  text-decoration: none;
}
.nav-phone:hover { color: var(--red); }
.nav-phone svg { width: 15px; height: 15px; }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--black);
  place-items: center;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--white); display: block; position: relative; transition: all var(--fast); }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--white); transition: all var(--fast); }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: grid; }
  .nav-phone, .nav-cta .btn:not(.nav-cta-mobile) { display: none; }
  .nav-links {
    position: fixed;
    inset: 66px 0 0 0;
    background: var(--white);
    flex-direction: column;
    padding: 40px 28px;
    gap: 0;
    transform: translateX(100%);
    transition: transform var(--slow);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    align-items: flex-start;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a {
    font-size: 1rem;
    letter-spacing: .1em;
    padding: 20px 0;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }
  .nav-links .btn { margin-top: 26px; width: 100%; padding: 18px; font-size: .9rem; }
}

/* ————— Hero ————— */
.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  min-height: 88vh;
  display: grid;
  align-items: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  filter: contrast(1.05) brightness(.75) saturate(.95);
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 55%, rgba(11,11,11,.35) 100%),
    radial-gradient(1000px 500px at 100% 100%, rgba(216,25,32,.28), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 32px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 50px; padding: 80px 28px; }
  .hero { min-height: auto; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(216,25,32,.15);
  border: 1px solid var(--red);
  border-radius: var(--radius-pill);
  color: var(--red-hot);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero-badge svg { width: 14px; height: 14px; }
.hero h1 {
  color: var(--white);
  margin-bottom: 24px;
  text-transform: none;
  letter-spacing: -.035em;
}
.hero h1 .red-text { color: var(--red-hot); }
.hero-sub {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: rgba(255,255,255,.82);
  margin-bottom: 36px;
  max-width: 580px;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}
.hero-trust strong { color: var(--white); font-weight: 700; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; }
.stars { display: inline-flex; gap: 2px; color: var(--red-hot); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.04) saturate(1.08);
}
.hero-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(216,25,32,.08) 0 12px, transparent 12px 24px),
    var(--paper-2, #f3f1ed);
  border: 2px dashed rgba(216,25,32,.55);
  color: #0b0b0b;
}
.hero-placeholder-label {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: 0.02em;
  color: #D81920;
}
.hero-placeholder-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(11,11,11,.6);
  max-width: 36ch;
  line-height: 1.4;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11,11,11,.65) 100%);
}
.hero-visual-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 28px;
  color: var(--white);
}
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 22px;
  background: rgba(11,11,11,.75);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  border-left: 3px solid var(--red);
}
.hero-stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.hero-stat-label {
  font-family: var(--font-body);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  font-weight: 600;
}

.floating-card {
  position: absolute;
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
  border-left: 3px solid var(--red);
}
.floating-card.fc-top { top: 30px; left: -24px; animation: float 5s ease-in-out infinite; }
.floating-card.fc-bot { bottom: 100px; right: -24px; animation: float 5s ease-in-out infinite 2.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.fc-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fc-icon svg { width: 17px; height: 17px; }
.fc-title { font-family: var(--font-display); font-weight: 900; font-size: .92rem; line-height: 1.1; color: var(--black); }
.fc-sub { font-size: .76rem; color: var(--text-3); font-weight: 500; }
@media (max-width: 600px) { .floating-card { display: none; } }

/* ————— Awards strip ————— */
.awards {
  padding: 28px 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.awards-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  text-align: center;
}
.awards-label {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.award-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  color: var(--black);
  letter-spacing: .03em;
}
.award-chip svg { width: 14px; height: 14px; color: var(--gold); }

/* ————— Review strip ————— */
.logo-bar {
  padding: 36px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.logo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}
.logo-bar-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.review-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--black);
  font-size: .95rem;
  letter-spacing: .02em;
}
.review-platform .stars { color: var(--red); }
.review-platform .stars svg { width: 13px; height: 13px; }

/* ————— Section heads ————— */
.sec-head { text-align: center; margin-bottom: 64px; max-width: 820px; margin-left: auto; margin-right: auto; }
.sec-head.left { text-align: left; margin-left: 0; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head p { font-size: 1.12rem; color: var(--text-2); max-width: 620px; margin: 0 auto; line-height: 1.65; }
.sec-head.left p { margin: 0; }
.section-dark .sec-head p { color: rgba(255,255,255,.72); }

/* ————— Grids ————— */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; grid-auto-rows: 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; grid-auto-rows: 1fr; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; grid-auto-rows: 1fr; }
/* Card children stretch to fill their grid cell, guaranteeing equal
   heights across every row. Excludes .transform-card which uses
   aspect-ratio to manage its own sizing. */
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card,
.grid-2 > .location-card, .grid-3 > .location-card, .grid-4 > .location-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 24px; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .grid-4.keep-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
}
/* Stack .keep-2 grids to a single column on phones so cards never clip the viewport. */
@media (max-width: 600px) {
  .grid-4.keep-2 { grid-template-columns: 1fr; gap: 20px; }
}

/* ————— Feature cards — refined ————— */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: all var(--fast);
  position: relative;
}
.card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.card-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--red);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  transition: all var(--fast);
}
.card:hover .card-icon { background: var(--red); color: var(--white); }
.card-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .97rem; }
.card.red .card-icon { background: var(--red); color: var(--white); }

/* ————— Service cards ————— */
.service-card {
  position: relative;
  padding: 40px 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--slow);
  text-decoration: none;
  color: inherit;
  display: block;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow);
}
.service-card:hover::after { transform: scaleX(1); }
.service-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  background: var(--black);
  color: var(--white);
}
.service-card:hover h3, .service-card:hover p, .service-card:hover .service-arrow { color: var(--white); }
.service-card:hover .service-num { color: var(--red-hot); }
.service-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--black);
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -.03em;
  transition: color var(--slow);
  opacity: .3;
}
.service-card:hover .service-num { color: var(--red-hot); opacity: 1; }
.service-card h3 { margin-bottom: 12px; transition: color var(--slow); }
.service-card p { margin-bottom: 24px; transition: color var(--slow); font-size: .97rem; }
.service-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  transition: all var(--fast);
}
.service-arrow svg { width: 14px; height: 14px; transition: transform var(--fast); }
.service-card:hover .service-arrow svg { transform: translateX(4px); }

/* ————— Process ————— */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 30px; left: 8%; right: 8%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 14px);
  z-index: 0;
}
.section-dark .process::before { background: repeating-linear-gradient(to right, rgba(255,255,255,.18) 0 6px, transparent 6px 14px); }
.process-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.process-num {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  background: var(--white);
  border: 2px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--black);
  box-shadow: var(--shadow-xs);
}
.section-dark .process-num { background: var(--black); border-color: rgba(255,255,255,.3); color: var(--white); }
.process-step.active .process-num {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  box-shadow: var(--shadow-red);
}
.process-step h3, .process-step h4 { margin-bottom: 8px; font-size: 1.15rem; }
.process-step p { font-size: .95rem; }
@media (max-width: 960px) { .process { grid-template-columns: 1fr 1fr; gap: 40px; } .process::before { display: none; } }
@media (max-width: 600px) { .process { grid-template-columns: 1fr; } }

/* ————— Stats band (black with red digit emphasis) ————— */
.stats-band {
  background: var(--black);
  color: var(--white);
  padding: 72px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 300px at 50% 0%, rgba(216,25,32,.08), transparent 70%);
  pointer-events: none;
}
.stats-band > * { position: relative; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: .95;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -.035em;
}
.stat-big em { font-style: normal; color: var(--red-hot); }
.stat-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* ————— Transformation cards — NOW CLICKABLE ————— */
.transform-card { text-decoration: none; }
/* When the featured-cases grid has exactly 5 children (3+2 layout),
   center the orphaned second row using a 6-column virtual grid. */
@media (min-width: 961px) {
  .featured-cases {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  .featured-cases > * { grid-column: span 2; }
  .featured-cases > :nth-child(4) { grid-column: 2 / span 2; }
  .featured-cases > :nth-child(5) { grid-column: 4 / span 2; }
}

.transform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .transform-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .transform-grid { grid-template-columns: 1fr; } }
.transform-card {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  aspect-ratio: 4/5;
  isolation: isolate;
  transition: all var(--fast);
  text-decoration: none;
}
.transform-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}
.transform-card:hover img { transform: scale(1.05); }
.transform-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
  transition: transform var(--slow);
  filter: contrast(1.03) saturate(1.05);
}
.transform-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,11,.15) 0%, rgba(11,11,11,.5) 55%, rgba(11,11,11,.95) 100%);
}
.transform-card > * { position: relative; z-index: 2; }
.transform-card .tag {
  display: inline-flex;
  align-self: flex-start;
  margin: 22px 22px 0;
  padding: 6px 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.transform-card-body { padding: 22px 24px 26px; margin-top: auto; }
.transform-card h3 { color: var(--white); margin-bottom: 10px; font-size: 1.3rem; }
.transform-card .quote { color: rgba(255,255,255,.88); font-size: .95rem; margin-bottom: 18px; line-height: 1.5; }
.transform-card .stars { margin-bottom: 10px; }
.transform-card .stars svg { width: 16px; height: 16px; }

/* Blog post styles (template used across all migrated posts) */
.blog-post-hero { background: #0b0b0b; color: white; padding: 60px 0 48px; }
.blog-post-hero .eyebrow { color: #D81920; }
.blog-post-hero h1 { color: white; font-size: clamp(1.8rem, 3.8vw, 2.8rem); margin: 12px 0 14px; line-height: 1.18; }
.blog-post-meta { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.7); font-size: .9rem; margin-top: 10px; font-family: 'Inter',sans-serif; }
.blog-post-body { max-width: 760px; margin: 0 auto; }
.blog-post-body p, .blog-post-body li { font-size: 1.08rem; line-height: 1.7; color: var(--text-2); }
.blog-post-body h2 { font-family: 'Archivo',sans-serif; font-weight: 900; font-size: 1.6rem; margin: 40px 0 16px; }
.blog-post-body h3 { font-family: 'Archivo',sans-serif; font-weight: 800; font-size: 1.2rem; margin: 32px 0 12px; }
.blog-post-body img { width:100%; height:auto; border-radius: var(--radius); margin: 24px 0; box-shadow: var(--shadow); }
.blog-post-body ul, .blog-post-body ol { padding-left: 22px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body a:not(.btn) { color: var(--red); font-weight: 600; }
.blog-post-body .btn { color: #fff !important; }
.blog-post-body .btn-red { background: var(--red); color: #fff !important; }
.blog-post-body .btn-red:hover { background: #b8141a; color: #fff !important; }
.blog-post-body blockquote {
  border-left: 4px solid var(--red);
  padding: 12px 22px;
  margin: 28px 0;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--text-2);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.blog-post-body blockquote p { margin: 0; }
.blog-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
}
.blog-post-body table th {
  background: #0b0b0b;
  color: white;
  padding: 12px 14px;
  text-align: left;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blog-post-body table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.blog-post-body table tr:last-child td { border-bottom: none; }
.blog-post-body hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }
.blog-cta-box {
  background: #0b0b0b; color: white; padding: 40px 36px; border-radius: var(--radius-lg);
  border-left: 6px solid var(--red); margin: 40px 0;
}
.blog-cta-box h2 { color: white; margin: 0 0 12px; font-size: 1.6rem; }
.blog-cta-box p { color: rgba(255,255,255,.88); margin-bottom: 18px; }
.blog-faq details { background: var(--paper-2); padding: 20px 24px; border-radius: var(--radius); margin-bottom: 12px; }
.blog-faq summary { cursor: pointer; font-weight: 800; font-family: 'Archivo',sans-serif; list-style: none; }
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq details[open] summary { margin-bottom: 12px; }

/* Blog index grid (landing page) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
  grid-auto-rows: 1fr;
}
.blog-grid > * { height: 100%; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--fast);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; color: inherit; }
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; background: #0b0b0b; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat {
  font-family: 'Archivo', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.blog-card h3 { font-size: 1.15rem; line-height: 1.35; margin-bottom: 10px; }
.blog-card-excerpt { font-size: .95rem; color: var(--text-3); line-height: 1.55; flex: 1; }
.blog-card-meta { font-size: .82rem; color: var(--text-3); margin-top: 14px; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-coming-soon {
  background: var(--paper-2);
  border: 2px dashed rgba(216,25,32,.35);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  color: var(--text-3);
}

/* Review badges (homepage, clickable to Google/Yelp) */
.review-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: linear-gradient(180deg, #181818 0%, #0f0f0f 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: #fff !important;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.review-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(255,184,0,.55);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,184,0,.18);
}
.review-badge-logo { display: inline-flex; }
.review-badge-stars { display: inline-flex; gap: 2px; }
.review-badge-stars svg { width: 16px; height: 16px; }
.review-badge-label {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}
@media (max-width: 900px) {
  .review-badge-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .review-badge-row { grid-template-columns: 1fr !important; }
}

/* Awards section medals */
.awards-block { background: #0b0b0b; color: #fff; }
.awards-badges-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.award-medal {
  position: relative;
  padding: 20px 18px;
  background: linear-gradient(180deg, #1b1b1b 0%, #0b0b0b 100%);
  border: 1.5px solid rgba(212,175,55,.55);
  border-radius: 12px;
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.35;
  text-align: center;
  letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(212,175,55,.12);
}
.award-medal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(212,175,55,.08) 0%, rgba(212,175,55,0) 50%);
}
@media (max-width: 900px) {
  .awards-badges-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .awards-badges-row { grid-template-columns: 1fr; }
}
.transform-card .client-city {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.58);
  letter-spacing: .04em;
  margin: -4px 0 10px;
}
.case-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #0b0b0b;
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid rgba(216,25,32,.55);
}
.case-badge:nth-child(odd) {
  background: var(--red, #D81920);
  color: #fff;
  border-color: transparent;
}
.read-full-story {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--red, #D81920);
  color: #fff !important;
  font-family: 'Archivo', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.read-full-story:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(216,25,32,.35);
}
.read-full-story svg { width: 12px; height: 12px; }
.transform-stats {
  display: flex;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.ts-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.55rem;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.02em;
}
.ts-label {
  font-family: var(--font-display);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  font-weight: 700;
}

/* ————— Testimonials ————— */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all var(--fast);
}
.testimonial:hover { border-color: transparent; box-shadow: var(--shadow); }
.section-dark .testimonial {
  background: var(--black-2);
  border-color: var(--line-dark);
}
.testimonial-quote {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text);
  flex: 1;
  font-weight: 500;
}
.section-dark .testimonial-quote { color: rgba(255,255,255,.92); }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.section-dark .testimonial-author { border-color: var(--line-dark); }
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  overflow: hidden;
  flex-shrink: 0;
}
.section-dark .avatar { background: var(--white); color: var(--black); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .98rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.section-dark .testimonial-name { color: var(--white); }
.testimonial-meta { font-size: .85rem; color: var(--text-3); font-weight: 500; }
.section-dark .testimonial-meta { color: rgba(255,255,255,.6); }

/* ————— Case studies — NOW CLICKABLE ————— */
.case-list { display: flex; flex-direction: column; gap: 4px; }
.case {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
  padding: 50px 36px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--fast);
  background: var(--white);
  border: 1px solid transparent;
}
.case:hover { background: var(--cream); border-color: var(--line); }
.case-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--black);
  position: relative;
}
.case-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--slow);
}
.case:hover .case-img img { transform: scale(1.04); }
.case-img .case-tag {
  position: absolute;
  top: 18px; left: 18px;
  padding: 7px 14px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.case h3 { margin-bottom: 8px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.case-meta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 22px;
}
.case-quote {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text);
  border-left: 3px solid var(--red);
  padding-left: 20px;
  margin-bottom: 22px;
  font-weight: 500;
}
.case p { margin-bottom: 20px; }
.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.case-result-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--black);
  line-height: 1;
  letter-spacing: -.03em;
}
.case-result-label {
  font-family: var(--font-display);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
  font-weight: 700;
  margin-top: 6px;
}
@media (max-width: 960px) {
  .case { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px; }
  .case.reverse > *:first-child { order: 1; }
}
.case.reverse > *:first-child { order: 2; }

/* ————— FAQ ————— */
.faq-wrap { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 800;
  color: var(--text);
  transition: color var(--fast);
  cursor: pointer;
  list-style: none;
  letter-spacing: -.015em;
  line-height: 1.35;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--red); }
.faq-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  transition: all var(--fast);
}
.faq-q:hover .faq-icon { border-color: var(--red); }
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--black);
  transition: all var(--fast);
}
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after { width: 2px; height: 12px; }
.faq-item[open] .faq-icon { background: var(--red); border-color: var(--red); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--white); }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
  padding: 0 0 26px;
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 88%;
}

/* ————— CTA banner ————— */
.cta-banner {
  background: var(--black);
  color: var(--white);
  padding: clamp(52px, 7vw, 92px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-top: 4px solid var(--red);
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 260px at 85% 15%, rgba(216,25,32,.25), transparent 70%);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); margin-bottom: 14px; }
.cta-banner p { color: rgba(255,255,255,.8); font-size: 1.1rem; margin-bottom: 0; line-height: 1.6; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* When the banner only has a single CTA, center it horizontally in its
   grid column so it doesn't pin to the left and look unbalanced. */
.cta-actions:has(> .btn:only-child) { align-items: center; }
@media (max-width: 900px) { .cta-banner { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px; } }

/* ————— Locations ————— */
.location-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--fast);
  text-decoration: none;
  color: inherit;
  display: block;
}
.location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  color: inherit;
}
.location-card:hover .location-img img { transform: scale(1.05); }
.location-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--black);
  position: relative;
}
.location-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--slow);
}
.location-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,11,11,.7) 100%);
  z-index: 1;
}
.location-img-label {
  position: absolute;
  bottom: 20px; left: 24px;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -.015em;
}
.location-body { padding: 28px; }
.location-body h3 { margin-bottom: 10px; }
.location-addr { color: var(--text-2); font-size: .95rem; margin-bottom: 14px; line-height: 1.55; }
.location-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .9rem;
  color: var(--text-2);
}
.location-details span { display: flex; align-items: center; gap: 8px; }
.location-details svg { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; }
.location-map {
  /* legacy element hidden; location-img takes over */
  display: none;
}

/* ————— Form ————— */
.form-wrap {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 52px);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
}
.form-wrap h2 { font-size: 1.6rem; margin-bottom: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  color: var(--text);
  letter-spacing: .04em;
}
.form-field input, .form-field select, .form-field textarea {
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--white);
  transition: all var(--fast);
  color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216,25,32,.12);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-radio {
  position: relative;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--fast);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  text-align: center;
  letter-spacing: .02em;
}
.form-radio input { position: absolute; opacity: 0; }
.form-radio:has(input:checked) {
  border-color: var(--red);
  background: rgba(216,25,32,.06);
  color: var(--red);
}
.form-note { font-size: .84rem; color: var(--text-3); margin-top: 10px; line-height: 1.55; }
.form-submit { width: 100%; margin-top: 10px; }
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .form-radio-group { grid-template-columns: 1fr; }
}

/* ————— Footer ————— */
.footer {
  background: var(--black);
  color: rgba(255,255,255,.72);
  padding: 80px 0 32px;
  border-top: 4px solid var(--red);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--line-dark);
}
.footer h3, .footer h4 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 800;
}
.footer .logo { color: var(--white); margin-bottom: 18px; }
.footer p { color: rgba(255,255,255,.65); margin-bottom: 18px; font-size: .95rem; line-height: 1.65; }
.footer ul { display: flex; flex-direction: column; gap: 11px; }
.footer li a { color: rgba(255,255,255,.72); font-size: .92rem; }
.footer li a:hover { color: var(--red-hot); }
.footer-contact { display: flex; flex-direction: column; gap: 11px; }
.footer-contact a { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); font-size: .94rem; }
.footer-contact a:hover { color: var(--red-hot); }
.footer-contact svg { width: 15px; height: 15px; color: var(--red-hot); flex-shrink: 0; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--black-3);
  display: grid;
  place-items: center;
  color: var(--white);
  transition: all var(--fast);
}
.footer-social a:hover { background: var(--red); transform: translateY(-2px); color: var(--white); }
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .86rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.72); }
.footer-bottom a:hover { color: var(--white); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ————— Sticky mobile CTA ————— */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  display: none;
}
.sticky-cta .btn { width: 100%; }
@media (max-width: 680px) { .sticky-cta { display: block; } body { padding-bottom: 80px; } }

/* ————— Page hero (inner pages) ————— */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: clamp(90px, 11vw, 140px) 0 clamp(70px, 9vw, 110px);
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid var(--red);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 85% 0%, rgba(216,25,32,.24), transparent 70%);
}
.page-hero-inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.page-hero h1 { color: var(--white); max-width: 20ch; margin-bottom: 22px; }
.page-hero h1 .red-text { color: var(--red-hot); }
.page-hero p { color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 1.4vw, 1.22rem); max-width: 640px; line-height: 1.6; }
.breadcrumbs {
  display: flex;
  gap: 10px;
  font-size: .78rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 26px;
}
.breadcrumbs a { color: rgba(255,255,255,.8); }
.breadcrumbs a:hover { color: var(--red-hot); }

/* ————— Pricing ————— */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; grid-auto-rows: 1fr; }
.pkg-grid > * { height: 100%; }
@media (max-width: 960px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 42px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all var(--fast);
}
.pkg:hover { box-shadow: var(--shadow); }
.pkg.featured {
  border-color: transparent;
  background: var(--black);
  color: var(--white);
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}
.pkg.featured h3, .pkg.featured .pkg-price { color: var(--white); }
.pkg.featured .pkg-desc { color: rgba(255,255,255,.75); }
.pkg.featured li { color: rgba(255,255,255,.88); }
.pkg.featured li svg { color: var(--red-hot); }
.pkg-tag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 18px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.pkg h3 { margin-bottom: 6px; }
.pkg-desc { color: var(--text-3); margin-bottom: 22px; font-size: .94rem; }
.pkg-price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  margin-bottom: 4px;
  line-height: 1;
  color: var(--black);
  letter-spacing: -.03em;
}
.pkg-price em { font-style: normal; color: var(--red); }
.pkg-price small { font-size: 1rem; color: var(--text-3); font-weight: 500; font-family: var(--font-body); }
.pkg.featured .pkg-price small { color: rgba(255,255,255,.6); }
.pkg ul { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pkg li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; line-height: 1.5; }
.pkg li svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; margin-top: 3px; }

/* ————— Split ————— */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.reverse > *:first-child { order: 2; }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse > *:first-child { order: 0; }
}
.split-visual {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black);
  box-shadow: var(--shadow);
  position: relative;
}
.split-visual img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 20px; }
.split ul { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.split li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.6; }
.split li .check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.split li .check svg { width: 12px; height: 12px; }
.split li strong { color: var(--text); font-weight: 700; font-family: var(--font-display); }

/* ————— Reveal animation ————— */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ————— Accessibility ————— */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ————— Legacy aliases ————— */
.gradient-text { color: var(--red); font-weight: 900; }
.btn-secondary:hover { background: var(--black); color: var(--white); transform: translateY(-2px); }
:root { --paper-2: var(--cream); --paper-3: var(--cream-2); --gradient: var(--red); --radius-sm: 3px; }

/* Hide orphan legacy elements */
.hero-visual-bg { display: none; }
.hero-visual-content { display: none; }
.numbered { display: none; } /* numbered list from round 3 */
.services > a { /* legacy pattern */ display: none; }

/* ═══════════════════════════════════════════════════
   Credentials Strip (replaces inline styles from HTML)
   ═══════════════════════════════════════════════════ */
.creds-strip {
  background: #0b0b0b;
  color: rgba(255,255,255,.88);
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.creds-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Archivo', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.creds-label { color: rgba(255,255,255,.55); }
.creds-sep { color: rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════
   Mobile polish (≤ 680px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* Top strip — smaller, tighter */
  .top-strip { font-size: .66rem; padding: 8px 14px; letter-spacing: .06em; line-height: 1.35; }

  /* Section vertical rhythm — tighter */
  .section { padding: 60px 0; }

  /* Hero — reduce padding, tighter type */
  .hero-inner { padding: 56px 20px 72px !important; gap: 36px !important; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); line-height: 1.08; margin-bottom: 18px; }
  .hero-sub { font-size: 1rem; line-height: 1.55; margin-bottom: 28px; }
  .hero-badge { font-size: .68rem; padding: 8px 12px; margin-bottom: 20px; letter-spacing: .1em; }
  .hero-actions { flex-direction: column; gap: 10px; margin-bottom: 28px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-cta-reassurance { text-align: center; font-size: .82rem !important; }
  .hero-trust { gap: 14px 22px; justify-content: center; font-size: .82rem; }
  .hero-trust-item { justify-content: center; }
  .hero-stats-row { gap: 10px; padding: 14px 14px; }
  .hero-stat-num { font-size: 1.25rem; }
  .hero-stat-label { font-size: .6rem; letter-spacing: .1em; }
  .hero-visual-overlay { padding: 18px; }

  /* Awards chip strip (2022-2025) — single compact row */
  .awards { padding: 18px 0; }
  .awards-inner { gap: 10px 14px; }
  .awards-label { font-size: .62rem; letter-spacing: .1em; width: 100%; margin-bottom: 4px; }
  .award-chip { font-size: .72rem; padding: 6px 11px; gap: 6px; }
  .award-chip svg { width: 12px; height: 12px; }

  /* Credentials strip — compact + wraps cleanly */
  .creds-strip { padding: 16px 0; }
  .creds-inner { gap: 8px 14px; font-size: .66rem; letter-spacing: .08em; }
  .creds-label { width: 100%; font-size: .6rem; letter-spacing: .14em; margin-bottom: 2px; }
  .creds-sep { display: none; }
  .creds-item {
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
  }

  /* Review badges — tighten */
  .review-badges { padding: 32px 0 !important; }
  .review-badge-row { gap: 10px !important; }
  .review-badge { padding: 14px 12px !important; }
  .review-badge-label { font-size: .72rem !important; }

  /* Stats band — tighter */
  .stats-band { padding: 60px 0 !important; }
  .stats-grid { gap: 28px 16px !important; }
  .stat-big { font-size: clamp(1.9rem, 7vw, 2.4rem) !important; }
  .stat-label { font-size: .72rem !important; line-height: 1.25; }

  /* Awards & Recognition block — tighter medals */
  .awards-block { padding: 50px 0 !important; }
  .awards-badges-row { gap: 10px !important; }
  .award-medal { padding: 14px 12px; font-size: .82rem; line-height: 1.3; }

  /* General h2 */
  .section h2, h2 { font-size: clamp(1.75rem, 6vw, 2.2rem); line-height: 1.15; }

  /* Eyebrows smaller */
  .eyebrow { font-size: .68rem; letter-spacing: .14em; margin-bottom: 14px; }

  /* Container padding tighter */
  .container, .container-narrow, .container-wide { padding: 0 18px; }

  /* Body text defaults */
  body, p { font-size: 1rem; line-height: 1.6; }

  /* Fix sticky mobile CTA overlap with chatbot — reduce body padding */
  body { padding-bottom: 72px; }
}

/* Extra-small screens (≤ 400px) */
@media (max-width: 400px) {
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: .95rem; }
  .awards-inner { gap: 8px; }
  .award-chip { font-size: .68rem; padding: 5px 9px; }
  .creds-inner { gap: 6px 10px; font-size: .62rem; }
  .creds-item { padding: 3px 7px; }
}

/* ═══════════════════════════════════════════════════
   Cross-page mobile polish (≤ 680px)
   Blog index, blog posts, success stories, locations, case studies, footer
   ═══════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* Section heads — tighter bottom margin so content doesn't sit too far below title */
  .sec-head { margin-bottom: 38px; }
  .sec-head h2 { margin-bottom: 14px; }
  .sec-head p { font-size: 1rem; line-height: 1.55; }

  /* ────────── Blog index cards ────────── */
  .blog-grid { gap: 18px; margin-top: 24px; }
  .blog-card-body { padding: 16px 18px 20px; }
  .blog-card-cat { font-size: .68rem; letter-spacing: .1em; margin-bottom: 6px; }
  .blog-card h3 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 8px; }
  .blog-card-excerpt { font-size: .88rem; line-height: 1.5; }
  .blog-card-meta { font-size: .76rem; margin-top: 10px; }

  /* ────────── Blog post pages ────────── */
  .blog-post-hero { padding: 40px 0 32px; }
  .blog-post-hero h1 { font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.18; margin: 10px 0 12px; }
  .blog-post-meta { gap: 10px 14px; font-size: .82rem; margin-top: 8px; }
  .breadcrumbs { font-size: .8rem; margin-bottom: 12px; }

  .blog-post-body { padding: 0 4px; }
  .blog-post-body p, .blog-post-body li { font-size: 1rem; line-height: 1.65; }
  .blog-post-body h2 { font-size: 1.3rem; margin: 30px 0 12px; line-height: 1.25; }
  .blog-post-body h3 { font-size: 1.08rem; margin: 24px 0 10px; }
  .blog-post-body img { margin: 18px 0; border-radius: 10px; }
  .blog-post-body blockquote { padding: 16px 18px; margin: 20px 0; font-size: .98rem; }
  .blog-post-body ul, .blog-post-body ol { padding-left: 18px; }
  .blog-post-body li { margin-bottom: 6px; }
  .blog-post-body hr { margin: 32px 0; }

  /* Blog post tables — horizontal scroll so they don't blow layout */
  .blog-post-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .9rem;
  }
  .blog-post-body table th, .blog-post-body table td { padding: 10px 12px; }

  /* Blog mid-article CTA box */
  .blog-cta-box { padding: 22px 18px; border-radius: 12px; margin: 28px 0; }
  .blog-cta-box h2 { font-size: 1.25rem; margin-bottom: 8px; }
  .blog-cta-box p { font-size: .95rem; margin-bottom: 14px; }
  .blog-cta-box .btn { width: 100%; justify-content: center; }

  /* Blog FAQ accordion */
  .blog-faq details { padding: 16px 18px; margin-bottom: 10px; }
  .blog-faq summary { font-size: .98rem; line-height: 1.35; }

  /* ────────── Transformations (success-stories + homepage grid) ────────── */
  .transform-grid { gap: 14px; }
  .transform-card-body { padding: 16px 18px 20px; }
  .transform-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
  .transform-card .quote { font-size: .88rem; margin-bottom: 12px; line-height: 1.45; }
  .transform-card .tag { font-size: .7rem; padding: 5px 10px; }

  /* Case study layouts (Kelsey, Talia, Scott, Raj, Cristina) */
  .case { padding: 30px 18px !important; gap: 20px !important; }
  .case h3 { font-size: clamp(1.35rem, 5.5vw, 1.7rem); }
  .case p { font-size: .98rem; }

  /* ────────── Location pages ────────── */
  /* Generic page hero inner on location pages — preserve horizontal padding */
  .page-hero-inner { padding-top: 50px !important; padding-bottom: 50px !important; }
  /* Center the CTA button (and its reassurance copy, if any) inside any
     page hero on mobile. Targets only wrapper divs that contain a .btn,
     so non-CTA content in the hero is unaffected. */
  .page-hero-inner > div:has(.btn) { text-align: center; }
  .page-hero-inner h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.15; }
  .page-hero-inner p { font-size: 1rem; line-height: 1.55; }

  /* Reduce hero minimum heights on the Irvine/Orange/Laguna Hills pages */
  .irvine-hero, .orange-hero, .laguna-hero,
  [class$="-hero"]:not(.hero):not(.blog-post-hero):not(.awards):not(.page-hero):not(.irvine-hero-inner) {
    min-height: auto !important;
  }

  /* Location cards (shown on locations.html) */
  .location-card { border-radius: 12px; }
  .location-body { padding: 20px; }
  .location-body h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .location-addr { font-size: .9rem; margin-bottom: 10px; }
  .location-details { font-size: .88rem; }

  /* Service cards (services.html) */
  .service-card { padding: 24px 20px; }
  .service-card h3 { font-size: 1.15rem; }
  .service-card p { font-size: .92rem; }

  /* ────────── Footer ────────── */
  .footer { padding: 52px 0 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .footer h3, .footer h4 { margin-bottom: 14px; font-size: .76rem; }
  .footer p { font-size: .9rem; }
  .footer li a, .footer-contact a { font-size: .9rem; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; padding-top: 22px; font-size: .78rem; }

  /* Breadcrumbs + inline nav row spacing */
  .breadcrumbs { font-size: .78rem; letter-spacing: .04em; }

  /* Read-full-story button on transform cards */
  .read-full-story { font-size: .8rem; padding: 8px 14px; }

  /* Generic hero reveal block (other page headers) */
  .page-hero { padding: 44px 0 !important; }
}

/* Cross-page polish for extra-small screens */
@media (max-width: 400px) {
  .blog-post-body p, .blog-post-body li { font-size: .96rem; }
  .blog-post-body h2 { font-size: 1.2rem; }
  .blog-post-body h3 { font-size: 1.02rem; }
  .blog-post-hero h1 { font-size: 1.45rem; }
  .blog-card h3 { font-size: 1rem; }
  .blog-cta-box { padding: 18px 14px; }
  .blog-cta-box h2 { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════
   Mobile nav — bulletproof hide of desktop links
   Only the logo + hamburger show in the header on mobile.
   Full nav only appears when the hamburger is tapped (.open class).
   ═══════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* Nav links are hidden by default on mobile */
  .nav-links {
    display: none !important;
  }

  /* When hamburger is tapped, nav-links gets .open and becomes a drawer.
     Uses dvh so height accounts for mobile browser chrome (address bar etc).
     Extra bottom padding clears the sticky CTA so the last link stays tappable. */
  .nav-links.open {
    display: flex !important;
    position: fixed !important;
    top: 66px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100dvh - 66px) !important;
    max-height: calc(100dvh - 66px) !important;
    background: var(--white) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 28px 120px !important;
    gap: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 999 !important;
    transform: none !important;
    border-top: 1px solid var(--line) !important;
  }

  /* Belt-and-suspenders: also hide Book Free Consult and phone on mobile */
  .nav-cta .nav-phone,
  .nav-cta .btn:not(.nav-cta-mobile) {
    display: none !important;
  }

  /* Hamburger button always visible on mobile */
  .nav-toggle {
    display: grid !important;
  }

  /* Force the header row to be exactly: logo (left) | hamburger (right).
     Prevents any orphan nav item or flex-gap from reserving an empty column. */
  .nav-inner {
    justify-content: space-between !important;
    gap: 0 !important;
  }
  .nav-cta {
    gap: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   "What's Included" pricing list — services page.
   Replaces inline styles on each <li>; identical render.
   ═══════════════════════════════════════════════════ */
.includes-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  gap: 18px;
}
.includes-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  padding: 22px 26px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.includes-list .includes-check {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.includes-list .includes-check svg { width: 18px; height: 18px; }
.includes-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.05rem;
}
.includes-list span:not(.includes-check) {
  color: var(--text-3);
}

/* Utility: hide an element on phone viewports.
   Used to strip optional qualifiers from long CTAs (e.g. "at Our Irvine
   Location") that overflow on small screens. */
@media (max-width: 680px) {
  .hide-mobile { display: none; }
}

/* ═══════════════════════════════════════════════════
   Mobile homepage densification — collapses redundant
   trust strips into one tight block, hides duplicate
   CTAs and the early video block. Desktop unchanged.
   ═══════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Tighten the three top trust strips so they read as one unit.
     Awards (.awards) → Credentials (.creds-strip) → Review badges (.review-badges) */
  .awards { padding: 18px 0 !important; }
  .creds-strip { padding: 14px 0 !important; border-top: 1px solid var(--line); }
  .review-badges { padding: 24px 0 !important; }
  .awards-inner { gap: 8px; flex-wrap: wrap; }
  .awards-label { font-size: .68rem; letter-spacing: .12em; }
  .award-chip { font-size: .72rem; padding: 4px 8px; }
  .creds-inner { font-size: .72rem; gap: 6px; flex-wrap: wrap; justify-content: center; }
  .creds-label { font-size: .66rem; }

  /* Hide the early video testimonials block on mobile.
     The late block (right above the red Book CTA) carries
     the same conversion job at the moment of close. */
  .video-testimonials--early { display: none; }

  /* Hide the redundant tail paragraph + CTA inside Awards & Recognition.
     The image + medals stay; this just removes the duplicate "See Why
     We Win — Book…" CTA that already appears 4× on the page. */
  .awards-block .awards-tail { display: none; }
}

/* ═══════════════════════════════════════════════════
   Author bio block — sits at the bottom of every blog post
   to surface E-E-A-T signals (real expert, real credentials).
   ═══════════════════════════════════════════════════ */
.author-bio-section {
  background: var(--paper-2);
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.author-bio {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.author-bio-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--gradient, linear-gradient(135deg, #D81920 0%, #6B0E12 100%));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: -.04em;
}
.author-bio-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.author-bio h3 {
  font-size: 1.2rem;
  margin: 0 0 12px;
  line-height: 1.3;
}
.author-bio p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 14px;
}
.author-bio-meta {
  font-size: .9rem;
  color: var(--text-3);
}
.author-bio-meta a {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}
.author-bio-meta a:hover { text-decoration: underline; }
@media (max-width: 680px) {
  .author-bio-section { padding: 36px 0; }
  .author-bio { grid-template-columns: 1fr; gap: 18px; padding: 22px; text-align: left; }
  .author-bio-photo { width: 72px; height: 72px; font-size: 1.9rem; }
  .author-bio h3 { font-size: 1.08rem; }
  .author-bio p { font-size: .94rem; }
}

/* <picture> elements added for WebP/responsive images must NOT create a new
   positioning context — otherwise child <img> with position:absolute lays
   out against the (zero-sized) picture instead of the intended ancestor
   (e.g. .transform-card, .location-img, .hero-visual). display:contents
   removes the picture from the layout tree while keeping its source
   elements live for the browser's image picker. */
picture { display: contents; }

/* ═══════════════════════════════════════════════════
   Click-to-load YouTube wrapper (a la lite-youtube-embed).
   Shows the YouTube thumbnail + play button. Real iframe
   only spawns on click. Cuts ~500-800 KB of player JS
   per embed on initial page load.
   ═══════════════════════════════════════════════════ */
.lite-yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.lite-yt > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.lite-yt::before {
  /* gradient over thumbnail for readability */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
.lite-yt::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(216, 25, 32, .92) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/26px no-repeat;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: transform .2s ease, background-color .2s ease;
}
.lite-yt:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: rgba(216, 25, 32, 1);
}
.lite-yt:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}
@media (max-width: 680px) {
  .lite-yt::after { width: 56px; height: 56px; background-size: 22px; }
}

/* ═══════════════════════════════════════════════════
   Client video testimonials — YouTube Shorts (9:16).
   3-col desktop, 2-col tablet, swipe carousel on phones.
   ═══════════════════════════════════════════════════ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.video-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 2px solid var(--red);
  background: #000;
}
.video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 960px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 680px) {
  /* Horizontal swipe carousel on phones — keeps video tiles tall and
     lets the user flick through all 13 without scrolling a long page.
     Side padding equals the leftover viewport space so each card snaps
     to the viewport center with equal peek of neighboring cards on
     both sides. First and last cards center identically to the middle
     ones (no flush-left at scroll-start, no flush-right at scroll-end). */
  .video-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-top: 4px;
    padding-bottom: 16px;
    /* (100vw - card_width) / 2 — handles both the 78vw range and the
       max-width: 320px clamp on wider mobile viewports. */
    padding-left: max(11vw, calc((100vw - 320px) / 2));
    padding-right: max(11vw, calc((100vw - 320px) / 2));
    margin: 24px -20px 0;
    scrollbar-width: none;
    scroll-padding-inline: 0;
  }
  .video-grid::-webkit-scrollbar { display: none; }
  .video-card {
    /* vw (not %) so the basis isn't recursive against the flex
       container's own padding. */
    flex: 0 0 78vw;
    max-width: 320px;
    /* Snap to the card's center against the viewport center —
       gives equal peek of the previous + next card on each side. */
    scroll-snap-align: center;
  }
}

/* ═══════════════════════════════════════════════════
   Long CTA buttons — wrap to two lines on mobile so
   they fit within the viewport (no horizontal overflow).
   Structure: "Label one<span class="btn-sep"> — </span><span class="btn-break"></span>Label two"
   Desktop: shows as one line via the em-dash.
   Mobile: .btn-break becomes a full-width break, .btn-sep hides.
   ═══════════════════════════════════════════════════ */
.btn-wrap-mobile {
  display: inline-block !important;
  text-align: center;
  line-height: 1;
}
.btn-wrap-mobile .btn-break { display: none; }
@media (max-width: 680px) {
  .btn-wrap-mobile {
    white-space: normal !important;
    line-height: 1.3;
    padding: 14px 22px;
    max-width: calc(100vw - 48px);
  }
  .btn-wrap-mobile .btn-sep { display: none; }
  .btn-wrap-mobile .btn-break {
    display: block;
    width: 100%;
    height: 0;
  }
}

/* ===== Lead capture form ===== */
.lead-form-section{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:28px;box-shadow:0 4px 14px rgba(0,0,0,.04);max-width:640px;margin:0 auto}
.lead-form-section h3{margin:0 0 6px;font-family:Archivo,Inter,sans-serif;font-weight:800;font-size:1.4rem;line-height:1.25}
.lead-form-section .lead-form-sub{margin:0 0 18px;color:#555;font-size:.96rem;line-height:1.5}
.lead-form{display:grid;gap:12px}
.lead-form .field{display:flex;flex-direction:column;gap:6px}
.lead-form label{font-size:.82rem;font-weight:600;color:#222;text-transform:uppercase;letter-spacing:.04em}
.lead-form input,.lead-form textarea{font:inherit;border:1px solid #d1d5db;border-radius:8px;padding:11px 13px;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;box-sizing:border-box}
.lead-form input:focus,.lead-form textarea:focus{border-color:#D81920;box-shadow:0 0 0 3px rgba(216,25,32,.15)}
.lead-form textarea{min-height:84px;resize:vertical;font-family:inherit}
.lead-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.lead-form .field-row{grid-template-columns:1fr}}
.lead-form .consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:#555;line-height:1.45}
.lead-form .consent-row input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:#D81920}
.lead-form .consent-row a{color:#D81920;text-decoration:underline}
.lead-form .submit-row{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.lead-form button[type="submit"]{background:#D81920;color:#fff;border:none;border-radius:10px;padding:13px 24px;font-weight:700;font-family:Archivo,Inter,sans-serif;font-size:1rem;cursor:pointer;transition:background .15s,transform .15s;text-transform:uppercase;letter-spacing:.04em}
.lead-form button[type="submit"]:hover:not(:disabled){background:#A3131A;transform:translateY(-1px)}
.lead-form button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none}
.lead-form .speed-badge{font-size:.82rem;color:#0f7c2a;font-weight:600}
.lead-form .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;opacity:0}
.lead-form-status{margin-top:14px;padding:12px 14px;border-radius:8px;font-size:.94rem;line-height:1.5;display:none}
.lead-form-status.success{display:block;background:#e8f5ec;color:#0f7c2a;border:1px solid #b8dec3}
.lead-form-status.error{display:block;background:#fdecec;color:#a3131a;border:1px solid #f3c0c0}