/* ===================================================================
   LONGEVIA — front-end styles
   Monochrome only. Black is the brand surface, white is the page.
   =================================================================== */

:root {
  --ink:    #000000;
  --paper:  #ffffff;
  --mist:   #f4f4f4;   /* light section wash */
  --line:   #e2e2e2;   /* hairlines on light */
  --smoke:  #6b6b6b;   /* secondary text on light */
  --hush:   #9a9a9a;   /* secondary text on dark */
  --edge:   rgba(255,255,255,.22);  /* hairlines on dark */
  --lift:   rgba(255,255,255,.05);  /* raised surface on dark */

  /* Inter is loaded at 300/800/900 and Montserrat at 400/500/600 + italic.
     Headings must sit on 800/900 and body on 400/500/600 — any other value
     gets synthesised by the browser and looks wrong. */
  --display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);

  --pad:     clamp(20px, 5vw, 52px);
  --edge-pad: clamp(26px, 5.4vw, 104px);  /* header gutter — the nav row has
                                             little slack, so this stays put */
  --hero-pad: clamp(26px, 8.4vw, 160px);  /* hero copy sits further in */
  --gap:     clamp(16px, 2.2vw, 28px);
  --section: clamp(64px, 9vw, 132px);
  --shell:   1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Montserrat stops at 600, so bold must not ask for 700 and get a fake. */
strong, b { font-weight: 600; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(38px, 5.6vw, 76px); }
h2 { font-size: clamp(29px, 3.8vw, 50px); }
h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
h4 { font-size: 18px; line-height: 1.35; }
p  { margin: 0 0 1.1em;  }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: 12px 18px; z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--ink  { background: var(--ink); color: var(--paper); }
.section--tight { padding-block: clamp(44px, 5.5vw, 76px); }

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 20px;
}
.section--ink .eyebrow { color: var(--hush); }

.lede { font-size: clamp(16px, 1.25vw, 18px); color: var(--smoke); }
.section--ink .lede { color: var(--hush); }

.section-head { max-width: 780px; margin-bottom: clamp(34px, 4vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

/* A light sweep across the face on hover. */
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transition: left .7s var(--ease);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* Any trailing arrow slides on hover. */
.btn i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.btn:hover i { transform: translateX(5px); }
.btn:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: transparent; color: var(--paper); }
.btn--light::after { background: linear-gradient(100deg, transparent, rgba(0,0,0,.16), transparent); }
.btn--light:hover::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); }
.btn--outline-light { background: transparent; color: var(--paper); border-color: var(--edge); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--small { padding: 11px 20px; font-size: 11px; }
.btn--block { width: 100%; justify-content: center; }

.textlink {
  display: inline-block;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity .2s ease;
}
.textlink:hover { opacity: .55; }

/* ===================================================================
   Opening logo animation — home page only.
   Pure black, pure white, no JavaScript required.
   Timing: logo reveals at .35s, screen clears at 3.2s.
   =================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  animation: introExit 1.1s ease-in-out 3.2s forwards;
}
.intro__logo {
  width: min(420px, 72vw);
  opacity: 0; transform: scale(.94);
  animation: logoReveal 2.2s cubic-bezier(.22, .61, .36, 1) .35s forwards;
}
.intro__logo img { width: 100%; height: auto; }

@keyframes logoReveal {
  0%   { opacity: 0;   transform: scale(.94); filter: blur(8px); }
  45%  { opacity: .55;                        filter: blur(3px); }
  100% { opacity: 1;   transform: scale(1);   filter: blur(0); }
}
@keyframes introExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.035); visibility: hidden; pointer-events: none; }
}

/* The page itself arrives just after the screen clears. */
.has-intro .site-header,
.has-intro .hero { animation: siteIn 1.1s ease 3.45s backwards; }
@keyframes siteIn { from { opacity: 0; } to { opacity: 1; } }

/* Already seen this session, or motion is unwelcome — go straight to the page. */
.intro-done .intro { display: none; }
.intro-done .site-header,
.intro-done .hero { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .has-intro .site-header,
  .has-intro .hero { animation: none; }
}

/* ===================================================================
   Header — rides over the hero photo, then turns solid once you scroll.
   =================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  color: var(--paper);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
/* Over the photo the logo needs a little lift off the busier areas. */
.site-header:not(.is-solid) .brand img,
.site-header:not(.is-solid) .nav > a,
.site-header:not(.is-solid) .nav__trigger,
.site-header:not(.is-solid) .header-actions .tel { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.site-header:not(.is-solid) .brand img { filter: drop-shadow(0 2px 14px rgba(0,0,0,.6)); }

.site-header.is-solid {
  background: var(--ink);
  border-bottom-color: var(--edge);
}
/* No JS, or a page with no hero to ride over: keep the solid bar. */
.no-js .site-header,
body:not(.has-overlay-header) .site-header {
  background: var(--ink); border-bottom-color: var(--edge);
}

/* In overlay mode the header leaves the flow so the hero photo runs up behind
   it; each hero then pads its own content down to clear the 82px bar. */
body.has-overlay-header .site-header { position: fixed; top: 0; left: 0; right: 0; }
body.has-overlay-header .hero-slider { min-height: 100vh; min-height: 100svh; }
body.has-overlay-header .hero-slider__content { padding-top: 122px; }
body.has-overlay-header .hero--page { padding-top: calc(82px + clamp(56px, 7vw, 104px)); }

.site-header__inner {
  display: flex; align-items: center;
  gap: 24px; height: 82px;
  padding-inline: var(--edge-pad);
}
/* Pushes the nav and everything after it to the right, leaving the logo alone
   on the left rather than nav sitting in the middle. */
.site-header__inner .nav { margin-left: auto; }
.brand { display: block; }
/* The logo is white on pure black, the same black as the header — it sits
   flush with no visible edge. */
.brand img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 22px; }
/* Roll-up hover: the link is a 14px window onto two stacked copies of the
   label, and hovering slides the pair up by exactly one line. */
.nav > a {
  display: block; height: 14px; overflow: hidden;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.66);
}
.nav > a span { display: block; line-height: 14px; transition: transform .4s var(--ease); }
.nav > a span + span { color: var(--paper); }
.nav > a:hover span { transform: translateY(-100%); }
.nav > a[aria-current="page"] { color: var(--paper); }

