/*
 * public/assets/css/main.v4.css
 *
 * v4 (17 Aug 2026) — adds .hero-figure + the AI-image disclosure caption.
 * v3 — join/recruitment parity pass against
 * mobilephysiotherapist.co.uk: adds the physio site's fluid type scale
 * (--text-sm/base/lg) so the trust ribbon renders at the reference's size
 * instead of a flattened 16px, and the .cta-block--aside sidebar variant
 * used by the job pages' new <aside>. v2 kept verbatim for rollback.
 *
 * Design-parity pass (docs/design-parity-brief.md) — brings the site up
 * to the mobilephysiotherapist.co.uk reference's visual standard: trust
 * ribbon, photo hero, kicker labels, alternating section bands, photo
 * cards, deeper shadows. Superset of main.v1.css (kept for reference /
 * rollback) — see app/views/layout.php + config/site.php's css_version
 * for the version switch, and public/.htaccess for why the filename has
 * to change (long-cache immutable headers on /assets/).
 *
 * Palette/typography tokens unchanged from v1 (CLAUDE.md "Confirmed
 * decisions" / config/site.php `colours`): deep teal, soft sage, warm
 * coral, pale teal, off-white, charcoal. Serif headings (Georgia stack),
 * sans body.
 */

:root {
  /* Height of the sticky site header. Anything else that sticks or gets
     scrolled to has to clear it, or it ends up underneath: the provider
     sidebar was pinning at 1.5rem from the top and sliding beneath the
     header, which cut the "Book with ..." heading in half (Nick,
     21 Aug 2026, with a screenshot). */
  --header-height: 4.5rem;
  --colour-primary: #167D7F; /* deep teal */
  --colour-deep: #126668;    /* darker teal for hover states */
  --colour-sage: #78A890;    /* soft sage */
  --colour-accent: #E98267;  /* warm coral */
  --colour-ink: #293738;     /* charcoal */
  --colour-paper: #F7F8F4;   /* off-white page background */
  --colour-mist: #E8F3F1;    /* pale teal tint */
  --colour-charcoal-deep: #1E2A2B; /* darker charcoal for the trust ribbon / dark bands */

  --colour-surface: #FFFFFF; /* card/form surfaces sit on white above the off-white page */
  --colour-border: #DCE5E1;
  --colour-muted: #5B6B6C;

  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Physio-site match (Nick, 14 Aug 2026): same system sans stack as
     mobilephysiotherapist.co.uk for headings AND body — no serif. */
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale — copied from the physio site's css/main.css:52-55.
     The earlier port of .trust-bar read the physio rules' token *names*
     and substituted a flat 1rem, which is the bottom of each clamp: the
     ribbon rendered at 16px where the reference renders at 18-20px on
     desktop, which is why it kept looking too small next to the physio
     site (Nick, 17 Aug 2026). */
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 3px rgba(41, 55, 56, 0.08), 0 1px 2px rgba(41, 55, 56, 0.06);
  --shadow-card-hover: 0 18px 34px rgba(20, 40, 40, 0.14), 0 4px 10px rgba(20, 40, 40, 0.08);
  --shadow-hero: 0 26px 60px rgba(15, 35, 35, 0.28);
  --max-width: 1200px; /* matches the physio site's --container-max */
  --transition: 200ms ease;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-system);
  font-size: 16px;
  line-height: 1.6;
  color: var(--colour-ink);
  background: var(--colour-paper);
  overflow-x: hidden;
}

