/* ==========================================================================
   On Call Peds Care
   1 Tokens  2 Base  3 Layout  4 Type  5 Buttons  6 Header  7 Hero
   8 Sections/cards  9 Marquee  10 Slider  11 FAQ  12 Forms  13 CTA
   14 Blog  15 Footer  16 Utilities
   ========================================================================== */

/* 1 Tokens --------------------------------------------------------------- */
:root {
  --sage:      #96988a;
  --sage-deep: #6c6f60;
  --sage-dark: #4b4d42;
  --sage-tint: #e6e8e0;
  --sage-wash: #f2f3ee;

  --cream: #faf8f3;
  --sand:  #efe9df;
  --white: #ffffff;

  --ink:       #2b2c26;
  --ink-soft:  #5f6157;
  --ink-faint: #686a5f;   /* darkened: #8b8d82 failed AA on every surface */

  --line:  #ddded6;

  /* Blush, taken straight off the logo mark (#d6b9ad, hue 18deg).
     Three steps so the accent can be decorative, a fill, or real text.
     The base tone is far too light to carry text: decorative use only. */
  --blush:      #d6b9ad;
  --blush-tint: #f2e6e0;
  --blush-deep: #836154;
  --focus: #3c5a3a;
  --error: #a8433a;

  /* Didot is a system font on macOS and iOS only. Windows and Android fall
     back down this stack, so Playfair Display is loaded from Google Fonts as
     the cross-platform stand-in. Same high-contrast didone character. */
  --font-display: "Didot", "Didot LT STD", "Bodoni 72", "Bodoni MT",
                  "Playfair Display", "Hoefler Text", Garamond,
                  "Times New Roman", serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Nav sits slightly larger and heavier than other small type. */
  --nav-size: clamp(0.9rem, 0.87rem + 0.17vw, 0.99rem);

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.5rem);

  --wrap:        1180px;
  --wrap-narrow: 780px;
  --gutter:      clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 5.5vw, 5.75rem);   /* trimmed ~20%: long pages were reading slower than they are */

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(43,44,38,.05);
  --shadow:    0 8px 30px rgba(43,44,38,.07);
  --shadow-lg: 0 20px 60px rgba(43,44,38,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 2 Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* The closed mobile drawer is position:fixed off-screen to the right, which
     still extends the scrollable area and produced a horizontal scrollbar.
     Must be on html, not body: body's overflow does not clip a fixed child.
     clip rather than hidden, so the drawer's fixed positioning still works. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

::selection { background: var(--blush-tint); color: var(--ink); }

a { color: inherit; text-underline-offset: .2em; }

/* Prose links: a blush underline that thickens on hover, rather than the
   default browser rule. Applied only inside running copy. */
.prose a, .post__body a, .letter__body a, .provider__body a, .form__note a {
  color: var(--blush-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--blush) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .25s var(--ease), color .25s var(--ease);
  padding-bottom: .05em;
}
.prose a:hover, .post__body a:hover, .letter__body a:hover,
.provider__body a:hover, .form__note a:hover {
  background-size: 100% 3px;
  color: var(--ink);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

button { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: .75rem 1.25rem; background: var(--ink); color: var(--cream); text-decoration: none;
}
.skip-link:focus { left: 0; }

.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;
}

/* Honeypot.
   display:none, NOT off-screen positioning. Chrome autofills fields that are
   merely positioned off-screen, which silently flagged real parents as bots.
   It skips display:none fields. The field name must also avoid anything the
   browser recognises: "company" maps to the organization autofill token. */
.hp { display: none !important; }

/* 3 Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tint { background: var(--sage-wash); }
.section--sand { background: var(--sand); }

/* 4 Type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400; line-height: 1.14; letter-spacing: .002em;
  margin: 0 0 .5em; text-wrap: balance;
}
/* Didot's thin strokes disappear under default smoothing on light grounds. */
h1, h2, h3, h4, .review__text, .door__title {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dark);
  margin: 0 0 .9rem;
}
/* A blush hairline before every eyebrow. Small, repeated, and the main way
   the logo colour threads through the site without shouting. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.9rem; height: 1px;
  margin-right: .75rem;
  background: var(--blush);
  vertical-align: middle;
}
.hero .eyebrow::before,
.door__label::before { background: color-mix(in srgb, var(--blush) 85%, white); }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }

.section__intro {
  max-width: 62ch; color: var(--ink-soft);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.center { text-align: center; }
.center .section__intro { margin-inline: auto; }

/* 5 Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.9rem;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--sage-deep); color: var(--cream); }
.btn--primary:hover { background: var(--sage-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--sage-deep); background: var(--white); }
.btn--sm { padding: .7rem 1.4rem; font-size: .78rem; }
.btn.is-loading { opacity: .6; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--sage-deep);
}
.link-arrow::after {
  content: ""; width: 1.1rem; height: 1px; background: currentColor;
  transition: width .25s var(--ease);
}
.link-arrow:hover::after { width: 1.9rem; }

/* 6 Header --------------------------------------------------------------- */
.topbar { background: var(--sage-deep); color: var(--cream); font-size: var(--step--1); }
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; min-height: 2.15rem;
}
.topbar__msg { margin: 0; letter-spacing: .04em; }

/* A hairline between the message and the number. Without it the two sat in
   isolation with a wide void between them; the rule ties them into one line
   and lets the spacing come down. */
.topbar__link {
  padding-left: .7rem;
  border-left: 1px solid color-mix(in srgb, var(--cream) 35%, transparent);
  text-decoration: none; font-weight: 600;
}
.topbar__link:hover { text-decoration: underline; }

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--cream) 96%, transparent);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.25rem;
}

/* The logo is a stacked lockup, so it has to be constrained by HEIGHT.
   Sizing it by width let a tall mark overflow the bar. Capping the height
   guarantees clear space above and below at any bar height. */
.header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-block: .5rem;
  line-height: 0;
}
.header__logo img {
  height: clamp(36px, 3.4vw, 46px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

.nav__list {
  display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  position: relative; display: inline-block; padding-block: .4rem;
  font-size: var(--nav-size); font-weight: 600; letter-spacing: .035em;
  text-decoration: none; white-space: nowrap; color: var(--ink);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--sage-deep);
  transition: width .25s var(--ease);
}
.nav__link:hover::after, .nav__link.is-current::after { width: 100%; }
.nav__link.is-current { color: var(--sage-deep); }

.nav__cta { display: none; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 24px; height: 2px; margin-inline: auto; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 99; background: rgba(43,44,38,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}

@media (max-width: 1060px) {
  .header__cta { display: none; }
  .nav-toggle { display: flex; }

  /* The drawer is position:fixed and lives inside .header. A backdrop-filter
     on an ancestor makes that ancestor the containing block for fixed
     children, so the drawer was being sized against the 69px header instead
     of the viewport and appeared clipped to a sliver. Dropping the blur at
     drawer widths restores the viewport as the containing block. The header
     background is made opaque here so it still reads over scrolled content. */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header, .header.is-stuck { background: var(--cream); }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 84vw);
    padding: 6.5rem 2rem 2rem; background: var(--cream);
    border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s;
    overflow-y: auto; z-index: 101;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item + .nav__item { border-top: 1px solid var(--line); }
  .nav__link { display: block; padding: 1rem 0; font-size: var(--step-1); }
  .nav__link::after { display: none; }
  .nav__cta { display: block; margin-top: 2rem; }
  .nav__cta .btn { width: 100%; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 620px) {
  /* The message is the point of this bar, so it stays at every width.
     The row wraps and centres instead of hiding half its content. */
  .topbar__inner { flex-wrap: wrap; justify-content: center; gap: .1rem .7rem; text-align: center; }
  .topbar { font-size: .8rem; }
  .topbar__msg { display: block; }
  /* Once the row wraps, a left rule would float under the message. */
  .topbar__link { padding-left: 0; border-left: 0; }
}

/* 7 Hero ----------------------------------------------------------------- */
.hero {
  position: relative; display: grid; place-items: center;
  min-height: clamp(520px, 74vh, 780px);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  isolation: isolate; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media picture { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43,44,38,.44), rgba(43,44,38,.58));
}
/* Two doors. Equal weight, so neither reads as the consolation prize. */
/* The page statement, above the doors. The H1 used to live inside the first
   door, which meant the page never said what the business was. */
.hero__intro {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--cream) 62%, transparent);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  border-radius: var(--radius);
  text-align: center;
}
.hero__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
}
.hero__lede {
  max-width: 60ch;
  margin: 0 auto;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
}

