/* ==========================================================================
   Gericke-Nesbitt Regenerative Medicine Inc. — components.css
   Reusable, theme-aware component & section styles. Monochrome only.
   Every class here is intended to be reused across the whole site.
   Depends on tokens from theme.css.
   ========================================================================== */

@font-face {
  font-family: 'Oxygen Mono';
  src: url('../fonts/OxygenMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.section {
  padding-block: var(--space-section);
  background: var(--c-bg);
  color: var(--c-fg);
}
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* Section heading row: title left, controls/nav right */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section__head h2 { margin-bottom: 0.25rem; }

/* Small uppercase kicker above headings */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}

/* Two-column split that stacks on small screens */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split--media { grid-template-columns: 1fr 3fr; }   /* 25 / 75 — narrow text, wide form */
@media (max-width: 56rem) { .split { grid-template-columns: 1fr; } }

/* Horizontal cluster for button groups */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

/* Generic responsive grids (kept compatible with existing markup) */
.grid    { display: grid; gap: 1.5rem; }
.grid-2  { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid-3  { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* --------------------------------------------------------------------------
   Glass utility
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* --------------------------------------------------------------------------
   Buttons & link styles
   -------------------------------------------------------------------------- */
.btn {
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.btn--primary:hover { background: var(--c-fg-soft); }

.btn--ghost {
  background: transparent;
  color: var(--c-fg);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover { background: var(--c-surface); }

.btn--sm { --btn-pad-y: 0.6rem; --btn-pad-x: 1.05rem; }
.btn--block { width: 100%; justify-content: center; }

/* Inline link with an arrow drawn via ::after */
.link-arrow {
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-fg);
  border-bottom: 1px solid currentColor;
  transition: border-color var(--t-fast) var(--ease);
}
.link-arrow:hover { border-color: transparent; }

/* Shared arrow glyph (right-pointing) used by link-arrow & row-link */
:root {
  --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>');
}

/* --------------------------------------------------------------------------
   Site header — glass, fully-rounded floating nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
}

.site-nav {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.7rem 0.55rem 1.25rem;
  border-radius: var(--radius-sm);
}

.site-nav__logo img { height: 2rem; width: auto; display: block; }
.site-nav__logo {
  grid-column: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--c-fg);
  white-space: nowrap;
}
.site-nav__logo span { font-weight: 400; color: var(--c-muted); }

.brand-logomark {
  width: 24px;
  margin: 0 auto;
}

.site-nav__links {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__links a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--c-fg);
}

.site-nav__actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: end;
}

/* 9-dot grid toggle button (circle) */
.grid-toggle {
  --d: 2.75rem;
  width: var(--d);
  height: var(--d);
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--c-fg);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.grid-toggle__dots {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 3px;
}
.grid-toggle__dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease);
}

.grid-toggle:hover .grid-toggle__dots i {
  background: var(--c-muted);
}

.grid-toggle[aria-expanded="true"] .grid-toggle__dots i { background: var(--c-muted); }

/* Mega menu panel */
.mega-menu {
  position: absolute;
  top: calc(100% - 0.25rem);
  /* Match the site-nav: same side gutters as the header padding, capped at
     --maxw and centred, so the panel lines up with the nav on every screen. */
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  max-width: var(--maxw);
  margin-inline: auto;
  margin-top: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radius-sm);
  transform-origin: top center;
  animation: mega-in var(--t-med) var(--ease);
}
.mega-menu[hidden] { display: none; }
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 40rem) { .mega-menu__grid { grid-template-columns: 1fr; gap: 1rem; } }
.mega-menu__col h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}
.mega-menu__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; border-top: 1px solid var(--c-border);
    padding-top: 1rem;}
.mega-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--c-fg);
  transition: background var(--t-fast) var(--ease);
}
.mega-link:hover { opacity: .75; }
.mega-link img {
  width: 3rem; height: 2.25rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
  filter: grayscale(1);
}
.mega-link span { font-weight: 600; font-size: 0.95rem; }
.mega-link small { display: block; font-weight: 400; color: var(--c-muted); }

/* Hide the centre links on smaller screens; mega menu covers navigation */
@media (max-width: 60rem) {
  .site-nav__links { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--space-section);
  position: relative;
  background: transparent;            /* let the bleed background show through */
  /* Swap --hero-bg for any colour / gradient / image (or `transparent` for none).
     --hero-bleed-top controls how far the background reaches up behind the nav
     (≈ the header height; a touch extra guarantees full coverage). */
  --hero-bg: var(--c-bg);
  --hero-bleed-top: 6rem;
}
/* Full-width background band that extends up behind the sticky nav. */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(-1 * var(--hero-bleed-top));
  z-index: -1;
  background: var(--hero-bg);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) { .hero__grid { grid-template-columns: 1fr; } }

