/* ═══════════════════════════════════════════════════════════
   The Solution Clinic — shared stylesheet
   Mobile-first: base styles are for phones; @media blocks
   progressively enhance for tablet and desktop.
   Plain CSS, no build step — by design (see the project docs.
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy:       #1D3C78;
  --navy-dark:  #122548;
  --cream:      #F5F0E8;
  --cream-dark: #EAE4D8;
  --white:      #FFFFFF;
  --text:       #1A1F36;
  --muted:      #64748B;
  --border:     #E2E8F0;
  --star:       #F59E0B;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Widened from 1140px (design decision): content sat too
     narrow in the centre on desktop. Mobile is unaffected — below this
     width the page always uses the full viewport. */
  --maxw:   1280px;
  --radius: 16px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 20px 48px -8px rgba(0,0,0,.16);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px -4px rgba(0,0,0,.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Sticky header offset: anchored targets (#book, #locations) land with their
   heading visible below the nav instead of hidden underneath it. */
[id] { scroll-margin-top: 92px; }
body {
  font-family: var(--font-body); color: var(--text); background: var(--white);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.eyebrow {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--navy); flex-shrink: 0; }

.section { padding: 44px 0; }
.section-head { margin-bottom: 26px; }
.section-head h2 { font-size: clamp(26px, 4.5vw, 42px); font-weight: 800; letter-spacing: -.02em; margin-top: 14px; }
.section-head p { color: var(--muted); margin-top: 12px; max-width: 620px; }
.section-cream { background: var(--cream); }
.section-navy { background: var(--navy-dark); color: var(--white); }
.section-navy .eyebrow { color: rgba(255,255,255,.6); }
.section-navy .eyebrow::before { background: rgba(255,255,255,.4); }
.section-navy .section-head p { color: rgba(255,255,255,.65); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border: 2px solid transparent; border-radius: 999px; padding: 13px 28px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s ease;
}
.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-white:hover { background: var(--cream); border-color: var(--cream); }

/* Shared photo frame. */
.photo { position: relative; border-radius: 12px; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Full-width athletic photo band — kept slim (design decision): at its
   original clamp(220px, 32vw, 380px) it broke the homepage flow and pushed
   the next section too far down. It's a divider, not a section. */
.photo-band { border-radius: 0; }
.photo-band img { height: clamp(120px, 16vw, 190px); }
.photo-band::after { left: 16px; bottom: 16px; }

/* Large centred logo moment (white section — logo background blends in) */
.brand-band { padding: 40px 0 12px; text-align: center; }
.brand-band img { height: clamp(170px, 26vw, 270px); width: auto; margin: 0 auto; }

/* ── Header / nav ───────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  /* Solid white (design decision): the translucent version let
     navy sections show through and exposed the logo's white square. */
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 62px; width: auto; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
}
@media (max-width: 430px) { .brand-name { font-size: 12px; letter-spacing: .12em; } }

.nav-links {
  display: none; /* hidden on mobile; shown via .open or desktop media query */
}
.nav-cta { display: none; }

/* Mobile menu button */
.menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.menu-btn span {
  display: block; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}
/* Hamburger becomes a cross while the panel is open, so the control says
   "close" rather than leaving the visitor to guess. The bars are 2px with a
   5px gap, so 7px of travel brings the outer two onto the centre line. */
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel.
   Full height below the header, not a dropdown sized to its content. As a
   dropdown it left whatever was behind it half visible down the page, and the
   page kept scrolling underneath, which read as unfinished. Fixed positioning
   plus a locked body scroll (see toggleMenu in each page) makes it a single
   opaque surface. It stops at the header rather than covering it, so the logo
   stays put and the close control never moves. 80px is the mobile .nav height;
   the panel is hidden entirely above 960px. */
.mobile-menu {
  display: none;
  position: fixed; left: 0; right: 0; top: 80px; bottom: 0;
  background: var(--white);
  padding: 12px 20px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { display: block; }
/* Lock the page behind an open panel: without it the page scrolled underneath,
   which was half of why the menu looked slapped on. Done in CSS rather than by
   setting body.style.overflow in toggleMenu, because a JS lock survives a
   resize past the breakpoint and can leave a widened window frozen with the
   panel already hidden. Scoping the media query makes that impossible.
   Browsers without :has() simply do not lock, exactly as before; the site
   already relies on the same graceful fallback for the About story photo. */
@media (max-width: 959px) {
  body:has(.mobile-menu.open) { overflow: hidden; }
}
/* :not(.btn) matters. Without it this rule beats .btn-primary on
   specificity (0,1,1 against 0,1,0), so the Book now button in the mobile
   menu inherited black link text, the 14px/4px link padding, and a 1px pale
   border-bottom in place of its 2px navy one. On a 999px radius that pale
   bottom edge met the navy sides as two light wedges in the lower corners.
   Reported on iPhone, but it affected every phone. */
/* :not(.social-cta) for the same reason as :not(.btn): the Instagram link is
   an <a> without .btn, so this rule would otherwise strip it back to a plain
   nav link. */
.mobile-menu a:not(.btn):not(.social-cta) {
  display: block; padding: 18px 4px; font-family: var(--font-display);
  font-weight: 600; font-size: 17px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:not(.btn):not(.social-cta)[aria-current="page"] { color: var(--navy); }
.mobile-menu .btn { margin-top: 24px; width: 100%; justify-content: center; }

/* Instagram sits under Book now in the panel. The base .social-cta rule is
   layout only, so this supplies the light colours for the white panel, the
   way .section-social supplies the dark ones for the navy strip. Full width
   to match the button above it. */
.mobile-menu .social-cta {
  display: flex; width: 100%; margin-top: 12px;
  background: var(--white); border-color: var(--border);
}
.mobile-menu .social-cta:hover { background: var(--cream); border-color: var(--navy); }
.mobile-menu .social-cta .ig-ico { background: var(--navy); color: var(--white); }
.mobile-menu .social-cta .ig-label { color: var(--muted); }
.mobile-menu .social-cta .ig-handle { color: var(--navy); }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: 40px 0 44px; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero h1 { font-size: clamp(34px, 8vw, 62px); font-weight: 800; letter-spacing: -.02em; margin-top: 18px; }
.hero h1 .accent { color: var(--navy); }
.hero-sub { font-size: 17px; color: var(--muted); margin: 18px 0 28px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.stat { flex: 1; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--border); }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--navy); line-height: 1; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.hero-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 340px;
}
.hero-images > :first-child { grid-row: 1 / 3; }

/* About opener — slimmed (design decision): Ben's story sits
   behind a "Read more" toggle (native <details>, same no-JS pattern as the
   team cards) and the photo is shorter, so the team grid sits close to the
   top of the page. .hero.hero-about beats the media-query .hero padding. */
/* Small opener (design decision): compact heading, lateral
   photo band, prominent Read more tab — Meet the team should peek above the
   fold on first load. Portrait source: object-position keeps Ben's face in
   frame instead of cover's centre crop cutting his forehead. */
.hero.hero-about { padding: 24px 0 28px; }
.hero-about h1 { font-size: clamp(30px, 5vw, 44px); margin-top: 10px; }
/* align-self start: the photo's top edge stays put, so the Read more
   expansion grows downwards only (the grid otherwise centres it and it
   would swell from both ends). */
.hero-about .hero-images { height: clamp(200px, 22vw, 260px); transition: height .4s ease; align-self: start; }
/* When Read more is open the photo grows tall to match the expanded story,
   revealing more of the original portrait (no JS: :has() watches the
   <details> state; browsers without :has() simply keep the short band). */
.hero-about .hero-grid:has(.story-more[open]) .hero-images { height: clamp(380px, 42vw, 470px); }
.hero-about .photo img { object-position: 50% 22%; }
.hero-about .hero-sub { margin-bottom: 14px; }
/* The Read more toggle reads as a proper button (design decision),
   matching .btn-outline. */
.story-more summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--navy);
  border: 2px solid var(--navy); border-radius: 999px; padding: 11px 24px;
  transition: all .2s ease;
}
.story-more summary:hover { background: var(--navy); color: var(--white); }
.story-more[open] summary { margin-bottom: 2px; }
/* Read more + Book share one row while closed; the expanded story takes the
   full width and wraps the book button below it. */
