/* =============================================================================
   MSEC — Manchester Shoulder & Elbow Clinic
   Single stylesheet. Sections:
     0.  Self-hosted fonts (woff2 in assets/fonts/)
     1.  Tokens (:root custom properties)
     2.  Reset + base
     3.  Typography
     4.  Layout primitives (.wrap, .band, .grid-*)
     5.  Eyebrow, buttons, pills, cards
     6.  Skip link, focus, screen-reader utilities
     7.  Info strip (top dark band)
     8.  Nav (sticky white, dropdowns, burger)
     9.  Mobile nav overlay
     10. Footer
     11. Cookie banner
     12. Page-specific (added per template as we go)
     13. Responsive (≤ 768 mobile, ≤ 480 small)
   ========================================================================== */


/* 0. Self-hosted fonts ------------------------------------------------------ */
/* Variable fonts cover the full weight range we use (Newsreader 400–500;
   Plus Jakarta Sans 400–700) in a single woff2 each. Latin subset only —
   English-language site. font-display:swap means text renders immediately
   in the fallback while the woff2 is fetching, no FOIT. */

@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2-variations');
  font-weight: 400 500;
  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: 'Newsreader';
  src: url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2-variations');
  font-weight: 400 500;
  font-style: italic;
  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: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  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;
}


/* 1. Tokens ----------------------------------------------------------------- */

:root {
  --ink:          #0e0c12;
  --ink-soft:     #332e3a;
  --paper:        #fafafa;
  --card:         #ffffff;
  --muted:        #5b5663;
  --border:       #e7e3e9;
  --accent:       #5e2a7a;
  --accent-deep:  #3c1a55;
  --accent-soft:  #f5f0f7;
  --accent-light: #c89bea;

  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', 'Times New Roman', Georgia, serif;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 56px;
  --space-14: 64px;
  --space-16: 72px;
  --space-20: 96px;

  --fs-display: clamp(48px, 6vw, 84px);
  --fs-h1:      clamp(40px, 4.5vw, 64px);
  --fs-h2:      clamp(28px, 3vw, 44px);
  --fs-h3:      28px;
  --fs-card:    22px;
  --fs-body:    17px;
  --fs-small:   13px;
  --fs-meta:    12px;
  --fs-eyebrow: 12px;

  --pad-x:      40px;
  --pad-x-mobile: 20px;

  --logo-purple-filter: brightness(0) saturate(100%) invert(15%) sepia(78%) saturate(2400%) hue-rotate(266deg) brightness(85%) contrast(96%);
}


/* 2. Reset + base ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.unstyled, a.unstyled:hover { text-decoration: none; }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}


/* 3. Typography ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em;  }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.2; }
h4 { font-size: var(--fs-card); letter-spacing: -0.01em; line-height: 1.3; }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.serif        { font-family: var(--font-serif); font-weight: 400; }
.italic       { font-style: italic; }
.serif-italic { font-family: var(--font-serif); font-weight: 400; font-style: italic; }

p { margin: 0 0 1em; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

.meta {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted);
}

.muted { color: var(--muted); }
.accent { color: var(--accent); }


/* 4. Layout primitives ------------------------------------------------------ */

.wrap {
  width: 100%;
  margin: 0 auto;
}

.band {
  padding: var(--space-14) var(--pad-x);
}
.band.tight  { padding: var(--space-10) var(--pad-x); }
.band.loose  { padding: var(--space-16) var(--pad-x); }
.band.dark   { background: var(--ink); color: var(--paper); }
.band.purple { background: var(--accent); color: var(--paper); }
.band.soft   { background: var(--accent-soft); color: var(--ink); }

.band.dark h1, .band.dark h2, .band.dark h3, .band.dark .display,
.band.purple h1, .band.purple h2, .band.purple h3, .band.purple .display { color: inherit; }
.band.dark p, .band.purple p { color: var(--paper); }

.grid {
  display: grid;
  gap: var(--space-10);
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-hero { grid-template-columns: 1.2fr 1fr; }
.grid-sidebar { grid-template-columns: 280px 1fr; }


/* 5. Eyebrow, buttons, pills, cards ---------------------------------------- */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-3);
}
.eyebrow.muted  { color: var(--muted); }
.eyebrow.paper  { color: var(--paper); opacity: 0.6; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary {
  background: var(--accent);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--accent-deep);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 4px 0;
}
.band.dark .btn-ghost,
.band.purple .btn-ghost {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.btn-outline {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--ink);
  text-decoration: none;
}
.btn-lg {
  font-size: 14px;
  padding: 16px 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-size: var(--fs-meta);
  font-weight: 500;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  white-space: nowrap;
}
.pill.solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--space-8);
}
.card.flush { padding: 0; }


/* 6. Skip link, focus, screen-reader utilities ----------------------------- */

.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  background: var(--accent);
  color: var(--paper);
  padding: 12px 20px;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
  outline: none;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.band.dark :focus-visible,
.band.purple :focus-visible {
  outline-color: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* 7. Info strip ------------------------------------------------------------- */

.info-strip {
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-meta);
  padding: 8px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  white-space: nowrap;
}
.info-strip .id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.info-strip .id .name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
}
.info-strip .id .role {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.info-strip .contact {
  display: flex;
  align-items: center;
  gap: 16px;
}
.info-strip .contact a:hover { opacity: 0.8; text-decoration: none; }
.info-strip .sep { opacity: 0.3; }
/* Inline Doctify micro-star widget (layoutF) on the right edge of the strip */
.info-strip .doctify-widget {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  width: 134px;
  height: 40px;
  position: relative;
  overflow: visible;
}
.info-strip .doctify-widget > div {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scale(0.42);
  transform-origin: left center;
  line-height: normal;
}
/* Force Doctify's flex link to stay on one line (it ships with flex-wrap: wrap) */
.info-strip .doctify-widget [class*="micro_star_widget_link"] {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}


/* 8. Nav -------------------------------------------------------------------- */

.nav {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  font-family: var(--font-sans);
}
.nav .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--pad-x);
  gap: var(--space-6);
}
.nav .logo img {
  height: 54px;
  width: auto;
  filter: var(--logo-purple-filter);
  display: block;
}
.nav .logo:hover { text-decoration: none; }
.nav .menu {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  flex: 1 1 auto;
}
.nav .menu > li {
  position: relative;
  padding: 14px 0;
}
.nav .menu > li > a,
.nav .menu > li > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
}
.nav .menu > li > a:hover,
.nav .menu > li > button:hover {
  color: var(--accent);
  text-decoration: none;
}
.nav .menu > li > .chev {
  font-size: 10px;
  opacity: 0.55;
}

.nav .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--border);
  padding: var(--space-2) 0;
  min-width: 240px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
  display: none;
  z-index: 31;
}
.nav .menu > li:hover .dropdown,
.nav .menu > li:focus-within .dropdown,
.nav .menu > li.is-open .dropdown {
  display: block;
}
.nav .dropdown a {
  display: block;
  padding: 11px 20px;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.nav .dropdown a:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

.nav .cta {
  flex-shrink: 0;
}

.nav .burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav .burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.nav .burger span::before,
.nav .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ink);
}
.nav .burger span::before { top: -7px; }
.nav .burger span::after  { top:  7px; }


