/* Fizioterapiya.bg - home page (light clinical theme)
   Tokens: one accent (brand blue from the logo), cool near-white neutrals. Light only.
   Radius rule: buttons, chips and the header bar are pills; cards and images 24px; hero image and sheets 36px+.
   Layers: backdrop -1, mobile action bar 40, header 50, scroll progress 55, skip link 60.
   Motion: hover zoom uses `scale`, parallax and magnets use `translate`, reveals use `transform`,
   so the three never fight over one property. Everything is off under prefers-reduced-motion. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

:root {
  color-scheme: light;
  --bg: #f5f9fc;
  --surface: #fdfeff;
  --tint: #eaf3f9;
  --ink: #0c2233;
  --muted: #4a6072;
  --line: #d9e6ef;
  --accent: #0b6fb8;
  --accent-hover: #095c9a;
  --on-accent: #f8fcff;
  --accent-soft: #dcedf9;
  --accent-faint: #eef6fc;
  --accent-text: #0a66aa;
  --accent-rgb: 11 111 184;
  --glass: rgb(253 254 255 / 0.8);
  --shadow-sm: 0 10px 30px -18px rgb(13 70 115 / 0.35);
  --shadow: 0 30px 70px -34px rgb(13 70 115 / 0.4);

  --radius: 24px;
  --radius-lg: 36px;
  --wrap: 1280px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --sheet: clamp(0.5rem, 1.4vw, 1.25rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }
/* Tinted sections are white "sheets" lifted off the page background */
.section--tint {
  margin-inline: var(--sheet);
  background: var(--surface);
  border-radius: clamp(28px, 4vw, 56px);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  overflow: clip;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}
.skip:focus { top: 0.75rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Fixed page backdrop: clinical cross grid plus two slow drifting washes of the brand blue */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 18v8M18 22h8' stroke='%230b6fb8' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(120% 70% at 70% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 70% at 70% 0%, #000 0%, transparent 72%);
}
.backdrop__wash { position: absolute; width: 70vmax; aspect-ratio: 1; border-radius: 50%; }
.backdrop__wash--a { top: -30vmax; right: -22vmax; background: radial-gradient(closest-side, rgb(120 196 240 / 0.34), transparent); }
.backdrop__wash--b { bottom: -38vmax; left: -26vmax; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.13), transparent); }

/* Scroll progress (only painted where scroll-driven animations exist) */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 55;
  background: linear-gradient(90deg, #5cc3ee, var(--accent));
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}

/* Type */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }

.lead { color: var(--muted); font-size: clamp(1.0625rem, 1.4vw, 1.2rem); max-width: 58ch; text-wrap: pretty; }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}
.eyebrow__mark .icon { width: 0.95rem; height: 0.95rem; }

/* Word masks: hero words are in the markup, section headings are split by main.js */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.1em 0.14em; margin-block: -0.1em -0.14em; }
.w > span { display: inline-block; }
.w--accent { color: var(--accent); }

/* Buttons and links */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.25s var(--ease), translate 0.5s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 28px -16px rgb(var(--accent-rgb) / 0.75); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 18px 34px -16px rgb(var(--accent-rgb) / 0.85); }
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.3) 50%, transparent 68%);
  translate: -120% 0;
  transition: translate 0.9s var(--ease);
}
.btn--primary:hover::before { translate: 120% 0; }
.btn--ghost { border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn--sm { min-height: 2.75rem; padding: 0.5rem 1.15rem; font-size: 0.9375rem; }
.btn:hover .icon { animation: nudge 0.6s var(--ease); }
@keyframes nudge { 30% { rotate: -14deg; } 60% { rotate: 10deg; } }

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--accent-text);
}
.more span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size 0.45s var(--ease); }
.more:hover span { background-size: 100% 1.5px; }
.more .icon { transition: translate 0.35s var(--ease); }
.more:hover .icon { translate: 5px 0; }

/* Header: floating glass pill */
.header { position: sticky; top: 0; z-index: 50; padding-top: 0.75rem; pointer-events: none; }
.header__bar {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4rem;
  padding: 0 0.6rem 0 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.header.is-stuck .header__bar, .header.is-open .header__bar { background: var(--glass); border-color: var(--line); box-shadow: var(--shadow-sm); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header.is-stuck .header__bar { -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); }
}
@media (prefers-reduced-transparency: reduce) {
  .header.is-stuck .header__bar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.logo { display: inline-flex; flex: none; }
.logo img { width: 180px; height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(1rem, 1.8vw, 1.9rem); }
.nav a { position: relative; display: inline-block; padding-block: 0.35rem; font-size: 0.9375rem; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color 0.25s var(--ease); }
.nav a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.45s var(--ease); }
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 1rem; }
.header__phone { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; transition: color 0.25s var(--ease); }
.header__phone:hover { color: var(--accent-text); }
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); align-items: center; justify-content: center; }
.menu-btn .icon { width: 1.4rem; height: 1.4rem; transition: rotate 0.4s var(--ease), opacity 0.25s var(--ease); }
.menu-btn .icon--close { position: absolute; opacity: 0; rotate: -90deg; }
.menu-btn[aria-expanded="true"] .icon--open { opacity: 0; rotate: 90deg; }
.menu-btn[aria-expanded="true"] .icon--close { opacity: 1; rotate: 0deg; }

