/* ============================================================
   Family & Lifestyle Medicine — Lansing
   Design system: elegant & warm
   ============================================================ */

:root {
  /* Brand */
  --crimson:        #9B1B2F;
  --crimson-deep:   #7A1424;
  --crimson-soft:   #C4394D;
  --slate:          #3E5C6B;
  --slate-deep:     #294451;
  --gold:           #C89B3C;

  /* Neutrals */
  --ivory:          #FAF7F2;
  --cream:          #F4EEE6;
  --white:          #FFFFFF;
  --ink:            #241F20;
  --body:           #4A4547;
  --muted:          #77706F;
  --line:           rgba(62, 92, 107, .16);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  /* Signature shape: one deeply arched corner, echoing the hero photo's dome
     and the curve of the stethoscope in the logo. Used on statement blocks. */
  --r-arch: clamp(56px, 6vw, 84px);
  --shadow-sm: 0 2px 10px rgba(41, 68, 81, .06);
  --shadow-md: 0 12px 30px -12px rgba(41, 68, 81, .18);
  --shadow-lg: 0 30px 60px -24px rgba(41, 68, 81, .28);
  --shadow-crimson: 0 16px 34px -14px rgba(155, 27, 47, .5);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  /* One gutter for every card grid, so the home page's four grids stay in step
     with each other. Tight on purpose: the services grid is a bento that reads
     as a single subdivided panel, and wide gaps break that read. */
  --gap-cards: clamp(.75rem, 1.5vw, 1.15rem);

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

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The off-canvas nav sits outside the viewport when closed; clip (not hidden)
     so it never creates horizontal scroll and the sticky header still works. */
  overflow-x: clip;
}

/* The header is sticky, so anything an in-page link lands on has to clear it —
   otherwise the section heading arrives hidden underneath. */
:target { scroll-margin-top: clamp(5.5rem, 9vw, 7rem); }

body {
  font-family: var(--font-body);
  font-size: clamp(1.04rem, .98rem + .22vw, 1.12rem);
  line-height: 1.66;
  color: var(--body);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--crimson); text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}

::selection { background: var(--crimson); color: #fff; }

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

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 999; background: var(--crimson); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

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

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: linear-gradient(180deg, var(--cream), var(--ivory)); }
.section--dark {
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(155, 27, 47, .38), transparent 60%),
    linear-gradient(160deg, #2F4C59, #223B46 60%, #1C333D);
  color: rgba(255, 255, 255, .82);
}
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.35rem);
  line-height: 1.06;
}
.section-title em { font-style: italic; color: var(--crimson); }
.section-title + p, .section-title + .lead { margin-top: 1.3rem; }
.section-sub { margin-top: 1.25rem; font-size: 1.12rem; }
.section-head--center .btn { margin-top: 2rem; }

.lead { font-size: 1.14rem; }
.mission__text p + p { margin-top: 1.15rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.section-head--center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--crimson); border-radius: 2px;
}
.eyebrow--light { color: #E9AEB6; }
.eyebrow--light::before { background: #E9AEB6; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.65rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.2;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease);
}
.btn svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary { box-shadow: var(--shadow-crimson); }
.btn--primary:hover { background: var(--crimson-deep); }

.btn--outline {
  background: transparent; color: var(--crimson); border-color: rgba(155, 27, 47, .35);
}
.btn--outline:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }

.btn--ghost {
  background: transparent; color: var(--slate); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--slate); background: rgba(62, 92, 107, .07); }

.btn--light { background: #fff; color: var(--crimson); box-shadow: var(--shadow-md); }
.btn--light:hover { background: var(--cream); }

.btn--ghost-light {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--sm { padding: .6rem 1.15rem; font-size: .86rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .93rem; color: var(--crimson);
}
.link-arrow svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--slate-deep);
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px; flex-wrap: wrap;
}
.utility-bar__contacts { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.utility-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: inherit; transition: color .2s var(--ease);
}
.utility-link svg { width: 15px; height: 15px; fill: currentColor; opacity: .7; }
a.utility-link:hover { color: #fff; }
.utility-bar__social { display: flex; align-items: center; gap: 1.1rem; }
.utility-bar__social a { color: rgba(255, 255, 255, .78); transition: color .2s var(--ease); }
.utility-bar__social svg { width: 19px; height: 19px; fill: currentColor; }
.utility-bar__social a:hover { color: #fff; }

/* Portal login reads as an action, not another phone number. */
.utility-link--portal {
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  padding: .22rem .85rem;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.utility-bar__social .utility-link--portal svg { width: 14px; height: 14px; opacity: .75; }
.utility-link--portal:hover {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .09);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
/* The glass layer lives on a pseudo-element deliberately: backdrop-filter on
   the header itself would make it the containing block for the position:fixed
   mobile drawer, trapping the drawer inside the header's box. */
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(250, 247, 242, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header.is-stuck::before {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .85rem;
  transition: padding .3s var(--ease);
}
.site-header.is-stuck .site-header__inner { padding-block: .55rem; }

/* Horizontal lockup (~4.7:1), so it needs far less height than the stacked
   mark did — height drives width here, and the nav needs the room. */
.brand img {
  height: clamp(34px, 3.6vw, 46px); width: auto;
  transition: height .3s var(--ease);
}
.site-header.is-stuck .brand img { height: clamp(30px, 3.1vw, 40px); }

/* Three-part header: logo left, links centred in the space between, actions right.
   Six top-level links leave roughly 150px spare at 1280px, so the gaps are fluid —
   they tighten on smaller laptops and keep the flat nav intact down to ~1064px.
   Below the drawer breakpoint none of this applies. */
.nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.5rem); flex: 1; }
.nav__list {
  display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 1.6rem); flex-wrap: nowrap;
  flex: 1; justify-content: center;
}
/* The logo must never be squeezed to make room for links. */
.brand { flex: none; }
.nav__list a {
  color: var(--slate-deep);
  font-weight: 500;
  font-size: .88rem;
  white-space: nowrap;
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__list a:hover { color: var(--crimson); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.nav__cta .btn { white-space: nowrap; }

.nav__donate {
  color: var(--slate-deep);
  font-weight: 500;
  font-size: .88rem;
  white-space: nowrap;
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--ease);
}
.nav__donate::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__donate:hover { color: var(--crimson); }
.nav__donate:hover::after { transform: scaleX(1); transform-origin: left; }


/* Current page marker, so the nav shows where you are across the site. */
.nav__list a[aria-current="page"],
.nav__donate[aria-current="page"] { color: var(--crimson); }
.nav__list a[aria-current="page"]::after,
.nav__donate[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.nav-toggle span {
  width: 21px; height: 2px; background: var(--slate-deep); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* ---------- Hero banner ----------
   Photo bleeds to the right and bottom edges with the arch cut into its leading
   corner; a crimson panel sits a little wider behind it so a band of colour
   shows along that curve. The copy is capped to the left half so it can never
   run underneath the photo. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 76vh, 45rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(160deg, var(--cream) 0%, var(--ivory) 62%);
}

/* Geometric accents, echoing the reference's corner pills. */
.hero__deco { position: absolute; inset: 0; pointer-events: none; }
.hero__pill { position: absolute; border-radius: 999px; background: var(--crimson); }
.hero__pill--a { top: 15%; left: -7rem; width: 15rem; height: 3.1rem; opacity: .10; }
.hero__pill--b { bottom: 19%; left: -9rem; width: 18rem; height: 3.5rem; opacity: .07; }

.hero__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 52%;
  translate: -4% 0;
  background: linear-gradient(150deg, var(--crimson), var(--crimson-deep));
  border-top-left-radius: clamp(150px, 21vw, 330px);
}
.hero__figure {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 46%;
  overflow: hidden;
  border-top-left-radius: clamp(140px, 20vw, 300px);
  z-index: 1;
}
.hero__figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 12%;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: min(48%, 36rem); }

.hero__eyebrow { animation: rise .8s var(--ease) both; }
.hero__title {
  font-size: clamp(2.5rem, 1.1rem + 5.2vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.hero__line { display: block; animation: rise .9s var(--ease) both; }
/* Small quiet line over a large emphatic one — the reference's two-tier lockup. */
.hero__line:nth-child(1) {
  font-size: .44em; font-weight: 400; color: var(--slate);
  letter-spacing: 0; margin-bottom: .16em;
  animation-delay: .08s;
}
.hero__line--accent { color: var(--crimson); animation-delay: .18s; }

.hero__tagline {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, .92rem + .5vw, 1.28rem);
  font-weight: 500;
  color: var(--slate);
  display: flex; flex-wrap: wrap; gap: .35rem .7rem;
}
.hero__tagline span { animation: rise .7s var(--ease) both; position: relative; }
.hero__tagline span + span { padding-left: 1rem; }
.hero__tagline span + span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  transform: translateY(-50%);
}
.hero__tagline span:nth-child(1) { animation-delay: .30s; }
.hero__tagline span:nth-child(2) { animation-delay: .38s; }
.hero__tagline span:nth-child(3) { animation-delay: .46s; }
.hero__tagline span:nth-child(4) { animation-delay: .54s; }

.hero__lede {
  margin-top: 1.4rem; max-width: 46ch; font-size: 1.16rem;
  animation: rise .8s var(--ease) .6s both;
}
.hero__actions {
  margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem;
  animation: rise .8s var(--ease) .7s both;
}
.hero__pills {
  margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .6rem;
  animation: rise .8s var(--ease) .82s both;
}
.hero__pills li {
  font-size: .84rem; font-weight: 500; color: var(--slate-deep);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  padding: .45rem 1rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .45rem;
  box-shadow: var(--shadow-sm);
}
.hero__pills li::before {
  content: "✓"; color: var(--crimson); font-weight: 700; font-size: .8rem;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Stats band ---------- */
.stats {
  background: var(--slate-deep);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
  position: relative;
}
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  text-align: center;
}
.stat { position: relative; padding-inline: .5rem; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%;
  width: 1px; height: 76%; background: rgba(255, 255, 255, .16);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.7rem);
  font-weight: 600; color: #fff; line-height: 1.1;
}
.stat__label {
  display: block; margin-top: .35rem;
  font-size: .84rem; color: rgba(255, 255, 255, .68);
  letter-spacing: .02em;
}

/* ---------- Mission ---------- */
.mission__text .btn { margin-top: 2rem; }

/* --- Mission rows -------------------------------------------------------
   The copy runs ~240 words. As a single column beside a short media stack it
   towered over the images, which then floated centred in ~200px of dead space
   top and bottom. Split into two alternating rows instead: each row pairs a
   readable chunk of text with the photo that matches it, and the direction
   flips so the section reads as a zig-zag rather than one long slab. */
.mission__row {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.mission__row + .mission__row { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* Flip visually but keep the text first in the DOM, so it is still read first. */
.mission__row--reverse .mission__text { order: 2; }
.mission__row--reverse .mission__figure { order: 1; }

.mission__figure {
  min-width: 0;
  /* Fill the row rather than floating centred — a fixed aspect left a gap above
     and below whichever column was shorter. */
  align-self: stretch;
  min-height: clamp(17rem, 24vw, 25rem);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
}
/* Mirror the arch so the two rows lean opposite ways. */
.mission__row--reverse .mission__figure {
  border-radius: var(--r-lg) var(--r-arch) var(--r-lg) var(--r-arch);
}
.mission__figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.mission__figure:hover img { transform: scale(1.05); }

/* Framed variant: a white mat with a hairline edge, so the photo reads as a
   mounted print instead of bleeding into the page. The mat is a border rather
   than padding on purpose — overflow clips at the padding box, so the hover
   zoom stays inside the mat instead of creeping over it, and the inner corners
   pick up the arch radius automatically. */
.mission__figure--framed {
  --frame-w: clamp(.4rem, .75vw, .7rem);
  border: var(--frame-w) solid #fff;
  outline: 1px solid var(--line);
}
/* Heavier mat, roughly double. Wide enough that the shadow reads off the mat
   rather than the photo, so the frame carries the whole edge. */
.mission__figure--thick { --frame-w: clamp(.9rem, 1.7vw, 1.5rem); }

@media (max-width: 950px) {
  .mission__row { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.2rem); }
  .mission__row--reverse .mission__text,
  .mission__row--reverse .mission__figure { order: 0; }
  .mission__figure { align-self: auto; min-height: 0; aspect-ratio: 16 / 10; }
}
/* ---------- Team ---------- */
.team__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-cards);
}
.doctor-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, .8);
  display: grid; grid-template-columns: minmax(0, 38%) 1fr;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doctor-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.doctor-card__photo {
  position: relative; overflow: hidden; min-height: 300px;
  background: linear-gradient(160deg, var(--cream), #E4DCD2);
}
.doctor-card__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .8s var(--ease);
}
.doctor-card:hover .doctor-card__photo img { transform: scale(1.07); }
.doctor-card__body { padding: clamp(1.5rem, 2.4vw, 2.2rem); }
.doctor-card__body h3 { font-size: 1.35rem; }
.doctor-card__body h3 span {
  display: block; font-family: var(--font-body); font-size: .82rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); margin-top: .4rem;
}
.doctor-card__role {
  color: var(--crimson); font-weight: 600; font-size: .92rem;
  margin: .7rem 0 .9rem;
}
.doctor-card__body p { font-size: .97rem; }

.team__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: #fff;
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.4rem) clamp(1.9rem, 3.4vw, 2.8rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.team__note p { flex: 1 1 400px; margin: 0; }
.team__note .btn { flex: none; }

/* ---------- Pillars ---------- */
.pillars__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}
.pillar {
  background: #fff;
  border-radius: var(--r-arch) var(--r-lg) var(--r-lg) var(--r-lg);
  padding: clamp(2rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease), border-radius .5s var(--ease);
}
.pillar:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-arch);
}
/* Oversized numeral fills the dead space at the foot of each card and bleeds
   just past the edge, so it reads as a mark rather than a label. */
.pillar__num {
  position: absolute;
  z-index: -1;
  right: .06em; bottom: -.16em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 4rem + 6vw, 9.5rem);
  font-weight: 600;
  line-height: .8;
  color: rgba(155, 27, 47, .11);
  pointer-events: none;
  transition: color .5s var(--ease), transform .5s var(--ease);
}
.pillar:hover .pillar__num { color: rgba(155, 27, 47, .2); transform: translateY(-8px); }
.pillar h3 { font-size: 1.55rem; margin-bottom: .8rem; padding-right: 2.5rem; }
.pillar p { font-size: .97rem; }

/* ---------- Why us ---------- */
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.feature {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  backdrop-filter: blur(6px);
  transition: transform .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
.feature:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
}
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: .8rem;
  color: rgba(255, 255, 255, .7);
}
.feature__icon svg { width: 72px; height: 72px; fill: currentColor; }
.feature h3 { font-size: 1.35rem; margin-bottom: .55rem; }
.feature p { font-size: .95rem; color: rgba(255, 255, 255, .78); }

.why__more {
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: center;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.why__more-actions {
  margin-top: 1.8rem; display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap;
}

/* ---------- Services ---------- */
.services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}
.service {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.service:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.service__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(41, 68, 81, .35));
  opacity: 0; transition: opacity .45s var(--ease);
}
.service:hover .service__media::after { opacity: 1; }
.service__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.service:hover .service__media img { transform: scale(1.08); }
.service__body {
  padding: clamp(1.4rem, 2.3vw, 1.9rem);
  display: flex; flex-direction: column; gap: .8rem; flex: 1;
}
.service__body h3 { font-size: 1.3rem; }
.service__body p { font-size: .95rem; flex: 1; }
/* --- Bento service grid -------------------------------------------------
   Card size follows how much the clinic actually wrote, rather than forcing
   six identical tiles. Spans are chosen so each breakpoint tiles exactly:
   3 cols → 2+1 / 1+1+1 / 3   ·   2 cols → 2 / 1+1 / 1+1 / 2 */
@media (min-width: 701px) {
  .service--wide,
  .service--full { grid-column: span 2; flex-direction: row; align-items: stretch; }
  .service--wide > .service__media,
  .service--full > .service__media { flex: 0 0 42%; aspect-ratio: auto; min-width: 0; }
  /* Standard tiles let the paragraph grow so their links bottom-align across a
     row. On the oversized tiles that same rule strands the link far below the
     text, so cluster the content and centre it against the photo instead. */
  .service--wide > .service__body,
  .service--full > .service__body { justify-content: center; }
  .service--wide > .service__body > p,
  .service--full > .service__body > p { flex: 0 1 auto; }
}
@media (min-width: 1151px) {
  .service--full { grid-column: span 3; }
  .service--full > .service__media { flex-basis: 46%; }
}

/* Solid accent tile — only for a card whose copy is short enough to sit on
   colour without turning into a wall of text. */
.service--accent {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(196, 57, 77, .5), transparent 62%),
    linear-gradient(165deg, var(--crimson), var(--crimson-deep));
  border-color: transparent;
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
  box-shadow: var(--shadow-md);
}
.service--accent .service__body { gap: 1rem; justify-content: center; }
.service--accent .service__body > p { flex: 0 1 auto; }
.service--accent .service__icon { margin-bottom: .4rem; }
.service--accent .service__body h3 { color: #fff; }
.service--accent .service__body p { color: rgba(255, 255, 255, .85); }
.service--accent .link-arrow { color: #fff; }
.service__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
}
.service__icon svg { width: 27px; height: 27px; fill: #fff; }

.services__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }

/* ---------- Pricing ---------- */
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
  align-items: center;
}
.price-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.9rem, 3vw, 2.6rem);
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* The middle tier is inverted rather than outlined — the contrast does the
   work an accent border would otherwise do. */
.price-card--featured {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(196, 57, 77, .55), transparent 62%),
    linear-gradient(165deg, var(--crimson) 0%, var(--crimson-deep) 100%);
  border-color: transparent;
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding-block: clamp(2.4rem, 4vw, 3.2rem);
}
.price-card--featured .price-card__age { color: rgba(255, 255, 255, .72); }
.price-card--featured .price-card__amount { color: #fff; }
.price-card--featured .price-card__currency { color: var(--gold); }
.price-card--featured .price-card__period { color: rgba(255, 255, 255, .66); }
.price-card--featured .price-card__list {
  color: rgba(255, 255, 255, .88);
  border-top-color: rgba(255, 255, 255, .22);
}
.price-card--featured .price-card__list li::before { color: var(--gold); }

.price-card__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #43310C;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem 1.1rem; border-radius: 999px;
  box-shadow: 0 12px 24px -12px rgba(67, 49, 12, .7); white-space: nowrap;
}
.price-card__age {
  font-family: var(--font-body); font-size: .84rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3.2vw, 4.2rem);
  font-weight: 600; color: var(--ink); line-height: 1;
  margin: 1.1rem 0 1.4rem;
  display: flex; align-items: flex-start; justify-content: center; gap: .15rem;
}
.price-card__currency { font-size: .42em; margin-top: .5em; color: var(--crimson); }
.price-card__period {
  align-self: flex-end;
  font-family: var(--font-body); font-size: .24em; font-weight: 500;
  color: var(--muted); letter-spacing: .06em; margin-bottom: .9em; margin-left: .4rem;
}
.price-card__list {
  display: grid; gap: .6rem; margin-bottom: 1.8rem;
  text-align: left; font-size: .93rem;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
.price-card__list li { display: flex; align-items: flex-start; gap: .6rem; }
.price-card__list li::before {
  content: "✓"; color: var(--crimson); font-weight: 700; flex: none;
}
.pricing__note {
  margin-top: 2rem; text-align: center;
  font-style: italic; color: var(--slate); font-size: .95rem;
}
.pricing__cta { margin-top: 1.6rem; text-align: center; }

/* ---------- Hours ---------- */
.hours__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch;
}
.hours__card {
  background: #fff;
  border-radius: var(--r-arch) var(--r-lg) var(--r-lg) var(--r-arch);
  padding: clamp(1.9rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-md);
  min-width: 0;
}
.hours__list { margin: 1.8rem 0; display: grid; gap: 1rem; }
.hours__list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 1px dashed var(--line);
}
.hours__day { font-weight: 600; color: var(--ink); font-size: .97rem; }
.hours__time {
  font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 600; color: var(--crimson); white-space: nowrap;
}
.hours__time--alt { color: var(--slate); white-space: normal; }
.hours__commitment {
  background: var(--cream); border-radius: var(--r-md);
  padding: 1.2rem 1.4rem; font-size: .95rem;
}
.hours__commitment strong { color: var(--crimson); }
.hours__contacts { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.contact-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ivory); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1.05rem;
  font-size: .87rem; color: var(--slate-deep);
  /* The email address is one unbreakable token; without this it sets a
     min-content floor that widens the whole grid column on small screens. */
  overflow-wrap: anywhere; min-width: 0;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.contact-chip strong { color: var(--crimson); }
a.contact-chip:hover { border-color: var(--crimson); background: #fff; color: var(--crimson); }
.hours__media {
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); min-height: 340px;
  /* Grid items default to min-width:auto, which refuses to shrink below the
     image's intrinsic size and pushes past the viewport on narrow screens. */
  min-width: 0;
}
.hours__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background:
    linear-gradient(115deg, rgba(122, 20, 36, .94) 0%, rgba(155, 27, 47, .82) 45%, rgba(41, 68, 81, .78) 100%),
    url("../assets/cta-family.jpg") center 30%/cover no-repeat;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: clamp(48px, 6.5vw, 88px);
  background: var(--ivory);
  clip-path: ellipse(70% 100% at 50% 0%);
  z-index: 1;
}
/* Wrapper is wider than the prose so long button pairs stay on one line; the
   paragraph keeps its own readable measure. */
.cta-band__inner { position: relative; z-index: 2; max-width: 82ch; margin-inline: auto; }
.cta-band__inner > p { max-width: 62ch; margin-inline: auto; }
.cta-band h2 {
  color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
}
.cta-band p { margin-top: 1rem; color: rgba(255, 255, 255, .88); font-size: 1.06rem; }
.cta-band__actions {
  margin-top: 2.2rem; display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap;
}

/* ---------- References ---------- */
.references { padding-block: clamp(2rem, 4vw, 3rem); background: var(--ivory); }
.references__box {
  max-width: 90ch; margin-inline: auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem 1.5rem;
  font-size: .86rem; color: var(--muted);
}
.references__box summary {
  cursor: pointer; font-weight: 600; color: var(--slate-deep);
  font-size: .92rem; list-style: none;
  display: flex; align-items: center; gap: .5rem;
}
.references__box summary::-webkit-details-marker { display: none; }
.references__box summary::before {
  content: "+"; color: var(--crimson); font-size: 1.15rem; line-height: 1;
  transition: transform .3s var(--ease);
}
.references__box[open] summary::before { content: "–"; }
.references__box p { margin-top: 1rem; line-height: 1.65; }
.references__box a { word-break: break-word; }

/* ---------- Footer ---------- */
.footer {
  background: var(--slate-deep);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .92rem;
  position: relative;
  overflow: hidden;   /* also clips the watermark so it can bleed off the edge */
  isolation: isolate;
}

/* Oversized mark bleeding off the right edge, behind the columns. Decorative
   only — it is aria-hidden and must never sit above the text. */
.footer__watermark {
  position: absolute;
  z-index: -1;
  right: -17%;
  top: 50%;
  translate: 0 -50%;
  width: min(62%, 800px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand img {
  height: 66px; width: auto; margin-bottom: 1.2rem;
  /* No plate behind the mark; the logo's dark artwork would otherwise vanish
     into the slate footer, so render it as a white knockout instead.
     Delete this filter to show the logo in its original crimson/slate. */
  filter: brightness(0) invert(1);
  opacity: .92;
}
.footer__brand p { max-width: 34ch; }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-top: 1.2rem;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .8);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.footer__social svg { width: 19px; height: 19px; fill: currentColor; }
.footer__social:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }

.footer__col h3 {
  color: #fff; font-family: var(--font-body);
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer__col ul { display: grid; gap: .65rem; }
.footer__col a {
  color: rgba(255, 255, 255, .72);
  overflow-wrap: anywhere;
  transition: color .22s var(--ease), padding-left .22s var(--ease);
}
.footer__col a:hover { color: #fff; padding-left: 5px; }
.footer__hours { margin-top: 1.1rem; font-size: .87rem; color: rgba(255, 255, 255, .6); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding-block: 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: rgba(255, 255, 255, .55);
}
.footer__top {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255, 255, 255, .7);
  transition: color .22s var(--ease);
}
.footer__top svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.footer__top:hover { color: #fff; }
.footer__top:hover svg { transform: translateY(-3px); }

/* ============================================================
   Interior pages
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
  background: linear-gradient(168deg, var(--cream) 0%, var(--ivory) 70%);
}
.page-hero__inner { position: relative; max-width: 74ch; }
.page-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  letter-spacing: -.025em;
}
.page-hero h1 em { font-style: italic; color: var(--crimson); }
.page-hero__lead { margin-top: 1.35rem; font-size: 1.08rem; max-width: 62ch; }
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Hero banner ---------------------------------------------------------
   One banner for every interior page: a photograph behind the same copy
   block — breadcrumb, eyebrow, h1, lead, actions — at the same height and
   the same type scale. Only the photograph changes from page to page, so
   the pages feel like chapters of one site rather than seven designs.
   The scrim is directional: heaviest under the type on the left, clearing
   towards the right so the photograph still reads. */
.page-hero--banner {
  display: flex;
  align-items: center;
  min-height: clamp(19rem, 30vw, 27rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: var(--slate-deep);
}
.page-hero__photo { position: absolute; inset: 0; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(29, 50, 60, .95) 0%, rgba(29, 50, 60, .88) 45%, rgba(29, 50, 60, .55) 100%);
}
/* .page-hero__inner caps itself at 74ch, which beats .container's max-width
   (same specificity, declared later) and then centres the narrowed box in the
   viewport — leaving the copy adrift from the gutter every other section aligns
   to, and sitting where this banner's scrim is weakest. Hand the width back to
   .container and cap the lines themselves instead. */
.page-hero--banner .page-hero__inner {
  z-index: 1;
  max-width: var(--container);
}
.page-hero--banner h1 { max-width: 18ch; }
.page-hero--banner .page-hero__lead { max-width: 56ch; }

/* Light-on-dark type for the banner. */
.page-hero--banner h1 { color: #fff; }
.page-hero--banner h1 em { color: var(--gold); }
.page-hero--banner .page-hero__lead { color: rgba(255, 255, 255, .85); }
.page-hero--banner .breadcrumb { color: rgba(255, 255, 255, .55); }
.page-hero--banner .breadcrumb a { color: rgba(255, 255, 255, .78); }
.page-hero--banner .breadcrumb a:hover { color: #fff; }
.page-hero--banner .breadcrumb [aria-current] { color: #fff; }
.page-hero--banner .breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, .3); }

/* --- Per-page banner curves ----------------------------------------------
   The banner stays identical from page to page; its bottom edge is where each
   page signs its name. Every curve is cut from the vocabulary the site already
   uses — the signature arch, and the stats band's trick of a 50% horizontal
   radius making two arcs meet as one. The exposed corners fall on the page
   background, and depths stay shallow enough that neither the copy (centred,
   left) nor the focus of the photograph is ever clipped. */

/* Lifestyle Medicine — one continuous arc across the whole bottom edge. */
.page-hero--sweep {
  border-end-start-radius: 50% clamp(26px, 4.5vw, 60px);
  border-end-end-radius: 50% clamp(26px, 4.5vw, 60px);
}

/* Drawn edges — About, Services & Costs, Community Programs. A corner radius can
   only ever bend the ends of an edge; these shapes bend along their length, so
   they are inline SVG stretched to the band's width. The fill is currentColor,
   set here, because the shape has to match whatever section follows it: ivory
   for a plain section, cream where a tinted one begins. */
.page-hero__edge {
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: clamp(38px, 6vw, 82px);
  display: block;
  color: var(--ivory);
  z-index: 2;
  pointer-events: none;
}
.page-hero__edge--cream { color: var(--cream); }

/* FAQ — one continuous asymmetric arc. The clipping ellipse is wider than the
   band and its centre is pushed left, so the edge crests near the left shoulder
   and falls away across the full width instead of turning a corner. A radius
   can only bend at the ends; this bends the whole edge. */
.page-hero--tilt { clip-path: ellipse(150% 100% at 18% 0%); }

/* Donate — a long elliptical sweep off the right-hand side. */
.page-hero--ellipse { border-end-end-radius: 55% 38%; }

/* Contact — the inverse of the sweep: an arc of page colour rising into the
   band. The 1px bleed each side stops a hairline of banner showing at the
   edges when the browser rounds subpixels. */
.page-hero--scoop::after {
  content: "";
  position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: clamp(26px, 4.5vw, 60px);
  background: var(--ivory);
  border-start-start-radius: 50% 100%;
  border-start-end-radius: 50% 100%;
  pointer-events: none;
}

/* Slim band of jump links, sitting under the banner rather than inside it so
   every banner stays identical. */
.jump-band {
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding-block: 1.2rem;
}
.jump-band__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.jump-band__link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.1rem;
  font-size: .88rem; font-weight: 600; color: var(--slate-deep);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.jump-band__link:hover { transform: translateY(-2px); border-color: var(--crimson); color: var(--crimson); }
.jump-band__link svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 700px) {
  /* Portrait screens crop the photo hard; flatten the scrim so the type side
     does not go muddy against whatever is left in frame. */
  .page-hero__photo::after {
    background: linear-gradient(170deg,
      rgba(29, 50, 60, .9) 0%, rgba(29, 50, 60, .93) 100%);
  }
  /* The dramatic curves are sized for a wide band. On a narrow one the same
     proportions would reach the action buttons, so tame them — the signature
     stays legible, it just stops eating the layout. */
  .page-hero--ellipse { border-end-end-radius: 45% 16%; }
  /* A narrow band makes the same ellipse bite far deeper; widen it to flatten. */
  .page-hero--tilt { clip-path: ellipse(230% 100% at 22% 0%); }
  .page-hero__edge { height: clamp(26px, 7vw, 44px); }
}

.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem;
}
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--crimson); text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: var(--line); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

.section--narrow .container { max-width: 900px; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { margin-top: 2rem; font-size: 1.28rem; }
.prose strong { color: var(--ink); }

/* Panel — the general-purpose content block on interior pages. */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-arch) var(--r-lg) var(--r-lg) var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.panel--tint { background: linear-gradient(160deg, #fff, var(--cream)); }
.panel h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.panel > * + * { margin-top: .9rem; }

.panel-grid {
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.panel-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Cards size to their own content instead of stretching to match the tallest.
   Use when one panel's copy is far longer than its neighbour's, which
   otherwise leaves a block of dead space under the shorter one. */
.panel-grid--top { align-items: start; }

/* Checklist used for "what's included" style content. */
.ticks { display: grid; gap: .6rem; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; font-size: .96rem; }
.ticks li::before {
  content: "✓"; color: var(--crimson); font-weight: 700; flex: none; line-height: 1.6;
}
.ticks--muted li::before { content: "—"; color: var(--muted); font-weight: 400; }
/* Plain roster — checkmarks would read as "included" next to people's names. */
.ticks--names li::before { content: "·"; color: var(--gold); font-weight: 700; }

/* Staff profiles */
.staff-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(2, 1fr); }
.staff-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-arch) var(--r-lg) var(--r-lg) var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.staff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.staff-card__photo { aspect-ratio: 4 / 3.6; overflow: hidden; background: var(--cream); }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.staff-card__body { padding: clamp(1.4rem, 2.6vw, 2rem); }
.staff-card__body h3 { font-size: 1.3rem; }
.staff-card__cred {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
  margin-top: .35rem;
}
.staff-card__body p { margin-top: 1rem; font-size: .96rem; }

/* FAQ accordion */
.faq-list { display: grid; gap: .8rem; }
.faq-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open] { border-color: rgba(155, 27, 47, .3); box-shadow: var(--shadow-md); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.7rem);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .98rem + .2vw, 1.14rem);
  font-weight: 600; color: var(--ink); line-height: 1.35;
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--crimson); }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: .35em;
  border-right: 2px solid var(--crimson); border-bottom: 2px solid var(--crimson);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item__answer {
  padding: 0 clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: .98rem;
}
.faq-item__answer > * + * { margin-top: .85rem; }
.faq-item__answer a { word-break: break-word; text-decoration: underline; }

/* Programs */
.program-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-radius .5s var(--ease);
}
.program-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
}
.program-card h3 { font-size: 1.22rem; margin-bottom: .7rem; }
.program-card p { font-size: .96rem; }
.program-card__tag {
  display: inline-block; margin-bottom: .9rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--crimson); background: rgba(155, 27, 47, .08);
  padding: .3rem .75rem; border-radius: 999px;
  align-self: flex-start;
}

/* --- Bento grid ---------------------------------------------------------
   One column on phones, an even two-up on tablets, three with spans on
   desktop. Spans deliberately only apply at 3 columns: at 2 columns a
   span-2 tile cannot fit beside a span-1 tile and would leave a hole. */
.bento {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 701px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1151px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento > .is-wide { grid-column: span 2; }
}

/* Photo tile */
.program-card--photo { padding: 0; display: flex; flex-direction: column; }
.program-card__media { overflow: hidden; aspect-ratio: 16 / 10; min-width: 0; }
.program-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.program-card--photo:hover .program-card__media img { transform: scale(1.07); }
.program-card__body {
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  display: flex; flex-direction: column; justify-content: center; flex: 1;
}
@media (min-width: 1151px) {
  .program-card--photo.is-wide { flex-direction: row; align-items: stretch; }
  .program-card--photo.is-wide > .program-card__media { flex: 0 0 44%; aspect-ratio: auto; }
}

/* Solid tiles — two colourways so a bento never repeats the same block twice */
.program-card--accent,
.program-card--slate {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
  display: flex; flex-direction: column; justify-content: center;
}
.program-card--accent {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(196, 57, 77, .5), transparent 62%),
    linear-gradient(165deg, var(--crimson), var(--crimson-deep));
}
.program-card--slate {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(62, 92, 107, .55), transparent 62%),
    linear-gradient(165deg, var(--slate), var(--slate-deep));
}
.program-card--accent h3, .program-card--slate h3 { color: #fff; }
.program-card--accent p, .program-card--slate p { color: rgba(255, 255, 255, .86); }
.program-card--accent .program-card__tag,
.program-card--slate .program-card__tag { color: #fff; background: rgba(255, 255, 255, .18); }
.program-card--accent .service__icon,
.program-card--slate .service__icon { margin-bottom: 1rem; }

/* ---- Bento corners -----------------------------------------------------
   The arch is decoration for the OUTSIDE of the block. A corner that faces a
   neighbouring tile is squared off, so the grid reads as one panel that has
   been subdivided rather than as N separate cards each shouting its own
   shape. --bento-inner tunes how sharp those interior corners are.

   Which tile owns an outer corner depends on how the grid tiles, so these
   rules are written per grid and per breakpoint. .bento assumes the 4-tile
   1+2 / 1+2 arrangement; .services__grid assumes the 6-tile 2+1 / 1+1+1 / 3.
   Re-check them if the span pattern changes. */
.bento,
.services__grid { --bento-inner: 4px; }

.bento > .program-card,
.services__grid > .service { border-radius: var(--bento-inner); }

/* Single column: the first tile caps the top, the last caps the bottom. */
.bento > .program-card:first-child,
.services__grid > .service:first-child {
  border-top-left-radius: var(--r-arch);
  border-top-right-radius: var(--r-arch);
}
.bento > .program-card:last-child,
.services__grid > .service:last-child {
  border-bottom-left-radius: var(--r-arch);
  border-bottom-right-radius: var(--r-arch);
}

/* Two columns — .bento becomes an even 2x2, so tiles 1..4 own the corners.
   .services__grid keeps full-width tiles top and bottom, so the single-column
   rules above already hold. */
@media (min-width: 701px) {
  .bento > .program-card:first-child { border-top-right-radius: var(--bento-inner); }
  .bento > .program-card:nth-child(2) { border-top-right-radius: var(--r-arch); }
  .bento > .program-card:nth-child(3) { border-bottom-left-radius: var(--r-arch); }
  .bento > .program-card:last-child { border-bottom-left-radius: var(--bento-inner); }
}

/* Three columns — services' first tile now shares row 1 with tile 2, which
   takes over the top-right corner. Its last tile still spans the full row. */
@media (min-width: 1151px) {
  .services__grid > .service:first-child { border-top-right-radius: var(--bento-inner); }
  .services__grid > .service:nth-child(2) { border-top-right-radius: var(--r-arch); }
}

/* ---------- Slider ---------- */
.slider {
  position: relative;
  --slide-gap: clamp(1.1rem, 2.2vw, 1.8rem);
  --slides-visible: 3;
}
.slider__viewport {
  overflow: hidden;
  margin-inline: calc(var(--slide-gap) * -0.5);
}
.slider__track {
  display: flex;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.slider__slide {
  flex: 0 0 calc(100% / var(--slides-visible));
  padding-inline: calc(var(--slide-gap) * 0.5);
  box-sizing: border-box;
}
.slider__slide > * { height: 100%; }

.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--crimson);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.slider__arrow:hover {
  transform: translateY(-50%) scale(1.08);
  border-color: rgba(155, 27, 47, .35);
}
.slider__arrow:active { transform: translateY(-50%) scale(1); }
.slider__arrow--prev { left: -23px; }
.slider__arrow--next { right: -23px; }
.slider__arrow svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.slider__arrow[aria-disabled="true"] {
  opacity: .35;
  cursor: not-allowed;
}

.slider__dots {
  display: flex; justify-content: center; gap: .55rem;
  margin-top: 1.8rem;
}
.slider__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--line);
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.slider__dot[aria-current="true"] {
  background: var(--crimson);
  transform: scale(1.25);
}

@media (max-width: 980px) {
  .slider { --slides-visible: 2; }
  .slider__arrow--prev { left: -10px; }
  .slider__arrow--next { right: -10px; }
}
@media (max-width: 640px) {
  .slider { --slides-visible: 1; }
  .slider__arrow--prev { left: -8px; }
  .slider__arrow--next { right: -8px; }
}

/* Contact */
.contact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.contact-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--shadow-sm); text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.contact-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: var(--r-md); margin-bottom: 1rem;
  background: linear-gradient(140deg, var(--crimson), var(--crimson-soft));
  box-shadow: var(--shadow-crimson);
}
.contact-card__icon svg { width: 24px; height: 24px; fill: #fff; }
.contact-card__label {
  display: block;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate);
}
.contact-card__value {
  display: block; margin-top: .5rem;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); word-break: break-word;
}
a.contact-card:hover .contact-card__value { color: var(--crimson); }

/* Pull quote */
.quote {
  background: linear-gradient(160deg, #fff, var(--cream));
  border: 1px solid var(--line);
  border-radius: var(--r-arch) var(--r-lg) var(--r-arch) var(--r-lg);
  padding: clamp(1.9rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute; top: -.1em; left: .18em;
  font-family: var(--font-display); font-size: 7rem; line-height: 1;
  color: rgba(155, 27, 47, .13);
}
.quote blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .98rem + .5vw, 1.28rem);
  font-style: italic; line-height: 1.6; color: var(--ink);
}
.quote figcaption {
  margin-top: 1.2rem; font-family: var(--font-body); font-size: .8rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson);
}

.price-card__note {
  font-size: .88rem; color: var(--muted); margin-bottom: 1.5rem;
  border-top: 1px solid var(--line); padding-top: 1.2rem;
}
.price-card--featured .price-card__note {
  color: rgba(255, 255, 255, .78); border-top-color: rgba(255, 255, 255, .22);
}
.price-card__amount--inline { justify-content: flex-start; margin-top: 0; }

/* Spacing + layout helpers used by the interior pages */
.mt-block { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.mt-sm { margin-top: 1.6rem; }
.panel-stack {
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: 1fr; align-content: start;
}

/* Callout — for notes, disclaimers, and off-site links */
.callout {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  font-size: .95rem;
}
.callout h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.callout > * + * { margin-top: .8rem; }
.callout--note { background: rgba(200, 155, 60, .1); border-color: rgba(200, 155, 60, .35); }

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

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1150px) {
  /* Banner stacks: photo becomes a full-bleed header strip above the copy. */
  .hero { display: block; min-height: 0; padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
  .hero__panel, .hero__deco { display: none; }
  .hero__figure {
    position: relative; width: 100%; inset: auto;
    height: clamp(15rem, 46vw, 30rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: clamp(90px, 20vw, 170px);
    margin-bottom: clamp(1.8rem, 5vw, 2.8rem);
  }
  /* The wide strip only shows ~40% of this portrait source, so aim the window
     at the middle band — the stethoscope across the coat — rather than the
     tight chin close-up the desktop framing starts from. */
  .hero__figure img { object-position: center 45%; }
  .hero__content { max-width: none; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stat:nth-child(3)::before { display: none; }

  .hours__inner { grid-template-columns: 1fr; }

  .team__grid,
  .pillars__grid,
  .why__grid,
  .services__grid,
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }

  .price-card--featured { transform: none; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { background-attachment: scroll, scroll; }
}

/* Nav collapses to a drawer well below the layout breakpoint — the trimmed
   header keeps all six items comfortable down to this width. */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; position: relative; z-index: 130; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    background: var(--white);
    box-shadow: -20px 0 60px -30px rgba(0, 0, 0, .5);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    overflow-y: auto;
    z-index: 120;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: .3rem; flex-wrap: nowrap;
    flex: none; justify-content: flex-start;
  }
  .nav__list > li > a {
    display: flex; width: 100%; padding: .75rem 0; font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
    justify-content: space-between; align-items: center;
  }
  .nav__list a::after { display: none; }

  .nav__cta { flex-direction: column; align-items: stretch; gap: 1rem; }
  .nav__cta .btn { width: 100%; padding-block: .85rem; font-size: .95rem; }
  .nav__donate { text-align: center; font-size: .95rem; }
  .nav__donate::after { display: none; }

  body.nav-open { overflow: hidden; }
  /* Must sit BELOW .site-header's z-index (100). The header is a stacking
     context, so the drawer's z-index is scoped inside it and cannot rise above
     a sibling of the header — a higher scrim would dim the open menu itself. */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(28, 51, 61, .5); backdrop-filter: blur(2px);
    z-index: 90;
  }
}