/* Bleed-right variant: left content + full-bleed right image behind nav */
.hero--bleed-right {
  position: relative;
  min-height: clamp(28rem, 70vh, 52rem);
  padding: 0;
}
.hero--bleed-right .hero__content {
  position: relative;
  z-index: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-right: clamp(2rem, 4vw, 3rem);
  padding-left: max(1.5rem, calc((100vw - var(--maxw, 72rem)) / 2 + 1.5rem));
}
.hero__bleed {
  position: absolute;
  top: calc(-1 * var(--hero-bleed-top, 6rem));
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 0;
  overflow: hidden;
}
.hero__bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__bleed-img.is-active { opacity: 1; }
@media (max-width: 56rem) {
  .hero--bleed-right .hero__content { width: 100%; padding-right: clamp(1rem, 3vw, 2rem); }
  .hero__bleed { position: relative; top: 0; width: 100%; aspect-ratio: 4 / 3; }
}

.hero__title { margin-bottom: 1.25rem; }
.hero__cycle {
  display: inline-block;
  position: relative;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.hero__cycle.is-swapping { opacity: 0; transform: translateY(0.25em); }

.hero__lede { font-size: 1.1rem; max-width: 38ch; }
.hero__note { margin-top: 1.5rem; font-size: 0.9rem; color: var(--c-muted); }
.hero__note a { color: var(--c-muted); text-decoration: none; }
.hero__stars { letter-spacing: 0.05em; }

/* Spotlight carousel: stacked cards, active one centred, others tucked behind */
.hero__media { position: relative; }
.spotlight {
  position: relative;
  height: clamp(22rem, 42vw, 30rem);
  perspective: 1200px;
}
.service-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(85%, 26rem);
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-fg);
  transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease),
              filter var(--t-slow) var(--ease);
  will-change: transform, opacity;
}
.service-card__tag {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-muted);
}
.service-card h3 { margin: 0; font-size: 1.5rem; }
.service-card p  { margin: 0; color: var(--c-fg-soft); font-size: 0.95rem; }
.service-card__num {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 0.85rem; color: var(--c-muted);
}

/* Stack positions, driven by JS via data-pos */
.service-card[data-pos="active"] {
  transform: translateX(0) translateZ(0) scale(1);
  opacity: 1;
  z-index: 3;
  filter: none;
}
.service-card[data-pos="next"] {
  transform: translateX(14%) translateZ(-120px) scale(0.9);
  opacity: 0.55;
  z-index: 2;
  filter: blur(2px) grayscale(0.4);
}
.service-card[data-pos="prev"] {
  transform: translateX(-14%) translateZ(-220px) scale(0.82);
  opacity: 0.3;
  z-index: 1;
  filter: blur(4px) grayscale(0.6);
}

/* --------------------------------------------------------------------------
   Marquee (logos + slim value bar) with edge fades
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  animation: marquee-scroll var(--marquee-dur, 32s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track holds two copies */
}

/* Logo strip section */
.logo-strip__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 44rem) {
  .logo-strip__inner { grid-template-columns: 1fr; gap: 1rem; }
}
.logo-strip__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  white-space: nowrap;
}
.logo {
  height: 2.5rem;
  width: auto;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.logo:hover { filter: grayscale(0) saturate(1); opacity: 1; }

/* Slim value marquee bar */
.value-bar { padding-block: 0.9rem; border-block: 1px solid var(--c-border); }
.value-bar .marquee__track { animation-duration: var(--marquee-dur, 28s); gap: 0; }
.value-bar__item {
  display: inline-flex;
  align-items: center;
  font-family: 'Oxygen Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-inline: 1.5rem;
  /* subtle vertical divider centred in the gap between values */
  border-inline-end: 1px solid var(--c-border);
}

/* --------------------------------------------------------------------------
   About + reviews
   -------------------------------------------------------------------------- */
:root {
  --icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
}
.check-list { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 0.75rem; }
.check-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--c-fg-soft);
}
/* Accent disc */
.check-list li::before {
  content: "";
  flex: none;
  margin-top: 0.15em;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--c-accent);
}
/* Tick drawn on top of the disc, painted in the on-accent colour */
.check-list li::after {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.25rem; height: 1.25rem;
  background: var(--c-on-accent);
  -webkit-mask: var(--icon-check) center / 0.8rem no-repeat;
          mask: var(--icon-check) center / 0.8rem no-repeat;
}

.reviews-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0.5rem;
  text-align: center;
}
.reviews-card__stars {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--c-fg);
}
.reviews-card__meta { color: var(--c-muted); font-size: 0.9rem; margin: 0; }
.reviews-card a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Cards (use-case / treatment carousel cards)
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: 0;
  border: none;
  background: var(--c-surface);
  color: var(--c-fg);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.card__read {
  margin-top: 24px;
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fg);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: border-color var(--t-fast) var(--ease);
}
.card__read:hover { border-color: transparent; }
.card__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;            /* fill the box without distorting the photo */
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  margin-bottom: 0.5rem;
}
.card h3 { margin: 0; font-size: 1.2rem; }
.card p  { margin: 0; color: var(--c-fg-soft); font-size: 0.95rem; }
.card__tag { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }

/* --------------------------------------------------------------------------
   Carousel that bleeds past the container on the right, with a fade edge
   -------------------------------------------------------------------------- */
/* The carousel lives inside a .container. Its track keeps its LEFT edge at the
   container's left padding, but extends its RIGHT edge out to the viewport edge
   so cards bleed off the right. `50% - 50vw` is negative whenever the container
   is narrower than the viewport, which pulls the right edge outward. */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: 0.5rem;
  margin-right: calc(50% - 50vw);            /* bleed right to viewport edge */
  padding-right: clamp(1rem, 6vw, 5rem);     /* breathing room at the scroll end */
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  flex: 0 0 clamp(15rem, 22vw, 19rem);
  scroll-snap-align: start;
}
/* Treatment carousel cards drop the card chrome: no border, background,
   rounded corners, or box padding — and the photo loses its corner radius.
   The static condition grid (.condition-grid) reuses the same chrome-free look. */
.carousel__track .card,
.condition-grid .card {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.carousel__track .card__media,
.condition-grid .card__media { border-radius: 0; }
/* Condition cards are informational, not links — no hover lift. */
.condition-grid .card:hover { transform: none; }
/* Two-column grid of condition cards (no carousel / overflow). */
.condition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 30rem) {
  .condition-grid { grid-template-columns: 1fr; }   /* single column on small phones */
}
/* In the condition sections, keep the intro pinned while the grid scrolls.
   Scoped via :has() so the FAQ / "What to expect" layouts are unaffected. */
.faq-layout:has(.condition-grid) .faq-intro {
  position: sticky;
  top: 6rem;            /* clears the sticky site nav */
  align-self: start;    /* don't stretch, so there's room to stick */
}
/* Small muted note beneath a section heading (e.g. "See all conditions"). */
.condition-note {
  margin: 1.25rem 0;
  line-height: 1.5;
  color: var(--c-muted);
}
/* Fade overlays: right pinned to the viewport edge (over bleeding cards),
   left pinned to the container edge. Each toggles via classes set on scroll so
   an edge only fades while there are more cards hidden in that direction. */
.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: clamp(2rem, 8vw, 6rem);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.carousel::after {
  right: calc(50% - 50vw);
  background: linear-gradient(90deg, rgba(var(--fade-color), 0), rgba(var(--fade-color), 1));
}
.carousel::before {
  left: 0;
  background: linear-gradient(270deg, rgba(var(--fade-color), 0), rgba(var(--fade-color), 1));
  opacity: 0;                       /* hidden until the user scrolls */
}
.carousel.is-scrolled::before { opacity: 1; }   /* show left fade once scrolled */
.carousel.is-at-end::after    { opacity: 0; }   /* drop right fade at the end */

.carousel__nav { display: flex; gap: 0.5rem; }
.carousel__btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--c-fg);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.carousel__btn:hover { background: var(--c-surface); }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* --------------------------------------------------------------------------
   Split carousel: heading in a left 1/3 column, the carousel fills the right
   2/3 and bleeds out beyond the viewport's right edge.
   -------------------------------------------------------------------------- */
.split-carousel {
  display: grid;
  grid-template-columns: 2fr 3fr;        /* wider heading column; carousel bleeds right */
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.split-carousel__head h2 { margin: 0 0 0.75rem; }
.split-carousel__head .carousel__nav { margin-top: clamp(1.5rem, 3vw, 2rem); }
/* The right column's right edge sits on the container's content edge; this is
   the distance from there out to the viewport's right edge (also correct when
   the grid collapses to one full-width column on small screens). */
.split-carousel__carousel {
  --bleed-right: calc(50vw - min(var(--maxw), 100vw) / 2 + clamp(1rem, 3vw, 2rem));
  min-width: 0;   /* let the 2fr/3fr ratio hold instead of the track's wide content forcing the head column to collapse */
}
.split-carousel__carousel .carousel__track {
  margin-right: calc(-1 * var(--bleed-right));   /* bleed past the right edge */
}
.split-carousel__carousel.carousel::after {
  right: calc(-1 * var(--bleed-right));           /* re-pin the right fade to the viewport edge */
}
@media (max-width: 60rem) {
  .split-carousel { grid-template-columns: 1fr; }   /* stack on small screens */
}

/* Glass CTA bar (e.g. below a carousel) */
.cta-bar {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-radius: 0;
  border: none;                                /* reset .glass's full border */
  border-top: 1px solid var(--c-border);       /* keep only the top edge */
}
.cta-bar p { margin: 0; font-weight: 600; font-size: 1.1rem; color: var(--c-fg); }

/* --------------------------------------------------------------------------
   Comparison table (responsive: collapses to stacked cards on mobile)
   -------------------------------------------------------------------------- */
.table-wrapper { overflow-x: auto; }
.compare-table {
  width: 100%;
  /* separate borders let the table itself carry a rounded outer border,
     while the caption stays above it (unenclosed) */
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.compare-table caption { text-align: left; color: var(--c-muted); margin-bottom: 1rem; }

.compare-table th, .compare-table td {
  padding: 1rem 1.1rem;
  /* internal gridlines only; the table border draws the outer edges */
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.compare-table tr > *:last-child { border-right: 0; }          /* last column */
.compare-table tbody tr:last-child > * { border-bottom: 0; }   /* last row */
/* Round the corner cells so they follow the table's rounded border */
.compare-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-sm); }
.compare-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-sm); }
.compare-table tbody tr:last-child th:first-child  { border-bottom-left-radius: var(--radius-sm); }
.compare-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-sm); }
.compare-table thead th {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  background-color: var(--c-surface-2);
}
.compare-table tbody th { font-weight: 650; color: var(--c-fg); }
.compare-table tbody tr:hover { background: var(--c-surface); }

