/* Fonts, served from this site. Written by the builder: edit the family names,
   not the rules. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/lato-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/lato-400-normal-latin.woff2) format('woff2');
  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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/lato-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/lato-700-normal-latin.woff2) format('woff2');
  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: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/raleway-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/raleway-600-normal-latin.woff2) format('woff2');
  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: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/raleway-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/raleway-700-normal-latin.woff2) format('woff2');
  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;
}
/* End of the fonts. */

/* ==========================================================================
   Haven Sports & Family Physiotherapy. Direction: Quiet practice (DIRECTION.md).

   The token NAMES below are a contract: the contact form and comments partials
   style themselves with --line, --bg-card, --bg-alt, --fg, --fg-muted, --accent
   and --radius. Change what a token is worth, never its name. Light is the
   default; the two dark blocks are byte-identical apart from their selector.
   ========================================================================== */
:root {
  color-scheme: light;
  --primary: #4A4A4A;
  --primary-deep: #2B2B2B;
  --accent: #F28C00;
  /* The same orange, darkened to the same hue, for anywhere the accent has to
     be read as words, an icon or a focus ring on a white page. #F28C00 is a
     fill colour: on white it sits at 2.5:1, which is not legible as text. */
  --accent-strong: #A86100;
  --accent-ink: #2B2B2B;
  --bg: #FFFFFF;
  --bg-alt: #F4F4F4;
  --bg-card: #FFFFFF;
  --fg: #2E2E2E;
  --fg-muted: #6E6E6E;
  --line: #D4D4D4;
  --on-primary: #FFFFFF;
  --shadow: none;
  /* Code blocks and syntax colours (highlight.js classes map onto these). */
  --code-bg: #F4F4F4;
  --code-fg: #2E2E2E;
  --hl-comment: #6A6A6A;
  --hl-keyword: #8E3A8E;
  --hl-string: #1B7F3B;
  --hl-number: #A35400;
  --hl-title: #2F5FA8;
  --hl-attr: #8A4B00;
  --hl-meta: #6A6A6A;

  --font-display: "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, system-ui, sans-serif;
  --container: 70rem;
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --primary: #D6D6D6;
  --primary-deep: #F0F0F0;
  --accent: #F28C00;
  --accent-strong: #F9A83F;
  --accent-ink: #1A1A1A;
  --bg: #1A1A1A;
  --bg-alt: #242424;
  --bg-card: #212121;
  --fg: #EDEDED;
  --fg-muted: #B3B3B3;
  --line: #4A4A4A;
  --on-primary: #1A1A1A;
  --shadow: none;
  --code-bg: #121212;
  --code-fg: #E8E8E8;
  --hl-comment: #9A9A9A;
  --hl-keyword: #D2A8FF;
  --hl-string: #7EE787;
  --hl-number: #FFA657;
  --hl-title: #79C0FF;
  --hl-attr: #FFA657;
  --hl-meta: #9A9A9A;
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #D6D6D6;
  --primary-deep: #F0F0F0;
  --accent: #F28C00;
  --accent-strong: #F9A83F;
  --accent-ink: #1A1A1A;
  --bg: #1A1A1A;
  --bg-alt: #242424;
  --bg-card: #212121;
  --fg: #EDEDED;
  --fg-muted: #B3B3B3;
  --line: #4A4A4A;
  --on-primary: #1A1A1A;
  --shadow: none;
  --code-bg: #121212;
  --code-fg: #E8E8E8;
  --hl-comment: #9A9A9A;
  --hl-keyword: #D2A8FF;
  --hl-string: #7EE787;
  --hl-number: #FFA657;
  --hl-title: #79C0FF;
  --hl-attr: #FFA657;
  --hl-meta: #9A9A9A;
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--fg); background: var(--bg); border-top: 3px solid var(--accent); }
img, svg, video, iframe { max-width: 100%; display: block; }
img, svg, video { height: auto; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--primary-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 0.75rem; letter-spacing: -0.015em; color: var(--primary); }
h1 { font-size: clamp(2.4rem, 4.5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); }
h3 { font-size: 1.2rem; letter-spacing: 0; }
h4 { font-size: 1.05rem; letter-spacing: 0; color: var(--fg); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; }
.muted { color: var(--fg-muted); }
.label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 0.9rem; }
/* The eyebrow in Haven's orange. The readable tone, because it is being read
   as words rather than used as a fill. */
.label-accent { color: var(--accent-strong); }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.25rem); color: var(--fg-muted); max-width: 38rem; }
.measure { max-width: 42rem; }
[hidden] { display: none !important; }

/* ---- buttons ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.65rem 1.4rem; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--on-primary); }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-accent:hover { filter: brightness(1.06); color: var(--accent-ink); }
.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: var(--on-primary); }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }

/* ---- header + nav (mobile first, no JS needed) --------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 0.5rem; min-height: 4.5rem; position: relative; }
.brand { display: flex; align-items: center; text-decoration: none; min-height: 2.75rem; }
.brand img { height: 3.25rem; width: auto; }
/* From a laptop up the mark, the links and the button are all set a step
   larger, so the bar reads at arm's length without growing much taller. The
   compact bar on a phone is unchanged. */