@media (max-width: 1399px) {
  .header__phone span { display: none; }
  .header__phone { width: 2.75rem; height: 2.75rem; justify-content: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }
}
@media (max-width: 1179px) {
  .menu-btn { display: inline-flex; }
  .header__bar { padding-left: 1rem; }
  .header__actions { margin-left: auto; gap: 0.5rem; }
  .header__actions .btn { display: none; }
  .nav {
    position: absolute;
    inset: calc(100% + 0.5rem) 0 auto 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.5rem 1.25rem;
    max-height: calc(100dvh - var(--header-h) - 1.5rem);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transform-origin: 50% 0;
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a { display: block; padding: 1rem 0; font-size: 1.125rem; color: var(--ink); }
  .nav a::after { display: none; }
}
@media (max-width: 420px) {
  .logo img { width: 150px; }
}

/* Hero: one large photo stage. The photo is anchored right and dissolves into the
   stage colour on the left (its own left edge is pale window blinds), so the copy
   sits on a light field without a dark scrim. */
.hero { padding-top: 0.75rem; }
.hero__stage {
  --pad: max(var(--gutter), calc((100vw - var(--sheet) * 2 - var(--wrap)) / 2 + var(--gutter)));
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(34rem, calc(100dvh - var(--header-h) - 1.5rem), 58rem);
  margin-inline: var(--sheet);
  border-radius: clamp(28px, 4vw, 56px);
  overflow: hidden;
  background: linear-gradient(115deg, #f3f9fd 0%, #e2eff9 55%, #d3e6f5 100%);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  transform-origin: 50% 100%;
}
.hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  width: min(54%, calc(var(--pad) + 37rem));
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(4.5rem, 8vw, 6.5rem) var(--pad);
}
.hero__copy .lead { max-width: 30rem; color: #3b5163; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.hero__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.4) 18%, #000 36%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.4) 18%, #000 36%);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

@media (max-width: 899px) {
  .hero__stage { min-height: 0; align-items: start; }
  .hero__copy { width: 100%; padding: 2rem var(--gutter) 0.5rem; }
  .hero__photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1;
    margin-top: -1.5rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  }
  .hero__photo img { object-position: 60% 50%; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 14rem; }
}

/* Facts: one raised card, four figures */
.facts { position: relative; z-index: 1; margin-top: clamp(-3.5rem, -5vw, -2rem); }
.facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(0.5rem, 1.5vw, 1rem);
}
.facts__list > li { padding: clamp(1.1rem, 2vw, 1.75rem); display: grid; gap: 0.2rem; align-content: start; }
.facts__list > li + li { border-left: 1px solid var(--line); }
.facts__num { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.facts__label { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.4rem; }
.facts__desc { color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 899px) {
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__list > li + li { border-left: 0; }
  .facts__list > li:nth-child(even) { border-left: 1px solid var(--line); }
  .facts__list > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 479px) {
  .facts__list { grid-template-columns: 1fr; }
  .facts__list > li:nth-child(even) { border-left: 0; }
  .facts__list > li + li { border-top: 1px solid var(--line); }
}

/* About */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.about__media { position: relative; padding: 0 14% 12% 0; }
.about__portrait { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__second {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--bg);
  aspect-ratio: 4 / 5;
  background: var(--tint);
  box-shadow: var(--shadow);
}
.about__second img { width: 100%; height: 100%; object-fit: cover; }
.about__copy { display: grid; gap: 1.25rem; justify-items: start; }
.about__copy p { color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.about__copy p strong { color: var(--ink); font-weight: 600; }
.creds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.5rem; }
.creds li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.75rem; border-radius: 999px; background: var(--accent-soft); font-size: 0.9375rem; font-weight: 500; }
.creds .icon { width: 1.05rem; height: 1.05rem; color: var(--accent); }
@media (max-width: 899px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 30rem; }
}

/* Cursor spotlight on cards (class added by main.js on fine pointers) */
.spot { position: relative; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent-rgb) / 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.spot:hover::after { opacity: 1; }

/* Programs bento: 5 items, 5 cells */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "sport sport home kids"
    "elder elder home manual";
  gap: 1rem;
}
.bento__cell {
  display: flex;
  flex-direction: column;
  min-height: 23rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}