@media (max-width: 48rem) {
  .table-wrapper { overflow: visible; }
  .compare-table thead { display: none; }
  .compare-table { border: 0; border-radius: 0; }
  .compare-table th, .compare-table td { border-radius: 0; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td {
    display: block; width: 100%;
  }
  .compare-table tr {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
  }
  .compare-table td { border: 0; padding: 0.6rem 0; display: flex; justify-content: space-between; gap: 1rem; }
  .compare-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--c-muted);
    flex: none;
  }
  .compare-table tbody th { border: 0; padding: 0.75rem 0 0.25rem; font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   Row list (stacked, clickable rows with dividers + sliding arrow)
   -------------------------------------------------------------------------- */
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li { border-top: 1px solid var(--c-border); }
.row-list li:last-child { border-bottom: 1px solid var(--c-border); }

.row-link {
  display: grid;
  grid-template-columns: minmax(8rem, 16rem) 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) 0.5rem;
  text-decoration: none;
  color: var(--c-fg);
  transition: padding-left var(--t-med) var(--ease), background var(--t-fast) var(--ease);
}
.row-link:hover { padding-left: 1.25rem; background: var(--c-surface); }
.row-link__title { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 650; }
.row-link__desc  { color: var(--c-fg-soft); margin: 0; }
.row-link__arrow {
  --sz: 2.75rem;
  position: relative;
  width: var(--sz); height: var(--sz);
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  overflow: hidden;
}
.row-link__arrow::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-fg);
  -webkit-mask: var(--icon-arrow) center / 1.1rem no-repeat;
          mask: var(--icon-arrow) center / 1.1rem no-repeat;
}
/* On hover the arrow slides out to the right and a fresh one comes in from left */
.row-link:hover .row-link__arrow::before { animation: arrow-cycle var(--t-slow) var(--ease); }
.row-link:hover .row-link__arrow {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.row-link:hover .row-link__arrow::before { background: var(--c-on-accent); }
@keyframes arrow-cycle {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(140%); }
  46%  { transform: translateX(-140%); }
  100% { transform: translateX(0); }
}
@media (max-width: 44rem) {
  .row-link { grid-template-columns: 1fr auto; }
  .row-link__desc { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Contact CTA — inverted (dark) section with a soft light dot field.
   Dots are densest behind the form (right) and fade toward the text (left),
   with a slow, gentle pulse. Pulse is disabled under reduced-motion.
   -------------------------------------------------------------------------- */
.contact-cta { position: relative; overflow: hidden; }
.contact-cta > .container { position: relative; z-index: 1; }   /* content above pattern */
.contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* fine dot grid */
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1.5px, transparent 1.8px);
  background-size: 22px 22px;
  /* wave crest anchored to the right (behind the form): the elliptical leading
     edge bows into the section, fading gradually toward the top, left & bottom */
  -webkit-mask: radial-gradient(68% 72% at 100% 50%, #000 0%, #000 12%, rgba(0,0,0,0.4) 48%, transparent 82%);
          mask: radial-gradient(68% 72% at 100% 50%, #000 0%, #000 12%, rgba(0,0,0,0.4) 48%, transparent 82%);
  /* slow "breath": the dot field gently swells and brightens from the crest */
  transform-origin: 100% 50%;
  animation: dot-pulse 6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0.3;  transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   Contact CTA form — a light card that sits directly in the page
   (theme-aware, so it also works if a section is flipped dark)
   -------------------------------------------------------------------------- */
.form {
  width: 100%;
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-xs);
  color: var(--c-fg);
  background: var(--c-surface);
}
.form legend, .form h3 { color: var(--c-fg); }
.form__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-full { grid-column: 1 / -1; }
.field > label { font-size: 0.85rem; font-weight: 600; color: var(--c-fg-soft); }
.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-fg);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* fieldset reset */
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.form legend {
  font-size: 0.85rem; font-weight: 600; padding: 0;
  margin-bottom: 0.25rem; letter-spacing: 0.02em; color: var(--c-fg-soft);
}

/* Choice rows (radio / checkbox) rendered as pill chips */
.choice-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--c-fg-soft);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--c-fg); }
.choice input { accent-color: var(--c-accent); }
.choice:has(input:checked) { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   Slim related-therapies strip (inverted, border-only dividers)
   -------------------------------------------------------------------------- */
.related-strip {
  background: var(--c-bg);
  color: var(--c-fg);
  border-block: 1px solid var(--c-border);
}
.related-strip__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.related-strip__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
}
.related-strip__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
.related-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 1.25rem;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--c-border);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-fg);
  transition: color var(--t-fast) var(--ease);
}
.related-strip__link:first-child { border-left: 0; padding-left: 0; }
.related-strip__link:hover { color: var(--c-muted); }
.related-strip__link::after {
  content: "";
  width: 0.95em; height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
          mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--t-fast) var(--ease);
}
.related-strip__link:hover::after { transform: translateX(3px); }
@media (max-width: 44rem) {
  .related-strip__links { margin-left: 0; }
  .related-strip__link:first-child { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Slim full-width CTA strip (inverted section before footer / related)
   -------------------------------------------------------------------------- */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.cta-strip__heading {
  margin: 0 0 0.2rem;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 650;
  color: var(--c-fg);
}
.cta-strip__sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-muted);
}
section.cta {  
  border-bottom: 1px solid var(--c-border);
}

