/* ==========================================================================
   SIGNATURE LAYER
   Loaded after system.css. This is what stops the site looking like a template.

   The organising idea: the craniosacral rhythm. A wave that moves at roughly
   8 cycles per minute, which is the real clinical rate. It runs through the
   hero, the section dividers and the loading of the page. It is the subject
   matter, not decoration.
   ========================================================================== */

:root {
  /* One cycle of the craniosacral rhythm. 8 cycles/min = 7.5s. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
}

/* --------------------------------------------------------------------------
   1. SCROLL PROGRESS RAIL
   -------------------------------------------------------------------------- */
.progress-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 100;
  background: transparent;
  pointer-events: none;
}
.progress-rail__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 100%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 90ms linear;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. CINEMATIC HERO
   -------------------------------------------------------------------------- */
.hero--cinematic {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(84px, 12vh, 132px) clamp(72px, 10vh, 108px);
  position: relative;
  overflow: hidden;
  background-color: var(--navy-deep);
  text-align: left;            /* centred-on-photo is the template. Left is editorial. */
}
.hero--cinematic .container,
.hero--cinematic .container--wide { max-width: 1240px; }
.hero--cinematic .hero__headline {
  margin-left: 0;
  margin-right: 0;
  max-width: 15ch;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: var(--s-4);
}
.hero--cinematic .hero__subhead,
.hero--cinematic .hero__kicker { margin-left: 0; margin-right: 0; text-align: left; }
.hero--cinematic .hero__subhead { max-width: 54ch; }
.hero--cinematic .hero__cta-group { justify-content: flex-start; }
@media (max-width: 720px) {
  .hero--cinematic .hero__headline { font-size: clamp(33px, 9.4vw, 52px); max-width: 100%; }
}
/* The photograph lives in its own layer so it can move independently. */
.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: 0;
  background-position: center 40%;
  background-size: cover;
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg,
      rgba(30, 27, 50, 0.90) 0%,
      rgba(34, 31, 56, 0.72) 46%,
      rgba(40, 34, 58, 0.40) 100%),
    linear-gradient(to bottom,
      rgba(26, 24, 44, 0.30) 0%,
      transparent 34%,
      rgba(26, 24, 44, 0.80) 100%),
    radial-gradient(90% 70% at 18% 46%, rgba(180, 77, 36, 0.16) 0%, transparent 70%);
}
.hero--cinematic > .container,
.hero--cinematic > .container--wide { position: relative; z-index: 2; }
.hero--cinematic::after { content: none; }

/* A large, very quiet wave behind the headline. */


.line-reveal > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1100ms var(--ease-out-expo);
}
.is-lit .line-reveal > span { transform: translateY(0); }
.is-lit .line-reveal:nth-child(2) > span { transition-delay: 120ms; }
.is-lit .line-reveal:nth-child(3) > span { transition-delay: 240ms; }

.fade-up-slow {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}
.is-lit .fade-up-slow { opacity: 1; transform: none; }
.is-lit .fade-up-slow--d1 { transition-delay: 420ms; }
.is-lit .fade-up-slow--d2 { transition-delay: 560ms; }
.is-lit .fade-up-slow--d3 { transition-delay: 700ms; }

