@charset "utf-8";
/* ==========================================================================
   Insight Speech and Swallowing Therapy — shared stylesheet
   --------------------------------------------------------------------------
   Brand values are sampled from the live Wix site's declared theme tokens
   (--color_N in its inline CSS), not eyeballed:
     --color_11/36/50  #f3f0ef   ivory page background
     --color_18/41/47  #414633   deep olive (buttons, headings, logo type)
     --color_26/43/51  #b3b8a0   light sage (the logo circle)
     --color_17        #c6a0a0   dusty mauve
     --color_14/37/45  #4f5258   warm charcoal (body text)
     --color_19/42/46  #713220   deep terracotta (links, accents)
   Nothing here restyles the brand. Every other value is a derived mix of those
   six, and every text/background pair is contrast-tested.

   Measured pairs actually used below:
     body #4f5258 on ivory #f3f0ef ........... 6.91:1
     body #4f5258 on card #faf8f8 ............ 7.40:1
     body #4f5258 on sage band #e1e0d9 ....... 5.92:1
     olive #414633 on ivory .................. 8.62:1
     terracotta #713220 on ivory ............. 8.50:1
     terracotta on sage band ................. 7.28:1
     white on olive button #414633 ........... 9.77:1
     white on olive-deep #393e2d ............ 11.05:1
     sage-pale #e4e6de on olive-deep ......... 8.77:1
     ink #2b2e22 on mauve chip #e3d4d3 ....... 9.64:1
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, latin subset, variable. 68KB for both families,
   every weight. No connection to any font service.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled */
  --ivory: #f3f0ef;
  --olive: #414633;
  --sage: #b3b8a0;
  --mauve: #c6a0a0;
  --body: #4f5258;
  --terracotta: #713220;

  /* Derived, contrast-verified */
  --white: #ffffff;
  --card: #faf8f8;         /* warm off-white card surface */
  --sage-band: #e1e0d9;    /* 28% sage over ivory */
  --sage-soft: #ebe9e4;    /* lighter wash */
  --mauve-chip: #e3d4d3;   /* 35% mauve over ivory */
  --sage-pale: #e4e6de;    /* text on dark olive */
  --olive-deep: #393e2d;   /* dark sections, footer */
  --olive-hover: #313426;
  --ink: #2b2e22;
  --rule: #d6d7cb;         /* sage-tinted hairline, not a grey */
  --rule-soft: #e4e3da;

  /* Warm shadows — tinted with the olive, never neutral black */
  --shadow-sm: 0 1px 2px rgba(43, 46, 34, 0.05), 0 2px 6px rgba(43, 46, 34, 0.05);
  --shadow-md: 0 2px 4px rgba(43, 46, 34, 0.05), 0 8px 20px rgba(43, 46, 34, 0.07);
  --shadow-lg: 0 4px 10px rgba(43, 46, 34, 0.06), 0 18px 44px rgba(43, 46, 34, 0.10);

  /* Type */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Scale — mobile first. Body never drops below 18px anywhere. */
  --fs-body: 1.1875rem;    /* 19px */
  --fs-meta: 1.0625rem;    /* 17px — captions and meta only, never body copy */
  --fs-lead: 1.3125rem;
  --fs-h1: 2.375rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.1875rem;
  --lh-body: 1.68;
  --lh-head: 1.15;
  --measure: 72ch;         /* wider than the old 68ch — copy was reading cramped */

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.75rem;
  --sp-7: 5.5rem;
  --sp-8: 7rem;

  --radius: 10px;
  --radius-sm: 8px;
  --shell: 1200px;
  --gutter: 1.375rem;
}

@media (min-width: 46em) {
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.5rem;
    --fs-lead: 1.4375rem;
    --gutter: 2.25rem;
  }
}
@media (min-width: 68em) {
  :root {
    --fs-h1: 3.375rem;
    --fs-h2: 2.625rem;
    --fs-h3: 1.625rem;
    --fs-lead: 1.5rem;
    --gutter: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Deliberately no scroll-behavior: smooth. A "Book an evaluation" button at
     the top of a long page would otherwise animate the whole way down; for
     readers with cognitive-communication disorders or vestibular sensitivity
     that ride is disorienting. The native instant jump is clearer. */
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--olive);
  line-height: var(--lh-head);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.018em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.012em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.006em; }
