/* ============================================================
   SUNSHINE WELLNESS — service-page.css
   v11 · 2026-09-24: V10 review changes, see the v11 block at the end of the file
   v1 · 2026-09-03

   Shared styles for interior/service pages. Loaded AFTER style.css
   and BEFORE mobile.css, so it inherits every design token and
   component from the homepage and only adds page-level layout.

   Nothing here overrides a homepage rule — it is additive, so the
   landing page is unaffected whether or not this file is present.
   Reused as-is by every service page that follows.
   ============================================================ */

/* ---------- Breadcrumbs ------------------------------------- */
.crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 1.1rem;
}
.crumbs a{ color: var(--color-muted); }
.crumbs a:hover{ color: var(--color-primary-deep); }
.crumbs [aria-current]{ color: var(--color-ink); font-weight: 600; }

/* ---------- Page hero --------------------------------------- */
.svc-hero{
  background: var(--color-white);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.svc-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.svc-hero__title{
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0.35rem 0 1rem;
}
.svc-hero__lead{
  font-size: 1.15rem;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.svc-hero__text{
  color: var(--color-muted);
  margin-bottom: 0.9rem;
}
.svc-hero__media{ position: relative; }
.svc-hero__img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* At-a-glance facts strip */
.svc-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.svc-fact{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--color-surface-tint);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
}
.svc-fact__k{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-primary-deep);
}
.svc-fact__v{ font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.svc-hero__actions{ display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Generic interior section ------------------------ */
.svc-block{
  position: relative;
  background: var(--color-white);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.svc-block--tint{
  background: var(--color-mint-surface);
  /* extra top room so the wave has somewhere to sit without hitting content */
  padding-top: clamp(6rem, 9vw, 8rem);
}
/* The wave paints the colour of the section ABOVE flowing down into this one.
   Tinted blocks follow a white block, so the fill is white, not the tint.
   (Filling it with the tint paints mint on mint and the wave disappears.) */
.svc-block--tint .why__divider-fill{ fill: var(--color-white); }

.svc-narrow{ max-width: 820px; }          /* comfortable reading measure */
.svc-head{
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}
.svc-head--left{ margin-left: 0; text-align: left; }
.svc-h2{
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0.25rem 0 1rem;
}
.svc-h3{
  font-size: 1.15rem;
  color: var(--color-ink);
  margin: 1.75rem 0 0.6rem;
}
.svc-block p{ color: var(--color-muted); margin-bottom: 1rem; }

/* ---------- Card grid (what is included) -------------------- */
.svc-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Five items in a two-column grid strands the fifth on its own row. */
.svc-grid--three{ grid-template-columns: repeat(3, 1fr); }

/* ---------- Lists ------------------------------------------- */
.svc-list{ list-style: none; margin-top: 1.25rem; }
.svc-list li{
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  color: var(--color-muted);
}
.svc-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.svc-list strong{ color: var(--color-ink); }

.svc-steps{ counter-reset: step; list-style: none; margin-top: 0.5rem; }
.svc-steps li{
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.1rem;
  color: var(--color-muted);
}
/* On a tinted section the default tint circle disappears into the
   background, so the step markers get a white disc instead. */
.svc-block--tint .svc-steps li::before{
  background: var(--color-white);
  border: 1px solid var(--color-line);
}
.svc-steps li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-surface-tint);
  color: var(--color-primary-deep);
  font-size: 0.85rem;
  font-weight: 700;
}
.svc-steps strong{ color: var(--color-ink); }

/* ---------- Practitioner block ------------------------------ */
.svc-bio{
  max-width: 1080px;                  /* keeps the copy at a readable measure */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
.svc-bio__img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.svc-bio__actions{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* FAQ accordion inherits .svc-acc from style.css unchanged */

/* ============================================================
   INTERIOR PAGE HEADER — "Option D": photo band with scrim
   Chosen 2026-09-03. Used by every sub-page so they read as a set
   and are instantly distinguishable from the homepage hero.

   Height is a clamp, not a hard 30vh, so it cannot crush on a short
   laptop or balloon on a tall monitor.

   NOTE: one photo is currently reused across pages until the content
   shoot supplies more. Swap per page by changing the <img> only.
   ============================================================ */
.page-hero{
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 46vh, 520px);   /* 30vh read as cramped once the
                                              sticky header sat on top of it */
  padding-block: clamp(2.5rem, 5vw, 4rem); /* keeps the breadcrumb off the header */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-navy-deep);
}
.page-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Scrim: heavy on the left where the text sits, lifting to the right so
   the photo still reads. */
.page-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15,31,43,0.90) 0%,
    rgba(15,31,43,0.66) 55%,
    rgba(15,31,43,0.38) 100%);
}
.page-hero .container{ position: relative; z-index: 2; width: 100%; }
.page-hero__title{
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  color: var(--color-white);
  margin: 0.25rem 0 0.6rem;
}
.page-hero__lead{
  font-size: 1.05rem;
  color: #d6e4ee;
  max-width: 56ch;
}
.page-hero .eyebrow{ color: var(--color-warm-gold); }
.page-hero .crumbs,
.page-hero .crumbs a{ color: #b7cbd9; }
.page-hero .crumbs a:hover{ color: var(--color-white); }
.page-hero .crumbs [aria-current]{ color: var(--color-white); font-weight: 600; }


/* ---- Page hero: at-a-glance stat strip ---------------------- */
.page-hero__stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.page-hero__stat{ display: flex; flex-direction: column; gap: 0.15rem; }
.page-hero__num{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  color: var(--color-white);
}
.page-hero__lbl{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #a9c4d4;
}

/* ---- About: practitioner rows ------------------------------- */
.people-rows{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.75rem; margin-top: 1.75rem; }
.person-row{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}
.person-row:hover{ border-color: var(--color-primary-soft); transform: translateY(-2px); }
.person-row__img{
  width: 56px; height: 56px; flex: none;
  border-radius: 50%; object-fit: cover;
}
.person-row__name{ font-weight: 700; font-size: 0.98rem; color: var(--color-ink); }
.person-row__role{ font-size: 0.85rem; color: var(--color-muted); }
.person-row__go{ margin-left: auto; color: var(--color-primary-deep); font-weight: 700; flex: none; }

/* ---- Services hub: one block per discipline ------------------
   Copy and treatment list on the left, the full price panel on the
   right. This is where the pricing tables that came off the homepage
   now live. */
.svc-service{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.svc-service__head{ display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.svc-service__head .service-card__badge{ width: 44px; height: 44px; }
.svc-service__head .service-card__badge svg{ width: 22px; height: 22px; }
.svc-service__title{
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  color: var(--color-ink);
  margin: 0;
}
.svc-service__lead{ color: var(--color-muted); margin-bottom: 1.35rem; }
.svc-service__list{
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.svc-service__list li{
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  color: var(--color-muted);
  break-inside: avoid;
}
.svc-service__list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary-soft);
}
/* Callout for a service that has a page of its own */
.svc-callout{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface-tint);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--color-ink);
}
.svc-callout .service-card__link{ margin-left: auto; }
/* Base .svc-callout is a flex row, which turns an inline <a> mid-sentence
   into its own flex item and opens a gap around it. This variant is for
   callouts that are just a paragraph with links in the prose. */
