/* ==========================================================================
   Per-template styles.
   ========================================================================== */

/* --- Service pages --------------------------------------------------------- */

.page-head__urgent { margin-block-start: var(--s-md); }

.service-intro__title { font-size: var(--t-h2); margin-block-end: var(--s-md); }
.service-intro__body { max-width: 54ch; }
/* Scoped to the prose. As `.service-intro img` this had specificity (0,1,1) and so
   beat `.fact-rail__face` (0,1,0) — which stretched the two doctors' 2.4rem faces
   to the full 179px width of their link, cropping them to a strip of eyes. */
.service-intro__body img { width: 100%; }

/* --- Service fact rail -------------------------------------------------------
 * Sticky on desktop so the money answer and the booking action stay beside the
 * reader for the whole page, instead of the only CTA sitting four sections down.
 * -------------------------------------------------------------------------- */

.fact-rail { display: flex; flex-direction: column; gap: var(--s-md); }
@media (min-width: 62rem) {
  .fact-rail { position: sticky; top: calc(var(--header-h) + var(--s-md)); }
}
.fact-rail__image { width: 100%; aspect-ratio: 3 / 2; }

/* Ground, ink, gold and the cut all come from `.inlay` now. Only the padding is the rail's
   own: an inlay elsewhere is a full-width band and can afford --s-xl, but this one is a
   ~340px column beside a page of prose. */
.fact-rail__panel { padding: var(--s-lg); }
.fact-rail__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  margin-block-end: var(--s-md);
}
.fact-rail__facts { display: flex; flex-direction: column; gap: var(--s-md); }
.fact-rail__facts > div { display: flex; flex-direction: column; gap: 0.2rem; }
/*
 * The label is a LABEL, not a heading.
 *
 * At 15px/700 in gold these four read as a stack of small headlines competing with the
 * panel's own title, which is most of why the rail looked like a list rather than an
 * instrument. Micro size, the gold that is legal on navy, and a hairline under each one so
 * the pair reads as a row of a table.
 */
.fact-rail__facts > div + div { padding-block-start: var(--s-md); border-block-start: 1px solid var(--edge-dim); }
.fact-rail__facts dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold-ink);
}
.fact-rail__facts dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
}
.fact-rail__doctors { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-block-start: 0.35rem; }
.fact-rail__doctors a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: var(--t-small);
  color: var(--ink);
}
.fact-rail__doctors a:hover { color: var(--gold-ink); }
/*
 * The two faces were 2.4rem — 38px postage stamps, cropped at 12% from the top so both were
 * a strip of forehead. These are the only two faces on a service page and they are the
 * reason somebody books; they get the size of a real portrait and the facet the rest of the
 * site's photographs carry.
 */
.fact-rail__doctors { gap: var(--s-md); }
.fact-rail__doctors a { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.fact-rail__face {
  width: 5.5rem;
  height: 6.5rem;
  object-fit: cover;
  object-position: 50% 22%;
  clip-path: var(--facet);
  flex: none;
}
.fact-rail__actions { margin-block-start: var(--s-lg); --flow: var(--s-2xs); }

.benefits__title { font-size: var(--t-h3); }
.benefits__list {
  display: grid;
  gap: var(--s-md) var(--s-lg);
  margin-block-start: var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.benefits__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t-small);
  line-height: 1.55;
}
.benefits__item .sparkle {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  margin-block-start: 0.35rem;
  color: var(--gold-deep);
}

/* Treatments read as reference material, so they are a definition list, not cards.
   Two columns of prose, each row separated by a hairline rather than boxed. */
.treatments__list {
  margin-block-start: var(--s-xl);
  border-block-start: 1px solid var(--edge-dim);
}
@media (min-width: 60rem) {
  .treatments__list { columns: 2; column-gap: var(--s-2xl); }
  .treatment { break-inside: avoid; }
}

.treatment__row { border-block-end: 1px solid var(--edge-dim); }

.treatment__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding-block: 0.85rem;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.treatment__summary::-webkit-details-marker { display: none; }
.treatment__summary:hover { color: var(--gold-ink); }
.treatment__summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.treatment__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
}