/* height:auto is load-bearing, not decorative: every content <img> in this
   build carries explicit width/height HTML attributes (brief's CLS
   requirement), and those attributes become a "definite" presentational
   height. Without an author `height` rule, any element that also sets
   `aspect-ratio` + `width:100%` (feature bands, locale heroes, page-header
   media) would keep the *attribute* height instead of the aspect-ratio one,
   because CSS Sizing only lets aspect-ratio resolve a dimension that is
   auto — this makes height auto again so aspect-ratio can do its job.
   Components needing a different height (service/blog card thumbnails)
   set height:100% explicitly and win on specificity. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--colour-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--colour-deep);
  line-height: 1.22;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.9rem, 1.55rem + 1.6vw, 2.7rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.32rem + 0.8vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

ul, ol { padding-left: 1.25em; }

/* Layout */
.site-header__inner,
.site-footer__inner,
.site-main,
.breadcrumbs ol {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-main { padding-top: 1.5rem; padding-bottom: 3rem; }

/* Header */
.site-header {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--colour-border);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.site-header__inner {
  max-width: 1240px; /* header alone gets extra room so the full nav fits beside the logo, physio-style */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.site-header__logo { height: 34px; width: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.05rem;
  align-items: center;
  font-size: 0.92rem;
}
.site-nav a { color: var(--colour-ink); font-weight: 500; position: relative; }
.site-nav a:not(.site-nav__cta):hover { text-decoration: none; color: var(--colour-primary); }
.site-nav a:not(.site-nav__cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--colour-accent);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.site-nav a:not(.site-nav__cta):hover::after { transform: scaleX(1); }
.site-nav__cta {
  background: var(--colour-primary);
  color: var(--colour-surface) !important;
  padding: 0.55em 1.15em;
  border-radius: var(--radius);
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(22, 125, 127, 0.28);
  transition: background var(--transition), transform var(--transition);
}
.site-nav__cta:hover { background: var(--colour-deep); transform: translateY(-1px); }

/* Trust ribbon — dark charcoal strip under the header (design-parity brief §1) */
/* Trust bar — values copied 1:1 from the physio site's .trust-bar
 * (css/main.css:3488): #1d1d1d, 6px padding, 35px badges, and the same
 * fluid type tokens (container --text-lg, strong/span --text-base,
 * --text-sm under 768px). Do not flatten these back to fixed rem values:
 * that is exactly what made the ribbon render smaller than the reference. */
.trust-bar {
  background: #1d1d1d;
  padding: 6px 0;
  width: 100%;
}
.trust-bar__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.trust-bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.trust-bar-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 600;
}
.trust-bar-text strong {
  font-size: var(--text-base);
  font-weight: 700;
  color: #5ec6c0;
}
.trust-bar-text span {
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
}
.trust-bar-text a {
  margin-left: 1rem;
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.trust-bar-text a:hover { color: #5ec6c0 !important; }
.trust-bar-badges { display: flex; align-items: center; gap: 1rem; }
.trust-bar-badge {
  height: 35px;
  width: auto;
  max-width: 100px;
  background: #fff;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid var(--colour-border);
  object-fit: contain;
}

@media (max-width: 768px) {
  .trust-bar-content { gap: 0.75rem; }
  .trust-bar-text { font-size: var(--text-sm); gap: 0.5rem; }
  .trust-bar-text strong, .trust-bar-text span { font-size: var(--text-sm); }
  .trust-bar-text a { margin-left: 0.25rem; }
  .trust-bar-badges { display: none; }
}

/* Breadcrumbs */
.breadcrumbs { font-size: 0.85rem; color: var(--colour-muted); padding-top: 0.75rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0; margin: 0 auto; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4em; color: var(--colour-border); }

/* === Full-bleed section bands ===
 * A section can opt into an edge-to-edge coloured background (matching
 * the physio reference's <section><div class="container"> pattern)
 * while its content still lines up with .site-main's max-width — the
 * classic "break out of the parent, then re-constrain" trick, so no
 * change is needed to .site-main or any other page's markup. */
.band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-block: 3rem;
}
.band__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
.band--teal { background: linear-gradient(135deg, var(--colour-primary) 0%, var(--colour-deep) 100%); color: #fff; }
.band--teal h1, .band--teal h2, .band--teal h3 { color: #fff; }
.band--pale { background: var(--colour-mist); }
.band--charcoal { background: var(--colour-charcoal-deep); color: rgba(255,255,255,0.94); }
.band--charcoal h2, .band--charcoal h3 { color: #fff; }
.band--tight { padding-block: 2.25rem; }

/* Kicker label — small-caps, letter-spaced, teal, above a serif heading */
.kicker {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colour-primary);
  margin-bottom: 0.55rem;
}
.band--teal .kicker,
.band--charcoal .kicker { color: var(--colour-sage); }

/* margin-block only (not the shorthand `margin`) — a plain `margin: 2.5rem
   0` here would zero out margin-left/margin-right on any .section that is
   also a .band, clobbering the full-bleed breakout trick below. */
.section { margin-block: 2.5rem; }
.section-heading { max-width: 62ch; }
.section-heading--center { max-width: 62ch; margin: 0 auto; text-align: center; }

/* A full-bleed .band as the first thing in the page should touch the
   header/breadcrumbs flush, cancelling .site-main's own padding-top. */
.site-main > .band:first-child { margin-top: -1.5rem; }
/* ...and whatever follows it (article, .split, a plain section) needs its
   own top margin back, since the band no longer contributes one via
   normal document flow spacing. */
.band + article, .band + .split, .band + section, .band + div { margin-top: 2.5rem; }

/* Cards */
.recruiting-card,
.provider-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin: 1.5rem 0;
  position: relative;
  border-top: 4px solid var(--colour-primary);
}
.recruiting-card__actions,
.provider-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Buttons — deep-teal primary, warm-coral secondary CTA */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.68em 1.4em;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
}
.btn--primary { background: var(--colour-primary); color: var(--colour-surface) !important; box-shadow: 0 8px 20px rgba(22, 125, 127, 0.28); }
.btn--primary:hover { background: var(--colour-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 125, 127, 0.34); }
.btn--secondary { background: var(--colour-accent); color: var(--colour-surface) !important; box-shadow: 0 8px 20px rgba(233, 130, 103, 0.28); }
.btn--secondary:hover { filter: brightness(0.93); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--colour-primary) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.btn--light:hover { background: var(--colour-mist); transform: translateY(-2px); }
.btn--outline-light { background: rgba(255,255,255,0.08); color: #fff !important; border-color: rgba(255,255,255,0.85); }
.btn--outline-light:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--colour-accent); outline-offset: 2px; }
/* Bigger tap target for the primary profile call-to-action (Nick,
   21 Aug 2026: "make the call to action more clear"). */
.btn--lg { padding: 0.85em 1.9em; font-size: 1.05rem; }

/* Lists */
.territory-list, .town-list, .provider-list, .post-list, .price-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.territory-list li, .town-list li, .provider-list li, .price-list li {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  margin-left: 0.5em;
}
.tag--planned { background: var(--colour-border); color: var(--colour-muted); }

/* Forms */
form { display: grid; gap: 1.1rem; max-width: 640px; }
form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.92rem; }
form input, form select, form textarea {
  font: inherit;
  padding: 0.7em 0.85em;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-surface);
  color: var(--colour-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
form input:focus-visible, form select:focus-visible, form textarea:focus-visible {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px rgba(22, 125, 127, 0.18);
}
form textarea { min-height: 6em; resize: vertical; }
form fieldset { border: 1px solid var(--colour-border); border-radius: var(--radius); padding: 1rem 1.25rem; }
form legend { font-weight: 700; padding: 0 0.4em; }
.form-errors { color: #B3261E; background: #FDECEC; border: 1px solid #F3B9B9; border-radius: var(--radius); padding: 1rem 1.25rem; list-style: none; }

/* Footer — physio-style dark multi-column (#1d1d1d, matching trust bar) */
.site-footer {
  background: #1d1d1d;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 3rem;
  font-size: 0.92rem;
}
.site-footer__inner { padding-top: 3rem; padding-bottom: 2.5rem; }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: #5ec6c0; text-decoration: underline; }
.site-footer__grid {
  display: grid;
  /* Track minimums must be able to shrink. minmax(150px, 1fr) x4 plus a
     320px brand column and 2.5rem gaps demanded ~1080px, so between
     901px (where the two-column rule below stops applying) and ~1140px
     the footer was wider than the page and EVERY page scrolled sideways
     (found 21 Aug 2026 while checking the profile at 1024px). The
     columns still get ~140px at the tightest point. */
  grid-template-columns: minmax(min(320px, 100%), 1.9fr) repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.site-footer__col { min-width: 0; } /* let grid columns shrink below content width */
.site-footer__col a { overflow-wrap: anywhere; } /* long email must wrap, not overflow */
.site-footer__col ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.site-footer__col li { margin: 0 0 0.6rem; }
.site-footer__heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.8rem;
}
.site-footer__blurb { line-height: 1.65; margin: 0 0 1.5rem; }
.site-footer__badge {
  height: 60px;
  width: auto;
  background: #fff;
  padding: 4px;
  border-radius: 4px;
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.1rem 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__bottom p { margin: 0; }
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .site-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* UK map (/near-me/ hero) — decorative brand illustration only (Nick,
 * 14 Aug 2026): no coverage dots/labels/legend, and deliberately modest
 * in size. Same white-card treatment as the homepage hero photo. */
.locale-hero__media--map {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: 1.5rem;
  max-width: 300px;
  justify-self: center;
}
.uk-map svg { display: block; width: 100%; height: auto; max-height: 340px; }
.uk-map__land {
  fill: var(--colour-mist, #E8F3F1);
  stroke: var(--colour-primary);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* Small screens first; widen spacing on larger viewports */
@media (min-width: 640px) {
  .territory-list, .town-list, .provider-list, .price-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .territory-list, .town-list, .provider-list, .price-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =====================================================================
 * Patient-facing content build additions (from v1, carried forward)
 * ===================================================================== */

/* Accessibility helpers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Utility classes used across the new views */
.h3 { font-size: 1.15rem; }
.h4 { font-size: 1rem; }
.mt { margin-top: 1rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-lg { margin-top: 2rem; }
.muted { color: var(--colour-muted); }
.small { font-size: 0.85rem; }
.btn--full { display: flex; width: 100%; text-align: center; }

/* Wordmark (header/footer) — unchanged (Nick approved) */
.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-heading);
}
.wordmark__name {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--colour-primary);
}
.wordmark__name--dark { color: var(--colour-ink); }
.wordmark__tld { color: var(--colour-muted); font-weight: 600; }
.wordmark__tagline {
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colour-primary);
  margin-top: 0.15em;
}
.wordmark--inverted .wordmark__name,
.wordmark--inverted .wordmark__name--dark,
.wordmark--inverted .wordmark__tld,
.wordmark--inverted .wordmark__tagline {
  color: var(--colour-surface);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none !important;
}
.site-header__logo { height: 44px; width: auto; }
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none !important;
  margin-bottom: 1.25rem;
}
.site-footer__logo { height: 58px; width: auto; flex-shrink: 0; }
.site-footer .wordmark__name { font-size: 0.98rem; line-height: 1.25; }

/* Mobile nav toggle */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-surface);
  cursor: pointer;
}
.site-nav__toggle-bar {
  display: block;
  height: 2px;
  background: var(--colour-ink);
  border-radius: 1px;
}