/* Scroll cue, timed to the rhythm. */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: clamp(24px, 5vh, 48px);
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--on-dark-low);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.scroll-cue__line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--amber-light), transparent);
  animation: cue-slide var(--rhythm) ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue-slide {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. DISPLAY TEXT REVEAL (used on section headings)
   -------------------------------------------------------------------------- */
/* Headings are never hidden. The clip-path reveal that used to live here cost
   a visible heading on the athletes page and is not coming back. */
.reveal-text { clip-path: none !important; transform: none !important; opacity: 1 !important; }

/* --------------------------------------------------------------------------
   5. EDITORIAL GAP CARDS - big ghosted numerals
   -------------------------------------------------------------------------- */
.gap-card { position: relative; }
.gap-card__ghost {
  position: absolute;
  top: -18px; right: 8px;
  font-family: var(--font-display);
  font-size: 132px;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  transition: opacity 420ms var(--ease-out-expo), transform 420ms var(--ease-out-expo);
}
.gap-card:hover .gap-card__ghost { opacity: 0.10; transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   6. COUNT-UP STATS
   -------------------------------------------------------------------------- */
.countup { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. THE FIVE GRAMS PANEL
   The one interactive that is genuinely about the work: press and hold, and
   the dial tells you when you are at treatment pressure.
   -------------------------------------------------------------------------- */
.grams {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.grams__dial {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.07), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: border-color 260ms var(--ease-out-expo), box-shadow 260ms var(--ease-out-expo);
}
.grams__dial:hover { border-color: rgba(255, 204, 54, 0.42); }
.grams__dial.is-right {
  border-color: var(--amber-light);
  box-shadow: 0 0 0 1px var(--amber-light), 0 10px 30px rgba(24, 22, 42, 0.30);
}
.grams__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.grams__ring circle { fill: none; stroke-width: 3; }
.grams__ring .track { stroke: rgba(255,255,255,0.10); }
.grams__ring .value {
  stroke: var(--amber-light);
  stroke-linecap: round;
  transition: stroke-dashoffset 90ms linear, stroke 260ms var(--ease-out-expo);
}
.grams__readout { display: grid; justify-items: center; gap: 2px; z-index: 1; }
.grams__num {
  font-family: var(--font-display);
  font-size: 62px;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.grams__unit { font-size: 13px; letter-spacing: 0.06em; color: var(--text-muted); }
.grams__verdict {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-light);
  min-height: 1.4em;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 260ms var(--ease-out-expo);
}
.grams__verdict.is-on { opacity: 1; }
.grams__hint { font-size: var(--t-micro); color: var(--on-dark-low); text-align: center; margin-top: var(--s-4); }
@media (max-width: 860px) {
  .grams { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. BUTTONS - a light sweep on hover, no layout shift
   -------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-out-expo);
}
.btn:hover::before { transform: translateX(120%); }

/* --------------------------------------------------------------------------
   9. CARDS THAT FOLLOW THE CURSOR
   -------------------------------------------------------------------------- */
.lift {
  position: relative;
  transition: transform 420ms var(--ease-out-expo), box-shadow 420ms var(--ease-out-expo);
}
.lift::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease-out-expo);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(180, 77, 36, 0.09), transparent 62%);
}
.lift:hover::after { opacity: 1; }
.section--dark .lift::after, .section--deep .lift::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 204, 54, 0.11), transparent 62%);
}

/* --------------------------------------------------------------------------
   10. SECTION NUMBERING - quiet editorial spine
   -------------------------------------------------------------------------- */
.spine {
  position: fixed;
  left: max(16px, 2vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: grid;
  gap: 14px;
  pointer-events: auto;
}
.spine__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--navy-light);
  opacity: 0.34;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 260ms var(--ease-out-expo), transform 260ms var(--ease-out-expo), background 260ms;
  min-height: 0;
}
.spine__dot:hover { opacity: 0.8; transform: scale(1.3); }
.spine__dot.is-active { background: var(--amber); opacity: 1; transform: scale(1.5); }
@media (max-width: 1180px) { .spine { display: none; } }

/* --------------------------------------------------------------------------
   11. QUIETER, CLEANER SURFACES
   Fewer borders, more air. Boxes were doing the work whitespace should do.
   -------------------------------------------------------------------------- */
.gap-card, .card, .quote-card {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(42,40,65,0.04), 0 10px 30px rgba(42,40,65,0.05);
}
.gap-card:hover, .card:hover { box-shadow: 0 6px 18px rgba(42,40,65,0.07), 0 26px 60px rgba(42,40,65,0.10); }

.section:not(.section--tight) { padding-block: clamp(44px, 5.5vw, 84px); }
.hero__headline { letter-spacing: -0.003em; }

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   Everything above degrades to a static, fully legible page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  
  .line-reveal > span { transform: none !important; }
  .fade-up-slow { opacity: 1 !important; transform: none !important; }
  .reveal-text { clip-path: none !important; transform: none !important; }
  .hero__media { transform: none !important; }
  .btn::before { display: none; }
  .lift::after { display: none; }
}

