/* ==========================================================================
   AHS — single bundled stylesheet
   --------------------------------------------------------------------------
   One file rather than per-component sheets: pages use 10–13 of 18 components,
   so splitting would mean a different request set per page and no shared
   cache, against a 30-request budget.

   Budget: under 80KB total CSS on every page type.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens

   Colour and typeface values come from the AHS brand book (Figma, pages 11
   and 14). Brand values are quoted exactly; anything derived from them is
   marked as such.

   The type scale and spacing scale are still provisional — the brand book
   specifies typefaces and hierarchy but not a numeric scale, so these are
   measured from the page designs and will be corrected per component.

   Nothing outside this block contains a raw colour or size.
   -------------------------------------------------------------------------- */

/* Self-hosted variable fonts, latin subset, no third-party request.

   These are the families the page designs actually use, read from the Figma
   file: Manrope for headings and display numerals, Inter for everything else.
   The brand book specifies Michroma and Montserrat, which appear nowhere in
   the web designs. Raised with Sahar — the designs win, because exact
   replication is the requirement. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Applied palette — sampled from the service page designs at native
     resolution. These are what the build must match.

     The brand book palette and the page designs have diverged: the book
     specifies Primary Forest #022f31, Primary Green #0f8b5f and a blue
     #0d74ba, none of which appear in the designs in any quantity. The designs
     use #143d3d as the dark ground instead. Only Primary Orange #f38100 and
     the light neutral carry across unchanged. Raised with Sahar; the designs
     win until told otherwise, because exact replication is the requirement. */
  --c-forest:      #143d3d;  /* dark section ground */
  --c-forest-deep: #0a1f1f;  /* footer */
  --c-forest-card: #284d4d;  /* card surface on dark */
  --c-mist:        #e8efec;  /* page light ground */
  --c-mist-soft:   #f4f7f6;  /* alternate light */
  --c-white:       #ffffff;
  --c-orange:      #f38100;  /* Primary Orange — matches the brand book */
  --c-ink-deep:    #002929;  /* headings on light grounds */
  --c-muted:       #6b6b6b;  /* body copy on light grounds */

  /* Brand book values retained for reference, not currently applied. */
  --c-brand-green: #0f8b5f;
  --c-brand-blue:  #0d74ba;

  /* Roles. Forest is the dark ground and the heading colour; orange is the
     action and accent colour, which is how the designs use it. */
  --c-ink:          var(--c-forest);
  --c-surface:      var(--c-white);
  --c-surface-alt:  var(--c-mist);
  --c-surface-dark: var(--c-forest);
  --c-brand:        var(--c-orange);
  --c-accent:       var(--c-orange);

  /* Derived neutrals — forest desaturated, so greys sit in the palette's hue
     rather than reading as unrelated. Derived, not sampled. */
  --c-ink-soft:    #55696a;
  --c-ink-faint:   #8b9b9b;
  --c-rule:        #ccd8d4;
  --c-rule-dark:   #2d5252;
  --c-brand-dark:  #d97400;
  --c-on-dark:     #c3d3d1;
  --c-focus:       var(--c-orange);

  /* Type — as used in the designs. Manrope carries headings and display
     numerals; Inter carries body, labels and buttons. */
  --f-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --w-body:   400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;

  /* Sizes measured from the service page frames. */
  --t-2xs:  0.625rem;   /* 10px — micro labels        */
  --t-xs:   0.6875rem;  /* 11px — card sublabels      */
  --t-sm:   0.75rem;    /* 12px — pills               */
  --t-label:0.8125rem;  /* 13px — eyebrow, buttons    */
  --t-base: 0.875rem;   /* 14px — card labels         */
  --t-body: 1rem;       /* 16px — body copy           */
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;
  /* Fluid between 375px and the 1441px design width, then held. The vw
     coefficients are set so each lands on its designed value at exactly
     1441px: 3.05vw = 44px, 4.44vw = 64px, 5vw = 72px. They keep scaling above
     that so a 30-inch display gets proportionate type rather than the design
     size frozen in a much larger frame, and stop around 1760px. */
  --t-3xl:     clamp(1.75rem, 3.33vw, 3.75rem);   /* 28 -> 48px at 1441, 60px cap */
  --t-display: clamp(2.5rem,  4.44vw, 4.875rem);  /* 40 -> 64px at 1441, 78px cap */
  --t-h1:      clamp(2.25rem, 5vw,    5.5rem);    /* 36 -> 72px at 1441, 88px cap */

  --lh-h1:    1.05;     /* 75.6 / 72                  */
  --lh-tight: 1;
  --lh-head:  1.2;
  --lh-body:  1.625;    /* 26 / 16                    */

  --tr-h1:      -0.03em;  /* -2.16px at 72px          */
  --tr-display: -0.03em;  /* -1.92px at 64px          */

  /* Spacing — 4px base */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  /* Section rhythm scales with the viewport instead of snapping at a
     breakpoint. Each lands on its designed value at the 1441px frame:
     5.55vw = 80px, 6.66vw = 96px, 4.16vw = 60px. */
  --section-y:       clamp(3rem,   5.55vw, 5rem);   /* 48 -> 80px */
  --section-y-loose: clamp(3.5rem, 6.66vw, 6rem);   /* 56 -> 96px */
  --section-y-tight: clamp(2rem,   4.16vw, 3.75rem);/* 32 -> 60px */

  /* The frames are 1441px wide with 40px gutters and a 20px hero inset. Those
     insets are kept at every width and the content fills what is left, so a
     larger display gains content rather than margin. */
  --wrap:        100%;
  --wrap-narrow: 760px;
  --gutter:      clamp(1.25rem, 2.8vw, 2.5rem);
  --radius:      6px;
  --radius-lg:   14px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  line-height: var(--lh-head);
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}

h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: var(--w-semi); }
h2 { font-size: var(--t-3xl); letter-spacing: -0.02em; font-weight: var(--w-semi); }
h3 { font-size: var(--t-xl); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-brand); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Every image carries explicit width and height from the attachment metadata;
   this keeps them fluid without reintroducing layout shift. */
img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  background: var(--c-surface);
  color: var(--c-ink);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.skip-link:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.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--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }

/* Shared across every component: the orange marker and the eyebrow label above
   a section heading. Defined once rather than per component — components only
   override the colour where their ground demands it. */
/* The small circular arrow badge inside primary buttons. One box; each button
   only sets its fill.

   Matched precisely rather than on "-badge": a substring match also caught
   .hero__card-float--badge, the hero's rating card, and forced it to a 20px
   inline-flex circle — which is what collapsed it. */
[class*="cta-badge"],
.intro__callout-badge,
.statsbar__quote-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
}

[class*="__marker"] {
  flex: none;
  width: 32px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-orange);
}

/* Section headings. One rule; components override only where they deviate. */
[class*="__heading"] {
  margin: 16px 0 0;
  font-family: var(--f-head);
  font-size: var(--t-3xl);
  font-weight: var(--w-semi);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-ink-deep);
}

/* No eyebrow before it: the heading is the first child, so drop the top margin
   that was meant to sit it below the eyebrow — otherwise it reads as dead space
   at the top of the block. Also covers the hero/ctaband larger overrides. */
[class*="__heading"]:first-child { margin-top: 0; }

[class*="__eyebrow"] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--c-muted);
}

/* Sections on a dark ground carry white headings. */
:is(.process, .why, .linkgrid--dark, .statsbar--dark, .ctaband, .hero--dark) [class*="__heading"] { color: var(--c-white); }
.why--light [class*="__heading"] { color: var(--c-ink-deep); }

/* Background options, matching the `background` select on every component. */
.section--light  { background: var(--c-surface-alt); }
.section--dark   { background: var(--c-surface-dark); color: var(--c-white); }
.section--green  { background: var(--c-brand); color: var(--c-white); }

.section--dark :is(h1, h2, h3, h4),
.section--green :is(h1, h2, h3, h4) { color: var(--c-white); }

/* The eyebrow label above section headings — orange marker, per the designs. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-label);
  font-weight: var(--w-body);
  color: var(--c-on-dark);
}

/* --------------------------------------------------------------------------
   4. Header and footer
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 80px;
}

.site-nav ul {
  display: flex;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--t-sm);
}

.site-nav a:hover { color: var(--c-brand); }

.site-footer {
  background: var(--c-surface-dark);
  color: var(--c-white);
  padding-block: var(--s-16) var(--s-8);
}

.site-footer a { color: var(--c-white); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary { background: var(--c-brand); color: var(--c-white); }
.btn--primary:hover { background: var(--c-brand-dark); }

.btn--secondary {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn--secondary:hover { background: var(--c-brand-tint); }

/* --------------------------------------------------------------------------
   6. Article body — blog posts keep post_content, so this styles the editor's
      output rather than a component.
   -------------------------------------------------------------------------- */

.entry-content { max-width: 68ch; }
.entry-content > * + * { margin-top: var(--s-4); }
.entry-content h2 { margin-top: var(--s-12); font-size: var(--t-2xl); }
.entry-content h3 { margin-top: var(--s-8); }
.entry-content img { border-radius: var(--radius); }

.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content :is(table, pre) { overflow-x: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. C01 — Hero

   Measured from the Primary Care and Pain Management service frames:
   20px page inset, 24px card radius, 56px card padding, 72/75.6px heading with
   -2.16px tracking, 16/26px body at 60% white, 48px pill buttons, two glass
   cards floating over a 641×415 image panel.

   Desktop is the designed layout. Below 900px the floating cards stop
   overlapping and stack under the image, because at that width they would
   cover the photograph entirely.
   -------------------------------------------------------------------------- */

.hero {
  padding: 16px var(--s-5) 16px;
  background: var(--c-mist);
}

.hero--light { background: var(--c-white); }

.hero__card {
  border-radius: 24px;
  padding: 64px 56px 80px;
  min-height: 680px;
  display: flex;
  align-items: center;
  background: var(--c-forest);
  color: var(--c-white);
}

.hero--light .hero__card {
  background: var(--c-mist);
  color: var(--c-ink);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 605fr) minmax(0, 641fr);
  gap: 66px;
  align-items: center;
  width: 100%;
  margin-inline: auto;
}
/* Form hero: top-align so the heading lines up with the top of the form card. */
.hero__grid:has(.hero__media--form) { align-items: start; }

.hero__content { min-width: 0; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--c-on-dark);
}

.hero--light .hero__eyebrow { color: var(--c-ink-soft); }

.hero__heading {
  margin: 32px 0 0;
  max-width: 18ch;
  font-family: var(--f-head);
  font-size: var(--t-h1);
  font-weight: var(--w-semi);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: inherit;
  text-wrap: pretty;
}

.hero__body {
  margin-top: 24px;
  max-width: 512px;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.6);
}

.hero--light .hero__body { color: var(--c-ink-soft); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding-inline: 24px;
  border-radius: 999px;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}

.hero__cta--primary {
  background: var(--c-white);
  color: var(--c-forest);
}
.hero--light .hero__cta--primary {
  background: var(--c-white);
  color: var(--c-forest);
}
.hero__cta--primary:hover { background: var(--c-mist); }

.hero__cta--secondary,
.hero__cta--phone {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--c-white);
}
.hero--light :is(.hero__cta--secondary, .hero__cta--phone) {
  background: transparent;
  border-color: var(--c-rule);
  color: var(--c-ink);
}
/* Injury hero: the call button is a solid orange pill, not an outline, with a
   white phone icon (an orange icon on orange was invisible). */
.hero--light .hero__cta--phone { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); }
.hero--light .hero__cta--phone:hover { filter: brightness(1.05); }
.hero__cta--phone .hero__cta-icon { color: var(--c-orange); flex: none; }
.hero--light .hero__cta--phone .hero__cta-icon { color: var(--c-white); }