@media (max-width: 719px) {
  .site-nav__toggle { display: flex; }
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
  }
  .site-nav--open { display: flex; }
  .site-nav__cta { align-self: flex-start; }
}

/* Hero (fallback plain hero, used where no photo variant applies) */
.hero__lead { max-width: 60ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

/* === Homepage / join-hub photo hero (design-parity brief §2) === */
.hero--photo { padding-block: 3rem; box-shadow: inset 0 -40px 60px -50px rgba(0,0,0,0.35); }
.hero__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero__copy { max-width: 46rem; }
.hero--photo h1 { color: #fff; margin-bottom: 0.5em; }
.hero--photo .hero__lead { color: rgba(255,255,255,0.94); font-size: 1.08rem; }
.hero__frame {
  background: #fff;
  padding: 0.55rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  max-width: 32rem;
  margin-inline: auto;
}
.hero__frame img {
  border-radius: calc(var(--radius-lg) - 6px);
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 0.95fr 1.05fr; }
  .hero__media { order: 2; }
  .hero__copy { order: 1; max-width: none; }
}

/* Section heading lead paragraphs */
.section__lead { color: var(--colour-muted); max-width: 60ch; }
.band--teal .section__lead, .band--charcoal .section__lead { color: rgba(255,255,255,0.85); }
.page-header { margin-bottom: 1.75rem; }
.page-header__lead { font-size: 1.05rem; color: var(--colour-muted); max-width: 65ch; }
.band--teal .page-header__lead, .band--charcoal .page-header__lead { color: rgba(255,255,255,0.9); }

/* Full-width card rows (physio .grid-3 pattern: cards never share a
 * column with a photo — they always get the whole content width) */
.cards-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .cards-row { grid-template-columns: repeat(3, 1fr); }
}