/* 9. Mobile nav overlay ----------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 40;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--pad-x-mobile);
  border-bottom: 1px solid var(--border);
}
.mobile-nav .head .close {
  font-size: 26px;
  line-height: 1;
  padding: 8px;
}
.mobile-nav .items {
  padding: var(--space-4) 0;
}
.mobile-nav .item {
  border-bottom: 1px solid var(--border);
}
.mobile-nav .item > a,
.mobile-nav .item > button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px var(--pad-x-mobile);
  font-size: 18px;
  font-weight: 500;
  text-align: left;
}
.mobile-nav .item.has-children > button::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
}
.mobile-nav .item.is-open > button::after { content: '−'; }
.mobile-nav .sub {
  display: none;
  background: var(--accent-soft);
  padding-bottom: var(--space-3);
}
.mobile-nav .item.is-open .sub { display: block; }
.mobile-nav .sub a {
  display: block;
  padding: 12px var(--pad-x-mobile) 12px calc(var(--pad-x-mobile) + var(--space-4));
  font-size: 16px;
  color: var(--ink);
}
.mobile-nav .foot {
  margin-top: auto;
  padding: var(--space-8) var(--pad-x-mobile);
}
.mobile-nav .foot .btn { width: 100%; justify-content: center; }


/* 10. Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 64px var(--pad-x) 28px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.site-footer .statement {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 84px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 48px;
  white-space: nowrap;
  color: var(--paper);
}
.site-footer .statement .accent-word {
  font-style: italic;
  color: var(--accent-light);
}
.site-footer .grid-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
}
.site-footer .col h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.5;
  margin-bottom: 14px;
}
.site-footer .col ul li {
  padding: 6px 0;
}
.site-footer .col a {
  color: var(--paper);
  opacity: 0.85;
  font-size: 14px;
}
.site-footer .col a:hover {
  opacity: 1;
  text-decoration: none;
  color: var(--accent-soft);
}
.site-footer .bottom {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  /* Was opacity:0.55 — replaced with explicit color so legal-links + email
     hit WCAG AA contrast (4.5:1) against the --ink background. */
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  gap: var(--space-4);
}
.site-footer .bottom a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.site-footer .bottom a:hover { color: #fff; text-decoration: underline; }


/* 11. Cookie banner --------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 480px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  z-index: 50;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
.cookie-banner.is-open { display: block; }
.cookie-banner p { color: inherit; }
.cookie-banner .actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.cookie-banner .btn-primary {
  padding: 10px 16px;
}
.cookie-banner .btn-decline {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}
.cookie-banner .btn-decline:hover {
  border-color: var(--paper);
  text-decoration: none;
}


/* 12. Page-specific ──────────────────────────────────────────────────────── */

/* — Home: hero ── */
.home-hero {
  padding: var(--space-14) var(--pad-x) var(--space-8);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-areas:
    "copy     portrait"
    "trust    portrait";
  /* Row × column gaps: tighter between copy and the trust strip below it. */
  gap: var(--space-8) var(--space-12);
  align-items: start;
}
.home-hero > .copy     { grid-area: copy; }
.home-hero > .portrait { grid-area: portrait; }
.home-hero > .home-trust { grid-area: trust; }
.home-hero h1.display {
  margin-bottom: var(--space-6);
  font-size: clamp(48px, 6vw, 72px);
}
.home-hero h1.display .accent {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.home-hero .lede {
  margin-bottom: var(--space-8);
  max-width: 540px;
}
.home-hero .cta-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.home-hero .portrait { position: relative; max-width: 380px; justify-self: end; width: 100%; }
.home-hero .portrait img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  background: var(--accent-soft);
}
.home-hero .portrait .placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--accent-soft);
  color: rgba(94, 42, 122, 0.18);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-4);
}
.home-hero .portrait .placeholder svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-hero .portrait .placeholder .label {
  position: relative;
  z-index: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
}
.home-hero .quote-card {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--card);
  padding: 16px 36px 30px 28px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.1);
  border-left: 3px solid var(--accent);
  max-width: 340px;
  margin: 0;
}
.home-hero .quote-card .slides {
  display: grid;
  grid-template-areas: "stack";
}
.home-hero .quote-card .slide {
  grid-area: stack;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}
.home-hero .quote-card .slide.is-active {
  opacity: 1;
  visibility: visible;
}
.home-hero .quote-card .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--border);
  font-size: 36px;
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-hero .quote-card .nav:hover,
.home-hero .quote-card .nav:focus-visible { color: var(--accent); }
.home-hero .quote-card .nav.prev { left: 2px; }
.home-hero .quote-card .nav.next { right: 4px; }
.home-hero .quote-card .dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
/* Touch targets ≥ 24×24 — Lighthouse a11y minimum. Visible dot is 8px;
   the surrounding button has invisible padding to grow the hit area. */
.home-hero .quote-card .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border);
  background-clip: content-box;
  padding: 8px;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.home-hero .quote-card .dot:hover { background: var(--muted); }
.home-hero .quote-card .dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}
.home-hero .quote-card blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}
.home-hero .quote-card blockquote p {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
}
.home-hero .quote-card figcaption {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-hero .quote-card .more {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

/* — Home: trust strip (Doctify badge + insurers) ──
   Nested inside the hero grid as `grid-area: trust` — sits in the left
   column below the CTAs on desktop, falls below the portrait on mobile
   (via grid-template-areas reorder in the .home-hero @media block).
   A single white card on a pale lavender band, with the Doctify
   excellence badge on the left and insurer recognition on the right. */
.home-trust {
  padding: var(--space-5);
  background: var(--accent-soft);
}
.home-trust .trust-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
}
.home-trust .trust-doctify {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.home-trust .trust-doctify .excellence-badge {
  display: block;
  line-height: 0;
}
.home-trust .trust-doctify .excellence-badge img {
  width: var(--badge-size, 170px);
  height: auto;
  display: block;
}
.home-trust .trust-insurers {
  text-align: center;
  /* Subtle vertical divider between badge and insurer info */
  border-left: 1px solid var(--border);
  padding-left: var(--space-5);
}
.home-trust .trust-insurers .eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
}
.home-trust .insurer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}
.home-trust .insurer {
  display: inline-flex;
  align-items: center;
  height: 28px;
  white-space: nowrap;
}
/* Real SVG logos from Wikipedia Commons (and WPA's own brand site). Each is
   normalised to a consistent visual height; aspect ratios vary so wider
   logos like AXA/Aviva render wider than the square symbol marks. */
