/* ═══════════════════════════════════════════════════════════════════════
   Alphabet Soup · Oral Motor Specialists
   AlphabetSoupSpeechTherapy.com

   One plain-CSS stylesheet shared by all six pages.
   No framework, no build step, and no JavaScript anywhere on the site.

   The logo is loud, so the page is deliberately quiet: teal and navy do
   all the structural work. No decorative dots, gradients, or accent bars.

   Light mode only — the logo assumes a white background.
   System fonts only — the site makes zero external requests.

   ── BRAND COLOURS ──────────────────────────────────────────────────────
   Every colour on the site is declared once in the :root block directly
   below, sampled from the actual logo artwork. Change them there and the
   whole site follows.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ EDIT ME · brand palette (sampled from the logo) ═══ */
  --teal:        #0e9cb4;  /* the bowl — primary brand colour            */
  --teal-dark:   #0b7f93;  /* darker teal — links, buttons (AA on white) */
  --teal-deep:   #076070;  /* deepest teal — hover states                */
  --navy:        #0b1f5e;  /* "ORAL MOTOR SPECIALISTS" type — headings   */
  --purple:      #4b0d8c;  /* the spoon                                  */
  --magenta:     #fe2269;  /* the lips                                   */
  --orange:      #fd9900;  /* the letter R                               */
  --green:       #3aae3a;  /* the letter C                               */

  /* darkened variants — the raw logo colours fail contrast as text.
     Use these anywhere colour carries words. */
  --teal-ink:    #076070;
  --purple-ink:  #4b0d8c;
  --magenta-ink: #b3004a;
  --orange-ink:  #8a5200;
  --green-ink:   #226e22;

  /* structural tokens, derived from the palette above */
  --bg:          #fdf6ec;  /* warm cream — the page background            */
  --surface:     #ffffff;
  --tint:        #f2fafb;  /* pale teal band                             */
  --tint-navy:   #f6f8fd;  /* pale navy band                             */
  --header-blue: #e9effb;  /* soft periwinkle behind the logo            */

  /* nav-tab colours — the five hues in the word "alphabet" on the logo,
     darkened just enough to stay legible as bold text on a light band */
  --nav-orange:  #d9730a;
  --nav-green:   #2f9e2f;
  --nav-blue:    #1f6fe0;
  --nav-purple:  #7b1fb0;
  --nav-pink:    #d61a5c;
  --ink:         var(--navy);
  --ink-soft:    #3f4a6b;  /* body copy — 8.7:1 on white                 */
  --muted:       #5a6382;  /* captions and labels — 5.9:1 on white       */
  --line:        #dde5ee;
  --line-soft:   #edf1f6;

  --shadow-sm: 0 1px 2px rgb(11 31 94 / .05), 0 2px 8px rgb(11 31 94 / .05);
  --shadow-md: 0 2px 4px rgb(11 31 94 / .05), 0 14px 34px rgb(11 31 94 / .09);

  --radius:    20px;
  --radius-sm: 10px;
  --wrap:      72rem;
  --gutter:    clamp(1.15rem, 4vw, 2.5rem);

  --font-display: "Avenir Next", "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;      /* native anchor scrolling — never hijacked */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.45rem + 2.5vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.35vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { text-wrap: pretty; }

/* ── focus ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer :focus-visible { outline-color: #ffffff; }

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); color: #fff; }

/* ── layout helpers ───────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3rem, 1.9rem + 4.6vw, 5.5rem); }
.section--tint { background: var(--tint); }
.section--navy-tint { background: var(--tint-navy); }
.section--tight { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }

.lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem);
  color: var(--ink-soft);
  line-height: 1.62;
  max-width: 62ch;
}

.measure { max-width: 68ch; }

/* Section eyebrow — the one place the playful colours appear as text-level
   punctuation. Each eyebrow sets --accent; the dot picks it up. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: .8rem;
}

/* Each a-* class sets a colour pair: --accent for shapes and fills,
   --accent-ink for anything that has to be legible as text. */
.a-teal    { --accent: var(--teal);    --accent-ink: var(--teal-ink); }
.a-purple  { --accent: var(--purple);  --accent-ink: var(--purple-ink); }
.a-magenta { --accent: var(--magenta); --accent-ink: var(--magenta-ink); }
.a-orange  { --accent: var(--orange);  --accent-ink: var(--orange-ink); }
.a-green   { --accent: var(--green);   --accent-ink: var(--green-ink); }