.hero__cta-badge { background: rgba(20, 61, 61, .08); }
/* White primary button on the injury hero: the arrow badge tints forest. */
.hero--light .hero__cta--primary .hero__cta-badge { background: rgba(20, 61, 61, .10); color: var(--c-forest); }

/* --- media column --- */

.hero__media { position: relative; min-width: 0; }

.hero__image {
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-white);
  aspect-ratio: 641 / 415;
}
.hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Service / condition hero: an embedded lead form in place of the image. The
   card is a bounded height so the hero stays compact; the form scrolls inside. */
.hero__form {
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 25px 50px -12px rgba(20, 61, 61, .14);
  height: clamp(500px, 62vh, 640px);
}
.hero__form-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Stats moved off the media into a compact row under the content. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.hero__stats li { display: flex; flex-direction: column; gap: 4px; }
.hero__stats li + li { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .18); }
.hero--light .hero__stats li + li { border-left-color: var(--c-rule); }
.hero__stats-value { font-family: var(--f-head); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 800; line-height: 1; color: var(--c-white); }
.hero--light .hero__stats-value { color: var(--c-ink-deep); }
.hero__stats-label { font-size: var(--t-label); line-height: 1.4; color: rgba(255, 255, 255, .6); }
.hero--light .hero__stats-label { color: var(--c-muted); }

.hero__card-float {
  /* 288px at the 1441px design width (20vw), scaling gently above it so the
     cards keep their proportion against a larger image instead of shrinking
     into it. Capped so the type inside stays a sensible size. */
  width: clamp(288px, 20vw, 380px);
  padding: 29px;
  border-radius: 16px;
  border: 1px solid var(--c-white);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .1);
  color: var(--c-ink);
}

.hero__stat-value {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: #002929;
}

.hero__star { color: var(--c-orange); width: 34px; height: 34px; }

/* Rating card only (the "4.9" with a star — not the plain 75+/20+ stat cards):
   a fully centred card — the score + star, the label, and the avatar/review
   row all centre (the note pill is already centred via margin auto). The
   tighter width is set in the desktop media query below. */
.hero__card-float--badge:not(.hero__card-float--stat) .hero__stat-value { justify-content: center; }
.hero__card-float--badge:not(.hero__card-float--stat) .hero__stat-label { text-align: center; }
.hero__card-float--badge:not(.hero__card-float--stat) .hero__badge-row { justify-content: center; }

/* On the light (injury) hero the float cards invert to dark forest with white
   type — the reverse of the dark (wellness) hero, whose cards stay white. */
.hero--light .hero__card-float {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(20, 61, 61, .74);
  color: var(--c-white);
}
.hero--light .hero__card-float .hero__stat-value { color: var(--c-white); }
.hero--light .hero__card-float .hero__stat-label { color: rgba(255, 255, 255, .72); }
.hero--light .hero__card-float .hero__divider { background: rgba(255, 255, 255, .16); }

.hero__stat-label {
  margin: 4px 0 0;
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  line-height: 1.43;
  color: #6b6b6b;
}

.hero__divider {
  height: 1px;
  margin: 20px 0 0;
  border: 0;
  background: #e8e8e8;
}

.hero__badge-row { flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.hero__avatars {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__avatars li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  border: .5px solid var(--c-white);
  background: #f5911f;
  color: var(--c-white);
  font-size: 9px;
  font-weight: var(--w-bold);
  line-height: 1.5;
}
.hero__avatars li + li { margin-left: -8px; }

.hero__badge-source { display: flex; flex-direction: column; }
.hero__badge-source span:first-child {
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  line-height: 1.5;
  color: #002929;
}
.hero__badge-source span:last-child {
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: #6b6b6b;
}

.hero__note {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 16px auto 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--c-mist);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--c-forest);
}
.hero__note-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-forest);
  opacity: .92;
}

/* Floating cards overlap the image on desktop, as designed.
   Offsets are percentages of the image so they hold as it scales. Measured
   from the frame: the image spans 671–1312 and 35–450; the stat card sits
   20px in from the image's left edge (3.1%) and 85% down, hanging below it;
   the rating card sits 9px in from the right edge (1.4%) and 65% down. Both
   stay inside the image horizontally — an earlier negative offset pushed the
   rating card past the viewport on wide screens. */
@media (min-width: 900px) {
  .hero__card-float { position: absolute; }
  .hero__card-float--stat  { left: 3.1%;  top: 85%; }
  .hero__card-float--badge { right: 1.4%; top: 65%; }
  /* Rating card sits a touch tighter than the stat card. */
  .hero__card-float--badge:not(.hero__card-float--stat) { width: clamp(264px, 18vw, 330px); }
  /* Injury hero carries two statistics, both stacked down the image's left
     edge, rather than a stat left and a rating card right. Smaller than the
     wellness cards and spaced so they read as two, not one behind the other. */
  .hero--light .hero__card-float { width: clamp(200px, 15.5vw, 250px); padding: 22px 24px; }
  .hero--light .hero__card-float--stat  { left: -5%; top: 20%; right: auto; bottom: auto; }
  .hero--light .hero__card-float--badge { left: -5%; top: 56%; right: auto; bottom: auto; }
}

@media (max-width: 899px) {
  .hero { padding-top: 12px; }
  .hero__card { padding: 32px 24px 40px; min-height: 0; }  /* symmetric once stacked */
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__heading { max-width: none; }
  .hero__card-float { width: 100%; margin-top: 16px; }
  .hero__note { margin-inline: 0; }
}

/* Condition hero (dark) carries two statistics stacked down the image's left
   edge — a gold "years" card above and a dark second card below (Figma 1:3486).
   Scoped to condition pages so the service heroes keep their own arrangement. */
.single-condition .hero__card-float--stat {
  border-color: rgba(255, 255, 255, .28);
  color: var(--c-white);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), rgba(243, 129, 0, 0.36);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.single-condition .hero__card-float--stat .hero__stat-value,
.single-condition .hero__card-float--stat .hero__stat-label { color: var(--c-white); }
.single-condition .hero__card-float--badge {
  border-color: rgba(255, 255, 255, .14);
  border-radius: 16px;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), rgba(243, 129, 0, 0.00);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px);
  color: var(--c-white);
}
.single-condition .hero__card-float--badge .hero__stat-value,
.single-condition .hero__card-float--badge .hero__stat-label { color: var(--c-white); }

@media (min-width: 900px) {
  .single-condition .hero__card-float { width: clamp(188px, 14.5vw, 236px); padding: 22px 24px; }
  .single-condition .hero__card-float--stat  { left: -8%;  top: 20%; right: auto; bottom: auto; }
  .single-condition .hero__card-float--badge { left: -14%; top: 68%; right: auto; bottom: auto; }
}

/* --------------------------------------------------------------------------
   8. C12 — CTA + Location Band

   Measured from the FinalCTA frame: full-bleed forest ground with a 10%
   background image, two 656.5px columns and a 48px gap inside the 1361px
   container, 48/52.8px heading at -1.44px tracking, 14/22.75px body at 55%
   white, and a 13% white glass panel at 16px radius.

   Content is shared site-wide rather than stored per page — see the template
   part.
   -------------------------------------------------------------------------- */

.ctaband {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y-loose);
  background: var(--c-forest);
  color: var(--c-white);
  isolation: isolate;
}

.ctaband__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ctaband__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* The export is already forest-tinted, so a left-weighted forest wash keeps the
   copy legible while the image reads through on the right — where the figure
   sits in the design. */
.ctaband__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-forest) 18%, rgba(20, 61, 61, .62) 58%, rgba(20, 61, 61, .18) 100%);
}

.ctaband__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ctaband__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--t-label);
  line-height: 1.5;
  color: #e8e8e8;
}

.ctaband__heading {
  margin: 20px 0 0;
}

.ctaband__body {
  margin: 20px 0 0;
  font-size: var(--t-base);
  line-height: 1.625;
  color: rgba(255, 255, 255, .55);
}

.ctaband__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.ctaband__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-decoration: none;
  transition: background-color .15s ease;
}

.ctaband__cta--primary { background: var(--c-white); color: var(--c-forest); }
.ctaband__cta--primary:hover { background: var(--c-mist); }

.ctaband__cta--phone {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .15);
  color: var(--c-white);
}
.ctaband__cta--phone:hover { background: rgba(255, 255, 255, .16); }

/* "Fill a Form" secondary button (wellness pages) — same ghost look as the call button. */
.ctaband__cta--secondary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .15);
  color: var(--c-white);
}
.ctaband__cta--secondary:hover { background: rgba(255, 255, 255, .16); }

.ctaband__cta-icon { color: var(--c-orange); flex: none; }

.ctaband__cta-badge { background: rgba(20, 61, 61, .08); }

/* --- glass panel --- */

.ctaband__panel {
  padding: 29px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .31);
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}

.ctaband__panel-heading {
  margin: 0;
  font-family: var(--f-head);
  font-size: 1.125rem;
  font-weight: var(--w-semi);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

.ctaband__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0 0;
}

.ctaband__row { display: flex; align-items: flex-start; gap: 16px; }

.ctaband__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--c-mist);
  color: var(--c-forest);
}

.ctaband__row dt {
  margin: 0 0 2px;
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-white);
}

.ctaband__row dd {
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  line-height: 1.43;
  color: var(--c-white);
}
.ctaband__row dd a { color: inherit; text-decoration: none; }
.ctaband__row dd a:hover { text-decoration: underline; }

.ctaband__divider {
  height: 1px;
  margin: 20px 0;
  border: 0;
  background: rgba(0, 41, 41, .3);
}

.ctaband__area {
  margin: 0;
  font-size: var(--t-label);
  line-height: 1.625;
  color: #f1f1f1;
}
/* Injury panel has no rows/divider above the service area, so space it off the heading. */
.ctaband__panel--injury .ctaband__area { margin-top: 18px; }

.ctaband__map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: var(--t-label);
  color: #f1f1f1;
  text-decoration: none;
}
.ctaband__map:hover { text-decoration: underline; }

/* Injury panel: a prominent, highlighted "Find a Clinic" button — bigger and
   bold, not the subtle directions link the location panel uses. */
.ctaband__locator {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.ctaband__locator:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ctaband__locator-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

@media (max-width: 899px) {
  .ctaband__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   9. C02 — Intro / Value Block

   From the frame: 40px section padding on the #e8efec ground, a 1361px row
   split 786/508 with a 67px gap, 48px heading in #002929, 14/22.75 body in
   #6b6b6b, a 24px-radius gradient callout at 36px padding, and a white
   508px card whose image is clipped to 206px above a 36px-padded checklist.
   -------------------------------------------------------------------------- */

.intro { padding: 40px var(--gutter); background: var(--c-mist); }
.intro--white { background: var(--c-white); }

.intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 786fr) minmax(0, 508fr);
  gap: 67px;
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.intro__main { display: flex; flex-direction: column; gap: 54px; min-width: 0; }

.intro__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: var(--c-muted);
}

.intro__marker--sm { width: 24px; height: 6px; }

.intro__heading {
  margin: 20px 0 0;
  max-width: 592px;
}

.intro__body {
  max-width: 651px;
  margin-top: 20px;
  font-size: var(--t-base);
  line-height: 1.625;
  color: var(--c-muted);
}
.intro__body p + p { margin-top: 20px; }

/* --- callout --- */

.intro__callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding: 36px;
  border-radius: 24px;
  color: var(--c-white);
  background:
    linear-gradient(203deg, rgba(144, 209, 192, .82) 69%, rgb(29, 103, 96) 76%),
    linear-gradient(90deg, rgba(2, 47, 49, .9) 0%, rgba(2, 47, 49, .9) 100%),
    var(--c-white);
}

.intro__callout-body {
  margin: 0;
  max-width: 462px;
  font-size: var(--t-base);
  line-height: 1.43;
  color: rgba(255, 255, 255, .5);
}