.home-trust .insurer img {
  max-height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Per-brand height tweaks so all logos read at roughly the same optical
   size, regardless of how much padding the source SVG has built in. */
.home-trust .i-axa img      { max-height: 24px; }
.home-trust .i-aviva img    { max-height: 22px; }
.home-trust .i-bupa img     { max-height: 30px; }
.home-trust .i-vitality img { max-height: 28px; }
.home-trust .i-wpa img      { max-height: 26px; }

.home-trust .insurer-note {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: var(--space-3) 0 0;
}

@media (max-width: 768px) {
  .home-trust { padding: var(--space-4); }
  /* Mobile: stack the badge above the insurer info inside the same card.
     Drop the side border (used as a vertical divider on desktop) since
     the two sections are now stacked, not side-by-side. */
  .home-trust .trust-card {
    grid-template-columns: 1fr;
    padding: var(--space-4);
    gap: var(--space-4);
    justify-items: center;
  }
  .home-trust .trust-insurers {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
    width: 100%;
  }
}

/* About: badge fills one cell of the credentials grid */
.about-hero .creds .cred-badge {
  padding: 0;
  background: var(--ink);
  border-color: var(--ink);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-hero .creds .cred-badge .excellence-badge {
  display: block;
  line-height: 0;
  width: 100%;
  height: 100%;
}
.about-hero .creds .cred-badge .excellence-badge img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Contact: badge floats right inside the Direct block */
.contact-grid .direct-col .direct-block { overflow: hidden; }
.contact-grid .direct-col .direct-block .excellence-badge {
  float: right;
  width: 140px;
  margin: 0 0 var(--space-3) var(--space-4);
  display: block;
  line-height: 0;
}
.contact-grid .direct-col .direct-block .excellence-badge img {
  width: 100%;
  height: auto;
  display: block;
}

/* — Home: Doctify reviews block ── */
.home-doctify {
  padding: var(--space-14) var(--pad-x) 0;
}
.home-doctify > .head,
.home-doctify > .widget {
  background: var(--card);
  border: 1px solid var(--border);
}
.home-doctify > .widget { border-top: 0; padding: var(--space-6); }
.home-doctify > .head {
  padding: 20px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.home-doctify .badge {
  display: flex;
  align-items: center;
  gap: 16px;
}
.home-doctify .badge img { height: 48px; width: auto; display: block; }
.home-doctify .rating {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-doctify .rating .stars { color: var(--accent); letter-spacing: 2px; }
.home-doctify .count { margin-top: 2px; }
.home-doctify .all { font-size: var(--fs-small); color: var(--accent); font-weight: 600; }

/* — Home: Two joints ── */
/* — Home: common problems (illustrated grid) ──
   A row of clickable tiles — each shows an illustration above the
   condition (or category) name. Falls back to 2 columns on tablet,
   single column on mobile. */
.home-common {
  padding: var(--space-14) var(--pad-x) var(--space-10);
}
.home-common .eyebrow {
  display: block;
  margin: 0 0 var(--space-6);
}
.home-common .common-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.home-common .common-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  /* Note: tokens skip --space-7; use --space-8 (32px) top/bottom. */
  padding: var(--space-8) var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
  height: 100%;
}
.home-common .common-tile:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.home-common .common-tile .art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px;
  margin-bottom: var(--space-5);
}
.home-common .common-tile .art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.home-common .common-tile .name {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.home-common .common-tile:hover .name { color: var(--accent); }
.home-common .common-tile .body {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: justify;
  /* Slightly tighten word-spacing so justified text doesn't open up gaps
     on short last lines. */
  hyphens: auto;
}

/* — Home: shoulder + elbow joint cards ──
   Sits below the common-problems grid. Each card has the joint's
   silhouette art at the top, then a heading, short paragraph, list of
   4 representative conditions, and a "See all" link. */
.home-joints {
  padding: 0 var(--pad-x) var(--space-14);
}
.home-joints .eyebrow { display: block; margin: 0 0 var(--space-5); }
.home-joints .cards { gap: var(--space-6); }
.home-joints .joint .art {
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  min-height: 160px;
}
.home-joints .joint .art img {
  max-height: 140px;
  width: auto;
  display: block;
}
.home-joints .joint .body { padding: var(--space-8); }
.home-joints .joint .body h3 {
  font-size: 28px;
  margin: 0 0 var(--space-2);
}
.home-joints .joint .body p {
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
}
.home-joints .joint .list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.home-joints .joint .list li {
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.home-joints .joint .list li a,
.home-joints .joint .list li > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.home-joints .joint .list li a:hover { color: var(--accent); }
.home-joints .joint .list li .arrow {
  color: var(--accent);
  transition: transform .15s;
}
.home-joints .joint .list li a:hover .arrow { transform: translateX(3px); }
.home-joints .joint .see-all {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* — About ── */
.about-hero {
  padding: var(--space-14) var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.about-hero h1.display { font-size: clamp(40px, 5.5vw, 64px); margin-bottom: var(--space-6); }
.about-hero h1.display em { font-style: italic; font-weight: 400; }
.about-hero .prose p { font-size: 17px; line-height: 1.65; margin-bottom: var(--space-5); }
.about-hero .timeline {
  margin-top: var(--space-10);
  border-top: 2px solid var(--ink);
  padding-top: var(--space-6);
}
.about-hero .timeline h2 { color: var(--muted); margin-bottom: var(--space-4); }
.about-hero .timeline dl { margin: 0; }
.about-hero .timeline .row {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.about-hero .timeline dt {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
}
.about-hero .timeline dd {
  margin: 0;
  color: var(--ink);
}

.about-hero .aside { display: flex; flex-direction: column; gap: var(--space-4); max-width: 340px; justify-self: end; width: 100%; }
.about-hero .portrait { margin: 0; }
.about-hero .portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--accent-soft);
}
.about-hero .creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.about-hero .creds li {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 14px;
}
.about-hero .creds .title { font-size: 18px; }
.about-hero .creds .detail { margin-top: 4px; }

/* — List hero (used by Conditions, Treatments, Information lists) ── */
.list-hero {
  padding: var(--space-14) var(--pad-x) var(--space-8);
  border-bottom: 1px solid var(--border);
}
.list-hero .display {
  font-size: clamp(40px, 5.5vw, 64px);
  margin-bottom: var(--space-5);
  max-width: 880px;
}
.list-hero .display em { font-style: italic; font-weight: 400; color: var(--accent); }
.list-hero .lede { margin-bottom: var(--space-8); }
.list-hero .chips { display: flex; gap: 10px; flex-wrap: wrap; }
.list-hero .pill { cursor: pointer; }

/* — List rows (numbered table on Conditions/Treatments lists) ── */
/* List of conditions / treatments — two-column card grid on desktop,
   single column on mobile. Cards stack title + meta + summary + read-link
   vertically; the leading number sits top-left like a hanging numeral.
   Compact internal spacing (~40% shorter than a roomy default). */
.list-rows {
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  align-items: start;   /* cards size to their own content, no stretch */
}
.list-rows .row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-areas:
    "num  name    name"
    ".    summary summary"
    ".    kind    read";
  gap: 4px var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.list-rows .row:hover {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.list-rows .row .num {
  grid-area: num;
  font-size: 18px;
  line-height: 1.2;
  color: var(--accent);
  align-self: start;
}
.list-rows .row .name {
  grid-area: name;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--accent);   /* site purple */
  line-height: 1.15;
  align-self: start;
}
.list-rows .row .summary {
  grid-area: summary;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.list-rows .row .kind {
  grid-area: kind;
  font-size: 10.5px;
  margin: 0;
  color: var(--muted);
  align-self: end;
}
.list-rows .row .read {
  grid-area: read;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
  align-self: end;
  transition: transform .15s;
}
.list-rows .row:hover .read { transform: translateX(3px); }

/* — Single condition / treatment ── */
/* The hero is now just the breadcrumb + title (full-width).
   The lede + video live inside .single-main as .single-hero-body so they
   sit alongside the sticky sidenav (which starts at title-bottom level). */
.single-hero {
  padding: var(--space-10) var(--pad-x) var(--space-6);
}
.single-hero .breadcrumb {
  margin-bottom: var(--space-6);
}
.single-hero .breadcrumb a:hover { text-decoration: none; color: var(--accent); }
.single-hero .display {
  font-size: clamp(48px, 6vw, 76px);
  margin: 0;
}

/* Hero body sits inside .single-main: contains the lede + floating video.
   No clearfix on purpose — when the video is taller than the lede, it
   overflows past .single-hero-body and the following .single-body Q&A
   content wraps around the bottom of the video instead of sitting in
   dead whitespace. The float is cleared by .band siblings below. */
.single-hero-body { padding-bottom: var(--space-6); }
.single-hero-body .aside {
  float: right;
  /* 1/3 of the viewport, with a sensible cap so it doesn't get silly on
     ultra-wide displays. The left margin gives the lede breathing room. */
  width: 33vw;
  max-width: 720px;
  margin: 0 0 var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.single-hero-body .copy .lede { max-width: none; }
.single-hero-body .diagram { margin: 0; }
.single-hero-body .diagram img {
  display: block;
  width: 100%;
  background: var(--accent-soft);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.single-hero-body .diagram figcaption { margin-top: var(--space-2); }

.single-symptoms .grid-4 { gap: var(--space-6); }
.single-symptoms .symptom {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
}
.single-symptoms .symptom .num {
  color: var(--accent);
  font-size: 22px;
  flex-shrink: 0;
}
.single-symptoms .symptom .text { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

.single-diagnosis .prose p { font-size: 17px; line-height: 1.65; }

/* — Single condition / treatment body (Q&A) ── */
/* Rendered between the hero and the symptoms band on condition pages, and
   as the main body on treatment pages. Markdown `##` headings produce H2s
   styled as eyebrows — small uppercase purple — to match the look of the
   diagnosis section, so all Q&A questions on a page have one consistent
   visual treatment. */
.single-body {
  padding: var(--space-4) 0 var(--space-8);
}
/* Prose fills the full column width so text wraps next to the floated video
   AND continues at full width underneath it once the video clears.
   (Was capped at 760px, which left a dead band of whitespace to the right of
   the text below the video.) */
.single-body .prose { max-width: none; }
.single-body .prose h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);  /* 12px — matches .eyebrow */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
  margin: var(--space-8) 0 var(--space-3);
}
.single-body .prose h2:first-child { margin-top: 0; }
.single-body .prose h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-2);
}
.single-body .prose p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-4);
}
.single-body .prose ul,
.single-body .prose ol {
  margin: var(--space-3) 0 var(--space-5);
  padding-left: 1.4em;
  list-style: disc;
}
.single-body .prose ol { list-style: decimal; }
.single-body .prose li {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.single-body .prose li::marker { color: var(--accent); }
.single-body .prose a { color: var(--accent); }
.single-body .prose strong { color: var(--ink); font-weight: 600; }

.single-treatments .grid-2 { gap: var(--space-6); margin-top: var(--space-6); }
.single-treatments .treatment { position: relative; }
.single-treatments .treatment .kind {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 11px;
}
.single-treatments .treatment h3 {
  font-size: 26px;
  margin-bottom: var(--space-3);
  padding-right: 110px;
}
.single-treatments .treatment .body p { font-size: 15px; line-height: 1.6; }
/* Re-enable list styling for kirbytext lists inside treatment cards.
   The global `ul, ol { list-style: none }` reset strips them by default. */
.single-treatments .treatment .body ul,
.single-treatments .treatment .body ol {
  margin: var(--space-3) 0;
  padding-left: 1.4em;
  list-style: disc;
}
.single-treatments .treatment .body ol { list-style: decimal; }
.single-treatments .treatment .body li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.single-treatments .treatment .body li::marker { color: var(--accent); }

/* Recovery band — the closing call-to-action at the bottom of a condition
   or treatment page. Lives inside .single-main, so it spans the full
   main-column width (matching the symptoms / diagnosis / treatments bands
   above it). Deep purple background; inner .wrap caps text at a readable
   measure and centres it within the band.
   Specificity note: `.band.single-recovery` (0,2,0) matches `.band.purple`
   so it wins on source order. */
.band.single-recovery,
.single-with-sidenav .band.single-recovery {
  background: var(--accent);
  color: var(--paper);
  text-align: center;
  /* Two selectors: the second wins specificity (0,3,0) over the generic
     `.single-with-sidenav .band` rule (0,2,0) that strips horizontal padding. */
  padding: var(--space-10) var(--space-8);
}
.band.single-recovery .wrap {
  max-width: none;
}
.single-recovery .eyebrow {
  display: block;
  margin-bottom: var(--space-6);
}
/* Override the serif inherited from class="text serif" on the template —
   sans-serif reads lighter on a purple field. */
.single-recovery .text {
  text-align: left;
  max-width: none;
  font-family: var(--font-sans);
}
.single-recovery .text p {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  /* Slightly off-white reduces glare against deep purple — easier on the eye
     than #fafafa pure paper. */
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  margin: 0 0 var(--space-4);
}
.single-recovery .text p:last-child { margin-bottom: 0; }
.single-recovery .text strong { font-weight: 600; color: var(--paper); }
.single-recovery .text em { font-style: italic; }
/* Markdown `##` / `###` sub-headings in the recovery body (e.g. "When can
   I drive?") — small, bright pale-lilac, sans-serif. The colour is much
   paler than the brand `--accent-light` so it reads clearly against the
   deep-purple background (≥9:1 contrast vs. ~4.5:1 for the brand tone). */
.single-recovery .text h2,
.single-recovery .text h3 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #ecd9f7;
  line-height: 1.35;
  margin: var(--space-6) 0 var(--space-2);
}
.single-recovery .text h2:first-child,
.single-recovery .text h3:first-child { margin-top: 0; }
.single-recovery .cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  /* Generous breathing room between body copy and the CTA pair. */
  margin-top: var(--space-10);
  flex-wrap: wrap;
}

/* — Single page body + sticky sidenav ──
   Wraps the body sections of condition + treatment pages alongside a sticky
   sidenav of sibling pages (grouped by Shoulder / Elbow).
   Hero + recovery band stay full-bleed outside this grid. */
.single-with-sidenav {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  padding: 0 var(--pad-x);
  align-items: start;
}
.single-with-sidenav .single-main { min-width: 0; }

/* Bands inside the grid lose their full-bleed horizontal padding —
   the grid wrapper already provides --pad-x. Vertical rhythm tightens
   a touch too since the column is narrower than full-bleed. */
.single-with-sidenav .band { padding-left: 0; padding-right: 0; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.single-with-sidenav .band:first-child { padding-top: var(--space-6); }
/* Bands clear the floated hero video — stops it from intruding into
   coloured sections when the lede + Q&A combined are shorter than the video. */
.single-with-sidenav .single-main > .band { clear: both; }
/* Soft (tinted) band: pad the inside so the background isn't flush with
   the column edge — looks like a contained card rather than a slab. */
.single-with-sidenav .band.soft { padding: var(--space-6) var(--space-6); }

/* — Side nav (related conditions / treatments) ── */
.side-nav-related {
  position: sticky;
  /* Clear the sticky site nav (~80px) plus breathing room.
     Matches --nav-clear used elsewhere; tweak if the nav height changes. */
  top: 96px;
  font-family: var(--font-sans);
}
.side-nav-related .back {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-5);
  font-weight: 600;
}
.side-nav-related .back:hover { color: var(--accent); text-decoration: none; }
.side-nav-related .group { margin-bottom: var(--space-5); }
.side-nav-related .group h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--space-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.side-nav-related ul { list-style: none; margin: 0; padding: 0; }
.side-nav-related li { margin: 0; }
.side-nav-related li a {
  display: block;
  padding: 7px 10px 7px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.side-nav-related li a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
  text-decoration: none;
}
.side-nav-related li a.is-current {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* Toggle, close button and backdrop are mobile-only. Hidden on desktop. */
.side-nav-toggle,
.side-nav-close,
.side-nav-backdrop { display: none; }

/* — Treatment single ── */
.single-hero-body .meta-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* — Appointments ── */
.appts-hero {
  padding: var(--space-14) var(--pad-x) var(--space-8);
}
.appts-hero .head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  align-items: end;
}
.appts-hero .display {
  font-size: clamp(40px, 5vw, 64px);
}
.appts-hero .display em { font-style: italic; font-weight: 400; color: var(--accent); }
.appts-hero .lede { font-size: 15px; }

.appts-routes {
  padding: var(--space-6) var(--pad-x) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
/* When nested inside the sidenav wrapper the outer column already provides
   horizontal padding; strip the section's own to avoid double-padding. */
.single-with-sidenav .appts-routes,
.single-with-sidenav .appts-process { padding-left: 0; padding-right: 0; }
.appts-routes .route { padding: var(--space-8); color: var(--paper); }
.appts-routes .route-nhs    { background: var(--ink); }
.appts-routes .route-private { background: var(--accent); }
.appts-routes .route h2 {
  font-size: 32px;
  letter-spacing: -0.015em;
  margin: var(--space-3) 0;
  color: var(--paper);
}
.appts-routes .route p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
  color: var(--paper);
  margin-bottom: var(--space-5);
}
.appts-routes .clinics { margin: 0; padding: 0; }
.appts-routes .clinics li {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 14px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.appts-routes .clinics .name { font-size: 18px; }
.appts-routes .clinics .addr { font-size: 12px; opacity: 0.7; margin-top: 2px; color: var(--paper); }
.appts-routes .clinics .tel { font-size: 12px; opacity: 0.9; color: var(--paper); font-variant-numeric: tabular-nums; }
.appts-routes .cta {
  margin-top: var(--space-5);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  display: inline-block;
}

.appts-process {
  padding: var(--space-10) var(--pad-x);
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.appts-process h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: var(--space-8);
}
.appts-process .steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.appts-process .step {
  padding-right: var(--space-5);
}
.appts-process .step + .step {
  padding-left: var(--space-5);
  border-left: 1px solid var(--border);
}
.appts-process .step .num {
  font-size: 26px;
  color: var(--accent);
  display: block;
}
.appts-process .step h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  margin: var(--space-2) 0 var(--space-1);
  line-height: 1.3;
}
.appts-process .step p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* — Contact ── */
.contact-hero {
  padding: var(--space-14) var(--pad-x) var(--space-6);
}
.contact-hero .display {
  font-size: clamp(48px, 6vw, 72px);
  letter-spacing: -0.03em;
}
.contact-hero .display em { font-style: italic; font-weight: 400; color: var(--accent); }
.contact-grid {
  padding: var(--space-6) var(--pad-x) var(--space-14);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.contact-grid .form-col .form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-grid .form-col .form .eyebrow { margin-bottom: 0; }
.contact-grid .form-success { padding: var(--space-8); }
.contact-grid .form-success h2 { font-size: 32px; margin: var(--space-3) 0; }
.contact-grid .form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-grid .form .field label,
.contact-grid .form .field legend {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.contact-grid .form .field legend { padding: 0; margin-bottom: 6px; }
.contact-grid .form .field input,
.contact-grid .form .field textarea {
  border: 1px solid var(--border);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 0;
}
.contact-grid .form .field input:focus,
.contact-grid .form .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-grid .form .field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.contact-grid .form .field.has-error input,
.contact-grid .form .field.has-error textarea { border-color: #c0392b; }
.contact-grid .form .field .msg { font-size: 12px; color: #c0392b; }
.contact-grid .form .form-error {
  background: #fbecea;
  border-left: 3px solid #c0392b;
  padding: 12px 16px;
  font-size: 14px;
  color: #7a2922;
}
.contact-grid .form .cats { display: flex; flex-wrap: wrap; gap: 6px; }
.contact-grid .form .cat {
  cursor: pointer;
}
.contact-grid .form .cat input { position: absolute; opacity: 0; pointer-events: none; }
.contact-grid .form .cat span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.contact-grid .form .cat.is-on span,
.contact-grid .form .cat input:checked + span { border-color: var(--accent); color: var(--accent); }
.contact-grid .form button[type="submit"] { align-self: flex-start; margin-top: var(--space-2); }
.contact-grid .form-disclaimer { margin-top: var(--space-5); line-height: 1.55; }
.contact-grid .direct-col .block {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  margin-bottom: var(--space-8);
}
.contact-grid .direct-col .phone { font-size: 28px; letter-spacing: -0.01em; }
.contact-grid .direct-col .email { font-size: 22px; color: var(--accent); margin-top: 4px; }
.contact-grid .direct-col .email a { color: inherit; }
.contact-grid .direct-col .clinics { margin: 0; padding: 0; }
.contact-grid .direct-col .clinics li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.contact-grid .direct-col .clinics .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
}
.contact-grid .direct-col .clinics .name { font-size: 20px; letter-spacing: -0.01em; }
.contact-grid .direct-col .clinics .kind { font-size: 11px; margin: 0; }
.contact-grid .direct-col .clinics .addr { margin: 4px 0 2px; }
.contact-grid .direct-col .clinics .tel {
  font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* — Video embed (Vimeo / YouTube responsive 16:9) ── */
.video-section {
  padding: var(--space-10) var(--pad-x);
  background: var(--ink);
}
.video-embed {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
/* Lite video (click-to-load placeholder; iframe is swapped in on click).
   Branded purple gradient sits *behind* the thumbnail so the initial frame
   (and any cache-miss / image-load gap) looks intentional, not broken. */
.lite-video.video-embed {
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 30% 30%, rgba(149, 88, 196, 0.45), transparent 70%),
    linear-gradient(135deg, #2a1438 0%, #1a0f23 100%);
}
.lite-video-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lite-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.lite-video-btn:hover .lite-video-thumb,
.lite-video-btn:focus-visible .lite-video-thumb { transform: scale(1.03); }
.lite-video-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
  transition: transform 200ms ease;
}
.lite-video-btn:hover .lite-video-play,
.lite-video-btn:focus-visible .lite-video-play { transform: scale(1.08); }
.lite-video-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* When the video lives in a hero aside, drop the outer max-width + shadow */
.single-hero-body .aside .video-embed {
  max-width: none;
  box-shadow: none;
  margin: 0;
}

/* — Generic prose (kirbytext output anywhere) ── */
.prose p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 var(--space-5); }
.prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.015em;
  margin: var(--space-10) 0 var(--space-4);
  line-height: 1.2;
}
.prose h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: var(--space-8) 0 var(--space-3);
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul li, .prose ol li {
  padding: 4px 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--accent); font-family: var(--font-serif); font-style: italic; }
.prose blockquote {
  margin: var(--space-8) 0;
  padding-left: 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}
.prose blockquote p { color: var(--ink); font-size: inherit; line-height: inherit; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }
.prose img { margin: var(--space-6) 0; max-width: 100%; height: auto; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

/* — Info article ── */
.info-hero {
  padding: var(--space-12) var(--pad-x) var(--space-5);
}
.info-hero .breadcrumb { margin-bottom: var(--space-4); }

/* HTML sitemap (page-tree index at /sitemap/) */
.sitemap-section { margin-top: var(--space-10); }
.sitemap-section h2 { margin-bottom: var(--space-3); }
.sitemap-section h2 a { color: inherit; text-decoration: none; }
.sitemap-section h2 a:hover { color: var(--accent); }
.sitemap-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--space-8); }
.sitemap-list li { padding: 4px 0; break-inside: avoid; }
@media (max-width: 640px) {
  .sitemap-list { columns: 1; }
}

/* Universal breadcrumbs snippet (mirrors JSON-LD BreadcrumbList).
   Used by info template; condition/post still use their custom inline ones. */
.breadcrumbs { margin-bottom: var(--space-4); font-size: var(--fs-meta); color: var(--muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: '/'; opacity: 0.5; margin: 0 var(--space-2); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* Footer legal-links row */
.site-footer .bottom .legal-links { display: inline-flex; gap: var(--space-3); align-items: center; }
.site-footer .bottom .legal-links a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer .bottom .legal-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 768px) {
  .site-footer .bottom { flex-wrap: wrap; gap: var(--space-3); }
  .site-footer .bottom .legal-links { width: 100%; justify-content: flex-start; }
}
.info-hero .head {
  /* Single column — H1 sits above the lede instead of the lede being
     pushed off to a floating column on the right. */
  display: block;
}
.info-hero .lede {
  margin-top: var(--space-4);
  max-width: 720px;
}
.info-hero .display { font-size: clamp(48px, 6vw, 72px); line-height: 0.98; }
.info-hero .lede { font-size: 14px; }

.info-body {
  padding: var(--space-6) var(--pad-x) var(--space-14);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
}
/* The sidebar column wraps the sidenav + "Helpful next" — both stick to
   the top of the viewport as a single unit while you scroll the article,
   so the "Helpful next" links stay attached to the sidenav and don't slide
   away under it. */
.info-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: 96px;
  align-self: start;   /* don't stretch — sticky needs a bounded box height */
}
/* The sidenav nested inside .info-side gives up its own sticky positioning,
   since the wrapper handles it. */
.info-side > .side-nav-related { position: static; }
/* "Helpful next" related-links block under the sidenav. */
.info-related .eyebrow { display: block; margin-bottom: 10px; }
.info-related ul { list-style: none; margin: 0; padding: 0; }
.info-related li { margin: 0; }
.info-related li a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .12s ease;
}
.info-related li a:hover { color: var(--accent); }
.info-related li:last-child a { border-bottom: 0; }
.info-body .prose { max-width: 720px; }
.info-body .prose h2,
.info-body .prose h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: var(--space-10) 0 var(--space-4);
  line-height: 1.2;
}
.info-body .prose h2:first-child,
.info-body .prose h3:first-child { margin-top: 0; }
.info-body .prose p { font-size: 16px; line-height: 1.7; margin: 0 0 var(--space-5); color: var(--ink-soft); }
.info-body .prose ul, .info-body .prose ol { margin: 0 0 var(--space-5); padding-left: 0; list-style: none; }
/* Bullets/numbers are absolutely positioned in the left padding area so
   the content flows as a single inline stream — inline `<strong>` /
   `<em>` / `<a>` tags don't get split into separate grid cells (which
   was breaking the bulleted fees list on the private-clinics page). */