.hero__doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
  width: 100%;
  text-align: left;
}

/* Three doors, declared AFTER the base rule because both are single-class
   selectors and source order decides. The third door is the nationwide
   product, which has no other route in from the homepage. */
.hero__doors--three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1080px) {
  .hero__doors--three { grid-template-columns: repeat(2, 1fr); }
  .hero__doors--three .door:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero__doors--three { grid-template-columns: 1fr; }
  .hero__doors--three .door:last-child { grid-column: auto; }
}

.door {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  /* Half opaque, so the hero photograph reads through the panel. The heavy
     blur is what keeps the text legible at this transparency: it flattens
     the detail behind the panel without hiding the image. */
  background: color-mix(in srgb, var(--cream) 50%, transparent);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.door:hover {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--cream) 62%, transparent);
}

.door--alt {
  /* A dark translucent panel converges toward the photo's own mid tones, so
     it needs more coverage than the cream one to keep light text readable.
     Measured: at 50% the body copy only reached 3.2:1, at 68% it clears AA. */
  background: color-mix(in srgb, var(--sage-dark) 50%, transparent);
  border-color: color-mix(in srgb, var(--white) 22%, transparent);
  color: var(--cream);
}
.door--alt:hover { background: color-mix(in srgb, var(--sage-dark) 78%, transparent); }

/* Without backdrop-filter the panel is just a translucent wash over photo
   detail, which is not readable. Those browsers get the opaque version. */
@supports not (backdrop-filter: blur(1px)) {
  .door      { background: color-mix(in srgb, var(--cream) 92%, transparent); }
  .door--alt { background: color-mix(in srgb, var(--sage-dark) 94%, transparent); }
}

.door__label {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.door--alt .door__label { color: var(--cream); }

.door__title {
  margin: 0 0 .45em;
  /* Was var(--step-3), which caps at 2.6rem and reads a little large on a wide
     screen. Same clamp shape and the same 1.75rem floor, so mobile is
     unchanged; only the desktop ceiling comes down. Set here rather than by
     editing --step-3, which is used elsewhere. */
  font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.2rem);
  line-height: 1.12;
}
.door--alt .door__title { color: var(--cream); }

.door__text {
  margin: 0 0 1rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.door--alt .door__text { color: var(--cream); }

.door__meta {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-size: var(--step--1);
  color: var(--ink);
}
.door--alt .door__meta {
  border-top-color: color-mix(in srgb, var(--cream) 38%, transparent);
  /* Full white, not tinted cream: this is the lowest-contrast line on the
     panel, and a bright hero photo lightens the panel underneath it. */
  color: var(--white);
  font-weight: 500;
}

/* Buttons sit on a shared baseline even when the copy runs different lengths. */
/* margin-top:auto was declared and then immediately overridden by a fixed
   value on the same line, so it never applied and the buttons sat at whatever
   height the content above them ended. The auto pushes each button to the
   bottom of its door; the padding keeps a minimum gap when content is short. */
.door__btn { align-self: flex-start; margin-top: auto; }
.door__meta { margin-bottom: 1.75rem; }
.door--alt .btn--light { background: var(--cream); color: var(--sage-dark); }
.door--alt .btn--light:hover { background: var(--white); }

@media (max-width: 860px) {
  /* Both doors need to be reachable without a scroll hunt, so the panels
     tighten up rather than each filling the viewport. */
  .hero { min-height: auto; padding-block: clamp(1.75rem, 6vw, 3rem); }
  .hero__doors { grid-template-columns: 1fr; gap: .85rem; }
  .door { padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--radius); }
  .door__label { margin-bottom: .6rem; }
  .door__title { font-size: var(--step-2); }
  .door__text { font-size: var(--step-0); margin-bottom: 0; }
  .door__meta { display: none; }
  .door__btn { margin-top: 1.25rem; }
}

.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.section--pillars { background: var(--sage-wash); border-bottom: 1px solid var(--line); padding-block: 0; }
.pillar__title { margin-bottom: .35em; font-size: var(--step-1); }
.pillar__text { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; }

/* 8 Sections and cards --------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(2rem, 6vw, 5rem);
}
.split--reverse .split__media { order: 2; }
.split__media img, .split__media picture { border-radius: var(--radius-lg); }
.split__media img { box-shadow: var(--shadow); width: 100%; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a single
   related article stretched across the full page width and looked enormous.
   auto-fill keeps the tracks, so one card is card-sized. */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blush); }
.card__media { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--sage-tint); }
.card__media img, .card__media picture { width: 100%; height: 100%; }
.card__media img { object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 3vw, 1.9rem); }
.card__title { margin-bottom: .5em; font-size: var(--step-1); }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--sage-deep); }
.card__text { flex: 1; margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; }
.card__foot { margin: 1.4rem 0 0; }

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  border-top: 1px solid var(--line);
}
.feature {
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.feature:last-child { border-right: 0; }
.feature__title { margin-bottom: .5em; font-size: var(--step-1); }
.feature__text { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; }

@media (max-width: 860px) { .feature { border-right: 0; } }

/* 8b Why choose us ------------------------------------------------------- */
.section--why { background: var(--white); }

.why {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.why__title { margin-bottom: .35em; font-size: var(--step-3); }
.why__lede { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); font-size: var(--step-1); color: var(--ink-soft); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.why-item__icon {
  width: 40px; height: 40px;
  margin-bottom: 1.1rem;
  color: var(--sage);
}
.why-item__title { margin-bottom: .5em; font-size: var(--step-1); }
.why-item__text { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.75; }

.why__media img, .why__media picture { border-radius: var(--radius); width: 100%; }
.why__media img { object-fit: cover; box-shadow: var(--shadow); }

@media (max-width: 940px) {
  .why { grid-template-columns: 1fr; }
  .why__media { order: -1; }
  /* No max-height: it cropped the picture on narrow screens. The image
     now scales down whole and keeps its full composition.
     justify-self rather than auto margins, and an explicit width, so the
     block cannot collapse to zero if an image ever fails to load. */
  .why__media { width: 100%; max-width: 520px; justify-self: center; }
}
@media (max-width: 520px) {
  .why__grid { grid-template-columns: 1fr; }
}

/* Service cards: arch-topped media, tying them to the portraits and the
   benefit tiles. Blog cards stay rectangular on purpose, so the motif
   stays a brand signal rather than becoming wallpaper. */
.card--arch { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.card--arch:hover { transform: none; box-shadow: none; border: 0; }

.card--arch .card__media {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: 999px 999px var(--radius) var(--radius)
              / 42% 42% var(--radius) var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.card--arch:hover .card__media { border-color: var(--blush); }
.card--arch:hover .card__media img { transform: scale(1.04); }

.card--arch .card__body { padding: 1.4rem 0 0; text-align: center; }
.card--arch .card__title { font-size: var(--step-1); }
.card--arch .card__text { max-width: 34ch; margin-inline: auto; }
.card--arch .card__foot { margin-top: 1rem; }

/* No mobile aspect-ratio override on purpose. The card keeps its 4/5 crop
   at every width, so the photograph is composed once and never recropped
   by the device. The arch radius uses a percentage for its vertical half,
   so the curve scales with the image instead of flattening. */

/* 9 Marquee -------------------------------------------------------------- */
.marquee {
  padding-block: clamp(1rem, 2vw, 1.6rem);
  background: var(--sage-deep); color: var(--cream);
  overflow: hidden; white-space: nowrap;
}
.marquee__track {
  display: inline-flex; gap: 2.5rem; padding-right: 2.5rem;
  animation: marquee 45s linear infinite; will-change: transform;
}
.marquee__item { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: .02em; }
.marquee__item::after { content: "\2726"; margin-left: 2.5rem; opacity: .55; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 10 Reviews carousel ---------------------------------------------------- */
.reviews-section {
  position: relative;
  /* Tighter than the global section rhythm: this block is a single quote,
     not a full section of content, so it does not need the same air. */
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  background: var(--sand);
  overflow: hidden;
  text-align: center;
}

/* Decorative sprigs, kept faint so they never compete with the quote. */
.reviews-section__ornament {
  position: absolute;
  width: clamp(110px, 13vw, 190px);
  height: auto;
  color: var(--blush);
  opacity: .55;
  pointer-events: none;
}
.reviews-section__ornament--tl { top: -1rem; left: -2rem; }
.reviews-section__ornament--br { bottom: -1rem; right: -2rem; }

@media (max-width: 720px) {
  .reviews-section__ornament { width: 120px; opacity: .4; }
}

.reviews-section__eyebrow { margin-bottom: .55rem; }
.reviews-section__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--step-3);
}

/* Arrows sit outside the quote column on desktop and tuck in on small screens. */
.reviews {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 3vw, 2.5rem);
  max-width: 54rem;
  margin-inline: auto;
}

.reviews__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews__track::-webkit-scrollbar { display: none; }

.reviews .slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-inline: clamp(.5rem, 2vw, 1.5rem);
}

.review__stars { display: flex; gap: .3rem; margin-bottom: clamp(.9rem, 1.8vw, 1.35rem); }
.review__star { width: 17px; height: 17px; color: var(--blush-deep); }

.review__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .98rem + .55vw, 1.5rem);
  line-height: 1.45;
  color: var(--sage-dark);
  text-wrap: balance;
  /* Wider measure at the smaller size keeps the quote to a few lines
     instead of a tall column. */
  max-width: 46ch;
}
.review__text p { margin: 0; }