/* Trust points */
.trust-points__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.trust-point {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.trust-point:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.trust-point h3 { margin-bottom: 0.3em; }
.trust-point p { margin: 0; color: var(--colour-muted); }

/* How it works */
.how-it-works__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
.how-it-works__step {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.how-it-works__step:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.how-it-works__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--colour-primary);
  color: var(--colour-surface);
  font-family: var(--font-heading);
  font-weight: bold;
  margin-bottom: 0.75rem;
}
.how-it-works__grid--stacked { margin-top: 0; }

/* === Feature band — alternating image/text section (design-parity brief §3) === */
.feature-band {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  grid-template-columns: 1fr;
}
.feature-band__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.feature-band__content > *:first-child { margin-top: 0; }
@media (min-width: 820px) {
  .feature-band { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .feature-band--reverse { direction: rtl; }
  .feature-band--reverse > * { direction: ltr; }
}

/* Service grid (homepage / county hub / town) — photo-topped cards */
.service-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: var(--colour-ink);
  text-decoration: none !important;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { border-color: var(--colour-primary); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--colour-mist); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.service-card h3 { margin-bottom: 0.4em; }
.service-card p { color: var(--colour-muted); margin-bottom: 0.75em; font-size: 0.92rem; flex: 1; }
.service-card__link { color: var(--colour-primary); font-weight: 700; font-size: 0.9rem; }

/* Covered areas / near-me index */
.covered-areas__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 1.25rem;
}
.covered-areas__card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem;
  border-top: 4px solid var(--colour-primary);
  transition: transform var(--transition), box-shadow var(--transition);
}
.covered-areas__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.town-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.chip {
  display: inline-block;
  background: var(--colour-mist);
  color: var(--colour-deep);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  font-size: 0.8rem;
}
.chip--link { text-decoration: none !important; }
.chip--link:hover { background: var(--colour-primary); color: var(--colour-surface); }
.chip--more { background: transparent; color: var(--colour-muted); }

/* Town grid (county hub) */
.town-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1rem;
}
.town-card {
  display: block;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--colour-ink);
  text-decoration: none !important;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition);
}
.town-card:hover { border-color: var(--colour-primary); color: var(--colour-primary); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

/* Meet your OT */
.meet-your-ot-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
.meet-your-ot-card h3 { margin-bottom: 0.5em; }

/* Generic card panel + notice card */
.card-panel {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.6rem;
  margin: 1rem 0;
}
.notice-card {
  background: linear-gradient(135deg, rgba(22,125,127,0.08) 0%, var(--colour-surface) 70%);
  border-left: 4px solid var(--colour-primary);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin: 1rem 0;
  box-shadow: var(--shadow-card);
}
.notice-card p { margin: 0; }

/* Card grid — used by /conditions/{slug}/'s "how a home OT visit can
   help" section to lay out several .card-panel items side by side on
   wider screens (falls back to a single column on mobile, matching
   .service-grid's own breakpoints below). */
.card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.card-grid .card-panel { margin: 0; }
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* FAQ */
.faq-list { display: grid; gap: 0.65rem; margin-top: 1rem; }
.faq-item {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: 0.95rem 1.2rem;
  box-shadow: var(--shadow-card);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: revert;
}
.faq-item summary::marker { color: var(--colour-primary); }
.faq-item p { margin: 0.6em 0 0; color: var(--colour-muted); }

/* CTA blocks — dark charcoal, matches the physio reference's closing CTA */
.cta-block {
  background: var(--colour-charcoal-deep);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  text-align: left;
  color: rgba(255,255,255,0.94);
  box-shadow: var(--shadow-card-hover);
}
.cta-block h2, .cta-block h3 { color: #fff; }
.cta-block p { color: rgba(255,255,255,0.85); }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.1rem; }
.cta-block .btn--primary { background: var(--colour-primary); }
.cta-block .btn--secondary { background: var(--colour-accent); }

/* Sidebar variant (job pages' <aside>) — the physio site's join sidebar
   CTA: tighter padding, centred, full-width button. */
.cta-block--aside { padding: 1.6rem 1.4rem; text-align: center; }
.cta-block--aside h2, .cta-block--aside h3 { margin-top: 0; }
.cta-block--aside p:last-child { margin-bottom: 0; }

/* Two-column layout (town / town-service pages) */
.split { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.split > aside { align-self: start; display: grid; gap: 1rem; align-content: start; }
.page-aside { display: grid; gap: 1rem; align-content: start; }

/* Cross-link / plain lists */
.cross-link-list, .plain-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.5rem;
}

/* Blog — thumbnail cards */
.blog-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--colour-mist); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: 1.35rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card h2 { margin-bottom: 0.3em; }
.blog-card__link { font-weight: 700; margin-top: auto; }
.page-header__media { margin: 0 0 1.75rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card-hover); }