/* section headings pick up their section's colour */
.a-teal > h2, .a-purple > h2, .a-magenta > h2, .a-orange > h2, .a-green > h2,
.topic.a-teal > h2, .topic.a-purple > h2, .topic.a-orange > h2 {
  color: var(--accent-ink, var(--ink));
}
.eyebrow { color: var(--accent-ink, var(--teal-deep)); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--teal-dark);
  background: var(--teal-dark);
  color: #fff;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

.btn-outline { background: transparent; color: var(--teal-deep); border-color: var(--teal); }
.btn-outline:hover { background: var(--tint); color: var(--teal-deep); border-color: var(--teal-deep); }

.btn-navy { background: var(--navy); border-color: var(--navy); }
.btn-navy:hover { background: #071647; border-color: #071647; }

.btn-white { background: #fff; border-color: #fff; color: var(--navy); }
.btn-white:hover { background: var(--tint); border-color: var(--tint); color: var(--navy); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* ═══ HEADER ══════════════════════════════════════════════════════════════
   No hamburger, no JavaScript: below 760px the five nav links simply wrap
   onto a second row underneath the logo.
   ═══════════════════════════════════════════════════════════════════════ */
.site-header {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  /* Muted confetti circles of varied sizes, spread across the whole header.
     Decorative only — a background image, so nothing for a screen reader to
     announce and it cannot push the layout around. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201280%20300%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Ccircle%20cx%3D%27298%27%20cy%3D%27192%27%20r%3D%2722%27%20fill%3D%27%23f2b8b0%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271087%27%20cy%3D%2738%27%20r%3D%2712%27%20fill%3D%27%23a9ddeb%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%27249%27%20r%3D%2742%27%20fill%3D%27%23bfe3bd%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27166%27%20cy%3D%27212%27%20r%3D%279%27%20fill%3D%27%23d3bfe8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27482%27%20cy%3D%2736%27%20r%3D%2712%27%20fill%3D%27%23d3bfe8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271148%27%20cy%3D%2753%27%20r%3D%279%27%20fill%3D%27%23bfe3bd%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27802%27%20cy%3D%2715%27%20r%3D%2742%27%20fill%3D%27%23bfe3bd%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271130%27%20cy%3D%2758%27%20r%3D%279%27%20fill%3D%27%23b9cdef%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27285%27%20cy%3D%27266%27%20r%3D%2726%27%20fill%3D%27%23f7d0a1%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27621%27%20cy%3D%27276%27%20r%3D%2742%27%20fill%3D%27%23f5e6a8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271181%27%20cy%3D%27282%27%20r%3D%2712%27%20fill%3D%27%23bfe3bd%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27189%27%20cy%3D%27270%27%20r%3D%2722%27%20fill%3D%27%23f7d0a1%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271006%27%20cy%3D%27262%27%20r%3D%2716%27%20fill%3D%27%23d3bfe8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27943%27%20cy%3D%27289%27%20r%3D%2722%27%20fill%3D%27%23f3c2d5%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27603%27%20cy%3D%27117%27%20r%3D%2722%27%20fill%3D%27%23f5e6a8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27157%27%20cy%3D%27284%27%20r%3D%2716%27%20fill%3D%27%23b9cdef%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271003%27%20cy%3D%27165%27%20r%3D%2736%27%20fill%3D%27%23f3c2d5%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271237%27%20cy%3D%2727%27%20r%3D%2718%27%20fill%3D%27%23f7d0a1%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27846%27%20cy%3D%2774%27%20r%3D%2736%27%20fill%3D%27%23a9ddeb%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271207%27%20cy%3D%27244%27%20r%3D%2722%27%20fill%3D%27%23f3c2d5%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27181%27%20cy%3D%27128%27%20r%3D%2712%27%20fill%3D%27%23f3c2d5%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27114%27%20cy%3D%27148%27%20r%3D%2712%27%20fill%3D%27%23f3c2d5%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27780%27%20cy%3D%27167%27%20r%3D%2718%27%20fill%3D%27%23f2b8b0%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27717%27%20cy%3D%2776%27%20r%3D%2730%27%20fill%3D%27%23f7d0a1%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27110%27%20cy%3D%27101%27%20r%3D%2730%27%20fill%3D%27%23b9cdef%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27497%27%20cy%3D%27193%27%20r%3D%2714%27%20fill%3D%27%23d3bfe8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27812%27%20cy%3D%27271%27%20r%3D%2730%27%20fill%3D%27%23b9cdef%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27871%27%20cy%3D%27271%27%20r%3D%2714%27%20fill%3D%27%23b9cdef%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27724%27%20cy%3D%27184%27%20r%3D%2726%27%20fill%3D%27%23bfe3bd%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27159%27%20cy%3D%2780%27%20r%3D%2714%27%20fill%3D%27%23f5e6a8%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27467%27%20cy%3D%27-4%27%20r%3D%2716%27%20fill%3D%27%23f3c2d5%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27363%27%20cy%3D%27124%27%20r%3D%2742%27%20fill%3D%27%23b9cdef%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27746%27%20cy%3D%27302%27%20r%3D%2736%27%20fill%3D%27%23a9ddeb%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%271045%27%20cy%3D%27306%27%20r%3D%2714%27%20fill%3D%27%23f2b8b0%27%20fill-opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) 1rem;
}

.brand { display: block; text-decoration: none; line-height: 0; }
.brand-logo {
  width: 100%;
  max-width: clamp(200px, 42vw, 340px);
  height: auto;
}

.site-nav { width: 100%; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .4rem 1rem;
}
.site-nav a {
  display: block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(1.05rem, .92rem + .55vw, 1.35rem);
  letter-spacing: .005em;
  color: var(--nav-color, var(--navy));
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 999px;
  border-bottom: 3px solid transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.site-nav a:hover {
  background: color-mix(in srgb, var(--nav-color, var(--teal)) 14%, #fff);
  border-bottom-color: var(--nav-color, var(--teal));
}

.site-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--nav-color, var(--teal)) 16%, #fff);
  border-bottom-color: var(--nav-color, var(--teal));
  border-radius: 999px 999px 4px 4px;
}

/* The five hues in the word "alphabet" on the logo, left to right. */
.site-nav li:nth-child(1) a { --nav-color: var(--nav-orange); }
.site-nav li:nth-child(2) a { --nav-color: var(--nav-green); }
.site-nav li:nth-child(3) a { --nav-color: var(--nav-blue); }
.site-nav li:nth-child(4) a { --nav-color: var(--nav-purple); }
.site-nav li:nth-child(5) a { --nav-color: var(--nav-pink); }

:target { scroll-margin-top: 1.5rem; }

@media (max-width: 759px) {
  .site-nav ul { justify-content: center; gap: .3rem .5rem; }
  .site-nav a { font-size: 1rem; padding: .45rem .6rem; }
}

/* the homepage h1 sits mid-page now, so it reads at section scale */
.h1-compact { font-size: clamp(1.55rem, 1.25rem + 1.35vw, 2.35rem); }

/* ═══ HOME · CLINICIANS ═══════════════════════════════════════════════════ */
.clinician-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}
@media (min-width: 760px) { .clinician-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.clinician-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.clinician-card h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); margin-bottom: .2rem; }
.clinician-card h2 a { color: var(--ink); text-decoration: none; }
.clinician-card h2 a:hover { color: var(--teal-deep); text-decoration: underline; }
.clinician-role {
  color: var(--muted);
  font-size: .93rem;
  margin-bottom: .9rem;
}
.clinician-card > p { color: var(--ink-soft); }
.clinician-contact {
  display: grid;
  gap: .3rem;
  margin-top: 1rem;
  font-size: .95rem;
}
.clinician-contact a { text-decoration: none; overflow-wrap: anywhere; }
.clinician-contact a:hover { text-decoration: underline; }

/* ── "who we help" strip ──────────────────────────────────────────────── */
.strip {
  border-block: 1px solid var(--line);
  background: #fff;
  padding-block: 1.35rem;
}
.strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.6rem;
}
.strip li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent-ink, var(--navy));
  background: color-mix(in srgb, var(--accent, var(--teal)) 13%, #fff);
  border-radius: 999px;
  padding: .45rem 1.1rem;
}
/* When the pills are links (What We Treat page), keep the pill look and add
   a clear hover/focus affordance. */