/* --------------------------------------------------------------------------
   Site footer (full-width) + overlapping CTA container
   -------------------------------------------------------------------------- */
.footer-overlap { position: relative; z-index: 2; }
/* When a CTA sits just above the footer, this pulls it down to overlap */
.footer-overlap--pull { margin-bottom: calc(-1 * clamp(3rem, 7vw, 6rem)); }

.site-footer {
  background: var(--c-bg);
  color: var(--c-fg);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.site-footer--inset { padding-top: clamp(6rem, 12vw, 10rem); }  /* room for an overlapping CTA */
.footer-inner {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr 0.8fr 2.8fr 0.9fr;
}
@media (max-width: 64rem) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  /* Give the Resources column (with its two sub-lists) the full row instead
     of squeezing both sub-lists into a single half-width cell. */
  .footer-inner nav[aria-label="Resources"] { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .footer-inner { grid-template-columns: 1fr; }
}
.footer-inner a { color: var(--c-fg-soft); text-decoration: none; font-size: 0.9rem; }
.footer-inner a:hover { color: var(--c-fg); text-decoration: underline; }
.footer-inner h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 1rem;
}
.site-footer .nav-list { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.site-footer address { font-style: normal; color: var(--c-fg-soft); line-height: 1.8; }
.site-footer small { color: var(--c-muted); }

/* Resources column splits into two link lists side by side */
.footer-resources {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 48rem) {
  .footer-resources { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 30rem) {
  .footer-resources { grid-template-columns: 1fr; }
}

/* Social icon row under the office info */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.footer-social__link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-fg-soft);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer-social__link:hover { color: var(--c-fg); border-color: var(--c-border-strong); text-decoration: none; }
.footer-social__link svg { width: 1.1rem; height: 1.1rem; }

.footer-note {
  font-size: 0.85rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 1.5rem 0 0;
}

/* Bottom bar — copyright left, site map link right */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}
.footer-bottom a { color: var(--c-fg-soft); text-decoration: none; font-size: 0.9rem; }
.footer-bottom a:hover { color: var(--c-fg); text-decoration: underline; }

/* ==========================================================================
   Content / service pages — shared template pieces
   ========================================================================== */

/* Narrow reading width (used for forms, FAQ, prose) */
.container--narrow { max-width: 50rem; }

/* Breadcrumb */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.breadcrumb-list li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb-list li + li::before { content: "/"; color: var(--c-border-strong); }
.breadcrumb-list a { color: var(--c-muted); text-decoration: none; }
.breadcrumb-list a:hover { color: var(--c-fg); }

/* Breadcrumb bar — slim strip between site-nav and page hero */
.breadcrumb-bar {
  margin-top: 2rem;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.breadcrumb-bar .breadcrumb-list {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  font-size: 0.8rem;
}
.breadcrumb-bar .breadcrumb-list li {
  display: flex;
  align-items: center;
  padding: 0.55rem 1rem;
  gap: 0;
}
.breadcrumb-bar .breadcrumb-list li:first-child { padding-left: 0; }
.breadcrumb-bar .breadcrumb-list li + li {
  border-left: 1px solid var(--c-border);
}
.breadcrumb-bar .breadcrumb-list li + li::before { display: none; }

/* Page hero (service/content intro) — shares the homepage hero bleed background */
.page-hero {
  position: relative;
  background: transparent;
  padding-block: var(--space-section);   /* symmetric top/bottom */
  --hero-bg: var(--c-bg);
  --hero-bleed-top: 6rem;
}
.page-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(-1 * var(--hero-bleed-top));
  z-index: -1;
  background: var(--hero-bg);
  pointer-events: none;
}
/* A breadcrumb bar sits between the nav and the hero, pushing the hero down,
   so the default bleed no longer reaches behind the sticky nav. Extend it to
   cover the bar (and its spacing) and keep the band continuous up top. */