.bento__cell:hover { border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: var(--shadow); translate: 0 -5px; }
.bento__cell--sport { grid-area: sport; }
.bento__cell--home { grid-area: home; }
.bento__cell--kids { grid-area: kids; }
.bento__cell--elder { grid-area: elder; }
.bento__cell--manual { grid-area: manual; }
.bento__img { flex: 1 1 11rem; min-height: 11rem; overflow: hidden; background: var(--tint); }
.bento__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.bento__cell:hover .bento__img img { scale: 1.06; }
.bento__body { padding: 1.35rem 1.5rem 1.6rem; display: grid; gap: 0.5rem; }
.bento__body h3 { transition: color 0.3s var(--ease); }
.bento__cell:hover .bento__body h3 { color: var(--accent-text); }
.bento__body p { color: var(--muted); font-size: 0.9688rem; line-height: 1.55; }
.section-foot { margin-top: 2rem; }
@media (max-width: 1023px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "sport sport"
      "home kids"
      "elder elder"
      "manual manual";
  }
  .bento__cell--manual { flex-direction: row; min-height: 0; }
  .bento__cell--manual .bento__img { flex: 0 0 40%; min-height: 12rem; }
  .bento__cell--manual .bento__body { align-content: center; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "sport" "home" "kids" "elder" "manual"; }
  .bento__cell { min-height: 0; }
  .bento__cell--manual { flex-direction: column; }
  .bento__img, .bento__cell--manual .bento__img { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
}

/* Treatment areas: pill tabs, body map, panel */
.areas {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  grid-template-areas: "tabs tabs" "map panels";
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.areas__tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.areas__panels { grid-area: panels; }
.areas__tab {
  flex: none;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9688rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.25s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.25s var(--ease);
}
.areas__tab .icon { display: none; }
.areas__tab:hover { color: var(--ink); border-color: rgb(var(--accent-rgb) / 0.5); }
.areas__tab:active { transform: scale(0.96); }
.areas__tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 12px 24px -14px rgb(var(--accent-rgb) / 0.8); }

.bodymap { grid-area: map; display: none; position: sticky; top: calc(var(--header-h) + 1.5rem); justify-items: center; padding-block: 0.5rem; }
.js .bodymap { display: grid; }
.bodymap__figure { position: relative; width: min(100%, 15rem); aspect-ratio: 200 / 440; }
.bodymap__figure::before {
  content: "";
  position: absolute;
  inset: 8% -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(120 196 240 / 0.3), transparent);
}
.bodymap__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bodymap__body { color: var(--accent-soft); }
.bodymap__scan { fill: url(#bm-scan); opacity: 0; }
.bodymap__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.bodymap__dot i {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.35);
  transition: scale 0.4s var(--ease), background-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.bodymap__dot::after {
  content: "";
  position: absolute;
  inset: 0.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.bodymap__dot::before {
  content: attr(data-label);
  position: absolute;
  left: calc(100% - 0.1rem);
  top: 50%;
  translate: -6px -50%;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), translate 0.4s var(--ease);
}
.bodymap__dot[data-side="l"]::before { left: auto; right: calc(100% - 0.1rem); translate: 6px -50%; }
.bodymap__dot:hover i { scale: 1.3; }
.bodymap__dot.is-active i { scale: 1.45; background: var(--accent); box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / 0.18); }
.bodymap__dot:hover::before, .bodymap__dot.is-active::before { opacity: 1; translate: 0 -50%; }
.bodymap__dot:hover { z-index: 2; }

.areas__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.areas__panel[hidden] { display: none; }
.areas__panel + .areas__panel { margin-top: 3rem; }
.js .areas__panel + .areas__panel { margin-top: 0; }
.areas__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); box-shadow: var(--shadow-sm); }
.areas__img img { width: 100%; height: 100%; object-fit: cover; }
.areas__body { display: grid; gap: 1rem; justify-items: start; padding-top: 0.25rem; }
.areas__body h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.areas__body > p { color: var(--muted); }
.conditions { display: grid; gap: 0; width: 100%; margin-block: 0.25rem 0.5rem; }
.conditions li { padding: 0.6rem 0 0.6rem 1.5rem; position: relative; font-size: 0.9688rem; line-height: 1.4; }
.conditions li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 0.75rem; height: 2px; border-radius: 2px; background: var(--accent); }
@media (max-width: 1023px) {
  .areas { grid-template-columns: 1fr; grid-template-areas: "tabs" "panels"; }
  .js .bodymap { display: none; }
  .js .areas__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 0.75rem;
    scrollbar-width: none;
  }
  .js .areas__tabs::-webkit-scrollbar { display: none; }
  .js .areas__tab { scroll-snap-align: start; }
}
@media (max-width: 599px) {
  .areas__panel { grid-template-columns: 1fr; }
  .areas__img { aspect-ratio: 3 / 2; }
}