/* .blog-post__media is a <figure> carrying a caption, so the rounding
   and overflow clip live on the IMAGE, not the container. With them on
   the container, the bottom-left corner radius clipped the first
   character of the disclosure caption (Nick, 19 Aug 2026). Keeping the
   caption outside the clipped box also left-aligns it with the article
   body below, which reads better than indenting it past the curve. */
.blog-post__media { margin: 0 0 1.75rem; }
.blog-post__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); }
.blog-post__media img,
.page-header__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-post__body h2 { margin-top: 1.75em; }
.blog-post__body ul { margin-bottom: 1.25em; }

/* Legal pages */
.legal-page section.section { max-width: 75ch; }
.legal-page h2 { margin-top: 1.75em; }

/* Prices */
.price-guide-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1rem; }
.price-guide__range { font-family: var(--font-heading); font-size: 1.4rem; color: var(--colour-primary); margin: 0.2em 0; }

/* === Locale hero — town / county / near-me index photo banner (brief §3) ===
 * Depth pass (owner verdict on the plain teal band: "very basic") reuses
 * the homepage hero's own device rather than inventing a new one: the
 * same inset vignette shadow as .hero--photo (see home.php's hero),
 * scoped to .locale-hero so it applies to the near-me index, county hub
 * and town heroes alike (they all share this class). */
.locale-hero {
  padding-block: 2.5rem;
  box-shadow: inset 0 -40px 60px -50px rgba(0, 0, 0, 0.35);
}
.locale-hero__grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  align-items: center;
}
.locale-hero h1 { margin-bottom: 0.4em; }
.locale-hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (min-width: 760px) {
  .locale-hero__grid { grid-template-columns: 1.35fr 0.65fr; }
}

/* Stat chips + CTA row (near-me index hero) — same rounded-chip language
 * as .chip/.tag elsewhere on the site, just recoloured for the teal band. */
.locale-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
/* Hero stats: a quiet bullet-separated row (physio trust-bar language),
 * not bordered pills — Nick found the pill treatment "a bit weird". */
.stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 600;
}
.stat-chip:not(:last-child)::after {
  content: '\2022';
  margin-left: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.stat-chip strong {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
}
.locale-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.6rem;
}

/* === Join funnel — premium terms + territory cards (brief §5) === */
.terms-card {
  background: linear-gradient(135deg, rgba(22,125,127,0.07) 0%, var(--colour-surface) 65%);
  border: 1px solid var(--colour-border);
  border-left: 6px solid var(--colour-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 2rem;
}
.terms-card h2, .terms-card h3 { margin-top: 0; }
.terms-card ul { margin-bottom: 0; }
.terms-card li { margin-bottom: 0.5rem; }
.terms-card li:last-child { margin-bottom: 0; }

.territory-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  border-top: 4px solid var(--colour-accent);
  transition: transform var(--transition), box-shadow var(--transition);
}
.territory-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.territory-card--filled { border-top-color: var(--colour-border); }

.apply-form-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 2rem 2.25rem;
}
@media (max-width: 640px) {
  .apply-form-card { padding: 1.5rem 1.35rem; }
}

/* Wider viewports */
@media (min-width: 640px) {
  .trust-points__grid { grid-template-columns: repeat(3, 1fr); }
  .how-it-works__grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .covered-areas__grid { grid-template-columns: repeat(2, 1fr); }
  .town-grid { grid-template-columns: repeat(3, 1fr); }
  .meet-your-ot-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .price-guide-grid { grid-template-columns: repeat(3, 1fr); }
  .band { padding-block: 4rem; }
}

@media (min-width: 960px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .covered-areas__grid { grid-template-columns: repeat(3, 1fr); }
  .town-grid { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 2fr 1fr; align-items: start; }
}

/* Guard against any accidental horizontal overflow from the full-bleed
   .band trick on very narrow viewports with unusual scrollbar behaviour. */
@media (max-width: 400px) {
  .band { width: 100%; left: 0; right: 0; margin-left: 0; margin-right: 0; }
}

/* Hero figure + AI-image disclosure (Nick, 17 Aug 2026).
   The county banner photography is generated, not a photograph of the
   real therapist or client, so the page says so. Deliberately quiet —
   it's an honesty note, not a disclaimer that competes with the H1 —
   but it stays legible: no opacity tricks, real colour contrast. */