h4 {
  font-size: var(--fs-h4);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink);
}

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--sp-3); }
p { max-width: var(--measure); text-wrap: pretty; }
/* Email addresses, URLs and fax numbers must break rather than widen the page. */
p, li, address, dd, dt, figcaption, th, td, h1, h2, h3, h4 { overflow-wrap: break-word; }

a {
  color: var(--terracotta);
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.19em;
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 700; color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

ul, ol { padding-left: 1.3em; max-width: var(--measure); }
li { margin-bottom: var(--sp-1); }
li::marker { color: var(--sage); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-5) 0; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

/* <small> is browser-default 0.8em, which lands below the floor this site holds
   itself to. Captions use the 17px meta size, with room for a 24px tap target. */
small { font-size: var(--fs-meta); line-height: 1.6; display: inline-block; }
small a { display: inline-block; min-height: 24px; }

::selection { background: var(--sage); color: var(--ink); }

/* --------------------------------------------------------------------------
   4. Focus — a light ring inside a dark ring, so it stays visible on every
   background this site uses (ivory, card, olive, sage, mauve, photography).
   A single colour is always invisible against at least one of them.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--ivory);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ink);
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.skip-link {
  /* fixed, not absolute: it must reach the viewport even if the visitor tabs
     after scrolling partway down the page */
  position: fixed;
  left: var(--sp-2);
  top: var(--sp-2);
  z-index: 200;
  transform: translateY(-180%);
  background: var(--olive);
  color: var(--white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Narrow containers are centred in the viewport by default, which puts their
   left edge ~90px inboard of the masthead and the full-width sections. On a wide
   screen that reads as the whole page drifting right. Pinning their left edge to
   the main shell's left edge gives every section one shared margin; the extra
   room falls on the right, where a short measure is supposed to leave it. */
.shell--narrow { max-width: 860px; }
.shell--mid { max-width: 1020px; }

@media (min-width: 62em) {
  .shell--narrow, .shell--mid {
    margin-left: max(0px, calc((100% - var(--shell)) / 2));
    margin-right: auto;
  }
}

.band { padding-block: var(--sp-6); }
.band--tight { padding-block: var(--sp-5); }
.band--loose { padding-block: var(--sp-7); }
.band--sage { background: var(--sage-band); }
.band--soft { background: var(--sage-soft); }
.band--card { background: var(--card); }
.band--olive { background: var(--olive-deep); }
.band--olive, .band--olive p, .band--olive li, .band--olive dd, .band--olive dt { color: var(--sage-pale); }
.band--olive h2, .band--olive h3, .band--olive h4 { color: var(--white); }
.band--olive a { color: var(--white); }
.band--olive strong, .band--olive b { color: var(--white); }

@media (min-width: 46em) {
  .band { padding-block: var(--sp-7); }
  .band--loose { padding-block: var(--sp-8); }
}

/* Grid and flex items default to min-width:auto, which lets a wide child (a
   scrolling table, a long unbroken string) push the whole page wider than the
   viewport. Overriding it is what makes .table-wrap's overflow-x actually work. */
.grid { display: grid; gap: var(--sp-4); }
.grid > *, .footer-grid > *, .feature > * { min-width: 0; }
.grid--gap-lg { gap: var(--sp-5); }
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46em) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40em) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.section-head { max-width: 36em; margin-bottom: var(--sp-5); }
.section-head--wide { max-width: 48em; }
.section-head p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 var(--sp-2);
}
.band--olive .eyebrow { color: var(--sage); }

/* A quiet chip. Carries the adults-and-teens positioning so it lands in the
   first seconds without being shouted from a banner. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--mauve-chip);
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.chip::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--olive);
  flex: none;
}
.chip--sage { background: var(--sage-band); }

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  z-index: 50;
}
/* Deliberately not sticky on small screens: with the nav always visible the
   header is tall, and a sticky header that size would cover most of a phone.
   It becomes sticky only once it is a single compact row. */
@media (min-width: 76em) {
  .masthead { position: sticky; top: 0; }
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  flex-wrap: wrap;
  padding-block: var(--sp-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--olive);
  margin-right: auto;
  min-width: 0;
}
.brand img { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.brand__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
}
@media (min-width: 46em) {
  .brand img { width: 64px; height: 64px; }
  .brand__name { font-size: 1.375rem; }
}

/* No hamburger and no disclosure widget: every link is always rendered and
   always visible. For an audience that includes people with aphasia,
   post-stroke deficits and dementia, a menu with hidden state is a barrier —
   it has to be discovered, remembered and operated. */
