/* ============================================================
   Healthcare Template — clinical, calm, credentialed
   Fonts: Source Serif 4 (headings) + Figtree (body), Google Fonts

   RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
   :root below and nothing else. Keep every variable NAME.

   Contrast ratios in the comments were measured against the
   surface each token is actually used on. If you change a
   value, re-measure — this is a healthcare site and the
   accessibility floor is not negotiable.
   ============================================================ */

:root {
  /* --- surfaces: cool porcelain --- */
  --bg: #f5f7f6;
  --surface: #ffffff;
  --surface-2: #e9efed;
  --line: rgba(21, 42, 38, 0.10);
  --line-strong: rgba(21, 42, 38, 0.20);

  /* --- text --- */
  --text: #152a26;          /* 14.0:1 on --bg, 15.1:1 on --surface */
  --muted: #566a64;         /* 5.4:1 on --bg, 4.95:1 on --surface-2 — AA everywhere */

  /* --- accents: deep clinical teal + a quieter health green --- */
  --accent: #0f665c;        /* 6.4:1 on --bg */
  --accent-dark: #0a4f47;
  --accent-2: #3f6b4a;      /* 5.7:1 on --bg — eyebrows, stat figures, focus ring */
  --accent-soft: rgba(15, 102, 92, 0.10);
  --accent-line: rgba(15, 102, 92, 0.38);
  /* warm sand — hairlines, fee-list leaders and the large italic step numerals.
     3.4:1 on --bg, so it clears AA for LARGE text (24px+) and decoration only.
     Never use it for body copy or small text. */
  --gold: #a08046;
  /* text colour that sits ON --accent — 6.5:1, must stay AA */
  --on-accent: #f4fbf9;

  --font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --wrap: 1180px;
  --radius: 16px;
  --shadow: 0 18px 44px rgba(21, 42, 38, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: balance;
}
/* editorial signature: the emphasised phrase goes serif-italic in teal */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--accent); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

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

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__bg img { animation: none !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.97rem;
  letter-spacing: 0.01em;
  padding: 15px 32px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 18px 38px; font-size: 1.02rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(245, 247, 246, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(21, 42, 38, 0.08);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px; max-width: 1320px; margin: 0 auto;
}

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; min-height: 44px; }
/* .brand__logo is what ships: the Stilwater mark as an SVG. Swap the file and keep
   the width/height attributes in sync with the real pixel size so the header
   doesn't shift while it loads. */
.brand__logo { height: 44px; width: auto; flex-shrink: 0; display: block; }
/* .brand__mark is the fallback for clients with no logo file — a two-letter
   monogram in the accent colour. Use one or the other, not both. */
.brand__mark {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; letter-spacing: 0; }
.brand__tag {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-family: var(--font-body); font-weight: 400; font-size: 0.95rem;
  padding: 10px 13px; border-radius: 8px; color: var(--text);
  position: relative; transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__phone {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  color: var(--text); transition: color 0.2s;
}
.header__phone:hover { color: var(--accent); }
.header__cta .btn { padding: 11px 22px; min-height: 44px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 46px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav {
    position: fixed; top: 74px; left: 16px; right: 16px; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 16px; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .nav-toggle { display: inline-flex; }
  .header__phone { display: none; }
}
@media (max-width: 560px) {
  .header__cta .btn { display: none; }
  .brand__logo { height: 38px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1.06rem; }
}

/* ---------- hero ----------
   Light theme: legibility comes from a PORCELAIN SCRIM laid over the photo,
   not from darkening the image. Text always sits on the page colour, so the
   crop can shift at any breakpoint without contrast ever failing. */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: min(90dvh, 860px); padding: 180px 0 100px; overflow: hidden; isolation: isolate;
}
.hero--page { min-height: min(58dvh, 600px); padding: 160px 0 76px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 10s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The scrim must stay near-opaque for the full width of .hero__content
     (max 700px inside an 1180px wrap ≈ 72% of the frame at desktop), because
     --muted lede text over a light clinical photo is the first thing to fail.
     Hold ~0.9 to 72%, then fall away fast so the photo still reads. */
  background:
    linear-gradient(100deg,
      rgba(245, 247, 246, 0.975) 0%,
      rgba(245, 247, 246, 0.95) 46%,
      rgba(245, 247, 246, 0.90) 72%,
      rgba(245, 247, 246, 0.30) 92%,
      rgba(245, 247, 246, 0.12) 100%),
    linear-gradient(180deg, rgba(245, 247, 246, 0.35) 0%, rgba(245, 247, 246, 0) 45%);
}
.hero__content { max-width: 700px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 26px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); flex-shrink: 0; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.05rem); margin-bottom: 24px; }
.hero__lede { font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 570px; margin-bottom: 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 34px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.93rem; color: var(--muted); }
.hero__trust svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