.hero-figure { margin: 0; }
.hero-figure__note {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--colour-muted);
  text-align: right;
}
/* Inside a teal band the muted ink would disappear, so lift it there. */
.band--teal .hero-figure__note { color: rgba(255, 255, 255, 0.75); }

/* =====================================================================
   Blog pagination
   Numbered links rather than "load more"/infinite scroll — see the note
   in app/views/blog/index.php. Touch targets are 44px minimum: the
   audience skews older and is often on a tablet.
   ===================================================================== */
.pagination {
  margin: var(--space-xl, 2.5rem) 0 var(--space-lg, 2rem);
  padding-top: var(--space-lg, 2rem);
  border-top: 1px solid var(--colour-border);
}
.pagination__status {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
  color: var(--colour-muted);
  text-align: center;
}
.pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  background: var(--colour-surface);
  color: var(--colour-primary);
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pagination__link:hover,
.pagination__link:focus-visible {
  background: var(--colour-mist);
  border-color: var(--colour-primary);
  text-decoration: none;
}
.pagination__link.is-current {
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
  cursor: default;
}
.pagination__link.is-disabled {
  color: var(--colour-muted);
  opacity: 0.5;
  cursor: default;
}
.pagination__gap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--colour-muted);
}
/* On narrow screens the word is dropped and the arrow carries the
   meaning, so Newer/Older never wrap onto two lines. */
@media (max-width: 30rem) {
  .pagination__link--prev span,
  .pagination__link--next span { display: none; }
}

/* =====================================================================
   Article safety + sources block
   Closes every blog post. Visually distinct from the article body on
   purpose — a reader skimming for the emergency guidance should be able
   to find it without reading the piece.
   ===================================================================== */
.article-safety {
  margin: var(--space-xl, 2.5rem) 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--colour-mist);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
.article-safety > :first-child { margin-top: 0; }
.article-safety > :last-child { margin-bottom: 0; }
.article-safety p { color: var(--colour-ink); }

/* The urgent panel gets the coral accent — the only place on an article
   page that colour is used, so it reads as "this one is different". */
.article-safety__urgent {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--colour-surface);
  border-left: 4px solid var(--colour-accent);
  border-radius: var(--radius);
}
.article-safety__urgent p { margin: 0 0 0.5rem; }
.article-safety__urgent ul { margin: 0; padding-left: 1.25rem; }
.article-safety__urgent li { margin-bottom: 0.4rem; }
.article-safety__urgent li:last-child { margin-bottom: 0; }

.article-safety__sources { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.article-safety__sources li { margin-bottom: 0.35rem; }

/* =====================================================================
   "Start here" — cornerstone guides above the blog archive.
   Newest-first sorting buries the pillar posts as the blog grows; this
   keeps them one click from the index without distorting the archive.
   ===================================================================== */
.start-here {
  margin-bottom: var(--space-lg, 2rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--colour-mist);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
}
.start-here > :first-child { margin-top: 0; }
.start-here__list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.start-here__list a { font-weight: 600; }
.start-here__note { display: block; margin-top: 0.15rem; font-size: var(--text-sm); color: var(--colour-muted); }
@media (min-width: 48rem) {
  .start-here__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* Disclosure note under a generated article image. Same treatment as
   .hero-figure__note on the county banners — deliberately quiet: it is
   an honest label, not a disclaimer that should compete with the
   article. */
.blog-post__note {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--colour-muted);
}

/* Preview banner — a not-yet-live provider profile viewed via a
   tokenised ?preview= link. Deliberately loud: the whole risk of a
   preview URL is somebody assuming it is already public. */
.preview-banner {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.15rem;
  background: #FFF4E5;
  border: 1px solid #E9A23B;
  border-left: 5px solid #E9A23B;
  border-radius: var(--radius);
  color: #5A3A0B;
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* =====================================================================
   Provider profile
   Layout mirrors the physio site's therapist pages (Nick supplied them
   as the blueprint, 19 Aug 2026): masthead, two columns, qualifications
   card with photo, dark CTA, tick bullets, sidebar.
   ===================================================================== */
.provider-profile__masthead { margin-bottom: 1.5rem; }
.provider-profile__masthead h1 { margin-bottom: 0.1em; }
.provider-profile__title { margin: 0; color: var(--colour-muted); font-size: var(--text-lg); }

.provider-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) {
  .provider-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
  /* Sticky sidebar: the phone number should stay reachable on a long
     profile without scrolling back up - pinned BELOW the sticky site
     header rather than under it (see --header-height). */
  .provider-layout__side { position: sticky; top: calc(var(--header-height) + 1rem); }
}
.provider-layout__side { display: grid; gap: 1.25rem; }

/* Qualifications / registration card */
.provider-card {
  background: var(--colour-mist);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin-bottom: 1.5rem;
}
.provider-card__heading { margin: 0 0 0.6rem; }
.provider-card--quals { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.provider-card--quals__body { flex: 1 1 16rem; }

.provider-photo {
  /* 240px, matching the physio therapist pages (Nick, 19 Aug 2026). */
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--colour-surface);
  box-shadow: 0 0 0 3px var(--colour-sage);
  flex: 0 0 auto;
}