.info-body .prose ul li,
.info-body .prose ol li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.info-body .prose ul li::before {
  content: '•';
  color: var(--accent);
  position: absolute;
  left: 8px;
  top: 12px;
  font-size: 18px;
  line-height: 1.55;
}
.info-body .prose ol { counter-reset: list; }
.info-body .prose ol li { counter-increment: list; }
.info-body .prose ol li::before {
  content: counter(list, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  position: absolute;
  left: 0;
  top: 12px;
}
.info-body .prose blockquote {
  margin: var(--space-8) 0;
  padding-left: 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}

/* Patient-type cards. Used on the "Preparing for surgery" page to lay out
   the three booking-route descriptions (Insured / Self-funding / NHS) as a
   three-column grid of white cards on lavender. Stacks to a single column
   on mobile. */
.info-body .prose .patient-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--accent-soft);
  margin: var(--space-5) 0 var(--space-8);
}
.info-body .prose .patient-cards .patient-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: var(--space-5);
}
.info-body .prose .patient-cards .patient-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}
.info-body .prose .patient-cards .patient-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 768px) {
  .info-body .prose .patient-cards { grid-template-columns: 1fr; }
}

/* Icon + heading + body columns. Used on the NHS / Private clinic pages to
   pair a small black-and-white icon with a sub-heading and short description
   (taken from the live site's blurb modules). */