.strip a {
  display: block;
  margin: -.45rem -1.1rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.strip a:hover {
  color: inherit;
  background: color-mix(in srgb, var(--accent, var(--teal)) 22%, #fff);
  text-decoration: underline;
}

/* ── cards ────────────────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}
@media (min-width: 680px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  background: color-mix(in srgb, var(--accent, var(--teal)) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--teal)) 22%, var(--line));
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card h3 { margin-bottom: .5rem; color: var(--accent-ink, var(--ink)); }
.card p { color: var(--ink-soft); }
.card-link {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-ink, var(--teal-dark));
  text-decoration: none;
}
.card-link:hover { color: var(--teal-deep); text-decoration: underline; }
.card-link::after { content: " \2192"; }

/* ── services page · big clickable boxes ──────────────────────────────── */
.grid-2 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.box-link {
  display: block;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent, var(--teal));
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  text-decoration: none;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.box-link:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line);
  border-left-color: var(--accent, var(--teal));
  background: #fdfeff;
  color: var(--ink-soft);
}
.box-link h2, .box-link h3 { margin-bottom: .6rem; color: var(--accent-ink, var(--ink)); }
.box-link:hover h2, .box-link:hover h3 { color: var(--accent-ink, var(--teal-deep)); }

/* Services boxes — one colour each for the left edge and the bold heading.
   Edge takes --accent (vivid); heading takes --accent-ink (legible). */