.review__by { margin-top: clamp(1rem, 2vw, 1.5rem); }
.review__name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
}
.review__role {
  display: block;
  margin-top: .2rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.reviews__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: color-mix(in srgb, var(--white) 55%, transparent);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.reviews__arrow:hover {
  background: var(--white);
  border-color: var(--sage-deep);
  color: var(--sage-dark);
}
.reviews__arrow svg { width: 17px; height: 17px; }

.reviews__dots {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: clamp(1.35rem, 2.5vw, 2rem);
}

/* Shared dot styling, also used by any future slider. */
.slider__dots { display: flex; gap: .55rem; }
.slider__dot {
  width: 9px; height: 9px;
  padding: 0;
  background: color-mix(in srgb, var(--sage-deep) 30%, transparent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.slider__dot:hover { background: color-mix(in srgb, var(--sage-deep) 55%, transparent); }
.slider__dot.is-active { background: var(--blush-deep); transform: scale(1.15); }

@media (max-width: 700px) {
  .reviews { grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem; }
  .reviews__arrow { width: 40px; height: 40px; }
  .reviews__arrow svg { width: 16px; height: 16px; }
  .review__text { max-width: none; }
}

/* 11 FAQ ----------------------------------------------------------------- */
.section--faq { background: var(--sage-wash); }
.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; font-family: var(--font-display); font-size: var(--step-1);
  line-height: 1.35; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--sage-deep); }
.faq__icon {
  flex: 0 0 auto; width: 20px; height: 20px; color: var(--sage-deep);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { padding-bottom: 1.5rem; max-width: 68ch; }
.faq__a p { margin: 0; color: var(--ink-soft); }

/* 12 Forms --------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.15rem;
}
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; color: var(--ink-soft);
}
.field__label .req { color: var(--sage-deep); }
.field__input, .field__select, .field__textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--step-0); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input:focus, .field__select:focus, .field__textarea:focus {
  border-color: var(--sage-deep); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 30%, transparent);
}
.field__textarea { min-height: 9rem; resize: vertical; }
.field__input[aria-invalid="true"], .field__textarea[aria-invalid="true"] { border-color: var(--error); }
.field__hint { font-size: var(--step--1); color: var(--ink-faint); }

.form__status { min-height: 1.4rem; margin: 0; font-size: var(--step--1); }
.form__status.is-error { color: var(--error); }
.form__status.is-success { color: var(--sage-dark); font-weight: 600; }

.subscribe__row { display: flex; gap: .5rem; }
.subscribe__input {
  flex: 1; min-width: 0; padding: .7rem .9rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--step--1);
}

.form-panel {
  padding: clamp(1.75rem, 4vw, 3rem); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-list__label {
  display: block; margin-bottom: .2rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.contact-list a { font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; }
.contact-list a:hover { color: var(--sage-deep); }

/* 12b Inquiry page ------------------------------------------------------- */
.section--flush { padding-block: clamp(2.5rem, 5vw, 4rem); }

.inquire {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: start;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.inquire__aside { display: grid; gap: 1rem; position: sticky; top: 6.5rem; }

.panel {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--sage-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel--quiet { background: var(--white); }
.panel__title { margin: 0 0 1.1rem; font-size: var(--step-1); }

.panel__label {
  margin: 1.25rem 0 .2rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.panel__label:first-child { margin-top: 0; }
.panel__line { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.panel__phone { font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; }
.panel__phone:hover { color: var(--sage-deep); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: step; }
.steps__item {
  display: grid; grid-template-columns: 30px 1fr; gap: .85rem; align-items: start;
  font-size: var(--step--1); line-height: 1.65; color: var(--ink-soft);
}
.steps__num {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--white); border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--font-display); font-size: var(--step--1); color: var(--sage-dark);
}
.steps__item strong { color: var(--ink); font-weight: 600; }

.inquire__form {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.fieldset { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); padding: 0; border: 0; }
.fieldset:last-of-type { margin-bottom: 1.5rem; }
.fieldset__legend {
  width: 100%;
  margin-bottom: 1.25rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}

/* Option rows read as tappable cards rather than bare checkboxes. */
.opts { display: grid; gap: .55rem; }
/* Wraps to as many per row as will fit rather than forcing one column,
   which made the careers form roughly twice as tall as it needed to be. */
.opts--inline {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .55rem;
}

.opt {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .95rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt:hover { border-color: var(--sage); background: var(--white); }
.opt input { accent-color: var(--sage-deep); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }
.opt:has(input:checked) { border-color: var(--sage-deep); background: var(--sage-wash); }
.opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.opt-group { margin-bottom: 1.35rem; }
.opt-group:last-child { margin-bottom: 0; }
.opt-group__title {
  margin: 0 0 .6rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .04em; color: var(--ink);
}
.opt-group__tag {
  display: inline-block; margin-left: .4rem;
  padding: .12rem .5rem;
  background: var(--sand); border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

.form__submit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.form__note { margin: 0; font-size: var(--step--1); color: var(--ink-faint); }

/* Consent and emergency copy. Legible, not buried, but visually quieter
   than the form fields themselves. */
.form__consent {
  margin: 0 0 1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--blush);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.form__consent strong { color: var(--ink); }
.form__consent + .form__submit { margin-top: .5rem; }

@media (max-width: 940px) {
  .inquire { grid-template-columns: 1fr; }
  .inquire__aside { position: static; }
}
@media (max-width: 420px) {
  .opts--inline { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
}

/* 12c About page: founder letter ----------------------------------------- */
.page-head--about { background: var(--cream); border-bottom: 0; padding-bottom: 0; }

.letter-section { padding-top: clamp(2.5rem, 5vw, 4rem); }

.letter {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.letter__media { position: sticky; top: 7rem; }

/* Arched portrait: the one strong shape on the page, borrowed from the
   language of spa and wellness branding rather than a plain rectangle. */
.portrait {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.portrait img, .portrait picture {
  width: 100%;
  border-radius: 999px 999px var(--radius) var(--radius) / 46% 46% var(--radius) var(--radius);
}
.portrait img { display: block; object-fit: cover; }

.credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  text-align: center;
}
.credential__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.1;
  color: var(--sage-dark);
}
.credential__label {
  display: block;
  margin-top: .3rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.letter__body {
  max-width: 62ch;
  font-size: var(--step-0);
  line-height: 1.85;
  color: var(--ink-soft);
}
.letter__body p { margin: 0 0 1.35em; }

/* Drop cap sets the letter apart from ordinary body copy. */
.letter__open::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: .78;
  color: var(--blush-deep);
}

.handle {
  font-family: var(--font-display);
  font-size: 1.06em;
  color: var(--sage-dark);
  white-space: nowrap;
}

.letter__beliefs {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: clamp(1.5rem, 3vw, 2.15rem) 0;
  border-top: 1px solid var(--blush);
  border-bottom: 1px solid var(--blush);
}
.letter__beliefs p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--sage-dark);
}

.letter__close {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}

.signature {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.signature__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}
.signature__role {
  display: block;
  margin-top: .15rem;
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--ink-faint);
}

@media (max-width: 940px) {
  .letter { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .letter__media { position: static; max-width: 460px; margin-inline: auto; }
  .letter__body { max-width: none; }
}
@media (max-width: 420px) {
  .credentials { grid-template-columns: 1fr; gap: 1rem; text-align: left; }
}

/* 12d Telehealth page ----------------------------------------------------- */
.btn-row--center { justify-content: center; }
.page-head--tele .btn-row { margin-top: 2rem; }

.plan-group { margin-top: clamp(2.5rem, 5vw, 4rem); }

.plan-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.plan-group__title { margin: 0; font-size: var(--step-2); }
.plan-group__badge {
  padding: .25rem .75rem;
  background: var(--sage-tint);
  border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sage-dark);
}
.plan-group__note--center {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.plan-group__note {
  margin: .85rem 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(1.15rem, 2.5vw, 1.85rem);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { border-color: var(--blush); box-shadow: var(--shadow); }

.plan__name { margin: 0 0 .35rem; font-size: var(--step-1); }
.plan__desc { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }

.plan__price {
  margin: 1.15rem 0 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem);
  line-height: 1;
  color: var(--sage-dark);
}
.plan__currency { font-size: .5em; vertical-align: .55em; margin-right: .1em; }

.plan__list { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.plan__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Hairline tick rather than a heavy bullet, to keep the list calm. */
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--sage-deep);
  border-bottom: 1.5px solid var(--sage-deep);
  transform: rotate(-45deg);
}

.plan__addon {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.plan__btn { align-self: stretch; margin-top: 1.6rem; }

/* Benefits: arch-topped tiles, echoing the portrait shape used elsewhere
   so the page reads as one family rather than a pile of card patterns. */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Arch geometry.
   Horizontal 50% on each top corner means the two curves meet exactly at the
   centre, so the dome is correct at ANY width. Fixed px radii were being
   scaled down by the browser whenever they exceeded the element width, which
   is what made these look squeezed on narrow screens. */
.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50% 50% var(--radius) var(--radius)
              / 34% 34% var(--radius) var(--radius);
  text-align: center;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.benefit:hover { border-color: var(--blush); transform: translateY(-3px); }

/* The mark is a small arch in its own right, filled with sage tint. */
.benefit__mark {
  display: grid;
  place-items: center;
  width: 62px; height: 68px;
  margin-bottom: 1.35rem;
  background: var(--blush-tint);
  border: 1px solid color-mix(in srgb, var(--blush) 70%, transparent);
  border-radius: 62px 62px 10px 10px / 44px 44px 10px 10px;
  color: var(--sage-dark);
}
.benefit__icon { width: 26px; height: 26px; }

.benefit__title {
  margin-bottom: .5em;
  font-size: var(--step-1);
  line-height: 1.25;
}
.benefit__text {
  margin: 0;
  max-width: 32ch;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Numbered flow. The order is real information here, so it is shown. */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow__step { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.flow__num {
  display: block;
  margin-bottom: .85rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--sage);
}
.flow__title { margin-bottom: .5em; font-size: var(--step-1); }
.flow__text { margin: 0; font-size: var(--step--1); line-height: 1.7; color: var(--ink-soft); }

.limits__intro { color: var(--ink-soft); }
.limits__lead { margin: 1.75rem 0 .85rem; font-weight: 700; color: var(--ink); }

.limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: .55rem 2rem;
  margin: 0 0 2rem; padding: 0;
  list-style: none;
}
.limits__item {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}
.limits__item::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1.5px;
  background: var(--ink-faint);
}

/* Emergency guidance. Distinct enough to be unmissable, calm enough
   not to read as an alarm on a page parents visit while worried. */
.notice {
  margin: 0;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  background: var(--white);
  border: 1px solid var(--sage-deep);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
}

.provider {
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.provider--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); }
.provider--reverse .provider__media { order: 2; }

.portrait--sm img, .portrait--sm picture { border-radius: 999px 999px var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); }

.provider__name { margin-bottom: .25rem; font-size: var(--step-2); }
.provider__role {
  margin: 0 0 1.35rem;
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.provider__body { color: var(--ink-soft); line-height: 1.8; }
.provider__body p { margin: 0 0 1.15em; }
.provider__lead { color: var(--ink); font-weight: 600; }

.ticks { margin: 0 0 1.35em; padding: 0; list-style: none; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.5rem; font-size: var(--step--1); }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .4em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--sage-deep);
  border-bottom: 1.5px solid var(--sage-deep);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .provider, .provider--reverse { grid-template-columns: 1fr; }
  .provider--reverse .provider__media { order: 0; }
  .provider__media { max-width: 360px; margin-inline: auto; }

  /* Every other heading on this page centres on mobile; these two were the
     odd ones out because the flex row defaults to flex-start. */
  .plan-group__head { justify-content: center; text-align: center; }
  .plan-group__note { text-align: center; }
}

/* 12e Contact page -------------------------------------------------------- */
.methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.75rem, 3vw, 2.35rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50% 50% var(--radius) var(--radius)
              / 34% 34% var(--radius) var(--radius);
  text-align: center;
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.method:hover { border-color: var(--blush); transform: translateY(-3px); }

.method__mark {
  display: grid; place-items: center;
  width: 56px; height: 62px;
  margin-bottom: 1.15rem;
  background: var(--blush-tint);
  border: 1px solid color-mix(in srgb, var(--blush) 70%, transparent);
  border-radius: 56px 56px 10px 10px / 40px 40px 10px 10px;
  color: var(--sage-dark);
}
.method__mark svg { width: 24px; height: 24px; }

.method__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.method__value {
  margin-top: .4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--ink);
}
.method:hover .method__value { color: var(--sage-dark); }
.method__note {
  margin-top: .6rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}