main:has(.breadcrumb-bar) .page-hero { --hero-bleed-top: 11rem; }
.lede { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--c-fg-soft); max-width: 60ch; }

/* Alternate section background for vertical rhythm */
.section--alt { background: var(--c-surface); }

/* Horizontal divider between grouped blocks within a single section */
.section-divider {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: clamp(2.25rem, 5vw, 3.5rem) 0;
}

/* Static (non-link) info card — e.g. "How it works" tiles */
.card--static {
  cursor: default;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  border-radius: 0;
}
.card--static:hover { transform: none; border-color: var(--c-border); }

/* ".how-ruled" framed layout — full-bleed lines (edge-to-edge) bracket the
   heading and the card grid, while the content stays within the container.
   The rules are <hr class="how-rule"> placed as direct children of the
   full-width section; the card left-borders butt flush against them (no gaps).
   Used by the therapy "How it works" sections and the use-case "Mechanism". */
.how-rule { border: 0; border-top: 1px solid var(--c-border); margin: 0; }
.how-ruled .how-head { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.how-ruled .how-head > :first-child { margin-top: 0; }
.how-ruled .how-head > :last-child  { margin-bottom: 0; }
.how-ruled .grid { margin: 0; }

/* Numbered steps (e.g. "What to expect") */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.steps__item {
  counter-increment: step;
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-fg-soft);
}
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.2rem;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 650;
  font-size: 0.9rem;
}
.steps__item strong { display: block; margin-bottom: 0.15rem; color: var(--c-fg); }

/* ── Timeline ("What to expect") ─────────────────────────────── */
.timeline {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 2rem;
}

/* Vertical connecting line */
.timeline::before {
  content: '';
  position: absolute;
  left: 1.075rem;
  top: 2.25rem;
  bottom: 2.25rem;
  width: 1px;
  background: var(--c-border);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline.is-visible::before { transform: scaleY(1); }

.timeline__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0 1.5rem;
  align-items: start;
}

.timeline__num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-strong);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-fg);
  background: var(--c-bg);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline.is-visible .timeline__num { opacity: 1; transform: scale(1); }
.timeline.is-visible .timeline__item:nth-child(1) .timeline__num { transition-delay: 0.05s; }
.timeline.is-visible .timeline__item:nth-child(2) .timeline__num { transition-delay: 0.35s; }
.timeline.is-visible .timeline__item:nth-child(3) .timeline__num { transition-delay: 0.65s; }
.timeline.is-visible .timeline__item:nth-child(4) .timeline__num { transition-delay: 0.95s; }

.timeline__body {
  padding-top: 0.25rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.timeline.is-visible .timeline__body { opacity: 1; transform: translateY(0); }
.timeline.is-visible .timeline__item:nth-child(1) .timeline__body { transition-delay: 0.1s; }
.timeline.is-visible .timeline__item:nth-child(2) .timeline__body { transition-delay: 0.4s; }
.timeline.is-visible .timeline__item:nth-child(3) .timeline__body { transition-delay: 0.7s; }
.timeline.is-visible .timeline__item:nth-child(4) .timeline__body { transition-delay: 1.0s; }

.timeline__body strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; color: var(--c-fg); }
.timeline__body p     { margin: 0; font-size: 0.95rem; color: var(--c-fg-soft); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .timeline::before,
  .timeline__num,
  .timeline__body { transition: none; transform: none !important; opacity: 1 !important; }
}

/* FAQ section — no shaded background, just a full-width top border to separate it */
section[aria-labelledby="faq-heading"] { border-top: 1px solid var(--c-border); }

/* FAQ — intro (eyebrow + title) on the left, accordions stacked on the right */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .faq-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}
.faq-intro h2 { margin: 0; }

/* Accordion (native <details>) — underline-only rows, stacked vertically */
.faq { display: grid; gap: 0; }
.faq__item {
  border-bottom: 1px solid var(--c-border);
}
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 0;
  color: var(--c-fg);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-muted);
  transition: transform var(--t-fast) var(--ease);
  font-weight: 300;
}
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__item > p { margin: 0; padding: 0 0 1.25rem; color: var(--c-fg-soft); font-size: 1rem;}

