/* ══════════════════════════════════════════════════════════════════════════
   MODERN CORE HEALTH & WELLNESS — DESIGN EVOLUTION v2
   Goal: keep MAUVE as the primary brand color; introduce NAVY #24364B as the
   sitewide accent; broaden the look so it reads for men as well as women.
   Loaded AFTER each page's inline <style>, so this file overrides it.
   Nothing here changes copy — structure and color only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────── TOKENS ─────────────── */
:root {
  /* NAVY — new accent family */
  --navy:       #24364B;   /* accent (client-specified) */
  --navy-deep:  #172433;   /* dark sections + footer */
  --navy-mid:   #33495F;   /* hover / gradients */
  --navy-soft:  #EDF0F4;   /* cool tint background */
  --navy-line:  #D7DEE7;   /* cool hairline */
  --navy-light: #A9BCD2;   /* text/eyebrow on navy */

  /* Neutrals cooled slightly — less pink cast, more balance */
  --ink:      #232B34;
  --ink-soft: #59626D;
  --line:     #E2E1E4;
  --sand:     #F2ECE7;
  --sand-deep:#E7DFD9;
}

/* ─────────────── PREVIEW BANNER ─────────────── */
.preview-banner { background: var(--navy-deep); color: #DCE3EC; }
.preview-banner a { color: var(--navy-light); }

/* ─────────────── NAV ─────────────── */
.navbar { border-bottom: 1px solid var(--navy-line); background: rgba(252,250,249,0.94); }
.nav-links a:hover { color: var(--navy); }

/* ─────────────── BUTTONS ─────────────── */
/* Primary stays mauve. Secondary becomes navy — the accent's main job. */
.btn-outline {
  color: var(--navy);
  border-color: var(--navy);
  border-width: 1.5px;
  background: transparent;
}
.btn-outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn-navy {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 10px 26px rgba(36,54,75,0.24);
}
.btn-navy:hover { background: var(--navy-mid); border-color: var(--navy-mid); color: #fff; transform: translateY(-2px); }

/* ─────────────── STRUCTURE: squarer, steadier geometry ─────────────── */
.cond-card, .testi, .svc-card, .card { border-radius: 12px; }
.answer-block { border-radius: 10px; border-left: 4px solid var(--navy); }
.cta-final { border-radius: 16px; }
.hero-badge { border-radius: 12px; }
.founder-img img, .hero-visual img { border-radius: 14px; }
.loc-map iframe { border-radius: 12px; }

/* Cards pick up the navy on interaction */
.cond-card { border-color: var(--navy-line); }
.cond-card:hover { border-color: var(--navy); box-shadow: 0 20px 44px rgba(36,54,75,0.16); }
.cond-card .link, .card .link, .svc-card .link { color: var(--navy); }

/* Icon tiles: rounded squares, mauve→navy gradient (both brand colors) */
.cond-icon {
  border-radius: 14px;
  background: linear-gradient(140deg, var(--mauve-deep) 0%, var(--navy) 100%);
  box-shadow: 0 10px 24px rgba(36,54,75,0.24);
}
.cond-icon svg { stroke: #E7DDE3; }

/* ─────────────── TRUST BAR ─────────────── */
.trustbar { border-block-color: var(--navy-line); }
.trust-stat .n { color: var(--mauve); }
.trust-stat .l { color: var(--navy); opacity: 0.75; font-weight: 500; }

/* ─────────────── STEPS ─────────────── */
.step .n { color: var(--navy); }
.step .n::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--mauve); margin-top: 12px;
}

/* ─────────────── CREDENTIALS LIST ─────────────── */
.creds li::before { content: "◆"; color: var(--navy); font-size: 11px; top: 1px; }

/* ─────────────── TESTIMONIALS ─────────────── */
/* was a pink wash — now a cool stone field so it reads for everyone */
.bg-mauve-soft { background: var(--navy-soft); }
.testi { background: #fff; border-color: var(--navy-line); }
.testi .stars { color: var(--mauve); }
.testi .who { color: var(--navy); font-weight: 600; }

/* ─────────────── FAQ ─────────────── */
.faq-item { border-bottom-color: var(--navy-line); }
.faq-q .pm { color: var(--navy); }
.faq-q:hover { color: var(--navy); }

/* ─────────────── NAVY SECTION (new dark anchor) ─────────────── */
.bg-navy { background: var(--navy-deep); color: #DCE3EC; position: relative; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #F4F7FA; }
.bg-navy p, .bg-navy li { color: rgba(220,227,236,0.82); }
.bg-navy .eyebrow { color: var(--navy-light); }
.bg-navy strong { color: #fff; }
.bg-navy .step .n { color: #fff; }
.bg-navy .step .n::after { background: var(--mauve); }
.bg-navy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.bg-navy .btn-outline:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }
.bg-navy .leaf-accent::before,
.bg-navy.leaf-accent::before { background-image: url("leaf-motif-light.svg"); opacity: 0.10; }

/* ─────────────── MAUVE SECTIONS (unchanged role, cooler CTA) ─────────────── */
.bg-mauve .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }

/* ─────────────── FINAL CTA ─────────────── */
.cta-final {
  background: linear-gradient(155deg, var(--navy-soft) 0%, var(--sand) 100%);
  border: 1px solid var(--navy-line);
}

/* ─────────────── FOOTER ─────────────── */
footer { background: var(--navy-deep); color: rgba(226,232,240,0.72); }
.foot-col h4 { color: var(--navy-light); }
.foot-col a { color: rgba(226,232,240,0.72); }
.foot-col a:hover { color: #fff; }
.foot-bottom { border-top-color: rgba(255,255,255,0.14); color: rgba(226,232,240,0.5); }

/* ─────────────── BOTANICAL TEXTURE, DIALED BACK ─────────────── */
.leaf-accent::before { opacity: 0.09; }
.leaf-accent.leaf-lg::before { opacity: 0.08; }
.leaf-accent.on-dark::before { opacity: 0.11; }
.aura::before { background: radial-gradient(circle, rgba(36,54,75,0.14), rgba(36,54,75,0) 70%); }
.aura::after  { background: radial-gradient(circle, rgba(155,100,127,0.14), rgba(155,100,127,0) 70%); }

/* ─────────────── STICKY MOBILE CTA ─────────────── */
.sticky-cta { border-top-color: var(--navy-line); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO CAROUSEL — full-bleed, auto-cycling
   ══════════════════════════════════════════════════════════════════════════ */
.hero-carousel {
  position: relative;
  min-height: clamp(540px, 80vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
  isolation: isolate;
}
.hc-track { position: absolute; inset: 0; z-index: 0; }
.hc-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  will-change: opacity;
}
.hc-slide.is-active { opacity: 1; }
.hc-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.02);
  transition: transform 9s linear;
}
.hc-slide.is-active img { transform: scale(1.09); }

/* Navy scrim keeps every slide legible — horizontal on desktop */
.hc-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(23,36,51,0.90) 0%, rgba(23,36,51,0.76) 26%, rgba(23,36,51,0.42) 50%, rgba(23,36,51,0.10) 74%, rgba(23,36,51,0) 92%),
    linear-gradient(180deg, rgba(23,36,51,0.32) 0%, rgba(23,36,51,0) 34%, rgba(23,36,51,0.30) 100%);
}
.hc-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(64px, 9vw, 104px); }
.hc-copy { max-width: 610px; }
.hc-copy .eyebrow { color: var(--navy-light); }
.hc-copy h1 { color: #fff; margin-bottom: 22px; text-shadow: 0 2px 24px rgba(15,24,34,0.35); }
.hc-copy h1 em { font-style: italic; color: #E6C4D3; font-weight: 600; }
.hc-copy .lead { color: rgba(255,255,255,0.90); margin-bottom: 34px; max-width: 520px; }
.hc-copy .hero-trust { color: rgba(255,255,255,0.82); margin-top: 32px; }
.hc-copy .hero-trust b { color: #fff; font-weight: 600; }
.hc-copy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.hc-copy .btn-outline:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }

/* Passive progress indicators — the carousel advances on its own */
.hc-dots {
  position: absolute; z-index: 3; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center;
}
.hc-dot {
  width: 34px; height: 4px; border: 0; padding: 0; border-radius: 3px; cursor: pointer;
  background: rgba(255,255,255,0.34); transition: background 0.35s ease, width 0.35s ease;
}
.hc-dot.is-active { background: #E6C4D3; width: 52px; }

@media (max-width: 900px) {
  .hero-carousel { min-height: clamp(560px, 84vh, 720px); align-items: flex-end; }
  .hc-scrim {
    background: linear-gradient(180deg, rgba(23,36,51,0.58) 0%, rgba(23,36,51,0.46) 24%, rgba(23,36,51,0.74) 52%, rgba(23,36,51,0.92) 78%, rgba(23,36,51,0.96) 100%);
  }
  .hc-slide img { object-position: var(--pos-m, 50% 32%); }
  .hc-inner { padding-block: 34px 104px; }
  .hc-copy { max-width: 100%; }
  .hc-copy .lead { max-width: 100%; margin-bottom: 26px; }
  .hc-copy .hero-cta-row .btn { flex: 1 1 auto; justify-content: center; }
  .hc-copy .hero-trust { margin-top: 24px; font-size: 12.5px; gap: 8px 18px; }
  .hc-dots { bottom: 78px; left: 32px; transform: none; }
  .hc-dot { width: 26px; }
  .hc-dot.is-active { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-slide { transition: none; }
  .hc-slide img { transition: none; transform: none; }
  .hc-slide.is-active img { transform: none; }
}

/* ─────────────── IMAGE BAND (used to place lifestyle photography) ─────────────── */
.img-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.img-band img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: 0 24px 54px rgba(23,36,51,0.18); }
.img-band.flip .img-band-media { order: 2; }
@media (max-width: 860px) { .img-band { grid-template-columns: 1fr; gap: 30px; } .img-band.flip .img-band-media { order: 0; } }

/* Small photo strip for condition/service sections */
.cond-photo { border-radius: 12px; overflow: hidden; margin-bottom: 26px; box-shadow: 0 18px 40px rgba(23,36,51,0.14); }
.cond-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* ─────────────── FULL-WIDTH PHOTO STRIP ─────────────── */
.photo-strip { padding: 0 !important; }
.photo-strip img {
  /* was clamp(240px,34vw,420px) — a 3:2 photo lost most of its height to that,
     which is what cut heads off (BugHerd #38). */
  width: 100%; height: clamp(300px, 44vw, 660px);
  object-fit: cover; object-position: var(--pos, 50% 45%);
  display: block;
}
@media (max-width: 700px) { .photo-strip img { height: 240px; } }

/* ─────────────── CONDITIONS PAGE DETAILS ─────────────── */
.cond-block h2 .clinical { color: var(--navy); opacity: 0.8; }
.cond-link { color: var(--navy) !important; }
.anchor-pill { border-color: var(--navy-line) !important; }
.anchor-pill:hover { border-color: var(--navy) !important; color: var(--navy) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 2 — BugHerd tickets #1–#11 + "more intentional blue"
   ══════════════════════════════════════════════════════════════════════════ */

/* ── #3 STICKY NAV ──────────────────────────────────────────────
   overflow-x:hidden on html/body makes them scroll containers, which silently
   kills position:sticky on descendants. overflow-x:clip contains the same
   overflow without creating a scroll container, so the nav sticks again. */
/* overflow-x:hidden on html/body makes them scroll containers, which silently
   kills position:sticky on descendants. The layout no longer overflows
   horizontally at any breakpoint (decorative leaf/aura pseudo-elements are
   clipped by their own sections), so the guard is simply removed. */
html, body { overflow-x: visible; }
.navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 1px 0 rgba(36,54,75,0.10);
}

/* ── #2 / #5 LOGO SIZING ────────────────────────────────────────
   Monogram removed from the nav; wordmark scaled up to the CTA button height.
   Bar padding tightened so the white bar does not get taller than before. */
.nav-logo .logo-mark { display: none; }
.nav-inner { padding-block: 14px; }
.nav-logo .logo-word { height: 40px; width: auto; max-width: 100%; }
@media (max-width: 700px)  { .nav-inner { padding-block: 12px; } .nav-logo .logo-word { height: 28px; } }
@media (max-width: 420px)  { .nav-logo .logo-word { height: 23px; } }
.foot-logo img { height: 56px; width: auto; max-width: 100%; }
@media (max-width: 560px) { .foot-logo img { height: 40px; } }

/* ── #1 BLUE BUTTONS ON THE MAUVE BANDS ─────────────────────────
   Navy solid, with a hairline so it separates cleanly from deep mauve. */
.bg-mauve .btn-ghost-light {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20), 0 10px 24px rgba(11,18,28,0.30);
}
.bg-mauve .btn-ghost-light:hover {
  background: #fff; color: var(--navy-deep); border-color: #fff;
  box-shadow: 0 14px 30px rgba(11,18,28,0.34);
}

/* ── MORE INTENTIONAL BLUE, SITEWIDE ────────────────────────────
   Blue is the masculine counterweight to the mauve: it now carries the
   interior page heroes, the trust bar, and the closing CTA. */
.hero {
  background: linear-gradient(158deg, var(--navy-soft) 0%, var(--cream) 58%, var(--sand) 100%);
  border-bottom: 3px solid var(--navy);
  border-image: linear-gradient(90deg, var(--navy) 0%, var(--mauve) 100%) 1;
}
.trustbar { background: var(--navy-soft); border-top: 2px solid var(--navy); }
.answer-block { box-shadow: 0 10px 30px rgba(36,54,75,0.07); }
.cta-final { background: linear-gradient(150deg, #E3E9F1 0%, var(--navy-soft) 45%, var(--sand) 100%); }
.eyebrow { color: var(--navy); }
.eyebrow.on-dark, .bg-navy .eyebrow, .hero-carousel .eyebrow, .hero-navy .eyebrow { color: var(--navy-light); }
.bg-mauve .eyebrow, .bg-mauve .eyebrow.on-dark { color: var(--blush); }

/* ── #4 / #8 CONTACT PAGE: BLUE HERO ────────────────────────────*/
.hero-navy {
  background: linear-gradient(148deg, var(--navy-deep) 0%, var(--navy) 52%, #3B5573 100%);
  color: #DCE3EC;
}
.hero-navy { border-bottom: 0; border-image: none; }
.hero-navy h1, .hero-navy h2 { color: #fff; }
.hero-navy h1 em { color: #E6C4D3; }
.hero-navy p, .hero-navy .lead { color: rgba(255,255,255,0.90); }
.hero-navy .eyebrow { color: var(--navy-light); }
.hero-navy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.62); }
.hero-navy .btn-outline:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }
.hero-navy .aura::before, .hero-navy::before { opacity: 0.5; }

/* Parking / detail callout (contact page, #7) */
.info-callout {
  margin-top: 26px; padding: 22px 24px; border-radius: 12px;
  background: var(--navy-soft); border-left: 4px solid var(--navy);
}
.info-callout h4 {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.info-callout p { font-size: 0.95rem; margin-bottom: 8px; }
.info-callout p:last-child { margin-bottom: 0; }

/* ── #10 SERVICES: TIGHTER VERTICAL RHYTHM ──────────────────────*/
#services { padding-bottom: clamp(36px, 4vw, 52px); }
.svc-band { padding-block: clamp(44px, 5vw, 68px) !important; }

/* ── #11 HERO CAROUSEL: PULL THE IMAGES BACK ────────────────────
   The source photos are all 3:2. A very gentle drift (1.00 → 1.035) instead of
   the old 1.02 → 1.09 keeps heads and faces inside the frame, and a shorter
   max height means less vertical crop on every slide. */
.hero-carousel { min-height: clamp(560px, 80vh, 790px); }
.hc-slide img { transform: scale(1.0); transition: transform 11s linear; }
.hc-slide.is-active img { transform: scale(1.035); }

/* ── #6 ACCESSIBILITY (WCAG 2.1 AA) ─────────────────────────────*/
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-deep); color: #fff; padding: 12px 20px;
  font-family: 'Montserrat', sans-serif; font-size: 14px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 3px;
}
.bg-navy :focus-visible, .bg-mauve :focus-visible,
.hero-navy :focus-visible, .hero-carousel :focus-visible, footer :focus-visible {
  outline-color: #fff;
}
/* Contrast: lift the dimmest text to at least 4.5:1 on its background */
p, .lead { color: #4E5661; }
.foot-col a, footer { color: rgba(233,238,244,0.86); }
.foot-bottom { color: rgba(233,238,244,0.72); }
.bg-navy p, .bg-navy li { color: rgba(228,235,243,0.92); }
.bg-mauve p { color: rgba(246,233,238,0.92); }
.insure-list li { color: rgba(246,233,238,0.94); }
.hc-copy .lead { color: rgba(255,255,255,0.95); }
.trust-stat .l { color: var(--navy); opacity: 1; }
.cond-block h2 .clinical { opacity: 1; }
.testi .who { color: #47505C; }
.preview-banner { color: #E6ECF3; }
.preview-banner a { color: #C6D6E8; }
/* Touch targets */
.faq-q { min-height: 48px; }
.nav-toggle { min-width: 48px; min-height: 48px; }

/* ── DIAGNOSES DIRECTORY (Services page — replaces the PDF) ─────*/
.dx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 900px) { .dx-grid { grid-template-columns: 1fr; } }
.dx-card {
  background: var(--white); border: 1px solid var(--navy-line); border-radius: 12px;
  border-top: 4px solid var(--navy); padding: 28px 26px;
  box-shadow: 0 12px 30px rgba(36,54,75,0.07);
}
.dx-card h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.02em; color: var(--navy-deep); margin-bottom: 4px; line-height: 1.3;
}
.dx-card .dx-ref {
  font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.6;
  color: var(--ink-soft); margin: 10px 0 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--navy-line);
}
.dx-card .dx-ref b {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy); font-weight: 700; margin-bottom: 6px;
}
.dx-card ul { list-style: none; display: grid; gap: 9px; }
.dx-card li {
  font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.5;
  color: #4E5661; padding-left: 20px; position: relative;
}
.dx-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--mauve);
}
.dx-note {
  margin-top: 32px; text-align: center; font-family: 'Montserrat', sans-serif;
  font-size: 14px; color: var(--ink-soft);
}

/* Nav has to hold a much wider wordmark now — tighten the link rhythm and stop
   anything from wrapping so the bar stays one line at every desktop width. */
.nav-inner { gap: 24px; flex-wrap: nowrap; }
.nav-logo { flex-shrink: 0; }
.nav-links { gap: 22px; flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-cta { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1340px) { .nav-logo .logo-word { height: 36px; } .nav-links { gap: 17px; } .nav-links a { font-size: 12.5px; } }
/* Collapse to the menu button before the wordmark and links can collide */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* Cards size to their own content instead of stretching to the tallest in the row */
.dx-grid { align-items: start; }
#diagnoses { padding-block: clamp(52px, 6vw, 82px); }

/* Overall vertical rhythm tightened — the site was running airy (BugHerd #10) */
section { padding-block: clamp(60px, 7vw, 104px); }
.section-head { margin-bottom: 44px; }

/* The horizontal wordmark is ~12:1 — too wide for a phone. Below 760px the nav
   swaps to a two-line lockup so the name stays large and legible. */
.nav-logo .logo-word-stack { display: none; height: 46px; width: auto; }
@media (max-width: 760px) {
  .nav-logo .logo-word { display: none; }
  .nav-logo .logo-word-stack { display: block; }
}
@media (max-width: 400px) { .nav-logo .logo-word-stack { height: 40px; } }

/* Interior page headers had no vertical padding of their own — the eyebrow sat
   flush against the nav (very visible once the hero went navy). */
.hero { padding-block: clamp(52px, 6vw, 88px); }

/* Inline <strong> emphasis was 4.32:1 against cream — just under AA for body
   text. A slightly deeper mauve clears 4.5:1 without changing the brand read.
   The brighter --mauve is kept for large type, buttons, and stat numbers. */
strong { color: #925B76; }
.bg-mauve strong, .bg-navy strong, .hero-carousel strong, footer strong { color: #fff; }

/* Dots off to the side so they never sit on a face at the bottom of a slide */
@media (min-width: 901px) {
  .hc-dots { left: auto; right: 42px; transform: none; bottom: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO CAROUSEL v3 — show the WHOLE photo, not a crop of it
   The photos are all 1536x1024 (3:2). Any container wider than 3:2 forces
   object-fit:cover to slice the top and bottom off. Fix is the container, not
   the object-position: the hero now TAKES its aspect ratio FROM the photos, so
   there is nothing left to crop. The slow zoom is gone for the same reason —
   any scale above 1 is a crop.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-carousel {
  aspect-ratio: 3 / 2;
  min-height: 0;
  /* width must be explicit: with aspect-ratio and an indefinite width, a
     binding max-height shrinks the element sideways and leaves a gap. */
  width: 100%;
  /* No viewport-height cap — a vh cap re-crops the photo on short laptops.
     This ceiling only starts trimming above ~1650px wide. */
  max-height: 1100px;
  height: auto;
}
.hc-slide img {
  object-position: 50% 50%;
  transform: none !important;
  transition: none;
}
.hc-slide.is-active img { transform: none !important; }

/* ── MOBILE: photo on top at full 3:2, copy on navy underneath ──
   A 390px-wide phone at 3:2 is only ~260px tall — not enough to overlay this
   much copy on. Stacking shows every photo complete AND makes the type solid
   black-on-navy legible instead of fighting the image. */
@media (max-width: 760px) {
  .hero-carousel {
    aspect-ratio: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--navy-deep);
  }
  .hc-track { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; }
  .hc-scrim { display: none; }
  .hc-inner { padding-block: 30px 34px; background: var(--navy-deep); }
  /* dots sit on the navy just under the photo — over a light image they vanish */
  .hc-dots { bottom: auto; top: calc(66.66vw + 18px); left: 32px; right: auto; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 3 — BugHerd #13–#38
   ══════════════════════════════════════════════════════════════════════════ */

/* ── #17 / #22 FOOTER LOGO DISTORTION ───────────────────────────
   A fixed height plus max-width:100% squashes the image once the column is
   narrower than the natural width. Size by width and let height follow. */
.foot-logo img { height: auto !important; width: 100%; max-width: 380px; }
@media (max-width: 560px) { .foot-logo img { max-width: 260px; } }
.foot-grid { grid-template-columns: 1.9fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ── #18 NAV LOGO CUT OFF ───────────────────────────────────────
   Rebuilt asset (the old crop sliced the M's stem). Nothing may clamp width
   here or the lockup distorts the same way the footer did. */
.nav-logo img { max-width: none; }

/* ── #34 / #35 MAKE THE BOOK A CONSULT BUTTON POP ───────────────*/
.nav-cta {
  background: linear-gradient(135deg, #A96C88 0%, var(--mauve-mid) 55%, var(--mauve-deep) 100%) !important;
  padding: 14px 30px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  box-shadow: 0 0 0 4px rgba(155,100,127,0.18), 0 10px 24px rgba(78,36,53,0.34);
}
.nav-cta::after { content: "→"; font-size: 15px; line-height: 1; margin-left: 2px; }
.nav-cta:hover {
  box-shadow: 0 0 0 6px rgba(155,100,127,0.26), 0 16px 32px rgba(78,36,53,0.42);
  transform: translateY(-2px);
}
@keyframes ctaHalo {
  0%, 72%, 100% { box-shadow: 0 0 0 4px rgba(155,100,127,0.18), 0 10px 24px rgba(78,36,53,0.34); }
  84%           { box-shadow: 0 0 0 11px rgba(155,100,127,0.00), 0 10px 24px rgba(78,36,53,0.34); }
}
.nav-cta { animation: ctaHalo 5s ease-out 1.5s 3; }
@media (prefers-reduced-motion: reduce) { .nav-cta { animation: none; } }

/* ── #20 THE BLUE BUTTON ON MAUVE — REVERTED ────────────────────
   Navy on deep mauve read muddy. Back to a light button: cream fill, deep
   mauve type. Highest contrast option on that band. */
.bg-mauve .btn-ghost-light {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--mauve-deep);
  box-shadow: 0 10px 26px rgba(11,18,28,0.28);
}
.bg-mauve .btn-ghost-light:hover {
  background: #fff; color: var(--mauve-deep); border-color: #fff;
  transform: translateY(-2px); box-shadow: 0 16px 34px rgba(11,18,28,0.36);
}

/* ── #28–#33 DIAGNOSES CARDS: ALIGN ACROSS EACH ROW ─────────────
   Cards stretch to a common height again, and the "typically referred by"
   block is a fixed height so the divider rule lines up across the pair. */
.dx-grid { align-items: stretch; }
.dx-card { display: flex; flex-direction: column; }
.dx-card .dx-ref { min-height: 78px; display: flex; flex-direction: column; justify-content: flex-start; }
.dx-card h3 { min-height: 2.6em; display: flex; align-items: flex-start; }
@media (max-width: 900px) {
  .dx-card h3 { min-height: 0; }
  .dx-card .dx-ref { min-height: 0; }
}

/* ── #36 REIMBURSEMENT STEPS 2x2 ────────────────────────────────*/
.steps-2x2 { grid-template-columns: repeat(2, 1fr) !important; gap: 34px 48px; max-width: 900px; margin: 0 auto; }
@media (max-width: 700px) { .steps-2x2 { grid-template-columns: 1fr !important; } }

/* ── #27 SERVICES: universal card sits above Core Service ───────*/
.universal-card {
  background: var(--white); border: 1px solid var(--navy-line); border-left: 4px solid var(--navy);
  border-radius: 12px; padding: 28px 30px; margin-top: 0 !important;
  box-shadow: 0 12px 30px rgba(36,54,75,0.07);
}

/* ── #15 / #23 NAVY SECTIONS — extra pieces they now have to carry ──*/
.bg-navy .faq-item { border-bottom-color: rgba(169,188,210,0.28); }
.bg-navy .faq-q { color: #F4F7FA; }
.bg-navy .faq-q:hover { color: #fff; }
.bg-navy .faq-q .pm { color: var(--navy-light); }
.bg-navy .faq-a p { color: rgba(228,235,243,0.90); }
.bg-navy .faq-a a { color: #C9DCF0 !important; }
.bg-navy .creds li { color: rgba(228,235,243,0.92); }
.bg-navy .creds li::before { color: var(--navy-light); }
.bg-navy .loc-line { color: rgba(228,235,243,0.94); }
.bg-navy .loc-line a { color: #C9DCF0; }
.bg-navy .loc-areas { color: rgba(228,235,243,0.86); }
.bg-navy .loc-areas strong, .bg-navy .loc-line strong { color: #fff; }
.bg-navy .answer-block { background: var(--white); }
.bg-navy .answer-block p, .bg-navy .answer-block .q { color: var(--ink); }
.bg-navy .answer-block .creds li { color: var(--ink-soft); }
.bg-navy .answer-block .creds li::before { color: var(--navy); }
.bg-navy .btn-primary { box-shadow: 0 10px 26px rgba(0,0,0,0.34); }

/* Parking callout when it sits on a navy band */
.info-callout.on-dark {
  background: rgba(255,255,255,0.07);
  border-left-color: var(--navy-light);
}
.info-callout.on-dark h4 { color: var(--navy-light); }
.info-callout.on-dark p { color: rgba(228,235,243,0.92); }

/* ── #14 / #19 FOUNDER PHOTO ────────────────────────────────────
   The studio photo is 2:3. Forcing it into a 4:5 card cropped either the sign
   or Corrine. Matching the card to the photo shows the whole frame. */
.founder-img img { aspect-ratio: 2 / 3; object-position: 50% 50%; }

/* ══════════════════════════════════════════════════════════════════════════
   SEO / PERFORMANCE PASS
   ══════════════════════════════════════════════════════════════════════════ */
/* <picture> wraps every photo now (WebP + JPEG fallback). display:contents
   removes its box so existing `.x img` selectors and flex/grid parents behave
   exactly as they did when the <img> was the direct child. */
picture { display: contents; }

/* ── #41 REAL MOBILE MENU ────────────────────────────────────────
   The hamburger used to navigate straight to Contact. It now opens the same
   nav as a panel under the bar. Also closes the last open ADA gap on keyboard
   navigation (BugHerd #6). */
@media (max-width: 1180px) {
  .navbar.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-top: 1px solid var(--navy-line);
    border-bottom: 3px solid var(--navy);
    box-shadow: 0 18px 40px rgba(23,36,51,0.16);
    padding: 4px 0 18px;
    max-height: calc(100dvh - 100%); overflow-y: auto;
  }
  .navbar.nav-open .nav-links li { border-bottom: 1px solid var(--line); }
  .navbar.nav-open .nav-links li:last-child { border-bottom: 0; }
  .navbar.nav-open .nav-links a {
    display: block; padding: 17px 32px; font-size: 15px; letter-spacing: 0.02em;
  }
  .navbar.nav-open .nav-links a:hover { background: var(--navy-soft); color: var(--navy); }
  .navbar.nav-open .nav-links .nav-cta {
    margin: 16px 32px 4px; justify-content: center; text-align: center;
    padding: 15px 26px !important; animation: none;
  }
}
.nav-toggle { line-height: 1; border-radius: 6px; }
.nav-toggle[aria-expanded="true"] { color: var(--navy); }

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY PASS 2 — axe-core 4.10 audit, WCAG 2.1/2.2 AA
   ══════════════════════════════════════════════════════════════════════════ */

/* 1.4.3 Contrast — two contact-page styles still used the blush accent on
   white (2.47:1 and 2.65:1). They were page-specific so the earlier sweep,
   which worked from the shared tokens, never reached them. */
.form-note a { color: var(--navy); }
.contact-rows .label { color: var(--navy); }
.contact-rows .val a:hover { color: var(--navy); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(36,54,75,0.18);
}
/* 1.4.11 — the nav hover color was also the low-contrast blush */
.nav-links a:hover { color: var(--navy); }

/* 1.3.1 — footer column labels are headings; they were h4 directly after an
   h2, which skips a level. Now h2, styled the same. */
.foot-col h2 {
  font-family: 'Montserrat', sans-serif; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy-light); margin: 0 0 18px; font-weight: 600;
  line-height: 1.4;
}

/* 2.2.2 Pause, Stop, Hide — the hero advances on its own, so it needs a
   control. Dots are real buttons now; this is the pause/play beside them. */
.hc-controls { position: absolute; z-index: 3; bottom: 30px; right: 42px; display: flex; align-items: center; gap: 14px; }
.hc-pause {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55); background: rgba(23,36,51,0.45);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.25s, border-color 0.25s;
}
.hc-pause:hover { background: rgba(23,36,51,0.78); border-color: #fff; }
.hc-pause svg { width: 13px; height: 13px; fill: currentColor; }
.hc-dots { position: static; transform: none; bottom: auto; right: auto; left: auto; }
@media (min-width: 901px) { .hc-dots { position: static; } }
@media (max-width: 900px) {
  .hc-controls { bottom: auto; top: calc(66.66vw + 14px); left: 32px; right: auto; }
  .hc-dots { bottom: auto; top: auto; left: auto; }
}

/* 1.4.3 — measured against the real rendered pixels behind the hero copy on
   all five slides: the eyebrow failed on every slide (2.20–4.10:1) and the
   trust row on the two brightest. The scrim fell away too early — it was down
   to ~0.35 opacity by the time it reached the right edge of the text column.
   Held higher across the copy, then released. */
.hc-scrim {
  background:
    linear-gradient(96deg, rgba(23,36,51,0.94) 0%, rgba(23,36,51,0.90) 30%, rgba(23,36,51,0.76) 48%, rgba(23,36,51,0.34) 68%, rgba(23,36,51,0.04) 86%, rgba(23,36,51,0) 100%),
    linear-gradient(180deg, rgba(23,36,51,0.34) 0%, rgba(23,36,51,0) 34%, rgba(23,36,51,0.32) 100%);
}
.hc-copy .eyebrow { color: #CFDDEC; }
.hc-copy .hero-trust { color: rgba(255,255,255,0.95); }
@media (max-width: 900px) {
  .hc-scrim { background: none; }   /* stacked layout — copy sits on solid navy */
}

/* 2.5.8 Target Size — the carousel dots were only 4px tall. The visual bar is
   unchanged; a transparent pad gives them a 24px-high hit area. */
.hc-dot {
  height: 24px; background: none; display: flex; align-items: center;
  padding: 0; border: 0; width: 34px;
}
.hc-dot::before {
  content: ""; display: block; width: 100%; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,0.34); transition: background 0.35s ease;
}
.hc-dot.is-active { width: 52px; background: none; }
.hc-dot.is-active::before { background: #E6C4D3; }
@media (max-width: 900px) {
  .hc-dot { width: 26px; } .hc-dot.is-active { width: 40px; }
}
/* Footer links sat 1px under the 24px minimum */
.foot-col a { min-height: 24px; display: flex; align-items: center; }

/* 3.3.2 Labels or Instructions — required fields say so, visibly */
.req { color: var(--navy); font-weight: 600; margin-left: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG + LEGAL PAGES
   ══════════════════════════════════════════════════════════════════════════ */
.post-meta {
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy); font-weight: 500;
}
.post-card {
  background: var(--white); border: 1px solid var(--navy-line); border-left: 4px solid var(--navy);
  border-radius: 12px; padding: 32px 34px; box-shadow: 0 12px 30px rgba(36,54,75,0.07);
}
.post-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 12px 0 14px; }
.post-card h2 a:hover { color: var(--navy); }
.post-card .cond-link { display: inline-block; margin-top: 16px; }

/* these share the element with .container-narrow — don't cancel its max-width,
   or the legal/blog text runs wider than every other text page on the site */
.post-body, .legal-body { margin-left: auto; margin-right: auto; }
.post-body h2, .legal-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 46px 0 14px; padding-top: 10px;
  border-top: 1px solid var(--navy-line);
}
.post-body h3, .legal-body h3 { font-size: 1.22rem; margin: 30px 0 10px; }
.post-body p, .legal-body p { margin-bottom: 18px; }
.post-body > p:last-child, .legal-body > p:last-child { margin-bottom: 0; }
.post-intro { font-size: clamp(1.12rem, 1.6vw, 1.26rem); color: var(--ink); font-weight: 300; line-height: 1.6; }
.post-body .creds, .legal-body .creds { margin: 18px 0 26px; gap: 14px; }
.post-body .creds li, .legal-body .creds li { font-size: 1rem; line-height: 1.6; }
.legal-body p a, .post-body p a { text-decoration: underline; }
.cond-link {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy) !important;
}

/* Appointment-request form status messaging */
.form-status {
  margin-top: 14px; padding: 12px 16px; border-radius: 8px;
  font-size: 0.93rem; line-height: 1.5; border-left: 4px solid;
}
.form-status a { text-decoration: underline; color: inherit; font-weight: 600; }
.form-status.is-busy { background: var(--navy-soft);  border-color: var(--navy);  color: var(--navy); }
.form-status.is-ok   { background: #E6EFE8;           border-color: #35664B;      color: #2A5340; }
.form-status.is-warn { background: #F8F0DE;           border-color: #8A6212;      color: #6E4E0E; }
.form-status.is-err  { background: #F8EAE6;           border-color: #A93A28;      color: #8C2F20; }

/* ─────────────── SITE MAP PAGE ─────────────── */
.sitemap-body h2 {
  font-size: 1.22rem; margin: 40px 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--navy-line);
}
.sitemap-body h2:first-child { margin-top: 0; }
.sitemap-list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.sitemap-list li {
  display: grid; grid-template-columns: minmax(200px, 310px) 1fr; gap: 6px 26px;
  align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.sitemap-list li:last-child { border-bottom: 0; }
.sitemap-list a {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.97rem;
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}
.sitemap-list a:hover { color: var(--mauve-deep); }
.sitemap-list span { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }
@media (max-width: 680px) { .sitemap-list li { grid-template-columns: 1fr; gap: 3px; } }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE HERO — control/copy collision + eyebrow wrap (2026-10-09)
   ══════════════════════════════════════════════════════════════════════════

   Reported on an iPhone: the eyebrow was printed straight over the play
   button and dots, and "SANTA MONICA" wrapped to a second line.

   The overlap is arithmetic, not taste. Under 900px the carousel becomes a
   column — photo (aspect-ratio 3/2, so exactly 66.66vw tall) then a navy copy
   block — while .hc-controls stays absolutely positioned at
   top: calc(66.66vw + 14px). The button is 34px, so the controls occupy
   66.66vw+14 through 66.66vw+48. .hc-inner was padding only 30px off the top
   of the same origin, so the first line of copy landed 18px INSIDE the
   controls. Pad past where the controls actually end.

   Scoped to max-width:760px, which is where the stacked layout actually
   begins (the .hc-inner/.hc-track column rules live in that same query).
   Measured first at 900px, which was wrong: from 761px up the hero is still
   the overlay layout with the controls bottom-right over the photo, nothing
   collides, and the wider scope was restyling tablets that were fine. */
@media (max-width: 760px) {
  /* 48px of controls + 16px of breathing room */
  .hc-inner { padding-block: 64px 34px; }

  /* Keep the location on the headline's line. 44 characters of tracked-out
     uppercase will not fit a phone at 11px/0.14em, so the hero eyebrow (only
     the hero one) tightens and scales with the viewport instead of wrapping.
     Clamped at both ends so it stays legible on a 320px screen and never
     outgrows the desktop size. */
  .hc-copy .eyebrow {
    white-space: nowrap;
    font-size: clamp(8px, 2.45vw, 12px);
    letter-spacing: 0.07em;
  }
}