/* Methods rail */
.methods { --rail-pad: max(var(--gutter), calc((100vw - var(--sheet) * 2 - var(--wrap)) / 2 + var(--gutter))); timeline-scope: --rail; }
.methods__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.methods__head .section-head { margin-bottom: 0; }
.rail-nav { display: flex; gap: 0.5rem; flex: none; }
.rail-nav button {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.rail-nav button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.rail-nav button:active:not(:disabled) { transform: scale(0.94); }
.rail-nav button:disabled { opacity: 0.35; cursor: default; }
.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  padding-inline: var(--rail-pad);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  scroll-timeline: --rail x;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail img { -webkit-user-drag: none; }
.rail__card { flex: 0 0 clamp(15.5rem, 24vw, 19rem); scroll-snap-align: start; display: grid; gap: 1rem; align-content: start; }
.rail__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); }
.rail__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.rail__card:hover .rail__img img { scale: 1.06; }
.rail__card h3 { transition: color 0.3s var(--ease); }
.rail__card:hover h3 { color: var(--accent-text); }
.rail__card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; margin-top: 0.35rem; }
.rail-progress { display: none; height: 3px; margin-top: 1.5rem; border-radius: 3px; background: var(--line); overflow: hidden; }
.rail-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; scale: 0.12 1; }
.methods__more { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.25rem; }
.methods__more h3 { font-size: 1.125rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
/* The one marquee on the page: extra methods. Static wrapped chips until main.js turns it on. */
.marquee { padding-inline: var(--rail-pad); }
.marquee.is-live {
  padding-inline: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee.is-live .chips { flex-wrap: nowrap; gap: 0; width: max-content; animation: marquee 44s linear infinite; }
.marquee.is-live .chips li { margin-right: 0.6rem; padding: 0.7rem 1.35rem; font-size: 1rem; }
.marquee.is-live:hover .chips { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 699px) {
  .rail-nav { display: none; }
}

/* Reviews: masonry via CSS columns */
.reviews { columns: 3; column-gap: 1rem; }
.review {
  break-inside: avoid;
  margin-bottom: 1rem;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 1.25rem;
}
.review:hover { border-color: rgb(var(--accent-rgb) / 0.4); box-shadow: var(--shadow-sm); }
.review:nth-child(3n + 1) { background: var(--accent-soft); border-color: transparent; }
.review blockquote { font-size: 1.0313rem; line-height: 1.6; text-wrap: pretty; }
.review figcaption { display: grid; gap: 0.1rem; font-size: 0.9375rem; padding-top: 1.1rem; border-top: 1px solid rgb(var(--accent-rgb) / 0.16); }
.review figcaption strong { font-weight: 600; }
.review figcaption span { color: var(--muted); }
@media (max-width: 1023px) { .reviews { columns: 2; } }
@media (max-width: 639px) { .reviews { columns: 1; } }

/* Articles: one featured, two compact */
.posts { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.posts__side { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.post { display: grid; gap: 1.25rem; }
.post__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--tint); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.post:hover .post__img img { scale: 1.06; }
.post__body { display: grid; gap: 0.6rem; justify-items: start; }
.post__body p { color: var(--muted); font-size: 0.9688rem; }
.post h3 a { transition: color 0.3s var(--ease); }
.post h3 a:hover { color: var(--accent-text); }
.post--featured h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.post--compact { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; }
.post--compact .post__img { aspect-ratio: 1; }
.posts__side .post + .post { padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); }
@media (max-width: 899px) { .posts { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .post--compact { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; } .post--compact p { display: none; } }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 2rem); }
.faq__list { display: grid; gap: 0.6rem; }
.faq__list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding-inline: clamp(1.1rem, 2vw, 1.6rem);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease);
}
.faq__list details:hover { border-color: rgb(var(--accent-rgb) / 0.4); }
.faq__list details[open] { border-color: rgb(var(--accent-rgb) / 0.5); box-shadow: var(--shadow-sm); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary .icon {
  box-sizing: content-box;
  padding: 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  transition: rotate 0.5s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.faq__list details[open] summary .icon { rotate: 135deg; background: var(--accent); color: var(--on-accent); }
.faq__list details p { color: var(--muted); padding-bottom: 1.5rem; max-width: 62ch; }
.faq__list details a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .faq { grid-template-columns: 1fr; }
  .faq .section-head { position: static; }
}

/* Contact panel */
.contact { padding-bottom: var(--section); }
.contact__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(140deg, var(--accent-soft), var(--accent-faint) 62%);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  box-shadow: var(--shadow);
}
.contact__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 16rem;
  aspect-ratio: 1;
  left: -7rem;
  top: -7rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(var(--accent-rgb) / 0.22), 0 0 0 4rem rgb(var(--accent-rgb) / 0.045), 0 0 0 8rem rgb(var(--accent-rgb) / 0.035);
}
.contact__copy { padding: clamp(1.75rem, 5vw, 4.5rem); display: grid; gap: 1.5rem; align-content: center; justify-items: start; }
.contact__copy h2 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); }
.contact__copy > p { color: var(--muted); max-width: 46ch; }
.contact__copy > p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.places { width: 100%; margin-top: 0.5rem; border-top: 1px solid rgb(var(--accent-rgb) / 0.2); }
.places li { border-bottom: 1px solid rgb(var(--accent-rgb) / 0.2); }
.places a, .places div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding: 1rem 0; align-items: start; transition: padding 0.4s var(--ease); }
.places .icon { margin-top: 0.2rem; color: var(--accent); transition: translate 0.4s var(--ease); }
.places strong { display: block; font-weight: 600; color: var(--ink); transition: color 0.3s var(--ease); }
.places span { color: var(--muted); font-size: 0.9375rem; }
.places a:hover strong { color: var(--accent-text); }
.places a:hover .icon { translate: 0 -3px; }
.contact__media { min-height: 20rem; background: var(--tint); overflow: hidden; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .contact__panel { grid-template-columns: 1fr; }
  .contact__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .contact__actions .btn { flex: 1 1 14rem; }
}