.provider-facts { list-style: none; margin: 0; padding: 0; }
.provider-facts li { margin-bottom: 0.4rem; padding-left: 1.1rem; position: relative; }
.provider-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--colour-primary);
}

/* Dark call-to-action */
.provider-cta {
  background: var(--colour-charcoal-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3.5vw, 2rem);
  margin-bottom: 2rem;
  text-align: center;
}
.provider-cta__heading { color: #fff; margin: 0 0 0.5rem; }
.provider-cta p { color: rgba(255,255,255,0.88); }
.provider-cta__lead { font-size: 1.05rem; max-width: 34rem; margin-left: auto; margin-right: auto; }
.provider-cta__mention { font-size: var(--text-sm); font-style: italic; color: rgba(255,255,255,0.72); }
.provider-cta__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
/* The phone button carries the number itself, at size: on the physio
   blueprint the number IS the button, and a profile's whole job is to
   get that number dialled. */
.provider-cta__phone { display: inline-flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.provider-cta__phone-label { font-size: var(--text-sm); font-weight: 600; opacity: 0.75; }
.provider-cta__phone-number { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.01em; }

/* =====================================================================
   Profile tabs (About / Services / Availability)
   Progressive enhancement: the strip is hidden and every panel is shown
   until public/assets/js/main.js adds .provider-tabs--ready. Without JS
   the profile reads as one stacked page, which is also what a crawler
   that does not run scripts sees.
   ===================================================================== */
.provider-tabs__strip { display: none; }
.provider-tabs--ready .provider-tabs__strip {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid var(--colour-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.provider-tabs--ready .provider-tabs__strip::-webkit-scrollbar { display: none; }
.provider-tabs__strip button {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--colour-charcoal);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.provider-tabs__strip button:hover { color: var(--colour-primary); }
.provider-tabs__strip button[aria-selected="true"] {
  color: var(--colour-primary);
  border-bottom-color: var(--colour-primary);
}
.provider-tabs__strip button:focus-visible { outline: 3px solid var(--colour-accent); outline-offset: -3px; }
.provider-tabs__panel { margin-bottom: 2rem; scroll-margin-top: calc(var(--header-height) + 1rem); }
/* Site headings carry no top margin (see the h1-h4 rule near the top of
   this file) - before the tabs, each block sat in a .section wrapper
   whose margin-block did the separating. The panels replaced those
   wrappers, so "Service areas" ended up jammed against the last line of
   the bio (Nick, 21 Aug 2026, with a screenshot). Direct children only,
   so headings inside .card-panel and the service cards keep their own
   tighter spacing. */
.provider-tabs__panel > h2,
.provider-tabs__panel > h3 { margin-top: 2.75rem; }
.provider-tabs__panel > h2:first-child,
.provider-tabs__panel > h3:first-child { margin-top: 0; }
.provider-tabs__panel > p + h3 { margin-top: 2.5rem; }
.provider-tabs__panel:focus { outline: none; }
.provider-tabs__panel > h2:first-child { margin-top: 0; }
.provider-tabs--ready .provider-tabs__panel { margin-bottom: 0; }
.provider-tabs--ready .provider-tabs__panel[hidden] { display: none; }

/* Numbered "how booking works" list on the Availability panel. */
.provider-steps { list-style: none; margin: 0.75rem 0 1.25rem; padding: 0; }
.provider-steps li { margin-bottom: 0.65rem; padding-left: 1.75rem; position: relative; }
.provider-steps li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--colour-primary);
  font-weight: 700;
}

/* Back link at the foot of a provider's prices page. */
.page-back { margin-top: 2rem; }

/* Tick bullets — the physio "Specialties" list */
.provider-ticks { list-style: none; margin: 0.75rem 0 0.5rem; padding: 0; }
.provider-ticks li { margin-bottom: 0.5rem; padding-left: 1.75rem; position: relative; }
.provider-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--colour-primary);
  font-weight: 700;
}

.provider-areas { list-style: none; margin: 0.75rem 0; padding: 0; }
.provider-areas li { margin-bottom: 0.6rem; padding-left: 1.5rem; position: relative; }
.provider-areas li::before {
  content: "\25CF";
  position: absolute;
  left: 0;
  color: var(--colour-sage);
}
.provider-area-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.35rem; }

