/* =========================================================
   Mountain Ridge Pediatrics — Design System
   Mobile-first. WCAG 2.2 AA conscious.
   ========================================================= */

/* -- Tokens ------------------------------------------------ */
:root {
  /* Color — mountain dusk: plum purple + warm cream + dusk-gold accent */
  --plum-50:  #f7f4fb;
  --plum-100: #ece4f5;
  --plum-200: #d6c5ea;
  --plum-300: #b59edd;
  --plum-500: #7e58b8;
  --plum-600: #5e3f93;
  --plum-700: #432b6e;
  --plum-900: #251543;

  /* Legacy aliases — sage tokens now point at the plum scale so older inline styles still work */
  --sage-50:  var(--plum-50);
  --sage-100: var(--plum-100);
  --sage-200: var(--plum-200);
  --sage-300: var(--plum-300);
  --sage-500: var(--plum-500);
  --sage-600: var(--plum-600);
  --sage-700: var(--plum-700);
  --sage-900: var(--plum-900);

  --cream-50: #faf6f1;
  --cream-100: #f3ebe0;
  --cream-200: #e8dac3;

  /* Leaf green — co-primary, sampled from the clinic's logo hand */
  --leaf-50:  #f1f7eb;
  --leaf-100: #e0edcf;
  --leaf-200: #c2d9a4;
  --leaf-300: #9dc17a;
  --leaf-500: #6fa152;
  --leaf-600: #57863c;
  --leaf-700: #3e612a;
  --leaf-900: #213818;

  /* Dusk gold — kept as a small warm accent (used sparingly) */
  --gold-100: #faecc9;
  --gold-300: #e6c168;
  --gold-500: #c89a31;
  --gold-700: #7a5c14;
  /* Apricot alias — now points at LEAF GREEN so legacy .warm variants read as green, matching the logo */
  --apricot-100: var(--leaf-100);
  --apricot-300: var(--leaf-300);
  --apricot-500: var(--leaf-500);
  --apricot-700: var(--leaf-700);

  --ink-900: #1c1828;
  --ink-700: #383149;
  --ink-500: #5e5773;
  --ink-400: #6f6884; /* AA contrast on white */
  --ink-300: #c0bbcc;
  --ink-200: #e1dee9;
  --ink-100: #efedf4;
  --ink-50:  #f8f7fb;

  --white:    #ffffff;
  --danger:   #b3261e;
  --info:     #1b5a8a;

  /* Surfaces */
  --bg:        var(--cream-50);
  --surface:   var(--white);
  --surface-2: var(--ink-50);

  /* Type */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; /* was serif — now same sans for uniform modern feel */

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;   /* 30 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 2.875rem;   /* 46 */
  --fs-5xl: 3.625rem;   /* 58 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --lh-loose: 1.7;

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 35, 25, .05);
  --shadow-sm: 0 2px 6px rgba(20, 35, 25, .06), 0 1px 2px rgba(20, 35, 25, .04);
  --shadow-md: 0 8px 24px rgba(20, 35, 25, .08), 0 2px 6px rgba(20, 35, 25, .04);
  --shadow-lg: 0 24px 60px rgba(20, 35, 25, .12), 0 6px 14px rgba(20, 35, 25, .06);

  --container: 1180px;
  --container-tight: 940px;

  --focus: 0 0 0 3px var(--cream-50), 0 0 0 6px var(--sage-700);

  --transition: 200ms cubic-bezier(.2,.7,.2,1);
}

/* -- Reset & base ----------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.4.11 Focus Not Obscured — anchor-linked and keyboard-focused elements
     land below the sticky header (88px) and above the mobile bottom CTA (70px). */
  scroll-padding-top: 100px;
  scroll-padding-bottom: 80px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--sage-700); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--sage-900); }
:focus-visible { outline: 3px solid transparent; box-shadow: var(--focus); border-radius: 8px; outline-offset: 2px; }
/* <main tabindex="-1"> is only focused via skip-link; suppress its outline since the user is already oriented by the scroll */
main[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* Windows High Contrast (forced-colors) — preserve structure + focus */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; box-shadow: none; }
  .btn { border: 1px solid CanvasText; }
  .qa-card, .provider-card, .update-card, .card, .link-list a, .link-row-static,
  .staff-card, .carousel, .site-header, .site-footer, .mobile-drawer { border: 1px solid CanvasText; }
  .carousel-dot.is-active .carousel-dot-bar { outline: 2px solid CanvasText; }
  /* Preserve text contrast (let the OS theme handle colors) */
  .eyebrow, .crumbs, a { color: LinkText; }
  a:visited { color: VisitedText; }
  .btn-primary, .mobile-cta .call { forced-color-adjust: none; }
}

/* Users who request more contrast — bump borders and text weight */
@media (prefers-contrast: more) {
  :root {
    --ink-500: #3a3450;   /* darker body text */
    --ink-400: #4a435d;
    --ink-200: #afa8c2;   /* stronger dividers */
    --ink-100: #968ead;
  }
  .btn-secondary { border-width: 2px; }
  .qa-card, .provider-card, .card, .update-card, .link-list a, .staff-card { border-width: 2px; }
  a { text-decoration-thickness: 2px; }
  .nav-links a[aria-current="page"] { outline: 2px solid var(--plum-700); outline-offset: -2px; }
}
button { font: inherit; color: inherit; }

h1,h2,h3,h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.03em; font-weight: 700; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 var(--sp-4); color: var(--ink-700); }
.lede { font-size: var(--fs-md); line-height: var(--lh-base); color: var(--ink-700); }
small, .small { font-size: var(--fs-sm); color: var(--ink-500); }