.svc-callout--flow{ display: block; }
.svc-callout--flow a{ color: var(--color-primary-deep); font-weight: 600; }

/* ============================================================
   PRODUCTS PAGE (Pillowise)
   v3 - 2026-09-05  (v1 had a fitting-steps row, a size grid, a spec list
   and a badge strip; v2 cut to three sections with product-line cards.
   The clinic only stocks the adult pillow, so the line cards went and
   the size grid came back as the third section.)

   Pillowise's pillow shots are transparent PNG/WebP and sit directly on
   a section background. The measuring diagram is opaque white, so it
   gets .prod-frame rather than sitting loose on a tinted band.
   ============================================================ */

/* ---- Split feature: media one side, copy the other ----------- */
.prod-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.prod-split__media img{ width: 100%; height: auto; display: block; }
/* Reversed order is set on the MEDIA, not the copy, so the copy stays
   first in the DOM and therefore first in the reading order on mobile. */
.prod-split--rev .prod-split__media{ order: 2; }
.prod-split__copy p:last-child{ margin-bottom: 0; }

/* Drop shadow under the cut-out product shots so they do not float */
.prod-shot{ filter: drop-shadow(0 22px 26px rgba(22, 42, 56, 0.16)); }

/* White frame for the Pillowise diagram, which ships on an opaque white
   background and would otherwise be a white rectangle on a tinted band. */