/* Footer */
.footer { border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; background: var(--surface); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)); gap: 2.5rem; }
.footer__brand { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.footer__brand p { color: var(--muted); max-width: 30ch; }
.footer h2 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; margin-bottom: 1rem; }
.footer ul { display: grid; gap: 0.6rem; justify-items: start; }
.footer li a { display: inline-block; color: var(--muted); font-size: 0.9688rem; transition: color 0.25s var(--ease), translate 0.35s var(--ease); }
.footer li a:hover { color: var(--accent-text); translate: 4px 0; }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer { padding-bottom: 6.5rem; }
}

/* Mobile action bar: slides in once the hero CTAs are out of view */
.actionbar { display: none; }
@media (max-width: 767px) {
  .actionbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.5rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--glass);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    backdrop-filter: saturate(170%) blur(16px);
    transition: transform 0.5s var(--ease);
  }
  .js .actionbar { transform: translateY(110%); }
  .js .actionbar.is-on { transform: none; }
  .actionbar .btn { min-height: 3rem; padding-inline: 1rem; }
}

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes word-up { from { transform: translateY(112%); } }
@keyframes clip-down { from { clip-path: inset(0 0 100% 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes zoom-out { from { scale: 1.22; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes drift-a { to { transform: translate(-9vmax, 7vmax) scale(1.12); } }
@keyframes drift-b { to { transform: translate(8vmax, -6vmax) scale(1.08); } }
@keyframes scan { 0% { transform: translateY(-80px); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateY(440px); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes grow-x { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes rail-fill { from { scale: 0.12 1; } to { scale: 1 1; } }
@keyframes par-hero { to { transform: scale(1.12); } }
@keyframes iris { from { clip-path: circle(0% at 62% 58%); } to { clip-path: circle(150% at 62% 58%); } }
@keyframes stage-out { to { transform: scale(0.93); } }
@keyframes par-float { from { translate: 0 44px; } to { translate: 0 -44px; } }
@keyframes par-zoom { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes breathe { 50% { scale: 1.08; } }

@media (prefers-reduced-motion: no-preference) {
  /* Ambient */
  .backdrop__wash--a { animation: drift-a 26s ease-in-out infinite alternate; }
  .backdrop__wash--b { animation: drift-b 32s ease-in-out infinite alternate; }

  /* Hero load-in: copy rises in reading order, the photo unmasks, the arc draws itself */
  .hero .eyebrow { animation: rise 0.9s var(--ease) both; }
  .hero h1 .w > span { animation: word-up 1s var(--ease) both; animation-delay: calc(0.12s + var(--w, 0) * 0.09s); }
  .hero .lead { animation: rise 0.9s var(--ease) 0.5s both; }
  .hero__actions { animation: rise 0.9s var(--ease) 0.62s both; }
  .hero__photo img { animation: iris 1.6s var(--ease) 0.1s both, zoom-out 2.2s var(--ease) 0.1s both; }

  /* Scroll reveals */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.95s var(--ease) calc(var(--i, 0) * 80ms), transform 0.95s var(--ease) calc(var(--i, 0) * 80ms), border-color 0.35s var(--ease), box-shadow 0.45s var(--ease), translate 0.45s var(--ease), background-color 0.35s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* The mask sits on the image, not the box, so the observer still sees the box */
  .js [data-reveal="clip"] { opacity: 1; transform: none; }
  .js [data-reveal="clip"]:not(.is-in) { background: transparent; }
  .js [data-reveal="clip"] img { clip-path: inset(0 0 100% 0); scale: 1.2; transition: clip-path 1.25s var(--ease) calc(var(--i, 0) * 120ms), scale 1.7s var(--ease) calc(var(--i, 0) * 120ms); }
  .js [data-reveal="clip"].is-in img { clip-path: inset(0 0 0 0); scale: 1; }
  .js [data-reveal="pop"] { transform: translateY(40px) scale(0.9); }

  /* Staggered children */
  .js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease) calc(var(--i, 0) * 90ms), transform 0.8s var(--ease) calc(var(--i, 0) * 90ms); }
  .js [data-stagger].is-in > * { opacity: 1; transform: none; }

  /* Section headings split into words by main.js */
  .split .w > span { transform: translateY(112%); transition: transform 0.95s var(--ease) calc(var(--w, 0) * 45ms); }
  .split.is-in .w > span { transform: none; }

  /* Area panels re-animate every time a tab or body point is chosen */
  .js .areas__panel:not([hidden]) .areas__img { animation: clip-down 0.9s var(--ease) both; }
  .js .areas__panel:not([hidden]) .areas__img img { animation: zoom-out 1.3s var(--ease) both; }
  .js .areas__panel:not([hidden]) .areas__body > * { animation: rise 0.7s var(--ease) both; }
  .js .areas__panel:not([hidden]) .areas__body > :nth-child(2) { animation-delay: 0.06s; }
  .js .areas__panel:not([hidden]) .areas__body > :nth-child(3) { animation-delay: 0.12s; }
  .js .areas__panel:not([hidden]) .areas__body > :nth-child(4) { animation-delay: 0.5s; }
  .js .areas__panel:not([hidden]) .conditions li { animation: rise 0.6s var(--ease) both; animation-delay: calc(0.14s + var(--n, 0) * 0.045s); }
  .conditions li:nth-child(2) { --n: 1; } .conditions li:nth-child(3) { --n: 2; } .conditions li:nth-child(4) { --n: 3; }
  .conditions li:nth-child(5) { --n: 4; } .conditions li:nth-child(6) { --n: 5; } .conditions li:nth-child(7) { --n: 6; }

  /* Body map: resting points pulse to show they are clickable, a scan line sweeps the figure */
  .bodymap__dot:not(.is-active)::after { animation: ping 3.2s ease-out infinite; animation-delay: calc(var(--d, 0) * 0.35s); }
  .bodymap__scan { animation: scan 5.5s ease-in-out 1s infinite; }

  .contact__panel::before { animation: breathe 9s ease-in-out infinite; }

  /* Scroll-driven extras, progressive enhancement only */
  @supports (animation-timeline: view()) {
    .progress { animation: grow-x linear both; animation-timeline: scroll(root block); }
    .hero__photo img { animation: iris 1.6s var(--ease) 0.1s both, zoom-out 2.2s var(--ease) 0.1s both, par-hero linear both; animation-timeline: auto, auto, view(); animation-range: normal, normal, exit 0% exit 100%; }
    .hero__stage { animation: stage-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .about__second { animation: par-float linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .post--featured .post__img img, .contact__media img, .bento__cell--sport .bento__img img, .bento__cell--elder .bento__img img {
      animation: par-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }
    .rail-progress { display: block; }
    .rail-progress span { animation: rail-fill linear both; animation-timeline: --rail; }
  }
}

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

@media print {
  .header, .actionbar, .rail-nav, .backdrop, .progress, .bodymap { display: none; }
}

/* ---------- Inner pages ----------
   Same tokens and radius rule as the home page. The page head is a shorter cousin of the hero stage. */
.page-head { padding-top: 0.75rem; }
.page-head__stage {
  --pad: max(var(--gutter), calc((100vw - var(--sheet) * 2 - var(--wrap)) / 2 + var(--gutter)));
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(19rem, 44vh, 27rem);
  margin-inline: var(--sheet);
  border-radius: clamp(28px, 4vw, 56px);
  overflow: hidden;
  background: linear-gradient(115deg, #f3f9fd 0%, #e2eff9 55%, #d3e6f5 100%);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.page-head__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  width: min(58%, calc(var(--pad) + 40rem));
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.5rem) var(--pad);
}
.page-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.page-head .lead { color: #3b5163; max-width: 34rem; }
.page-head__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.4) 18%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.4) 18%, #000 40%);
}
.page-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 35%); }
.page-head--plain .page-head__stage { min-height: 0; }
.page-head--plain .page-head__copy { width: min(100%, calc(var(--pad) + 54rem)); padding-right: var(--gutter); }
.page-head--plain .lead { max-width: 44rem; }
@media (max-width: 899px) {
  .page-head__stage { min-height: 0; }
  .page-head__copy { width: 100%; padding: 2rem var(--gutter) 1.75rem; }
  .page-head__photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: -1.5rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  }
}

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: rgb(var(--accent-rgb) / 0.45); }
.crumbs a { transition: color 0.25s var(--ease); }
.crumbs a:hover { color: var(--accent-text); }

.meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; color: var(--muted); font-size: 0.9375rem; }

/* In-page jump links: same pills as the area tabs on the home page */
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.jump a {
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9688rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.25s var(--ease);
}
.jump a:hover { color: var(--ink); border-color: rgb(var(--accent-rgb) / 0.5); }
.jump a:active { transform: scale(0.96); }
.jump a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 12px 24px -14px rgb(var(--accent-rgb) / 0.8); }
@media (max-width: 767px) {
  .jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 0.75rem;
    scrollbar-width: none;
  }
  .jump::-webkit-scrollbar { display: none; }
}