.story-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 6px; }
.story-more summary::-webkit-details-marker { display: none; }
.story-more summary::marker { content: ""; }
.story-more summary::after { content: "Read more ▾"; }
.story-more[open] summary::after { content: "Read less ▴"; }
.story-more > p { margin-top: 12px; color: var(--muted); line-height: 1.65; }

/* ── Cards ──────────────────────────────────────────────── */
.card-grid { display: grid; gap: 20px; }
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--muted); }
.card .price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--navy); margin-top: 16px; }
.card .price small { font-size: 13px; font-weight: 500; color: var(--muted); }

.card-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
}

/* ── Pain-point list (the "we treat" section) ───────────── */

/* ── Steps (our approach) ───────────────────────────────────
   Numbered top-border style, matching the original prototype. */
.steps { display: grid; gap: 24px; }
.step { padding-top: 22px; border-top: 3px solid var(--navy); }
.step-no {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--navy); letter-spacing: .08em; margin-bottom: 12px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ── Testimonials (prototype card style: stars, quote, author) */
.review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
  /* Explicit colour: these cards sit inside .section-navy, which sets
     color: white — without this the quote text is white-on-white. */
  color: var(--text);
}
.review-card p { font-size: 15px; line-height: 1.65; font-style: italic; flex: 1; }
.review-stars { color: var(--star); font-size: 16px; letter-spacing: 2px; }
.review-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.review-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.review-source { font-size: 12px; color: var(--muted); margin-top: 2px; }
.reviews-more { text-align: center; margin-top: 20px; }
.reviews-more a {
  font-size: 14px; color: rgba(255,255,255,.75);
  text-decoration: underline; text-underline-offset: 3px;
}
.reviews-more a:hover { color: var(--white); }