.areas {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0; padding: 0; list-style: none;
}
.areas__item {
  padding: .28rem .7rem;
  background: var(--sage-wash);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--sage-dark);
}

/* 12f Service pages ------------------------------------------------------- */
.page-head--service { background: var(--cream); }
.page-head--service .btn-row { margin-top: 2rem; }

/* Facts and the at-a-glance answer sit side by side on desktop. */
.glance {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* Quick facts. Stacked rows beside the answer rather than a wide strip,
   so the two halves read as one block. */
.facts {
  display: grid;
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.fact {
  padding: clamp(.85rem, 1.6vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
}
.fact__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--sage-dark);
}
.fact__label {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .glance { grid-template-columns: 1fr; gap: 2rem; }
}

.covers__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Swipeable service cards. Same mechanism as the review carousel, styled to
   show several at once with the next one peeking so the swipe is discoverable. */
.covers {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
}

.covers__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: .5rem;
}
.covers__track::-webkit-scrollbar { display: none; }

.covers .slider__slide {
  flex: 0 0 clamp(240px, 30%, 340px);
  scroll-snap-align: start;
}
/* The last card aligns to the END of the track. With snap-align:start on
   every card, a free swipe to the end snapped back to the previous card's
   start, leaving the last one permanently clipped. */
.covers .slider__slide:last-child { scroll-snap-align: end; }