.section--flush { padding-top: clamp(2.5rem, 5vw, 4rem); }
.section + .section--tint, .page-head + .section--tint { margin-top: clamp(1rem, 2vw, 1.5rem); }
.section--tint + .contact { margin-top: var(--section); }
.bento--tall .bento__cell { min-height: 27rem; }
@media (max-width: 599px) { .bento--tall .bento__cell { min-height: 0; } }

/* Services: masonry of cards, text-only ones take the soft accent */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.services__col { display: grid; gap: 1rem; }
.service {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.section--tint .service { background: var(--bg); }
.service:hover { border-color: rgb(var(--accent-rgb) / 0.4); box-shadow: var(--shadow-sm); }
.service:target { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.service__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.service__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: scale 1s var(--ease); }
.service:hover .service__img img { scale: 1.05; }
.service__body { padding: 1.5rem 1.6rem 1.75rem; display: grid; gap: 0.75rem; }
.service__body h3 { font-size: 1.375rem; }
.service__body p { color: var(--muted); font-size: 0.9688rem; line-height: 1.6; text-wrap: pretty; }
.service--plain, .section--tint .service--plain { background: var(--accent-soft); border-color: transparent; }
.service--plain .service__body p { color: #3b5163; }
@media (max-width: 767px) { .services { grid-template-columns: 1fr; } }

/* Treatment areas page: sticky body map beside the full list */
.atlas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.atlas__map { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; justify-items: center; padding-block: 0.5rem; }
.atlas__list { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.area {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(0.85rem, 1.6vw, 1.25rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.area.is-current { border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: var(--shadow-sm); }
.area__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); }
.area__img img { width: 100%; height: 100%; object-fit: cover; }
.area__body { display: grid; gap: 1rem; padding: clamp(0.5rem, 1.4vw, 1.25rem) clamp(0.5rem, 1.4vw, 1.25rem) clamp(0.5rem, 1.4vw, 1.25rem) 0; }
.area__body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.area__body > p { color: var(--muted); }
.terms { display: grid; gap: 0.9rem; margin: 0.25rem 0 0; }
.terms div { position: relative; padding-left: 1.5rem; }
.terms div::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.75rem; height: 2px; border-radius: 2px; background: var(--accent); }
.terms dt { font-weight: 600; line-height: 1.4; }
.terms dd { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 1023px) {
  .atlas { grid-template-columns: 1fr; }
  .atlas__map { display: none; }
}
@media (max-width: 699px) {
  .area { grid-template-columns: 1fr; }
  .area__img { aspect-ratio: 3 / 2; }
  .area__body { padding: 0 0.5rem 0.75rem; }
}

/* Three plain steps, no cards */
.steps { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.5rem; align-content: start; padding-top: 1.25rem; border-top: 2px solid var(--accent-soft); }
.steps li::before { content: counter(step); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.steps p { color: var(--muted); font-size: 0.9688rem; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }

/* About page */
.about__grid--top { align-items: start; }
.about__grid--top .about__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.gallery { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 1rem; height: clamp(16rem, 34vw, 27rem); }
.gallery div { border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.gallery div:hover img { scale: 1.05; }
@media (max-width: 899px) { .about__grid--top .about__media { position: relative; top: auto; } }
@media (max-width: 699px) {
  .gallery { grid-template-columns: 1fr 1fr; height: auto; }
  .gallery div { aspect-ratio: 1; }
  .gallery div:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

/* Contact page */
.reach { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.reach__main { display: grid; }
.reach__big { display: grid; gap: 0.2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.reach__big span { color: var(--muted); font-size: 0.9375rem; }
.reach__big strong { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; transition: color 0.25s var(--ease); }
a.reach__big:hover strong { color: var(--accent-text); }
.reach__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.locs { display: grid; gap: 1rem; }
.loc { display: grid; gap: 0.4rem; justify-items: start; padding: 1.5rem 1.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.loc p { color: var(--muted); }
.loc .more { margin-top: 0.4rem; }
.loc--soft { background: var(--accent-soft); border-color: transparent; }
.wide-photo { margin-top: clamp(2rem, 4vw, 3.5rem); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 9; background: var(--tint); box-shadow: var(--shadow-sm); }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .reach { grid-template-columns: 1fr; }
  .reach__actions .btn { flex: 1 1 14rem; }
  .wide-photo { aspect-ratio: 16 / 10; }
}

/* Articles */
.article { display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 20rem); justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.article__cover { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 8; background: var(--tint); box-shadow: var(--shadow-sm); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.article__cover img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); }
.article__side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; }
.side-card { display: grid; gap: 0.9rem; justify-items: start; padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--accent-soft); }
.side-card p { color: #3b5163; font-size: 0.9688rem; }
.side-card .btn { width: 100%; }
.side-list { display: grid; gap: 0.9rem; }
.side-list h2 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.side-list li { padding-top: 0.9rem; border-top: 1px solid var(--line); }
.side-list a { font-weight: 600; line-height: 1.35; transition: color 0.25s var(--ease); }
.side-list a:hover { color: var(--accent-text); }
.prose { color: #2a4053; font-size: 1.0938rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--ink); margin-top: 2.75rem; }
.prose h3 { font-size: 1.25rem; color: var(--ink); margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose ul { display: grid; gap: 0.5rem; }
.prose li { position: relative; padding-left: 1.5rem; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75rem; height: 2px; border-radius: 2px; background: var(--accent); }
.prose details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding-inline: 1.4rem; }
.prose details + details { margin-top: 0.6rem; }
.prose details[open] { border-color: rgb(var(--accent-rgb) / 0.5); box-shadow: var(--shadow-sm); }
.prose summary { padding: 1.1rem 0; font-weight: 600; color: var(--ink); cursor: pointer; }
.prose details p { margin: 0; padding-bottom: 1.25rem; }
@media (max-width: 1023px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article__side { position: static; }
  .article__cover { aspect-ratio: 16 / 10; }
}
/* Article list page: the home "posts" block with dates */
.post time { color: var(--muted); font-size: 0.875rem; }

@media (prefers-reduced-motion: no-preference) {
  .page-head .crumbs { animation: rise 0.9s var(--ease) both; }
  .page-head h1 .w > span { animation: word-up 1s var(--ease) both; animation-delay: calc(0.1s + var(--w, 0) * 0.08s); }
  .page-head .lead, .page-head .meta { animation: rise 0.9s var(--ease) 0.4s both; }
  .page-head__photo img, .article__cover img { animation: zoom-out 2s var(--ease) both; }
}
@media print {
  .atlas__map, .jump, .article__side { display: none; }
}

/* ---------- WordPress additions ---------- */
.post__title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.bento--auto { grid-template-areas: none; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.bento--auto .bento__cell { grid-area: auto; }
.prose h2.wp-block-heading:first-child { margin-top: 0; }
.prose img { border-radius: var(--radius); }
.prose figure { margin-inline: 0; }
.prose figcaption { color: var(--muted); font-size: 0.875rem; margin-top: 0.5rem; }
.prose blockquote { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--accent-soft); }
.prose ol { padding-left: 1.4rem; list-style: decimal; display: grid; gap: 0.5rem; }
.prose ol li { padding-left: 0.25rem; }
.prose ol li::before { display: none; }
.navigation.pagination { margin-top: 2.5rem; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding-inline: 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; }
.navigation.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Programme cards that lead to their own page: the whole card is the link */
.bento__cell { position: relative; }
.bento__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bento__link:focus-visible { outline: none; }
.bento__cell:has(.bento__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.bento__body .more { margin-top: 0.35rem; font-size: 0.9375rem; }
.bento__cell:hover .more span { background-size: 100% 1.5px; }
.bento__cell:hover .more .icon { translate: 5px 0; }

/* Service, area and method cards lead to the record's own page the same way */
.service, .area, .rail__card { position: relative; }
.service__link::after, .area__link::after, .rail__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service__link:focus-visible, .area__link:focus-visible, .rail__link:focus-visible { outline: none; }
.service:has(.service__link:focus-visible), .area:has(.area__link:focus-visible), .rail__card:has(.rail__link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.service__body .more, .area__body .more { justify-self: start; font-size: 0.9375rem; }
.service:hover .more span, .area:hover .more span { background-size: 100% 1.5px; }
.service:hover .more .icon, .area:hover .more .icon { translate: 5px 0; }
.area:hover { border-color: rgb(var(--accent-rgb) / 0.45); box-shadow: var(--shadow-sm); }
.area__body .conditions { margin-block: 0; }
.area__body .conditions li { padding-block: 0.3rem; }
.area__body .conditions li::before { top: 0.95em; }
.chips a { transition: color 0.25s var(--ease); }
.chips a:hover { color: var(--accent-text); }
.prose .terms { margin-top: 1.25rem; gap: 1.1rem; }
.prose .terms dd { font-size: 1rem; line-height: 1.6; }

/* A single review reads as one wide quote, not a lone column */
.reviews:has(.review:only-child) { columns: 1; max-width: 46rem; }
.reviews .review:only-child blockquote { font-size: 1.1875rem; }