.nav { width: 100%; order: 10; border-top: 1px solid var(--rule-soft); padding-top: var(--sp-2); }
.nav ul {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: 0.1rem var(--sp-4);
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: 0.55rem 0;
  color: var(--olive);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--sage); }
.nav a[aria-current="page"] { color: var(--terracotta); font-weight: 700; border-bottom-color: var(--terracotta); }

.masthead__cta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.masthead__cta .btn { flex: 1 1 auto; }
@media (min-width: 40em) { .masthead__cta .btn { flex: 0 0 auto; } }
@media (min-width: 62em) {
  html { scroll-padding-top: 9rem; }
  .masthead__inner { padding-block: var(--sp-3) 0; }
  .nav { border-top: 1px solid var(--rule-soft); margin-top: var(--sp-1); }
  .nav ul { gap: var(--sp-5); }
  .nav a { padding: var(--sp-3) 0; }
  .masthead__cta { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   7. Buttons — booking is always the filled primary, phone always secondary.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 52px;          /* comfortable for unsteady hands */
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn--primary {
  background: var(--olive); color: var(--white); border-color: var(--olive);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--olive-hover); border-color: var(--olive-hover);
  color: var(--white); box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.btn--secondary { background: transparent; color: var(--olive); border-color: var(--olive); }
.btn--secondary:hover { background: var(--olive); color: var(--white); }
.btn--quiet { background: transparent; color: var(--olive); border-color: var(--rule); }
.btn--quiet:hover { border-color: var(--olive); background: var(--card); }
.btn--onDark { background: var(--white); color: var(--olive); border-color: var(--white); }
.btn--onDark:hover { background: var(--sage-pale); color: var(--ink); border-color: var(--sage-pale); transform: translateY(-1px); }
.btn--ghostOnDark { background: transparent; color: var(--white); border-color: var(--sage-pale); }
.btn--ghostOnDark:hover { background: var(--sage-pale); color: var(--ink); }
.btn--sm { padding: 0.62rem 1.15rem; font-size: var(--fs-meta); min-height: 46px; }
.btn__label { font-weight: 600; }

/* Guard: a button's own modifier must always win over the ambient link colour
   of whatever dark section it sits in. Without this, `.site-footer a` (0,2,0)
   beats `.btn--onDark` (0,1,0) and the footer CTA renders white on white. */
.site-footer .btn--onDark, .band--olive .btn--onDark,
.trust .btn--onDark { background: var(--white); color: var(--olive); border-color: var(--white); }
.site-footer .btn--onDark:hover, .band--olive .btn--onDark:hover { background: var(--sage-pale); color: var(--ink); border-color: var(--sage-pale); }
.site-footer .btn--ghostOnDark, .band--olive .btn--ghostOnDark { background: transparent; color: var(--white); border-color: var(--sage-pale); }
.site-footer .btn--ghostOnDark:hover, .band--olive .btn--ghostOnDark:hover { background: var(--sage-pale); color: var(--ink); }
.site-footer .btn, .band--olive .btn { text-decoration: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.btn-row > .btn { flex: 1 1 auto; }
@media (min-width: 40em) { .btn-row > .btn { flex: 0 0 auto; } }

/* --------------------------------------------------------------------------
   8. Hero — a four-track grid so the photograph bleeds to the right edge of the
   viewport while the copy stays aligned to the shell.
   -------------------------------------------------------------------------- */
.hero { background: var(--ivory); overflow: hidden; }
.hero__content { padding-block: var(--sp-6) var(--sp-5); padding-inline: var(--gutter); }
.hero h1 { margin-bottom: var(--sp-3); }
.hero__lead { font-size: var(--fs-lead); max-width: 38ch; color: var(--body); margin-bottom: var(--sp-3); line-height: 1.45; }
.hero__where {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--ink);
  max-width: 44ch;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--sage);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

@media (min-width: 62em) {
  .hero {
    display: grid;
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, calc(var(--shell) * 0.58 - var(--gutter)))
      minmax(0, calc(var(--shell) * 0.42 - var(--gutter)))
      minmax(0, 1fr);
    align-items: stretch;
  }
  .hero__content {
    grid-column: 2;
    padding-block: var(--sp-7);
    padding-inline: 0 var(--sp-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* The photograph is taken out of flow so its intrinsic ratio cannot drive the
     row height. Left unconstrained a 760x900 image at ~880px wide forced a
     1047px hero, pushing everything else below the fold. The copy column sets
     the height now; the floor keeps short pages from looking squashed. */
  .hero__media {
    grid-column: 3 / -1;
    position: relative;
    min-height: 30rem;
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

.hero__proof {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin-top: var(--sp-4); font-size: var(--fs-meta);
}
.stars { color: var(--terracotta); letter-spacing: 0.1em; font-size: 1.1rem; }

/* Page header for the pages that do not carry a photographic hero. */
.page-head {
  background: var(--ivory);
  padding-block: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { max-width: 20ch; }
.page-head .lede, .page-head > .shell > p { max-width: 54ch; }
.page-head .lede { margin-top: var(--sp-3); }
@media (min-width: 46em) {
  .page-head { padding-block: var(--sp-7) var(--sp-6); }
  .page-head h1 { max-width: 20ch; }
}

/* --------------------------------------------------------------------------
   9. Trust strip
   -------------------------------------------------------------------------- */
.trust { background: var(--olive-deep); color: var(--sage-pale); padding-block: var(--sp-4); }
.trust__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  text-align: center;
}
.trust__item { font-size: var(--fs-meta); }
.trust__item b { color: var(--white); }
@media (min-width: 68em) {
  .trust__inner { flex-wrap: nowrap; }
  .trust__item { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { margin-bottom: var(--sp-3); }
.card p:last-of-type { flex: 1; }
.card--link:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--sage); }

/* Block-level so it can sit at the foot of a flex card, but the arrow is inline
   so it stays attached to the last word when the label wraps. */
.card__link {
  display: block;
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
  color: var(--terracotta);
}
.card__link::after { content: " \2192"; }
.card__link:hover { text-decoration: underline; text-underline-offset: 0.19em; }

.card__media {
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--sage-band);
}
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card--flat { background: transparent; border: 0; padding: 0; box-shadow: none; }
.card__kicker {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--sp-1);
}

/* --------------------------------------------------------------------------
   11. Feature rows — alternating image / copy
   -------------------------------------------------------------------------- */
.feature { display: grid; gap: var(--sp-5); align-items: center; }
.feature__media img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}
@media (min-width: 56em) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .feature--reverse .feature__media { order: 2; }
  .feature__media img { aspect-ratio: 5 / 4; }
}

/* --------------------------------------------------------------------------
   12. Prose
   -------------------------------------------------------------------------- */
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--sage);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { margin-top: var(--sp-5); color: var(--ink); font-family: var(--serif); }
.prose ul, .prose ol { margin-top: var(--sp-2); }