/* -- Skip link -------------------------------------------- */
.skip-link {
  position: absolute; left: 0; top: 0;
  background: var(--plum-700); color: #fff;
  padding: 14px 22px; border-radius: 0 0 12px 0;
  transform: translateY(-110%);
  transition: transform var(--transition);
  z-index: 1000;
  font-weight: 700;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { transform: translateY(0); color: #fff; outline: 3px solid var(--gold-300); outline-offset: -5px; }

/* -- Layout helpers --------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.container-tight { width: 100%; max-width: var(--container-tight); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-10) 0; }
.section-sm { padding: var(--sp-8) 0; }
@media (min-width: 720px) { .section { padding: var(--sp-12) 0; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--sage-700);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--sage-500); display: inline-block;
}
.section-head { max-width: 640px; margin: 0 auto var(--sp-6); text-align: center; }
.section-head .lede { margin-top: var(--sp-3); }

/* -- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--sage-700); color: #fff;
  position: relative;
  isolation: isolate;  /* create own stacking context so ::after halo stays behind text */
}
.btn-primary::after {
  /* Soft radial halo that blooms on hover — sits behind text/icon */
  content: "";
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 50% 50%, rgba(230, 193, 104, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}
.btn-primary:hover { background: var(--sage-900); color: #fff; box-shadow: 0 0 0 1px rgba(230, 193, 104, 0.35), var(--shadow-md); }
.btn-primary:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { transition: none; } }
.btn-secondary { background: var(--white); color: var(--sage-900); border-color: var(--ink-200); }
.btn-secondary:hover { background: var(--sage-50); border-color: var(--sage-300); color: var(--sage-900); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: transparent; }
.btn-ghost:hover { background: var(--sage-50); }
.btn-sm { padding: 9px 14px; min-height: 38px; font-size: var(--fs-sm); }
.btn .icon { width: 18px; height: 18px; flex: none; }

/* -- Header / Nav ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 241, 0.88);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid rgba(67, 43, 110, 0.08);
}
.nav {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 88px;
  flex-wrap: nowrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink-900);
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.025em;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
}
.brand-name {
  /* Brand renders on two lines: "Mountain Ridge" / "Pediatrics", controlled by an
     explicit <br> in markup. nowrap keeps each line together so neither word wraps. */
  white-space: nowrap;
  overflow: visible;
  max-width: 100%;
}
.brand-mark {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  flex: none;
}
@media (min-width: 480px) { .brand-mark { width: 72px; height: 72px; } }
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Header: nudge the logo down slightly so the fingertips sit nicely in the nav row */
.site-header .brand-mark { padding-top: 3px; }
/* Footer: a brighter background tile for logo visibility on dark plum */
.site-footer .brand-mark { background: rgba(255,255,255,.96); border-radius: 12px; padding: 6px; }
.brand small { display: none; }
@media (min-width: 480px) { .brand { font-size: 1.1rem; } }
@media (min-width: 720px) { .brand { font-size: 1.25rem; } }
.nav-links { display: none; margin-left: auto; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav-links a {
  display: inline-block; padding: 8px 12px; border-radius: 10px;
  color: var(--ink-700); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav-links a:hover { background: var(--sage-50); color: var(--ink-900); }
.nav-links a[aria-current="page"] { color: var(--sage-900); background: var(--sage-50); }
.nav-cta { display: none; margin-left: var(--sp-2); }
.nav-toggle {
  margin-left: auto;
  flex: none;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--ink-200); border-radius: 12px;
  cursor: pointer;
  color: var(--ink-900);
}
.nav-toggle:hover { background: var(--sage-50); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .close { display: none; }
.nav-toggle[aria-expanded="true"] .open { display: none; }
.nav-toggle[aria-expanded="true"] .close { display: block; }

/* Bumped from 960px to 1100px after adding the Resources nav item and the EN/ES
   toggle — at 960px the brand name was getting squeezed below the nav. */
@media (min-width: 1100px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  /* On desktop, brand stays at its content size (nowrap is set globally). */
  .brand { flex: 0 0 auto; }
  /* The header row is tight at desktop with the new Resources link + EN/ES toggle.
     Collapse the header-phone to an icon-only quick-call button (the full number is
     still spelled out in the footer and the mobile sticky CTA). */
  .header-phone span { display: none; }
  .header-phone { padding: 8px; gap: 0; }
  /* Tighter nav-link padding so the row breathes. */
  .nav-links a { padding: 8px 10px; }
  .nav { gap: var(--sp-3); }
}

/* Mobile drawer — dialog */
.mobile-drawer {
  position: fixed; inset: 0;
  background: var(--cream-50);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 60;
  padding: var(--sp-4) var(--sp-5) var(--sp-12);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-2);
  box-shadow: var(--shadow-lg);
}
.mobile-drawer[data-open="true"] { transform: translateX(0); }
.drawer-head {
  display: flex; justify-content: flex-end; align-items: center;
  margin-bottom: var(--sp-3);
}
.drawer-close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--ink-200); background: #fff;
  border-radius: 12px;
  display: inline-grid; place-items: center;
  cursor: pointer;
  color: var(--ink-900);
  transition: background var(--transition);
}
.drawer-close:hover { background: var(--plum-50); }
.mobile-drawer a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-radius: 14px;
  color: var(--ink-900); text-decoration: none; font-weight: 500;
  background: var(--white); border: 1px solid var(--ink-100);
  font-size: var(--fs-md);
}
.mobile-drawer a[aria-current="page"] { background: var(--sage-50); border-color: var(--sage-200); color: var(--sage-900); }
.mobile-drawer .drawer-cta { margin-top: var(--sp-3); display: grid; gap: 10px; }
@media (min-width: 1100px) { .mobile-drawer { display: none; } }

/* -- Hero -------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-10);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(181,158,221,.34), transparent 60%),
    radial-gradient(55% 65% at 5% 95%, rgba(111,161,82,.28), transparent 60%),
    radial-gradient(60% 80% at 50% 0%, rgba(67,43,110,.06), transparent 70%);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 90 L120 60 L240 80 L360 40 L480 70 L600 30 L720 60 L840 25 L960 55 L1080 20 L1200 50 L1320 35 L1440 65 L1440 120 L0 120 Z' fill='%23faf6f1' opacity='.85'/><path d='M0 110 L160 80 L320 100 L480 70 L640 95 L800 65 L960 95 L1120 70 L1280 95 L1440 80 L1440 120 L0 120 Z' fill='%23faf6f1'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-inner { display: grid; gap: var(--sp-10); align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) {
  .hero { padding: var(--sp-12) 0 var(--sp-16); }
  .hero-inner { grid-template-columns: 1.1fr .9fr; gap: var(--sp-12); }
}
.hero h1 { margin-bottom: var(--sp-5); }
.hero .lede { max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-6); }
.hero-trust {
  list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid var(--ink-200);
}
.hero-trust > li strong { display:block; font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--ink-900); font-weight: 500; }
.hero-trust > li span { font-size: var(--fs-sm); color: var(--ink-500); }

.hero-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-card .visual {
  aspect-ratio: 5/4;
  border-radius: var(--radius-lg);
  background: var(--plum-100);
  position: relative;
  overflow: hidden;
}

/* -- Hero carousel ---------------------------------------- */
.carousel { isolation: isolate; }
.carousel-track {
  list-style: none; padding: 0; margin: 0;
  position: absolute; inset: 0;
}
.carousel-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.carousel-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-slide { transition: none; }
}

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-900);
  border: 1px solid rgba(67, 43, 110, 0.12);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--transition), transform var(--transition);
  opacity: 0;
}
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.carousel:hover .carousel-arrow,
.carousel:focus-within .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
@media (hover: none) {
  /* On touch devices, always show arrows */
  .carousel-arrow { opacity: 1; }
}

.carousel-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 12px 10px;
  z-index: 3;
}
.carousel-dots {
  display: flex; justify-content: center; align-items: center; gap: 2px;
  flex: 1;
}
.carousel-dot {
  /* Full 24x24 hit area, but the visible bar inside stays small */
  width: 24px; height: 24px; padding: 0;
  border: 0; background: transparent;
  display: inline-grid; place-items: center;
  cursor: pointer;
}
.carousel-dot-bar {
  display: block;
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(67, 43, 110, 0.3) inset;
  transition: background var(--transition), width var(--transition);
}
.carousel-dot.is-active .carousel-dot-bar {
  background: var(--plum-700);
  width: 26px;
  box-shadow: none;
}
.carousel-dot:hover .carousel-dot-bar { background: var(--plum-500); }
.carousel-dot:focus-visible .carousel-dot-bar { box-shadow: 0 0 0 2px var(--plum-700); }

.carousel-pause {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--plum-700);
  display: inline-grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--transition), transform var(--transition);
  flex: none;
}
.carousel-pause:hover { background: #fff; transform: scale(1.05); }
.carousel-pause .play-icon { display: none; }
.carousel-pause[aria-pressed="true"] .pause-icon { display: none; }
.carousel-pause[aria-pressed="true"] .play-icon { display: block; }

/* Visible focus on the whole carousel region when it's keyboard-focused */
.carousel:focus-visible { outline: 3px solid var(--plum-700); outline-offset: 3px; border-radius: var(--radius-lg); box-shadow: none; }
.hero-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--apricot-100);
  color: var(--apricot-700);
  padding: 8px 14px;
  border-radius: 100px;
  font-weight: 600; font-size: var(--fs-xs);
  box-shadow: var(--shadow-md);
  display: none; align-items: center; gap: 6px;
  white-space: nowrap;
}
@media (min-width: 480px) { .hero-badge { display: inline-flex; } }

/* Floating illustrative shapes inside the hero card */
.float-card {
  position: absolute;
  background: var(--white); color: var(--ink-900);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  display: inline-flex; gap: 10px; align-items: center;
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  max-width: calc(100% - 32px);
}
.float-card .dot { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.float-card.fc-1 { top: 16px; left: 16px; }
.float-card.fc-2 { bottom: 16px; right: 16px; }

/* -- Quick Actions ---------------------------------------- */
.quick-actions {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } }

.qa-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink-900);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  min-height: 150px;
}
.qa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--sage-200); color: var(--ink-900); }
.qa-card .icon-wrap {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--sage-50); color: var(--sage-700);
}
.qa-card.warm .icon-wrap { background: var(--apricot-100); color: var(--apricot-700); }
.qa-card h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; margin: 0; letter-spacing: 0; }
.qa-card p { color: var(--ink-500); font-size: var(--fs-sm); margin: 0; }
.qa-card .arrow { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--sage-700); font-weight: 600; font-size: var(--fs-sm); }

/* -- Provider grid ---------------------------------------- */
.providers {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .providers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .providers { grid-template-columns: repeat(3, 1fr); } }

.provider-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  border: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.provider-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.provider-avatar {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--plum-100), var(--plum-300));
  display: grid; place-items: center;
  color: var(--plum-900);
  font-family: var(--font-serif); font-size: 3rem;
  position: relative; overflow: hidden;
}
.provider-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
}
.provider-avatar:not(:has(img))::after {
  /* tiny mountain silhouette visible only when there's no photo */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'><path d='M0 50 L40 25 L70 35 L100 15 L135 30 L170 18 L200 35 L200 60 L0 60 Z' fill='%23251543' opacity='.45'/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%;
  pointer-events: none;
}
.provider-avatar.style-2 { background: linear-gradient(160deg, var(--leaf-100), var(--leaf-300)); color: var(--leaf-900); }
.provider-avatar.style-3 { background: linear-gradient(160deg, #ead9f0, #b58ec9); color: var(--plum-900); }
.provider-card h3 { margin: 0; font-size: var(--fs-xl); }

/* Staff grid — smaller photo cards for non-provider team members */
.staff-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .staff-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .staff-grid { grid-template-columns: repeat(4, 1fr); } }

.staff-card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform var(--transition), box-shadow var(--transition);
}
.staff-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.staff-photo {
  width: 100%; aspect-ratio: 1/1; border-radius: 10px;
  overflow: hidden; background: var(--plum-100);
}
.staff-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.staff-card h4 { margin: 0; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); letter-spacing: 0; }
.staff-card p  { margin: 0; font-size: var(--fs-xs); color: var(--ink-500); }
.provider-card .credentials { font-family: var(--font-sans); color: var(--sage-700); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; }
.provider-card .bio { color: var(--ink-700); font-size: var(--fs-sm); }
.provider-card .telemed-link { margin-top: auto; }

/* -- Card / panel base ----------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.card-lg { padding: var(--sp-6); }
.card-sage { background: var(--sage-50); border-color: var(--sage-100); }
.card-cream { background: var(--cream-100); border-color: var(--cream-200); }

/* -- Two-column layout ----------------------------------- */
.two-col { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.1fr .9fr; gap: var(--sp-12); } }

/* -- Hours block ----------------------------------------- */
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 14px 0;
  border-bottom: 1px dashed var(--ink-200);
  font-size: var(--fs-md);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list li span:first-child { color: var(--ink-900); font-weight: 600; }
.hours-list li span:last-child  { color: var(--ink-500); }

/* -- Update / hot topics list ---------------------------- */
.update-list { display: grid; gap: var(--sp-4); }
.update-card {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4); align-items: start;
  background: var(--white); border-radius: var(--radius-md);
  padding: var(--sp-5); border: 1px solid var(--ink-100);
  text-decoration: none; color: var(--ink-900);
  transition: border-color var(--transition), transform var(--transition);
}
.update-card:hover { border-color: var(--sage-300); transform: translateY(-1px); color: var(--ink-900); }
.update-card .ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--sage-50); color: var(--sage-700);
  display: grid; place-items: center;
}
.update-card.warn .ico { background: var(--apricot-100); color: var(--apricot-700); }
.update-card .meta { color: var(--ink-500); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; }
.update-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-md); margin: 4px 0 6px; letter-spacing: 0; }
.update-card p { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); }

/* -- Forms / list of links ------------------------------- */
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.link-list a,
.link-list .link-row-static {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: 14px 18px; min-height: 52px;
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink-900); font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}
.link-list a:hover { border-color: var(--sage-300); background: var(--sage-50); color: var(--ink-900); }
.link-list a small,
.link-list .link-row-static small { color: var(--ink-500); font-weight: 500; }
.link-list .row-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.link-list .row-meta > svg { flex: none; }
.link-list .link-row-static {
  cursor: default;
  background: var(--cream-100);
  border-color: var(--cream-200);
  color: var(--ink-700);
}
.link-list .link-row-static[data-state="coming-soon"] small {
  color: var(--apricot-700);
  background: var(--apricot-100);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* -- Accordion ------------------------------------------- */
.accordion { display: grid; gap: var(--sp-3); }
.accordion details {
  background: var(--white); border: 1px solid var(--ink-100);
  border-radius: var(--radius-md); padding: 0;
  overflow: hidden;
}
.accordion summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-weight: 600; font-size: var(--fs-md); color: var(--ink-900);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .chev {
  width: 24px; height: 24px; flex: none;
  transition: transform var(--transition);
  color: var(--sage-700);
}
.accordion details[open] summary .chev { transform: rotate(180deg); }
.accordion details[open] { border-color: var(--sage-200); box-shadow: var(--shadow-sm); }
.accordion .panel { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-700); }
.accordion .panel p { margin-top: 0; }

/* -- CTA Banner ------------------------------------------ */
.cta-banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--plum-600), var(--plum-900));
  color: #fff;
  padding: var(--sp-8) var(--sp-6);
}
.cta-banner::before {
  /* green forest glow — evokes the logo hand */
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(157,193,122,.45), rgba(157,193,122,0) 65%);
  pointer-events: none;
}
.cta-banner::after {
  /* mountain ridge silhouette at the bottom */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 80 L120 40 L240 65 L360 25 L480 55 L600 15 L720 50 L840 20 L960 55 L1080 30 L1200 60 L1320 35 L1440 60 L1440 100 L0 100 Z' fill='%23251543' opacity='.55'/><path d='M0 95 L160 60 L320 80 L480 50 L640 75 L800 45 L960 75 L1120 50 L1280 75 L1440 60 L1440 100 L0 100 Z' fill='%23251543'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: .65;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; max-width: 600px; }
.cta-banner p  { color: rgba(255,255,255,.78); max-width: 540px; }
.cta-banner .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-5); }
.cta-banner .btn-primary { background: var(--leaf-300); color: var(--leaf-900); }
.cta-banner .btn-primary:hover { background: var(--leaf-200); color: var(--leaf-900); }
.cta-banner .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cta-banner .btn-secondary:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* -- Footer ---------------------------------------------- */
.site-footer {
  position: relative;
  /* Mountain ridge "bump" carved out of the top edge by a cream-colored SVG layered above the gradient */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 0 L0 55 L60 35 L110 50 L160 28 L220 48 L280 22 L340 45 L400 18 L470 42 L540 15 L610 40 L680 12 L750 38 L820 18 L890 42 L960 22 L1030 45 L1100 18 L1170 42 L1240 25 L1310 48 L1380 30 L1440 50 L1440 0 Z' fill='%23faf6f1'/></svg>") top center / 100% 90px no-repeat,
    linear-gradient(180deg, var(--plum-900) 0%, #16102a 100%);
  color: var(--ink-200);
  padding: calc(var(--sp-12) + 60px) 0 var(--sp-6);
  margin-top: var(--sp-10);
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h3, .footer-grid h4 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 0 0 var(--sp-3);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer-grid li { min-height: 28px; display: flex; align-items: center; }
.footer-grid a, .footer-grid li {
  color: var(--ink-200); text-decoration: none; font-size: var(--fs-sm);
  padding: 4px 0; line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.footer-grid a { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-brand p { color: rgba(255,255,255,.6); font-size: var(--fs-sm); max-width: 320px; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand small { color: rgba(255,255,255,.5); }
.footer-brand .brand .brand-name { color: #fff; }
.footer-bottom {
  margin-top: var(--sp-10); padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}
.footer-a11y {
  color: rgba(255,255,255,.65);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.footer-a11y::before {
  content: "♿";
  opacity: .9;
}
.footer-a11y a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* WCAG 2.2 (2.5.8) Target Size minimum 24x24 — pad the inline link. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 0;
}
.footer-a11y a:hover { color: #fff; text-decoration-thickness: 2px; }

.a11y-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.a11y-list li {
  padding-left: var(--sp-5); position: relative;
}
.a11y-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 2px;
  color: var(--leaf-700); font-weight: 700;
}
.a11y-list code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .88em;
  background: var(--plum-100);
  color: var(--plum-700);
  padding: 1px 6px;
  border-radius: 4px;
}
.social { display: inline-flex; gap: 10px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.06); color: #fff;
}
.social a:hover { background: rgba(255,255,255,.15); }

/* -- Sticky mobile CTA ----------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--white);
  border-top: 1px solid var(--ink-200);
  box-shadow: 0 -10px 30px rgba(20,35,25,.06);
  padding: 8px;
  gap: 8px;
}
.mobile-cta a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px; border-radius: 14px;
  text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  min-height: 50px;
}
.mobile-cta .call { background: var(--sage-700); color: #fff; }
.mobile-cta .portal { background: var(--apricot-100); color: var(--apricot-700); }
@media (min-width: 760px) { .mobile-cta { display: none; } }
.has-mobile-cta { padding-bottom: 80px; }
@media (min-width: 760px) { .has-mobile-cta { padding-bottom: 0; } }

/* -- Page hero (sub pages) -------------------------------- */
.page-hero {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-10);
  background:
    radial-gradient(60% 80% at 90% 20%, rgba(181,158,221,.28), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(111,161,82,.22), transparent 60%),
    var(--cream-50);
  border-bottom: 1px solid var(--ink-100);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0 60 L160 30 L320 55 L480 25 L640 50 L800 20 L960 50 L1120 25 L1280 55 L1440 35 L1440 80 L0 80 Z' fill='%23ffffff' opacity='.0'/><path d='M0 70 L120 50 L240 65 L360 40 L480 60 L600 35 L720 55 L840 30 L960 55 L1080 35 L1200 60 L1320 45 L1440 65 L1440 80 L0 80 Z' fill='%23faf6f1'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .crumbs {
  list-style: none; padding: 0; margin: 0 0 var(--sp-3);
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: .14em;
}
.page-hero .crumbs li + li::before {
  content: "·"; margin-right: 8px; color: var(--ink-400);
}
.page-hero .crumbs a { color: var(--ink-500); text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--ink-900); text-decoration: underline; }
.page-hero .crumbs [aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.page-hero h1 { max-width: 720px; }
.page-hero p  { max-width: 660px; }

/* -- Misc ------------------------------------------------- */
.divider { height: 1px; background: var(--ink-100); border: 0; margin: var(--sp-12) 0; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--sage-50); color: var(--sage-700);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
}
.tag.warm { background: var(--apricot-100); color: var(--apricot-700); }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Map iframe */
.map-frame {
  width: 100%; aspect-ratio: 16/10;
  border: 0; border-radius: var(--radius-lg);
  filter: saturate(.9);
}

/* -- ✨ Magic layer ------------------------------------- */
/* Decorative drifting lights + sparkles. Honored by prefers-reduced-motion. */

.hero-magic {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Floating gradient orbs — soft blurred lights that drift slowly */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  animation: orb-drift 14s ease-in-out infinite, orb-fade 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.orb-1 {
  width: 280px; height: 280px;
  top: 10%; left: -80px;
  background: radial-gradient(circle, rgba(157, 193, 122, 0.55), rgba(157, 193, 122, 0) 70%);
  animation-delay: 0s;
}
.orb-2 {
  width: 340px; height: 340px;
  top: 30%; right: -100px;
  background: radial-gradient(circle, rgba(181, 158, 221, 0.55), rgba(181, 158, 221, 0) 70%);
  animation-delay: -5s;
}
.orb-3 {
  width: 220px; height: 220px;
  bottom: 5%; left: 45%;
  background: radial-gradient(circle, rgba(230, 193, 104, 0.40), rgba(230, 193, 104, 0) 70%);
  animation-delay: -9s;
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes orb-fade {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

/* Sparkles — tiny 4-point star shapes that twinkle */
.sparkle {
  position: absolute;
  width: 10px; height: 10px;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(0deg,  transparent 45%, rgba(255, 255, 255, 0.9) 50%, transparent 55%),
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.9) 50%, transparent 55%);
  background-size: 100% 100%;
  animation: twinkle 3.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}

.sparkle.s1 { top: 14%; left: 22%; width: 8px;  height: 8px;  animation-delay: 0s; }
.sparkle.s2 { top: 8%;  left: 62%; width: 6px;  height: 6px;  animation-delay: -0.8s; }
.sparkle.s3 { top: 34%; left: 8%;  width: 10px; height: 10px; animation-delay: -1.6s; }
.sparkle.s4 { top: 18%; right: 18%; width: 7px; height: 7px;  animation-delay: -2.2s; }
.sparkle.s5 { bottom: 20%; left: 28%; width: 9px; height: 9px; animation-delay: -0.4s; }
.sparkle.s6 { bottom: 14%; right: 30%; width: 6px; height: 6px; animation-delay: -2.8s; }
.sparkle.s7 { top: 58%; left: 50%; width: 5px; height: 5px; animation-delay: -1.2s; }
.sparkle.s8 { bottom: 40%; right: 12%; width: 8px; height: 8px; animation-delay: -3.0s; }

/* Gentle glow pulse on the logo */
.brand-mark {
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(126, 88, 184, 0.35), rgba(126, 88, 184, 0) 70%);
  opacity: 0;
  z-index: -1;
  animation: logo-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logo-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.95); }
  50%      { opacity: 0.6;  transform: scale(1.08); }
}

/* Soft shimmer on the Board Certified badge */
.hero-badge {
  overflow: hidden;
}
.hero-badge::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: badge-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badge-shimmer {
  0%, 70% { transform: translateX(-100%); }
  85%     { transform: translateX(0%); }
  100%    { transform: translateX(100%); }
}

/* Magical hover on cards — soft glow that draws the eye */
.qa-card, .provider-card, .update-card {
  position: relative;
}
.qa-card::before, .provider-card::before, .update-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(126, 88, 184, 0.25), rgba(111, 161, 82, 0.25));
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  z-index: -1;
}
.qa-card:hover::before, .provider-card:hover::before, .update-card:hover::before {
  opacity: 1;
}

/* Rising mist — little haze particles drifting upward, like valley breath */
.mist {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
  opacity: 0;
  filter: blur(1px);
  animation: mist-rise 16s ease-in-out infinite;
  will-change: transform, opacity;
  bottom: 0;
}
.mist.m1 { left: 8%;  width: 8px;  height: 8px; animation-delay: 0s; }
.mist.m2 { left: 22%; width: 5px;  height: 5px; animation-delay: -3s; animation-duration: 18s; }
.mist.m3 { left: 38%; width: 10px; height: 10px; animation-delay: -7s; animation-duration: 20s; }
.mist.m4 { left: 55%; width: 6px;  height: 6px; animation-delay: -2s; animation-duration: 17s; }
.mist.m5 { left: 72%; width: 7px;  height: 7px; animation-delay: -10s; animation-duration: 19s; }
.mist.m6 { left: 88%; width: 9px;  height: 9px; animation-delay: -5s; animation-duration: 15s; }
@keyframes mist-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  15%  { opacity: 0.8; }
  60%  { opacity: 0.5; }
  100% { transform: translateY(-260px) scale(1.3); opacity: 0; }
}

/* Parallax mountain silhouettes — three drifting ridge layers.
   <div> wrappers (not SVG directly) because SVGs don't respect left/right CSS the way HTML does. */
