/* Self-hosted Lora + Nunito Sans (latin, variable), replacing render-blocking Google Fonts CSS. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/lora-662c56ec.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/lora-662c56ec.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/lora-662c56ec.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/nunito-sans-e31445df.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/nunito-sans-e31445df.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/nunito-sans-e31445df.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Modwella — design tokens. Swap :root values to reskin to the real brand. */
:root {
  /* ── Modwella identity kit, 7 Sep 2026 ──────────────────────────────────
     Source: "Downloadable Logos and Icons.pdf", the kit Josilyn sent during
     the review call. These five are the WHOLE palette. There is no pink in it
     — the only warm colour is a soft peach, #EFC2B3. See docs/identity-kit.md.
     Values marked DERIVED are ours, not hers, and are named as such. */
  --kit-black:  #231F20;   /* the logo colour. CMYK 0/0/0/100 */
  --kit-greige: #D6D1CA;
  --kit-cream:  #F3F2E8;
  --kit-white:  #FEFEFE;
  --kit-peach:  #EFC2B3;   /* the "brand pink" of item 1.6/1.7 */

  /* Type. Josilyn: body moves off harsh black onto a softer charcoal so the
     true-black logo pops. Headings and the logo keep the kit black. */
  --ink: #231F20;          /* headings, logo — 16.2:1 on white */
  --ink-body: #4A4547;     /* DERIVED softer charcoal — 9.3:1 on white */
  --ink-soft: #6B6664;     /* DERIVED muted — 5.6:1 on white, still AA */

  --bg: #FEFEFE;
  --bg-tint: #F3F2E8;
  --bg-deep: #231F20;
  --line: #D6D1CA;
  --cream: #F3F2E8;

  --brand: #231F20;
  --brand-600: #231F20;

  /* Eyebrows and small type on the dark surfaces. Greige, not peach: item 1.6
     reserves the warm colour for things the user should click, and an eyebrow
     is not clickable. 10.7:1 on the kit black. */
  --accent: #D6D1CA;

  /* ACTION — item 1.6/1.7. Every Book Now and equivalent reads these three.
     ⚠️ The action colour takes DARK text, not white. White on #EFC2B3 is
     1.61:1 and fails WCAG outright; #231F20 on it is 10.1:1. Any new action
     control must use --action-ink. scripts/check-contrast.py enforces it. */
  --action: #EFC2B3;
  --action-600: #E0B6A8;   /* DERIVED hover, 6% down */
  --action-ink: #231F20;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(35, 31, 32, 0.10);
  --maxw: 1140px;

  /* Fonts. Tiempos Headline is the kit's PRIMARY font (Medium, Medium Italic);
     Avenir carries UI and body (Roman, Book, Black). Both are PAID — Tiempos is
     licensed per-domain by Klim, Avenir by Linotype — so the webfonts are not
     self-hosted here yet (item 1.2). Named first so they resolve the moment the
     licensed files land; Lora and Nunito Sans are the licence-safe fallbacks. */
  --font-sans: "Avenir Next", "Avenir", "Nunito Sans", system-ui, sans-serif;
  --font-display: "Tiempos Headline", "Lora", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* Josilyn, 8 Oct 2026: "all of the photos are wonky, they're all a different size".
   Cause: the build stamps width/height on every <img> (lib/imgsize.js, to stop
   layout shift). A height attribute beats CSS aspect-ratio unless height is
   auto, so every 4:3 card crop was ignored and each photo kept its own shape.
   height:auto here lets aspect-ratio win everywhere; the attributes still
   reserve space. */
img { height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
.muted { color: var(--ink-soft); }
.eyebrow { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--brand); margin-bottom: 0.6rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; font-family: var(--font-sans); padding: 0.85rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 0.55rem 1.05rem; font-size: 0.92rem; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--brand-600); color: #fff; }
.btn-outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
/* Hero secondary CTA (1.7): stays white over the video, darkens on hover. */
.btn-onvideo { background: transparent; border-color: #fff; color: #fff; }
.btn-onvideo:hover { background: rgba(0,0,0,0.55); border-color: #fff; color: #fff; }
.btn-action { background: var(--action); color: var(--action-ink); box-shadow: var(--shadow); }
.btn-action:hover { background: var(--action-600); color: var(--action-ink); }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { color: var(--brand-600); }

/* Header / nav */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 600; }
.brand-name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.01em; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand--footer .brand-logo { height: 26px; }
.nav-menu ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-menu a { color: var(--ink); font-weight: 500; }
.nav-menu .has-sub { position: relative; }
.nav-menu .sub { position: absolute; top: 100%; left: -1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.5rem; min-width: 230px; display: none; flex-direction: column; gap: 0; }
.nav-menu .sub li { width: 100%; }
.nav-menu .sub a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; }
.nav-menu .sub a:hover { background: var(--bg-tint); }
.nav-menu .has-sub:hover .sub { display: flex; }
/* Mega menu (Services) */
.nav-menu .mega { left: 0; right: auto; width: min(660px, 92vw); display: none; grid-template-columns: 1.4fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.nav-menu .has-mega:hover .mega { display: grid; }
.mega-services { padding: 1.25rem 1.5rem; }
.mega-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 700; margin: 0 0 0.65rem; }
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.5rem; }
.nav-menu .mega .mega-list a { display: block; padding: 0.5rem 0.6rem; border-radius: 8px; color: var(--ink); font-weight: 500; }
.nav-menu .mega .mega-list a:hover { background: var(--bg-tint); color: var(--brand); }
.mega-cta { background: var(--bg-deep); color: #fff; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.mega-cta .mega-eyebrow { color: var(--accent); }
.mega-lead { color: rgba(255, 255, 255, 0.85); font-size: 0.88rem; margin: 0 0 0.8rem; line-height: 1.5; }
.mega-steps { color: #fff; margin: 0 0 1rem; padding-left: 1.1rem; font-size: 0.86rem; }
.mega-steps li { margin-bottom: 0.25rem; }
.mega-cta .btn { align-self: flex-start; }
.mega-note { color: var(--accent); font-weight: 700; font-size: 0.82rem; margin: 0.7rem 0 0; }
.nav-actions { display: flex; align-items: center; gap: 0.85rem; }
/* 2.3 — the header contact pushes text, not calls. Label carries the intent. */
.nav-phone { font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav-phone:hover { color: var(--action); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--bg-tint), #fff); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero p.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 38ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; }
.hero-card h3 { margin-bottom: 1rem; }
.hero-card ul { list-style: none; margin: 0; padding: 0; }
.hero-card li { padding: 0.5rem 0 0.5rem 1.6rem; position: relative; border-bottom: 1px solid var(--line); }
.hero-card li:last-child { border-bottom: 0; }
.hero-card li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.hero-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4 / 3; }
.proof-badge { color: var(--accent); font-weight: 700; letter-spacing: 0.01em; margin: 0.5rem 0 0; font-size: 0.95rem; }
/* 8 Oct: the two selling points wrap as whole units, never mid-phrase. The
   stars always stay with the review count. */
.hero-proof { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; }
.hero-proof span { white-space: nowrap; }
.trust { background: var(--bg-deep); color: #fff; padding: 1rem 0; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; text-align: center; }
.trust-row span { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.trust-row strong { color: #fff; }
/* 8 Oct (Josilyn): on phones the trust points read left to right in rows,
   and no point ever breaks across two lines. */
@media (max-width: 700px) {
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; justify-content: start; text-align: left; gap: 0.6rem 1rem; }
  .trust-row span { white-space: nowrap; font-size: 0.9rem; }
}
.service-photo { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.feature-grid { margin-top: 0.5rem; }
.feature-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 6.3 — Book Now plus Learn More on every favourite card. Photos are centre-cropped
   (5.3: no clipped heads). */
.feature-card img { object-position: center; }
/* The card body fills the card and the actions sink to the bottom, so Book Now
   sits on one line across a row whatever the blurb lengths are. */
.feature-body { display: flex; flex-direction: column; flex: 1; }
.fav-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding-top: 0.25rem; margin-top: auto; }
.feature-body { padding: 1.25rem; }
/* Card labels sit on WHITE, so they take ink — never --accent, which is the
   greige reserved for dark surfaces and is 1.5:1 on white. */
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-body); margin-bottom: 0.35rem; }
.quote { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.45; margin: 0 0 0.75rem; color: #fff; }
.quote-cite { color: rgba(255,255,255,0.8); margin: 0 0 1.25rem; font-weight: 600; }
/* 1.4 — marks stay much smaller and quieter than the wordmark so they do not
   read as extra letters. */
.tm { font-size: 0.34em; vertical-align: super; opacity: 0.5; font-weight: 400;
      letter-spacing: 0; margin-left: 0.08em; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body p { font-size: 1.08rem; color: var(--ink); margin: 0 0 1.1rem; }
.post-body h2 { margin: 2rem 0 0.6rem; }
.post-body h3 { margin: 1.5rem 0 0.5rem; }
.post-body ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.post-body li { margin-bottom: 0.4rem; }
.post-body blockquote { border-left: 3px solid var(--brand); padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--ink-soft); }
.post-cta { margin-top: 2.5rem; padding: 1.75rem; background: var(--bg-tint); border-radius: var(--radius); }
.post-cta h3 { margin-top: 0; }
/* IV drip menu */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.menu-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: #fff; transition: transform 0.12s ease, box-shadow 0.2s ease; }
.menu-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.menu-item h3, .menu-item h4 { font-family: var(--font-display); font-size: 1.08rem; margin: 0 0 0.3rem; }
.menu-item p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
/* Reviews */
.review-card { background: #fff; border-radius: var(--radius); padding: 1.5rem; text-align: left; color: var(--ink); }
.review-stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 0.5rem; }
.review-quote { font-size: 1rem; margin: 0 0 1rem; }
.review-name { font-weight: 700; margin: 0; }
.review-src { color: var(--ink-soft); font-size: 0.85rem; font-weight: 400; }
/* Locations strip */
/* 3.4 — quick-service pills, directly under the RN / provider / HIPAA line.
   Round and app-like, charcoal outline on a cream fill, deliberately NOT pink so
   they never compete with Book Now. One row where it fits; scrolls where it
   does not. */
.svc-pills { background: var(--bg); border-bottom: 1px solid var(--line); }
.svc-pills-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.9rem 0;
  justify-content: center; }
.svc-pills-row::-webkit-scrollbar { display: none; }
.svc-pill { flex: 0 0 auto; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.45rem 1rem; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  transition: background 0.15s ease, color 0.15s ease; }
.svc-pill:hover { background: var(--ink); color: #fff; }
/* Below 760px the nine services cannot fit one row, so this becomes the scroll
   fallback Josilyn accepted. justify-content stays flex-start: centring a row
   that overflows clips its first pill off the left edge with no way back. */
@media (max-width: 760px) {
  .svc-pills-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -ms-overflow-style: none; padding-inline: 0.15rem; }
  .svc-pill { font-size: 0.8rem; padding: 0.4rem 0.85rem; }
  .svc-pills-row { padding-right: 3rem; }
  /* 8 Oct: an arrow and a fade show there is more to swipe. JS hides both
     once the row reaches its end. */
  .svc-pills .container { position: relative; }
  .pills-more { position: absolute; right: 0; top: 0; bottom: 0; width: 3.4rem; border: 0;
    background: linear-gradient(90deg, rgba(254,254,254,0) 0%, var(--bg) 55%);
    display: flex; align-items: center; justify-content: flex-end; padding-right: 1rem; cursor: pointer; }
  .pills-more span { width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1.5px solid var(--ink);
    background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1rem; line-height: 1; }
  .pills-more[hidden] { display: none; }
}
@media (min-width: 761px) { .pills-more { display: none; } }

.states-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.25rem; }
.states-strip a { border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1.1rem; color: var(--ink); font-weight: 600; font-size: 0.92rem; background: #fff; }
.states-strip a:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 700px) { .menu-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .menu-grid { grid-template-columns: 1fr; } }

/* Video hero */
.hero-video { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,28,28,0.84) 0%, rgba(20,28,28,0.55) 52%, rgba(20,28,28,0.25) 100%); }
.hero-video-content { position: relative; z-index: 2; max-width: 640px; color: #fff; padding: 3.5rem 0; }
.hero-video-content .eyebrow { color: var(--accent); }
.hero-video-content h1 { color: #fff; }
.hero-video-content .lead { color: rgba(255, 255, 255, 0.9); max-width: 40ch; }

/* Video testimonials */
.vtestimonial { border-radius: var(--radius); overflow: hidden; background: #111; box-shadow: var(--shadow); }
.vtestimonial video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* Service hero (interior pages) */
.page-hero { background: var(--bg-deep); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.page-hero h1, .page-hero h2 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 52ch; font-size: 1.12rem; }
.page-hero .hero-actions { margin-top: 1.5rem; }

/* Sections */
.section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.section-tint { background: var(--bg-tint); }
.section-deep { background: var(--bg-deep); color: #fff; }
.section-deep h2, .section-deep h3 { color: #fff; }
.section-deep .muted { color: rgba(255,255,255,0.75); }
.section-head { max-width: 60ch; margin-bottom: 2rem; }
.text-center { text-align: center; }
.text-center .section-head { margin-left: auto; margin-right: auto; }

/* Grids + cards */
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 0.4rem; }
.card .card-link { font-weight: 600; display: inline-block; margin-top: 0.5rem; }
.card-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink-soft); }
/* 4.4 — three short beats replacing the old full-height "how it works" block.
   Compact by design: the long version still lives at /how-it-works/. */
.beats { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--line);
  padding-top: 1.75rem; counter-reset: beat; }
.beats li { counter-increment: beat; position: relative; padding-left: 2.4rem;
  color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
.beats li::before { content: counter(beat); position: absolute; left: 0; top: -0.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--cream);
  border: 1.5px solid var(--ink); color: var(--ink); font-weight: 700;
  font-size: 0.85rem; display: grid; place-items: center; }
.beats strong { color: var(--ink); display: block; }
@media (max-width: 760px) { .beats { grid-template-columns: 1fr; gap: 0.9rem; } }

/* 6.5 — Josilyn: too much space above the Clinical-Grade band. The section that
   follows it now opens tighter. */
.section + .section-tint { padding-top: clamp(2rem, 4vw, 3rem); }

.check-list { list-style: none; padding: 0; margin: 1rem 0; }
.check-list li { padding: 0.4rem 0 0.4rem 1.7rem; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* CTA band */
.cta-band { background: var(--brand); color: #fff; border-radius: calc(var(--radius) + 6px); padding: clamp(2rem, 4vw, 3rem); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .hero-actions { justify-content: center; }

/* Sticky text-or-call bar */
/* 7.4 — legal + safety. The 911 line is deliberately the loudest thing in the
   footer: bordered, full-opacity, larger than the rest. Copy is lifted verbatim
   from the live modwella.com footer. */
.footer-legal { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; }
.footer-emergency { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: baseline;
  border: 1.5px solid var(--action); border-radius: var(--radius);
  background: #fff; padding: 0.9rem 1.1rem; margin: 0 0 1.1rem; }
.footer-emergency strong { color: var(--ink); font-size: 1.05rem; }
.footer-emergency span { color: var(--ink); font-size: 0.95rem; }
.footer-disclaimer { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.65;
  margin: 0 0 0.9rem; max-width: 78ch; }
.footer-policies { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  list-style: none; margin: 0; padding: 0; }
.footer-policies a { color: var(--ink-soft); font-size: 0.84rem; }
.footer-policies a:hover { color: var(--ink); }

.callbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: none; gap: 1px; background: var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,0.08); }
.callbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.6rem; background: #fff; color: var(--ink); line-height: 1.2; }
.callbar-btn strong { color: var(--brand); }
.callbar-btn span { font-size: 0.72rem; color: var(--ink-soft); }
.callbar-btn--book { background: var(--action); }
.callbar-btn--book strong, .callbar-btn--book span { color: var(--action-ink); }

/* Footer */
/* No margin-top. The footer is cream and so is .section-tint, so a 2rem margin
   let 32px of the white body show through between them — a stray white stripe on
   every page whose last section is tinted, and invisible on the ones that end
   white. The 3rem top padding and the hairline border already do the separating. */
.footer { background: var(--bg-tint); border-top: 1px solid var(--line); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer h4, .footer-title { font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { color: var(--ink); }
.brand--footer { margin-bottom: 0.75rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.25rem; flex-wrap: wrap; gap: 0.5rem; }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 520px; }
.form label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.3rem; }
.form input, .form select, .form textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid var(--ink-soft); border-radius: 10px; font: inherit; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--brand); } /* ADA: visible focus, 10 Oct 2026 */