.prod-frame{
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.prod-frame img{ display: block; width: 100%; height: auto; }

/* ---- The size range: one card per colour --------------------- */
.size-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.size-card{
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem 1.15rem;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.size-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.size-card img{ display: block; width: 100%; height: auto; }
.size-card__name{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-ink);
}
.size-card__dot{
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.10);
}
.size-note{
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ============================================================
   PRACTITIONER PAGES + TEAM HUB
   Added v1 - 2026-09-05.

   The standard .page-hero is a full-bleed photo band, which needs a wide
   landscape image. The only photos of the practitioners are portraits,
   and Iana's usable crop is 340px square, so the person variant drops the
   background photo and sets the portrait beside the name instead. Same
   navy band, same breadcrumb and eyebrow, same height.
   ============================================================ */

.page-hero--person{
  background: linear-gradient(115deg, var(--color-navy-deep) 0%, var(--color-green-deep) 100%);
}
/* No photo behind it, so the scrim would only mute the gradient */
.page-hero--person::after{ display: none; }

.person-hero{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.person-hero__portrait{
  width: clamp(190px, 21vw, 270px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 5px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-lg);
}
.person-hero__role{
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary-soft);
  margin-bottom: 0.9rem;
}

/* Credential pills. Facts only, no claims: schools, designations, years. */
.cred-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
}
.cred{
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: #d6e4ee;
}
.person-hero__actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
/* .btn--outline is primary-deep on transparent, which is fine on the light
   sections but disappears on the navy hero (2.0:1). Light-on-dark here. */
.page-hero .btn--outline{
  color: var(--color-white);
  border-color: rgba(255,255,255,0.45);
}
.page-hero .btn--outline:hover{
  background: var(--color-white);
  color: var(--color-navy-deep);
  border-color: var(--color-white);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

/* ---- Focus areas: what a practitioner works with -------------- */
.focus-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.focus-list li{
  position: relative;
  padding-left: 1.9rem;
  color: var(--color-ink);
  font-size: 0.98rem;
}
.focus-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 4px var(--color-white);
}

/* ---- Team hub: cards reuse .team-card--photo from style.css --- */
.team-grid-page{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* ============================================================
   404 PAGE
   Added v1 - 2026-09-08.

   Deliberately plain: the site chrome plus one block. A 404 is a
   wayfinding page, not a destination, so it gets no photo band.
   ============================================================ */
.err{
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background: var(--color-white);
  text-align: center;
}
.err__mark{ width: 76px; height: auto; margin: 0 auto 1.5rem; display: block; opacity: .9; }
.err__num{
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 6rem);
  line-height: 1;
  color: var(--color-primary-soft);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.err__title{
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: 0.9rem;
}
.err__text{
  max-width: 46ch;
  margin: 0 auto 2rem;
  color: var(--color-muted);
}
.err__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.err__links{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-line);
  max-width: 620px;
  margin: 0 auto;
  list-style: none;
}
.err__links a{
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-primary-deep);
}
.err__links a:hover{ text-decoration: underline; }

/* ============================================================
   REVISION PASS - 2026-09-08 (client review of v10)
   ============================================================ */

/* Hero stat strips were cut from every page. The rule above them stayed,
   because it closes the hero off from the section below. */