.ridge {
  position: absolute;
  left: -12%;
  width: 124%;           /* covers viewport + 12% overflow on each side for drift headroom */
  height: 140px;
  pointer-events: none;
  will-change: transform;
}
.ridge > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ridge-back  { bottom: 60px;  animation: ridge-drift 70s linear infinite; }
.ridge-mid   { bottom: 30px;  animation: ridge-drift 55s linear infinite reverse; }
.ridge-front { bottom: 0;     animation: ridge-drift 85s linear infinite; }
@keyframes ridge-drift {
  0%   { transform: translate3d(-3%, 0, 0); }
  50%  { transform: translate3d(3%, 0, 0); }
  100% { transform: translate3d(-3%, 0, 0); }
}

/* Dawn glow sweeping across the footer mountain ridge — like moonlight passing by */
.site-footer::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 90px;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(230, 193, 104, 0.25) 45%,
    rgba(181, 158, 221, 0.22) 55%,
    transparent 70%);
  transform: translateX(-110%);
  animation: dawn-glow 12s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes dawn-glow {
  0%, 60% { transform: translateX(-110%); }
  80%     { transform: translateX(0%); }
  100%    { transform: translateX(110%); }
}

/* Mountain watermark inside provider cards — subtle crest that glows on hover */
.provider-card::after {
  content: "";
  position: absolute; right: -10px; bottom: -10px;
  width: 120px; height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='xMidYMax slice'><path d='M0 50 L25 25 L45 35 L65 15 L90 30 L110 20 L120 28 L120 60 L0 60 Z' fill='%236fa152' opacity='.18'/><path d='M0 55 L30 40 L55 50 L80 38 L105 48 L120 45 L120 60 L0 60 Z' fill='%237e58b8' opacity='.22'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
  border-bottom-right-radius: var(--radius-lg);
}
.provider-card:hover::after { opacity: 0.75; transform: translateY(-2px); }

/* Respect reduced-motion — freeze all magic (but leave visuals in their resting state) */
@media (prefers-reduced-motion: reduce) {
  .orb, .sparkle, .mist, .ridge,
  .brand-mark::after, .hero-badge::after, .site-footer::after,
  .provider-card::after {
    animation: none !important;
    transition: none !important;
  }
  .orb    { opacity: 0.5; }
  .sparkle { opacity: 0.85; transform: scale(1); }
  .mist   { opacity: 0; }
  .ridge  { transform: none; }
  .site-footer::after { display: none; }
}

/* -- 🏔 Section ridge dividers ------------------------- */
/* Low-opacity mountain silhouettes that connect sections vertically.
   Pure decoration (aria-hidden), zero interaction, respects print + reduced-motion. */

.section-ridge {
  position: relative;
  height: 56px;
  margin: calc(-1 * var(--sp-6)) 0 0;  /* pull it up into the preceding section bottom */
  pointer-events: none;
  overflow: hidden;
}
.section-ridge svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.section-ridge .ridge-path-a { fill: var(--plum-300); opacity: 0.16; }
.section-ridge .ridge-path-b { fill: var(--leaf-500); opacity: 0.14; }

/* Variants — different ridge profiles to keep visual rhythm interesting */
.section-ridge.v1 { height: 48px; }
.section-ridge.v2 { height: 62px; }
.section-ridge.v3 { height: 52px; }

/* Thin trail at the page edges on wider screens — very subtle */
@media (min-width: 1100px) {
  main::before, main::after {
    content: "";
    position: fixed; top: 0; bottom: 0;
    width: 42px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.25;
  }
  main::before {
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 1000' preserveAspectRatio='xMidYMid slice'><path d='M0 0 L42 0 L14 40 L26 110 L8 180 L28 260 L10 340 L32 420 L14 500 L28 580 L10 660 L26 740 L12 820 L24 900 L8 1000 L0 1000 Z' fill='%237e58b8' opacity='.25'/><path d='M0 30 L14 100 L2 180 L18 260 L4 340 L22 420 L6 500 L20 580 L4 660 L18 740 L6 820 L18 900 L0 1000 L0 0 Z' fill='%236fa152' opacity='.22'/></svg>") left center / contain repeat-y;
  }
  main::after {
    right: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 1000' preserveAspectRatio='xMidYMid slice'><path d='M42 0 L0 0 L28 40 L16 110 L34 180 L14 260 L32 340 L10 420 L28 500 L14 580 L32 660 L16 740 L30 820 L18 900 L34 1000 L42 1000 Z' fill='%237e58b8' opacity='.25'/><path d='M42 30 L28 100 L40 180 L24 260 L38 340 L20 420 L36 500 L22 580 L38 660 L24 740 L36 820 L24 900 L42 1000 L42 0 Z' fill='%236fa152' opacity='.22'/></svg>") right center / contain repeat-y;
  }
}

/* Respect reduce-motion + print */
@media print {
  .section-ridge, main::before, main::after { display: none !important; }
}

/* Print */
@media print {
  .site-header, .site-footer, .mobile-cta, .hero-card, .nav-toggle,
  .hero-magic, .sparkle, .orb { display: none !important; }
  body { background: white; color: black; }
}

/* =========================================================
   ✨ Phase 1 + 2 — More Magic
   Additions are accessibility-first: every motion respects
   prefers-reduced-motion, every color path respects
   forced-colors, all interactives are keyboard-operable
   with visible focus and ≥44x44 touch targets.
   ========================================================= */

/* -- User-controlled display preferences ----------------- */
/* When the user toggles options in the footer Display widget,
   <html> gets data-pref-* attributes that override OS settings. */
html[data-pref-motion="reduce"] *,
html[data-pref-motion="reduce"] *::before,
html[data-pref-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html[data-pref-motion="reduce"] .orb,
html[data-pref-motion="reduce"] .sparkle,
html[data-pref-motion="reduce"] .mist,
html[data-pref-motion="reduce"] .ridge,
html[data-pref-motion="reduce"] .brand-mark::after,
html[data-pref-motion="reduce"] .hero-badge::after,
html[data-pref-motion="reduce"] .site-footer::after,
html[data-pref-motion="reduce"] .provider-card::after {
  animation: none !important;
  transition: none !important;
}
html[data-pref-motion="reduce"] .mist { opacity: 0; }

html[data-pref-contrast="more"] {
  --ink-500: #2a2438;
  --ink-400: #3a3450;
  --ink-200: #9a93b0;
  --ink-100: #7e7795;
}
html[data-pref-contrast="more"] .btn-secondary,
html[data-pref-contrast="more"] .qa-card,
html[data-pref-contrast="more"] .provider-card,
html[data-pref-contrast="more"] .card,
html[data-pref-contrast="more"] .update-card,
html[data-pref-contrast="more"] .link-list a,
html[data-pref-contrast="more"] .staff-card { border-width: 2px; }
html[data-pref-contrast="more"] a { text-decoration-thickness: 2px; }

html[data-pref-text="lg"]   { font-size: 112.5%; }
html[data-pref-text="xl"]   { font-size: 125%; }

/* -- Hero greeting (time-aware eyebrow) ------------------ */
.hero-greeting {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 0 var(--sp-4);
  max-width: 100%;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: .02em;
  line-height: 1.45;
  box-shadow: var(--shadow-xs);
  /* Stay on one line; truncate gracefully if status grows */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-greeting .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf-500);
  display: inline-block;
  vertical-align: 1px;
  margin-right: 8px;
}
.hero-greeting[data-status="closed"] .dot { background: var(--ink-300); }
.hero-greeting[data-status="lunch"] .dot { background: var(--gold-500); }
.hero-greeting[data-status="after-hours"] .dot { background: var(--plum-500); }
.hero-greeting .sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-300);
  display: inline-block;
  vertical-align: middle;
  margin: 0 6px;
}
@media (forced-colors: active) {
  .hero-greeting { border: 1px solid CanvasText; }
  .hero-greeting .dot, .hero-greeting .sep { forced-color-adjust: none; background: CanvasText; }
}