/* Services trigger: same roll-up label as the links, plus a caret. */
.nav__item { display: flex; align-items: center; }
.nav__trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.nav__trigger.is-current { color: var(--paper); }
.nav__roll { display: block; height: 14px; overflow: hidden; }
.nav__roll span { display: block; line-height: 14px; transition: transform .4s var(--ease); }
.nav__roll span + span { color: var(--paper); }
.nav__trigger:hover .nav__roll span,
.nav__item--mega.is-open .nav__roll span { transform: translateY(-100%); }
.nav__caret {
  display: block; flex: none;
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.nav__item--mega.is-open .nav__caret { transform: rotate(-135deg); margin-top: 3px; }

/* Mega-menu: a compact card that drops from under "Services". The top
   padding bridges the gap to the header's bottom edge so hover holds. */
.nav__item--mega { position: relative; }
.mega {
  position: absolute; top: 100%; left: -28px;
  width: 560px; padding-top: 32px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.nav__item--mega.is-open .mega {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease, transform .3s var(--ease), visibility 0s;
}
.mega__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  list-style: none; margin: 0; padding: 12px;
  background: var(--ink);
  border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.mega__link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: 12px;
  color: rgba(255,255,255,.8);
  transition: background .2s ease, color .2s ease;
}
.mega__icon {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--edge); color: var(--paper);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mega__icon svg { display: block; }
.mega__name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.mega__link:hover, .mega__link[aria-current="page"] { background: var(--lift); color: var(--paper); }
.mega__link:hover .mega__icon { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Anchored sections clear the fixed header. */
#therapies, #locations, #pillars { scroll-margin-top: 82px; }

.header-actions { display: flex; align-items: center; gap: 13px; }
.header-actions .tel { font-size: 12px; white-space: nowrap; color: rgba(255,255,255,.72); }
.header-actions .tel:hover { color: #fff; }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--edge); background: transparent;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 1px; background: #fff; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: #fff;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* ===================================================================
   Thank-you page — shown after a form is sent.
   =================================================================== */
.thanks {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(82px + 48px) 0 72px;
  background: radial-gradient(ellipse at 50% 30%, #1c1c1c 0%, var(--ink) 65%);
  color: var(--paper); text-align: center;
}
.thanks__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.thanks__inner { position: relative; max-width: 820px; margin-inline: auto; }

/* Tick: the ring and check draw themselves, then a soft pulse ripples out. */
.thanks__tick {
  position: relative; width: 96px; height: 96px; margin: 0 auto 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  animation: thanksPop .6s var(--ease-soft) both;
}
.thanks__tick::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--paper);
  animation: thanksPulse 2.4s ease-out .8s infinite;
}
.thanks__tick svg { width: 58px; height: 58px; }
.thanks__tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: thanksDraw .7s ease .2s forwards; }
.thanks__tick path   { stroke-dasharray: 40;  stroke-dashoffset: 40;  animation: thanksDraw .45s ease .75s forwards; }

.thanks__emoji {
  margin: 0 0 4px; font-size: clamp(44px, 6vw, 64px); line-height: 1;
  display: inline-block; transform-origin: 50% 90%;
  animation: thanksWave 1.6s ease-in-out 1s 2 both;
}
.thanks h1 {
  margin: 0 0 14px;
  font-size: clamp(52px, 9vw, 112px); font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  animation: thanksUp .7s var(--ease-soft) .35s both;
}
.thanks__lead {
  margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 24px); font-weight: 500;
  animation: thanksUp .7s var(--ease-soft) .5s both;
}
.thanks__sub {
  margin: 0 auto; max-width: 560px; color: var(--hush);
  animation: thanksUp .7s var(--ease-soft) .6s both;
}

.thanks__steps {
  list-style: none; padding: 0; margin: 44px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left;
}
.thanks__steps li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px; border: 1px solid var(--edge); border-radius: 18px;
  background: var(--lift);
  animation: thanksUp .7s var(--ease-soft) calc(.75s + var(--i) * .12s) both;
}
.thanks__step-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.thanks__steps strong { font-size: 15px; }
.thanks__steps span:last-child { font-size: 13.5px; line-height: 1.55; color: var(--hush); }

.thanks__cta {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px;
  animation: thanksUp .7s var(--ease-soft) 1.1s both;
}
.thanks__call { background: transparent; color: var(--paper); }

@keyframes thanksPop   { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes thanksDraw  { to { stroke-dashoffset: 0; } }
@keyframes thanksPulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }
@keyframes thanksUp    { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes thanksWave  {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg) scale(1.08); }
  40% { transform: rotate(10deg)  scale(1.08); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}

@media (max-width: 760px) {
  .thanks__steps { grid-template-columns: 1fr; }
  .thanks__cta .btn { width: 100%; justify-content: center; }
}
/* With motion off, show the finished tick rather than an empty circle. */
@media (prefers-reduced-motion: reduce) {
  .thanks__tick circle, .thanks__tick path { stroke-dashoffset: 0; }
}

/* ===================================================================
   Hero
   =================================================================== */
.hero {
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
  padding-block: clamp(70px, 10vw, 150px);
  text-align: center;
}
.hero__arc {
  position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
  width: min(1180px, 135%); opacity: .34; pointer-events: none;
}
.hero__inner { position: relative; max-width: 940px; margin-inline: auto; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: italic; }
.hero p { color: var(--hush); margin-inline: auto; max-width: 62ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

.hero--page { padding-block: clamp(56px, 7vw, 104px); text-align: left; }
.hero--page .hero__inner { margin-inline: 0; max-width: 900px; }
.hero--page .hero__cta { justify-content: flex-start; }
.hero--page p { margin-inline: 0; }

/* Every page banner opens from the middle on load, the same move the home
   hero's first photo makes; the copy follows once it is open. */
.hero--page::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, #262626 0%, #0e0e0e 45%, var(--ink) 78%);
}
.hero--page::before,
.hero--page .hero__arc,
.hero--page .hero__bg { animation: heroOpen 1.3s cubic-bezier(.77, 0, .18, 1) .1s both; }
.hero--page .hero__arc { z-index: 1; }
.hero--page .hero__inner { z-index: 2; animation: heroCopy .9s var(--ease-soft) .75s both; }
@keyframes heroOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroCopy { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Photo banner (service pages): subject on the right, copy on the dark left. */
.hero--photo {
  min-height: min(86vh, 820px);
  display: flex; align-items: center;
}
.hero--photo > .shell { width: 100%; }
.hero--photo .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 70% center;
}
.hero--photo .hero__bg { animation: heroOpen 1.3s cubic-bezier(.77, 0, .18, 1) .1s both, heroZoom 1.8s cubic-bezier(.77, 0, .18, 1) .1s both; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero--photo .hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 100%),
              linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
  animation: heroCopy .9s ease .5s both;
}
/* Page banners line their copy up with the home hero, not the centred shell. */
.hero--page > .shell { max-width: none; padding-inline: var(--hero-pad); }
.hero--page h1 { font-size: clamp(36px, 4.6vw, 72px); max-width: 22ch; text-wrap: balance; }
.hero--photo .hero__inner { max-width: 1000px; }
.hero--photo p { max-width: 58ch; }
.hero--photo p { color: rgba(255,255,255,.78); }
.hero--photo .crumb { color: rgba(255,255,255,.7); }
.hero--photo .eyebrow { color: rgba(255,255,255,.82); }
@media (max-width: 760px) {
  .hero--photo { min-height: 0; }
  .hero--photo .hero__shade { background: rgba(0,0,0,.62); }
}

.crumb { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hush); margin-bottom: 22px; }
.crumb a:hover { color: var(--paper); }

/* ===================================================================
   Home hero — 3D photo slider.
   Photos change through a rotating set of 3D transitions (cube, doors,
   slices, tiles, wipes) while one word of the headline cycles with them.
   Monochrome: photos are desaturated and the accent is white, not red.
   =================================================================== */
.hero-slider {
  --slide-ease: cubic-bezier(.77, 0, .18, 1);
  --k: 1;                     /* animation speed: lower is faster */
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 82px); min-height: calc(100svh - 82px);
  display: flex; flex-direction: column;
  background: var(--ink); color: var(--paper);
}

/* ---------- Photos ---------- */
.hero-slider__photo {
  position: absolute; inset: 0; z-index: 1; visibility: hidden;
  background-size: cover; background-position: center;
  background-color: #1a1a1a;
  filter: brightness(.74) saturate(.92);
}
.hero-slider__photo.on { visibility: visible; }
.hero-slider__photo.open { clip-path: inset(0 50% 0 50%); }
.hero-slider__photo.open.go { clip-path: inset(0 0 0 0); transition: clip-path calc(1.3s * var(--k)) var(--slide-ease); }
.hero-slider__photo.grow { transform: scale(1.12); }
.hero-slider__photo.grow.go { transform: scale(1); transition: transform calc(1.5s * var(--k)) var(--slide-ease); }

.hero-slider__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.16) 100%),
              linear-gradient(0deg,  rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%);
}

/* ---------- Shared transition scaffolding ---------- */
.hero-slider .fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; background: #000; }
.hero-slider .fx.clear { background: transparent; perspective: 1600px; }
.hero-slider .face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-repeat: no-repeat; background-color: #111;
  filter: brightness(.74) saturate(.92);
}
.hero-slider .face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; }
.hero-slider .go .from::after { animation: fxDarken calc(var(--t, 1s) * var(--k)) var(--slide-ease) forwards; animation-delay: var(--d, 0ms); }
.hero-slider .go .to::after { opacity: .65; animation: fxLighten calc(var(--t, 1s) * var(--k)) var(--slide-ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes fxDarken  { to { opacity: .75; } }
@keyframes fxLighten { to { opacity: 0; } }

/* Full-screen cube */
.hero-slider .big { position: absolute; inset: 0; perspective: 2200px; }
.hero-slider .bigcube { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--s) / -2)); }
.hero-slider .bigcube.go { animation: bigturn calc(1.5s * var(--k)) var(--slide-ease) forwards; }
.hero-slider .bigcube .from { transform: translateZ(calc(var(--s) / 2)); }
.hero-slider .bigcube .to { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
@keyframes bigturn {
  50%  { transform: translateZ(calc(var(--s) / -2 - 320px)) rotateY(-45deg); }
  100% { transform: translateZ(calc(var(--s) / -2)) rotateY(-90deg); }
}

/* Doors */
.hero-slider .door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.hero-slider .door .face { inset: 0; }
.hero-slider .door.l { left: 0;   transform-origin: 0 50%; }
.hero-slider .door.r { left: 50%; transform-origin: 100% 50%; }
.hero-slider .go .door.l { animation: doorL calc(1.4s * var(--k)) var(--slide-ease) forwards; }
.hero-slider .go .door.r { animation: doorR calc(1.4s * var(--k)) var(--slide-ease) forwards; }
@keyframes doorL { 70% { opacity: 1; } 100% { transform: rotateY(-100deg); opacity: 0; } }
@keyframes doorR { 70% { opacity: 1; } 100% { transform: rotateY(100deg);  opacity: 0; } }
.hero-slider .go .door .face::after { animation: fxDarken calc(1.4s * var(--k)) var(--slide-ease) forwards; }

/* Horizontal slices */
.hero-slider .slice { position: absolute; left: 0; width: 100%; perspective: 1400px; }
.hero-slider .scube { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--h) / -2)); }
.hero-slider .scube .from { transform: translateZ(calc(var(--h) / 2)); }
.hero-slider .scube.up .to   { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.hero-slider .scube.down .to { transform: rotateX(90deg)  translateZ(calc(var(--h) / 2)); }
.hero-slider .scube.up.go   { animation: sUp   calc(1s * var(--k)) var(--slide-ease) forwards; animation-delay: var(--d); }
.hero-slider .scube.down.go { animation: sDown calc(1s * var(--k)) var(--slide-ease) forwards; animation-delay: var(--d); }
@keyframes sUp   { 50% { transform: translateZ(calc(var(--h) / -2 - 90px)) rotateX(45deg); }  100% { transform: translateZ(calc(var(--h) / -2)) rotateX(90deg); } }
@keyframes sDown { 50% { transform: translateZ(calc(var(--h) / -2 - 90px)) rotateX(-45deg); } 100% { transform: translateZ(calc(var(--h) / -2)) rotateX(-90deg); } }

/* Wipes */
.hero-slider .wipe { position: absolute; inset: 0; overflow: hidden; }
.hero-slider .wipe.left   { clip-path: inset(0 100% 0 0); }
.hero-slider .wipe.right  { clip-path: inset(0 0 0 100%); }
.hero-slider .wipe.bottom { clip-path: inset(100% 0 0 0); }
.hero-slider .go .wipe { clip-path: inset(0 0 0 0); transition: clip-path calc(1.1s * var(--k)) var(--slide-ease); }
.hero-slider .wipe .face { transform: scale(1.15); }
.hero-slider .wipe.left   .face { transform: scale(1.15) translateX(-6%); }
.hero-slider .wipe.right  .face { transform: scale(1.15) translateX(6%); }
.hero-slider .wipe.bottom .face { transform: scale(1.15) translateY(6%); }
.hero-slider .go .wipe .face { transform: none; transition: transform calc(1.4s * var(--k)) var(--slide-ease); }
.hero-slider .wipe .face.to { --t: 1.1s; }

/* Tiles */
.hero-slider .tile { position: absolute; perspective: 1000px; }
.hero-slider .cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--s) / -2)); }
.hero-slider .cube .from { transform: translateZ(calc(var(--s) / 2)); }
.hero-slider .cube .to   { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.hero-slider .cube.go { animation: turn calc(1s * var(--k)) var(--slide-ease) forwards; animation-delay: var(--d); }
@keyframes turn { 50% { transform: translateZ(calc(var(--s) / -2 - 80px)) rotateY(-45deg); } 100% { transform: translateZ(calc(var(--s) / -2)) rotateY(-90deg); } }

/* ---------- Copy ---------- */
.hero-slider__content {
  position: relative; z-index: 4; flex: 1;
  display: flex; align-items: center;
  padding-block: 40px 150px;
  padding-inline: var(--hero-pad);
}
.hero-slider__copy { max-width: 720px; }
.hero-slider__eyebrow { color: var(--hush); }

.hero-slider__head {
  margin: 0;
  font-weight: 900;
  font-size: clamp(40px, 7.4vw, 96px);
  line-height: 1.15; letter-spacing: -.02em;
  display: flex; align-items: flex-start; flex-wrap: wrap;
}
.hero-slider__static { margin-right: .3em; }
.hero-slider__wrap {
  /* 1.34em, not 1.15em: Inter's ink spans ~1.21em, so a 1.15em step let the
     previous word's descender bleed into the top of the mask. The extra room
     sits below each word, which keeps the words themselves in place. */
  display: inline-block; height: 1.34em; overflow: hidden;
  transition: width calc(.9s * var(--k)) var(--slide-ease);
}
.hero-slider__track { display: block; transition: transform calc(.9s * var(--k)) var(--slide-ease); }
.hero-slider__track.instant { transition: none; }
.hero-slider__track span { display: block; height: 1.34em; line-height: 1.15; white-space: nowrap; }
.hero-slider__dot {
  width: .14em; height: .14em; border-radius: 50%;
  background: var(--paper); align-self: flex-end;
  margin: 0 0 .45em .06em; flex: none;
}

.hero-slider__quote {
  margin: 26px 0 0; max-width: 430px;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(19px, 2.3vw, 30px); line-height: 1.6;
  color: var(--hush);
}
/* Supporting paragraph: body face, smaller than the quote above it so the
   two read as a headline and its explanation rather than competing. */
.hero-slider__intro {
  margin: 18px 0 0; max-width: 540px;
  font-size: 15px; line-height: 1.75;
  color: rgba(255, 255, 255, .72);
}
.hero-slider__caption { margin: 16px 0 0; font-size: 13px; color: var(--hush); }

.hero-slider__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 34px; padding-bottom: 6px;
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 500;
  position: relative;
}
.hero-slider__cta::after,
.hero-slider__cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.hero-slider__cta::after { background: rgba(255,255,255,.45); }
.hero-slider__cta::before {
  background: var(--paper); z-index: 1;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s ease;
}
.hero-slider__cta:hover::before { transform: scaleX(1); transform-origin: left; }
.hero-slider__cta svg { transition: transform .35s ease; }
.hero-slider__cta:hover svg { transform: translateX(6px); }

/* ---------- Play button ---------- */
.hero-slider__content { justify-content: space-between; gap: 40px; }
.hero-slider__play {
  position: relative; flex: none;
  width: 122px; height: 122px;
  border: 0; background: none; padding: 0;
  color: var(--paper); cursor: pointer;
}
.hero-slider__play[aria-disabled="true"] { cursor: default; }
.hero-slider__ring { position: absolute; inset: 0; animation: playSpin 9s linear infinite; }
.hero-slider__tri {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform .35s var(--ease);
}
.hero-slider__play:hover .hero-slider__tri { transform: scale(1.12); }
@keyframes playSpin { to { transform: rotate(360deg); } }