/* ── Elite-athlete endorsements (homepage, navy section) ──── */
.elite-grid { display: grid; gap: 20px; }
.elite-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 24px; display: flex; flex-direction: column;
  transition: border-color .2s;
}
.elite-card:hover { border-color: rgba(255,255,255,.28); }
.elite-medals { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.medal-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 5px 12px; color: rgba(255,255,255,.85);
}
/* Name + photo lead the card; the quote sits below, deliberately quieter.
   What matters is who has reviewed us, not the wording. */
.elite-quote {
  font-size: 13.5px; font-weight: 400;
  line-height: 1.6; color: rgba(255,255,255,.65); font-style: italic;
}
.elite-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--white); }
.elite-title { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 3px; }

/* ── Team (small circular photos, per the original prototype) */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.team-card { text-align: center; }
.team-card .ph-img {
  width: min(140px, 70%); aspect-ratio: 1 / 1; border-radius: 50%;
  margin: 0 auto 12px; padding: 10px; font-size: 11px;
}
/* Real photos, when they arrive, drop into the same circle. */
.team-card img {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 12px;
}
/* Navy initial circle used in place of a photo. Same 140px circle as the real photos so the grid stays even, and it
   reads as a deliberate design choice rather than a missing image. Swap the
   div for an <img> when the photo lands. */
.team-initials {
  width: 140px; height: 140px; border-radius: 50%;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
}
.team-card h3 { font-size: 16px; }
.team-card .role { font-size: 13px; color: var(--muted); }