@media (min-width: 900px) { .brand img { height: 4.25rem; } .bar { min-height: 5.5rem; } }
/* Two logos, one per theme: the grey wordmark vanishes on a dark page, so
   logo-dark.png is the same file with the grey lifted to white. Both are
   transparent, so the header colour shows through and the mark sits on the
   page rather than in a box. Swapped here, not by <picture>, because the theme
   toggle sets data-theme by hand. */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.nav-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-toggle { order: 3; flex: none; display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: var(--radius); border: 1px solid var(--line); cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 1.3rem; height: 2px; background: var(--fg); position: relative; transition: transform 0.2s; content: ""; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle-input:checked + .nav-toggle span { background: transparent; }
.nav-toggle-input:checked + .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle-input:checked + .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle-input:focus-visible + .nav-toggle { outline: 3px solid var(--accent-strong); }
.site-nav { order: 1; display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-toggle-input:checked ~ .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.site-nav li { margin: 0; }
.site-nav a { display: block; padding: 0.8rem 0; min-height: 2.75rem; text-decoration: none; color: var(--fg); font-family: var(--font-display); font-weight: 600; border-bottom: 1px solid var(--line); }
.site-nav a[aria-current="page"] { color: var(--primary); }
/* The booking button lives in the bar, not in the menu, so it stays on screen
   whether the compact menu is open or shut. */
.btn-book { order: 2; flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.btn-book:hover { color: var(--accent-ink); filter: brightness(1.06); }
/* Six links plus the button need the full bar, so the row starts at 1120px.
   The container is capped at 70rem, so the room on the row is the same at
   1120px as it is at 2560px: the link size below is set to the width there. */
@media (min-width: 1120px) {
  .bar { gap: 0.75rem; }
  .nav-toggle { display: none; }
  .site-nav { margin-left: auto; display: block; position: static; background: none; border: 0; }
  .site-nav ul { display: flex; align-items: center; gap: 0; padding: 0; }
  .site-nav a { padding: 0.6rem 0.5rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 0.95rem; white-space: nowrap; }
  .site-nav a:hover { color: var(--primary); border-bottom-color: var(--line); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .btn-book { margin-left: 0.5rem; min-height: 3rem; padding: 0.65rem 1.25rem; font-size: 1rem; }
}

/* ---- sections and rhythm ------------------------------------------------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.section:first-child, .hero + .section { border-top: 0; }
.section-tint { background: var(--bg-alt); }
.section h2 { margin-bottom: 1.25rem; }

/* ---- hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
.hero h1 { max-width: 20ch; }
.hero .lead { margin-bottom: 0; }
.hero .lead + .lead { margin-top: 1rem; }
/* Single column hero: the home page introduction, with nothing beside it.
   The headline and the leads carry their own measure, so the block keeps the
   same left edge as every other section. Nothing follows the leads, so the
   hero closes on a short band of space and runs straight into The Haven
   Approach rather than leaving a gap where buttons used to sit. */
.hero-intro .lead { max-width: 34rem; }
.hero { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero + .section { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }

/* ---- home page ink ------------------------------------------------------
   The home page headings and links are Haven's dark grey and the eyebrow above
   the headline is Haven's orange. Both now come from the tokens at the top of
   this file, so the one palette drives every page and both themes, and the
   orange used as words is the readable tone rather than the fill. */
.home { --home-ink: var(--primary); --home-ink-muted: var(--fg-muted); --home-orange: var(--accent-strong); --home-line: var(--line); }
.home { color: var(--home-ink); }
.home h1, .home h2, .home h3 { color: var(--home-ink); }
.home .label, .home .lead, .home .muted { color: var(--home-ink-muted); }
.home a:not(.btn) { color: var(--home-ink); }
.home .btn-outline { border-color: var(--home-ink); color: var(--home-ink); }
.home .btn-outline:hover { background: var(--home-ink); border-color: var(--home-ink); color: var(--bg); }
.home .label-accent { color: var(--home-orange); }

/* The headline: three phrases, each on its own line where the width allows. */
.headline { font-size: clamp(2.1rem, 4vw, 2.9rem); }
.headline-line { display: block; }
/* A headline of three phrases: it runs on as one sentence and balances its
   own lines while the screen is narrow, and breaks at the phrases from 640px. */
.headline-flow { text-wrap: balance; }
.headline-flow .headline-line { display: inline; }
@media (min-width: 640px) { .headline-flow .headline-line { display: block; } }
/* The highlighted phrase in a large headline carries Haven's brand orange at
   full strength, on every page. At headline sizes it is set large and bold,
   so the brand colour is used here rather than the darkened reading tone. */
.headline-accent { color: var(--accent); }
.home .headline-accent { color: var(--accent); }

/* ---- the Haven approach: three cards that open ---------------------------
   Plain <details>, so a tap, a click and the keyboard all work and the text is
   there without JavaScript. The numerals are set large in orange, and the hairline across the top of each card fills a third further
   along at each step, so the row reads Diagnosis to Treatment to Outcomes. */
.approach-title { margin-bottom: 1.75rem; }
.approach-grid { display: grid; gap: 1rem; counter-reset: approach; }
@media (min-width: 900px) { .approach-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } }

.approach-card { background: var(--bg-card); border: 1px solid var(--home-line); border-radius: var(--radius); background-image: linear-gradient(to right, var(--accent) 0 33.33%, var(--home-line) 33.33%); background-repeat: no-repeat; background-size: 100% 3px; background-position: left top; }
.approach-grid .approach-card:nth-child(2) { background-image: linear-gradient(to right, var(--accent) 0 66.66%, var(--home-line) 66.66%); }
.approach-grid .approach-card:nth-child(3) { background-image: linear-gradient(to right, var(--accent) 0 100%); }
.approach-card[open] { border-color: var(--accent); }

.approach-card summary { display: grid; grid-template-columns: 2.6rem 1fr 1.5rem; gap: 0.35rem 1rem; align-items: start; padding: 1.5rem 1.35rem; cursor: pointer; list-style: none; }
.approach-card summary::-webkit-details-marker { display: none; }
.approach-card summary::before { counter-increment: approach; content: counter(approach); grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 0.9; color: var(--home-orange); }
.approach-name { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--home-ink); }
.approach-summary { grid-column: 2 / -1; color: var(--home-ink-muted); }
.approach-arrow { grid-column: 3; grid-row: 1; justify-self: end; color: var(--home-orange); transition: transform 0.15s; }
.approach-card[open] .approach-arrow { transform: rotate(180deg); }
.approach-card summary:hover .approach-name { color: var(--home-orange); }
.approach-detail { margin: 0 1.35rem; padding: 1.1rem 0 1.5rem; border-top: 1px solid var(--home-line); color: var(--home-ink); }
@media (min-width: 900px) {
  .approach-card summary { padding: 1.75rem 1.5rem; }
  .approach-detail { margin-inline: 1.5rem; padding-bottom: 1.75rem; }
}

/* ---- two column split ---------------------------------------------------- */
.two-col { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; } .two-col.narrow-left { grid-template-columns: 0.8fr 1.2fr; } }

/* ---- people: the three profile cards on the about page -------------------
   The same plain <details> the home page's approach cards use, so a tap, a
   click and the keyboard all work and every biography is in the page without
   JavaScript. One card opens at a time. On a phone the portrait sits small on
   the left with the name, role and opening sentence beside it; from 860px the
   three cards take equal columns with the portrait above the name. The orange
   rule across the top of each card is the marker the approach cards and the
   about note already wear. */
.team-title { margin-bottom: 1.75rem; }
.team-grid { display: grid; gap: 1rem; }
@media (min-width: 860px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } }

.team-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); background-image: linear-gradient(to right, var(--accent) 0 100%); background-repeat: no-repeat; background-size: 100% 3px; background-position: left top; }
.team-card[open] { border-color: var(--accent); }