/* Responsive */
@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav-menu { position: fixed; inset: 68px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform 0.25s ease; padding: 1rem 1.25rem; }
  .nav-menu.open { transform: translateY(0); }
  .nav-menu ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .nav-menu .sub { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 0 1rem; }
  .nav-menu .has-sub:hover .sub { display: flex; }
  .nav-menu .mega { width: 100%; grid-template-columns: 1fr; }
  .nav-menu .has-mega:hover .mega { display: grid; }
  .mega-cta { border-radius: var(--radius); margin-top: 0.5rem; }
  .nav-phone { display: none; }
  .nav-toggle { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .callbar { display: flex; }
  body { padding-bottom: 62px; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4, .grid-2, .footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Centers & nurses. The draft banner is deliberately loud: an unfinished page
   is reachable for review, so it must be impossible to mistake for a live one.
--------------------------------------------------------------------------- */
.draft-banner{background:#fff4e0;border-bottom:1px solid #eda100;color:#5a4200;
  font-size:.875rem;padding:.7rem 0}
.draft-banner code{background:rgba(0,0,0,.06);padding:.05em .35em;border-radius:3px}
.draft-banner em{font-style:normal;font-weight:600}

.build-status{background:var(--surface-2,#f1f1ee);border:1px solid rgba(0,0,0,.08);
  border-radius:12px;padding:1rem 1.25rem;font-size:.9rem;line-height:1.55}
.build-status code{background:rgba(0,0,0,.06);padding:.05em .35em;border-radius:3px}

.flag-sample{color:#b06a00;font-weight:600}
.card-draft{opacity:.62}
.card-draft:hover{opacity:1}

.nurse-card{display:block}
.nurse-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;
  margin-bottom:.85rem;display:block}
.nurse-photo-empty{display:grid;place-items:center;background:var(--surface-2,#f1f1ee);
  color:rgba(0,0,0,.28);font-size:2.5rem;font-weight:700;letter-spacing:-.02em}
.nurse-photo-lg{aspect-ratio:4/5;object-fit:cover;font-size:4rem;margin-bottom:0}
.split-top{align-items:start}
.nurse-steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:step}
.nurse-steps li{position:relative;padding-left:3rem;counter-increment:step;line-height:1.55}
.nurse-steps li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:2rem;height:2rem;
  border-radius:50%;background:var(--ink);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.9rem}
.nurse-steps strong{display:block;margin-bottom:.15rem}
.nurse-faq{display:grid;gap:.75rem}
.nurse-faq details{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.9rem 1.1rem;background:#fff}
.nurse-faq summary{cursor:pointer;font-weight:600;list-style:none}
.nurse-faq summary::-webkit-details-marker{display:none}
.nurse-faq p{margin:.6rem 0 0;line-height:1.55}
.nurse-services{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.25rem}
.nurse-services a{text-decoration:none;color:inherit;border-bottom:1px solid rgba(0,0,0,.15)}
@media (max-width:640px){.nurse-services{grid-template-columns:1fr}}
.coverage-list{font-size:1.05rem;line-height:1.7}
.coverage-gap{background:#fff4e0;border-left:3px solid #eda100;padding:.85rem 1rem;
  border-radius:0 8px 8px 0;color:#5a4200}
.coverage-partial{background:#fff4e0;border-left:3px solid #eda100;padding:.7rem 1rem;
  border-radius:0 8px 8px 0;color:#5a4200;font-size:.9rem;margin-top:.75rem}
.coverage-source{font-size:.85rem;margin-top:1.1rem;max-width:60ch}
.flag-gap{color:#c62828;font-weight:600}

/* Modwella Favorites, three rows (Josilyn, 7 Oct 2026) */
.fav-stack { display: grid; gap: 2.5rem; }
.fav-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.25rem; align-items: center; }
.fav-row:nth-child(even) img { order: 2; }
.fav-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.fav-row h2 { margin-bottom: 0.3rem; }
.fav-lead { font-size: 1.1rem; color: var(--ink); margin: 0 0 0.5rem; }
.fav-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.fav-lists h3 { font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.75rem 0 0; }
.fav-lists .check-list { margin: 0.25rem 0; }
.fav-quote { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin: 0.35rem 0; }
@media (max-width: 820px) {
  .fav-row { grid-template-columns: 1fr; gap: 1rem; }
  .fav-row:nth-child(even) img { order: 0; }
}
@media (max-width: 480px) { .fav-lists { grid-template-columns: 1fr; } }
/* Revive IV landing page */
.ingredients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; }
.ingredients div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; }
.ingredients b { display: block; color: var(--ink); }
.ingredients span { font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 720px) { .ingredients { grid-template-columns: 1fr 1fr; } }

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

/* Team photo shows at its own 3:2 shape; the 4:3 hero-media crop cut people off. */
.hero-media img.team-photo { aspect-ratio: 3 / 2; height: auto; object-fit: cover; }

/* ---------------------------------------------------------------------------
   8 Oct 2026 website review (Brett + Josilyn). See CLAUDE.md session log.
--------------------------------------------------------------------------- */
.mega-party { margin: 0.45rem 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.mega-party a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.nav-menu .mega .mega-party a { display: inline; padding: 0; color: #fff; }

/* Starting-at price. The strike shows the first-visit 10% off. */
.price-from { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem;
  margin: 1rem 0 0; font-size: 1rem; }
.price-from s { opacity: 1; } /* full strength: 0.7 failed contrast (Lighthouse, 12 Oct) */
.price-from b { font-size: 1.15rem; }
.price-from small { font-size: 0.85rem; opacity: 0.85; width: 100%; }
.page-hero .price-from { color: #fff; }
.hero-sublink { display: inline-block; margin-top: 0.9rem; color: #fff; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
.hero-sublink:hover { color: var(--action); }

/* Social icons */
.social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0 0; padding: 0; list-style: none; }
.social-row a { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid currentColor; color: var(--ink); }
.social-row a:hover { background: var(--ink); color: #fff; }
.social-row svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.page-hero .social-row a { color: #fff; }
.page-hero .social-row a:hover { background: #fff; color: var(--ink); }

/* State map + service areas */
.area-map { width: 100%; max-width: 520px; margin: 0 auto; display: block; }
.area-map .land { fill: var(--cream); stroke: var(--ink); stroke-width: 1.5; }
.area-map .dot { fill: var(--action); stroke: var(--ink); stroke-width: 1.5; }
.area-map a:hover .dot, .area-map a:focus .dot { fill: var(--ink); }
.area-map text { font: 600 11px var(--font-sans); fill: var(--ink); paint-order: stroke; stroke: var(--cream); stroke-width: 3px; }
.area-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.area-list a { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.6rem 1rem; background: #fff; color: var(--ink); font-weight: 600; }
.area-list a:hover { border-color: var(--ink); }
.area-list a span { font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }

/* US map (nurse recruiting) */
.us-map { width: 100%; max-width: 760px; margin: 0 auto; display: block; }
.us-map path { fill: #ECEAE3; stroke: #fff; stroke-width: 1; }
.us-map path.on { fill: var(--action); stroke: var(--ink); stroke-width: 0.8; }
.us-map-legend { text-align: center; margin-top: 0.9rem; }

/* Group & Save cards on the two party services */
.party-band { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
@media (max-width: 640px) { .party-band { grid-template-columns: 1fr; } }

/* Header: "Book in 60 seconds" fits beside the logo on small phones. */
@media (max-width: 420px) {
  .brand-logo { height: 24px; }
  .nav-actions { gap: 0.5rem; }
  .nav-actions .btn-sm { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
}

/* About: founders (9 Oct 2026) */
.founders{list-style:none;padding:0;margin:0.5rem 0 0;display:flex;flex-wrap:wrap;gap:1.25rem 2rem}
.founders li{display:flex;flex-direction:column;gap:0.15rem}
.founders img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:0.4rem}
.founders span{font-size:0.9rem}
.team-figure{margin:0}
.team-figure img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.team-figure figcaption{margin-top:0.5rem;font-size:0.9rem}

/* Hormone quiz (9 Oct 2026). WCAG 2.1 AA: controls use --ink-soft borders
   (5.6:1, above the 3:1 non-text minimum), 44px targets, visible focus ring. */
.quiz-wrap { max-width: 760px; }
.quiz-h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.quiz-privacy { background: var(--bg-tint); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.quiz-privacy ul { margin: 0; padding-left: 1.2rem; }
.quiz-errors { border: 2px solid #A3271F; border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: #FFF6F5; }
.quiz-errors:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.quiz-errors a { color: #A3271F; text-decoration: underline; }
.quiz-section { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
.quiz-section > legend, .quiz-part { font-family: var(--font-display, inherit); font-size: 1.5rem; margin-bottom: 1rem; padding: 0; color: var(--ink); }
.quiz-step { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.2rem; }
.quiz-field { margin-bottom: 1.1rem; }
.quiz-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--ink); }
.quiz input[type="text"], .quiz input:not([type]), .quiz input[type="tel"], .quiz input[type="email"], .quiz input[type="date"] { width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 1.5px solid var(--ink-soft); border-radius: 10px; font: inherit; color: var(--ink); background: #fff; }
.quiz input:focus-visible, .quiz-opt input:focus-visible + span, .quiz-consent input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.quiz [aria-invalid="true"] { border-color: #A3271F; }
.quiz fieldset.quiz-q[aria-invalid="true"] { border-left: 4px solid #A3271F; padding-left: 0.9rem; }
.quiz-hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0.3rem 0 0; }
.quiz-err { font-size: 0.95rem; color: #A3271F; font-weight: 600; margin: 0.35rem 0 0; }
.quiz-q { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 1.1rem 0; }
.quiz-q legend { font-weight: 600; color: var(--ink); padding: 0; }
.quiz-num { color: var(--ink-soft); }
.quiz-scale { font-size: 0.9rem; color: var(--ink-soft); margin: 0.3rem 0 0.6rem; }
.quiz-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.quiz-opt { position: relative; }
.quiz-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.quiz-opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border: 1.5px solid var(--ink-soft); border-radius: 10px; font-weight: 600; color: var(--ink); background: #fff; }
.quiz-opt input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.quiz-consent { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.5rem; }
.quiz-consent input { width: 24px; height: 24px; margin-top: 0.15rem; flex: none; accent-color: var(--ink); }
.quiz-status { margin-top: 0.75rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .quiz * { transition: none !important; } }

/* State pages: text line per service area (10 Oct 2026) */
.text-lines{list-style:none;padding:0;margin:0.75rem 0 1.25rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0.5rem 1.5rem}
.text-lines li{display:flex;flex-direction:column}
.text-lines a{font-weight:600}

/* Cookie consent banner (10 Oct 2026). Sits above the mobile call bar. */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70; max-width: 640px; margin: 0 auto; background: #fff; color: var(--ink); border: 1.5px solid var(--ink-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.consent[hidden] { display: none; }
.consent-text { margin: 0; flex: 1 1 280px; font-size: 0.95rem; }
.consent-text a { text-decoration: underline; }
.consent-actions { display: flex; gap: 0.5rem; }
.consent-actions .btn { min-height: 44px; }
.consent button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (max-width: 900px) { .consent { bottom: 72px; } }
.consent-check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; }
.consent-check input { width: 22px; height: 22px; padding: 0; flex: none; margin-top: 0.15rem; accent-color: var(--ink); }
.consent-check label { font-weight: 400; }

/* Legal pages (10 Oct 2026) */
.legal-draft { background: #FFF6E5; border: 2px solid #8A5A00; color: #3D2800; border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; }
.post-body.legal ul { margin: 0 0 1.1rem; }
.post-body.legal li { margin-bottom: 0.4rem; color: var(--ink); }
.legal-updated { color: var(--ink-soft); font-size: 0.95rem; }
/* <picture> from the webp transform: lay out exactly like the bare <img>. */
picture { display: contents; }

/* Mobile menu icon becomes an X when open (10 Oct 2026) */
.nav-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* Regenerative compliance notice (Brett, 12 Oct 2026): body type matches the h1. */
.legal-notice { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.5rem); }
.legal-notice h2, .legal-notice p { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.15; margin: 0 0 0.4em; color: var(--ink); }
.legal-notice p { font-family: var(--font-sans); margin: 0; }

/* Registered mark: small and raised, never full size (12 Oct 2026). */
sup.reg { font-size: 0.5em; vertical-align: super; line-height: 0; margin-left: 0.05em; }

/* Links inside running text are underlined so they don't rely on colour alone
   (Lighthouse link-in-text-block, launch night 12 Oct 2026). */
main p a:not([class]), main li a:not([class]), main td a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }