/* home.css — homepage-only components  See docs/CSS-RATIONALE.md#home-css-homepage-only-components-13 */

@layer components {

/* Shared section header  See docs/CSS-RATIONALE.md#shared-section-header-14 */

.shead { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.shead--center { text-align: center; margin-inline: auto; max-width: 44rem; }
.shead__eyebrow {
  display: inline-block;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-brand-600);
  padding-bottom: var(--space-3xs);
  border-bottom: 3px solid var(--color-brand-300);
  margin-bottom: var(--space-sm);
}
.shead__h { font-size: var(--text-4xl); letter-spacing: -0.028em; }
.shead--center .shead__h { margin-inline: auto; }
.shead__p {
  margin-top: var(--space-sm); font-size: var(--text-lg);
  color: var(--color-neutral-700); max-width: 56ch;
}
.shead--center .shead__p { margin-inline: auto; }


/* Section seams  See docs/CSS-RATIONALE.md#section-seams-15 */

.seam { position: relative; }
.seam::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; transform-origin: 0 50%;
  background: linear-gradient(to right,
    var(--color-brand-400), var(--color-brand-200) 45%, transparent);
}



/* ── 1. Hero — full-bleed photograph ───────────────────────────────────
   The shape of the legacy hero, rebuilt: the practice photograph full width
   with the headline over it. The scrim is a gradient rather than a flat wash
   so Dr. Qadoom stays visible on the side the type is not on.
   ---------------------------------------------------------------------- */

.hero-photo {
  position: relative; isolation: isolate; overflow: clip;
  min-block-size: clamp(30rem, 78svh, 44rem);
  display: grid; align-items: end;
  background: var(--color-brand-900);
  color: var(--color-neutral-0);
}
/* Background layer. A real element rather than negative z-index, so the
   photograph, the scrim and the copy sit in one predictable paint order. */
.hero-photo__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.hero-photo__wrap { position: relative; z-index: 1; }
.hero-photo__media {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  /* Anchor near the top of the frame so the forehead and hair sit below the
     sticky masthead instead of being cropped by it. */
  object-position: 76% 12%;
}
.hero-photo__scrim {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(to bottom,
      rgb(4 37 40 / 0.45) 0%,
      rgb(4 37 40 / 0.62) 42%,
      rgb(4 37 40 / 0.94) 100%);
}
.hero-photo__copy {
  padding-block: var(--space-2xl) clamp(3rem, 2rem + 4vw, 4.5rem);
  max-width: 40rem;
}
.hero-photo__eyebrow {
  display: inline-block; font-size: var(--text-xs);
  font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-brand-100);
  padding-bottom: var(--space-3xs);
  border-bottom: 3px solid rgb(255 255 255 / 0.32);
  margin-bottom: var(--space-md);
}
.hero-photo__h1 {
  font-size: var(--text-5xl); letter-spacing: -0.035em;
  max-width: 16ch; margin-bottom: var(--space-md);
  text-shadow: 0 2px 24px rgb(4 37 40 / 0.5);
}
.hero-photo__p {
  font-size: var(--text-lg); color: var(--color-brand-100);
  max-width: 46ch; margin-bottom: var(--space-lg);
}
.hero-photo__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-photo__actions .btn--secondary {
  color: var(--color-neutral-0); border-color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.06); backdrop-filter: blur(6px);
}
.hero-photo__actions .btn--secondary:hover {
  background: rgb(255 255 255 / 0.16); border-color: var(--color-neutral-0);
  color: var(--color-neutral-0);
}
.hero-photo__cue {
  display: none; margin-top: var(--space-xl);
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-brand-200);
  text-decoration: none; align-items: center; gap: var(--space-2xs);
}
.hero-photo__cue:hover { color: var(--color-neutral-0); }
.hero-photo__cue svg { animation: cue-bob 2.4s var(--ease-in-out) infinite; }
@keyframes cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .hero-photo__cue svg { animation: none; } }