@media (max-width: 700px) {
  .utility-bar { font-size: .76rem; }
  .utility-bar__inner { justify-content: center; padding-block: .5rem; }
  .utility-bar__contacts { gap: .5rem 1.1rem; justify-content: center; }

  .team__grid,
  .pillars__grid,
  .why__grid,
  .services__grid,
  .pricing__grid { grid-template-columns: 1fr; }

  .doctor-card { grid-template-columns: 1fr; }
  .doctor-card__photo { min-height: 0; aspect-ratio: 16 / 11; position: relative; }
  .doctor-card__photo img { position: absolute; }

  .hero__actions .btn,
  .cta-band__actions .btn,
  .why__more-actions .btn { flex: 1 1 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__bottom { justify-content: center; text-align: center; }
  .team__note { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .team__note p { flex: none; }
  .hours__list li { flex-direction: column; gap: .3rem; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .stat + .stat { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ============================================================
   Touch targets
   Text links default to their line box (~18px tall), which is under the 24px
   WCAG 2.5.8 minimum and well under the ~44px vendors recommend. Enlarge them
   wherever a finger is the input device.
   ============================================================ */
@media (max-width: 1080px), (pointer: coarse) {
  .utility-link { padding-block: .4rem; }
  .utility-link--portal { padding-block: .45rem; }
  .utility-bar__social a[aria-label] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
  }

  .breadcrumb a, .breadcrumb span { padding-block: .35rem; }

  .link-arrow { padding-block: .45rem; }

  .footer__col ul { gap: .1rem; }
  .footer__col a { display: inline-block; padding-block: .55rem; }
  .footer__contact li { padding-block: .1rem; }
  .footer__top { padding-block: .5rem; }
  .footer__social { width: 46px; height: 46px; }

  .references__box summary { padding-block: .45rem; }
  .references__box a { display: inline-block; padding-block: .4rem; }
  .faq-item__answer a { display: inline-block; padding-block: .35rem; }
  .contact-chip { padding-block: .65rem; }

  /* Buttons already clear 44px at btn--lg; nudge the small variant up. */
  .btn--sm { padding-block: .75rem; }
}

/* ============================================================
   Polish
   Four effects, all additive: if a browser doesn't support one,
   the page simply renders without it.
   ============================================================ */

/* --- 1. Cross-document view transitions ---------------------------------
   Turns the 8-page site from hard reloads into a soft cross-fade.
   Deliberately NOT naming .site-header: view-transition-name creates a
   containing block, which is the same trap that broke the fixed drawer
   when backdrop-filter sat on the header. A root cross-fade is enough. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .26s; }
::view-transition-new(root) { animation-duration: .36s; }

/* --- 2. Arched band transitions -----------------------------------------
   Colour bands curve over the section above instead of butting into it.
   Only applied to bands that always follow an ivory/cream section, so the
   exposed corners match the page background. */
.stats,
.section--dark,
.cta-band {
  border-start-start-radius: clamp(28px, 4vw, 56px);
  border-start-end-radius: clamp(28px, 4vw, 56px);
}

/* The stats band takes a full sweeping curve instead of two corner radii.
   Giving each top corner a horizontal radius of 50% makes the two arcs meet at
   the centre, so the entire top edge reads as one arc rising out of the hero.
   Extra top padding keeps the figures clear of where the curve dips at the
   left and right edges. */
.stats {
  border-start-start-radius: 50% clamp(26px, 4.5vw, 64px);
  border-start-end-radius: 50% clamp(26px, 4.5vw, 64px);
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* Ride up over the hero so its hard bottom edge — where the bleed photo and the
   crimson panel are cut flat — is covered, leaving the curve as the only
   transition. The pull must exceed the curve depth, or the corners where the arc
   dips lowest would still expose that cut.

   Only above the stacking breakpoint: once the hero stacks, the photo sits at the
   top and the hero ends on plain background, so there is nothing to hide and the
   overlap would just crowd the feature pills. */
@media (min-width: 1151px) {
  .stats {
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * (clamp(26px, 4.5vw, 64px) + 1.5rem));
  }
}

/* --- 3. Photo wipe reveals ----------------------------------------------
   Images wipe open from the left as they scroll in. transform stays in
   each transition list so the existing hover zooms keep working. */
.reveal .service__media img,
.reveal .doctor-card__photo img,
.reveal .staff-card__photo img,
.reveal.mission__figure img,
.reveal.hours__media img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--ease) var(--reveal-delay, 0ms),
              transform .8s var(--ease);
}
.reveal.is-visible .service__media img,
.reveal.is-visible .doctor-card__photo img,
.reveal.is-visible .staff-card__photo img,
.reveal.is-visible.mission__figure img,
.reveal.is-visible.hours__media img {
  clip-path: inset(0 0 0 0);
}

/* --- 4. Hero parallax ----------------------------------------------------
   Scroll-driven, so no JS and no scroll listener. Browsers without
   scroll timelines just skip it. */
@keyframes hero-drift      { to { translate: 0 -58px; } }
@keyframes hero-drift-slow { to { translate: 0 24px; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__figure img {
      animation: kenburns 22s ease-in-out infinite alternate, hero-drift linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }
    .hero__content {
      animation: hero-drift-slow linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

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

  /* Polish effects off: photos fully open, no drift, no page cross-fade. */
    .reveal .service__media img,
  .reveal .doctor-card__photo img,
  .reveal .staff-card__photo img,
  .reveal.mission__figure img,
  .reveal.hours__media img { clip-path: none; }
  .hero__figure img, .hero__content { animation: none; translate: none; }
  @view-transition { navigation: none; }
}

/* ---------- Print ---------- */
@media print {
  .utility-bar, .site-header, .nav-toggle, .cta-band__actions, .footer__top { display: none; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}