/* The control says what it does in words, and the sign only reinforces it. An
   icon alone assumes the reader already knows the convention. */
.treatment__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: none;
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--gold-ink);
}
.treatment__hint-close { display: none; }
[open] .treatment__hint-open  { display: none; }
[open] .treatment__hint-close { display: inline; }

/* A plus that becomes a minus. Two bars, one rotated — no icon font, no SVG. */
.treatment__toggle {
  position: relative;
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
}
.treatment__toggle::before,
.treatment__toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  height: 1.5px;
  background: var(--gold-ink);
  transition: transform var(--dur-mid) var(--ease-out);
}
.treatment__toggle::after { transform: rotate(90deg); }
[open] .treatment__toggle::after { transform: rotate(0deg); }

.treatment__body {
  padding-block-end: var(--s-md);
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .treatment__toggle::before,
  .treatment__toggle::after { transition: none; }
}

/* --- Services index -------------------------------------------------------- */

.services-intro__title { font-size: var(--t-h2); }
.services-intro__body { margin-block-start: var(--s-md); --flow: var(--s-md); color: var(--ink-soft); }

/* --- Doctor profile -------------------------------------------------------- */

.doctor-profile__grid {
  display: grid;
  gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
  align-items: start;
}
@media (min-width: 62rem) {
  .doctor-profile__grid { grid-template-columns: 22rem 1fr; }
  .doctor-profile__aside { position: sticky; top: calc(var(--header-h) + var(--s-md)); }
}
/*
 * The inlay pads itself; the portrait must not be padded with it. Negative margins pull the
 * picture back out to the panel's own edges so the face is the top of the object, and the
 * cut is the panel's, not a second one inside it.
 */
.doctor-profile__aside {
  /* Tighter than a full-width inlay — this is a 22rem column, not a band. */
  padding: 0 var(--s-lg) var(--s-lg);
}
.doctor-profile__portrait {
  margin: 0 calc(var(--s-lg) * -1) var(--s-md);
  overflow: clip;
}
.doctor-profile__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}
.doctor-profile__role {
  margin-block-start: var(--s-md);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--gold-ink);
}
.doctor-profile__label {
  margin-block: var(--s-md) var(--s-2xs);
  padding-block-start: var(--s-md);
  border-block-start: 1px solid var(--edge-dim);
  font-family: var(--font-text);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Gold on navy, matching the service rail — these are the same kind of label doing the
     same job, and they were two different colours on two pages. */
  color: var(--gold-ink);
}
.doctor-profile__creds { display: flex; flex-direction: column; gap: 0.5rem; }
.doctor-profile__creds li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--t-small);
}
.doctor-profile__creds .sparkle {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-block-start: 0.35rem;
  color: var(--gold);
}
.doctor-profile__langs { font-size: var(--t-small); }
.doctor-profile__aside .btn { margin-block-start: var(--s-lg); }

/* --- Payment plans ---------------------------------------------------------- */

.money-card {
  padding: var(--s-lg);
  background: var(--bg-raised);
  box-shadow: inset 0 1px 0 var(--edge);
  clip-path: var(--facet-soft);
}
.money-card__title { font-family: var(--font-display); font-size: var(--t-h4); margin-block-end: var(--s-sm); }
.money-card p { color: var(--ink-soft); font-size: var(--t-small); }
.money-card__actions { margin-block-start: var(--s-lg); --flow: var(--s-2xs); }

.cherry { margin-block-start: var(--s-2xl); }
.cherry__title { font-size: var(--t-h3); margin-block-end: var(--s-md); }
.cherry__widget { min-height: 12rem; }
.cherry__note {
  margin-block-start: var(--s-md);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* --- Urgent bar --------------------------------------------------------------
 * Sits directly under the masthead on Contact. The person it is for is not
 * reading the page, so it has to be unmissable and it has to be a phone number.
 * -------------------------------------------------------------------------- */

.urgent-bar {
  background: var(--bg-raised-2);
  border-block: 1px solid color-mix(in oklch, var(--gold) 26%, transparent);
  padding-block: var(--s-md);
}
.urgent-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}
.urgent-bar__text { font-size: var(--t-small); color: var(--ink-soft); max-width: 62ch; }
.urgent-bar__text strong { color: var(--ink); }

/* --- Contact ---------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
  align-items: start;
}
@media (min-width: 62rem) {
  .contact__grid { grid-template-columns: 1.15fr 0.85fr; }
}

.contact__form-panel {
  padding: var(--s-lg);
  background: var(--bg-raised);
  box-shadow: inset 0 1px 0 var(--edge);
  clip-path: var(--facet-soft);
}
.contact__form-title { font-family: var(--font-display); font-size: var(--t-h3); }
.contact__form-note {
  margin-block: var(--s-sm) var(--s-lg);
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 52ch;
}
.ghl-embed {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-page);
}

.contact__aside { display: flex; flex-direction: column; gap: var(--s-lg); }

.office {
  padding: var(--s-lg);
  box-shadow: inset 0 1px 0 var(--edge);
  clip-path: var(--facet-soft);
  background: var(--bg-raised);
}
.office__name { font-family: var(--font-display); font-size: var(--t-h4); }
.office__address {
  font-style: normal;
  margin-block: var(--s-sm) var(--s-md);
  font-size: var(--t-lead);
  line-height: 1.4;
}
.office__lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: var(--s-md);
  border-block: 1px solid var(--rule);
  font-size: var(--t-small);
}
.office__lines li { display: flex; gap: var(--s-sm); align-items: baseline; }
/* The phone here is the point of the whole card. It measured 108x25 — inside the AA floor
   but the smallest real action on the page — so it gets the same padded target the footer
   and breadcrumb links use, pulled back out so the label column stays aligned. */
.office__lines a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}
.office__label {
  flex: none;
  width: 6rem;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--gold-ink);
}
.office__lines a { font-weight: 600; text-decoration: none; }
.office__lines a:hover { color: var(--gold-ink); }
.office__actions { margin-block-start: var(--s-md); }

/* --- Payment plans ------------------------------------------------------------ */

/* Grid and surface come from .plane / .face. Three ways to pay are one
   decision, so they are one surface with shared edges rather than three cards. */


.pay-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
/* The middle option is the one most people can actually use; it is marked, but
   the three cards stay the same size. */
/* Marked by .face--lit in surfaces.css — the ground and a gold top edge, not an
   outline. Cherry is the option most people can actually use. */
.pay-card__title { font-family: var(--font-display); font-size: var(--t-h4); }
.pay-card__body { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.6; }
.pay-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block-start: var(--s-2xs);
  font-size: var(--t-small);
}
.pay-card__list li { display: flex; gap: 0.55rem; align-items: baseline; }
.pay-card__list li::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  margin-block-start: 0.42em;
  background: var(--gold);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.pay-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--s-md);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.pay-card__cta { margin-block-start: auto; }

/* INLAY: the emotional payload of the page — "and if none of that is enough?"
   — is the one object here that must outrank everything around it. */
.money-talk__panel {
  padding: clamp(var(--s-lg), 4vw, var(--s-2xl));
  text-align: center;
}
.money-talk__title { font-size: var(--t-h2); max-width: 18ch; margin-inline: auto; }
.money-talk__body {
  margin-block-start: var(--s-md);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}
.money-talk__actions { justify-content: center; margin-block-start: var(--s-lg); }

/* --- Beliefs (What Sets Us Apart) ---------------------------------------------
 * A manifesto rather than two columns of prose: the claim at display size so a
 * scanner leaves with the promise, the argument beneath it for anyone reading.
 * -------------------------------------------------------------------------- */

/* --- Beliefs: one cut plane per claim -------------------------------------
 * The original 2 x 2 grid gave each claim a 612px cell it filled to 460px and 227px tall,
 * so three quarters of every cell was empty. Splitting them into full-width bands fixed the
 * measurement and not the composition: the type and the photograph became two free-floating
 * objects with a corridor of page between them, which is what "barebones" meant.
 *
 * Each band is now a two-face cut plane. The faces share one gold edge, so the claim and the
 * evidence for it are visibly a single object, and the page inherits the same construction
 * as the credential run and the services mosaic instead of inventing a layout of its own.
 * -------------------------------------------------------------------------- */

.beliefs__list {
  display: grid;
  gap: var(--s-xl);
}

.belief__plane {
  grid-template-columns: 1fr;
  /*
   * The GOLD edge, not the grey cut line.
   *
   * `--edge` on a light ground is oklch(0.6 0.014 250), a cool grey that groups without
   * asserting — right for a set of six services, wrong for the four sentences this practice
   * is built on. `--gold-deep` measures 5.02:1 on the reading surface, which is the one gold
   * that is legal as a structural edge on light, and this is the page it belongs on.
   */
  --edge: var(--gold-deep);
}

@media (min-width: 62rem) {
  .belief__plane {
    /* The photograph is evidence for the sentence, not the subject of the band, so type
       takes the larger face. */
    grid-template-columns: 0.95fr 1.05fr;
  }
  /* Alternate which side the picture is on WITHOUT reordering the DOM, so the reading order
     stays picture-then-claim in source and for a screen reader. */
  .belief--flip .belief__media { grid-column: 2; grid-row: 1; }
  .belief--flip .belief__copy  { grid-column: 1; grid-row: 1; }

  /*
   * And the CORNER CUTS have to follow the swap.
   *
   * `.plane > :first-child` takes the top-left cut and `:last-child` the bottom-right, both
   * keyed to DOM order. Swapping the columns visually leaves those cuts on the wrong faces:
   * the top-left cut landed on the face now sitting bottom-right, and the face actually at
   * the top-left kept a square corner, overhung the frame's diagonal and lost its gold.
   *
   * Measured on the two flipped bands: cut-tl 322 units off the frame colour, cut-br 73.
   * Both read as zero on the two un-flipped bands beside them, which is exactly why looking
   * at the page did not surface it — half of them were right.
   */
  .belief--flip .belief__plane > :first-child {
    clip-path: polygon(
      0 0, 100% 0,
      100% calc(100% - var(--cut) + var(--facet-back)),
      calc(100% - var(--cut) + var(--facet-back)) 100%,
      0 100%);
  }
  .belief--flip .belief__plane > :last-child {
    clip-path: polygon(
      0 calc(var(--cut) - var(--facet-back)), calc(var(--cut) - var(--facet-back)) 0,
      100% 0, 100% 100%, 0 100%);
  }
}

/* The media face is a frame, so its padding moves to zero and the picture fills the cell
   edge to edge — the same thing the tour plane does with its clips. */
.belief__plane .belief__media { padding: 0; }

.belief__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
}

.belief__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  justify-content: center;
}
@media (min-width: 62rem) {
  .belief__plane .belief__copy { padding: var(--s-xl); }
}

.belief__claim {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.35rem);
  line-height: 1.12;
  text-wrap: balance;
}
.belief__body { color: var(--ink-soft); line-height: 1.65; max-width: 46ch; text-wrap: pretty; }

/*
 * The SENTENCE fills the width, not the air around it.
 *
 * Used once, on "You hear the number before you commit." There is no honest photograph of
 * that claim in this library and a stock one would be filler, so it takes the full measure
 * on its own — and being the one band that is not a plane is what makes it a pause in the
 * rhythm rather than a gap in it.
 *
 * An earlier attempt centred it; my own check measured the type reaching 54% of the row at
 * 1440 and 44% at 1920. Air on both sides is still air.
 */
.belief__plane--solo { grid-template-columns: 1fr; }
.belief--solo .belief__copy { max-width: 46rem; gap: var(--s-md); }

@media (min-width: 62rem) {
  .belief--solo .belief__copy { max-width: none; padding: var(--s-2xl) var(--s-xl); }
  .belief--solo .belief__claim {
    /* Ceiling well under the 6rem display cap; it is a statement, not a shout. */
    font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.3rem);
    line-height: 1.05;
    /*
     * `wrap`, not `normal`. `normal` is not one of this property's values — they are
     * wrap | nowrap | balance | stable | pretty — so the declaration was dropped and the
     * base rule's `balance` kept evening the lines and shortening them. Computed style said
     * `balance` while the stylesheet said otherwise, which is the only reason it was caught.
     */
    max-width: none;
    text-wrap: wrap;
  }
  .belief--solo .belief__body { font-size: var(--t-lead); max-width: 58ch; }
}

/* --- Pledge band ---------------------------------------------------------------- */

/* No ground of its own. It was `--bg-raised`, which on the light section it now sits in is
   the near-white well tint — a faintly grey band framing the inlay for no reason. The inlay
   IS the object; the section around it is simply the page. */
.pledge__inner { max-width: none; }
.pledge__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-md); }
.pledge__mark { width: 1.6rem; height: 1.6rem; color: var(--gold); }
.pledge__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.12;
  max-width: 22ch;
}
.pledge__body {
  font-size: var(--t-lead);
  /* The inlay sets its own white ink; --ink-soft here would resolve from the LIGHT section
     around it and print near-black on navy. */
  color: oklch(0.820 0.032 250);
  max-width: 56ch;
  line-height: 1.6;
}
.pledge__actions { justify-content: center; margin-block-start: var(--s-sm); }

/* --- New patients prep ---------------------------------------------------------- */

.prep-grid {
  display: grid;
  gap: var(--s-lg);
  margin-block-start: var(--s-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  grid-auto-rows: 1fr;
}
@media (min-width: 62rem) {
  .prep-grid { grid-template-columns: repeat(2, 1fr); }
}
.prep-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-lg);
  background: var(--bg-raised);
  clip-path: var(--facet-soft);
}
.prep-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--t-h4);
}
.prep-card__mark { width: 0.85rem; height: 0.85rem; color: var(--gold); flex: none; }
.prep-card__body { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.65; }

/* --- Reviews ------------------------------------------------------------------ */

/*
 * The reading surface, not navy.
 *
 * /reviews/ opened on THREE stacked dark bands — a navy masthead, this, and the navy
 * testimonials wall directly under it — which reads as one enormous dark block with two
 * seams in it rather than as three sections. The wall is the page's event and it should
 * arrive against light; the score is the number that introduces it, and a number set at
 * display size does not need a ground to be seen.
 *
 * Caught by seam-check across every route, not by looking at the page it was reported on.
 */
.score {
  background: var(--bg-page-2);
  border-block-end: 1px solid var(--rule-light);
  padding-block: var(--s-2xl);
}
.score__inner {
  display: grid;
  gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
  align-items: center;
}
@media (min-width: 60rem) {
  .score__inner { grid-template-columns: auto 1fr; }
}
/*
 * The rating is an OBJECT, not a large number floating on a grey band.
 *
 * 5.0 from 884 reviews is the strongest single fact on this site and it was set as loose
 * type on a flat rectangle. It gets the lit face the credential plane gives its one
 * verifiable award — the same warm ground, the same cut, the same gold edge — so the page
 * opens on a piece of evidence rather than on a caption.
 */
.score__figure {
  align-self: center;
  grid-template-columns: 1fr;
  /* The frame paints this; `.plane` handles the cut and `--facet-back` keeps the gold on
     both diagonals. Nothing here draws its own border. */
  --edge: var(--gold-deep);
}
.score__figure-face {
  text-align: center;
  padding: var(--s-lg) var(--s-xl);
  /* The lit ground the credential plane gives its one verifiable award. */
  --face: oklch(0.960 0.032 92);
}
.score__value {
  font-family: var(--font-display);
  /* Ceiling down from 7rem. At that size it was the largest thing on any page of the site,
     including the hero, for a figure that is supporting evidence rather than the headline. */
  font-size: clamp(3.25rem, 2.4rem + 3.6vw, 5rem);
  line-height: 0.9;
  color: var(--gold-deep);
}
.score__figure .stars { margin-block: var(--s-sm) var(--s-2xs); font-size: 1.25rem; }
.score__meta { font-size: var(--t-small); color: var(--ink-dark-soft); }