.intro__callout-heading {
  margin: 8px 0 0;
  font-family: var(--f-head);
  font-size: 1.125rem;
  font-weight: var(--w-semi);
  line-height: 1.55;
  color: var(--c-white);
}

.intro__callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-forest);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  text-decoration: none;
}
.intro__callout-cta:hover { background: var(--c-mist); }

.intro__callout-badge { background: rgba(243, 129, 0, .17); }

/* --- card layout (injury): full-width heading, white content card left,
   media + green callout right --------------------------------------------- */
.intro--card .intro__inner { display: block; }
.intro__head { width: 100%; }
.intro--card .intro__heading { margin: 20px 0 0; max-width: 900px; }

.intro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}

.intro__panel {
  background: var(--c-white);
  border-radius: 24px;
  padding: 40px 40px 44px;
}
.intro__card-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: var(--t-label); font-weight: var(--w-semi); letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-orange);
}
.intro__subheading {
  margin: 20px 0 0; font-family: var(--f-head); font-size: 1.5rem;
  font-weight: var(--w-semi); line-height: 1.2; color: var(--c-ink-deep);
}
.intro--card .intro__panel .intro__body { max-width: none; margin-top: 18px; }

.intro__highlight { display: flex; gap: 14px; margin-top: 28px; }
.intro__highlight-icon { flex: none; color: var(--c-orange); margin-top: 1px; }
.intro__highlight-title { margin: 0; font-weight: var(--w-semi); color: var(--c-ink-deep); }
.intro__highlight-body { margin: 5px 0 0; font-size: var(--t-label); line-height: 1.6; color: var(--c-muted); }

.intro__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.intro__media { border-radius: 24px; overflow: hidden; aspect-ratio: 671 / 300; background: var(--c-white); }
.intro__media img { width: 100%; height: 100%; object-fit: cover; }

/* Card layout: the green callout sits in the LEFT column, below the white panel;
   the image fills the full height of the right column. */
.intro--card .intro__cols { grid-template-rows: auto auto; align-items: stretch; }
.intro--card .intro__panel   { grid-column: 1; grid-row: 1; }
.intro--card .intro__callout { grid-column: 1; grid-row: 2; }
.intro--card .intro__aside   { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
/* Fixed image height (cover-cropped) instead of stretching to the panel+callout
   height, so it's consistent across pages regardless of the copy length. */
.intro--card .intro__media   { aspect-ratio: auto; flex: none; height: clamp(400px, 42vw, 520px); }

/* Procedures: the "What is …" image fills the full height and width of its
   column (matching the text panel) rather than a fixed height. The image is
   pinned absolutely so it fills the flex-stretched box (a percentage height
   alone doesn't resolve reliably inside a flex item). */
.single-procedure .intro--card .intro__aside { align-self: stretch; }
.single-procedure .intro--card .intro__media { flex: 1 1 auto; height: auto; position: relative; }
.single-procedure .intro--card .intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Standard intro layout (the other procedures): the image fills the whole right
   card — matching the text column height, no empty strip below it. */
.single-procedure .intro__card { align-self: stretch; position: relative; min-height: 206px; }
.single-procedure .intro__card-media { position: absolute; inset: 0; height: auto; }

@media (max-width: 899px) {
  .intro__cols { grid-template-columns: 1fr; }
  /* Stack in DOM order (panel, image, callout) and restore the image's ratio. */
  .intro--card .intro__panel,
  .intro--card .intro__callout,
  .intro--card .intro__aside { grid-column: 1; grid-row: auto; }
  .intro--card .intro__media { aspect-ratio: 671 / 300; flex: none; height: auto; }
}

/* --- checklist card --- */

.intro__card {
  overflow: hidden;
  border-radius: 24px;
  background: var(--c-white);
  align-self: stretch;
}

.intro__card-media { height: 206px; overflow: hidden; }
.intro__card-media img { width: 100%; height: 100%; object-fit: cover; }

.intro__card-body { padding: 0 36px 32px; }

.intro__list-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 36px;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.intro__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
}

.intro__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--t-label);
  line-height: 1.5;
  color: rgba(20, 61, 61, .8);
}

.intro__tick { flex: none; color: var(--c-orange); }

@media (max-width: 899px) {
  .intro { padding: 32px var(--gutter); }
  .intro__inner { grid-template-columns: 1fr; gap: 32px; }
  .intro__main { gap: 32px; }
  .intro__callout { padding: 24px; }
  .intro__card-body { padding-inline: 24px; }
}

/* --------------------------------------------------------------------------
   10. C03 — Card Grid

   From the frame: 40px top / 80px bottom on the #e8efec ground, 48px heading,
   a meta row pairing a 14px intro with a dark pill link, then 443px cards at
   16px gaps — 28px padding, 16px radius, 50% white with a soft shadow, a 48px
   icon tile, an 18px title and 13/21.125 body.
   -------------------------------------------------------------------------- */

.cardgrid { padding: 40px var(--gutter) 80px; background: var(--c-mist); }
.cardgrid--white { background: var(--c-white); }

.cardgrid__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }

.cardgrid__heading {
  max-width: none;
}

.cardgrid__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-top: 20px;
}

.cardgrid__intro {
  margin: 0;
  max-width: 597px;
  font-size: var(--t-base);
  line-height: 1.625;
  color: var(--c-muted);
}

.cardgrid__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--c-forest);
  color: var(--c-white);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  text-decoration: none;
}
.cardgrid__link:hover { background: var(--c-ink-deep); }

.cardgrid__grid {
  display: grid;
  /* Exact column count from the field (3 in the injury procedures grid), so six
     cards land as 3x2, not one long row. Collapses on smaller screens. */
  grid-template-columns: repeat(var(--cg-cols, 3), minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 40px 0 0;
  list-style: none;
}
@media (max-width: 899px) { .cardgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cardgrid__grid { grid-template-columns: 1fr; } }

.cardgrid__card {
  margin: 0;
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
}

.cardgrid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(243, 129, 0, .12);
  color: var(--c-orange);
}

/* The frame gives the first card a filled forest tile, with the same orange
   glyph as the rest. */
.cardgrid__card:first-child .cardgrid__icon {
  background: var(--c-forest);
  color: var(--c-orange);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
}

.cardgrid__card-title {
  margin: 24px 0 0;
  font-family: var(--f-head);
  font-size: 1.125rem;
  font-weight: var(--w-semi);
  line-height: 1.55;
  color: var(--c-ink-deep);
}
.cardgrid__card-title a { color: inherit; text-decoration: none; }
.cardgrid__card-title a:hover { color: var(--c-orange); }

/* Whole-card click target: when a card has a title link, stretch it over the
   entire card so the whole block is clickable — not just the title. Cards with
   no link (e.g. the "how it works" steps) stay non-interactive. */
.cardgrid__card { position: relative; }
.cardgrid__card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cardgrid__card:has(.cardgrid__card-title a) { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.cardgrid__card:has(.cardgrid__card-title a):hover { box-shadow: 0 12px 24px rgba(20, 61, 61, .14); transform: translateY(-2px); }
.cardgrid__card:has(.cardgrid__card-title a):hover .cardgrid__card-title a { color: var(--c-orange); }

.cardgrid__card-body {
  margin: 12px 0 0;
  font-size: var(--t-label);
  line-height: 1.625;
  color: var(--c-muted);
}

@media (max-width: 599px)  { .cardgrid { padding-bottom: var(--s-12); } }

/* List style — mirrors the /conditions cards: a bordered white card with a
   title, short description and a "Learn more" link over a top divider, and no
   icon tile. Chosen per grid with the card_style field, so the "What We Offer"
   grids on detail pages keep the iconed cards above. */
.cardgrid--list .cardgrid__grid { gap: 20px; }
.cardgrid--list .cardgrid__card { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.cardgrid__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--c-rule);
  background: var(--c-white);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.cardgrid__card-link:hover,
a.cardgrid__card-link:focus-visible {
  border-color: var(--c-forest);
  box-shadow: 0 18px 40px -22px rgba(10, 31, 31, .4);
  transform: translateY(-2px);
}
.cardgrid--list .cardgrid__card-title { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.cardgrid--list .cardgrid__card-body { margin-top: 10px; }
.cardgrid__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  color: var(--c-ink-deep);
  transition: color .2s ease;
}
a.cardgrid__card-link:hover .cardgrid__more,
a.cardgrid__card-link:focus-visible .cardgrid__more { color: var(--c-orange); }

/* --------------------------------------------------------------------------
   11. C04 — Process Steps

   From the frame: 80px vertical on the forest ground, a header row pairing a
   581px heading column with a 300px intro-and-button column, then 264px step
   cards at 36px padding. The first step's tile is orange with a lift; the
   rest are #2d8080. Connector lines are drawn in CSS rather than shipped as
   SVG assets.
   -------------------------------------------------------------------------- */

.process {
  padding: var(--section-y) var(--gutter);
  background: var(--c-forest);
  color: var(--c-white);
}

.process__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }

.process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-12);
  flex-wrap: wrap;
}

.process__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  line-height: 1.5;
  color: #bababa;
}

.process__heading {
  max-width: 581px;
}

.process__aside { max-width: 300px; }

.process__intro {
  margin: 0 0 20px;
  font-size: var(--t-base);
  line-height: 1.625;
  color: #aab9b9;
}

.process__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding-inline: 24px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-forest);
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  text-decoration: none;
}
.process__cta:hover { background: var(--c-mist); }

.process__cta-badge { background: rgba(20, 61, 61, .08); }

.process__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s-6);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.process__step {
  position: relative;
  margin: 0;
  padding: 36px;
  border-radius: 24px;
}

/* The line joining one step to the next. Hidden on the last, and whenever the
   steps wrap to a single column. */
.process__step::after {
  content: "";
  position: absolute;
  top: 60px;                              /* vertical centre of the 48px badge */
  left: 84px;                             /* right edge of the badge (36px padding + 48px badge) */
  width: calc(100% + var(--s-6) - 48px);  /* run to the next badge's left edge — one continuous line */
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.process__step:last-child::after { display: none; }

.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #2d8080;
  color: var(--c-white);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.process__step:first-child .process__num {
  background: var(--c-orange);
  box-shadow: 0 10px 15px rgba(245, 145, 31, .24), 0 4px 6px rgba(45, 128, 128, .4);
}

.process__step-title {
  margin: 24px 0 0;
  font-family: var(--f-body);
  font-size: 1.125rem;
  font-weight: var(--w-bold);
  line-height: 1.55;
  color: var(--c-white);
}

.process__step-body {
  margin: 12px 0 0;
  font-size: var(--t-base);
  line-height: 1.625;
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 899px) {
  .process__step { padding: 24px; }
}
/* The joining line assumes all four steps share one row. Below ~1050px they wrap
   (auto-fit), so the rightmost step's line would jut past the grid and scroll the
   page — hide the connectors until the single row is guaranteed. */
@media (max-width: 1049px) {
  .process__step::after { display: none; }
}

/* --------------------------------------------------------------------------
   12. C05 — Feature List + Image

   From the frame: 96px vertical, a 494px image card beside a flexible text
   column with a 165px gap. The card is 24px radius on #dce8e3 with a deep
   soft shadow; the stat sits over its lower right at 70% white with a blur.
   Items pair a 32px tile with an 18px title and 13/21.125 body.
   -------------------------------------------------------------------------- */

.features { padding: var(--section-y-loose) var(--gutter); background: var(--c-mist); }
.features--white { background: var(--c-white); }

.features__inner {
  display: grid;
  /* Proportional columns (not a fixed image + 1fr text) so the copy can't sprawl
     on wide screens, and the gap scales instead of a fixed 165px. */
  grid-template-columns: minmax(0, 460fr) minmax(0, 640fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.features--image-right .features__inner { grid-template-columns: minmax(0, 640fr) minmax(0, 460fr); }
.features--image-right .features__media { order: 2; }

/* No-image variant (e.g. a procedure's "How we help"): the head and items span
   the full width, and the items sit two-up instead of one narrow column. */
.features--no-media .features__inner { grid-template-columns: 1fr; gap: 40px; }
.features--no-media .features__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
@media (max-width: 700px) { .features--no-media .features__list { grid-template-columns: 1fr; } }

.features__media { position: relative; }

.features__image {
  border-radius: 24px;
  overflow: hidden;
  background: #dce8e3;
  aspect-ratio: 4 / 3;
  box-shadow: 0 25px 50px -12px rgba(20, 61, 61, .1);
}
.features__image img { width: 100%; height: 100%; object-fit: cover; }

/* Embedded video (ViewMedica etc.) in the media slot — 16:9, centred in the
   column since it's shorter than a portrait image. */
.features__embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 25px 50px -12px rgba(20, 61, 61, .12);
}
.features__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.features__media--embed { align-self: center; }

.features__stat {
  position: absolute;
  right: -18%;
  bottom: -6%;
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .1);
}

.features__stat-value {
  margin: 0;
  font-family: var(--f-head);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: .9;
  color: var(--c-forest);
}

.features__stat-label {
  margin: 4px 0 0;
  font-size: var(--t-base);
  line-height: 1.43;
  color: var(--c-muted);
  white-space: nowrap;
}

.features__content { display: flex; flex-direction: column; gap: 32px; min-width: 0; max-width: 720px; }

.features__heading {
  margin: 20px 0 0;
}

.features__intro {
  margin: 20px 0 0;
  max-width: 651px;
  font-size: var(--t-base);
  line-height: 1.625;
  color: var(--c-muted);
}

.features__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features__item { display: flex; align-items: flex-start; gap: 12px; margin: 0; }

.features__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(243, 129, 0, .12);
  color: var(--c-orange);
}