/* Service-page form markup support (.form-grid + .field-choice rows) */
.form .form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.form .field-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.form .field-choice label { color: var(--c-fg-soft); font-size: 0.95rem; }
.form .field-choice input { margin-top: 0.2rem; accent-color: var(--c-accent); flex: none; }
.form fieldset > p { margin: 0; font-size: 0.9rem; color: var(--c-muted); }

/* Plain inline checkbox group (no pill/button styling) */
.check-inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.check-inline label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--c-fg-soft);
  cursor: pointer;
}
.check-inline input { accent-color: var(--c-accent); flex: none; }

/* ==========================================================================
   Page hero variants
   ========================================================================== */

/* Centred hero (e.g. About page) */
.page-hero--center { text-align: center; padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.page-hero--center .lede { margin-inline: auto; }

/* Full-bleed right hero — image column spans from top of page to bottom of section.
   Uses display:contents on .container and .hero__grid to let the two direct
   children (.page-hero__content and .page-hero__media) participate in the
   section-level 1fr/1fr grid. */
.page-hero--bleed-right {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(28rem, 65vh, 48rem);
  overflow: visible;
}
.page-hero--bleed-right .container { display: contents; }
.page-hero--bleed-right .hero__grid { display: contents; }
.page-hero--bleed-right .page-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-right: clamp(2rem, 4vw, 3rem);
  padding-left: max(1.5rem, calc((100vw - var(--maxw, 72rem)) / 2 + 1.5rem));
}
.page-hero--bleed-right .page-hero__media {
  position: absolute;
  top: calc(-1 * var(--hero-bleed-top, 11rem));
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: -1;
}
.page-hero--bleed-right .page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}
@media (max-width: 56rem) {
  .page-hero--bleed-right {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .page-hero--bleed-right .page-hero__content {
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
  }
  .page-hero--bleed-right .page-hero__media {
    position: relative;
    top: unset; right: unset; bottom: unset;
    width: 100%;
    height: clamp(16rem, 50vw, 24rem);
  }
}

/* ==========================================================================
   Scrollspy layout — sticky side-nav + scrolling content panels
   ========================================================================== */
.scrollspy-layout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 4rem;
  align-items: start;
}
/* Proportional variant: narrower nav (1/5 of width). Use on pages with few links. */
.scrollspy-layout--proportional { grid-template-columns: 1fr 4fr; }

.scrollspy-nav {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.scrollspy-nav__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}
.scrollspy-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--c-fg-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.scrollspy-link:hover { color: var(--c-fg); }
.scrollspy-link.is-active {
  color: var(--c-fg);
  font-weight: 600;
  border-left-color: var(--c-accent);
}
.scrollspy-panels { display: flex; flex-direction: column; }
.scrollspy-panel {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--c-border);
}
.scrollspy-panel:first-child { border-top: none; padding-top: 0; }
.scrollspy-panel .eyebrow { margin-bottom: 0.4rem; }
.scrollspy-panel h2 { margin-bottom: 1.25rem; }

@media (max-width: 720px) {
  .scrollspy-layout { grid-template-columns: 1fr; }
  .scrollspy-layout--proportional { grid-template-columns: 1fr; }
  .scrollspy-nav {
    position: sticky;
    top: 4.5rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg);
    z-index: 10;
  }
  .scrollspy-nav::-webkit-scrollbar { display: none; }
  .scrollspy-nav::after {
    content: '';
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 3rem;
    align-self: stretch;
    background: linear-gradient(to right, transparent, var(--c-bg));
    pointer-events: none;
  }
  .scrollspy-nav__label {
    margin-bottom: 0;
    margin-right: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .scrollspy-link {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding-left: 0;
    padding-inline: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .scrollspy-link.is-active { border-bottom-color: var(--c-accent); }
}

/* ==========================================================================
   Helps / treats grid — 3-col responsive image+link grid used in therapy pages
   ========================================================================== */
.helps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1.5rem;
}
@media (max-width: 720px) { .helps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .helps-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Booking section — centred wrapper used at the bottom of therapy pages
   ========================================================================== */
.booking-section { 
  text-align: center; 
  background-size: cover;
  background-repeat: no-repeat;
  /*margin: 1rem;
  border-radius: var(--radius-xs);*/
}

.booking-section.rlt {
  background-image: url(../img/gn-regenerative-red-light-therapy-bg.webp);
}

.booking-section.rlt h2, .booking-section.rlt p, .booking-section.hbot h2, .booking-section.hbot p {
  color: #fff;
}

.booking-section.hbot {
  background-image: url(../img/gn-regenerative-hyperbaric-oxygen-therapy-bg.webp);
}

.booking-section.xerf {
  background-image: url(../img/gn-regenerative-xerf-rf-treatment-bg.webp);
}

.booking-section__head { margin-bottom: 2rem; }
.booking-section__head h2 { margin-bottom: 0.4rem; }
.booking-form-wrap {
  max-width: 36rem;
  margin-inline: auto;
  text-align: left;
}

/* Jane online booking panel: same card treatment as .form, centred content.
   Colours are scoped under .booking-section and qualified with the element so they
   outrank `.booking-section.rlt p { color:#fff }` above, which would otherwise
   render this panel's text white on a white card. */
.jane-panel {
  width: 100%;
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-xs);
  background: var(--c-surface);
}
.jane-panel p { margin: 0; }