.score__themes-title { font-family: var(--font-display); font-size: var(--t-h3); }
.themes {
  margin-block: var(--s-lg) var(--s-md);
  /* Gold, not the grey cut line. These are the page's proof, and `--gold-deep` is the one
     gold that is legal as a structural edge on the reading surface. */
  --edge: var(--gold-deep);
}
.themes .theme {
  display: flex;
  flex-direction: column;
  /* Centred in the face rather than pinned to its top. `grid-auto-rows: 1fr` makes every
     face the height of the tallest, and a two-line pair sitting against the top edge of a
     180px cell leaves the slack all in one place, which reads as an unfinished cell. */
  justify-content: center;
  gap: 0.2rem;
  padding: var(--s-lg) var(--s-md);
  min-height: 8.5rem;
}
.theme__count {
  font-family: var(--font-display);
  /* Larger than --t-h3 was: the count is the object in its face, the label is its caption. */
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
  color: var(--gold-deep);
  line-height: 1;
}
.theme__label { font-size: var(--t-small); color: var(--ink-soft); }
/* The provenance line. It is the reason this block is worth anything — these are Google's
   counts, not the practice's — so it sits under the plane at full width rather than
   trailing the first column. */
.score__themes-note { font-size: var(--t-small); color: var(--ink-dark-soft); max-width: 60ch; }

.leave-review__inner { text-align: center; }
.leave-review__body {
  margin-block: var(--s-md) var(--s-lg);
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-inline: auto;
}

/* --- Blog post -------------------------------------------------------------- */

.post__meta { margin-block-start: var(--s-sm); font-size: var(--t-small); color: var(--ink-soft); }
.post__hero { margin-block-end: var(--s-xl); }
.post__hero img { width: 100%; }
.post__terms {
  margin-block-start: var(--s-xl);
  padding-block-start: var(--s-md);
  border-block-start: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.post__terms a { color: var(--gold-ink); }
.related__title { font-size: var(--t-h3); margin-block-end: var(--s-lg); }

/* --- 404 --------------------------------------------------------------------- */

.error-404 { padding-block-start: calc(var(--header-h) + var(--s-2xl)); text-align: center; }
.error-404__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.32;
}
.error-404__title { margin-block-start: var(--s-md); }
.error-404__body {
  margin-block-start: var(--s-md);
  color: var(--ink-soft);
  font-size: var(--t-lead);
}
.error-404__actions { justify-content: center; margin-block-start: var(--s-lg); }
.error-404__services { margin-block-start: var(--s-2xl); }
.error-404__services h2 { font-size: var(--t-h4); }
.error-404__services .other-services__list { justify-content: center; }
.error-404__search { margin-block-start: var(--s-xl); }

/* --- Search form -------------------------------------------------------------- */

.search-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  max-width: 32rem;
  margin-inline: auto;
}
.search-form .field { flex: 1; }

/* --- Judgement-free band ------------------------------------------------------- */

.judgement-free { background: var(--bg-raised); }

/* --- Doctors index: "which of them will I see?" --------------------------
 * The only content on this page that is genuinely about these two people and
 * exists nowhere else on the site.                                          */


.who__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  margin-block-end: var(--s-2xs);
}
.who__plane p { color: var(--ink-soft); font-size: var(--t-small); }

.who__langs {
  margin-block-start: var(--s-xl);
  padding: var(--s-lg);
  background: var(--bg-page-2);
  box-shadow: inset 0 1px 0 var(--edge);
  clip-path: var(--facet-soft);
}
.who__langs-title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  margin-block-end: var(--s-md);
}
.who__langs-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-2xl);
}
.who__langs-list li { display: flex; flex-direction: column; gap: 0.1rem; }
.who__lang {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  color: var(--gold-ink);
}
.who__lang-who { font-size: var(--t-small); color: var(--ink-soft); }
.who__langs-note {
  margin-block-start: var(--s-md);
  max-width: 62ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* --- Where the number comes from ----------------------------------------- */


.bill__who {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--gold-ink);
  margin-block-end: var(--s-2xs);
}
.bill__what {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
  margin-block-end: var(--s-2xs);
  text-wrap: balance;
}
.bill__body { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.6; }
.bill__yours {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-block-start: auto;
  padding-block-start: var(--s-sm);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ink);
}
.bill__yours .sparkle { width: 0.75em; height: 0.75em; flex: none; }
.bill__stage { display: flex; flex-direction: column; }