/* --------------------------------------------------------------------------
   13. NO-JS FALLBACK
   -------------------------------------------------------------------------- */
.no-js .line-reveal > span { transform: none; }
.no-js .fade-up-slow { opacity: 1; transform: none; }
.no-js .reveal-text { clip-path: none; transform: none; }
.no-js .spine, .no-js .progress-rail { display: none; }

@media print {
  .progress-rail, .spine, .scroll-cue, 
  .line-reveal > span, .fade-up-slow, .reveal-text { transform: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* --------------------------------------------------------------------------
   14. LATE OVERRIDES (declared last so they win the cascade)
   -------------------------------------------------------------------------- */
.hero--cinematic .scroll-cue {
  left: auto;
  right: max(24px, 4vw);
  transform: none;
}

/* Top bar was wrapping into a cramped block. One quiet line, or nothing. */
.top-bar__inner {
  font-size: 12px;
  letter-spacing: 0.04em;
  gap: 8px 14px;
  padding-block: 11px;
}
.top-bar__inner p { margin: 0; max-width: none; }
@media (max-width: 720px) {
  .top-bar__inner { font-size: 12px; line-height: 1.5; }
}

/* The eyebrow should sit lighter against a big headline. */
.hero--cinematic .hero__eyebrow { margin-bottom: var(--s-5); }
.hero--cinematic .hero__kicker {
  font-family: var(--font-body);
  font-size: clamp(25px, 3vw, 36px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--white);
  margin-top: var(--s-5);
}

/* Hero must fit one screen: the call to action is the point of the fold. */
.hero--cinematic .hero__cta-group { margin-top: var(--s-6); }
.hero--cinematic .hero__kicker { margin-top: var(--s-3); margin-bottom: 0; }
@media (min-height: 720px) and (max-height: 900px) {
  .hero--cinematic .hero__headline { font-size: clamp(38px, 5.6vw, 69px); }
}
@media (max-height: 719px) {
  .hero--cinematic { min-height: auto; padding-block: clamp(72px,10vh,96px) clamp(56px,8vh,80px); }
  .hero--cinematic .hero__headline { font-size: clamp(40px, 6vw, 68px); }
  .scroll-cue { display: none; }
}

/* "CranioSacral" is a 12-character word: 15ch forces an ugly four-line break. */
.hero--cinematic .hero__headline { max-width: 19ch; }
@media (min-width: 1000px) {
  .hero--cinematic .hero__headline { max-width: 17ch; }
}

/* A long headline gets a smaller setting rather than a rewrite. */
.hero__headline--long { font-size: clamp(38px, 5.4vw, 66px) !important; max-width: 20ch !important; }
@media (max-height: 900px) {
  .hero__headline--long { font-size: clamp(36px, 4.8vw, 58px) !important; }
}

/* Belt and braces: if the stylesheet loads but the script never runs, content
   must not sit invisible. The script removes .no-js as its first action.
   transition:none matters as much as the values: a transition that never gets
   a frame (idle compositor, background tab) would otherwise leave these at
   their start value, which is opacity 0. */
.no-js .reveal,
.no-js .reveal-text,
.no-js .fade-up-slow,
.no-js .line-reveal > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   15. CAROLINE'S ROUND: tightening
   -------------------------------------------------------------------------- */

/* The numbers band is a rule, not a room. */
.section--tight { padding-block: clamp(30px, 3.4vw, 44px) !important; }
#numbers { border-block: 1px solid var(--border); background: var(--white); }
#numbers .stat-row { margin-top: 0; gap: var(--s-5); }
#numbers .stat__figure { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 2px; }
#numbers .stat__label { font-size: 13px; letter-spacing: 0.02em; }

/* The published-evidence video must never read as a blank white hole,
   whether YouTube loads or is blocked. */
.video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow-md);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame__fallback {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 8px;
  text-align: center; padding: var(--s-5);
  color: var(--on-dark-mid); font-size: var(--t-body-sm);
}
.video-frame iframe { position: absolute; z-index: 1; }

/* Destination cards: two clean panels instead of two stacked slabs. */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.path {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-6) var(--s-6);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.path:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,204,54,0.42); transform: translateY(-3px); }
.path__tag {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: none;
  color: var(--amber-light); margin-bottom: var(--s-4);
}
.path__headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25;
  color: var(--white); margin-bottom: var(--s-4);
}
.path__text { font-size: var(--t-body-sm); line-height: 1.68; color: var(--on-dark-mid); margin-bottom: var(--s-5); }
.path__list { list-style: none; display: grid; gap: 10px; margin-bottom: var(--s-6); }
.path__list li {
  position: relative; padding-left: 24px;
  font-size: var(--t-body-sm); color: var(--on-dark-mid); line-height: 1.5;
}
.path__list li::before { content: '\2192'; position: absolute; left: 0; color: var(--amber-light); font-weight: 700; }
.path .btn { margin-top: auto; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

/* Footer: centred and condensed to roughly a third of its old height. */
.footer { padding-block: var(--s-6) var(--s-5); text-align: center; }
.footer__brand {
  font-size: var(--t-body-lg); font-family: var(--font-display);
  letter-spacing: 0.02em; margin-bottom: 2px; line-height: 1.2;
}
.footer__meta {
  font-size: 13px; color: var(--on-dark-low);
  margin-bottom: var(--s-3); line-height: 1.5;
}
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px var(--s-4); margin-bottom: var(--s-3);
}
.footer__links a { font-size: 13px; color: var(--on-dark-mid); line-height: 1.5; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: var(--s-3); margin-inline: auto;
  font-size: 12.5px; line-height: 1.55; max-width: 100ch;
  color: rgba(255,255,255,0.40);
}