.booking-section .jane-panel p.jane-panel__title {
  color: var(--c-fg);
  font-weight: 600;
  font-size: 1rem;
}
.booking-section .jane-panel p.jane-panel__desc {
  color: var(--c-muted);
  max-width: 48ch;
  font-size: 0.92rem;
}
.booking-section .jane-panel p.jane-panel__note {
  color: var(--c-muted);
  font-size: 0.8rem;
}
.booking-section .jane-panel a:not(.btn) { color: inherit; }

/* ==========================================================================
   Drawer — slide-in detail panel (right edge)
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(75vw);
  height: 100%;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--c-bg); color: var(--c-fg);
  overflow-y: scroll;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.22);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
  align-self: flex-end;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: 50%;
  background: transparent; color: var(--c-fg);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.drawer__close:hover { background: var(--c-surface); }
.drawer__role {
  margin: 0; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted);
}
.drawer__name { margin: 0; font-size: 1.5rem; }
.drawer__bio, .drawer__desc { margin: 0; color: var(--c-fg-soft); line-height: 1.6; }
.drawer__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.drawer__img-wrap {
  width: fit-content; aspect-ratio: 1/1; overflow: hidden;
  border-radius: var(--radius-sm); position: relative;
  background: var(--c-surface);
}
.drawer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.drawer__img[src=''] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__backdrop { transition: none; }
}

/* ==========================================================================
   Multi-step wizard form
   ========================================================================== */
.wizard { position: relative; }
.wizard__step { display: none; }
.wizard__step.is-active { display: grid; gap: 1rem; }

.wizard-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wizard-steps__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-muted);
}

/* Radio-tile choice grid (e.g. "Self-referral / Physician referral") */
.wizard-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 36rem) { .wizard-choice-grid { grid-template-columns: 1fr; } }
.wizard-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.wizard-choice:hover { border-color: var(--c-fg); background: var(--c-surface); }
.wizard-choice input[type="radio"] {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  cursor: pointer; margin: 0;
}
.wizard-choice__title { font-weight: 650; font-size: 0.95rem; color: var(--c-fg); pointer-events: none; }
.wizard-choice__desc  { font-size: 0.82rem; color: var(--c-muted); line-height: 1.4; pointer-events: none; }
.wizard-choice:has(input:checked) { border-color: var(--c-accent); background: var(--c-surface); }
.wizard-choice:has(input:checked) .wizard-choice__title { color: var(--c-accent); }

/* Checkbox-tile goal grid (e.g. XERF treatment goals) */
.wizard-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 36rem) { .wizard-goal-grid { grid-template-columns: 1fr; } }
.wizard-goal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-bg);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--c-fg-soft);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.wizard-goal:hover { border-color: var(--c-fg); }
.wizard-goal input[type="checkbox"] { accent-color: var(--c-accent); flex: none; }
.wizard-goal:has(input:checked) { border-color: var(--c-accent); background: var(--c-surface); color: var(--c-fg); }

/* Back button */
.wizard-back {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--c-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: color var(--t-fast) var(--ease);
}
.wizard-back:hover { color: var(--c-fg); }
.wizard-back::before { content: "←"; }

/* Compact form-grid inside a wizard step */
.wizard .form-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 36rem) { .wizard .form-grid { grid-template-columns: 1fr; } }

/* Success state */
.wizard-success {
  text-align: center;
  padding: 1.5rem 1rem;
  display: grid;
  gap: 0.6rem;
}
.wizard-success__icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--c-accent); color: var(--c-on-accent);
  display: grid; place-items: center;
  font-size: 1.4rem;
  margin-inline: auto;
}
.wizard-success h3 { margin: 0; }
.wizard-success p  { margin: 0; font-size: 0.9rem; }

/* ==========================================================================
   Scroll & load reveal — see initReveal() in main.js
   JS tags top-level content blocks with [data-animate] and adds .is-visible
   as they enter the viewport. The hidden state applies only while JS is active
   (.reveal-init on <html>) and only when motion is allowed, so no-JS and
   reduced-motion visitors always see content normally. The transition lives on
   .is-visible so the initial hide is instant (no fade-out flicker), and the
   per-block stagger is passed in via --reveal-delay.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-init [data-animate] {
    opacity: 0;
    transform: translateY(18px);
  }
  .reveal-init [data-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-slow) var(--ease) var(--reveal-delay, 0s),
                transform var(--t-slow) var(--ease) var(--reveal-delay, 0s);
  }
}