.info-body .prose .icon-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin: var(--space-8) 0;
}
.info-body .prose .icon-cols figure {
  margin: 0;
  padding: var(--space-5);
  background: var(--accent-soft);
  text-align: center;
}
.info-body .prose .icon-cols figure img {
  width: 64px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-4);
  /* Render the original black silhouettes — earlier I'd tinted them purple
     via filter, but computer.png ships without an alpha channel so the
     filter painted the full rectangle. Keeping them black matches the
     live site anyway. */
}
.info-body .prose .icon-cols figure h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
}
.info-body .prose .icon-cols figure p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 var(--space-2);
  color: var(--ink-soft);
  text-align: left;
}
.info-body .prose .icon-cols figure p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .info-body .prose .icon-cols {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.info-callout {
  margin-top: var(--space-10);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  padding: 22px;
}
.info-callout .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.info-callout .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); display: inline-block; }
.info-callout p { font-size: 15px; line-height: 1.6; margin: var(--space-2) 0 0; }
.info-callout a { color: var(--ink); }

/* — Blog index ── */
.blog-hero {
  padding: var(--space-14) var(--pad-x) var(--space-6);
}
.blog-hero .display { font-size: clamp(48px, 6vw, 64px); }
.blog-hero .display em { font-style: italic; font-weight: 400; color: var(--accent); }