/* The dial now lives on a light section, so it needs light-context colours.
   The dark variants stay available for any dark section that uses it. */
.grams__dial {
  background:
    radial-gradient(circle at 50% 42%, rgba(62,59,90,0.05), transparent 62%),
    var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.grams__dial:hover { border-color: var(--amber); }
.grams__dial.is-right {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 8px 24px rgba(42, 40, 65, 0.16);
}
.grams__ring .track { stroke: var(--border); }
.grams__ring .value { stroke: var(--amber); }
.grams__num { color: var(--navy); }
.grams__unit { color: var(--text-muted); }
.grams__verdict { color: var(--amber); }
.grams__hint { color: var(--text-muted); }

.section--dark .grams__dial, .section--deep .grams__dial {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.07), transparent 62%),
    rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
}
.section--dark .grams__num, .section--deep .grams__num { color: var(--white); }
.section--dark .grams__unit, .section--deep .grams__unit,
.section--dark .grams__hint, .section--deep .grams__hint { color: var(--on-dark-low); }
.section--dark .grams__verdict, .section--deep .grams__verdict { color: var(--amber-light); }
.section--dark .grams__ring .track, .section--deep .grams__ring .track { stroke: rgba(255,255,255,0.10); }
.section--dark .grams__ring .value, .section--deep .grams__ring .value { stroke: var(--amber-light); }

/* The dial sits in a normal column now, so cap it sensibly. */
#what-it-looks-like .grams__dial { max-width: 250px; }

/* --------------------------------------------------------------------------
   HARDEN  — landmarks, focus, tap targets
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 200;
  background: var(--amber);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0; }

/* WCAG 2.5.8: a target that is not inline in a sentence needs 24x24 minimum.
   The footer and top-bar links sit in rows, so they are not inline. */
.footer__links a,
.top-bar__inner a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 3px;
}
.footer__links { gap: 6px var(--s-4); }

/* all-caps at length is hard work for a reader with cognitive fatigue */
.photo-strip__note--plain {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
}

/* Any link that sits in a row rather than inside a sentence is a target
   under WCAG 2.5.8 and needs 24x24. Links inside prose stay inline. */