.lede { font-size: var(--fs-lead); color: var(--ink); line-height: 1.5; max-width: 42ch; }
.prose .lede { max-width: 54ch; }

.callout {
  background: var(--sage-band);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
  border-left: 5px solid var(--olive);
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: var(--sp-2); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.2em; top: 0.55em;
  width: 0.8em; height: 0.42em;
  border-left: 3px solid var(--olive);
  border-bottom: 3px solid var(--olive);
  transform: rotate(-45deg);
}

.steps { list-style: none; padding-left: 0; counter-reset: step; max-width: none; }
.steps > li { counter-increment: step; position: relative; padding-left: 4rem; margin-bottom: var(--sp-5); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -0.35rem;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  background: var(--sage-band);
  border: 2px solid var(--sage);
  color: var(--olive);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.375rem;
  display: grid;
  place-items: center;
}
.steps h3 { margin: 0 0 var(--sp-1); }
.band--olive .steps > li::before { background: transparent; border-color: var(--sage); color: var(--sage-pale); }

/* --------------------------------------------------------------------------
   13. Badges and certification marks
   -------------------------------------------------------------------------- */
.badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: none; }
.badges li { margin: 0; }
.badge {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--ink);
}
.band--olive .badge { background: transparent; border-color: rgba(228,230,222,0.45); color: var(--sage-pale); }

/* Third-party certification marks arrive at wildly different aspect ratios and
   on different background colours. Each sits in its own white tile at a fixed
   height so the row reads as one set rather than six mismatched images. */