.provider-profile__services { display: grid; gap: 1.9rem 2.25rem; margin-top: 1.25rem; }
@media (min-width: 48rem) {
  .provider-profile__services { grid-template-columns: repeat(2, 1fr); }
}
.provider-profile__service h3,
.provider-profile__service h4 { margin: 0 0 0.3rem; }
.provider-profile__service p { margin: 0; }
.provider-profile__list { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.provider-profile__list li { margin-bottom: 0.4rem; }

/* Sidebar cards */
.provider-side-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.provider-side-card__heading { margin: 0 0 0.75rem; font-size: 1.15rem; }
.provider-side-card p:last-child { margin-bottom: 0; }
.provider-side-card__btn { display: block; width: 100%; text-align: center; }
.provider-side-card--dark {
  background: var(--colour-charcoal-deep);
  border-color: var(--colour-charcoal-deep);
  color: #fff;
}
.provider-side-card--dark .provider-side-card__heading { color: #fff; }
.provider-side-card--dark .provider-cta__mention { margin-bottom: 0.85rem; }

/* "Book with X" card — the physio town-page booking block (Nick,
   21 Aug 2026, with a screenshot): centred, generous padding, a big
   white heading, the role/area line beneath it, then three full-width
   buttons. Centring is what stops a long brand name wrapping into a
   ragged left-aligned block, which is how the previous version looked. */
.provider-book { text-align: center; padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.1rem, 2.5vw, 1.5rem); }
.provider-book__heading {
  color: #fff;
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 800;
}
.provider-book__role {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}
.provider-book .provider-cta__mention { margin: 0 0 1.1rem; }
.provider-book p:last-child { margin-bottom: 0; }
.provider-book .provider-side-card__btn { margin-bottom: 0.75rem; }
/* The number is the point of the card: bigger and heavier than the
   secondary actions under it. */
.provider-book .btn--light { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.01em; }
/* Registration card: quieter than the qualifications list above it —
   it is reassurance, not a sales point. */
.provider-facts--muted li { color: var(--colour-muted); font-size: var(--text-sm); }
.provider-facts--muted li::before { background: var(--colour-sage); }
.provider-side-card .muted.small { margin-top: 0.75rem; margin-bottom: 0; }

/* =====================================================================
   County banner
   Full-width hero on /near-me/{county}/. The generated banner is a
   complete designed graphic — brand mark, headline, trust icons, town
   strip, service row — so it gets the width it was drawn for rather
   than being squeezed into a column beside the H1 (Nick, 19 Aug 2026).
   ===================================================================== */
.locale-hero__header { margin-bottom: 1.25rem; }
.county-banner { margin: 0 0 2.5rem; }
.county-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.county-banner__note {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--colour-muted);
}

/* Kept-attachment note on the apply form — the file survived a failed
   validation round and does not need re-uploading. */
.form-kept-file {
  margin: 0.35rem 0 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--colour-mist);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--colour-ink);
}

/* "About {therapist}" card at the foot of a territory blog article - the
   physio blueprint's author-bio block. Photo beside the text on anything
   wider than a phone, stacked below it on a phone. */
.author-bio { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.author-bio__photo {
  /* Sized to carry the card (Nick, 24 Aug 2026: "make the photo larger
     so that the profile stands out better"). The physio blueprint's
     equivalent renders far bigger than the 80px the markup claims, and
     at 80px ours read as an afterthought beside four lines of text.
     Scales with the viewport so it never crowds a phone. */
  width: clamp(96px, 18vw, 150px);
  height: clamp(96px, 18vw, 150px);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--colour-surface);
  box-shadow: 0 0 0 3px var(--colour-sage);
  flex: 0 0 auto;
}
.author-bio__body { flex: 1 1 18rem; }
.author-bio__body > :first-child { margin-top: 0; }
.author-bio__body > :last-child { margin-bottom: 0; }

/* =====================================================================
   Provider card (the "Your local occupational therapist" block on town
   and county pages, and the homepage "meet your OT" grid).
   Rebuilt 24 Aug 2026 to carry the photo, credentials and contact
   details the physio equivalent has - this block is where a visitor
   decides to make contact, so it has to answer "who is this and how do
   I reach them" without a second click.
   ===================================================================== */
.provider-card__person {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0.9rem 0 1.1rem;
}
.provider-card__photo {
  width: clamp(88px, 16vw, 120px);
  height: clamp(88px, 16vw, 120px);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--colour-surface);
  box-shadow: 0 0 0 3px var(--colour-sage);
  flex: 0 0 auto;
}
.provider-card__details { flex: 1 1 16rem; min-width: 0; }
.provider-card__name { font-weight: 800; font-size: 1.15rem; margin: 0 0 0.15rem; }
.provider-card__title { color: var(--colour-muted); margin: 0 0 0.6rem; }
.provider-card__line { margin: 0 0 0.35rem; }
.provider-card__line a { overflow-wrap: anywhere; }
.provider-card__mention {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--colour-muted);
  margin: 0 0 0.5rem;
}
.provider-card__actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }

/* =====================================================================
   Therapist directory (/occupational-therapists/).
   Rebuilt 24 Aug 2026: this listed each therapist as a bare name in a
   box. One card per therapist, sized so a single therapist does not
   stretch to a lonely full-width band.
   ===================================================================== */
.provider-directory {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  margin-top: 1.5rem;
}
.provider-directory__card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-card);
}
.provider-directory__head {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.provider-directory__head h2 { margin: 0 0 0.15rem; }
.provider-directory__head p { margin: 0; }
.provider-directory__photo {
  width: clamp(96px, 18vw, 140px);
  height: clamp(96px, 18vw, 140px);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--colour-surface);
  box-shadow: 0 0 0 3px var(--colour-sage);
  flex: 0 0 auto;
}
.provider-directory__card .provider-facts { margin: 1rem 0; }
.provider-directory__actions { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-top: 1.1rem; }