.box-orange { --accent: #fd9900; --accent-ink: #c96a09; }
.box-blue   { --accent: #2b7fe0; --accent-ink: #1c66cc; }
.box-green  { --accent: #37b037; --accent-ink: #2f9e2f; }
.box-pink   { --accent: #fe2269; --accent-ink: #d61a5c; }
.box-cta {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-dark);
}
.box-cta::after { content: " \2192"; }
.box-link:hover .box-cta { color: var(--teal-deep); text-decoration: underline; }

/* ── page head (interior pages) ───────────────────────────────────────── */
.page-head {
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
}
.page-head h1 { margin-bottom: .9rem; }

/* ── prose blocks ─────────────────────────────────────────────────────── */
.prose > * + * { margin-top: 1.1rem; }
.prose h3 { margin-top: 2rem; }

.list-check { margin-top: 1.25rem; display: grid; }
.list-check li {
  min-width: 0;
  padding-block: .6rem;
  border-bottom: 1px solid var(--line-soft);
}
.list-check strong { color: var(--ink); }

@media (min-width: 820px) {
  .list-check--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* named-approach callout */
.callout {
  margin-top: 1.6rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}
/* The callout heading is an <h3> so the document outline never skips a level
   (h1 → h2 → h3). It is sized down here to keep its original appearance. */
.callout h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.callout p { color: var(--ink-soft); }

/* topic sections on What We Treat */
.topic { scroll-margin-top: 1.5rem; }
@media (min-width: 760px) { .topic { scroll-margin-top: 6.5rem; } }
.topic + .topic { margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.topic > h2 { margin-bottom: .75rem; }

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.jump a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1rem;
}
.jump a:hover { background: var(--tint); color: var(--teal-deep); border-color: var(--teal); }

/* ── bios ─────────────────────────────────────────────────────────────── */
.bio {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
}
@media (min-width: 860px) {
  .bio { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.bio + .bio {
  margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.bio h2 { margin-bottom: .2rem; }
.bio-cred {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 1.1rem;
}

.bio-photo {
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  max-width: 15rem;
  height: auto;
  border-radius: var(--radius);
}

.photo-placeholder {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 15rem;
  border: 2px dashed var(--teal);
  border-radius: var(--radius);
  background: var(--tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
  padding: 1rem;
  color: var(--teal-deep);
}
.photo-placeholder strong { font-family: var(--font-display); font-size: .95rem; }
.photo-placeholder span { font-size: .8rem; color: var(--muted); }

.bio-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 700;
}
.bio-contact a { text-decoration: none; }
.bio-contact a:hover { text-decoration: underline; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { margin-top: 2rem; display: grid; gap: .85rem; }

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--teal); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, .99rem + .2vw, 1.12rem);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-deep); }

.faq summary::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin-top: .42em;
  border-right: 2.5px solid var(--teal-dark);
  border-bottom: 2.5px solid var(--teal-dark);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }

.faq .answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-soft);
  max-width: 68ch;
}
.faq .answer > * + * { margin-top: .8rem; }

.notice {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: .95rem;
}
.notice strong { color: var(--ink); }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.contact-card h3 { margin-bottom: 1.1rem; }
.contact-card .role { color: var(--muted); font-size: .95rem; margin-bottom: 1.1rem; }
/* credentials sit on the same line as the name, in a lighter weight */
.contact-card h3 .role-inline {
  display: inline;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--muted);
  letter-spacing: 0;
  white-space: nowrap;
}

.contact-list { display: grid; gap: .85rem; }
.contact-list li { display: grid; gap: .1rem; min-width: 0; }
.contact-list .label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-display);
}
.contact-list a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-list a:hover { text-decoration: underline; }

.address-card {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-top: 2.25rem;
}
.address-card h3 { margin-bottom: .5rem; }
.address-card address { font-style: normal; }
.address-card a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  text-decoration: none;
}
.address-card a:hover { text-decoration: underline; }