.cover {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.6rem, 3vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.cover:hover {
  border-color: var(--blush);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.cover__media {
  margin: calc(-1 * clamp(1.6rem, 3vw, 2.15rem));
  margin-bottom: 1.35rem;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.cover__media img { width: 100%; height: 100%; object-fit: cover; }

.cover__title { margin-bottom: .5em; font-size: var(--step-1); line-height: 1.25; }
.cover__text { margin: 0; font-size: var(--step--1); line-height: 1.75; color: var(--ink-soft); }

.covers__arrow { background: var(--white); }
.covers__dots { grid-column: 1 / -1; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

@media (max-width: 900px) {
  .covers { grid-template-columns: 1fr; }
  /* Arrows off on touch widths: the swipe is the interaction, and the dots
     still communicate position. */
  .covers__arrow { display: none; }
  .covers .slider__slide { flex-basis: min(76%, 320px); }
}

.pricing-note {
  max-width: 56ch;
  margin: 0 auto 1.75rem;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--ink-soft);
}

.areas--center { justify-content: center; margin-top: 1.5rem; }

/* Related links. The hub-and-spoke edges, deliberately prominent. */
/* Three across, so six cards form two complete rows. auto-fit could produce
   four in a row on a wide screen and leave two orphans below. */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.related__reading {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  text-align: center;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-soft);
}
.related__reading a {
  color: var(--blush-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--blush) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .25s var(--ease), color .25s var(--ease);
}
.related__reading a:hover { background-size: 100% 3px; color: var(--ink); }

@media (max-width: 940px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .related { grid-template-columns: 1fr; } }
.related__item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.related__item:hover { border-color: var(--blush); transform: translateY(-3px); }
.related__item--hub { background: var(--sage-wash); }

.related__kind {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blush-deep);
}
.related__title {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--ink);
}
.related__text {
  margin-top: .5rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (max-width: 940px) {
}

/* 12g Service page: pillar sections ---------------------------------------- */

/* At a glance. Written to be liftable as a featured snippet, so it is one
   question and one self-contained paragraph. */
.answer {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--sage-wash);
  border-left: 3px solid var(--blush);
  border-radius: var(--radius-sm);
}
.answer__q { margin: 0 0 .6em; font-size: var(--step-1); }
.answer__a { margin: 0; font-size: var(--step-0); line-height: 1.75; color: var(--ink-soft); }

/* Timeline.
   Horizontal on desktop, vertical on mobile. The connector is drawn per
   phase rather than as one long rule, so it always stops at the last node
   instead of trailing off the end. --tl-gap keeps the connector and the grid
   gap in sync. */
.timeline {
  --tl-gap: clamp(1.75rem, 4vw, 3.5rem);
  --tl-node: 13px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tl-gap);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.timeline__phase {
  position: relative;
  padding-top: calc(var(--tl-node) + 1.6rem);
}

.timeline__node {
  position: absolute;
  top: 0; left: 0;
  width: var(--tl-node); height: var(--tl-node);
  background: var(--cream);
  border: 2px solid var(--blush-deep);
  border-radius: 50%;
  z-index: 1;
}

/* Connector to the next node. Absent on the last phase. */
.timeline__phase:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--tl-node) / 2);
  left: var(--tl-node);
  width: calc(100% + var(--tl-gap) - var(--tl-node));
  height: 1px;
  background: color-mix(in srgb, var(--blush) 75%, transparent);
}

.timeline__title {
  margin-bottom: .8em;
  font-size: var(--step-1);
  color: var(--ink);
}
.timeline__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.timeline__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-soft);
}
.timeline__list li::before {
  content: "";
  position: absolute; left: 0; top: .78em;
  width: 5px; height: 5px;
  background: var(--blush);
  border-radius: 50%;
}

@media (max-width: 860px) {
  /* Vertical: the line runs down the left and the content sits beside it. */
  .timeline { grid-template-columns: 1fr; gap: 0; }

  .timeline__phase {
    padding-top: 0;
    padding-left: 2.15rem;
    padding-bottom: 2.25rem;
  }
  .timeline__phase:last-child { padding-bottom: 0; }

  .timeline__node { top: .3em; }

  .timeline__phase:not(:last-child)::after {
    top: calc(.3em + var(--tl-node));
    left: calc(var(--tl-node) / 2 - .5px);
    width: 1px;
    height: calc(100% - var(--tl-node) - .3em);
  }
}

/* Nurse screening.
   Heading beside the photo, then the rows in a grid below. A definition list
   rather than ticks or cards: the page already uses both, and this reads as a
   record rather than another feature grid. */
.vetting__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
/* One column when there is no photo. Removing the misleading image default
   left a dead second column beside the heading on pages without one. */
.vetting__head:not(:has(.vetting__media)) { grid-template-columns: 1fr; }
.vetting__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.vetting {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.75rem, 4vw, 3rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.vetting__row {
  padding: clamp(1rem, 2vw, 1.35rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

@media (max-width: 1000px) {
  .vetting { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .vetting__head { grid-template-columns: 1fr; }
  /* Capped: full width at a 4/3 ratio put a 480px photo above the heading. */
  .vetting__media { order: -1; max-width: 420px; margin-inline: auto; }
  .vetting { grid-template-columns: 1fr; }
}
.vetting__term {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--ink);
}
.vetting__desc {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Three-way "who to call". Our column is tinted and first; the referral
   columns stay neutral so the section reads as guidance, not as disclaimer. */
.routing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Two-column variant. The base rule is built for the three-way "who to call"
   block. With only two children the third track stays empty, which reads as
   a sizing bug, and the narrow columns force every list item onto three lines. */
.routing--pair { grid-template-columns: repeat(2, 1fr); }

/* The two-column pair reads better centered and capped, rather than stretched
   the full width of a wide container. */
.routing--pair { max-width: 62rem; margin-inline: auto; }

.legal__note--center { max-width: 62rem; margin-inline: auto; text-align: center; }
.routing__col {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.routing__col:first-child {
  background: var(--sage-wash);
  border-color: color-mix(in srgb, var(--sage) 40%, transparent);
}
.routing__title {
  margin: 0 0 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--ink);
}
.routing__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.routing__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.routing__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blush);
}
.routing__col:first-child .routing__list li::before { background: var(--sage-deep); }

@media (max-width: 860px) { .routing { grid-template-columns: 1fr; } }

/* "How it helps" grid. Distinct from the scope block below it and from the
   card slider above, so the page does not read as three grids in a row. */
.supports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.support { padding-top: 1.25rem; border-top: 1px solid var(--blush); }
.support__title { margin-bottom: .5em; font-size: var(--step-0); }
.support__text {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-soft);
}
.support__text a {
  color: var(--blush-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--blush) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .25s var(--ease), color .25s var(--ease);
}
.support__text a:hover { background-size: 100% 3px; color: var(--ink); }

.vetting__link { margin: 1rem 0 0; }

/* Team cards. Only ever a handful, so a centred flex row reads better than a
   grid that would leave a single card stranded on the left. */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.team__card {
  flex: 1 1 300px;
  max-width: 380px;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
/* Flex-centred rather than relying on text-align. The global rule sets
   img and picture to display:block, which ignores text-align on the parent
   and pins the photo to the left edge. Centring the wrapper handles both the
   bare <img> and the <picture> element that img() emits when a webp exists. */
.team__media { display: flex; justify-content: center; }

.team__media img {
  width: 120px; height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  margin-bottom: 1.15rem;
}
.team__name { margin: 0 0 .25rem; font-size: var(--step-1); }
.team__role {
  margin: 0 0 1.15rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blush-deep);
}
.team__facts {
  margin: 0 0 1.15rem; padding: 1.15rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid; gap: .6rem;
  text-align: left;
}
.team__facts li { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
.team__label {
  display: block;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.team__note {
  margin: 0;
  font-size: var(--step--1); line-height: 1.7; color: var(--ink-soft);
  text-align: left;
}
.team__more { margin: 1.15rem 0 0; }

.standards__cta { margin: clamp(2rem, 4vw, 2.75rem) 0 0; text-align: center; }

.team__scope {
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-soft);
}

.team__growing {
  max-width: 56ch;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  text-align: center;
  font-size: var(--step--1);
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Stacked variant of the numbered flow, for a short sequence in a narrow
   column where three across would be cramped. */
.flow--stack {
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
}
.flow--stack .flow__step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--blush);
}

/* Topic pills.
   Replaces the lettered card grid. The letters implied a sequence that does
   not exist, and twelve cards took a lot of vertical space for what is
   essentially a list you pick from. Pills read as selectable, compress to
   roughly a third of the height, and reflow at any width without breakpoints. */
.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0;
  max-width: 62rem;
  list-style: none;
}