/* ---------- Video lightbox ---------- */
.hero-lightbox {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.93);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
.hero-lightbox.is-open { opacity: 1; visibility: visible; }
.hero-lightbox__frame {
  width: min(940px, 100%); aspect-ratio: 16 / 9; background: #000;
  transform: scale(.92); transition: transform .5s var(--slide-ease, ease);
}
.hero-lightbox.is-open .hero-lightbox__frame { transform: none; }
.hero-lightbox__frame iframe { width: 100%; height: 100%; border: 0; }
.hero-lightbox__close {
  position: absolute; top: 14px; right: 22px;
  background: none; border: 0; color: var(--paper);
  font-size: 40px; line-height: 1; cursor: pointer;
}

.hero-slider__info {
  position: absolute; z-index: 4;
  right: var(--hero-pad); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: 13px; color: var(--hush); text-align: right;
}
.hero-slider__info-row { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.hero-slider__info-row a { color: var(--paper); font-weight: 500; }
.hero-slider__info-row a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Entrance. --t0 holds everything back while the logo intro is still playing,
   so the hero is not animating behind the black overlay. */
.hero-slider { --t0: 0s; }
body.has-intro  .hero-slider { --t0: 3.6s; }
html.intro-done .hero-slider { --t0: 0s; }
.hero-slider__copy > *,
.hero-slider__info {
  opacity: 0; transform: translateY(24px);
  animation: heroRise .9s var(--ease) forwards;
}
.hero-slider__eyebrow { animation-delay: calc(var(--t0) + .30s); }
.hero-slider__head    { animation-delay: calc(var(--t0) + .42s); }
.hero-slider__quote   { animation-delay: calc(var(--t0) + .56s); }
.hero-slider__intro   { animation-delay: calc(var(--t0) + .66s); }
.hero-slider__caption { animation-delay: calc(var(--t0) + .74s); }
.hero-slider__cta     { animation-delay: calc(var(--t0) + .84s); }
.hero-slider__info    { animation-delay: calc(var(--t0) + .96s); }
@keyframes heroRise { to { opacity: 1; transform: none; } }

/* The extra paragraph makes the copy block taller than a short laptop screen,
   so tighten the spacing rather than pushing the contact line past the fold. */
@media (min-width: 621px) and (max-height: 820px) {
  body.has-overlay-header .hero-slider__content { padding-top: 100px; }
  .hero-slider__content { padding-bottom: 108px; }
  .hero-slider__head { font-size: clamp(38px, 6vw, 74px); }
  .hero-slider__quote { font-size: clamp(17px, 1.8vw, 23px); margin-top: 18px; }
  .hero-slider__intro { font-size: 14px; line-height: 1.7; margin-top: 14px; }
  .hero-slider__caption { margin-top: 12px; }
  .hero-slider__cta { margin-top: 24px; }
}

@media (max-width: 900px) {
  .hero-slider__content { padding-block: 24px 180px; }
  .hero-slider__quote { max-width: 100%; }
  .hero-slider__play { width: 92px; height: 92px; align-self: flex-end; }
  .hero-slider__ring { width: 92px; height: 92px; }
}
@media (max-width: 620px) {
  .hero-slider__play { display: none; }
}
@media (max-width: 620px) {
  /* On a phone the hero lines up with the header again — there is not enough
     width to indent it further. */
  .hero-slider { --hero-pad: var(--edge-pad); }
  .hero-slider__info { left: var(--hero-pad); right: var(--hero-pad); text-align: left; }
  .hero-slider__info-row { justify-content: flex-start; }
  .hero-slider__cta { margin-top: 32px; }
}

/* ---------- Trust bar ---------- */
.trustbar { background: var(--ink); color: var(--paper); border-top: 1px solid var(--edge); }
.trustbar ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.trustbar li {
  padding: 26px 20px;
  border-right: 1px solid var(--edge);
  font-size: 12px; letter-spacing: .06em;
  color: var(--hush); text-align: center;
}
.trustbar li:last-child { border-right: 0; }

/* ---------- AI-lift / statement block ---------- */
.statement { background: var(--mist); }
/* Where the statement runs straight into the pillars intro they share the same
   grey, so its bottom padding only adds dead space to that seam. */
.statement:has(+ .pillars-intro) { padding-bottom: 0; }
.statement__inner {
  max-width: 900px; margin-inline: auto;
  border-left: 1px solid var(--ink); padding-left: clamp(22px, 3vw, 40px);
}
.statement p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.45; margin: 0; max-width: none;
}

/* ===================================================================
   Pillar cards
   =================================================================== */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillar {
  background: var(--paper);
  padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column;
  transition: background .3s ease, color .3s ease;
}
.pillar:hover { background: var(--ink); color: var(--paper); }
.pillar:hover .pillar__num, .pillar:hover p { color: var(--hush); }
.pillar__num {
  font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .2em;
  color: var(--smoke); margin-bottom: 26px;
}
.pillar h3 { margin-bottom: 14px; }
.pillar p { font-size: 14px; color: var(--smoke); flex: 1; }
.pillar .textlink { align-self: flex-start; margin-top: 14px; }

/* ===================================================================
   Six pillars (home) — full-height intro, then a deck of cards the
   visitor scrolls or clicks through. Greyscale stand-in for the
   reference layout's warm browns.
   =================================================================== */
.pillars-intro {
  background: var(--mist);
  display: flex; align-items: center; justify-content: center;
  padding: 50px var(--pad);
  text-align: center;
  overflow: hidden;
}
.pillars-intro__inner { width: min(860px, 100%); margin-inline: auto; }

/* Size, weight, tracking and colour all come from the site's own .eyebrow,
   h2 and .lede — only the entrance animation and centring are special here. */