.features__item-title {
  margin: 0;
  font-family: var(--f-head);
  font-size: 1.125rem;
  font-weight: var(--w-semi);
  line-height: 1.55;
  color: var(--c-ink-deep);
}

.features__item-body {
  margin: 8px 0 0;
  font-size: var(--t-label);
  line-height: 1.625;
  color: var(--c-muted);
}

@media (max-width: 899px) {
  .features__inner,
  .features--image-right .features__inner { grid-template-columns: 1fr; gap: 48px; }
  .features--image-right .features__media { order: 0; }
  .features__stat { right: 4%; bottom: -8%; }
}
@media (max-width: 899px) {
  .features__stat { position: static; margin-top: 16px; }
  .features__stat-label { white-space: normal; }
}

/* --------------------------------------------------------------------------
   13. C06 — Link Grid
   -------------------------------------------------------------------------- */

.linkgrid { padding: var(--section-y) var(--gutter); background: var(--c-mist); }

.linkgrid__inner {
  display: grid;
  grid-template-columns: minmax(0, 411fr) minmax(0, 886fr);
  gap: 64px;
  align-items: start;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.linkgrid__body,
.team__body {
  margin: 20px 0 0;
  font-size: var(--t-base);
  line-height: 1.625;
  color: var(--c-muted);
}

.linkgrid__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  text-decoration: none;
}
.linkgrid__cta:hover { background: var(--c-brand-dark); }

.linkgrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--lg-cols, 4), minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.linkgrid__grid li { margin: 0; }

.linkgrid__grid :is(a, .linkgrid__plain) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-ink-deep);
  font-size: var(--t-label);
  text-decoration: none;
}
.linkgrid__grid a:hover { border-color: var(--c-orange); color: var(--c-orange); }
.linkgrid__grid svg { flex: none; color: var(--c-ink-faint); }

/* --------------------------------------------------------------------------
   14. C07 — Why It Matters
   -------------------------------------------------------------------------- */

.why { padding: var(--section-y-loose) var(--gutter); background: var(--c-forest); color: var(--c-white); }

.why__inner {
  display: grid;
  /* The frame splits 641 / 640.5 with a 79.5px gap inside the 1361 container. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.why__media { position: relative; }
.why__image { border-radius: 24px; overflow: hidden; aspect-ratio: 641 / 452; }
.why__image img { width: 100%; height: 100%; object-fit: cover; }

/* Two pills: the accent stat overhangs the left edge mid-height, the plain
   stat overhangs the bottom-right — a diagonal, not a row. */
.why__stats { position: absolute; inset: 0; pointer-events: none; }
.why__stat { position: absolute; max-width: 48%; pointer-events: auto; }
.why__stat--accent { left: -5%; bottom: 20%; }
.why__stat--plain  { right: -5%; bottom: -9%; }

/* Service / condition detail: a smaller image on the dark ground with the two
   stats anchored to the image's corners — the orange stat hanging off the
   lower-left, the plain stat overlapping the lower-right, as node 1:1847.
   The media box itself shrinks to the image so the stats align to the image
   edges (not the wider column). Scoped so the homepage why is untouched. */
.single-service .why__media,
.single-condition .why__media { max-width: 520px; }
.single-service .why__image,
.single-condition .why__image { max-width: none; aspect-ratio: 496 / 335; }
.single-service .why__stat, .single-condition .why__stat { max-width: 56%; }
.single-service .why__stat--accent,
.single-condition .why__stat--accent { left: -7%; bottom: -12%; top: auto; right: auto; }
.single-service .why__stat--plain,
.single-condition .why__stat--plain { right: -7%; bottom: 10%; left: auto; top: auto; }

/* Client: on service pages the image (left) column takes more width and the image
   fills it — the text column stays roomy. Conditions keep the balanced split.
   The image is now flush to the page gutter, so the accent stat can no longer
   hang off the left edge (it would run off-screen) — anchor it to the corner.
   Desktop only: below 900px the section stacks (mobile rule below). */
@media (min-width: 900px) {
  .single-service .why--image-left .why__inner { grid-template-columns: minmax(0, 680fr) minmax(0, 600fr); }
  .single-service .why--image-left .why__media { max-width: none; }
  .single-service .why--image-left .why__stat--accent { left: 0; }
}

.why__stat { padding: 18px 24px; border-radius: 14px; backdrop-filter: blur(6px); }
.why__stat--accent {
  border-radius: 16px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), rgba(243, 129, 0, 0.36);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(10px);
}
.why__stat--plain {
  border-radius: 16px;
  background: linear-gradient(0deg, rgba(20, 61, 61, 0.54) 0%, rgba(20, 61, 61, 0.54) 100%), rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(10px);
}

.why__stat-value {
  margin: 0;
  font-family: var(--f-head);
  font-size: 1.75rem;
  font-weight: var(--w-bold);
  line-height: 1.1;
  color: var(--c-white);
}
.why__stat-label { margin: 2px 0 0; font-size: var(--t-sm); color: rgba(255, 255, 255, .8); }

.why__eyebrow { color: #bababa; }


.why__body { margin: 20px 0 0; font-size: var(--t-base); line-height: 1.625; color: rgba(255, 255, 255, .6); }

.why__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px var(--s-6);
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.why__points li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--t-label); line-height: 1.5; color: rgba(255, 255, 255, .75); }
.why__tick { flex: none; margin-top: 2px; color: var(--c-orange); }

.why__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  height: 48px;
  padding-inline: 24px;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-forest);
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  text-decoration: none;
}
.why__cta-badge { background: rgba(20, 61, 61, .08); }

/* --------------------------------------------------------------------------
   15. C08 — Testimonials

   Measured from the Reviews frame: 388.5x283.3 cards at 17.27px radius, the
   first filled forest. Type here is its own scale (15.11/24.55 quotes, 14.03
   Manrope names, 11.87 meta), set locally because the site scale lacks it.
   Carousel is CSS scroll-snap — no JavaScript, no library.
   -------------------------------------------------------------------------- */

.reviews {
  padding: calc(var(--section-y) + 1px) 0 var(--section-y);
  border-top: 1px solid #e8e8e8;
  background: var(--c-white);
}
.reviews__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.reviews__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
}

.reviews__link {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 20px; border-radius: 999px;
  background: var(--c-forest); color: var(--c-white);
  font-size: var(--t-label); font-weight: var(--w-medium); text-decoration: none;
}