/* -- Open-status pill (header-adjacent or in-page) ------- */
.open-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--ink-100);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: .02em;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.open-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf-500);
  flex: none;
}
.open-status[data-status="lunch"] .dot       { background: var(--gold-500); }
.open-status[data-status="closed"] .dot      { background: var(--ink-400); }
.open-status[data-status="after-hours"] .dot { background: var(--plum-500); }
.open-status[data-status="open"] .dot {
  position: relative;
}
.open-status[data-status="open"] .dot::after {
  /* gentle pulsing ring — like a heartbeat for "we're open right now" */
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--leaf-500);
  opacity: 0;
  animation: status-pulse 2.4s ease-out infinite;
}
@keyframes status-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .open-status[data-status="open"] .dot::after { animation: none; opacity: 0; }
}
@media (forced-colors: active) {
  .open-status { border: 1px solid CanvasText; }
  .open-status .dot { forced-color-adjust: none; background: CanvasText; outline: 1px solid CanvasText; }
}
/* Place the open-status pill in the page-hero crumb row on sub-pages */
.page-hero-status-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.page-hero-status-row .crumbs { margin: 0; }

/* -- Hero slide tinting (Phase 1.3) ---------------------- */
/* Each carousel slide gets a soft wash overlay matched to its life-stage:
   baby → warm cream (dawn), kids → leaf-green (midday), teens → plum (dusk).
   mix-blend-mode: soft-light keeps faces natural while shifting mood. */
.carousel-slide[data-tint="dawn"]::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(250, 236, 201, 0.34), rgba(232, 218, 195, 0.22));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.carousel-slide[data-tint="midday"]::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(157, 193, 122, 0.30), rgba(225, 237, 207, 0.20));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.carousel-slide[data-tint="dusk"]::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(126, 88, 184, 0.26), rgba(232, 193, 104, 0.18));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* -- Time-of-day mountain sky (Phase 2.1) ---------------- */
/* body[data-time-of-day] is set once on page-load by JS based on local clock.
   Adds an additional radial-gradient backdrop to the hero's existing ::before,
   shifting the warmth/coolness of the scene without altering text contrast. */
body[data-time-of-day="dawn"] .hero::before {
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(232, 193, 104, 0.30), transparent 60%),
    radial-gradient(55% 65% at 5% 95%, rgba(181, 158, 221, 0.32), transparent 60%),
    radial-gradient(60% 80% at 50% 0%, rgba(250, 236, 201, 0.18), transparent 70%);
}
body[data-time-of-day="day"] .hero::before {
  /* default — same as base. defined explicitly for clarity */
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(181, 158, 221, 0.34), transparent 60%),
    radial-gradient(55% 65% at 5% 95%, rgba(111, 161, 82, 0.28), transparent 60%),
    radial-gradient(60% 80% at 50% 0%, rgba(67, 43, 110, 0.06), transparent 70%);
}
body[data-time-of-day="dusk"] .hero::before {
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(126, 88, 184, 0.36), transparent 60%),
    radial-gradient(55% 65% at 5% 95%, rgba(232, 193, 104, 0.28), transparent 60%),
    radial-gradient(60% 80% at 50% 0%, rgba(67, 43, 110, 0.10), transparent 70%);
}
body[data-time-of-day="night"] .hero::before {
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(67, 43, 110, 0.32), transparent 60%),
    radial-gradient(55% 65% at 5% 95%, rgba(94, 63, 147, 0.22), transparent 60%),
    radial-gradient(60% 80% at 50% 0%, rgba(37, 21, 67, 0.14), transparent 70%);
}
/* Sparkles brighten under night */
body[data-time-of-day="night"] .sparkle {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(0deg,  transparent 40%, rgba(255, 255, 255, 1) 50%, transparent 60%),
    linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 1) 50%, transparent 60%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

/* -- Seasonal flourishes (Phase 2.2) --------------------- */
/* Tiny month-keyed decorations layered over the hero magic.
   All aria-hidden, all suppressed by reduced-motion, none essential. */
.season {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
/* Spring petals — 3 small soft-pink ovals drifting */
body[data-season="spring"] .season-petal-1,
body[data-season="spring"] .season-petal-2,
body[data-season="spring"] .season-petal-3 {
  width: 12px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 220, 230, 0.95), rgba(232, 193, 211, 0.55));
  animation: petal-fall 18s linear infinite;
}
body[data-season="spring"] .season-petal-1 { top: -10px; left: 18%; animation-delay: 0s; }
body[data-season="spring"] .season-petal-2 { top: -10px; left: 56%; animation-delay: -6s; animation-duration: 22s; }
body[data-season="spring"] .season-petal-3 { top: -10px; left: 80%; animation-delay: -12s; animation-duration: 20s; }
@keyframes petal-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.85; }
  100% { transform: translate(40px, calc(100vh - 180px)) rotate(360deg); opacity: 0; }
}

/* Summer firefly — a single warm dot tracing a slow loop */
body[data-season="summer"] .season-firefly {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 130, 0.95) 0%, rgba(255, 200, 50, 0) 70%);
  filter: blur(1px) drop-shadow(0 0 6px rgba(232, 193, 104, 0.7));
  top: 40%; left: 20%;
  animation: firefly-loop 14s ease-in-out infinite;
}
@keyframes firefly-loop {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.95; }
  25%  { transform: translate(120px, -60px); opacity: 0.7; }
  50%  { transform: translate(220px, -10px); opacity: 1; }
  75%  { transform: translate(140px, 80px); opacity: 0.6; }
  90%  { opacity: 0.9; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* Autumn leaves — 3 small leaves rotating as they fall */
body[data-season="autumn"] .season-leaf-1,
body[data-season="autumn"] .season-leaf-2,
body[data-season="autumn"] .season-leaf-3 {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--gold-500), var(--leaf-700));
  clip-path: ellipse(50% 30% at 50% 50%);
  animation: leaf-fall 24s linear infinite;
}
body[data-season="autumn"] .season-leaf-1 { top: -20px; left: 12%; animation-delay: 0s; }
body[data-season="autumn"] .season-leaf-2 { top: -20px; left: 48%; animation-delay: -8s; animation-duration: 28s; }
body[data-season="autumn"] .season-leaf-3 { top: -20px; left: 78%; animation-delay: -15s; animation-duration: 26s; }
@keyframes leaf-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.9; }
  100% { transform: translate(60px, calc(100vh - 200px)) rotate(720deg); opacity: 0; }
}

/* Winter snowflakes — 5 small white circles drifting */
body[data-season="winter"] .season-flake-1,
body[data-season="winter"] .season-flake-2,
body[data-season="winter"] .season-flake-3,
body[data-season="winter"] .season-flake-4,
body[data-season="winter"] .season-flake-5 {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4));
  filter: drop-shadow(0 0 3px rgba(181, 158, 221, 0.6));
  animation: flake-fall 18s linear infinite;
}
body[data-season="winter"] .season-flake-1 { top: -10px; left: 8%;  animation-delay: 0s; }
body[data-season="winter"] .season-flake-2 { top: -10px; left: 28%; animation-delay: -4s; animation-duration: 22s; width: 8px; height: 8px; }
body[data-season="winter"] .season-flake-3 { top: -10px; left: 50%; animation-delay: -8s; animation-duration: 20s; }
body[data-season="winter"] .season-flake-4 { top: -10px; left: 72%; animation-delay: -12s; animation-duration: 24s; width: 5px; height: 5px; }
body[data-season="winter"] .season-flake-5 { top: -10px; left: 90%; animation-delay: -16s; animation-duration: 19s; }
@keyframes flake-fall {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.6; }
  100% { transform: translate(-30px, calc(100vh - 180px)); opacity: 0; }
}

/* Suppress all seasonal flourishes for reduced motion + forced colors */
@media (prefers-reduced-motion: reduce) {
  .season { animation: none !important; opacity: 0 !important; }
}
@media (forced-colors: active) {
  .season { display: none; }
}

/* -- Quick-action card press feel (Phase 1.3.4) ---------- */
.qa-card:active { transform: scale(.98); box-shadow: var(--shadow-sm); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .qa-card:active { transform: none; }
}