.blog-featured { padding: var(--space-6) var(--pad-x); }
.blog-featured .card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  color: var(--ink);
}
.blog-featured .card:hover { text-decoration: none; }
.blog-featured .art {
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.blog-featured .art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.blog-featured .art .placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-soft), rgba(94,42,122,0.08)); }
.blog-featured .copy { padding: var(--space-8); }
.blog-featured .copy h2 { font-size: 36px; margin-bottom: var(--space-3); line-height: 1.1; }
.blog-featured .copy p { color: var(--ink-soft); margin-bottom: var(--space-5); }
.blog-featured .meta-row { display: flex; gap: 8px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.blog-featured .read { margin-top: var(--space-4); font-weight: 600; font-size: 13px; }

.blog-rest .row {
  grid-template-columns: 60px 1.4fr 1.6fr 100px 80px;
}
.blog-rest .row .title-block { display: flex; flex-direction: column; gap: 4px; }
.blog-rest .row .title-block .tag { margin: 0; font-size: 11px; }
.blog-rest .row .title-block .name { font-size: 22px; }
.blog-rest .row .date { margin: 0; font-size: 11px; }

/* — Single post ── */
.post-head {
  padding: var(--space-14) var(--pad-x) var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}
.post-head .breadcrumb { margin-bottom: 14px; }
.post-head .display { font-size: clamp(40px, 5.5vw, 64px); line-height: 1.05; margin-bottom: 18px; max-width: 980px; }
.post-head .meta-row { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-bottom: var(--space-8); }
.post-hero { margin: 0; }
.post-hero img { width: 100%; height: auto; background: var(--accent-soft); aspect-ratio: 16 / 9; object-fit: cover; }
.post-video { margin: 0; }
.post-video .video-embed { max-width: none; box-shadow: none; margin: 0; }

.post-body {
  padding: var(--space-8) var(--pad-x) var(--space-14);
  max-width: 760px;
  margin: 0 auto;
}
.post-body .lede {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-8);
  color: var(--ink-soft);
}
.post-body .prose p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 var(--space-5); }
.post-body .prose h2,
.post-body .prose h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: var(--space-10) 0 var(--space-4);
  line-height: 1.2;
}
.post-body .prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 22px;
  margin: var(--space-8) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}
.post-body .prose ul, .post-body .prose ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.post-body .prose ul li, .post-body .prose ol li { padding: 6px 0; }
.post-cta {
  margin-top: var(--space-10);
  padding: 24px;
  background: var(--accent);
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.post-cta .serif { font-family: var(--font-serif); font-size: 24px; letter-spacing: -0.01em; margin-top: 4px; }
.post-cta .btn { background: var(--paper); color: var(--accent); font-weight: 700; }

/* — Book page + placeholder ── */
.book-hero { padding: var(--space-14) var(--pad-x) var(--space-6); }
.book-hero .display { font-size: clamp(48px, 6vw, 64px); margin-bottom: 16px; }
.book-hero .display em { font-style: italic; font-weight: 400; color: var(--accent); }
.book-hero .lede { max-width: 720px; }
.book-frame {
  margin: 0 var(--pad-x) var(--space-14);
  background: var(--card);
  border: 1px solid var(--border);
}

/* — Booking widget ── */
.booking { display: flex; flex-direction: column; gap: 0; }
.booking .booking-step {
  border: 0;
  border-top: 1px solid var(--border);
  padding: var(--space-8);
  margin: 0;
}
.booking .booking-step:first-child { border-top: 0; }
.booking .booking-step legend {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: 0;
  margin-bottom: var(--space-2);
}
.booking .step-num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 22px; color: var(--accent);
}
.booking .step-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -0.015em;
}
.booking .step-help { margin-bottom: var(--space-6); }