.reviews__track {
  display: grid;
  grid-auto-flow: column;
  /* 3.5 cards visible so the row reads as continuing; 4.5 on large screens.
     At 1361 that lands each card on the frame's 388.5px. */
  --per: 3.5;
  grid-auto-columns: calc(100% / var(--per) - 11px);
  scroll-behavior: smooth;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.reviews__card {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  min-height: 283px;
  margin: 0;
  padding: 31px;
  border: 1px solid #e8e8e8;
  border-radius: 17px;
  background: var(--c-white);
}

/* The frame leads with one filled card, as an entry point into the row. */
.reviews__card:first-child { background: var(--c-forest); border-color: var(--c-forest); }

.reviews__stars { display: flex; gap: 2px; margin: 0; color: var(--c-orange); }

.reviews__quotewrap { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 0 26px; }
.reviews__quote {
  margin: 0;
  font-size: .945rem;
  line-height: 1.625;
  color: var(--c-ink-deep);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.reviews__quote.is-expanded { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.reviews__card:first-child .reviews__quote { color: rgba(255, 255, 255, .75); }
.reviews__more {
  margin-top: 12px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .82rem; font-weight: var(--w-semi);
  color: var(--c-forest); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.reviews__more:hover { color: var(--c-orange); }
.reviews__card:first-child .reviews__more { color: var(--c-white); }
.reviews__card:first-child .reviews__more:hover { color: var(--c-orange); }

.reviews__by {
  display: flex; align-items: center; gap: 13px;
  padding-top: 22px;
  border-top: 1px solid #e8e8e8;
}
.reviews__card:first-child .reviews__by { border-top-color: rgba(255, 255, 255, .1); }

.reviews__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 39px; height: 39px; border-radius: 999px;
  background: var(--c-mist); color: var(--c-forest);
  font-size: .74rem; font-weight: var(--w-bold);
}
.reviews__card:first-child .reviews__avatar { background: rgba(255, 255, 255, .15); color: var(--c-white); }

.reviews__name {
  margin: 0;
  font-family: var(--f-head);
  font-size: .877rem;
  font-weight: var(--w-semi);
  line-height: 1.5;
  color: var(--c-ink-deep);
}
.reviews__card:first-child .reviews__name { color: var(--c-white); }

.reviews__role { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--c-muted); }
.reviews__card:first-child .reviews__role { color: rgba(255, 255, 255, .45); }

.reviews__ago { margin-left: auto; flex: none; font-size: .74rem; color: #b5b5b5; }
.reviews__card:first-child .reviews__ago { color: rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------------------
   16. C09 — Providers
   -------------------------------------------------------------------------- */

.team { padding: var(--section-y) var(--gutter); background: var(--c-mist); }

.team__inner {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 700fr);
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.team__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.team__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: var(--t-label);
  font-weight: var(--w-semi);
  text-decoration: none;
}
.team__cta--dark   { background: var(--c-forest); color: var(--c-white); }
.team__cta--orange { background: var(--c-orange); color: var(--c-white); }

.team__media { position: relative; }
.team__image { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9.5; background: var(--c-white); }
.team__image img { width: 100%; height: 100%; object-fit: cover; }

.team__stats {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -8%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-3);
  margin: 0;
  padding: 26px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(20, 61, 61, .55);
  backdrop-filter: blur(10px);
  text-align: center;
}
.team__stats > div + div { border-left: 1px solid rgba(255, 255, 255, .18); }

.team__stats dt {
  font-family: var(--f-head);
  font-size: 2rem;
  font-weight: var(--w-bold);
  line-height: 1.1;
  color: var(--c-white);
}
.team__stats dd { margin: 4px 0 0; font-size: var(--t-xs); color: rgba(255, 255, 255, .72); }

/* Grid variant — a row of provider cards. Used by the homepage, condition and
   service team sections, so it lives here (not home.css) to reach every page. */
.team--grid .team__inner { grid-template-columns: 1fr; gap: 40px; }
/* Heading left, body + CTA right-aligned, with a wide gap between — matching the
   Figma header. The heading no longer stretches to 1fr (which made the gap
   depend on the heading length); the two blocks sit at fixed max widths and
   space-between fills the rest, so the gap is the design's, not the text's. */
.team--grid .team__content { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 700fr); column-gap: 80px; align-items: start; }
/* Left column holds eyebrow + heading (auto-stacked); right column holds the
   intro block. Body and CTA live inside .team__intro, so the CTA always sits
   directly under the description regardless of the heading's height. */
.team--grid .team__eyebrow,
.team--grid .team__heading { grid-column: 1; }
.team--grid .team__intro { grid-column: 2; grid-row: 1; align-self: start; margin: 0; }
.team--grid .team__intro .team__body { margin-top: 0; }
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.team__person { margin: 0; }
.team__person a { display: block; text-decoration: none; color: inherit; }
.team__portrait { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #cfd8d5; }
.team__portrait img { width: 100%; height: 100%; object-fit: cover; }
.team__portrait-empty { display: block; width: 100%; height: 100%; }
.team__name { display: block; margin-top: 14px; font-family: var(--f-head); font-size: 1.05rem; font-weight: var(--w-semi); color: var(--c-ink-deep); }
.team__role { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--c-orange); }
.team__blurb { display: block; margin-top: 8px; font-size: var(--t-xs); line-height: 1.6; color: var(--c-muted); }
.team__note {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
  margin-top: 32px; padding: 24px 28px; border-radius: 16px; background: var(--c-white);
}
.team__note p { margin: 0; max-width: 60ch; font-size: var(--t-label); line-height: 1.6; color: var(--c-ink-soft); }

/* Why panel with the image on the right (condition & service pages). */
.why--image-right .why__inner { grid-template-columns: minmax(0, 720fr) minmax(0, 560fr); }
.why--image-right .why__media { order: 2; }

@media (max-width: 899px) {
  .linkgrid__inner, .why__inner, .team__inner { grid-template-columns: 1fr; gap: 48px; }
  .linkgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 4 provider cards → clean 2×2 on tablet, not an orphaned 3 + 1. */
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__stats { position: static; margin-top: 16px; }
  .team__stats { position: static; margin-top: 16px; }
  /* Grid team stacks; children carry grid-column: 2 which would conjure an
     implicit second track after the template collapses — reset them. */
  .team--grid .team__content { grid-template-columns: 1fr; gap: var(--s-6); }
  .team--grid .team__intro { grid-column: 1; grid-row: auto; }
  .why--image-right .why__inner { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .why__points { grid-template-columns: 1fr; }
  /* Providers become a swipeable row on phones — the reviews-carousel mechanism.
     grid-auto-flow: column supersedes the auto-fit template; clearing the
     explicit track keeps every portrait the same height. */
  .team__grid {
    --per: 1.25;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc(100% / var(--per) - 12px);
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
  }
  .team__person { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   17. Shared section furniture for C10–C18
   -------------------------------------------------------------------------- */

.faq__eyebrow, .related__eyebrow, .symptoms__eyebrow,
.dualpath__eyebrow, .statsbar__eyebrow, .mission__eyebrow, .acc__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: var(--t-label); line-height: 1.5; color: var(--c-muted);
}
.faq__marker, .related__marker, .symptoms__marker,
.dualpath__marker, .statsbar__marker, .mission__marker, .acc__marker {
  flex: none; width: 32px; height: 8px; border-radius: 999px; background: var(--c-orange);
}

/* 18. C10 — FAQ ---------------------------------------------------------- */

.faq { padding: var(--section-y) var(--gutter); background: var(--c-mist); }
.single-service .faq, .single-condition .faq { background: var(--c-white); }
.faq__head { align-self: start; }
.faq__inner {
  display: grid; grid-template-columns: minmax(0, 411fr) minmax(0, 886fr); gap: 64px;
  align-items: start; width: 100%; max-width: var(--wrap); margin-inline: auto;
}
.faq__heading { margin-top: 20px; }
.faq__body { margin: 24px 0 0; font-size: var(--t-base); line-height: 1.625; color: var(--c-muted); }
.faq__list { display: flex; flex-direction: column; }

.faq__item { border-bottom: 1px solid #ced8d6; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  /* 73px rows in the frame: 26px above and below a 20px line. */
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: var(--t-base); font-weight: var(--w-body); color: var(--c-ink-deep);
}
.faq__q::-webkit-details-marker { display: none; }

.faq__sign { position: relative; flex: none; width: 20px; height: 20px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 2px auto 2px; height: 1.5px;
  background: #7e9694; transition: transform .18s ease;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a { padding: 0 0 20px; max-width: 68ch; font-size: var(--t-label); line-height: 1.7; color: var(--c-muted); }

/* 19. C11 — Related ------------------------------------------------------ */

.related { padding: var(--section-y) var(--gutter); background: var(--c-mist); }
.related__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }
.related__link {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 10px 18px; border-radius: 999px; background: var(--c-forest);
  color: var(--c-white); font-size: var(--t-label); font-weight: var(--w-bold); text-decoration: none;
}
.related__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px;
  margin: 40px 0 0; padding: 0; list-style: none;
}
.related__card { margin: 0; }
/* White card: image fills a shorter top, title + arrow sit on a white footer bar. */
.related__card a {
  display: block; text-decoration: none; color: inherit;
  background: var(--c-white); border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(10, 31, 31, .06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.related__card a:hover { box-shadow: 0 12px 28px rgba(10, 31, 31, .12); transform: translateY(-2px); }
.related__media { display: block; overflow: hidden; border-radius: 14px; background: var(--c-mist); aspect-ratio: 430 / 224; margin: 6px 6px 0; }
.related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.related__card a:hover .related__media img { transform: scale(1.03); }
.related__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 20px 22px;
  font-family: var(--f-head); font-size: 1.3rem; font-weight: var(--w-semi); color: var(--c-ink-deep);
}
.related__arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 999px; background: rgba(243, 129, 0, .15); color: var(--c-orange);
}

/* 20. C13 — Symptoms ----------------------------------------------------- */

.symptoms { padding: var(--section-y) var(--gutter); background: var(--c-white); }
.symptoms__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.symptoms__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s-8); margin-top: 40px; }
.symptoms__col { padding: 28px; border: 1px solid var(--c-rule); border-radius: 16px; background: var(--c-mist); }
.symptoms__col-label {
  margin: 0 0 16px; font-family: var(--f-head); font-size: 1.125rem;
  font-weight: var(--w-semi); color: var(--c-ink-deep);
}
.symptoms__col ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.symptoms__col li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--t-label); line-height: 1.6; color: var(--c-muted); }
.symptoms__col svg { flex: none; margin-top: 5px; color: var(--c-orange); }

/* --------------------------------------------------------------------------
   Condition Overview — "What is X?"
   -------------------------------------------------------------------------- */
.overview { padding: var(--section-y) var(--gutter); background: var(--c-mist); }
.overview__inner {
  display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 760fr); gap: 64px;
  align-items: center; width: 100%; max-width: var(--wrap); margin-inline: auto;
}
.overview__media { border-radius: 24px; overflow: hidden; aspect-ratio: 520 / 470; background: var(--c-white); }
.overview__media img { width: 100%; height: 100%; object-fit: cover; }
.overview__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--t-label); font-weight: var(--w-medium); color: var(--c-orange); }
.overview__heading { margin: 18px 0 0; font-family: var(--f-head); font-size: var(--t-3xl); font-weight: var(--w-semi); line-height: 1.12; letter-spacing: -0.03em; color: var(--c-ink-deep); }
.overview__body { margin: 18px 0 0; font-size: var(--t-base); line-height: 1.7; color: var(--c-muted); }
.overview__body p + p { margin-top: 14px; }
.overview__seek { margin-top: 28px; }
.overview__seek-heading { margin: 0 0 14px; font-family: var(--f-head); font-size: 1.05rem; font-weight: var(--w-semi); color: var(--c-orange); }
.overview__seek-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.overview__seek-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.overview__seek-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--t-label); line-height: 1.5; color: var(--c-ink-soft); }
.overview__tick { flex: none; margin-top: 1px; color: var(--c-orange); }
.overview__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 13px 22px; border-radius: 999px; background: var(--c-forest); color: var(--c-white); font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none; }
.overview__cta:hover { background: var(--c-ink-deep); }
@media (max-width: 899px) { .overview__inner { grid-template-columns: 1fr; gap: 32px; } .overview__seek-cols { grid-template-columns: 1fr; } }

/* 21. C14 — Dual Path ---------------------------------------------------- */

.dualpath { padding: var(--section-y) var(--gutter); background: var(--c-mist); }
.dualpath__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.dualpath__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-6); margin-top: 40px; }
.dualpath__panel { overflow: hidden; border-radius: 24px; background: var(--c-white); }
.dualpath__panel--dark { background: var(--c-forest); color: var(--c-white); }
.dualpath__panel--green {
  color: var(--c-white);
  background:
    linear-gradient(203deg, rgba(144, 209, 192, .82) 69%, #1d6760 76%),
    linear-gradient(0deg, rgba(2, 47, 49, .9), rgba(2, 47, 49, .9)),
    var(--c-white);
}
.dualpath__panel--green .dualpath__panel-body { color: rgba(255, 255, 255, .72); }
.dualpath__media { aspect-ratio: 16 / 9; overflow: hidden; }
.dualpath__media img { width: 100%; height: 100%; object-fit: cover; }
.dualpath__body { padding: 32px; }
.dualpath__panel-eyebrow { margin: 0; font-size: var(--t-sm); font-weight: var(--w-semi); letter-spacing: .05em; text-transform: uppercase; color: var(--c-orange); }
.dualpath__panel-heading { margin: 12px 0 0; font-family: var(--f-head); font-size: 1.5rem; font-weight: var(--w-semi); line-height: 1.25; color: inherit; }
.dualpath__panel-body { margin: 12px 0 0; font-size: var(--t-base); line-height: 1.625; color: var(--c-muted); }
.dualpath__panel--dark .dualpath__panel-body { color: rgba(255, 255, 255, .6); }
.dualpath__list { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.dualpath__list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--t-label); color: inherit; }
.dualpath__list svg {
  flex: none;
  width: 18px; height: 18px; padding: 3px;
  border-radius: 999px;
  background: rgba(243, 129, 0, .18);
  color: var(--c-orange);
}
.dualpath__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  padding: 12px 20px; border-radius: 999px; background: var(--c-orange); color: var(--c-white);
  font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none;
}

/* 22. C15 — Stats Bar ---------------------------------------------------- */

.statsbar { padding: var(--section-y) var(--gutter); background: var(--c-mist); }
.statsbar--white { background: var(--c-white); }
.statsbar--dark { background: var(--c-forest); color: var(--c-white); }
.statsbar--dark :is(.statsbar__heading, .statsbar__stats dt) { color: var(--c-white); }
.statsbar__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
/* The frame sets the heading against a short supporting line on the right. */
.statsbar__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--s-8); align-items: end; }
.statsbar__body { margin: 0; max-width: 34ch; align-self: end; text-align: left; font-size: var(--t-base); line-height: 1.625; color: var(--c-muted); }
/* The 380px track is not flexible, so below ~760px it eats the row and
   starves the heading column to 0px — the text then spills out of a
   zero-width box. One column below the tablet tier. */