.page-hero__rule{
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255,255,255,0.22);
  /* Holds open the space the stat strip used to fill, so the heroes keep
     the proportions they had. Measured, not guessed: the old strip was a
     28px padding-top plus ~55px of content = 82px at a 1440px viewport. */
  padding-bottom: clamp(3.5rem, 5.7vw, 5.125rem);
}

/* Softer tinted band with NO wave divider. Used where a wave read as too
   much decoration: the products "why measure" block and the practitioner
   pages' areas of focus. Lighter than --color-mint-surface on purpose. */
.svc-block--wash{ background: var(--color-tint-soft); }

/* Actions sitting at the foot of a content block */
.block-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* ---- Services hub: one row per discipline --------------------
   Photo left, text right, and the rates sit BELOW the text in a 3-column
   grid rather than as one long stack of full-width rows. Five services
   become two short rows instead of five tall ones, which is what keeps
   each card compact.
   ------------------------------------------------------------- */
.svc-rows{
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 6vw, 4.5rem);
}
/* No card chrome on the service itself - no border, no fill, no radius.
   The three items are separated by space alone. The only boxed things on
   the page are the individual rates inside each one. */
.svc-row-card{
  display: grid;
  grid-template-columns: clamp(240px, 30%, 360px) 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.svc-row-card__img{
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.svc-row-card__body{ display: flex; flex-direction: column; }
.svc-row-card__title{
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 0.35rem;
}
.svc-row-card__who{ font-size: 0.92rem; color: var(--color-muted); margin: 0 0 1.25rem; }
.svc-row-card__body .service-card__link{ align-self: flex-start; margin-top: 1.1rem; }

/* Each rate is its own small tinted card rather than a row in a ruled
   list, so the individual services read as separate items at a glance.
   No border on them - the tint alone separates them from the white card
   they sit in, and a border here would be a third box outline deep. */
.svc-rates{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-rates li{
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--color-surface-tint);
  border-radius: var(--radius-sm);
}
.svc-rates__n{
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
  margin-bottom: 0.15rem;
}
.svc-rates__v{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-deep);
  font-variant-numeric: tabular-nums;
}
/* --color-muted (#64798a) is 4.13:1 on the tint, under AA. Scoped darker
   here rather than shifting the global token. */
.svc-rates__m{ font-size: 0.88rem; color: #5a6d7e; }
.svc-rates__note{ font-size: 0.85rem; font-style: italic; color: var(--color-muted); margin-top: 1rem; }

/* ---- Services hub: the in-clinic products card --------------- */
.prod-pointer{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.prod-pointer__media img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(22,42,56,.14));
}
.prod-pointer h2{ font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--color-ink); margin: 0.3rem 0 0.6rem; }
.prod-pointer p{ color: var(--color-muted); margin-bottom: 1rem; font-size: 0.96rem; }

/* ---- Image placeholder --------------------------------------
   Marked-up rather than a grey JPEG so it is obvious at a glance that a
   real photo is still owed here. Swap the whole div for an <img>. */
.ph-img{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-tint);
  border: 1px dashed var(--color-line-strong, #c2d4e0);
  border-radius: var(--radius-lg);
  color: var(--color-muted);
}
.ph-img span{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Section-2 photo on the service pages. Replaced the .ph-img placeholder. */
.who-img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

/* v11 · 2026-09-24 — About "whole-person care" row is down to three cards
   after "Practitioners who talk" was cut (V10 review #19). Each card keeps
   the exact width it had in the four-across row; the three are centred,
   not stretched. Tablet and phone fall back to the usual 2-up / 1-up
   rules in mobile.css, which loads after this file. */
.why__grid--three{
  grid-template-columns: repeat(3, calc((100% - 4.5rem) / 4));   /* 4.5rem = the three 1.5rem gaps of the 4-up row */
  justify-content: center;
}

/* v11 · 2026-09-24 — chiropractic hero now uses the adjustment photo
   (V10 review #29). The practitioner's hands sit in the top third of the
   frame, and the default centre-40% crop of a wide band cuts them off. */
.page-hero__img--hands{ object-position: center 18%; }