.pillars-intro .eyebrow {
  margin-bottom: 26px;
  opacity: 0; transform: translateY(22px);
  animation: pillarsIntroUp .9s cubic-bezier(.2, .8, .2, 1) .15s forwards;
}
.pillars-intro h2 {
  max-width: 780px; margin: 0 auto;
  opacity: 0; transform: translateY(45px);
  animation: pillarsIntroUp 1.15s cubic-bezier(.2, .8, .2, 1) .3s forwards;
}
.pillars-intro .lede {
  max-width: 640px; margin: 30px auto 0;
  opacity: 0; transform: translateY(28px);
  animation: pillarsIntroUp 1s cubic-bezier(.2, .8, .2, 1) .58s forwards;
}
@keyframes pillarsIntroUp { to { opacity: 1; transform: translateY(0); } }

.pillar-stack-section {
  background: var(--mist);
  /* The deck must fit one viewport once pinned, so the card height is derived
     from what is left after the header clearance and the stacked offsets. */
  --step:   clamp(44px, 6.4vh, 70px);
  --card-h: clamp(320px, calc(100vh - 106px - var(--step) * 5), 535px);
}
.pillar-sticky {
  display: flex; align-items: center; justify-content: center;
  padding: 35px var(--pad) 120px;
}
/* With JS the deck pins and the cards advance as this tall track scrolls by.
   Without it, the section is an ordinary block showing the dealt stack. */
.pillar-stack-section.is-scroll-driven .pillar-scroll { position: relative; height: calc(100vh + 5 * 60vh); }
/* The header clearance lives in the sticky offset rather than in padding, so
   it positions the pinned deck without also padding out the page flow above
   it before the deck pins. */