.team-card summary {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.2rem 1.1rem;
  grid-template-areas: "photo name" "photo role" "photo intro" "more more";
  padding: 1.5rem 1.35rem;
  cursor: pointer;
  list-style: none;
}
.team-card summary::-webkit-details-marker { display: none; }

/* The portrait keeps the proportions of the photograph we have, so the two
   placeholders hold exactly the same frame until the real photographs land. */
.team-photo { grid-area: photo; align-self: start; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: calc(var(--radius) * 2); overflow: hidden; background: var(--bg-alt); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Placeholder: a dashed frame and a plain figure, so it reads as waiting for a
   photograph rather than as a portrait. */
.team-photo-empty { display: grid; place-items: center; border: 1px dashed var(--line); }
.team-photo-empty svg { width: 46%; height: auto; fill: none; stroke: var(--fg-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.team-name { grid-area: name; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--primary); }
.team-role { grid-area: role; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--fg-muted); }
.team-intro { grid-area: intro; margin-top: 0.4rem; color: var(--fg); }
.team-more { grid-area: more; display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-strong); }
.team-chevron { transition: transform 0.15s; }
.team-card[open] .team-chevron { transform: rotate(180deg); }
.team-more-close { display: none; }
.team-card[open] .team-more-open { display: none; }
.team-card[open] .team-more-close { display: inline; }
.team-card summary:hover .team-name { color: var(--accent-strong); }

.team-bio { margin: 0 1.35rem; padding: 1.1rem 0 1.5rem; border-top: 1px solid var(--line); color: var(--fg); }

@media (min-width: 860px) {
  .team-card summary { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "name" "role" "intro" "more"; padding: 1.5rem; }
  .team-photo { width: 7.5rem; margin-bottom: 1.1rem; }
  /* Two lines of room for the longest role, so the three collapsed cards keep
     their opening sentences and their chevrons on the same line as each other. */
  .team-role { min-height: 2.7em; }
  .team-bio { margin-inline: 1.5rem; padding-bottom: 1.75rem; }
}
/* The thinking behind Haven: Phil's photograph and his name in one column,
   the eyebrow, the heading and his three paragraphs in the other. The portrait
   keeps its own proportions and its own background, held to a modest width on
   a phone so the heading and the first paragraph sit on screen with it. From
   720px the two take a column each, both starting at the top so no band of
   space opens between the photograph and the text. Corners are rounded a
   little further than the site's 4px so a large photograph reads as finished
   rather than cropped. */
.home-person { display: grid; gap: 1.5rem; align-items: start; }
.home-person-photo { margin: 0; max-width: min(45vw, 11rem); }
.home-person img { border-radius: calc(var(--radius) * 2); width: 100%; }
.home-person .role { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--home-ink-muted); margin: 0.7rem 0 0; }
.home-person-text .label { margin-bottom: 0.7rem; }
.home-person h2 { margin-bottom: 1rem; }
.home-person-text p:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .home-person { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; }
  .home-person-photo { max-width: none; }
}
@media (min-width: 900px) {
  .home-person { grid-template-columns: 17rem minmax(0, 1fr); gap: 3.5rem; }
}