/* Slot picker — calendar on the left, times on the right (desktop) */
.booking .slot-picker {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-6);
}
.booking .slot-picker .booking-step {
  border-top: 0;
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.booking .slot-picker .slot-picker-cal { border-right: 1px solid var(--border); }

/* Calendar — paged by month, prev/next arrows flip between months */
.booking-cal { display: flex; flex-direction: column; gap: var(--space-3); }
.booking-cal .cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.booking-cal .cal-month {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.booking-cal .cal-arrow {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s, color .15s;
}
.booking-cal .cal-arrow:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.booking-cal .cal-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.booking-cal .cal-month-pane { display: none; flex-direction: column; gap: var(--space-3); }
.booking-cal .cal-month-pane.is-active { display: flex; }
.booking-cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.booking-cal .day {
  display: flex; align-items: baseline; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 2px;
  text-align: center;
  font-family: var(--font-sans);
  color: var(--muted);
  cursor: default;
  gap: 4px;
  min-height: 32px;
}
.booking-cal .day .dow { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.booking-cal .day .dom { font-family: var(--font-serif); font-size: 15px; line-height: 1; }
.booking-cal .day .mo { display: none; } /* the month header above already shows it */

.booking-cal .day.is-bookable {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.booking-cal .day.is-bookable:hover {
  background: var(--card);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.booking-cal .day.is-bookable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.booking-cal .day.is-bookable.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.booking-cal .day.is-bookable.is-selected .dom { color: var(--paper); }

.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  max-width: 640px;
  min-height: 44px;
}
.time-empty { margin: 0 0 var(--space-3); font-size: 13px; }
.time-slot {
  padding: 12px 0;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.time-slot:hover { border-color: var(--accent); color: var(--accent); }
.time-slot.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* Form */
.booking .form-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-4);
}
.booking .form-grid .field { display: flex; flex-direction: column; gap: 6px; grid-column: span 8; }
.booking .form-grid .width-1-1 { grid-column: span 8; }
.booking .form-grid .width-1-2 { grid-column: span 4; }
.booking .form-grid .width-3-8 { grid-column: span 3; }
.booking .form-grid .width-3-4 { grid-column: span 6; }
.booking .form-grid .width-1-4 { grid-column: span 2; }
.booking .field .req { color: var(--accent); margin-left: 2px; }
.booking .field .muted { color: var(--muted); font-weight: 400; }
.booking .field label,
.booking .field legend {
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.booking .field input,
.booking .field select,
.booking .field textarea {
  border: 1px solid var(--border);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 0;
}
.booking .field select { padding-right: 24px; }
.booking .field .dob-row {
  display: grid;
  grid-template-columns: 70px 1fr 90px;
  gap: 8px;
}
.booking .field .dob-row input,
.booking .field .dob-row select { width: 100%; }
.booking .field input:focus,
.booking .field select:focus,
.booking .field textarea:focus { outline: none; border-color: var(--accent); }
.booking .field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.booking .field.has-error input,
.booking .field.has-error select,
.booking .field.has-error textarea { border-color: #c0392b; }
.booking .field-error,
.booking .form-error { color: #c0392b; font-size: 13px; margin-top: 8px; display: block; }
.booking .funding-block {
  border: 1px solid var(--border);
  padding: var(--space-4);
}
.booking .funding-block legend { padding: 0 6px; }
.booking .radio {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.booking .radio input { accent-color: var(--accent); }
.booking .pricing-notice {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}
.booking.is-insured .pricing-notice { display: none; }
.booking .pricing-notice p {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink);
}
.booking button[type="submit"] { margin-top: var(--space-4); align-self: flex-start; }

/* Success state */
.booking-success {
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.booking-success h2 { font-size: clamp(28px, 3.5vw, 40px); margin: var(--space-3) 0 var(--space-5); }
.booking-success p { max-width: 56ch; margin: 0 auto var(--space-3); }

.booking-placeholder { padding: 0; }
.booking-placeholder .head {
  padding: var(--space-8);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.booking-placeholder .head h2 { font-size: 28px; margin: var(--space-1) 0 0; }
.booking-placeholder .cal {
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.booking-placeholder .cal .days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.booking-placeholder .cal .day {
  background: var(--accent-soft);
  padding: 14px;
  text-align: center;
}
.booking-placeholder .cal .day .dow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.booking-placeholder .cal .day .dom { font-family: var(--font-serif); font-size: 28px; line-height: 1.1; }
.booking-placeholder .cal .day .mo { font-size: 11px; color: var(--muted); }
.booking-placeholder .cal .slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: start;
}
.booking-placeholder .cal .slot {
  text-align: center;
  border: 1px solid var(--border);
  padding: 10px 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.booking-placeholder .foot {
  padding: 14px var(--space-8);
  border-top: 1px solid var(--border);
  background: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* 13. Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --pad-x: 28px; }
  .site-footer .statement { font-size: clamp(36px, 7vw, 64px); white-space: normal; }
  .site-footer .grid-cols { grid-template-columns: repeat(2, 1fr); }
  .grid-hero { grid-template-columns: 1fr; }
  .grid-sidebar { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .info-strip {
    font-size: 11px;
    padding: 7px var(--pad-x);
  }
  .info-strip .id .role,
  .info-strip .contact .email,
  .info-strip .contact .sep { display: none; }

  .nav .menu { display: none; }
  .nav .burger { display: inline-flex; }
  .nav .cta { padding: 10px 14px; font-size: 12px; }
  .nav .logo img { height: 42px; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .site-footer { padding: 48px var(--pad-x) 24px; }
  .site-footer .statement { font-size: 40px; }
  .site-footer .grid-cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .site-footer .col { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: var(--space-4); }
  .site-footer .bottom { flex-direction: column; gap: 8px; }

  .band { padding: var(--space-12) var(--pad-x); }

  h1 { font-size: clamp(36px, 8vw, 48px); }
  h2 { font-size: clamp(28px, 6vw, 36px); }
  .display { font-size: clamp(40px, 9vw, 56px); }

  .home-hero {
    grid-template-columns: 1fr;
    /* Reorder areas on mobile so the trust strip drops below the portrait. */
    grid-template-areas:
      "copy"
      "portrait"
      "trust";
    padding: var(--space-10) var(--pad-x) var(--space-6);
    gap: var(--space-6);
  }
  .home-hero h1.display { font-size: clamp(40px, 10vw, 56px); }
  /* Portrait centres in the single column on mobile instead of right-aligning
     (which is the desktop grid behaviour from `justify-self: end`). */
  .home-hero .portrait { justify-self: center; margin: 0 auto; }
  .home-hero .quote-card { position: static; max-width: none; margin-top: var(--space-4); }
  .home-numbers .num-badge .excellence-badge { width: 120px; }
  .home-doctify .head { padding: 16px 20px; }
  .home-doctify .badge { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Common problems: stack as a single column on mobile so the body text
     has room to breathe and tiles don't get cramped side-by-side. */
  .home-common { padding: var(--space-10) var(--pad-x-mobile); }
  .home-common .common-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .home-common .common-tile { padding: var(--space-6) var(--space-5); }
  .home-common .common-tile .art { height: 110px; margin-bottom: var(--space-4); }
  .home-common .common-tile .name { font-size: 20px; }

  /* Joint cards on mobile: stack single column with mobile padding. */
  .home-joints { padding: 0 var(--pad-x-mobile) var(--space-10); }
  .home-joints .cards { grid-template-columns: 1fr; }
  .home-joints .joint .body { padding: var(--space-6); }

  .about-hero { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-10) var(--pad-x); }
  .about-hero .aside { order: -1; }
  .about-hero .creds { grid-template-columns: 1fr; }

  .list-hero { padding: var(--space-10) var(--pad-x) var(--space-6); }
  /* Mobile list: stack cards in a single column, edge-hug horizontal pad. */
  .list-rows {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: 0 var(--pad-x-mobile);
  }
  .list-rows .row {
    grid-template-columns: 32px 1fr auto;
    padding: var(--space-3) var(--space-4);
  }
  .list-rows .row .num { font-size: 18px; }
  .list-rows .row .name { font-size: 21px; }

  /* Hero body on mobile: stack video on top, lede below. DOM order is
     aside → copy (no H1 here — the H1 lives in .single-hero, above). */
  .single-hero-body {
    display: flex;
    flex-direction: column;
    padding: 0 var(--pad-x-mobile) var(--space-6);
  }
  .single-hero-body .aside {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 var(--space-5) 0;
    order: 1;
  }
  .single-hero-body .copy { order: 2; }
  .single-symptoms .grid-4 { grid-template-columns: 1fr 1fr; }
  .single-treatments .grid-2 { grid-template-columns: 1fr; }

  /* Sidenav on mobile: collapses to a left-slide-out drawer.
     Toggle button + backdrop become visible; panel goes off-screen until
     opened via JS (which toggles .is-open on .side-nav-related). */
  .single-with-sidenav {
    display: block;          /* drop the grid */
    padding: 0;
  }
  /* Sticky sidenav — burger floats on its own, no full-width strip behind it.
     The wrapper passes the sticky behaviour through (so the toggle stays
     pinned), but its only visible footprint is the toggle button itself
     (which has its own paper background + border).
     z-index 31 sits one above the main nav (z-index 30), so the open drawer
     panel (z-index 60 inside this stacking context) renders OVER the nav
     instead of behind it. */
  .info-side,
  .single-with-sidenav > .side-nav-related {
    position: sticky;
    top: 88px;
    z-index: 31;
    /* No background — the wrapper is invisible; content scrolls behind it,
       only the toggle button is visible. */
  }
  /* Condition / treatment pages: the bare .side-nav-related sticks, needs
     horizontal padding so the toggle sits indented from the page edge. */
  .single-with-sidenav > .side-nav-related {
    padding: 0 var(--pad-x-mobile);
    margin-bottom: var(--space-4);
  }
  /* Appointments / info pages: parent .info-side is the sticky wrapper, so
     the inner .side-nav-related is static. .info-side supplies the padding. */
  .info-side > .side-nav-related {
    position: static;
    display: block;
    padding: 0;
    margin-bottom: var(--space-4);
  }
  /* Soft shadow on the toggle button to set it apart from content scrolling
     beneath when the wrapper has no background of its own. */
  .side-nav-toggle {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }

  /* Burger-style toggle button — visually consistent in both layout shapes.
     Sticky behaviour comes from the parent wrapper above, not from here. */
  .side-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    border-radius: 0;
    transition: border-color .12s, color .12s;
  }
  .side-nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
  /* Three horizontal bars rendered as stacked linear-gradients. */
  .side-nav-toggle .burger {
    display: inline-block;
    width: 18px;
    height: 12px;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 18px 2px;
    background-position: 0 0, 0 5px, 0 10px;
    background-repeat: no-repeat;
  }

  /* Backdrop dim layer behind the open drawer. */
  .side-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
  }
  .side-nav-related.is-open .side-nav-backdrop { display: block; }

  /* The drawer itself: slides in from the left when .is-open. */
  .side-nav-panel {
    position: fixed;
    inset: 0 auto 0 0;            /* top, right=auto, bottom, left=0 */
    width: 85%;
    max-width: 320px;
    background: var(--paper);
    z-index: 60;
    overflow-y: auto;
    padding: var(--space-8) var(--space-6) var(--space-6);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .side-nav-related.is-open .side-nav-panel { transform: translateX(0); }

  .side-nav-close {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
  .side-nav-close:hover { color: var(--accent); }

  /* "Helpful next" links relocated into the drawer by site.js on mobile.
     Separated from the main sidenav list with a subtle divider. */
  .side-nav-panel .info-related {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
  }
  .side-nav-panel .info-related .eyebrow {
    color: var(--muted);
    margin-bottom: var(--space-3);
  }

  /* Bands on mobile inside .single-with-sidenav: restore horizontal padding
     since the grid wrapper no longer provides it. */
  .single-with-sidenav .band { padding-left: var(--pad-x-mobile); padding-right: var(--pad-x-mobile); }
  .single-with-sidenav .band.soft { padding: var(--space-6) var(--pad-x-mobile); }

  .appts-hero .head { grid-template-columns: 1fr; gap: var(--space-5); }
  .appts-routes { grid-template-columns: 1fr; }
  .appts-process .steps { grid-template-columns: 1fr 1fr; }
  .appts-process .step { padding: var(--space-4); border-left: 0 !important; border-top: 1px solid var(--border); }
  .appts-process .step:nth-child(1), .appts-process .step:nth-child(2) { border-top: 0; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  .info-hero .head { grid-template-columns: 1fr; gap: var(--space-4); }
  /* Info article on mobile: stack as a single column. The sidenav uses the
     same burger drawer pattern as condition/treatment pages — its mobile
     CSS handles the off-screen panel transform automatically. */
  .info-body { grid-template-columns: 1fr; padding: var(--space-4) 0 var(--space-10); }
  .info-side { padding: 0 var(--pad-x-mobile); }
  .info-body .prose { padding: 0 var(--pad-x-mobile); }

  .blog-featured .card { grid-template-columns: 1fr; }
  .blog-featured .copy { padding: var(--space-6); }
  .blog-rest .row {
    grid-template-columns: 40px 1fr;
  }
  .blog-rest .row .num { grid-row: span 3; }
  .blog-rest .row .title-block,
  .blog-rest .row .summary,
  .blog-rest .row .date,
  .blog-rest .row .read { grid-column: 2; }

  .post-body .lede { font-size: 20px; }
  .post-cta { flex-direction: column; align-items: stretch; }

  .booking-placeholder .head { flex-direction: column; align-items: stretch; }
  .booking-placeholder .cal { grid-template-columns: 1fr; }
  .booking-placeholder .cal .days { grid-template-columns: repeat(5, 1fr); }

  .booking .slot-picker { grid-template-columns: 1fr; gap: 0; }
  .booking .slot-picker .slot-picker-cal { border-right: 0; border-bottom: 1px solid var(--border); }
  .booking .slot-picker .booking-step { padding: var(--space-6) var(--space-5) var(--space-5); }
  .booking-cal .days { gap: 3px; }
  .booking-cal .day { padding: 4px 1px; min-height: 32px; gap: 3px; }
  .booking-cal .day .dow { font-size: 9px; }
  .booking-cal .day .dom { font-size: 13px; }
  .time-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .time-slot { padding: 10px 0; font-size: 13px; }
  .booking .form-grid .width-1-2,
  .booking .form-grid .width-3-8,
  .booking .form-grid .width-3-4,
  .booking .form-grid .width-1-4 { grid-column: span 8; }
}

@media (max-width: 480px) {
  .info-strip .id .name { font-size: 13px; }
  .info-strip .contact .phone { font-size: 11px; }
}