.pillar-stack-section.is-scroll-driven .pillar-sticky {
  position: sticky; top: 82px; height: calc(100vh - 82px);
  padding: 0 var(--pad) 24px;
}
.pillar-stack {
  position: relative;
  width: min(1325px, 100%);
  height: calc(var(--card-h) + var(--step) * 5);
  margin-inline: auto;
}
.pillar-card {
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--card-h);
  border-radius: 48px;
  overflow: hidden;
  color: var(--paper);
  background: #2a2a2a;
  cursor: pointer;
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1), background .8s ease;
}
/* Depth: the live card is true black, the deck behind it steps lighter. */
.pillar-card[data-pos="0"] { transform: translateY(0);                 z-index: 20; background: #000000; cursor: default; }
.pillar-card[data-pos="1"] { transform: translateY(var(--step));       z-index: 19; background: #1c1c1c; }
.pillar-card[data-pos="2"] { transform: translateY(calc(var(--step) * 2)); z-index: 18; background: #2a2a2a; }
.pillar-card[data-pos="3"] { transform: translateY(calc(var(--step) * 3)); z-index: 17; background: #383838; }
.pillar-card[data-pos="4"] { transform: translateY(calc(var(--step) * 4)); z-index: 16; background: #464646; }
.pillar-card[data-pos="5"] { transform: translateY(calc(var(--step) * 5)); z-index: 15; background: #545454; }

.pillar-card__content {
  position: absolute; left: 11.5%; top: 50%;
  transform: translateY(-43%);
  width: 38%; z-index: 5;
}
.pillar-card__content h3 {
  margin: 0 0 20px; max-width: 470px;
  font-size: clamp(30px, 3.2vw, 54px); line-height: 1.04;
}
.pillar-card__content p {
  margin: 0; max-width: 640px;
  font-size: 15px; line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}
.pillar-card__link {
  display: inline-block; margin-top: 26px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: opacity .2s ease;
}
.pillar-card__link:hover { opacity: .55; }

/* Only the live card shows its copy; the rest are hidden and unfocusable. */
.pillar-card__content > * { opacity: 0; transform: translateY(22px); }
.pillar-card:not([data-pos="0"]) .pillar-card__content { visibility: hidden; pointer-events: none; }
.pillar-card[data-pos="0"] .pillar-card__content h3   { animation: pillarReveal .75s cubic-bezier(.2, .8, .2, 1) .12s forwards; }
.pillar-card[data-pos="0"] .pillar-card__content p    { animation: pillarReveal .80s cubic-bezier(.2, .8, .2, 1) .24s forwards; }
.pillar-card[data-pos="0"] .pillar-card__link         { animation: pillarReveal .80s cubic-bezier(.2, .8, .2, 1) .36s forwards; }
@keyframes pillarReveal { to { opacity: 1; transform: translateY(0); } }

.pillar-card__image { position: absolute; overflow: hidden; z-index: 4; }
.pillar-card__image--one { width: 25%; height: 66%; top: 0;   left: 44%;   border-radius: 0 0 0 24px; }
.pillar-card__image--two { width: 25%; height: 76%; top: 28%; right: 9.5%; border-radius: 24px; }
.pillar-card__image img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.035);
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.pillar-card[data-pos="0"] .pillar-card__image img { transform: scale(1); }

.pillar-card__label {
  position: absolute; left: 11.5%; bottom: 27px;
  display: flex; align-items: center; gap: 22px;
  z-index: 6; white-space: nowrap;
  transition: opacity .45s ease;
}
.pillar-card__label .num  { font-size: 14px; font-weight: 500; opacity: .95; }
.pillar-card__label .name { font-size: 15px; font-weight: 600; }
.pillar-card[data-pos="0"] .pillar-card__label { opacity: 0; }

@media (max-width: 900px) {
  .pillar-stack-section {
    --step:   clamp(34px, 4.6vh, 70px);
    --card-h: clamp(320px, calc(100vh - 106px - var(--step) * 5), 600px);
  }
  .pillar-sticky { padding: 20px var(--pad) 100px; }
  .pillar-card { border-radius: 32px; }
  .pillar-card__content { left: 8%; width: 45%; top: 46%; }
  .pillar-card__image--one { left: 45%; width: 26%; height: 55%; }
  .pillar-card__image--two { right: 7%; width: 26%; height: 60%; top: 26%; }
  .pillar-card__label { left: 8%; bottom: 23px; }
}
@media (max-width: 620px) {
  /* A pinned deck leaves only ~25px of each stacked card showing on a phone,
     which cuts the labels in half. Below this width the deck unstacks into a
     plain vertical list and every card shows its own copy. */
  .pillar-stack-section.is-scroll-driven .pillar-scroll { height: auto; }
  .pillar-stack-section.is-scroll-driven .pillar-sticky { position: static; height: auto; }
  .pillar-sticky { padding: 40px var(--pad) 80px; }
  .pillar-stack { height: auto; display: grid; gap: 16px; }
  .pillar-stack .pillar-card[data-pos] {
    position: relative; height: auto; min-height: 560px;
    transform: none; z-index: auto;
    background: #000000; border-radius: 26px; cursor: default;
  }
  .pillar-stack .pillar-card .pillar-card__content {
    position: static; width: auto; transform: none;
    visibility: visible; pointer-events: auto;
    padding: 34px 25px 0;
  }
  .pillar-stack .pillar-card__content > * { opacity: 1; transform: none; animation: none; }
  .pillar-card__content h3 { font-size: 30px; }
  .pillar-card__content p { font-size: 14px; }
  .pillar-card__link { margin-top: 16px; }
  .pillar-card__image--one { left: 25px;  top: auto; bottom: 88px; width: 43%; height: 200px; border-radius: 18px; }
  .pillar-card__image--two { right: 25px; top: auto; bottom: 34px; width: 43%; height: 220px; border-radius: 18px; }
  .pillar-stack .pillar-card__image img { transform: none; }
  .pillar-card__label { display: none; }
}

/* ===================================================================
   Split
   =================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 84px); align-items: center; }
.split--top { align-items: start; }
.split__media img { width: 100%; }

.points { display: grid; gap: 0; margin: 30px 0; }
.point { border-top: 1px solid var(--line); padding: 18px 0; }
.point h4 { margin-bottom: 6px; }
.point p { font-size: 14px; color: var(--smoke); margin: 0; }
.section--ink .point { border-color: var(--edge); }
.section--ink .point p { color: var(--hush); }

/* ---------- Numbered list ---------- */
.steps { display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 78px 1fr; gap: clamp(16px, 2.5vw, 36px);
  border-top: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 30px) 0;
}
.step b { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--smoke); }
.step h4 { margin-bottom: 6px; }
.step p { font-size: 15px; color: var(--smoke); margin: 0; }
.section--ink .step { border-color: var(--edge); }
.section--ink .step p { color: var(--hush); }
.section--ink .step b { color: var(--hush); }

/* ---------- Therapy list ---------- */
.therapies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.therapy { background: var(--paper); padding: clamp(24px, 2.8vw, 38px); }
.therapy h3 { font-size: 21px; margin-bottom: 10px; }
.therapy p { font-size: 14px; color: var(--smoke); margin: 0; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checklist li {
  border-top: 1px solid var(--line);
  padding: 17px 0 17px 34px;
  position: relative;
  font-size: 15px;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 27px;
  width: 18px; height: 1px; background: currentColor;
}
.section--ink .checklist li { border-color: var(--edge); }

/* ---------- Doctors ---------- */
.doctors { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.doctor { border: 1px solid var(--edge); padding: clamp(26px, 3vw, 40px); }
/* With a portrait: photo on the left, details on the right. */
.doctor:has(.doctor__photo) {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px); align-items: start; padding: clamp(16px, 1.8vw, 22px);
}
.doctor__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #1a1a1a; }
.doctor__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transition: transform .8s var(--ease-soft);
}
.doctor:hover .doctor__photo img { transform: scale(1.04); }
.doctor__body { padding-top: 8px; }
.reviews-widget { min-height: 200px; }
.doctor__mark {
  width: 56px; height: 56px; border: 1px solid var(--edge); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 20px;
  margin-bottom: 24px;
}
.doctor h3 { margin-bottom: 8px; }
.doctor .quals { font-size: 13px; color: var(--hush); margin-bottom: 16px; }
.doctor p { font-size: 15px; color: var(--hush); margin: 0; }

/* ---------- Notice / warning panel ---------- */
.callout {
  border: 1px solid var(--ink);
  padding: clamp(24px, 3vw, 36px);
  max-width: 820px;
}
.callout h4 { margin-bottom: 12px; }
.callout p { margin: 0; font-size: 15px; }
.section--ink .callout { border-color: var(--edge); }

/* ---------- Centres ---------- */
.centres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.centre { background: var(--ink); padding: clamp(26px, 3vw, 40px); }
.centre h3 { margin-bottom: 8px; }
.centre p { color: var(--hush); font-size: 14px; margin: 0 0 16px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 24px 0;
  font-family: var(--display); font-weight: 300; font-size: clamp(19px, 1.9vw, 24px);
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 18px; color: var(--smoke); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 24px; margin: 0; color: var(--smoke); font-size: 15px; }
.section--ink .faq, .section--ink .faq details { border-color: var(--edge); }
.section--ink .faq details p { color: var(--hush); }
.section--ink .faq summary::after { color: var(--hush); }

/* ---------- Journal cards ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.posts--two { grid-template-columns: repeat(2, 1fr); }
.post-card { border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; transition: border-color .25s ease; }
.post-card:hover { border-color: var(--ink); }
.post-card__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); display: block; }
.post-card__art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.post-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post-card .tag {
  display: inline-block; align-self: flex-start;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--smoke); margin-bottom: 12px;
}
.post-card h3 { font-size: 21px; margin-bottom: 10px; }
.post-card p { font-size: 14px; color: var(--smoke); }
.post-card__foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--smoke);
}

/* ---------- Article ---------- */
.article { max-width: 720px; margin-inline: auto; }
.article__meta { font-size: 13px; color: var(--smoke); margin-bottom: 20px; }
.article__cover { margin: 38px 0; }
.article__cover img { width: 100%; filter: grayscale(1); }
.article__body p { font-size: 17px; line-height: 1.8; }
.article__body p:first-of-type { font-size: 20px; font-family: var(--display); font-weight: 300; line-height: 1.55; }

/* ===================================================================
   Forms
   =================================================================== */
.form-wrap { max-width: 620px; margin-inline: auto; border: 1px solid var(--line); padding: clamp(28px, 4vw, 52px); }
.form-wrap--wide { max-width: 820px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); background: var(--paper);
  font: inherit; font-size: 15px; color: var(--ink); border-radius: 0;
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field small { display: block; margin-top: 7px; font-size: 12px; color: var(--hush); letter-spacing: 0; text-transform: none; }
.field .checkbox { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.field .checkbox input { width: auto; margin-top: 4px; }

.notice { border: 1px solid var(--ink); padding: 15px 18px; margin-bottom: 24px; font-size: 14px; }
.notice--error { background: var(--ink); color: var(--paper); }
.notice--success { background: var(--mist); }

.form-foot { font-size: 14px; color: var(--smoke); margin-top: 22px; text-align: center; }

.panel { border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.data-list { display: grid; margin: 0; }
.data-list div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.data-list div:last-child { border-bottom: 0; }
.data-list dt { color: var(--smoke); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.data-list dd { margin: 0; }

/* ===================================================================
   Final CTA band
   =================================================================== */
.cta-band { background: var(--ink); color: var(--paper); text-align: center; position: relative; overflow: hidden; }
.cta-band__arc { position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: min(900px, 120%); opacity: .35; }
.cta-band__inner { position: relative; max-width: 760px; margin-inline: auto; }
.cta-band p { color: var(--hush); margin-inline: auto; }
.cta-band .hero__cta { justify-content: center; }

/* ===================================================================
   Footer
   =================================================================== */
.site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--edge); padding-block: clamp(56px, 7vw, 92px) 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 60px); }
.site-footer h4 { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--hush); margin-bottom: 22px; }
.site-footer p { color: var(--hush); font-size: 14px; max-width: 36ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer ul a { font-size: 14px; color: rgba(255,255,255,.85); }
.site-footer ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .brand img { height: 46px; margin-bottom: 20px; }

.subscribe { display: flex; border: 1px solid var(--edge); }
.subscribe input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px; color: #fff; font: inherit; font-size: 14px; }
.subscribe input::placeholder { color: var(--hush); }
.subscribe input:focus { outline: none; }
.subscribe button { border: 0; background: #fff; color: #000; padding: 14px 20px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.subscribe button:hover { opacity: .85; }

.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials a {
  width: 38px; height: 38px; border: 1px solid var(--edge); border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  transition: background .2s ease, color .2s ease;
}
.socials a:hover { background: #fff; color: #000; }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 68px); border-top: 1px solid var(--edge);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 12px; color: var(--hush);
}
.footer-bottom a:hover { color: #fff; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1080px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .trustbar ul { grid-template-columns: repeat(3, 1fr); }
  .trustbar li:nth-child(3) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 82px 0 auto 0;
    background: var(--ink); border-bottom: 1px solid var(--edge);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--edge-pad) 24px; display: none;
    max-height: calc(100vh - 82px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  /* The drop-down menu is a plain list, so undo the roll-up window and show
     only the first copy of each label. */
  .nav > a, .nav__trigger {
    width: 100%; height: auto; overflow: visible;
    padding: 15px 0; border-bottom: 1px solid var(--edge);
    font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.85);
  }
  .nav > a span + span, .nav__roll span + span { display: none; }
  .nav > a:hover span, .nav__trigger .nav__roll span { transform: none !important; }
  .nav__roll { height: auto; }
  .nav__trigger { justify-content: space-between; }

  /* In the mobile drawer the mega-menu opens as an accordion. */
  .nav__item { flex-direction: column; align-items: stretch; width: 100%; }
  .mega {
    position: static; display: none; width: auto; padding: 0;
    opacity: 1; visibility: visible; transform: none; transition: none;
    border-bottom: 1px solid var(--edge);
  }
  .nav__item--mega.is-open .mega { display: block; }
  .mega__inner {
    grid-template-columns: 1fr; gap: 0; padding: 6px 0 12px;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .mega__link { padding: 9px 0; }
  .mega__link:hover, .mega__link[aria-current="page"] { background: none; }
  .mega__icon { width: 36px; height: 36px; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }

  .split { grid-template-columns: 1fr; }
  .therapies { grid-template-columns: 1fr; }
  .doctors { grid-template-columns: 1fr; }
  .doctor:has(.doctor__photo) { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .centres { grid-template-columns: 1fr; }
  .posts, .posts--two { grid-template-columns: 1fr; }
  .data-list div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
  .trustbar ul { grid-template-columns: 1fr 1fr; }
  .trustbar li { border-right: 0; border-bottom: 1px solid var(--edge); }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .doctor:has(.doctor__photo) { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

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

  /* The rule above removes the animations that were going to supply the
     hero's finished state, so put that state back directly — otherwise the
     headline sits hidden behind its mask and the copy never fades in. */
  /* The hero copy starts at opacity 0 and relies on an animation to arrive,
     so put the finished state back. The slider itself stops on slide one. */
  .hero-slider__copy > *,
  .hero-slider__info,
  .hero-slider__photo.on { opacity: 1 !important; transform: none !important; }
  .hero-slider__photo.open { clip-path: none !important; }
  .btn:hover { transform: none !important; }
  .btn::after { display: none; }

  /* Same problem in the pillars section: these start at opacity 0 and rely on
     an animation to arrive, so without one they would never be seen. */
  .pillars-intro .eyebrow,
  .pillars-intro h2,
  .pillars-intro .lede,
  .pillar-card__content > * { opacity: 1 !important; transform: none !important; }
}