.cert-logos {
  list-style: none; padding: 0; margin: var(--sp-4) 0 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.cert-logos li { margin: 0; }
.cert-logos a, .cert-logos span {
  display: grid;
  place-items: center;
  height: 82px;
  min-width: 116px;
  padding: 0.75rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.cert-logos img { max-height: 46px; width: auto; object-fit: contain; }

.proof { display: grid; gap: var(--sp-5); }
@media (min-width: 62em) {
  .proof { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}
.rating { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.rating__score { font-family: var(--serif); font-size: 3.5rem; font-weight: 700; color: var(--olive); line-height: 1; }
.rating__meta { font-size: var(--fs-meta); }
.proof h3 { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.quote {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.quote blockquote { margin: 0 0 var(--sp-3); }
.quote p { font-size: var(--fs-lead); color: var(--ink); margin-bottom: 0; line-height: 1.5; max-width: 48ch; }
.quote figcaption { font-size: var(--fs-meta); font-weight: 600; }
.quote cite { font-style: normal; font-weight: 700; color: var(--ink); }
.quote__source { display: block; font-weight: 400; margin-top: 0.15rem; }

/* Big editorial pull quote */
.pullquote { max-width: 30em; margin: 0; }
.pullquote blockquote { margin: 0 0 var(--sp-4); }
.pullquote p {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.28;
  color: var(--olive);
  max-width: none;
  margin: 0;
  text-wrap: pretty;
}
.band--olive .pullquote p { color: var(--white); }
.pullquote figcaption { font-size: var(--fs-meta); font-weight: 600; }
.pullquote cite { font-style: normal; font-weight: 700; }
.pullquote__mark {
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 0.75;
  color: var(--sage);
  display: block;
  margin-bottom: var(--sp-3);
}

/* A slot where no real review exists yet. Deliberately obvious — it should look
   unfinished until real text arrives. */
.quote--slot { border: 2px dashed var(--sage); background: var(--sage-soft); box-shadow: none; }
.quote--slot p { font-size: var(--fs-body); font-style: italic; }

/* --------------------------------------------------------------------------
   15. FAQs — <details>, so every answer is in the served HTML whether or not it
   is open, and whether or not JavaScript runs.
   -------------------------------------------------------------------------- */
.faq { max-width: 58em; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) 3rem var(--sp-4) 0;
  position: relative;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--olive);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 1.25rem; height: 1.25rem;
  margin-top: -0.625rem;
  background:
    linear-gradient(var(--terracotta), var(--terracotta)) center/100% 2.5px no-repeat,
    linear-gradient(var(--terracotta), var(--terracotta)) center/2.5px 100% no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(var(--terracotta), var(--terracotta)) center/100% 2.5px no-repeat;
}
.faq summary:hover { color: var(--terracotta); }
.faq__answer { padding: 0 0 var(--sp-4); }
.faq__answer > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
}
table { border-collapse: collapse; width: 100%; min-width: 26rem; }
caption { text-align: left; font-weight: 700; color: var(--ink); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-weight: 700; color: var(--ink); background: var(--sage-band); border-bottom: 1px solid var(--rule); }
td:last-child { white-space: nowrap; }

.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: none; }
.pill-list li { margin: 0; }
.pill-list span {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-meta);
}

/* --------------------------------------------------------------------------
   17. Team
   -------------------------------------------------------------------------- */
.person img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  background: var(--sage-band);
  box-shadow: var(--shadow-sm);
}
.person h3 { margin-bottom: 0; }
.person__cred { font-size: var(--fs-meta); font-weight: 700; color: var(--terracotta); margin: 0.2rem 0 var(--sp-2); }

/* --------------------------------------------------------------------------
   18. Booking block — where the real scheduler embed lands
   -------------------------------------------------------------------------- */
.booking { scroll-margin-top: 6rem; }
/* The panel is a light card inside the dark band. Without these it inherits the
   band's light-on-dark colours and renders white on white. Every colour is
   restated explicitly rather than inherited. */
.booking__panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--sp-5);
  color: var(--body);
  box-shadow: var(--shadow-lg);
}
.booking__panel > :last-child { margin-bottom: 0; }
.band--olive .booking__panel,
.band--olive .booking__panel p,
.band--olive .booking__panel li { color: var(--body); }
.band--olive .booking__panel h2,
.band--olive .booking__panel h3,
.band--olive .booking__panel h4 { color: var(--olive); }
.band--olive .booking__panel a { color: var(--terracotta); }
.band--olive .booking__panel b, .band--olive .booking__panel strong { color: var(--ink); }
.booking__phone {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-meta);
}
.booking__phone a { font-weight: 700; font-size: var(--fs-body); }
.booking__grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 58em) { .booking__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--olive-deep); color: var(--sage-pale); padding-block: var(--sp-6) var(--sp-4); }
.site-footer h2 { color: var(--white); }
.site-footer h3 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.site-footer a { color: var(--sage-pale); }
.site-footer a:hover { color: var(--white); }
.site-footer p, .site-footer li, .site-footer address, .site-footer dd, .site-footer dt { color: var(--sage-pale); }
.site-footer address { font-style: normal; margin-bottom: var(--sp-3); }