@media (min-width: 48rem) {
  .hero-photo__media { object-position: 78% 16%; }
  .hero-photo__scrim {
    background:
      linear-gradient(to right,
        rgb(4 37 40 / 0.94) 0%,
        rgb(4 37 40 / 0.80) 38%,
        rgb(4 37 40 / 0.30) 68%,
        rgb(4 37 40 / 0.10) 100%),
      linear-gradient(to top, rgb(4 37 40 / 0.55), transparent 40%);
  }
  .hero-photo { align-items: center; }
  .hero-photo__copy { padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem); }
  .hero-photo__cue { display: inline-flex; }
}


/* ── 2. About — photograph beside the text ─────────────────────────────
   The legacy layout, and the thing the client noticed was missing: the
   practice photograph sitting alongside the bio, with the four circular badges
   underneath.
   ---------------------------------------------------------------------- */

.about__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) {
  .about__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-3xl); }
}

.about__figure { margin: 0; }

/* The teal plate behind the photograph.  See docs/CSS-RATIONALE.md#the-teal-plate-behind-the-photograph-16 */
.about__frame {
  position: relative; isolation: isolate; display: block;
  margin-block-end: var(--space-sm);
  margin-inline-start: var(--space-sm);
}
.about__frame::before {
  content: ""; position: absolute; z-index: -1;
  inset-block: var(--space-sm) calc(var(--space-sm) * -1);
  inset-inline: calc(var(--space-sm) * -1) var(--space-sm);
  border-radius: var(--radius-xl);
  background: var(--color-brand-100);
}
.about__frame img {
  inline-size: 100%; block-size: auto; display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-3);
}
.about__cap {
  margin-top: var(--space-xs); font-size: var(--text-xs);
  color: var(--color-text-muted); max-width: 34ch;
}

.about__body > p { margin-bottom: var(--space-md); }
.about__awards { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.about__awards li {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  font-size: var(--text-base);
}
.about__awards svg {
  inline-size: 20px; block-size: 20px; flex: none; margin-top: 0.25em;
  fill: none; stroke: var(--color-brand-500); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* The four circular badges. Legacy had them; they are the one place on this
   page an icon earns its keep. */
.badges {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md); margin-top: var(--space-xl);
}
@media (min-width: 48rem) { .badges { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } }
/* In the narrow figure column they go back to two-up, so each badge keeps a
   comfortable measure instead of breaking "Board-Certified" over two lines. */
@media (min-width: 64rem) { .badges { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } }
.badge {
  display: grid; justify-items: center; text-align: center; gap: var(--space-2xs);
  padding: var(--space-md) var(--space-2xs);
  border-radius: var(--radius-xl);
  background: var(--color-brand-50);
  border: var(--border-width) solid var(--color-brand-100);
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .badge:hover { background: var(--color-brand-100); transform: translateY(-3px); }
}
.badge__ring {
  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-0);
  box-shadow: var(--elev-1);
}
.badge__ring svg {
  inline-size: 26px; block-size: 26px;
  fill: none; stroke: var(--color-brand-500); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.badge__t {
  font-family: var(--font-serif); font-size: var(--text-base);
  font-weight: var(--weight-semibold); line-height: var(--leading-snug);
}
.badge__s { font-size: var(--text-xs); color: var(--color-brand-700); }


/* 3. Services -- nine photographic cards  See docs/CSS-RATIONALE.md#3-services-nine-photographic-cards-17 */

.svcs { display: grid; gap: var(--space-lg); }
@media (min-width: 34rem) { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .svcs { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }

.svc { perspective: 1200px; }

.svc__card {
  --px: 0; --py: 0;
  position: relative; block-size: 100%;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.svc__media { position: relative; overflow: hidden; background: var(--color-neutral-100); }
.svc__media img {
  inline-size: 100%; block-size: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
/* Gradient scrim: legibility for the label, and a little depth under the type. */
.svc__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgb(4 37 40 / 0.55) 0%, rgb(4 37 40 / 0.15) 38%, transparent 68%);
  transition: opacity var(--duration-base) var(--ease-out);
}
.svc__kind {
  position: absolute; z-index: 1;
  inset-block-end: var(--space-2xs); inset-inline-start: var(--space-2xs);
  padding: 3px var(--space-2xs);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.94);
  color: var(--color-brand-700);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  transition: translate var(--duration-base) var(--ease-out);
}

.svc__body {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2xs);
  padding: var(--space-md);
}
.svc__h { font-size: var(--text-xl); text-wrap: balance; }
.svc__p {
  font-size: var(--text-sm); color: var(--color-neutral-700);
  line-height: var(--leading-normal);
}
.svc__more {
  align-self: end; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  margin-top: var(--space-2xs); min-height: 44px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-link); text-decoration: none;
}
/* The underline draws in from the left rather than switching on. */
.svc__more > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--duration-base) var(--ease-out);
}
.svc__more svg { transition: translate var(--duration-fast) var(--ease-out); }
/* The whole card is the target; the visible link keeps the accessible name. */
.svc__more::after { content: ""; position: absolute; inset: 0; }