.address-card .office-email {
  margin-top: .75rem;
  font-family: var(--font-display);
  font-weight: 700;
}
.address-card .office-email a { font-size: clamp(1rem, .97rem + .2vw, 1.1rem); }

/* embedded Google map on the contact page */
.map-embed {
  margin-top: 1.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}

/* ── closing call-to-action band ──────────────────────────────────────── */
.cta-band {
  background: var(--tint-navy);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  text-align: center;
}
.cta-band h2 { margin-bottom: .6rem; }
.cta-band .lede { margin-inline: auto; }
.cta-band address { font-style: normal; margin-top: 1rem; }
.cta-band address a { font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.cta-band address a:hover { text-decoration: underline; }
.cta-band .btn-row { justify-content: center; }

/* ═══ FOOTER ══════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #e7edfb;
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 1.75rem;
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  bottom: -2rem;
  width: 14rem;
  height: 16rem;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .2;
  pointer-events: none;
}
.site-footer::before { left: -3rem;  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%20300%27%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2796%27%20r%3D%2740%27%20fill%3D%27%238fe3f2%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2760%27%20r%3D%2722%27%20fill%3D%27%23ffe38a%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%27150%27%20r%3D%2716%27%20fill%3D%27%23a8e6a3%27%2F%3E%3Ccircle%20cx%3D%2772%27%20cy%3D%27214%27%20r%3D%2728%27%20fill%3D%27%239cc4f5%27%2F%3E%3Ccircle%20cx%3D%27172%27%20cy%3D%27140%27%20r%3D%2714%27%20fill%3D%27%23c9a3ef%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27206%27%20r%3D%2718%27%20fill%3D%27%23f7a8c4%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%27150%27%20r%3D%2712%27%20fill%3D%27%23ffc266%27%2F%3E%3C%2Fsvg%3E"); }
.site-footer::after  { right: -3rem; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%20300%27%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%2792%27%20r%3D%2738%27%20fill%3D%27%23f7a8c4%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2760%27%20r%3D%2720%27%20fill%3D%27%23a8e6a3%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%2716%27%20fill%3D%27%239cc4f5%27%2F%3E%3Ccircle%20cx%3D%27182%27%20cy%3D%27208%27%20r%3D%2726%27%20fill%3D%27%23ffe38a%27%2F%3E%3Ccircle%20cx%3D%2792%27%20cy%3D%27140%27%20r%3D%2714%27%20fill%3D%27%238fe3f2%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27206%27%20r%3D%2718%27%20fill%3D%27%23c9a3ef%27%2F%3E%3Ccircle%20cx%3D%27226%27%20cy%3D%27150%27%20r%3D%2712%27%20fill%3D%27%23ffc266%27%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 900px) { .site-footer::before, .site-footer::after { display: none; } }
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { color: #8fe3f2; text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
/* Three columns: Bonnie (left) · Alphabet Soup (centre) · Malka (right). */
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .footer-office { text-align: center; }
  .footer-person--right { text-align: right; }
}

/* clinician columns: name, then phone and email stacked */
.footer-person a { display: block; overflow-wrap: anywhere; font-size: 1.05rem; }
.footer-person a + a { margin-top: .35rem; }

/* centre office column sits smaller than the two clinician columns */
.footer-office .footer-name { font-size: 1.05rem; }
.footer-office address,
.footer-office .footer-email a { font-size: .88rem; }

.footer-col h2 {
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fe3f2;
  margin-bottom: 1rem;
}
.footer-col p, .footer-col li { font-size: 1.05rem; }
.footer-col ul { display: grid; gap: .5rem; }
.footer-col address { font-style: normal; line-height: 1.55; }
.footer-name {
  font-family: var(--font-display);
  font-weight: 800;
  color: #ffd166;
  font-size: 1.3rem;
  margin-bottom: .45rem;
}
.footer-email { margin-top: .6rem; }
.footer-email a { overflow-wrap: anywhere; }
.footer-contact a { overflow-wrap: anywhere; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / .18);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
  color: #b6c1dd;
}
.footer-bottom nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.15rem;
}

/* ── utilities ────────────────────────────────────────────────────────── */

/* Hides text from sighted users while leaving it for screen readers — for
   labels like "Menu" or "opens in a new tab" that a screen reader needs and a
   sighted user gets from context. Currently unused.
   NOT a place to put keywords. Text hidden from visitors but served to search
   engines is cloaking; Google de-indexes for it. If a phrase is worth telling
   Google, it is worth putting in a sentence a parent can read. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.mt-0 { margin-top: 0; }