.footer-cta {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(228, 230, 222, 0.22);
}
.footer-cta h2 { margin-bottom: var(--sp-2); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
@media (min-width: 58em) {
  .footer-cta { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-6); }
}

/* Explicit column tracks plus the non-breaking spaces in the markup keep every
   footer link on a single line instead of breaking mid-phrase. */
.footer-grid { display: grid; gap: var(--sp-5) var(--sp-4); }
@media (min-width: 40em) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 80em) { .footer-grid { grid-template-columns: 1.15fr 1.05fr 0.95fr 1.3fr; } }

.footer-grid ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.footer-grid li { margin-bottom: var(--sp-2); }
/* Navigation labels must never break mid-word. The markup binds each label with
   non-breaking spaces, so the only thing that could split "dysphagia" is the
   global `a { overflow-wrap: anywhere }` that stops long URLs widening a page.
   Footer and nav links opt out of it. */
.footer-col a, .nav a, .breadcrumb a { overflow-wrap: normal; word-break: normal; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 0.19em; }
.footer-about p { max-width: 32ch; }
.footer-note { font-size: var(--fs-meta); line-height: 1.7; }
/* Inline links in these two blocks were landing at 23px tall. SC 2.5.8 exempts
   links inside a sentence, but clearing 24px outright costs nothing. */
.footer-note a, .footer-contact__lines a { display: inline-block; min-height: 24px; }
.footer-phone { font-weight: 700; font-size: 1.1875rem; }
.footer-contact__lines { line-height: 1.85; }
.footer-contact__lines a[href^="mailto:"] { overflow-wrap: normal; word-break: normal; font-size: var(--fs-meta); }
.footer-hours-h { margin-top: var(--sp-4); }

.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--sp-3); }
.footer-brand img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.footer-brand span { font-family: var(--serif); font-weight: 700; color: var(--white); line-height: 1.2; font-size: 1.1875rem; }

.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: var(--sp-3); max-width: 15rem; padding: 0.15rem 0; }
.hours dt { font-weight: 400; white-space: nowrap; }
.hours dd { margin: 0; font-weight: 700; color: var(--white); white-space: nowrap; }

.social { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; padding: 0; margin: var(--sp-4) 0 0; max-width: none; }
.social li { margin: 0; }

.colophon {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(228, 230, 222, 0.22);
  font-size: var(--fs-meta);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.colophon p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   20. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: var(--fs-meta); padding-block: var(--sp-3) 0; line-height: 1.65; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li { margin: 0; }
.breadcrumb a, .breadcrumb span { display: inline-block; min-height: 24px; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--sage); }
.breadcrumb [aria-current="page"] { color: var(--body); }

/* --------------------------------------------------------------------------
   21. Helpers
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.wide { max-width: none; }

/* Editorial note markers, visible in the mockup so the client can see what is
   real and what still needs their input. Remove before launch. */
.note {
  background: #fff6e5;
  border: 1px solid #d9a441;
  border-left: 5px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  font-size: var(--fs-meta);
  color: #4a2113;              /* 12.9:1 on #fff6e5 */
  margin-block: var(--sp-5);
}
.note > :last-child { margin-bottom: 0; }
.note b { color: #4a2113; }

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card--link:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   23. Print — the Refer a Patient page is meant to be printed and handed to a
   doctor, so it has to survive the printer.
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .site-footer, .skip-link, .no-print, .breadcrumb, .trust { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .band { padding-block: 0.5rem; background: #fff !important; }
  .band--olive, .band--olive h2, .band--olive h3, .band--olive p, .band--olive li { background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
  .print-block { break-inside: avoid; border: 1pt solid #000; padding: 10pt; }
  h1, h2, h3 { color: #000; break-after: avoid; }
  .card, .callout, .quote { border: 1pt solid #999; break-inside: avoid; box-shadow: none; }
}