/* -- Accordion chevron bounce (Phase 1.3.5) -------------- */
@keyframes chev-bounce {
  0%   { transform: rotate(180deg) scale(1); }
  40%  { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(180deg) scale(1); }
}
.accordion details[open] summary .chev { animation: chev-bounce 280ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .accordion details[open] summary .chev { animation: none; }
}

/* -- Newborn Corner topic illustrations (Phase 1.4) ------ */
/* Cards with class "qa-card illustrated" get a richer 64x64 illustration
   in place of the tiny icon-wrap. Pure SVG, currentColor-driven. */
.qa-card.illustrated .topic-illo {
  width: 72px; height: 72px;
  border-radius: 14px;
  background: var(--cream-50);
  display: grid; place-items: center;
  margin-bottom: var(--sp-2);
  position: relative;
  overflow: hidden;
}
.qa-card.illustrated .topic-illo svg { width: 56px; height: 56px; }
.qa-card.illustrated.warm .topic-illo { background: var(--leaf-50); }
.qa-card.illustrated .topic-illo::before {
  /* soft top-glow gives each illustration a warm halo */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.6), transparent 70%);
  pointer-events: none;
}
@media (forced-colors: active) {
  .qa-card.illustrated .topic-illo { border: 1px solid CanvasText; }
}

/* -- Provider card detail chip (Phase 2.3.1) ------------- */
/* On hover/focus of a provider-card with a data-detail attribute, a small
   chip slides in from the bottom-left with a personal detail. Built on the
   existing watermark; key change is the chip and a subtle 4px lift. */
.provider-card[data-detail] {
  --detail: attr(data-detail);
}
.provider-card[data-detail] .provider-detail {
  /* Floats over the top of the photo so it never collides with the
     telemedicine button at the bottom of the card. */
  position: absolute;
  top: calc(var(--sp-5) + 10px);
  right: calc(var(--sp-5) + 10px);
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--plum-700);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  max-width: calc(100% - calc(var(--sp-5) * 2 + 20px));
  overflow: hidden; text-overflow: ellipsis;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 280ms ease;
  z-index: 2;
  pointer-events: none;
}
.provider-card[data-detail] .provider-detail::before {
  content: "";
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432b6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l4-4 3 3 7-7'/><polyline points='14 9 17 9 17 12'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
}
.provider-card:hover .provider-detail,
.provider-card:focus-within .provider-detail {
  transform: translateY(0);
  opacity: 1;
}
.provider-card { transition: transform var(--transition), box-shadow var(--transition); }
.provider-card:hover, .provider-card:focus-within {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .provider-card[data-detail] .provider-detail { transition: none; }
  .provider-card:hover, .provider-card:focus-within { transform: none; }
}
@media (forced-colors: active) {
  .provider-card[data-detail] .provider-detail { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* -- Form-submission confetti (Phase 2.3.2) -------------- */
.confetti-shower {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px; height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 1400ms cubic-bezier(.3, .7, .4, 1) forwards;
  will-change: transform, opacity;
}
.confetti-piece.c-plum  { background: var(--plum-500); }
.confetti-piece.c-leaf  { background: var(--leaf-500); }
.confetti-piece.c-gold  { background: var(--gold-300); }
.confetti-piece.c-cream { background: var(--cream-200); }
@keyframes confetti-fall {
  0%   { transform: translate(0, -10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--cx, 0), 95vh) rotate(var(--cr, 720deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-shower, .confetti-piece { display: none !important; }
}

/* -- Footer locale line (Phase 1.7.2) -------------------- */
.footer-locale {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
  letter-spacing: .02em;
}

/* -- Display preferences widget (Phase 2.6.1) ------------ */
.display-prefs {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}
.display-prefs > summary {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  list-style: none;
  min-height: 32px;
  transition: background var(--transition);
}
.display-prefs > summary::-webkit-details-marker { display: none; }
.display-prefs > summary:hover { background: rgba(255, 255, 255, .14); }
.display-prefs > summary .chev {
  width: 14px; height: 14px;
  transition: transform var(--transition);
}
.display-prefs[open] > summary .chev { transform: rotate(180deg); }
.display-prefs-panel {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-md);
  display: grid; gap: var(--sp-4);
  max-width: 480px;
}
.display-prefs-panel fieldset {
  border: 0; padding: 0; margin: 0;
}
.display-prefs-panel legend {
  font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 6px;
}
.display-prefs-panel .pref-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.display-prefs-panel .pref-btn {
  min-height: 36px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.display-prefs-panel .pref-btn:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
}
.display-prefs-panel .pref-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--plum-900);
  border-color: var(--white);
}
.display-prefs-panel .pref-note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);
}
@media (forced-colors: active) {
  .display-prefs > summary,
  .display-prefs-panel,
  .display-prefs-panel .pref-btn { border: 1px solid CanvasText; }
  .display-prefs-panel .pref-btn[aria-pressed="true"] { forced-color-adjust: none; outline: 2px solid CanvasText; }
}

/* -- Custom 404 / error page (Phase 1.4.5) -------------- */
.error-page {
  min-height: calc(100vh - 88px - 80px);
  display: grid; place-items: center;
  padding: var(--sp-12) var(--sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.error-page::before {
  /* soft mountain-dawn glow background */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(232, 193, 104, 0.18), transparent 60%),
    radial-gradient(50% 50% at 50% 90%, rgba(157, 193, 122, 0.20), transparent 70%);
  z-index: -1;
}
.error-page .error-inner {
  max-width: 560px;
}
.error-page .ridgey {
  margin: 0 auto var(--sp-6);
  width: 140px; height: 140px;
}
.error-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--sp-3); }
.error-page p { color: var(--ink-700); margin-bottom: var(--sp-6); }
.error-page .error-links {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
  max-width: 420px; margin: 0 auto;
}
@media (min-width: 480px) {
  .error-page .error-links { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
}
.error-page .error-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-3) var(--sp-2);
  min-height: 88px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink-900);
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: border-color var(--transition), transform var(--transition);
}
.error-page .error-link:hover {
  border-color: var(--plum-300);
  transform: translateY(-2px);
}

/* -- Ridgey mark (Phase 2.1.1) --------------------------- */
/* A geometric SVG mark — a stylized mountain peak with a small face.
   Used in 404 page, accordion empty states, and post-form success.
   Pure SVG: face features inherit from currentColor where useful. */
.ridgey {
  display: inline-block;
  width: 96px; height: 96px;
  position: relative;
  color: var(--plum-700);
}
.ridgey svg { width: 100%; height: 100%; display: block; }
.ridgey.size-sm { width: 56px; height: 56px; }
.ridgey.size-lg { width: 160px; height: 160px; }
.ridgey .peak       { fill: var(--leaf-500); }
.ridgey .peak-back  { fill: var(--plum-500); opacity: 0.55; }
.ridgey .peak-snow  { fill: var(--cream-50); }
.ridgey .face-bg    { fill: var(--white); }
.ridgey .face-eye   { fill: var(--plum-900); }
.ridgey .face-mouth { stroke: var(--plum-900); fill: none; stroke-linecap: round; stroke-width: 2.5; }
.ridgey .sparkle-glyph { fill: var(--gold-300); }

/* Gentle wave animation on hover (the smile becomes a peek-of-tongue style nod) */
.ridgey.is-interactive { cursor: pointer; }
.ridgey .face-mouth { transition: transform 320ms ease; transform-origin: center; transform-box: fill-box; }
.ridgey:hover .face-mouth { transform: scale(1.15) translateY(-1px); }

/* idle bob — tiny up/down breathing motion, only on the 404 page hero */
.error-page .ridgey { animation: ridgey-bob 4.5s ease-in-out infinite; }
@keyframes ridgey-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .error-page .ridgey,
  .ridgey:hover .face-mouth { animation: none; transform: none; transition: none; }
}
@media (forced-colors: active) {
  .ridgey .peak,
  .ridgey .peak-back,
  .ridgey .peak-snow { forced-color-adjust: none; }
  .ridgey .face-bg { fill: Canvas; stroke: CanvasText; stroke-width: 1; }
  .ridgey .face-eye { fill: CanvasText; }
  .ridgey .face-mouth { stroke: CanvasText; }
}