/* ── Locations ──────────────────────────────────────────── */
.location-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.location-card .loc-map { height: 160px; border-radius: 0; border-width: 0 0 2px 0; }
.location-card .loc-map-embed { display: block; width: 100%; height: 160px; border: 0; border-bottom: 1px solid var(--border); }
.location-card .loc-body { padding: 24px; }
.location-card h3 { font-size: 20px; margin-bottom: 4px; }
.location-card .loc-tag {
  display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
  background: var(--cream); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.location-card ul { list-style: none; margin-top: 12px; }
.location-card li { font-size: 14px; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--border); }
.location-card li:last-child { border-bottom: none; }
.location-card li strong { color: var(--text); font-weight: 600; }
.location-card .maps-link {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--navy);
}
.location-card .maps-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── CTA band ───────────────────────────────────────────── */
.cta-band { background: var(--navy); color: var(--white); text-align: center; padding: 44px 0; }
.cta-band h2 { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.cta-band p { color: rgba(255,255,255,.75); margin: 14px auto 28px; max-width: 520px; }

/* ── Booking embed slot ─────────────────────────────────── */
.booking-embed {
  border: 2px dashed var(--navy);
  background: var(--cream);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
}
.booking-embed h3 { color: var(--navy); font-size: 20px; margin-bottom: 10px; }
.booking-embed p { color: var(--muted); font-size: 14px; max-width: 480px; margin: 0 auto; }

/* ── Price lists (services page) ────────────────────────────
   One row per bookable option, mirroring the booking funnel.
   Grid keeps duration and price columns aligned down the card. */
.price-group + .price-group { margin-top: 22px; }
.price-group h4 {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  background: var(--cream); border-radius: 999px; padding: 4px 12px;
  display: inline-block; margin-bottom: 8px;
}
.price-row {
  display: grid; grid-template-columns: 1fr auto 64px;
  gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.price-row:last-child { border-bottom: none; }
.price-row .who span { color: var(--muted); font-size: 13px; }
.price-row .mins { color: var(--muted); font-size: 13px; white-space: nowrap; }
.price-row .amt {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  text-align: right; white-space: nowrap;
}

/* ── Therapist profiles (services page) ─────────────────────
   One card per therapist with their own treatment list, so a
   first-time visitor reads people, not a wall of prices.
   Data mirrors the booking.js. */
/* Clinic group headings enlarged (design decision) to prevent
   wrong-clinic bookings. Per-card navy clinic pills were tried the same day
   and rejected as too strong — clinic on the cards stays in the quiet
   role-line style (About) and these group headings (services). */
.clinic-label {
  font-family: var(--font-display); font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 800; letter-spacing: -.01em; color: var(--navy);
  margin: 8px 0 20px; padding-bottom: 10px; border-bottom: 3px solid var(--navy);
}
.therapist-cards { display: grid; gap: 20px; margin-bottom: 32px; }
.therapist-cards:last-child { margin-bottom: 0; }
.therapist-profile {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.therapist-profile:hover { border-color: var(--navy); transform: translateY(-2px); }
.tp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tp-avatar {
  width: 54px; height: 54px; border-radius: 50%; background: var(--navy);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; flex-shrink: 0;
  overflow: hidden;
}
/* Real team photos drop into the same circles when they arrive. */
.tp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.tp-role {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.tp-rows { flex: 1; }
.t-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.t-row:last-child { border-bottom: none; }
/* The duration sits in the title itself, so two rows of the same treatment
   read as different appointments rather than one price looking unexplained.
   The span carries only the qualifier ("returning clients"), separated by a
   middot so it doesn't run into the title. */
.t-row .t-what span { color: var(--muted); font-size: 13px; }
.t-row .t-what span::before { content: "· "; }
.t-row .amt {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  white-space: nowrap;
}
.tp-book {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--navy);
}
.tp-book:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Services page: the whole profile card is the booking link (design decision) — .tp-book is a span inside it, underlined on card hover. */
.therapist-profile:hover .tp-book { text-decoration: underline; text-underline-offset: 3px; }

/* ── Expandable team cards (About page) ─────────────────────
   Native <details>/<summary>, no JavaScript: click a therapist
   to reveal their treatment list. */
details.team-card summary { cursor: pointer; list-style: none; }
details.team-card summary::-webkit-details-marker { display: none; }
details.team-card summary::marker { content: ""; }
.team-hint {
  margin-top: 8px; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; color: var(--navy);
}
.team-hint::after { content: "View treatments ▾"; }
details[open] .team-hint::after { content: "Hide treatments ▴"; }
.team-treatments {
  margin-top: 12px; text-align: left; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 12px;
}
.team-treatments .t-row { font-size: 13px; }
.team-treatments .tp-book { display: inline-block; border-top: none; padding-top: 8px; margin-top: 0; font-size: 13px; }

/* ── Compact variant for the homepage results section ───────
   Same position under the hero, but slimmer: it should slot
   in without dominating the page. */
.section-compact { padding: 36px 0; }
.section-compact .section-head { margin-bottom: 20px; }
.section-compact .section-head h2 { font-size: clamp(24px, 3.5vw, 34px); }
.elite-who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.elite-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Initials circle alternative to an avatar image. */
.elite-initials {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: var(--white); font-weight: 600; font-size: 17px; letter-spacing: .02em;
}
.reviews-compact { gap: 14px; }
.reviews-compact .review-card { padding: 16px 20px; gap: 10px; }
.reviews-compact .review-card p { font-size: 13.5px; }
.reviews-compact .review-stars { font-size: 13px; letter-spacing: 1.5px; }
.reviews-compact .review-author { padding-top: 10px; }
.reviews-compact .review-avatar { width: 32px; height: 32px; font-size: 13px; }

/* ── Booking funnel (contact page) ──────────────────────────
   Step-by-step chooser that drives the single Acuity iframe.
   Data + logic in booking.js; spec + ID tables in the project docs. */
.funnel-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.crumb {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--navy); background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s;
}
.crumb:hover { background: var(--cream-dark); }
.crumb .x { font-size: 10px; color: var(--muted); }
/* Kept deliberately small (design decision): a step label,
   not a page heading. Exception: the opening "Choose a clinic." step gets
   heading size via .funnel-q-lg (design decision) so visitors
   landing at #book immediately know why they are there. */
.funnel-q {
  font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 14px; outline: none;
}
.funnel-q-lg { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.funnel-options { display: grid; gap: 12px; max-width: 900px; }
.opt {
  font-family: var(--font-body); text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.opt:hover { border-color: var(--navy); transform: translateY(-1px); }
.opt .opt-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.opt .opt-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  overflow: hidden; flex-shrink: 0;
}
.opt .opt-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Fast-path card: navy spine mark on a cream circle, not a headshot.
   (White-on-navy was tried first and was illegible at this size.) */
.opt .opt-avatar-mark { background: var(--cream); }
.opt .opt-avatar-mark img { object-fit: contain; padding: 4px; }
.opt .opt-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: block; }
.opt .opt-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.opt .opt-price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy); white-space: nowrap; }
/* "Choose a clinic." step: the funnel's front door — larger, bolder cards
   than the later steps (design decision), side by side on
   anything wider than a phone. Address + host gym as the supporting line. */