@media (hover: hover) and (pointer: fine) {
  .svc__card:hover {
    box-shadow: var(--elev-3);
    border-color: var(--color-brand-200);
    /* --px/--py come from the pointer, so the plane tips toward the cursor
       instead of snapping to one fixed angle. */
    transform:
      translateY(-4px)
      rotateX(calc(var(--py) * -3.2deg))
      rotateY(calc(var(--px) * 3.2deg));
    transition-duration: var(--duration-fast);
  }
  .svc__card:hover .svc__media img { transform: scale(1.07); }
  .svc__card:hover .svc__media::after { opacity: 0.72; }
  .svc__card:hover .svc__kind { translate: 0 -2px; }
  .svc__card:hover .svc__more svg { translate: 4px 0; }
  .svc__card:hover .svc__more > span { background-size: 100% 1.5px; }
  /* Pressed: back to the resting elevation, and a touch of compression. */
  .svc__card:active {
    box-shadow: var(--elev-1);
    transform: translateY(-1px) scale(0.994);
    transition-duration: var(--duration-instant);
  }
}
/* Keyboard parity -- reaching the link raises the card the same way. */
.svc__card:focus-within {
  border-color: var(--color-brand-400);
  box-shadow: var(--elev-2);
}
.svc__card:focus-within .svc__more > span { background-size: 100% 1.5px; }


/* ── 4. Insurance — twelve logos, one box, greyscale at rest ───────────
   The source art is flattened onto white at a common canvas, so every mark is
   optically the same size in the same chip. Marks sit greyscale at rest and
   return to colour on hover, focus, or touch.
   ---------------------------------------------------------------------- */

/* Flex rather than grid, deliberately: thirteen marks do not divide into
   every column count, and a grid leaves the last row hanging off to one side.
   Flex centres the remainder. */
.payers {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-sm);
  --payer-cols: 2;
}
@media (min-width: 30rem) { .payers { --payer-cols: 3; } }
@media (min-width: 48rem) { .payers { --payer-cols: 4; gap: var(--space-md); } }
@media (min-width: 68rem) { .payers { --payer-cols: 6; } }