@media (max-width: 700px) {
  /* content goes full-width on mobile, so the scrim has to cover more of the frame */
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(245, 247, 246, 0.91) 0%,
        rgba(245, 247, 246, 0.95) 45%,
        rgba(245, 247, 246, 0.98) 100%);
  }
}

/* ---------- registration / accreditation strip ----------
   The healthcare equivalent of the automotive template's badge row. These are
   REGULATORY facts (council registration, practice number), not marketing
   claims — keep the wording factual and replace every value at re-skin. */
.reg-strip {
  background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.reg-strip ul {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 40px;
}
.reg-strip li {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.9rem; color: var(--muted);
}
.reg-strip svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }
.reg-strip strong { color: var(--text); font-weight: 600; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 112px) 0; position: relative; }
.section--tint { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 700px; margin-bottom: clamp(44px, 5vw, 68px); }
.section__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-bottom: 18px; }
.section__head p { color: var(--muted); font-size: 1.05rem; }
.section__head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.section__head--row > div { max-width: 640px; }

/* ---------- discipline pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1020px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
/* height:auto is load-bearing. The <img> carries width/height attributes (they
   reserve space and stop layout shift), and those map to CSS presentational
   hints — so `height` is NOT auto, and `aspect-ratio` is therefore ignored.
   Without this the card renders at the photo's intrinsic height and cards with
   differently-shaped source images end up different heights. */
.pillar img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--ease); }
.pillar__media { overflow: hidden; }
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.pillar:hover img { transform: scale(1.05); }
.pillar__body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex-grow: 1; }
.pillar__num {
  font-family: var(--font-body); font-weight: 600; font-size: 0.71rem; letter-spacing: 0.2em;
  color: var(--accent-2); display: block; margin-bottom: 12px;
}
.pillar h3 { font-size: 1.4rem; margin-bottom: 12px; }
.pillar p { font-size: 0.96rem; color: var(--muted); margin-bottom: 20px; flex-grow: 1; }
.pillar__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.88rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
  color: var(--accent);
}
.pillar__link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.pillar:hover .pillar__link svg { transform: translateX(5px); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track span {
  font-family: var(--font-head); font-weight: 400; font-style: italic; font-size: 1.1rem; white-space: nowrap;
  color: var(--muted); display: inline-flex; align-items: center;
}
/* small sand diamond between items */
.marquee__track span::after {
  content: ""; width: 5px; height: 5px; margin: 0 30px;
  background: var(--gold); transform: rotate(45deg); flex-shrink: 0;
}

/* ---------- split / about ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--flip .split__media { order: 2; }
@media (max-width: 900px) { .split--flip .split__media { order: 0; } }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: 100%; object-fit: cover; }
.split__badge {
  position: absolute; left: -18px; bottom: 30px;
  background: var(--accent); color: var(--on-accent); border-radius: 14px; padding: 20px 24px;
  font-family: var(--font-head); box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.split__badge small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; opacity: 0.9; letter-spacing: 0.03em; }
@media (max-width: 560px) { .split__badge { left: 12px; } }
.split__content h2 { font-size: clamp(1.9rem, 3.2vw, 2.55rem); margin-bottom: 22px; }
.split__content > p { color: var(--muted); margin-bottom: 18px; font-size: 1.03rem; }
.ticklist { margin-top: 28px; display: grid; gap: 16px; }
.ticklist li { display: flex; gap: 14px; align-items: flex-start; }
.ticklist svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 5px; }
.ticklist strong { font-family: var(--font-head); font-weight: 600; }
.ticklist span { color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.95rem; color: var(--accent-2); line-height: 1.12; font-variant-numeric: tabular-nums; }
/* Direct child only. The animated figures are <strong><span data-count>…</span></strong>,
   and a bare `.stat span` would match that inner span too — a direct rule beats the
   inherited 1.95rem, so the counters would silently render at label size. */
.stat > span { font-size: 0.87rem; color: var(--muted); }

/* ---------- conditions treated ----------
   A plain checklist in columns. Deliberately NOT cards: this is a scannable
   reference list, and a patient looking for their own condition wants density. */
.conditions { columns: 3; column-gap: 40px; }
@media (max-width: 900px) { .conditions { columns: 2; } }
@media (max-width: 560px) { .conditions { columns: 1; } }
.conditions li {
  break-inside: avoid; display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0; font-size: 0.97rem; color: var(--text);
}
.conditions svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 6px; }
.conditions-note { margin-top: 26px; font-size: 0.94rem; color: var(--muted); max-width: 720px; }

/* ---------- practitioner cards ----------
   Credential line and council number are the trust signal on a clinical site —
   they take the place of the review cards used on the consumer templates. */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }
.practitioner {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.practitioner:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.practitioner__role {
  font-family: var(--font-body); font-weight: 600; font-size: 0.71rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
}
.practitioner h3 { font-size: 1.3rem; }
.practitioner__quals { font-size: 0.93rem; color: var(--muted); font-style: italic; }
.practitioner p { font-size: 0.96rem; color: var(--muted); flex-grow: 1; }
.practitioner__reg {
  margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.practitioner__reg strong { color: var(--text); font-weight: 600; }

/* ---------- medical-aid schemes ----------
   HOUSE RULE: scheme names are set as TEXT chips, never as logos or
   logo-alike badges. See TEMPLATE-README section 2 before changing this. */
.schemes { display: flex; flex-wrap: wrap; gap: 10px; }
.schemes li {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 22px;
  font-size: 0.95rem; font-weight: 600; color: var(--text); background: var(--surface);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.schemes li:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.schemes-note { margin-top: 22px; font-size: 0.94rem; color: var(--muted); max-width: 720px; }

/* ---------- feature cards ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.features--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .features, .features--two { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; transition: transform 0.3s var(--ease), border-color 0.3s;
}
.feature:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.feature__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 22px;
}
.feature__icon svg { width: 25px; height: 25px; }
.feature h3 { font-size: 1.22rem; margin-bottom: 12px; }
.feature p { color: var(--muted); font-size: 0.96rem; }

/* ---------- process / appointment steps ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.process--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .process, .process--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process, .process--three { grid-template-columns: 1fr; } }
.process li {
  counter-increment: step; padding: 26px 0 0; position: relative;
  border-top: 1px solid var(--line-strong);
}
.process li::before {
  content: "0" counter(step); font-family: var(--font-head); font-weight: 400; font-style: italic;
  font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: 14px;
}
.process h3 { font-size: 1.1rem; margin-bottom: 10px; }
.process p { font-size: 0.94rem; color: var(--muted); }

/* ---------- pill list ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 20px;
  font-size: 0.9rem; font-weight: 400; color: var(--text);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.pills li:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ---------- fee list (printed price-list style) ---------- */
.menu-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.menu-groups--single { grid-template-columns: minmax(0, 700px); }
@media (max-width: 860px) { .menu-groups { grid-template-columns: 1fr; } }
.menu-group h3 {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: var(--font-body); font-weight: 600; color: var(--accent-2);
  margin-bottom: 6px;
}
.menu { border-top: 1px solid var(--line-strong); }
.menu li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px;
  padding: 18px 2px; border-bottom: 1px solid var(--line);
}
.menu__name { flex: 0 1 auto; font-family: var(--font-head); font-weight: 600; font-size: 1.03rem; }
/* dotted sand leader, printed price-list style */
.menu__dots { flex: 1 1 24px; min-width: 20px; align-self: flex-end; margin-bottom: 6px; border-bottom: 1px dotted var(--gold); }
.menu__price {
  flex-shrink: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.03rem;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.menu__note { flex: 1 1 100%; margin-top: 5px; font-size: 0.91rem; color: var(--muted); }
/* Narrow phones: the row runs out of width and, because it is flex-wrap:wrap, the PRICE
   drops to its own line rather than the name wrapping — line breaking is decided on each
   item's hypothetical main size, before any shrinking happens. Two tiers.
   Tier 1 (<=370px, covers 360-class Androids): buy the space back from the gaps, the
   leader and a touch of type. The leader still stretches, so the printed look holds.
   375px is deliberately left untouched. */
@media (max-width: 370px) {
  .menu li { gap: 0 6px; }
  .menu__dots { flex: 1 1 6px; min-width: 8px; }
  .menu__name { font-size: 0.95rem; }
}
/* Tier 2 (<=350px): backstop. flex-basis:0 means the row always fits on one line no
   matter how long a client's service name or price string is — the name then grows
   into what's left and wraps internally instead. Costs the stretching leader, which is
   the right trade at 320px. min-width:0 lets the name wrap below min-content. */
@media (max-width: 350px) {
  .menu__name { flex: 1 1 0; min-width: 0; }
  /* Drop the leader rather than keep a 10px stub: three dots read as an ellipsis, and
     on a name that wraps to two lines the stub is left orphaned on the second line. */
  .menu__dots { display: none; }
}

/* ---------- FAQ accordion ----------
   Native <details>/<summary>: keyboard-operable and screen-reader-announced
   with no JavaScript, and it still works if script.js never loads. */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 26px; transition: border-color 0.25s;
}
.faq details[open] { border-color: var(--accent-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: var(--muted); font-size: 0.97rem; padding-bottom: 22px; max-width: 66ch; }
.faq details p + p { margin-top: -8px; }

/* ---------- opening hours ---------- */
.hours { margin-top: 2px; }
.hours div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem;
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--muted); }
.hours dd { font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours dd.hours--closed { font-family: var(--font-body); font-weight: 400; font-style: italic; color: var(--muted); }

/* ---------- price cards ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prices--single { grid-template-columns: minmax(0, 480px); justify-content: center; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }
.price {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column; gap: 12px;
}
.price--flag { border-color: var(--accent-line); box-shadow: var(--shadow); }
.price h3 { font-size: 1.18rem; }
.price strong {
  font-family: var(--font-head); font-weight: 600; font-size: 2.05rem; color: var(--accent);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.price p { color: var(--muted); font-size: 0.95rem; }
.price .ticklist { margin-top: 6px; gap: 12px; }
.price .ticklist span { font-size: 0.94rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 22px; padding: clamp(46px, 6vw, 76px); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 78% 16%, rgba(15, 102, 92, 0.10), transparent 44%),
    radial-gradient(circle at 16% 84%, rgba(63, 107, 74, 0.10), transparent 46%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.55rem); margin-bottom: 16px; }
.cta-band p { color: var(--muted); max-width: 580px; margin: 0 auto 32px; font-size: 1.04rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; }
.contact-card + .contact-card { margin-top: 22px; }
.contact-card h3 { font-size: 1.36rem; margin-bottom: 22px; }
.contact-card ul { display: grid; gap: 20px; }
.contact-card li { display: flex; gap: 16px; align-items: flex-start; }
.contact-card li svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.contact-card li > div { min-width: 0; }
.contact-card li strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; margin-bottom: 2px; }
.contact-card li a, .contact-card li span { color: var(--muted); font-size: 0.96rem; }
.contact-card li a:hover { color: var(--accent); }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; }
.form h3 { font-size: 1.36rem; margin-bottom: 10px; }
.form > p { color: var(--muted); font-size: 0.96rem; margin-bottom: 26px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; letter-spacing: 0.01em; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 14px 16px; min-height: 48px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row small { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--muted); }
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row--pair { grid-template-columns: 1fr; } }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--accent-2); min-height: 1.4em; }
/* Privacy line under a form that collects health-adjacent information. Small,
   but it is the thing that makes an enquiry form defensible on a clinical site. */
.form-privacy { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }

/* ---------- page hero breadcrumbs ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }
/* padded so the breadcrumb link still clears a 44px tap target on mobile */
.crumbs a { display: inline-block; padding: 11px 0; }
.crumbs a:hover { color: var(--accent); }
/* separator stays --muted, not --gold: at 14px it needs the full 4.5:1 */
.crumbs span { color: var(--muted); }

/* ---------- medical disclaimer strip ----------
   Not decoration. A clinical site that lists conditions needs to say plainly
   that the page is not a diagnosis. Keep it on every discipline page. */
.disclaimer {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: 12px; background: var(--surface);
  padding: 22px 26px; font-size: 0.93rem; color: var(--muted); max-width: 860px;
}
.disclaimer strong { color: var(--text); font-weight: 600; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 68px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 46px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { margin-bottom: 20px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.footer h4 {
  font-family: var(--font-body); font-size: 0.73rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 20px;
}
.footer ul { display: grid; gap: 11px; }
.footer ul a, .footer ul span { color: var(--muted); font-size: 0.95rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--accent); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 0.86rem;
}

/* ---------- floating call button (mobile) ---------- */
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: none; place-items: center;
  box-shadow: 0 12px 30px rgba(15, 102, 92, 0.38);
  transition: transform 0.25s var(--ease);
}
.call-fab:hover { transform: scale(1.06); }
.call-fab svg { width: 23px; height: 23px; }
@media (max-width: 700px) {
  .call-fab { display: grid; }
  /* comfortable tap targets + clearance so the FAB never sits on the last line */
  .footer ul { gap: 2px; }
  .footer ul a, .footer ul span { display: inline-block; padding: 10px 0; }
  .contact-card li a { display: inline-block; padding: 10px 0; }
  /* The fixed call button occupies the bottom 76px of the viewport (18px offset +
     58px tall). Reserve room below the footer's last line so it never lands on it.
     This MUST hang off .footer, not .demo-note, for two reasons: the demo note is
     deleted at go-live and the clearance has to survive that, and .demo-note's base
     rule appears LATER in this file with a `padding` shorthand that would silently
     reset any padding-bottom set here. */
  .footer { padding-bottom: 96px; }
}

/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 15px 24px; text-align: center; font-size: 0.83rem; color: var(--muted);
}
.demo-note strong { color: var(--accent-2); font-weight: 600; }

/* ---------- WhatsApp ---------- */
/* WhatsApp is how most South African patients actually enquire, so this float shows
   on every breakpoint, not just mobile. The green is WhatsApp's own brand colour
   and is deliberately NOT driven from the :root tokens — leave it when re-skinning. */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 91;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #04240f; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.25s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }

@media (max-width: 700px) {
  /* stack the call button above the WhatsApp float so they never overlap */
  .call-fab { bottom: 86px; }
  /* two stacked floats reach 144px up the viewport, so this needs more room than
     a single-float template. On .footer for the same two reasons noted above. */
  .footer { padding-bottom: 172px; }
}