.opts-clinics .opt { padding: 18px 22px; border-width: 2px; border-radius: var(--radius); }
.opts-clinics .opt .opt-name { font-size: clamp(22px, 3vw, 26px); color: var(--navy); letter-spacing: -.01em; }
.opts-clinics .opt .opt-sub { font-size: 14px; margin-top: 5px; }
@media (min-width: 560px) {
  .opts-clinics { grid-template-columns: 1fr 1fr; }
}
.funnel-note { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.funnel-note:empty { display: none; }

/* Final step: chosen appointment summary + framed scheduler, so the
   embedded Acuity widget sits inside the site's design language. */
.funnel-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  background: var(--cream); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 16px; font-size: 14px;
}
.funnel-summary strong { font-family: var(--font-display); font-size: 15px; }
.funnel-summary .sum-price { font-family: var(--font-display); font-weight: 800; color: var(--navy); margin-left: auto; }
.funnel-frame {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); background: var(--white);
}
.funnel-frame .frame-head {
  background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 13px 20px; display: flex; justify-content: space-between; gap: 12px;
}
.funnel-frame .frame-head span { color: rgba(255,255,255,.6); font-weight: 500; font-size: 12px; }
/* Height is driven by booking.js, which listens for Acuity's
   "sizing:<px>" postMessage — the widget never scrolls internally. */
#funnel-embed iframe { display: block; width: 100%; border: 0; min-height: 700px; }

/* ── Contact details ──────────────────────────────────────
   Navy icon circles + display-font values, so phone / email /
   Instagram sit in the same design language as the rest. */