.pills li {
  padding: .7rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.pills li:hover {
  background: var(--sage-wash);
  border-color: var(--blush);
}

@media (max-width: 560px) {
  .pills { gap: .5rem; }
  .pills li { padding: .6rem 1rem; font-size: .85rem; }
}

/* Topic menu.
   A dozen items in one narrow column reads as a cheap bullet list. Set as a
   panel of lettered cards across three columns it reads as a curriculum you
   choose from, which is what it actually is. The lettering implies breadth
   without implying a sequence the way numbers would. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.menu-grid__item {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--cream);
  transition: background .3s var(--ease);
}
.menu-grid__item:hover { background: var(--white); }

/* Outlined display letter, matching the numeral treatment on the timeline. */
.menu-grid__mark {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--blush-deep);
}

.menu-grid__text {
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

@media (max-width: 900px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-grid__item { padding-block: 1rem; }
}

/* "Who this helps". A quiet list, deliberately not the same tick treatment
   as the scope block that follows. */
.helps {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  max-width: 60ch;
  border-top: 1px solid var(--line);
}
.helps li {
  position: relative;
  padding: .8rem 0 .8rem 1.75rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-soft);
}
.helps li::before {
  content: "";
  position: absolute; left: 0; top: 1.3em;
  width: 11px; height: 1px;
  background: var(--blush-deep);
}

/* Scope: included vs not included, side by side.
   The included column is the persuasive half, so it carries the tinted
   background; the not-included column stays quiet and factual. */
.scope {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* stretch, not start: the not-included column runs longer because its rows
     carry notes, and a tinted panel ending mid-air looked unfinished. */
  align-items: stretch;
}

.scope__col {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.scope__col--in  { background: var(--sage-wash); border-color: color-mix(in srgb, var(--sage) 40%, transparent); }
.scope__col--out { background: var(--white); }

.scope__title {
  margin: 0 0 1.25rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  color: var(--ink);
}
.scope__col--in .scope__title { border-bottom-color: color-mix(in srgb, var(--sage) 40%, transparent); }

.scope__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }

.scope__item {
  position: relative;
  padding-left: 1.85rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Tick for included. */
.scope__item--yes::before {
  content: "";
  position: absolute; left: 0; top: .32em;
  width: 10px; height: 5px;
  border-left: 2px solid var(--sage-deep);
  border-bottom: 2px solid var(--sage-deep);
  transform: rotate(-45deg);
}

/* A short rule for not-included. Factual rather than a red cross, which
   would read as a warning on a page parents are already anxious on. */
.scope__item--no::before {
  content: "";
  position: absolute; left: 0; top: .68em;
  width: 11px; height: 1px;
  background: var(--ink-faint);
}

.scope__label { display: block; color: var(--ink); }

/* The routing line. Where a "no" is really "we do that another way". */
.scope__note {
  display: block;
  margin-top: .15rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.scope__note a {
  color: var(--blush-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--blush) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .25s var(--ease), color .25s var(--ease);
}
.scope__note a:hover { background-size: 100% 3px; color: var(--ink); }

/* Closing line under the not-included column. Carries the routing links that
   used to sit on individual rows, which keeps that column short. */
.scope__elsewhere {
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-soft);
}
.scope__elsewhere a {
  color: var(--blush-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--blush) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .25s var(--ease), color .25s var(--ease);
}
.scope__elsewhere a:hover { background-size: 100% 3px; color: var(--ink); }

@media (max-width: 760px) {
  .scope { grid-template-columns: 1fr; }
}

/* Clinical reviewer. The EEAT block for health-adjacent pages. */
.reviewer {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.reviewer__media img {
  width: 112px; height: 112px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.reviewer__label {
  margin: 0 0 .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blush-deep);
}
.reviewer__label--sub { margin-top: 1.5rem; color: var(--ink-faint); }
.reviewer__name {
  margin: 0 0 .5rem;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--ink);
}
.reviewer__bio { margin: 0 0 .6rem; font-size: var(--step--1); line-height: 1.7; color: var(--ink-soft); }
.reviewer__date { margin: 0 0 .9rem; font-size: var(--step--1); color: var(--ink-faint); }
.reviewer__note {
  margin: 0; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.65; color: var(--ink-soft);
}
.sources { margin: .6rem 0 0; padding-left: 1.15rem; display: grid; gap: .4rem; }
.sources li { font-size: .82rem; line-height: 1.6; }

@media (max-width: 560px) {
  .reviewer { grid-template-columns: 1fr; }
  .reviewer__media img { width: 88px; height: 88px; }
}

/* 12h Editorial treatments ------------------------------------------------ */

/* Full-bleed feature band with an overlaid pull quote. The visual break
   between dense sections, borrowed from magazine spreads. */
.feature {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 46vw, 540px);
  isolation: isolate;
  overflow: hidden;
}
.feature__media { position: absolute; inset: 0; z-index: -2; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43,44,38,.34), rgba(43,44,38,.52));
}

.feature__quote {
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  max-width: 30ch;
  text-align: center;
  color: var(--cream);
}
.feature__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem);
  line-height: 1.25;
  text-wrap: balance;
}
/* Open quote mark set above the text, not inline, so the measure stays even. */
.feature__quote p::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 2.4em;
  line-height: .5;
  margin-bottom: .28em;
  color: var(--blush);
}
.feature__by {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
}

/* Captioned image, small caps beneath the frame. */
.figure { margin: 0; }
.figure__caption {
  margin-top: .9rem;
  padding-left: .1rem;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Drop cap on the at-a-glance paragraph. */
.answer__a::first-letter {
  float: left;
  margin: .08em .14em 0 0;
  font-family: var(--font-display);
  font-size: 3.1em;
  line-height: .76;
  color: var(--blush-deep);
}

/* 12i Video-led posts ------------------------------------------------------ */

/* A 9:16 video in a wide container leaves huge empty sides, so the player is
   held to a natural phone width and the summary takes the rest. */
/* Sits inside the article's reading measure, so its left and right edges line
   up with the body copy below. Breaking it out to a wider container left the
   video hanging outside the text column and read as misaligned.
   align-items: start so the video and the hook share a top edge. */
.video-lede {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.video-lede__player { max-width: 300px; width: 100%; }

.video-embed {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sage-tint);
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* The hook. Sized to hold its own against a tall video rather than sit
   beside it as a caption. */
.video-lede__hook {
  margin: 0 0 clamp(1.35rem, 2.5vw, 1.75rem);
  padding-left: clamp(1rem, 2vw, 1.35rem);
  border-left: 3px solid var(--blush);
}
.video-lede__hook p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  line-height: 1.35;
  color: var(--sage-dark);
  text-wrap: balance;
}

.video-lede__label {
  margin: 0 0 .8rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.covers-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.covers-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}
.covers-list li::before {
  content: "";
  position: absolute; left: 0; top: .38em;
  width: 10px; height: 5px;
  border-left: 2px solid var(--sage-deep);
  border-bottom: 2px solid var(--sage-deep);
  transform: rotate(-45deg);
}
.video-lede__meta {
  margin: 1.35rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The video's conclusion in words, so the answer is on the page even if the
   visitor never presses play. */
.takeaway {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--sage-wash);
  border-left: 3px solid var(--blush);
  border-radius: var(--radius-sm);
}
.takeaway__label {
  margin: 0 0 .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blush-deep);
}
.takeaway__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--sage-dark);
}