/* ---- explore haven: the four ways on from a page --------------------------
   The closing section of the home page and of every main page below it.
   Under its heading sit the compact cards What We Treat and Treatments &
   Technology already use, turned into plain links: the orange rule across the
   top, a line icon in the readable orange lifted from the page the card
   opens, the destination and a line saying what is there, with the arrow at
   the top right. Two columns wherever they read comfortably, one on the
   narrowest phones, and each card only as tall as its three lines need. The
   whole card is the link.
   The home page sets the --home-* colours on .home; the section carries the
   same four itself so the cards read the same on the inside pages. */
.explore { --home-ink: var(--primary); --home-ink-muted: var(--fg-muted); --home-orange: var(--accent-strong); --home-line: var(--line); }
.explore { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
/* The invitation is the section heading, set like The Haven Approach above it.
   No text column holds it in: wherever the row is wide enough it sits on one
   line, and on a phone it wraps where the words fall. */
.explore h2 { margin-bottom: 0; }
.explore-intro { margin-bottom: clamp(1.35rem, 3vw, 1.85rem); }

/* One column on the narrowest phones, two from 420px, where the longest
   destination still reads comfortably on one or two lines. */
.explore-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
@media (min-width: 420px) { .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 560px) { .explore-grid { gap: 0.9rem; } }
/* From 1060px the heading takes its own column and the four cards sit beside
   it, the arrangement the about note and the treatments line already use. The
   first column is as wide as the heading on one line, the cards take the rest,
   and below that width the heading keeps its single line above them. */
@media (min-width: 1060px) {
  .explore .container { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 36rem); column-gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
  .explore-intro { margin-bottom: 0; }
  .explore-grid { gap: 1.1rem; }
}

.explore-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.15rem;
  grid-template-areas: "icon arrow" "name name" "short short";
  gap: 0.25rem 0.6rem;
  align-content: start;
  padding: 0.75rem 0.8rem 0.85rem;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--home-line);
  border-radius: var(--radius);
  background-image: linear-gradient(to right, var(--accent) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
  transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}
.explore-icon { grid-area: icon; width: 1.6rem; height: 1.6rem; margin-bottom: 0.2rem; fill: none; stroke: var(--home-orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.explore-name { grid-area: name; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--home-ink); transition: color 0.15s; }
.explore-short { grid-area: short; font-size: 0.88rem; line-height: 1.45; color: var(--home-ink-muted); }
.explore-arrow { grid-area: arrow; justify-self: end; width: 1.15rem; height: 1.15rem; color: var(--home-orange); transition: transform 0.15s; }
a.explore-card:hover { border-color: var(--accent); background-color: var(--bg-alt); }
.explore-card:hover .explore-name { color: var(--home-orange); }
.explore-card:hover .explore-arrow { transform: translateX(0.25rem); }
.explore-card:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
/* The tap: the card takes the tinted field and the orange border and settles a
   hair, which a phone holds for as long as the finger is down. */
a.explore-card:active { border-color: var(--accent); background-color: var(--bg-alt); transform: translateY(1px); }
@media (min-width: 560px) {
  .explore-card { padding: 0.85rem 0.95rem 0.95rem; grid-template-columns: minmax(0, 1fr) 1.25rem; }
  .explore-icon { width: 1.75rem; height: 1.75rem; }
  .explore-name { font-size: 1.05rem; }
  .explore-short { font-size: 0.9rem; }
  .explore-arrow { width: 1.25rem; height: 1.25rem; }
}

/* ---- ready to find us: the home page's closing contact line ---------------
   A short band under the four cards: the address in a sentence on the left,
   one outlined link through to Contact & Location on the right. It is held
   tighter than a full section so the page does not open a gap before the
   footer, and it is outlined rather than filled, so the orange Book online
   button stays the one strong call on the page. */
.home-contact { padding-block: clamp(1.9rem, 3.5vw, 2.6rem); }
.home-contact-inner { display: grid; gap: 1.1rem; align-items: center; }
@media (min-width: 740px) {
  .home-contact-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 4vw, 3rem); }
}
.home-contact h2 { font-size: 1.35rem; letter-spacing: 0; margin-bottom: 0.35rem; }
.home-contact-text p { margin: 0; color: var(--home-ink-muted); max-width: 38rem; }