@media (max-width: 899px) {
  .statsbar__head { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
  /* Right-aligned only to sit against the heading in the two-column head; once
     it stacks underneath, it reads as ragged-left text pushed to the wrong edge. */
  .statsbar__body { text-align: left; max-width: none; align-self: start; }
}
.statsbar__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-8); margin: 40px 0 0; }
.statsbar__stat dt { font-family: var(--f-head); font-size: var(--t-display); font-weight: 800; line-height: 1; letter-spacing: var(--tr-display); color: var(--c-ink-deep); }
.statsbar__stat dd { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.statsbar__stat-label { font-size: var(--t-base); font-weight: var(--w-semi); }
.statsbar__stat-note { font-size: var(--t-label); color: var(--c-muted); }
.statsbar__quote { margin: 48px 0 0; padding: 32px; border-radius: 24px; background: var(--c-white); }
.statsbar--white .statsbar__quote { background: var(--c-mist); }
.statsbar--dark .statsbar__quote { background: rgba(255, 255, 255, .06); }
.statsbar__quote blockquote { margin: 0; font-family: var(--f-head); font-size: 1.5rem; font-weight: var(--w-semi); line-height: 1.35; }
.statsbar__quote figcaption { display: flex; gap: 10px; margin-top: 16px; font-size: var(--t-label); }
.statsbar__quote-name { font-weight: var(--w-semi); }
.statsbar__quote-role { color: var(--c-muted); }

/* 23. C16 — Mission ------------------------------------------------------ */

.mission { padding: var(--section-y-loose) var(--gutter); background: var(--c-white); }
.mission__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.mission__statement {
  margin: 24px 0 0; max-width: 22ch;
  font-family: var(--f-head); font-size: var(--t-3xl); font-weight: var(--w-semi);
  line-height: 1.15; letter-spacing: -0.03em; color: var(--c-ink-deep);
  text-wrap: balance;
}
.mission__sub { margin: 20px 0 0; max-width: 68ch; font-size: var(--t-base); line-height: 1.625; color: var(--c-muted); }
.mission__values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-8); margin: 56px 0 0; padding: 0; list-style: none; }
.mission__value { margin: 0; }
.mission__num { display: block; font-family: var(--f-head); font-size: var(--t-label); font-weight: var(--w-bold); color: var(--c-orange); font-variant-numeric: tabular-nums; }
.mission__value-title { margin: 12px 0 0; font-family: var(--f-head); font-size: 1.25rem; font-weight: var(--w-semi); color: var(--c-ink-deep); }
.mission__value-sub { margin: 4px 0 0; font-size: var(--t-label); color: var(--c-orange); }
.mission__value-body { margin: 12px 0 0; font-size: var(--t-label); line-height: 1.7; color: var(--c-muted); }

/* 24. C17 — Accordion Feature List --------------------------------------- */

.acc { padding: var(--section-y) var(--gutter); background: var(--c-mist); }
.acc__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.acc__list { margin-top: 40px; }
.acc__item { border-top: 1px solid var(--c-rule); }
.acc__item:last-child { border-bottom: 1px solid var(--c-rule); }
.acc__summary {
  display: flex; align-items: center; gap: var(--s-4); padding: 24px 0;
  cursor: pointer; list-style: none;
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__num { flex: none; font-family: var(--f-head); font-size: var(--t-label); font-weight: var(--w-bold); color: var(--c-orange); font-variant-numeric: tabular-nums; }
.acc__titles { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.acc__title { font-family: var(--f-head); font-size: 1.25rem; font-weight: var(--w-semi); color: var(--c-ink-deep); }
.acc__sub { font-size: var(--t-label); color: var(--c-muted); }
.acc__sign { position: relative; flex: none; width: 20px; height: 20px; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 2px auto 2px; height: 1.5px;
  background: var(--c-ink-deep); transition: transform .18s ease;
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item[open] .acc__sign::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); padding: 0 0 28px 34px; }
.acc__text { font-size: var(--t-label); line-height: 1.7; color: var(--c-muted); }
.acc__media { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.acc__media img { width: 100%; height: 100%; object-fit: cover; }

/* 25. C18 — Rich Text ---------------------------------------------------- */

.richtext { padding: var(--section-y-tight) var(--gutter); background: var(--c-white); }
.richtext__inner { width: 100%; margin-inline: auto; max-width: min(100%, 940px); }
.richtext--narrow .richtext__inner { max-width: 56ch; }
.richtext--wide .richtext__inner { max-width: var(--wrap); }

@media (max-width: 899px) {
  .faq__inner { grid-template-columns: 1fr; gap: 32px; }
  .acc__panel { grid-template-columns: 1fr; padding-left: 0; }
}
@media (max-width: 599px) {
  .statsbar__quote { grid-template-columns: 1fr; }
  .statsbar__quote-cta { grid-column: 1; grid-row: auto; justify-self: start; }
  /* Name above role rather than beside it — side by side, "Dr. Kal" broke
     across two lines while the role wrapped in an 80px column. The extra
     .statsbar clears home.css's same-specificity rule, which loads later. */
  .statsbar .statsbar__quote figcaption { flex-direction: column; gap: 2px; }
  .dualpath__body { padding: 24px; }
}

/* --------------------------------------------------------------------------
   26. Masthead and footer
   -------------------------------------------------------------------------- */

/* ==========================================================================
   25. Masthead
   Sticky bar in the mist ground. One row on desktop; below 1200 the nav and
   phone fold into a full-height drawer, below 600 the booking button joins them.
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-mist);
  transition: box-shadow .3s ease;
}
/* Lifts off the page once scrolled, so it reads as a floating bar. */
.masthead[data-scrolled] { box-shadow: 0 6px 24px rgba(10, 31, 31, .09); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gutter);
}

/* ---------- brand lockup ---------- */
.masthead__brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.masthead__logo { display: block; width: auto; height: 36px; object-fit: contain; }

/* ---------- desktop nav ---------- */
.masthead__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.masthead__nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.masthead__nav li { position: relative; margin: 0; }
.masthead__nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 7px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: var(--w-medium);
  color: var(--c-ink-deep); text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.masthead__nav > ul > li > a:hover,
.masthead__nav > ul > li:focus-within > a { background: rgba(20, 61, 61, .06); color: var(--c-forest); }

/* Chevron on parent items — rotates when the dropdown is showing. */
.masthead__nav .menu-item-has-children > a::after {
  content: "";
  width: 7px; height: 7px; flex: none;
  border: solid currentColor; border-width: 0 1.4px 1.4px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.masthead__nav .menu-item-has-children:hover > a::after,
.masthead__nav .menu-item-has-children:focus-within > a::after { transform: translateY(1px) rotate(225deg); }

/* Dropdown */
.masthead__nav .sub-menu {
  /* display:block, not the flex the parent .masthead__nav ul rule would supply —
     regular dropdowns stack vertically. The mega panel re-overrides to grid. */
  display: block;
  position: absolute; left: 0; top: 100%;
  z-index: 40;
  min-width: 232px; margin-top: 8px; padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: 0 18px 40px rgba(10, 31, 31, .16);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.masthead__nav li:hover > .sub-menu,
.masthead__nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.masthead__nav .sub-menu li { width: 100%; }
.masthead__nav .sub-menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: var(--t-label); color: var(--c-ink-deep); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.masthead__nav .sub-menu a:hover { background: var(--c-mist); color: var(--c-forest); }

/* Conditions "mega" panel — a wide two-column grid of every condition, rather
   than a single-column dropdown (see inc/nav-mega.php). */
.masthead__nav .menu-item--mega > .sub-menu {
  left: 0;
  width: min(560px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  padding: 12px;
}
.masthead__nav .menu-item--mega > .sub-menu a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- right actions ---------- */
.masthead__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.masthead__phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-label); font-weight: var(--w-medium);
  color: var(--c-muted); text-decoration: none;
  transition: color .18s ease;
}
.masthead__phone-icon { opacity: .7; }
.masthead__phone:hover { color: var(--c-forest); }

.masthead__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 18px; border-radius: 999px;
  background: var(--c-forest); color: var(--c-white);
  font-size: var(--t-label); font-weight: var(--w-semi);
  text-decoration: none;
  transition: background .18s ease, transform .1s ease;
}
.masthead__cta:hover { background: var(--c-ink-deep); }
.masthead__cta:active { transform: translateY(1px); }

/* The bar's booking badge is a translucent disc, matching the Figma header —
   distinct from the solid-orange badge used inside content sections. */
.ahs-cta-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: var(--c-white);
}

/* ---------- hamburger ---------- */
.masthead__toggle {
  display: none;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--c-rule); border-radius: 12px;
  background: var(--c-white); cursor: pointer;
  transition: border-color .18s ease;
}
.masthead__toggle { transition: opacity .22s ease, border-color .18s ease; }
.masthead__toggle:hover { border-color: var(--c-forest); }
.masthead__bars { display: block; position: relative; width: 20px; height: 12px; margin: 0 auto; }
.masthead__bars span {
  position: absolute; left: 0; display: block;
  width: 100%; height: 1.8px; border-radius: 2px;
  background: var(--c-ink-deep);
}
.masthead__bars span:nth-child(1) { top: 0; }
.masthead__bars span:nth-child(2) { top: 5px; }
.masthead__bars span:nth-child(3) { top: 10px; }
/* The drawer carries its own close button, so the bar toggle simply fades away
   under it — cleaner than morphing an icon that the panel immediately covers. */
[data-menu-open] .masthead__toggle { opacity: 0; pointer-events: none; }

/* ---------- mobile drawer ---------- */
/* The hidden attribute is the no-JS and pre-open resting state; the class
   selector below would otherwise beat the UA hidden rule and show the panel. */
.masthead__backdrop[hidden], .masthead__drawer[hidden] { display: none; }

.masthead__backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 20, 20, .55);
  opacity: 0;
  transition: opacity .4s ease;
  will-change: opacity;
}
[data-menu-open] .masthead__backdrop { opacity: 1; }

.masthead__drawer {
  position: fixed; top: 0; right: 0; z-index: 61;
  display: flex; flex-direction: column;
  width: min(90vw, 400px); height: 100%;
  background: linear-gradient(180deg, var(--c-forest) 0%, var(--c-forest-deep) 100%);
  color: var(--c-white);
  box-shadow: -16px 0 40px rgba(6, 20, 20, .32);
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
  backface-visibility: hidden;
}
[data-menu-open] .masthead__drawer { transform: translateX(0); }

/* Contents settle in just behind the panel — a gentle rise, GPU-only. */
.masthead__drawer-scroll > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
[data-menu-open] .masthead__drawer-scroll > * { opacity: 1; transform: none; transition-delay: .1s; }

/* Light strip so the full dark-wordmark lockup stays legible over the dark
   drawer body. */
.masthead__drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  background: var(--c-mist);
}
.masthead__brand--drawer .masthead__logo { height: 34px; }

.masthead__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--c-rule); border-radius: 10px;
  background: var(--c-white); color: var(--c-ink-deep); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.masthead__close:hover { border-color: var(--c-forest); color: var(--c-forest); }

.masthead__drawer-scroll {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* drawer menu — large tap targets, submenus as accordions */
.masthead__drawer-menu { margin: 0; padding: 0; list-style: none; }
.masthead__drawer-menu li { margin: 0; }
.masthead__drawer-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.masthead__drawer-menu > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px;
  font-family: var(--f-head); font-size: 1.15rem; font-weight: var(--w-medium);
  color: var(--c-white); text-decoration: none;
}
.masthead__drawer-menu > li > a:hover { color: var(--c-orange); }
.masthead__drawer-menu .menu-item-has-children > a::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border: solid rgba(255, 255, 255, .6); border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg); transition: transform .26s ease;
}
.masthead__drawer-menu .menu-item-has-children > a[aria-expanded="true"]::after { transform: rotate(225deg); }