.contact-list { list-style: none; display: grid; gap: 12px; }
.contact-list li {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-sm);
}
.contact-list .ico {
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-list .ico svg { width: 17px; height: 17px; display: block; }
.contact-list .c-label {
  display: block; font-family: var(--font-display); font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.contact-list .c-value {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 14.5px; color: var(--text); margin-top: 2px;
}
.contact-list a.c-value:hover { color: var(--navy); }
/* Contact page variant: the three contact tiles sit in one row on desktop. */
.contact-row { align-items: stretch; }

/* ── Footer ─────────────────────────────────────────────────
   Compacted (design decision): shorter and tighter. */
footer { background: var(--navy-dark); color: rgba(255,255,255,.7); padding: 28px 0 18px; }
.footer-grid { display: grid; gap: 20px; }
.footer-brand img {
  height: 52px; width: auto; margin-bottom: 10px;
  background: var(--white); border-radius: 10px; padding: 5px 10px;
}
.footer-brand .footer-name {
  color: var(--white); font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 6px;
}
/* Mark + wordmark on one line so the description paragraph starts near the
   top of the column, level with the other footer columns (design decision). */
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.footer-brand-row .footer-name { margin-bottom: 0; }
.footer-brand p { font-size: 12.5px; line-height: 1.55; max-width: 280px; }
.footer-col h4 {
  color: var(--white); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.footer-col a, .footer-col span { display: block; font-size: 13px; padding: 3px 0; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 11.5px; color: rgba(255,255,255,.4);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════
   Tablet and up
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  .wrap { padding: 0 24px; }
  /* Section rhythm tightened from 88px, then again from 60px (5 July 2026,
     the team): wider layout + slightly less vertical air. */
  .section { padding: 52px 0; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  /* Two columns to match the number of contact tiles. */
  .contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .funnel-options { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .elite-grid { grid-template-columns: 1fr 1fr; }
  /* With an odd number of athlete cards, the last one spans the tablet row
     rather than sitting orphaned in one column. */
  .elite-grid > .elite-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .step { padding-right: 28px; }
  .step + .step { padding-left: 28px; border-left: 1px solid var(--border); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .hero-images { height: 420px; }
  .therapist-cards { grid-template-columns: 1fr 1fr; }
  .section-compact { padding: 38px 0; }
}

/* ═══════════════════════════════════════════════════════════
   Desktop
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  [id] { scroll-margin-top: 112px; }
  .nav { height: 100px; }
  .brand img { height: 78px; }
  .brand-name { font-size: 19px; }
  .menu-btn { display: none; }
  .mobile-menu { display: none !important; }
  .nav-links { display: flex; gap: 36px; }
  .nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color .15s; }
  .nav-links a:hover { color: var(--navy); }
  .nav-links a[aria-current="page"] { color: var(--navy); font-weight: 600; }
  .nav-cta { display: inline-flex; }

  .hero { padding: 48px 0 44px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 60px; }
  /* About opener spreads laterally: even split, photo takes the full half. */
  .hero-about .hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .hero-images { height: 480px; }
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .therapist-cards { grid-template-columns: repeat(3, 1fr); }
  /* Three across on
     desktop, two + a full-width third on tablet (span rule reset here). */
  .elite-grid { grid-template-columns: repeat(3, 1fr); }
  .elite-grid > .elite-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════════
   Brand-mark motif (APPROVED by owner, 9 July 2026 — part of
   the signed-off baseline). The spine mark as a recurring brand
   detail across the site, cut from the new matte logo:
   mark-navy.png / mark-white.png (transparent backgrounds,
   generated from "solution logo matte.jpg"). The uses:
     1. Footer — the white transparent mark sits directly on
        the navy, replacing the white-box JPEG (the <img> src
        in all four footers changed to mark-white.png).
     2. Navy sections + homepage hero — ghosted watermark mark.
        Hero mark sits left, navy-section mark sits right
        (owner moved it right: it sat under the hero's).
     3. .mark-ghost — pale navy mark against white/cream on the
        subpages' main body sections (services profiles, About
        team), right-hand side. Owner asked for an "off colour
        against the white" version, same day. Tried on the
        contact booking section too — removed, didn't fit
        nicely around the funnel (owner, same day).
   Also trialled and REMOVED same day (owner): a CTA-band
   watermark (band too short — every crop looked accidental).
   To undo: delete this block and point the footer <img>s back
   at logo-mark.jpg.
   ═══════════════════════════════════════════════════════════ */
/* (Eyebrow-tick marks — a small spine mark replacing the line before
   every section eyebrow — were trialled and removed: too repetitive
   alongside the section ghosts) */

/* (A CTA-band watermark was trialled here and removed — the band is too
   short to hold the mark uncropped at a useful size) */

footer .footer-brand img { background: none; border-radius: 0; padding: 0; height: 40px; margin-bottom: 0; }

.section-navy { position: relative; overflow: hidden; }
.section-navy .wrap { position: relative; z-index: 1; }
.section-navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(images/mark-white.png) no-repeat right -70px top 45% / auto 120%;
  opacity: .16;
}

/* Tighter box for the About team section (design decision). Placed after the media queries so it beats
   the desktop .section padding; keeps the full-size h2, unlike
   .section-compact. */
.section-trim { padding: 30px 0 34px; }
.section-trim .section-head { margin-bottom: 18px; }
.section-trim .team-grid { row-gap: 20px; }
/* Mark flush with the top of the cream box, pulled in from the edge,
   sized like the homepage ghosts (design decision). The
   trimmed section keeps the upscale past the PNG's native 668px mild. */
.section-trim.mark-ghost::before {
  /* top -24px cancels the transparent margin baked into the PNG crop,
     so the visible top of the S sits on the section edge. */
  background-position: right -40px top -24px;
  /* Fixed px, not a % of section height (design decision): the team
     cards expand on "View treatments", which grew the section and, with a
     percentage size, scaled the ghost up too. 675px matches the collapsed
     desktop look (~112% of the ~600px section); expanding a card now only
     reveals empty space below a still mark, it no longer grows. */
  background-size: auto 675px;
}

.hero-home { position: relative; overflow: hidden; }
.hero-home .wrap { position: relative; z-index: 1; }
.hero-home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(images/mark-navy.png) no-repeat left -90px top 40% / auto 115%;
  opacity: .16;
}

.mark-ghost { position: relative; overflow: hidden; }
.mark-ghost .wrap { position: relative; z-index: 1; }
.mark-ghost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Size caps at 78% of the section so short sections (the booking funnel
     before the calendar loads) never crop the mark at their bottom edge. */
  background: url(images/mark-navy.png) no-repeat right -80px top 40px / auto min(640px, 78%);
  opacity: .16;
}
/* (A larger "-wide" variant for the About team section was trialled and
   dropped — owner settled on the base ghost everywhere, 9 July 2026.) */
/* Opt-out for sections where the motif stacks too densely: About's reviews
   section sat between the team and CTA marks, three in a row (owner). */
.mark-none::before { content: none; }

/* ═══════════════════════════════════════════════════════════
   Long-form legal pages (privacy.html) — added 24 August 2026
   A single readable text column. Deliberately plain: this is the
   one place on the site where scanning matters less than reading.
   ═══════════════════════════════════════════════════════════ */
.hero-legal { padding: 32px 0 8px; }
.hero-legal h1 { font-size: clamp(30px, 5vw, 44px); }
.hero-legal .hero-sub { margin-bottom: 0; }

.prose { max-width: 760px; }
.prose h2 {
  font-size: 20px; margin: 32px 0 10px; color: var(--navy);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; color: var(--text); }
.prose ul { margin: 0 0 14px 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--navy); }


/* ═══════════════════════════════════════════════════════════
   Instagram strip — added 24 August 2026
   A slim band on the homepage, directly under the full-width photo
   band. Instagram is the clinic's only social presence, so it gets a
   real moment rather than only a text line in the footer (the footer
   keeps a plain link under the phone number too).
   Navy: it separates the two light sections either side of it and reads
   as one of the page's brand moments alongside the reviews section and
   the closing band. Cream was tried and reverted (owner, same day).
   Short by design: a strip, not a section.
   Deliberately reuses the contact-page tile pattern (icon circle +
   uppercase label + display-font value) so it reads as existing
   design language rather than a bolted-on social button.

   The pill appears on two different grounds, so the base rule holds
   LAYOUT ONLY and each context supplies its own colours. Keep it that
   way: baking colours into the base is what caused the mobile menu to
   need a pile of overrides last time.
   ═══════════════════════════════════════════════════════════ */
.section-social {
  background: var(--navy-dark); color: var(--white);
  padding: 20px 0; text-align: center;
}
/* Layout only. */
.social-cta {
  display: inline-flex; align-items: center; gap: 13px; text-align: left;
  padding: 10px 24px 10px 10px;
  border: 1px solid transparent; border-radius: 999px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.social-cta .ig-ico {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.social-cta .ig-ico svg { width: 20px; height: 20px; display: block; }
.social-cta .ig-label {
  display: block; font-family: var(--font-display); font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.4;
}
.social-cta .ig-handle {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; line-height: 1.3;
}

/* On the navy strip. */
.section-social .social-cta { border-color: rgba(255,255,255,.18); }
.section-social .social-cta:hover {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.4);
}
.section-social .social-cta .ig-ico { background: rgba(255,255,255,.1); color: var(--white); }
.section-social .social-cta .ig-label { color: rgba(255,255,255,.5); }
.section-social .social-cta .ig-handle { color: var(--white); }
/* ── What we treat (24 August 2026) ─────────────────────────
   Three groups that open to reveal the complaints in each, using
   the native <details> pattern from the About team cards.
   Hover lives on the WHOLE box, never on the summary alone: a
   summary-only hover left the header a different colour from the
   panel below it, and stuck after clicking.
   The list uses the tick idiom from the services card rather than
   hairline rows, which read as a data table in a box. */
/* Stacked on phones, three across on desktop so the section fills the page
   width like every other block. align-items: start matters: without it,
   opening one group stretches its neighbours to match and leaves them with
   dead space under their headings. */
.problem-groups { display: grid; gap: 10px; }
.problem-group {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; transition: border-color .15s ease;
}
.problem-group:hover { border-color: var(--navy); }
.problem-group summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--navy);
}
.problem-group summary::-webkit-details-marker { display: none; }
/* Chevron drawn from borders, so there is no icon file to maintain. */
.problem-group summary::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.problem-group[open] summary { border-bottom: 1px solid var(--border); }
.problem-group[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* No bullet or tick marker, and the display font rather than body text:
   the conditions ARE the content of this panel, so they are set like the
   other named things on the site (therapist names, prices, step labels)
   instead of like a paragraph dropped into a box. Navy rather than near
   black for the same reason. */
.problem-list {
  list-style: none; padding: 16px 20px 18px;
  display: grid; gap: 12px;
}
.problem-list li {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14.5px; color: var(--navy); line-height: 1.4;
  padding-left: 16px; position: relative;
}
/* A small navy dot, not a tick. The site's vocabulary is full of circles
   (avatars, icon circles, initials circles, pill buttons), so a round
   marker belongs here in a way a tick glyph did not. */
.problem-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--navy);
}
/* Tablet: still stacked, so each open panel is wide enough for two columns
   of conditions and does not read as one long thin list. */
@media (min-width: 700px) and (max-width: 959px) {
  .problem-list { grid-template-columns: 1fr 1fr; gap: 12px 28px; }
}
/* Desktop: three groups across the full width. The panels are ~380px each,
   so the conditions go back to a single column inside them.
   The section was on .section-compact, which gave it less padding than the
   navy block above and the photo band below, so it looked wedged between
   them. It now runs wider than a standard section, and the cards themselves
   are scaled up, so the section carries its own weight on a large screen. */
@media (min-width: 960px) {
  .section-problems { padding: 72px 0; }
  .section-problems .section-head { margin-bottom: 34px; }
  .problem-groups {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px; align-items: start;
  }
  .problem-group summary { padding: 20px 24px; font-size: 17px; }
  .problem-list { padding: 18px 24px 22px; gap: 13px; }
  .problem-list li { font-size: 15px; }
}