.bill__note {
  margin-block-start: var(--s-lg);
  max-width: 68ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.bill__note a { color: var(--gold-ink); font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   Tap targets — last in the cascade on purpose.

   WCAG 2.2 SC 2.5.8 asks for 24px; 44px is the figure that actually matters
   for an older hand on a phone, and this practice's patients skew that way.

   These live at the end of the last stylesheet because several components
   reset min-height for their own reasons — .btn--quiet sets it to `auto` in
   components.css, which loads after base.css and was quietly winning. Putting
   the floor first in the cascade meant it was not a floor at all.
   ========================================================================== */

.btn--quiet,
.header__phone,
.rating-badge a,
.doctor__name a,
.bill__note a,
.other-services__list a,
.breadcrumbs__item a,
.footer__list a,
.footer__legal a,
.social a,
.faq__tail a,
.location__meta a,
.fact-rail__doctors a,
.switchboard__field input {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Vertical lists: the hit area grows without the text moving, so the footer and
   the breadcrumb keep their rhythm. */
.footer__list a,
.footer__legal a { padding-block: 0.55rem; }
/* Vertical padding was already here; the width was not. A one-word crumb like "Home"
   measured 38px across — inside SC 2.5.8's 24px floor, but the crumbs sit shoulder to
   shoulder, which is the arrangement where a near-miss lands on the neighbour. Padding
   pulled back out by margin so the trail stays visually flush. */
.breadcrumbs__item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.4rem;
  padding-inline: 0.45rem;
  margin-inline: -0.45rem;
}

/* The brand mark is the largest link in the header and was still 43px. */
.header__brand { min-height: 44px; }

/*
 * A claim with no photograph beside it takes the whole width.
 *
 * Used once, on "You hear the number before you commit." There is no honest image of that
 * sentence in this library and a stock one would be filler. Given the full measure it is
 * the loudest thing on the page — which, for the claim the brief says decides bookings, is
 * the correct outcome rather than a compromise.
 */
.belief--solo { grid-template-columns: 1fr; }
.belief--solo .belief__copy {
  max-width: 46rem;
  gap: var(--s-md);
}

/*
 * The SENTENCE fills the width, not the air around it.
 *
 * First attempt centred this band. That reads as a composition but my own check measured it
 * filling 65% of the row at 1440 and 53% at 1920 — which is the complaint this rebuild
 * started from, symmetrical instead of lopsided. Air on both sides is still air.
 *
 * So the claim itself spans the container and the body sits beneath it at reading measure.
 * The one band with no photograph becomes the one band whose type is the largest thing on
 * the page, which is the right outcome for the claim the brief says decides bookings.
 */
@media (min-width: 62rem) {
  .belief--solo { padding-block: var(--s-xl); }
  .belief--solo .belief__copy { max-width: none; gap: var(--s-md); }
  .belief--solo .belief__claim {
    /* Ceiling well under the 6rem display cap; it is a statement, not a shout. */
    font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.3rem);
    line-height: 1.05;
    /*
     * No `max-width`, and no `balance`.
     *
     * Both were fighting the point of this band. `max-width: 24ch` wrapped the sentence
     * early and `text-wrap: balance` then evened the two short lines, so the largest type
     * on the page occupied 54% of the row at 1440 and 44% at 1920 — measured, and the
     * reason the honest version of about-check failed. Let the line fill before it breaks.
     *
     * `wrap`, not `normal`. `normal` is not one of this property's values — they are
     * wrap | nowrap | balance | stable | pretty — so the declaration was simply dropped and
     * the base rule's `balance` kept applying. Computed style said `balance` while the
     * stylesheet said otherwise, which is the only reason this was caught.
     */
    max-width: none;
    text-wrap: wrap;
  }
  .belief--solo .belief__body { font-size: var(--t-lead); max-width: 58ch; }
}
}