.masthead__drawer-menu .sub-menu {
  margin: 0; padding: 0; list-style: none;
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}
.masthead__drawer-menu .sub-menu a {
  display: flex; align-items: center;
  padding: 11px 2px 11px 0;
  font-family: var(--f-body); font-size: var(--t-base); font-weight: var(--w-body);
  color: rgba(255, 255, 255, .72); text-decoration: none;
}
.masthead__drawer-menu .sub-menu a::before {
  content: ""; flex: none; width: 14px; height: 1px; margin-right: 11px;
  background: var(--c-orange); opacity: .75;
}
.masthead__drawer-menu .sub-menu a:hover { color: var(--c-white); }
.masthead__drawer-menu .sub-menu li:last-child a { padding-bottom: 16px; }

/* actions */
.masthead__drawer-actions { display: grid; gap: 10px; margin-top: 26px; }
.masthead__drawer-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px; border-radius: 999px;
  background: var(--c-orange); color: var(--c-white);
  font-size: var(--t-body); font-weight: var(--w-semi); text-decoration: none;
  transition: filter .18s ease;
}
.masthead__drawer-cta .ahs-cta-badge { background: rgba(255, 255, 255, .24); }
.masthead__drawer-cta:hover { filter: brightness(1.06); }
.masthead__drawer-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; border-radius: 999px;
  border: 1px solid var(--c-rule-dark); color: var(--c-white);
  font-size: var(--t-body); font-weight: var(--w-semi); text-decoration: none;
  transition: background .18s ease;
}
.masthead__drawer-call:hover { background: rgba(255, 255, 255, .06); }

/* contact footer */
.masthead__drawer-contact { margin-top: 22px; }
.masthead__drawer-line {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: var(--t-label); line-height: 1.5; color: rgba(255, 255, 255, .6);
}
.masthead__drawer-line svg { flex: none; margin-top: 2px; color: var(--c-orange); }

/* The bar sheds one element at a time rather than collapsing all at once:
   the nav and phone go at the tablet tier, the booking button only on phones,
   where the brand and toggle already fill the row. All fold into the drawer. */
@media (max-width: 1499px) {
  .masthead__nav, .masthead__phone { display: none; }
  .masthead__toggle { display: block; }
  .masthead__inner { justify-content: space-between; }
}

@media (max-width: 599px) {
  .masthead__cta { display: none; }
  .masthead__inner { gap: var(--s-4); padding-block: 12px; }
  .masthead__logo { height: 34px; }
}

/* Above the drawer tier the panel never opens, so keep its transition off the
   main thread — it is display:none there anyway, this is belt and braces. */
@media (min-width: 1366px) {
  .masthead__drawer, .masthead__backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead__drawer, .masthead__backdrop { transition: none; }
  .masthead__drawer-scroll > * { opacity: 1; transform: none; transition: none; }
}

/* Scroll lock while the drawer is open. position:fixed holds the page still
   without the iOS rubber-band that overflow:hidden alone leaves; JS stores the
   scroll offset in the inline top and restores it on close. */
body.ahs-menu-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* --- footer --- */

.sitefoot { background: var(--c-forest-deep); color: var(--c-white); }

.sitefoot__inner {
  display: grid;
  grid-template-columns: minmax(0, 420fr) minmax(0, 880fr);
  gap: 64px;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 72px var(--gutter) 56px;
}

.sitefoot__logo { width: auto; height: 44px; object-fit: contain; }
.sitefoot__wordmark { margin: 0; font-family: var(--f-head); font-size: 1.25rem; font-weight: var(--w-bold); }
.sitefoot__blurb { margin: 20px 0 0; max-width: 42ch; font-size: var(--t-label); line-height: 1.7; color: rgba(255, 255, 255, .55); }
.sitefoot__phone { margin: 20px 0 0; font-size: var(--t-body); font-weight: var(--w-bold); }
.sitefoot__phone a { color: var(--c-white); text-decoration: none; }

.sitefoot__address { display: flex; gap: 10px; margin: 18px 0 0; font-style: normal; font-size: var(--t-label); line-height: 1.6; color: rgba(255, 255, 255, .7); }
.sitefoot__address-ico { flex: none; margin-top: 2px; color: var(--c-orange); }
.sitefoot__directions { display: inline-block; margin-top: 12px; font-size: var(--t-label); color: var(--c-white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.sitefoot__directions:hover { color: var(--c-orange); border-color: var(--c-orange); }

.sitefoot__social { display: flex; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.sitefoot__social li { margin: 0; }
.sitefoot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .7);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sitefoot__social a:hover { border-color: var(--c-orange); color: var(--c-orange); }

.sitefoot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--s-8); }
.sitefoot__col-heading {
  margin: 0 0 16px;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.sitefoot__col ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sitefoot__col li { margin: 0; }
.sitefoot__col a { font-size: var(--t-label); color: rgba(255, 255, 255, .72); text-decoration: none; }
.sitefoot__col a:hover { color: var(--c-white); }

.sitefoot__bar { border-top: 1px solid rgba(255, 255, 255, .1); }
.sitefoot__bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 22px var(--gutter);
}
.sitefoot__legal { margin: 0; font-size: var(--t-sm); color: rgba(255, 255, 255, .45); }
.sitefoot__bar-left { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.sitefoot__credit { margin: 0; font-size: var(--t-sm); color: rgba(255, 255, 255, .45); }
.sitefoot__credit a { color: rgba(255, 255, 255, .78); font-weight: var(--w-semi); text-decoration: none; }
.sitefoot__credit a:hover { color: var(--c-orange); }
.sitefoot__legal-nav { display: flex; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.sitefoot__legal-nav li { margin: 0; }
.sitefoot__legal-nav a { font-size: var(--t-sm); color: rgba(255, 255, 255, .45); text-decoration: none; }
.sitefoot__legal-nav a:hover { color: var(--c-white); }

@media (max-width: 899px) {
  .sitefoot__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 32px; }
}

/* Keep the footer's legal links clear of the Blazeo live-chat widgets, which
   only load on staging/production. :has() scopes each adjustment to when that
   specific widget is actually in the DOM, so local dev and the default design
   layout stay untouched.

   Narrow screens: Blazeo pins a full-width fixed bar to the bottom
   (#apexchat_bar_invitation_wrapper, ~62px) that would cover the links — reserve
   space below them so they clear it. */
body:has(#apexchat_bar_invitation_wrapper) .sitefoot__bar-inner {
  padding-bottom: 90px;
}

/* Wider screens: Blazeo shows an edge tab (#apexchat_tab_invitation_wrapper)
   plus a bottom-right invitation bubble that sits on top of the right-aligned
   legal links and makes them unclickable. Pull the bar's content left so the
   links leave the bottom-right corner the chat occupies. */
body:has(#apexchat_tab_invitation_wrapper) .sitefoot__bar-inner {
  justify-content: flex-start;
  column-gap: var(--s-8);
}

/* --------------------------------------------------------------------------
   27. Blog article

   Body stays in post_content, so this styles editor output rather than a
   component. The contents list is generated from the H2s already in the post.
   -------------------------------------------------------------------------- */

.article { background: var(--c-white); }

/* Two columns from the top — article left, sticky sidebar right (Figma 1:4383). */
.article__grid {
  display: grid;
  grid-template-columns: minmax(0, 879fr) minmax(0, 402fr);
  column-gap: 40px;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  align-items: start;
}
.article__col { min-width: 0; }

.article__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: var(--w-semi);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--c-ink-deep);
  text-wrap: balance;
}
.article__readtime { margin: 16px 0 0; font-size: var(--t-label); font-weight: var(--w-semi); color: var(--c-orange); }

.article__cover { margin: 28px 0 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-mist); }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }

.article__main { margin-top: 36px; font-size: var(--t-body); line-height: 1.8; color: var(--c-ink-soft); }
.article__main :is(h2, h3) { color: var(--c-ink-deep); scroll-margin-top: 96px; }
.article__main h2 { margin-top: var(--s-12); font-family: var(--f-head); font-size: 1.6rem; }
.article__main h3 { margin-top: var(--s-8); font-family: var(--f-head); font-size: 1.25rem; }
.article__main p { margin: 0 0 20px; }
.article__main img { border-radius: 16px; height: auto; }
.article__main a { color: var(--c-orange); }
/* Lead-in first paragraph, echoing the Figma's ruled intro block. */
.article__main > p:first-of-type {
  padding-left: 22px; border-left: 3px solid var(--c-orange);
  font-size: 1.05rem; color: var(--c-ink-deep);
}

/* -- Sidebar -- */
.article__aside { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 40px; }
.article__aside-heading {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: var(--f-head); font-size: 1.15rem; font-weight: var(--w-semi); color: var(--c-ink-deep);
}
.article__aside-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c-orange); }

.article__toc ul { list-style: none; margin: 0; padding: 0; }
.article__toc li { margin: 0; }
.article__toc-link {
  display: block; padding: 12px 16px; border-left: 3px solid transparent;
  font-size: var(--t-label); line-height: 1.4; color: var(--c-muted); text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.article__toc-link:hover { color: var(--c-forest); }
.article__toc-link.is-active { border-left-color: var(--c-orange); color: var(--c-ink-deep); font-weight: var(--w-semi); background: var(--c-mist); border-radius: 0 8px 8px 0; }

.article__popular { display: flex; flex-direction: column; }
.article__popular-list { list-style: none; margin: 8px 0 0; padding: 0; }
.article__pop {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px;
  text-decoration: none; color: inherit; transition: background .15s ease;
}
.article__pop:hover { background: var(--c-mist); }
.article__pop-thumb { flex: none; width: 84px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--c-mist); }
.article__pop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article__pop-empty { display: block; width: 100%; height: 100%; }
.article__pop-text { flex: 1; min-width: 0; }
.article__pop-title { display: block; font-family: var(--f-head); font-size: .98rem; font-weight: var(--w-semi); line-height: 1.25; color: var(--c-ink-deep); }
.article__pop-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: var(--t-xs); line-height: 1.5; color: var(--c-muted);
}
.article__pop-arrow { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; color: var(--c-ink-deep); }
.article__pop:hover .article__pop-arrow { color: var(--c-orange); }
.article__viewall {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 11px 20px; border-radius: 999px; background: var(--c-forest); color: var(--c-white);
  font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none;
}
.article__viewall:hover { background: var(--c-forest-deep); }

/* -- What to read next -- */
.readnext { padding: var(--section-y) var(--gutter); background: var(--c-white); border-top: 1px solid var(--c-rule); }
.readnext__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.readnext__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.readnext__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--t-label); font-weight: var(--w-semi); color: var(--c-muted); }
.readnext__marker { flex: none; width: 28px; height: 4px; border-radius: 999px; background: var(--c-orange); }
.readnext__heading { margin: 14px 0 0; font-family: var(--f-head); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.05; color: var(--c-ink-deep); }
.readnext__browse { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--c-forest); color: var(--c-white); font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none; }
.readnext__browse:hover { background: var(--c-forest-deep); }

.readnext__grid { display: grid; grid-template-columns: minmax(0, 673fr) minmax(0, 552fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.readnext__feature { display: block; text-decoration: none; color: inherit; }
.readnext__feature-media { display: block; aspect-ratio: 673 / 429; border-radius: 20px; overflow: hidden; background: var(--c-mist); }
.readnext__feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.readnext__feature:hover .readnext__feature-media img { transform: scale(1.03); }
.readnext__feature-title { display: block; margin-top: 20px; font-family: var(--f-head); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: var(--w-semi); line-height: 1.2; color: var(--c-ink-deep); }
.readnext__feature-date { display: block; margin-top: 10px; font-size: var(--t-sm); color: var(--c-muted); }

.readnext__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 30px; }
.readnext__row { display: flex; gap: 20px; text-decoration: none; color: inherit; }
.readnext__row-thumb { flex: none; width: 150px; height: 108px; border-radius: 14px; overflow: hidden; background: var(--c-mist); }
.readnext__row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.readnext__row-text { flex: 1; min-width: 0; }
.readnext__row-date { display: block; font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--c-orange); }
.readnext__row-title { display: block; margin-top: 6px; font-family: var(--f-head); font-size: 1.1rem; font-weight: var(--w-semi); line-height: 1.3; color: var(--c-ink-deep); }
.readnext__row-author { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--t-xs); color: var(--c-muted); }
.readnext__avatar { flex: none; }
.readnext__empty { display: block; width: 100%; height: 100%; background: var(--c-mist); }