/* Accordion empty-state with Ridgey */
.accordion .panel .empty-state {
  text-align: center;
  padding: var(--sp-6) 0;
  color: var(--ink-500);
}
.accordion .panel .empty-state .ridgey { margin-bottom: var(--sp-3); }

/* -- Hero polish: urgency chip + inline trust + header phone -- */

/* Urgency chip — sits above the hero CTA buttons. Drives action. */
.urgency-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--leaf-100);
  color: var(--leaf-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  margin: 0 0 var(--sp-3);
  white-space: nowrap;
}
.urgency-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.urgency-chip + .hero-actions { margin-top: 0; }
@media (forced-colors: active) {
  .urgency-chip {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
}

/* Inline trust line — replaces the 3-block grid. */
.hero-trust-inline {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-200);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hero-trust-inline strong {
  color: var(--ink-900);
  font-weight: 700;
}
.hero-trust-inline span[aria-hidden="true"] {
  color: var(--plum-500);
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1;
}

/* Header phone link — desktop-only call-to-call. */
.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  color: var(--plum-700);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  margin-left: auto;
  white-space: nowrap;
  flex: none;
  transition: background var(--transition), color var(--transition);
}
.header-phone svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.header-phone:hover {
  background: var(--plum-50);
  color: var(--plum-900);
}
@media (min-width: 960px) {
  .header-phone { display: inline-flex; }
  /* When .header-phone is present, it owns the auto margin; nav-cta no longer needs it */
  .header-phone + .nav-cta { margin-left: var(--sp-2); }
}
@media (forced-colors: active) {
  .header-phone {
    border: 1px solid CanvasText;
    color: LinkText;
    forced-color-adjust: none;
  }
}

/* -- Article content (inside accordion panels) ----------- */
.article-meta {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--plum-700);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.article-meta::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--plum-300);
}
.article-takeaways {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--leaf-50);
  border: 1px solid var(--leaf-100);
  border-radius: var(--radius-md);
}
.article-takeaways h3,
.article-takeaways h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--leaf-700);
  margin: 0 0 var(--sp-2);
}
.article-takeaways ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.article-takeaways li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: var(--lh-snug);
}
.article-takeaways li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--leaf-500);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 7.5 6 10.5 11 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.article-callout {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream-100);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-sm);
}
.article-callout h3,
.article-callout h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--gold-700);
  margin: 0 0 6px;
}
.article-callout p { margin: 0; color: var(--ink-700); }
@media (forced-colors: active) {
  .article-takeaways, .article-callout { border: 1px solid CanvasText; }
  .article-takeaways li::before { forced-color-adjust: none; outline: 1px solid CanvasText; }
}

/* ─────────────────────────────────────────────────────────
   Language toggle (EN/ES) — header + mobile drawer
   ───────────────────────────────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  flex: none;
}
.lang-toggle .lang-option {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-500);
  cursor: pointer;
  min-width: 36px;
  min-height: 28px;
  line-height: 1;
}
.lang-toggle .lang-option:hover { color: var(--plum-700); }
.lang-toggle .lang-option.lang-active {
  background: var(--plum-700);
  color: #fff;
}
.lang-toggle .lang-option:focus-visible {
  outline: 2px solid var(--plum-700);
  outline-offset: 2px;
}
.lang-toggle .lang-divider {
  color: var(--ink-300);
  font-size: var(--fs-xs);
  font-weight: 600;
  user-select: none;
}
/* Hide the header copy on very narrow screens — the drawer copy still works.
   Scoped to .container so the rule does not also hit .mobile-drawer .lang-toggle
   (the drawer is also nested inside .site-header). */
@media (max-width: 459px) {
  .site-header > .container .lang-toggle { display: none; }
}
/* Mobile-drawer language toggle: place above the call/portal CTAs */
.mobile-drawer .lang-toggle {
  align-self: flex-start;
  margin-top: var(--sp-3);
}
@media (forced-colors: active) {
  .lang-toggle { border: 1px solid CanvasText; }
  .lang-toggle .lang-option.lang-active { outline: 2px solid CanvasText; }
}

/* ─────────────────────────────────────────────────────────
   Resources page — TOC + section anchor offset
   ───────────────────────────────────────────────────────── */
/* Anchor scroll offset so deep links don't hide behind sticky header */
.resources-section { scroll-margin-top: 24px; }
.resources-toc {
  background: var(--cream-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-6);
}
.resources-toc h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--plum-700);
  margin: 0 0 var(--sp-3);
  font-weight: 700;
}
.resources-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
/* Active TOC chip — set by IntersectionObserver as user scrolls */
.resources-toc a.is-current {
  background: var(--plum-700);
  color: #fff;
  border-color: var(--plum-700);
}
.resources-toc a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid var(--ink-200);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.resources-toc a:hover {
  background: var(--plum-50);
  color: var(--plum-700);
  border-color: var(--plum-300);
}
.resources-toc a:focus-visible {
  outline: 2px solid var(--plum-700);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────
   ✨ Polish layer — selection color, smooth scroll,
   reveal-on-scroll, scroll progress, back-to-top, pulse dot
   All animations gate on prefers-reduced-motion + the user's
   data-pref-motion preference.
   ───────────────────────────────────────────────────────── */

/* Smooth scroll for anchor jumps */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html[data-pref-motion="reduce"] { scroll-behavior: auto; }

/* Selection color — matches the brand */
::selection { background: var(--plum-200); color: var(--plum-900); }

/* Reveal-on-scroll: subtle fade-up for section heads + key callouts.
   JS adds .reveal to chosen elements off-screen; .is-visible reveals them. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1),
              transform 600ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
html[data-pref-motion="reduce"] .reveal { opacity: 1; transform: none; transition: none; }

/* Pulsing ring on the "open" status dot — quietly says "we're here right now."
   Scoped tightly so it only affects the office-hours pill, not other .dot uses. */
.open-status[data-status="open"] .dot,
.hero-greeting[data-status="open"] .dot {
  position: relative;
}
.open-status[data-status="open"] .dot::after,
.hero-greeting[data-status="open"] .dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--leaf-500);
  opacity: .65;
  pointer-events: none;
  animation: mrp-pulse-ring 2.4s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes mrp-pulse-ring {
  0%   { transform: scale(.8); opacity: .65; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .open-status .dot::after, .hero-greeting .dot::after { animation: none; opacity: 0; }
}
html[data-pref-motion="reduce"] .open-status .dot::after,
html[data-pref-motion="reduce"] .hero-greeting .dot::after { animation: none; opacity: 0; }
@media (forced-colors: active) {
  .open-status .dot::after, .hero-greeting .dot::after { display: none; }
}

/* Scroll progress bar — slim plum→leaf gradient. JS injects + sets transform. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--plum-500), var(--leaf-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 90ms linear;
  z-index: 100;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}
@media print {
  .scroll-progress { display: none; }
}

/* Back-to-top button — appears on long pages after 800px scroll. */
.back-to-top {
  position: fixed;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0));
  right: var(--sp-6);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--plum-700);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.2,.7,.2,1),
              transform 240ms cubic-bezier(.2,.7,.2,1),
              background-color 200ms;
  z-index: 50;
  box-shadow: var(--shadow-md);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--plum-900); }
.back-to-top:focus-visible {
  outline: 3px solid var(--plum-300);
  outline-offset: 2px;
}
/* Lift it above the mobile sticky CTA on small screens */
.has-mobile-cta .back-to-top {
  bottom: calc(76px + env(safe-area-inset-bottom, 0));
}
@media (min-width: 760px) {
  .has-mobile-cta .back-to-top { bottom: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0s; transform: none; }
  .back-to-top.is-visible { transform: none; }
}
@media print {
  .back-to-top { display: none; }
}

/* Tabular figures for animated counters so width doesn't jitter */
.hero-trust-inline strong { font-variant-numeric: tabular-nums; }