/* A keepable checklist. Numbered, because the reader is working through it,
   and set on the tinted panel so it reads as a takeaway rather than body copy. */
.checklist {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--sage-wash);
  border-radius: var(--radius);
}
.checklist__title { margin: 0 0 1.15rem; font-size: var(--step-1); }
.checklist__list {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: check;
  display: grid;
  gap: .8rem;
}
.checklist__list li {
  counter-increment: check;
  position: relative;
  padding-left: 2.1rem;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}
.checklist__list li::before {
  content: counter(check, decimal-leading-zero);
  position: absolute; left: 0; top: .15em;
  font-family: var(--font-display);
  font-size: .85em;
  color: var(--blush-deep);
}
.checklist__note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .checklist__list { grid-template-columns: repeat(2, 1fr); gap: .8rem 2rem; }
}

/* What is normal / when to call.
   Side by side, because the reassurance and the escalation criteria are only
   useful together. Deliberately not red: a parent reading this is already
   worried, and a red panel reads as "you have a problem". */
.signals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.signals__panel {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.signals__panel--normal {
  background: var(--sage-wash);
  border-color: color-mix(in srgb, var(--sage) 40%, transparent);
}
.signals__panel--flags {
  background: var(--white);
  border-left: 3px solid var(--blush-deep);
}
.signals__title {
  margin: 0 0 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  color: var(--ink);
}
.signals__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.signals__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.signals__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage-deep);
}
.signals__panel--flags .signals__list li::before { background: var(--blush-deep); }
.signals__note {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Her sign-off line. Set apart because it is the emotional close, not body copy. */
.reassurance {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--sage-dark);
}

@media (max-width: 720px) {
  .signals { grid-template-columns: 1fr; }
}

/* Lead magnet. Sits mid-article at peak trust, styled as an offer rather
   than another CTA banner. */
/* CTA bar, replacing the email-capture magnet on blog posts.
   Same visual weight and placement as .magnet was, so the page rhythm is
   unchanged, but the right-hand column is a single button rather than a form.
   Stacks below 720 with the button full width, because a narrow two-column
   split left the button squeezed against the text. */
.cta-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--blush-tint);
  border-radius: var(--radius);
}

.cta-bar__eyebrow {
  margin: 0 0 .4rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blush-deep);
}

.cta-bar__title {
  margin: 0 0 .6rem;
  font-size: var(--step-1);
  line-height: 1.25;
}

.cta-bar__text {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}

.cta-bar__btn { white-space: nowrap; }

@media (max-width: 720px) {
  .cta-bar { grid-template-columns: 1fr; gap: 1.25rem; }
  .cta-bar__btn { width: 100%; text-align: center; white-space: normal; }
}

.magnet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--blush-tint);
  border-radius: var(--radius);
}
.magnet__label {
  margin: 0 0 .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blush-deep);
}
.magnet__title { margin: 0 0 .5em; font-size: var(--step-1); }
.magnet__text { margin: 0; font-size: var(--step--1); line-height: 1.65; color: var(--ink-soft); }

/* Stacked, not side by side. Sharing the row with the button squeezed the
   input to about 220px and truncated the placeholder mid-word. */
.magnet__row { display: grid; gap: .45rem; margin-top: .4rem; }
.magnet__row .field__label { margin-bottom: 0; }
.magnet__row .btn { margin-top: .25rem; }
.magnet__row .field__input { width: 100%; }
.magnet__row .btn { justify-self: stretch; text-align: center; }
.magnet__fine { margin: .8rem 0 0; font-size: .76rem; color: var(--ink-faint); }
.magnet__download { margin-top: .9rem; display: inline-block; }

/* One review, quieter than the carousel used on service pages. */
.mini-review {
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.mini-review__text p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--sage-dark);
  max-width: 44ch;
  margin-inline: auto;
}
.mini-review__by { margin-top: 1rem; }
.mini-review__name { font-weight: 700; font-size: var(--step--1); color: var(--ink); }
.mini-review__role { display: block; font-size: .78rem; color: var(--ink-faint); }

/* Ask Leslie. The lowest-commitment action on the page. */
.ask {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ask__title { margin: 0 0 .3em; font-size: var(--step-1); }
.ask__text { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }

/* Save to Pinterest.
   Recognisable enough to be found, quiet enough not to fight the page. The
   brand red is reserved for hover and focus, so the resting state sits inside
   the palette while the mark still reads as Pinterest. */
.pin-save { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; text-align: center; }

.pin-save__btn {
  --pin-red: #e60023;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.pin-save__icon {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--pin-red);
  transition: color .25s var(--ease);
}
.pin-save__btn:hover,
.pin-save__btn:focus-visible {
  background: var(--pin-red);
  border-color: var(--pin-red);
  color: #fff;
  transform: translateY(-2px);
}
.pin-save__btn:hover .pin-save__icon,
.pin-save__btn:focus-visible .pin-save__icon { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pin-save__btn:hover, .pin-save__btn:focus-visible { transform: none; }
}

@media (max-width: 700px) {
  .magnet { grid-template-columns: 1fr; }
  .ask { flex-direction: column; align-items: flex-start; }
}

/* Two paths for blog readers: nationwide first, because most people arriving
   from Pinterest or a long-tail search are not in Birmingham. */
.paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.path {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.path__badge {
  align-self: flex-start;
  padding: .25rem .75rem;
  background: var(--blush-tint);
  border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blush-deep);
}
.path__badge--local { background: var(--sage-wash); color: var(--sage-dark); }
.path__title { margin: 1rem 0 .5em; font-size: var(--step-1); }
.path__text {
  flex: 1; margin: 0;
  font-size: var(--step--1); line-height: 1.7; color: var(--ink-soft);
}
.path__btn { align-self: flex-start; margin-top: 1.5rem; }

@media (max-width: 700px) {
  .paths { grid-template-columns: 1fr; }
}

/* Sources and clinical review on a blog post. Quieter than the service-page
   reviewer block, since the author card already carries the credentials. */
.post-sources {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--sage-wash);
  border-radius: var(--radius-sm);
}
.post-sources__review { margin: 0 0 .9rem; font-size: var(--step--1); color: var(--ink); }
.post-sources__label {
  margin: 0 0 .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.post-sources__note {
  margin: 1rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-soft);
}

.post-faq { margin-top: clamp(2rem, 4vw, 3rem); }
.post-faq__heading { margin-bottom: 1rem; font-size: var(--step-1); }

/* The leading offer is visually dominant. Showing every path at equal weight
   left the reader to work out which one applied to them. */
.path--lead { border-color: var(--blush); box-shadow: var(--shadow); }

.pin-target { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.transcript {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.transcript__toggle {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blush-deep);
  list-style: none;
}
.transcript__toggle::-webkit-details-marker { display: none; }
.transcript__toggle::before { content: "+ "; }
.transcript[open] .transcript__toggle::before { content: "\2212 "; }
.transcript__body {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  line-height: 1.8;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .video-lede { grid-template-columns: 1fr; }
  .video-lede__player { max-width: 340px; margin-inline: auto; }
}

/* 13 CTA ----------------------------------------------------------------- */
.cta {
  position: relative; display: grid; place-items: center;
  min-height: clamp(400px, 55vh, 560px); isolation: isolate; overflow: hidden;
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img, .cta__media picture { width: 100%; height: 100%; }
.cta__media img { object-fit: cover; }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43,44,38,.32), rgba(43,44,38,.62));
}
.cta__panel { max-width: 44rem; padding: var(--gutter); text-align: center; color: var(--white); }
.cta__title { margin-bottom: .5em; }
.cta__text { margin: 0; color: color-mix(in srgb, var(--white) 92%, transparent); }
.cta .btn-row { justify-content: center; }
.cta .btn--ghost { color: var(--white); border-color: color-mix(in srgb, var(--white) 55%, transparent); }
.cta .btn--ghost:hover { background: var(--white); color: var(--ink); }