/* The link wears the card's hairline and radius but not its orange top rule,
   which keeps it a step quieter than the four cards above it. */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  transition: background-color 0.15s, transform 0.1s;
}
.home a.contact-link, .contact-link .contact-link-text { color: var(--accent-strong); }
.contact-link-icon { flex: none; width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-link-arrow { flex: none; width: 1.15rem; height: 1.15rem; color: var(--accent-strong); transition: transform 0.15s; }
.home a.contact-link:hover { background-color: var(--bg-alt); color: var(--accent-strong); }
.contact-link:hover .contact-link-arrow { transform: translateX(0.25rem); }
.contact-link:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.home a.contact-link:active { background-color: var(--bg-alt); transform: translateY(1px); }

/* ---- page layout (banner + prose) --------------------------------------- */
.page-banner { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-banner h1 { max-width: 20ch; }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.35rem; }
.prose ul ul { margin-top: 0.35rem; }
.prose img { border-radius: var(--radius); margin-block: 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 4px solid var(--accent); color: var(--fg-muted); }

/* ---- about: the opening, the principles, the introduction beneath them ---
   The page opens on Haven's approach, set as type the way the home page opens:
   an orange eyebrow, the headline broken across two lines with the second in
   orange, then the paragraphs on a reading measure. The three principles
   follow under their hairlines. Phil's introduction sits below them in the
   page's tinted field, its heading set like the opening one and held beside
   its paragraphs from 900px. */
.about-opening { padding-bottom: clamp(2.75rem, 6vw, 4rem); }
.about-opening h1 { max-width: 28ch; }
.about-intro { max-width: 40rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.about-intro p { margin-bottom: 1.15rem; }
.about-intro p:first-child { font-size: clamp(1.1rem, 1.8vw, 1.2rem); }
.about-intro p:last-child { margin-bottom: 0; }
.about-experience .about-intro { margin-top: 0; max-width: 42rem; }
.section.about-experience h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1.5rem; }
@media (min-width: 900px) { .section.about-experience h2 { margin-bottom: 0; } }

/* The three points under the opening: columns, each under a hairline, with a
   line icon in the readable orange beside its heading, the way the numerals
   sit beside their headings in the home page's approach cards. Nothing but
   the rule and the space separates them, and they keep their rules when they
   stack. */
.about-opening + .section { border-top: 0; padding-top: clamp(2.25rem, 4vw, 3.25rem); }
.pillars { display: grid; gap: 2.25rem; }
@media (min-width: 740px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); } }
.pillar { border-top: 1px solid var(--line); padding-top: 1.25rem; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 0.85rem; align-items: center; align-content: start; }
.pillar-icon { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.section .pillar h2 { font-size: 1.2rem; letter-spacing: 0; margin: 0; }
.pillar p { grid-column: 1 / -1; color: var(--fg-muted); margin: 0.7rem 0 0; }
/* The quiet link under each principle: the page that covers it, set small in
   the readable orange with the arrow the cards elsewhere already wear. A line
   of text rather than a button, so it sits under the paragraph without
   competing with it. */
.pillar .pillar-link { grid-row: 3; align-self: end; margin: 0.35rem 0 0; }
.pillar-link a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--accent-strong); text-decoration: none; }
.pillar-link a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.25em; }
.pillar-link-arrow { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.pillar-link a:hover .pillar-link-arrow { transform: translateX(0.25rem); }

/* ---- the card grid: six cards and a full-width panel ---------------------
   Used by What We Treat for its conditions and by Treatments & Technology for
   its treatment options.
   The cards keep the compact face the other <details> cards on the site wear:
   the orange rule across the top, a line icon in the readable orange, the
   condition and a line of symptoms. Two columns on a phone, three from 900px.
   The reading text does not sit in those columns. Each card is a label for a
   hidden checkbox, and the panel that follows it in the markup is placed by
   hand in the grid row directly beneath its card's row, spanning every column,
   so the explanation is read at full width. Row gap is zero and the spacing
   comes from the margin under each card, which lets the five rows that hold no
   open panel collapse to nothing. A checkbox rather than a radio, so a second
   tap on the same card closes it; the script on the page keeps one open. */
.treat-opening { padding-bottom: clamp(2rem, 5vw, 3rem); }
.treat-opening h1 { max-width: 26ch; }
.treat-intro { max-width: 42rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.treat-intro p:last-child { margin-bottom: 0; }
.treat-opening + .section { border-top: 0; padding-top: clamp(2rem, 4.5vw, 3.25rem); }

.treat-grid {
  --treat-gap: 0.65rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--treat-gap);
  row-gap: 0;
  margin-bottom: calc(var(--treat-gap) * -1);
}
@media (min-width: 560px) { .treat-grid { --treat-gap: 1rem; } }
@media (min-width: 900px) { .treat-grid { --treat-gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The cards are the only <label> children of the grid, the panels the only
   <div> children and the checkboxes the only <input> children, so :nth-of-type
   numbers the six of each separately. Each checkbox shares its card's cell, so
   moving to it with the keyboard brings that card into view. */
.treat-grid > label:nth-of-type(1), .treat-grid > input:nth-of-type(1) { grid-row: 1; grid-column: 1; }
.treat-grid > label:nth-of-type(2), .treat-grid > input:nth-of-type(2) { grid-row: 1; grid-column: 2; }
.treat-grid > label:nth-of-type(3), .treat-grid > input:nth-of-type(3) { grid-row: 3; grid-column: 1; }
.treat-grid > label:nth-of-type(4), .treat-grid > input:nth-of-type(4) { grid-row: 3; grid-column: 2; }
.treat-grid > label:nth-of-type(5), .treat-grid > input:nth-of-type(5) { grid-row: 5; grid-column: 1; }
.treat-grid > label:nth-of-type(6), .treat-grid > input:nth-of-type(6) { grid-row: 5; grid-column: 2; }
.treat-grid > div:nth-of-type(1), .treat-grid > div:nth-of-type(2) { grid-row: 2; }
.treat-grid > div:nth-of-type(3), .treat-grid > div:nth-of-type(4) { grid-row: 4; }
.treat-grid > div:nth-of-type(5), .treat-grid > div:nth-of-type(6) { grid-row: 6; }
@media (min-width: 900px) {
  .treat-grid > label:nth-of-type(3), .treat-grid > input:nth-of-type(3) { grid-row: 1; grid-column: 3; }
  .treat-grid > label:nth-of-type(4), .treat-grid > input:nth-of-type(4) { grid-row: 3; grid-column: 1; }
  .treat-grid > label:nth-of-type(5), .treat-grid > input:nth-of-type(5) { grid-row: 3; grid-column: 2; }
  .treat-grid > label:nth-of-type(6), .treat-grid > input:nth-of-type(6) { grid-row: 3; grid-column: 3; }
  .treat-grid > div:nth-of-type(3) { grid-row: 2; }
  .treat-grid > div:nth-of-type(4), .treat-grid > div:nth-of-type(5), .treat-grid > div:nth-of-type(6) { grid-row: 4; }
}

.treat-toggle { appearance: none; -webkit-appearance: none; width: 0; height: 0; margin: 0; padding: 0; border: 0; opacity: 0; justify-self: start; align-self: start; pointer-events: none; }

.treat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  grid-template-areas: "icon arrow" "name name" "short short";
  gap: 0.3rem 0.6rem;
  align-content: start;
  margin-bottom: var(--treat-gap);
  padding: 1rem 0.9rem;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-image: linear-gradient(to right, var(--accent) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
}
.treat-icon { grid-area: icon; width: 1.85rem; height: 1.85rem; margin-bottom: 0.4rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.treat-name { grid-area: name; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--primary); }
.treat-short { grid-area: short; font-size: 0.9rem; line-height: 1.5; color: var(--fg-muted); }
.treat-arrow { grid-area: arrow; justify-self: end; width: 1.25rem; height: 1.25rem; color: var(--accent-strong); transition: transform 0.15s; }
.treat-card:hover .treat-name { color: var(--accent-strong); }

/* The selected card: Haven's orange on the border and the title, the page's
   tinted field behind it, and the chevron turned over. The panel below picks
   up the same orange and the same tint, so the two read as one block. */
.treat-toggle:checked + .treat-card { border-color: var(--accent); background-color: var(--bg-alt); }
.treat-toggle:checked + .treat-card .treat-name { color: var(--accent-strong); }
.treat-toggle:checked + .treat-card .treat-arrow { transform: rotate(180deg); }
.treat-toggle:focus-visible + .treat-card { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

.treat-panel {
  display: none;
  grid-column: 1 / -1;
  gap: 1.1rem;
  margin-bottom: var(--treat-gap);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2.25rem) clamp(1.35rem, 3vw, 2.25rem);
  background: var(--bg-alt);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background-image: linear-gradient(to right, var(--accent) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
}
#treat-1:checked ~ #treat-panel-1,
#treat-2:checked ~ #treat-panel-2,
#treat-3:checked ~ #treat-panel-3,
#treat-4:checked ~ #treat-panel-4,
#treat-5:checked ~ #treat-panel-5,
#treat-6:checked ~ #treat-panel-6,
#tech-1:checked ~ #tech-panel-1,
#tech-2:checked ~ #tech-panel-2,
#tech-3:checked ~ #tech-panel-3,
#tech-4:checked ~ #tech-panel-4,
#tech-5:checked ~ #tech-panel-5,
#tech-6:checked ~ #tech-panel-6 { display: grid; }
@media (min-width: 900px) {
  .treat-panel { grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.treat-panel-icon { width: 2.25rem; height: 2.25rem; margin-bottom: 0.85rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.treat-panel .treat-panel-name { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.01em; color: var(--primary); }
.treat-panel-body { max-width: 44rem; font-size: clamp(1.05rem, 1.5vw, 1.12rem); line-height: 1.8; color: var(--fg); }
.treat-panel-body > p:last-child { margin-bottom: 0; }

/* The note under an explanation: a hairline, a small orange bulb and quieter
   type. No field behind it, so it reads as an aside rather than a callout. */
.treat-note { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.7; color: var(--fg-muted); }
.treat-note-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--primary); }
.treat-note-icon { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.treat-note p:last-child { margin-bottom: 0; }

/* The line to the treatments page: a hairline under the grid, the question on
   the left and the button on the right where the width allows. */
.treat-explore { margin-top: clamp(2.25rem, 4.5vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 740px) { .treat-explore { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; } }
.section .treat-explore h2 { font-size: 1.35rem; letter-spacing: 0; margin-bottom: 0.35rem; }
.treat-explore p { margin: 0; color: var(--fg-muted); max-width: 34rem; }
.treat-explore .actions { margin-top: 0; }

/* The closing section takes the about page's note: the heading alone in the
   narrow column over a short orange rule, the text and the booking button
   beside it. */
.treat-close h2::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--accent); margin-bottom: 1.15rem; }
.treat-close h2 { max-width: 18ch; }
@media (min-width: 900px) { .treat-close h2 { margin-bottom: 0; } }

/* ---- treatments and technology ------------------------------------------
   The page is built on What We Treat: the same label, the headline with one
   phrase in orange, the same measured intro. Under it the three stages of
   treatment stand in hairline topped columns, the orange filling a third, two
   thirds and then the whole rule as the stages advance, the way the home page
   marks its three steps. The treatment options are the What We Treat cards
   themselves, so the two pages open the same way. */
.tt-opening { padding-bottom: clamp(2rem, 5vw, 3rem); }
.tt-opening h1 { max-width: 34ch; }
.tt-opening + .section { border-top: 0; padding-top: clamp(2rem, 4.5vw, 3.25rem); }

.tt-lead { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.tt-lead p { margin-bottom: 1.15rem; }
.tt-lead p:last-child { margin-bottom: 0; }
.tt-intro { max-width: 42rem; color: var(--fg-muted); margin-bottom: clamp(2.25rem, 4.5vw, 3rem); }

.stage-grid { list-style: none; display: grid; gap: 2.25rem; margin: 0; padding: 0; }
@media (min-width: 740px) { .stage-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); } }
/* The icon sits beside the stage name, not above it, so each stage opens on
   one line, as the approach cards on the home page do. */
.stage {
  padding-top: 1.25rem;
  background-image: linear-gradient(to right, var(--accent) 0 33.33%, var(--line) 33.33%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left top;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
  align-content: start;
}
.stage-grid .stage:nth-child(2) { background-image: linear-gradient(to right, var(--accent) 0 66.66%, var(--line) 66.66%); }
.stage-grid .stage:nth-child(3) { background-image: linear-gradient(to right, var(--accent) 0 100%); }
.stage-icon { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stage h3 { margin: 0; }
.stage p { grid-column: 1 / -1; color: var(--fg-muted); margin: 0.7rem 0 0; }

/* The two line heading over the options, set like the page headline. */
.tt-options-title .headline-line { line-height: 1.15; }

/* The option cards sit on the tinted field, so the card that is open and its
   panel take the page colour rather than the tint they use on What We Treat.
   The orange border, title and turned chevron still mark the open card. */
.tt-grid { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.section-tint .treat-toggle:checked + .treat-card,
.section-tint .treat-panel { background-color: var(--bg-card); }

/* The tinted field stops at the cards: the note and the booking line that
   follow sit on the white page the opening sections use, so the closing
   section carries no tint, no rule of its own and no top padding. The note
   keeps the gap it had inside the tint. */
.tt-options { padding-bottom: clamp(2.25rem, 4.5vw, 3rem); }
.tt-closing { padding-top: 0; border-top: 0; }

/* The note under the cards: the aside from inside the What We Treat panels,
   given a heading and set on a reading measure. On white its paragraph takes
   Haven's dark grey rather than the muted grey, which reads more easily. */
.tt-note { max-width: 46rem; margin-top: clamp(2.25rem, 4.5vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); color: var(--primary); }
.section .tt-note-title { font-size: 1.2rem; letter-spacing: 0; margin: 0 0 0.5rem; color: var(--primary); }

/* The closing line: the hairline, the message on the left and the booking
   link on the right where the width allows. */
.tt-book { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.tt-book .actions { margin: 0; }

/* ---- your first visit ----------------------------------------------------
   Four parts of a first appointment, all of them open: no cards, no panels.
   Each is a numeral and a line icon in a narrow left column, the bold heading
   beside them and a short block of text under it, with a hairline between one
   part and the next. The numerals and icons take the readable orange, as the
   numbered elements elsewhere on the site do. The page is set tighter than the
   rest of the site so all four parts, and the questions under them, can be
   scanned on a phone without long runs of empty space. */
.visit-opening { padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 3vw, 1.75rem); }
.visit-opening h1 { max-width: 26ch; }
.visit-opening + .section { border-top: 0; padding-top: clamp(0.75rem, 2vw, 1.25rem); }
.visit-lead { max-width: 42rem; margin-top: clamp(0.9rem, 2vw, 1.35rem); }
.visit-lead p:last-child { margin-bottom: 0; }

.visit-section { padding-bottom: clamp(2rem, 4vw, 2.75rem); }
.visit-steps { list-style: none; margin: 0; padding: 0; counter-reset: visit; }
.visit-step { counter-increment: visit; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-areas: "marker title" "marker body"; column-gap: 1rem; row-gap: 0.45rem; align-items: start; padding-block: clamp(1.1rem, 2.2vw, 1.5rem); }
.visit-step:first-child { padding-top: 0; }
.visit-step:last-child { padding-bottom: 0; }
.visit-step + .visit-step { border-top: 1px solid var(--line); }
.visit-marker { grid-area: marker; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.visit-title { grid-area: title; }
.visit-body { grid-area: body; }
.visit-marker::before { content: counter(visit); font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 0.9; color: var(--accent-strong); }
.visit-icon { width: 1.6rem; height: 1.6rem; flex: none; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.section .visit-title { font-size: clamp(1.18rem, 2.1vw, 1.4rem); letter-spacing: -0.01em; margin: 0; color: var(--primary); }
.visit-body { max-width: 44rem; }
.visit-body p:last-child { margin-bottom: 0; }
@media (min-width: 840px) {
  .visit-step { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 2rem; row-gap: 0.35rem; }
  .visit-marker::before { font-size: 2.8rem; }
}

/* The practical questions that close the page: the short orange rule the
   about and treatment pages use above a closing heading, then the questions
   as the plain <details> rows the home and about pages already open with, so
   a tap, a click and the keyboard all work without JavaScript. Collapsed, the
   eight questions read as one short list: an orange icon, the question and a
   chevron that turns when the answer is showing. Hairlines, not boxes, divide
   one question from the next, on the same white field the rest of the page
   sits on. The row is 44px tall at its shortest, so it is a comfortable tap
   target on a phone. */
.visit-before { background: var(--bg); padding-block: clamp(2rem, 4vw, 2.75rem) clamp(2.25rem, 4.5vw, 3rem); }
.visit-before h2::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--accent); margin-bottom: 1.15rem; }
.visit-intro { max-width: 42rem; color: var(--fg-muted); margin-bottom: clamp(1.25rem, 2.5vw, 1.6rem); }

.visit-faq { border-top: 1px solid var(--line); }
.visit-faq-item { border-bottom: 1px solid var(--line); }
.visit-faq-q { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 1.25rem; align-items: center; column-gap: 0.9rem; padding-block: 0.8rem; min-height: 44px; cursor: pointer; list-style: none; }
.visit-faq-q::-webkit-details-marker { display: none; }
.visit-faq-icon { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--accent-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visit-faq-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.3; color: var(--primary); }
.visit-faq-chevron { justify-self: end; color: var(--accent-strong); transition: transform 0.15s; }
.visit-faq-item[open] .visit-faq-chevron { transform: rotate(180deg); }
.visit-faq-q:hover .visit-faq-text { color: var(--accent-strong); }
.visit-faq-a { max-width: 46rem; padding: 0 0 1.05rem 2.5rem; }
.visit-faq-a p { margin: 0; }

/* The address and the booking button close the page, on one line where the
   width allows, the way the treatments page closes. */
.visit-book { display: grid; gap: 1rem; align-items: center; margin-top: clamp(1.4rem, 3vw, 2rem); }
.visit-address { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--primary); }
.visit-address a { color: inherit; }
.visit-book .actions { margin: 0; }
@media (min-width: 740px) { .visit-book { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; } }

/* ---- contact ------------------------------------------------------------- */
/* The opening is set tighter than a standard page banner, the way the other
   inside pages tighten theirs: the eyebrow, the heading and the one line under
   it read as a single block, and the contact details follow close behind. */
.contact-opening { padding-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.contact-opening h1 { margin-bottom: 0.4rem; }
.contact-opening .lead { margin-bottom: 0; }
.contact-opening + .section { padding-top: clamp(1.75rem, 4vw, 2.5rem); }
.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
/* The clinic name and its address open the column, in the display face, so
   the address is said once and the list below carries only phone and email. */
.contact-address { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.4; color: var(--primary); margin: 0 0 1rem; }
.contact-address a { color: inherit; }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.contact-list li { display: grid; gap: 0.15rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.contact-list .k { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.contact-list .v { font-size: 1.15rem; }
.contact-list .v a { font-weight: 700; }
@media (min-width: 540px) { .contact-list li { grid-template-columns: 7rem 1fr; align-items: baseline; } }
.hours { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.hours th, .hours td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.hours th { font-family: var(--font-display); font-weight: 700; color: var(--primary); width: 50%; }
.hours caption { text-align: left; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); padding-bottom: 0.5rem; }
.map { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.map iframe { width: 100%; height: 360px; border: 0; display: block; }
/* Read at the body size and in the body ink: it carries the parking, access
   and directions a visitor needs, so it is not a footnote. */
.map-caption { color: var(--fg); margin: 0.75rem 0 0; }

/* ---- footer -------------------------------------------------------------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); margin-top: 3rem; color: var(--fg); }
.site-footer a { color: var(--primary); }
.footer-grid { display: grid; gap: 2rem; padding-block: 3rem 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--primary); margin-bottom: 0.75rem; }
.site-footer p { margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 0.3rem 0; }
.site-footer li a { display: inline-block; min-height: 1.75rem; }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 1.1rem; font-size: 0.9rem; color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
.footer-bottom p { margin: 0; }

/* ---- theme toggle --------------------------------------------------------- */
.theme-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; width: 2.9rem; height: 2.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.theme-toggle .icon { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Code blocks and syntax colouring (classes from highlight.js, colours from the tokens above). */
.prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.9em; background: var(--code-bg); color: var(--code-fg); padding: 0.1em 0.35em; border-radius: var(--radius); border: 1px solid var(--line); overflow-wrap: anywhere; }
.prose pre { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; margin-block: 1.25rem; line-height: 1.55; font-size: 0.9rem; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.hljs { background: transparent; color: var(--code-fg); }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-name { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: var(--hl-string); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-deletion { color: var(--hl-number); }
.hljs-title, .hljs-section, .hljs-type, .hljs-built_in, .hljs-class .hljs-title, .hljs-function .hljs-title { color: var(--hl-title); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-selector-attr, .hljs-selector-id, .hljs-selector-class { color: var(--hl-attr); }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-subst { color: var(--hl-meta); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Table of contents on long posts (nav.roq-toc comes from the TOC plugin). */
.toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; font-size: 0.95rem; }
.toc-title { margin: 0 0 0.4rem; font-weight: 600; color: var(--fg-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { padding-left: 1rem; }
.toc li { margin: 0.2rem 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Newer / older links under a paginated listing. */
.pagination ul { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.5rem 0 0; padding: 0; }
.pagination p { margin: 0; }
.pagination .page-number { color: var(--fg-muted); font-size: 0.9rem; }