.route__l a, .path__list a, .ticklist a, .dest-block__bullets a,
.footer__links a, .top-bar__inner a, .colophon__row a {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* Athletes headline sits a couple of points below the homepage's, so the
   two-line break reads as one thought rather than a wall. */
.hero__headline--mid { font-size: clamp(40px, 6.2vw, 74px) !important; }
@media (max-height: 900px) {
  .hero__headline--mid { font-size: clamp(38px, 5.6vw, 66px) !important; }
}
@media (max-width: 720px) {
  .hero__headline--mid { font-size: clamp(34px, 9vw, 52px) !important; }
}
/* the bolded phrase keeps the same face and size, weight only */
.hero__subhead strong { font-weight: 700; color: var(--white); }

/* --------------------------------------------------------------------------
   FOOTER, second pass. The three organisation names used to appear twice,
   once as plain text and again as links. They now appear once, as links.
   -------------------------------------------------------------------------- */
.footer__brand { margin-bottom: var(--s-5); }
.footer__links--primary,
.footer__links--orgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px var(--s-5);
  margin-bottom: var(--s-3);
}
.footer__links--primary a { font-size: 14px; font-weight: 700; color: var(--on-dark); }
.footer__links--orgs a { font-size: 13px; color: var(--on-dark-mid); }
.footer__links--primary a:hover,
.footer__links--orgs a:hover { color: var(--amber-light); }
.footer__place {
  font-size: 12.5px;
  color: var(--on-dark-low);
  margin-bottom: var(--s-4);
}

/* --------------------------------------------------------------------------
   Consistency pass: one heading voice, footer centred
   -------------------------------------------------------------------------- */
.bridge__head,
.photo-strip__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(25px, 2.7vw, 34px);
  line-height: 1.22;
  letter-spacing: 0.004em;
  margin-bottom: var(--s-5);
}
.bridge__head { color: var(--navy); }
.photo-strip__head {
  color: var(--white);
  text-align: center;
  max-width: none;
  margin: 0 auto var(--s-5);
}

/* the athletes page uses .label on dark; keep the single treatment there too */


/* footer: brand and place both centred with the rest */
.footer { text-align: center; }
.footer__brand,
.footer__place { text-align: center; margin-inline: auto; }
.footer__legal { text-align: center; }

/* the capsule is an inline box, so a centred section centres the box itself */
.center .section-label, .center .label { display: inline-block; }

/* Hero routes. Small and outlined so the page reads first, but still clearly
   buttons: the arrow sits inside the pill, not beside it. */
.hero--cinematic .hero__cta-group .btn {
  min-height: 40px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-width: 1px;
  background: transparent;
  box-shadow: none;
}
.hero--cinematic .hero__cta-group .btn--amber {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero--cinematic .hero__cta-group .btn--amber:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-deep);
}
.hero--cinematic .hero__cta-group .btn--yellow {
  color: var(--amber-light);
  border-color: var(--amber-light);
}
.hero--cinematic .hero__cta-group .btn--yellow:hover {
  background: var(--amber-light);
  border-color: var(--amber-light);
  color: #000;
}
.hero--cinematic .hero__cta-group .btn::after {
  content: '\2192';
  margin-left: 2px;
  font-weight: 700;
  transition: transform 200ms var(--ease-out-expo);
}
.hero--cinematic .hero__cta-group .btn:hover::after { transform: translateX(3px); }

/* Headings run to the same measure as the body text beneath them. A narrower
   heading measure was breaking short headings onto three cramped lines. */
h1, h2, h3, h4,
.bridge__head, .photo-strip__head, .path__headline, .route__h {
  max-width: var(--measure-px);
}
.hero__headline { max-width: 19ch; }          /* the hero is the one exception */
.center h2, .center h3 { margin-inline: auto; }
/* A capped heading inside a centred block must centre itself too, or it sits
   left of the text beneath it. Covers the inline-styled centred sections. */
.center h1, .center h4,
[style*="text-align: center"] h1,
[style*="text-align: center"] h2,
[style*="text-align: center"] h3,
[style*="text-align: center"] h4 { margin-inline: auto; }
/* A centred paragraph is still capped at the measure, so without this its box
   sits left of centre and the text inside it looks off. */