/* 14 Blog ---------------------------------------------------------------- */
.page-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--sage-wash); border-bottom: 1px solid var(--line); text-align: center;
}
.page-head__title { margin-bottom: .35em; }
.page-head__intro { max-width: 60ch; margin-inline: auto; color: var(--ink-soft); }

.breadcrumbs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  font-size: var(--step--1); color: var(--ink-faint);
}
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--sage-deep); }

.filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; list-style: none;
}
.filters a {
  display: inline-block; padding: .45rem 1.05rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--step--1); text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.filters a:hover { background: var(--white); border-color: var(--sage-deep); }
.filters a.is-active { background: var(--sage-dark); border-color: var(--sage-dark); color: var(--cream); }
.filters a:hover { border-color: var(--blush); }

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-bottom: .9rem; font-size: var(--step--1); color: var(--ink-faint);
}
.post-meta__cat {
  padding: .2rem .7rem; background: var(--blush-tint); border-radius: 999px;
  color: var(--blush-deep); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; font-size: .72rem; text-decoration: none;
}

.post { padding-block: clamp(2.5rem, 5vw, 4rem); }
.post__header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.post__title { margin-bottom: .45em; font-size: var(--step-3); }
.post__hero { margin-bottom: clamp(2rem, 4vw, 3rem); }
.post__hero img { width: 100%; border-radius: var(--radius); }

.post__body {
  font-size: clamp(1.02rem, .98rem + .22vw, 1.13rem);
  line-height: 1.8;
  color: var(--ink-soft);
}
.post__body > * + * { margin-top: 1.2em; }

/* Opening paragraph carries a little more weight, the way a magazine
   standfirst does, so the article has a clear entry point. */
.post__body > p:first-of-type {
  font-size: 1.12em;
  line-height: 1.65;
  color: var(--ink);
}

.post__body h2, .post__body h3 { color: var(--ink); }
.post__body h2 {
  margin-top: 2.1em;
  font-size: var(--step-2);
}
/* Blush rule above each h2, matching the eyebrow mark used site-wide. */
.post__body h2::before {
  content: "";
  display: block;
  width: 2.25rem; height: 1px;
  margin-bottom: 1rem;
  background: var(--blush);
}
.post__body h3 { margin-top: 1.85em; font-size: var(--step-1); }
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); }

/* Markers in blush rather than default browser bullets. */
.post__body ul { list-style: none; padding-left: 0; }
.post__body ul li { position: relative; padding-left: 1.5rem; }
.post__body ul li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 7px; height: 7px;
  background: var(--blush);
  border-radius: 50%;
}
.post__body ol { padding-left: 1.3rem; }
.post__body ol li::marker { color: var(--blush-deep); font-family: var(--font-display); }

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

/* Comparison tables are wider than a phone. Without this the overflow is
   clipped by html{overflow-x:clip} and columns silently disappear, which is
   worse than a scrollbar. Scrolls the table itself, not the page. */
@media (max-width: 720px) {
  .post__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
  }
  .post__body table th,
  .post__body table td { white-space: normal; min-width: 8.5rem; }
  .post__body table th:first-child,
  .post__body table td:first-child { min-width: 10rem; }
}
.post__body th, .post__body td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.post__body th {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--ink-faint);
}
.post__body ul, .post__body ol { padding-left: 1.35rem; }
.post__body li + li { margin-top: .5em; }
.post__body img { border-radius: var(--radius); }
.post__body a { color: var(--sage-dark); }
.post__body blockquote {
  margin: 2em 0; padding: 1.25rem 1.75rem;
  border-left: 3px solid var(--blush); background: var(--blush-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5;
}
.post__body blockquote p { margin: 0; color: var(--sage-dark); }
.post__body pre {
  padding: 1.25rem; background: var(--ink); color: var(--cream);
  border-radius: var(--radius-sm); overflow-x: auto; font-size: .9rem;
}
.post__figure { margin: 2em 0; }
.post__figure figcaption {
  margin-top: .6rem; font-size: var(--step--1); color: var(--ink-faint); text-align: center;
}
.post__footer { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.author {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
  text-align: left;
}
.author__media img {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.author__label {
  margin: 0 0 .25rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.author__name { margin: 0; font-family: var(--font-display); font-size: var(--step-1); }
.author__bio {
  margin: .5rem 0 0;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}
.author__links {
  display: flex; flex-wrap: wrap; gap: 1.15rem;
  margin: .9rem 0 0;
  font-size: .82rem;
}
.author__links a {
  color: var(--blush-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--blush) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .25s var(--ease);
}
.author__links a:hover { background-size: 100% 3px; }

@media (max-width: 520px) {
  .author { grid-template-columns: 1fr; }
  .author__media img { width: 72px; height: 72px; }
}

.pagination {
  display: flex; justify-content: center; align-items: center; gap: .5rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none;
}
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding-inline: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--step--1); text-decoration: none;
}
.pagination a:hover { border-color: var(--sage-deep); background: var(--white); }
.pagination .is-current { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--cream); }

.empty-state {
  padding: clamp(3rem, 6vw, 5rem); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft);
}

/* 15 Footer -------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--sage-dark);
  color: color-mix(in srgb, var(--cream) 85%, transparent);
  font-size: var(--step--1);
}
/* Blush hairline across the very top, the same accent used on eyebrows. */
.footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--blush) 25%, var(--blush) 75%, transparent);
  opacity: .55;
}
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr;
  gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand img { width: 170px; filter: brightness(0) invert(1); opacity: .92; }
.footer__blurb { margin: 1.25rem 0 0; line-height: 1.75; }
.footer__head {
  margin: 0 0 1.25rem; padding-bottom: .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  font-family: var(--font-body); font-size: .74rem;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--white);
}
.footer__head::before { content: none; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: var(--white); text-decoration: underline; }
.footer__areas { margin: 1.25rem 0 0; opacity: .75; line-height: 1.7; }

.social { display: flex; gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.social { gap: 1.25rem; }
.social a {
  text-decoration: none; opacity: .8;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.social a:hover { opacity: 1; color: var(--blush); }

.footer .subscribe__input { border-color: transparent; }
.footer .btn--primary { background: var(--cream); color: var(--sage-dark); }
.footer .btn--primary:hover { background: var(--white); }
.footer .form__status { color: color-mix(in srgb, var(--cream) 80%, transparent); }

.footer__bar { border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); font-size: .82rem; }
.footer__bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.4rem;
}
.footer__bar p { margin: 0; }
.footer__legal { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

/* 16 Utilities ----------------------------------------------------------- */
/* Scoped to .js, set by an inline script in head.php. With scripting blocked
   or main.js failing to load, the content simply shows instead of staying
   invisible forever. */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 2em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .4em; }

/* Legal pages: long, dense, and read under stress, so the type is set for
   scanning. Section headings get the blush rule used elsewhere on the site. */
.legal { color: var(--ink-soft); line-height: 1.85; }
.legal p { margin: 0 0 1.15em; }

.legal__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  margin-top: 2.4em;
  margin-bottom: .7em;
  font-size: var(--step-1);
  color: var(--ink);
}
.legal h2::before {
  content: "";
  display: block;
  width: 2.25rem; height: 1px;
  margin-bottom: 1rem;
  background: var(--blush);
}
.legal h2:first-of-type { margin-top: 2em; }
.legal strong { color: var(--ink); font-weight: 600; }

/* The 911 line sits inside running legal copy, so it needs to break out of
   the paragraph rhythm without shouting. Reuses the notice style from the
   telehealth page. */
.legal .notice { margin: 1.75em 0; }

.legal__cross {
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

@media print {
  .header, .topbar, .footer, .cta, .nav-toggle, .reviews__arrow, .reviews__dots { display: none; }
  body { background: #fff; color: #000; }
}