.payer {
  flex: 0 1 calc((100% - (var(--payer-cols) - 1) * var(--space-md)) / var(--payer-cols));
  min-inline-size: 7.5rem;
  display: grid; place-items: center;
  padding: var(--space-sm);
  background: var(--color-neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.payer img {
  inline-size: 100%; block-size: auto; aspect-ratio: 400 / 168;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.88;
  transition: filter var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.payer:hover img,
.payer:focus-within img,
.payer:active img,
.payer.is-color img {
  filter: none;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .payer:hover { border-color: var(--color-brand-200); box-shadow: var(--elev-2); translate: 0 -3px; }
}

/* The affiliation line. Same chip language, smaller, clearly separated and
   clearly labelled: OhioHealth is a health system rather than a plan, and
   sitting it in the wall would tell a patient they could pay with it. */
.affil {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: var(--border-width) solid var(--color-border);
}
.affil__label {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.affil__mark {
  display: grid; place-items: center;
  inline-size: 9rem; padding: var(--space-2xs) var(--space-xs);
  background: var(--color-neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.affil__mark img {
  inline-size: 100%; block-size: auto; aspect-ratio: 400 / 168; object-fit: contain;
  filter: grayscale(1);
  opacity: 0.88;
  transition: filter var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.affil__mark:hover img,
.affil__mark:focus-within img,
.affil__mark:active img,
.affil__mark.is-color img {
  filter: none;
  opacity: 1;
}
.affil__note { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 42ch; }

.payers__ask {
  margin: var(--space-lg) auto 0; text-align: center;
  font-size: var(--text-base); color: var(--color-neutral-800); max-width: 52ch;
}
.payers__note {
  margin: var(--space-lg) auto 0; text-align: center;
  font-size: var(--text-sm); color: var(--color-neutral-700); max-width: 60ch;
}
.payers__aside {
  margin: var(--space-md) auto 0; text-align: center;
  font-size: var(--text-xs); color: var(--color-text-muted); max-width: 68ch;
}


/* ── 5. Appointment ────────────────────────────────────────────────────
   Legacy shape: copy on the left, request panel on the right, Healow beneath.
   NO free-text notes field and no reason-for-visit — CLAUDE.md §5. Name, phone,
   email and a preferred date are all this collects.
   ---------------------------------------------------------------------- */

.appt { background: var(--color-brand-800); color: var(--color-neutral-0); }
.appt__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .appt__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.appt .shead__eyebrow { color: var(--color-brand-100); border-bottom-color: rgb(255 255 255 / 0.3); }
.appt__lede { font-size: var(--text-lg); color: var(--color-brand-100); max-width: 52ch; }
.appt__points { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.appt__points li {
  display: flex; gap: var(--space-2xs); align-items: flex-start;
  color: var(--color-brand-100); font-size: var(--text-sm);
}
.appt__points svg {
  inline-size: 18px; block-size: 18px; flex: none; margin-top: 0.3em;
  fill: none; stroke: var(--color-accent-400); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Fills the space the bullet list leaves in the left column, with the action
   the whole site is built around. */
.appt__call {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: var(--border-width) solid rgb(255 255 255 / 0.18);
  display: grid; justify-items: start; gap: var(--space-2xs);
}
.appt__call-lead {
  font-family: var(--font-serif); font-size: var(--text-xl);
  color: var(--color-neutral-0);
}
.appt__call-note { font-size: var(--text-xs); color: var(--color-brand-200); max-width: 40ch; }

.appt__panel {
  background: var(--color-bg); color: var(--color-text);
  border-radius: var(--radius-xl); padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  box-shadow: var(--elev-4);
}
.appt__panel h3 { font-size: var(--text-2xl); margin-bottom: var(--space-2xs); }
.appt__primary { inline-size: 100%; margin-bottom: var(--space-sm); }
.appt__submit { inline-size: 100%; }

/* A labelled rule between the two booking routes, so the form reads as the
   alternative rather than as the only option. */
.appt__or {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-md) 0;
  color: var(--color-text-muted); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.appt__or::before, .appt__or::after {
  content: ""; flex: 1; block-size: 1px; background: var(--color-border);
}
.appt__subhead { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.appt__subnote { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.appt__panel > p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); }

.field { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-md); }
.field > label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.field input, .field select {
  min-height: 48px; padding: var(--space-2xs) var(--space-xs);
  font: inherit; font-size: var(--text-base); color: var(--color-text);
  background: var(--color-neutral-50);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.field input:hover, .field select:hover { border-color: var(--color-neutral-400); }
.field input:focus, .field select:focus { background: var(--color-bg); border-color: var(--color-brand-500); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.fields-2 { display: grid; gap: 0 var(--space-md); }
@media (min-width: 30rem) { .fields-2 { grid-template-columns: 1fr 1fr; } }

.appt__privacy {
  display: flex; gap: var(--space-2xs); align-items: flex-start;
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-sm); border-radius: var(--radius-md);
  background: var(--color-brand-50);
  font-size: var(--text-xs); color: var(--color-neutral-700);
}
.appt__privacy svg {
  inline-size: 18px; block-size: 18px; flex: none; margin-top: 0.15em;
  fill: none; stroke: var(--color-brand-600); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Shown only if someone submits before an intake endpoint exists. Written by  See docs/CSS-RATIONALE.md#shown-only-if-someone-submits-before-an-intake-endpoint-exis-18 */
.appt__notice {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-accent-400);
  background: color-mix(in srgb, var(--color-accent-400) 12%, var(--color-bg));
  font-size: var(--text-sm); color: var(--color-neutral-800);
}
.appt__notice strong { color: var(--color-accent-600); }
.appt__alt {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: var(--border-width) solid rgb(255 255 255 / 0.18);
  display: grid; justify-items: center; text-align: center; gap: var(--space-sm);
}
.appt__alt p { color: var(--color-brand-100); font-size: var(--text-sm); }


/* ── 6. Patient forms ────────────────────────────────────────────────────── */

.forms { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .forms { grid-template-columns: repeat(3, 1fr); } }
/* No accent stripe along the top edge: a thick coloured border fighting a
   rounded corner is the clearest tell of a generated card. The cards are told
   apart by their headings, which is what a reader actually uses. */
.form-card {
  display: grid; align-content: start; gap: var(--space-2xs);
  padding: var(--space-lg);
  background: var(--color-neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .form-card:hover { box-shadow: var(--elev-3); translate: 0 -3px; }
}
.form-card__h { font-size: var(--text-lg); }
.form-card p { font-size: var(--text-sm); color: var(--color-neutral-700); margin-bottom: var(--space-sm); }
.form-card__acts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.form-card__acts .btn { flex: 1 1 auto; padding-inline: var(--space-md); }


/* 7. Location -- a real map, facade-loaded  See docs/CSS-RATIONALE.md#7-location-a-real-map-facade-loaded-19 */

.loc__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64rem) { .loc__grid { grid-template-columns: 0.82fr 1.18fr; gap: var(--space-2xl); } }

.loc__card {
  display: grid; gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-2);
}
.loc__addr { font-size: var(--text-lg); line-height: var(--leading-normal); }
.loc__rows { display: grid; gap: var(--space-2xs); }
.loc__row { display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--text-sm); }
.loc__row svg {
  inline-size: 18px; block-size: 18px; flex: none; margin-top: 0.25em;
  fill: none; stroke: var(--color-brand-500); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.loc__acts { display: grid; gap: var(--space-2xs); margin-top: var(--space-2xs); }
@media (min-width: 30rem) and (max-width: 63.99rem) { .loc__acts { grid-template-columns: 1fr 1fr; } }

.mapf {
  position: relative; isolation: isolate;
  border-radius: var(--radius-xl); overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--elev-2);
  background: var(--color-neutral-100);
}
.mapf__img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1200 / 750; object-fit: cover; }
/* The control sits over the map, not in place of it. */
.mapf__btn {
  position: absolute; z-index: 1;
  inset-block-end: var(--space-md); inset-inline-start: var(--space-md);
  background: var(--color-bg); box-shadow: var(--elev-2);
}
.mapf__btn:hover { background: var(--color-brand-50); }
.mapf iframe { display: block; inline-size: 100%; aspect-ratio: 1200 / 750; border: 0; }
.mapf__credit { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-text-muted); }


/* ── 8. Testimonials — all three, no carousel ──────────────────────────
   The legacy Owl carousel showed one at a time and rotated on a timer. These
   are real named patients; showing all three costs nothing and hides nothing.
   Deliberately NOT marked up with Review or AggregateRating schema — CLAUDE.md §5.
   ---------------------------------------------------------------------- */

.quotes { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 56rem) { .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }

/* Natural heights, not stretched. The three quotes differ a lot in length and
   forcing equal height left the shortest card with a large empty void under
   its text. Tops align; bottoms are allowed to be ragged. */
.quote {
  position: relative;
  display: grid; align-content: start; gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-neutral-0);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--duration-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .quote:hover { box-shadow: var(--elev-2); } }
.quote__mark {
  inline-size: 30px; block-size: 30px;
  fill: var(--color-brand-200);
}
.quote blockquote p {
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--color-neutral-700);
}
.quote__by {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--color-border);
}
.quote__by img {
  inline-size: 44px; block-size: 44px; border-radius: var(--radius-full);
  object-fit: cover; flex: none;
}
.quote__name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.quote__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.quotes__note {
  margin: var(--space-lg) auto 0; text-align: center;
  font-size: var(--text-xs); color: var(--color-text-muted); max-width: 62ch;
}

} /* @layer components */