p[style*="text-align: center"],
.center p { margin-inline: auto; }
.photo-strip__head { max-width: var(--measure-px); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Pull quote (the Cochrane line on the professionals page).
   Runs the full container width with a clear paragraph space either side,
   and the reference below it sits at half the quote's size.
   -------------------------------------------------------------------------- */
.pull-quote {
  max-width: none;
  margin-block: var(--s-7);
}
.pull-quote p { max-width: none; margin-bottom: 0; }
.pull-quote cite {
  display: block;
  font-family: var(--font-body);
  font-size: 0.5em;          /* half the quote size, as asked */
  font-style: normal;
  line-height: 1.5;
  color: var(--text-light);
  margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   Byline under the portrait.
   -------------------------------------------------------------------------- */
.about__byline {
  margin-top: var(--s-3);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.about__byline span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--amber);
}

/* An inline link inside a path card, so "get in touch" reads as a link. */
.path__text a { color: var(--amber-light); text-decoration: underline; text-underline-offset: 2px; }
.path__text a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Contact dialog. Opened from "Get in Touch" in the footer.
   Closed by default so it never shows if the JS fails to load.
   -------------------------------------------------------------------------- */
.contact-modal[hidden] { display: none; }
.contact-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.contact-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(42, 40, 65, 0.62);
  backdrop-filter: blur(3px);
  border: 0; padding: 0; cursor: pointer;
}
.contact-modal__panel {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(42, 40, 65, 0.32);
  padding: var(--s-6);
}
.contact-modal__close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text-light); cursor: pointer;
}
.contact-modal__close:hover { background: var(--amber-wash); color: var(--amber); }
.contact-modal__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.2; color: var(--navy);
  margin-bottom: var(--s-4); padding-right: 32px;
}
.contact-modal__direct { display: grid; gap: 8px; margin-bottom: var(--s-5); }
.contact-modal__direct a {
  font-size: 16px; font-weight: 700; color: var(--amber);
  text-decoration: none;
}
.contact-modal__direct a:hover { text-decoration: underline; }
.contact-modal__rule {
  border: 0; border-top: 1px solid var(--border-soft);
  margin-block: var(--s-5) var(--s-5);
}
.contact-modal__field { display: block; margin-bottom: var(--s-4); }
.contact-modal__field span {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.contact-modal__field input,
.contact-modal__field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.contact-modal__field textarea { min-height: 110px; resize: vertical; }
.contact-modal__field input:focus,
.contact-modal__field textarea:focus {
  outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber);
}
.contact-modal__note { font-size: 13px; line-height: 1.55; color: var(--text-light); margin-top: var(--s-3); }

/* No-JS fallback: the footer link is href="#contact", so the dialog still
   opens from the URL fragment if site.js never runs. */
.contact-modal[hidden]:target { display: flex; }

/* The gap-analysis intro sits directly above the six cards, so it runs to the
   same width they do rather than stopping at the reading measure. */
#the-gaps h2, #the-gaps p { max-width: none; }

/* --------------------------------------------------------------------------
   "Why problems persist" runs as two columns so the long symptom list has an
   image beside it rather than dead margin. The figure is sticky, so it stays
   with the reader all the way down the list.
   -------------------------------------------------------------------------- */
.persist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-7);
  align-items: start;
}
.persist-figure {
  position: sticky;
  top: 100px;
  margin: 0;
}
.persist-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  /* The image is nearly three times taller than it is wide. Capping it to the
     viewport keeps it fully visible, which is what makes sticky work: an
     element taller than the screen just scrolls away instead of staying put. */
  max-height: calc(100vh - 150px);
  margin-inline: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
/* Below this the column is too narrow to carry a portrait image, so it stacks. */
@media (max-width: 1000px) {
  .persist-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .persist-figure { position: static; max-width: 420px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   A hairline where two light sections meet. The cream and the white differ by
   about four points of luminance, so without this the join is invisible and the
   page reads as one long block. Dark sections announce themselves, so they are
   left alone, and two sections of the same shade get nothing.
   -------------------------------------------------------------------------- */
.section:not(.section--alt):not(.section--dark):not(.section--deep) + .section--alt,
.section--alt + .section:not(.section--alt):not(.section--dark):not(.section--deep) {
  border-top: 1px solid var(--amber);
}