@media (max-width: 999px) {
  .article__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .article__aside { position: static; }
  .readnext__grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .readnext__head { flex-direction: column; align-items: flex-start; }
  .readnext__row-thumb { width: 110px; height: 84px; }
}

/* --------------------------------------------------------------------------
   30. Motion — scroll reveal

   Flash-free by construction. Only elements that begin BELOW the fold are
   hidden, and script hides them while they are still off-screen — so nothing is
   ever visible-then-hidden in view (that one-frame blink was the old bug).
   Above-the-fold content is never touched and paints instantly. Reveal is a
   transition, never an opacity-from-0 keyframe, so it cannot blink. Several
   independent mechanisms reveal (observer + scroll sweep + load + a delayed
   sweep) and a try/catch fallback, so content can never stay hidden.

   .is-pre carries the hidden state and does NOT depend on .js-motion, so JS can
   hide off-screen elements first and only then switch transitions on — the hide
   is instant, the reveal animates.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] {
    transition:
      opacity .7s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
      transform .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
  }
  [data-reveal].is-pre { opacity: 0; transform: translate3d(0, 26px, 0); }

  /* Media fades while its image eases out of a slight zoom. */
  [data-reveal="media"].is-pre { transform: none; }
  .js-motion [data-reveal="media"] img {
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
  }
  [data-reveal="media"].is-pre img { transform: scale(1.06); }
}

/* The service list's left column holds its place while the rows scroll past.
   Desktop only — below the two-column breakpoint it is simply the first block
   in a single column and must scroll normally. */
@media (min-width: 900px) {
  .svclist__text {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* Reviews carousel controls. Scrolling is native; the arrows just nudge the
   track by one card, so the row still works with a trackpad or keyboard when
   JavaScript has not run. */
.reviews__controls { display: flex; align-items: center; gap: 8px; }
.reviews__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--c-rule); border-radius: 999px;
  background: var(--c-white); color: var(--c-ink-deep);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.reviews__arrow:hover { background: var(--c-mist); border-color: var(--c-forest); }
.reviews__arrow[disabled] { opacity: .35; cursor: default; }

@media (min-width: 1600px) { .reviews__track { --per: 4.5; } }
@media (max-width: 899px)  { .reviews__track { --per: 2.2; } }
@media (max-width: 599px)  { .reviews__track { --per: 1.15; } }

/* ============================================================================
   Shared lead-page header — used by simple standalone pages (Patient Forms,
   Testimonials, Find a Doctor). A compact dark band with an orange eyebrow.
   ========================================================================== */
.leadpage__head { padding: var(--section-y) var(--gutter); background: var(--c-forest-deep); color: var(--c-white); }
.leadpage__head-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; text-align: center; }
.leadpage__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: var(--t-label); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.leadpage__eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 999px; background: var(--c-orange); }
.leadpage__title { margin: 16px 0 0; font-family: var(--f-head); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: var(--w-bold); line-height: 1.04; letter-spacing: -.02em; color: var(--c-white); }
.leadpage__sub { margin: 16px auto 0; max-width: 46rem; font-size: var(--t-base); line-height: 1.6; color: rgba(255, 255, 255, .68); }

/* ---------- Patient Forms (page-patient-forms.php) ---------- */
.pforms { padding: var(--section-y) var(--gutter); background: var(--c-white); }
.pforms__inner { width: 100%; max-width: 900px; margin-inline: auto; text-align: center; }
.pforms__heading { margin: 0; font-family: var(--f-head); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: var(--w-semi); letter-spacing: -.01em; color: var(--c-ink-deep); }
.pforms__body { margin: 16px auto 0; max-width: 40rem; font-size: var(--t-base); line-height: 1.7; color: var(--c-muted); }
.pforms__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 15px 26px; border-radius: 999px; background: var(--c-orange); color: var(--c-white); font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none; transition: background .15s ease, transform .1s ease; }
.pforms__cta:hover { background: #d97400; transform: translateY(-1px); }
.pforms__embed { margin-top: 40px; border-radius: 20px; overflow: hidden; border: 1px solid var(--c-rule); background: var(--c-mist); }
.pforms__embed iframe { width: 100%; min-height: 820px; border: 0; display: block; }

/* ---------- Testimonials page (page-testimonials.php) ---------- */
.ptesti { padding-block: var(--section-y); }

/* ============================================================================
   Medical Services mega — titled columns, one per service_category.
   (see inc/nav-services-mega.php; rendered at nav depth 0)
   ========================================================================== */

/* -- desktop panel -- */
.masthead__nav .menu-item--mega-cols > .sub-menu {
  left: 0;
  display: flex;
  align-items: stretch;      /* equal-height columns so the divider runs full height */
  gap: 0;
  /* size to the intrinsic content width so the panel background always
     contains the columns (a plain auto width shrink-fits before the grid's
     tracks expand, letting the wellness column spill past the panel edge). */
  width: max-content;
  max-width: calc(100vw - 40px);
  min-width: 0;
  padding: 24px 28px;
}
.masthead__nav .menu-item--mega-cols > .sub-menu > li {   /* a column */
  width: auto;
  flex: 0 0 auto;
  min-width: 200px;
  padding: 0 32px;
}
.masthead__nav .menu-item--mega-cols > .sub-menu > li + li {
  border-left: 1px solid var(--c-rule);   /* hairline between category groups */
}
/* The wellness category carries most of the services. Flow it into two
   balanced columns so the panel reads as a wide, tidy grid instead of one
   tall stack; the injury column stays single. */
.masthead__nav .menu-item--mega-cols .menu-col--wellness > .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 28px;
  align-content: start;
}
/* column heading — a non-navigating category title */
.masthead__nav .menu-col > a {
  display: block;
  padding: 6px 12px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
  cursor: pointer;
  transition: color .15s;
}
.masthead__nav .menu-col > a:hover { color: var(--c-forest); }
.masthead__nav .menu-col > a::after { display: none !important; }   /* no chevron */
/* third-level list sits statically beneath its heading, not as a flyout.
   visibility is inherited (not forced visible) so the columns follow the
   mega panel's open/closed state — otherwise a forced-visible child overrides
   the closed panel's visibility:hidden and leaves an invisible but still
   hover-hittable block hanging over the page below the nav. */
.masthead__nav .menu-col > .sub-menu {
  position: static;
  display: block;
  opacity: 1;
  visibility: inherit;
  transform: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* -- mobile drawer: stacked columns with static category sub-headings -- */
.masthead__drawer-menu .menu-col > a {
  padding: 14px 2px 4px;
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
}
.masthead__drawer-menu .menu-col > a::after { display: none !important; }
.masthead__drawer-menu .menu-col > a::before { display: none; }   /* no orange dash on the title */
.masthead__drawer-menu .menu-col > .sub-menu { max-height: none; overflow: visible; }

/* ============================================================================
   All-reviews page (page-testimonials.php) — every review in a grid.
   Reuses .reviews__card; the dark "lead" card is neutralised in this context.
   ========================================================================== */
.allreviews { padding: var(--section-y) var(--gutter); background: var(--c-white); }
.allreviews__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.allreviews__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.allreviews__grid .reviews__card { min-height: 0; }
.allreviews__grid .reviews__card:first-child { background: var(--c-white); border-color: #e8e8e8; }
.allreviews__grid .reviews__card:first-child .reviews__quote { color: var(--c-ink-deep); }
.allreviews__grid .reviews__card:first-child .reviews__more { color: var(--c-forest); }
.allreviews__grid .reviews__card:first-child .reviews__by { border-top-color: #e8e8e8; }
.allreviews__grid .reviews__card:first-child .reviews__avatar { background: var(--c-mist); color: var(--c-forest); }
.allreviews__grid .reviews__card:first-child .reviews__name { color: var(--c-ink-deep); }
.allreviews__grid .reviews__card:first-child .reviews__ago { color: #b5b5b5; }

/* Text-only hero (legal / utility pages): a compact, centered single-column
   band rather than a tall two-column card with an empty media side. */
.hero--textonly .hero__card { min-height: 0; padding: clamp(40px, 6vw, 68px) clamp(28px, 5vw, 56px); }
.hero--textonly .hero__grid { grid-template-columns: 1fr; gap: 0; }
.hero--textonly .hero__media { display: none; }
.hero--textonly .hero__content { text-align: center; }
.hero--textonly .hero__eyebrow { justify-content: center; }
.hero--textonly .hero__heading,
.hero--textonly .hero__body { margin-inline: auto; }
.hero--textonly .hero__ctas { justify-content: center; }

/* Testimonials — full grid display (reviews component with display=grid). */
.reviews__grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.reviews__grid .reviews__card { min-height: 0; }
.reviews--grid .reviews__card:first-child { background: var(--c-white); border-color: #e8e8e8; }
.reviews--grid .reviews__card:first-child .reviews__quote { color: var(--c-ink-deep); }
.reviews--grid .reviews__card:first-child .reviews__more { color: var(--c-forest); }
.reviews--grid .reviews__card:first-child .reviews__by { border-top-color: #e8e8e8; }
.reviews--grid .reviews__card:first-child .reviews__avatar { background: var(--c-mist); color: var(--c-forest); }
.reviews--grid .reviews__card:first-child .reviews__name { color: var(--c-ink-deep); }
.reviews--grid .reviews__card:first-child .reviews__ago { color: #b5b5b5; }

/* ============================================================================
   C20 — Embed / Form (template-parts/sections/embed.php)
   ========================================================================== */
.embed { padding: var(--section-y) var(--gutter); background: var(--c-white); }
.embed--light { background: var(--c-mist); }
.embed__inner { width: 100%; max-width: min(100%, 900px); margin-inline: auto; }
.embed--center .embed__inner { text-align: center; }
.embed--center .embed__eyebrow { justify-content: center; }
.embed__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: var(--t-label); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); }
.embed__eyebrow::before, .embed__marker { content: ""; width: 28px; height: 4px; border-radius: 999px; background: var(--c-orange); }
.embed__marker { display: none; }
.embed__heading { margin: 14px 0 0; font-family: var(--f-head); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: var(--w-semi); letter-spacing: -.01em; color: var(--c-ink-deep); }
.embed__body { margin: 16px auto 0; max-width: 44rem; font-size: var(--t-base); line-height: 1.7; color: var(--c-muted); }
.embed--left .embed__body { margin-inline: 0; }
.embed__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 15px 26px; border-radius: 999px; background: var(--c-orange); color: var(--c-white); font-size: var(--t-label); font-weight: var(--w-semi); text-decoration: none; transition: background .15s ease, transform .1s ease; }
.embed__cta:hover { background: #d97400; transform: translateY(-1px); }
.embed__frame { margin-top: 38px; border-radius: 20px; overflow: hidden; border: 1px solid var(--c-rule); background: var(--c-mist); text-align: left; }
.embed__frame iframe { width: 100%; min-height: inherit; height: 100%; border: 0; display: block; }

/* C23 — Store Locator (Store Locator Widgets embed). */
.storelocator { padding: var(--section-y) var(--gutter); background: var(--c-white); }
.storelocator__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.storelocator__heading { margin: 0 0 24px; font-family: var(--f-head); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: var(--w-semi); color: var(--c-ink-deep); text-align: center; }
.storelocator__widget { border-radius: 20px; overflow: hidden; border: 1px solid var(--c-rule); background: var(--c-mist); min-height: 620px; }
#storelocatorwidget { min-height: 620px; }