/* Reborn Health Collective
   Layout: sticky header; forest hero where the kintsugi bowl is mended with gold; alternating light bands in one
   1120px column; a forest closing band that mirrors the hero; deep forest footer.
   Two themes from one set of tokens: daylight ivory, and "forest night" for visitors whose device is set to dark. */

/* ------------------------------------------------------------------ fonts (self-hosted, Latin subset) */

/* ------------------------------------------------------------------ tokens */
:root {
  /* brand constants: the same in both themes */
  --forest: #1F2A24;
  --forest-lift: #2A382F;
  --gold: #C9A227;
  --gold-bright: #D9B43A;
  --ivory: #F2F4F0;
  --sand: #D5DED8;
  --sage: #4F6B5C;
  --sage-soft: #8FAE9C;

  /* theme (daylight) */
  --bg: #FFFFFF;
  --bg-alt: #F2F6F3;
  --surface: #FFFFFF;
  --surface-plain: #F2F6F3;
  --surface-raised: #FFFFFF;
  --field: #F7FAF8;
  --fg: #17201B;
  --fg-muted: #4A5751;
  --fg-faint: #5F6B65;
  --line: #D3DDD7;
  --card-line: #DCE5DF;
  --field-line: #8A968F;
  --accent-ink: #7A5E0A;
  --primary-bg: #1F2A24;
  --primary-fg: #F2F4F0;
  --primary-hover: #2A382F;
  --feature-bg: #1F2A24;
  --feature-line: #1F2A24;
  --raised-line: rgba(244, 239, 230, 0);
  --phone-bezel: #3B4741;
  /* one quiet colour for the step numbers */
  --num-1-bg: #1F2A24; --num-1-fg: #E4C153;
  --num-2-bg: #1F2A24; --num-2-fg: #E4C153;
  --num-3-bg: #1F2A24; --num-3-fg: #E4C153;
  --num-ring: transparent;
  --band-forest: #1F2A24;
  --band-footer: #161E1A;
  --focus: #7A5E0A;
  --shadow: rgba(22, 30, 26, 0.24);
  --selection: rgba(201, 162, 39, 0.32);

  /* text and lines that sit on forest, in both themes */
  --on-forest: #F2F4F0;
  --on-forest-muted: #C3CCC6;
  --on-forest-line: rgba(242, 244, 240, 0.16);
  --on-forest-glass: rgba(242, 244, 240, 0.07);

  /* setup notes: things to fill in before launch */
  --placeholder: #FFF3C9;
  --placeholder-line: #B99A2E;
  --placeholder-ink: #1F2A24;

  /* logo sprite colours */
  --logo-mark: #1F2A24;
  --logo-word: #1F2A24;
  --logo-sub: #1F2A24;
  --logo-gold: #C9A227;

  /* hero and closing band glows */
  --glow-deep: rgba(58, 98, 80, 0.9);
  --glow-sage: rgba(94, 127, 110, 0.7);
  --glow-gold: rgba(201, 162, 39, 0.4);
  --glow-warm: rgba(154, 68, 36, 0.24);

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --step-0: 1.0625rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.9rem, 3.6vw, 2.7rem);
  --step-4: clamp(2.6rem, 6vw, 4.9rem);

  /* shape. Corners: cards and panels 20px; questions, fields and small panels 12px; anything you press is a pill;
     icons sit in circles. Cards are raised on a soft shadow rather than outlined. */
  --radius: 20px;
  --radius-sm: 12px;
  --card-shadow: 0 0 0 1px var(--card-line), 0 12px 28px -24px var(--shadow);
  --card-gap: clamp(14px, 1.8vw, 20px);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --header-h: 68px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121A16; --bg-alt: #17201B; --surface: #1C2621; --surface-raised: #24302A; --field: #121A16;
    --fg: #E8ECE8; --fg-muted: #B3BDB6; --surface-plain: #1C2621; --fg-faint: #8E9A93; --line: #2E3A33; --field-line: #6E7C74; --accent-ink: #D9B43A;
    --primary-bg: #E8ECE8; --primary-fg: #17201B; --primary-hover: #F4F7F4; --feature-bg: #223029; --feature-line: rgba(201, 162, 39, 0.5); --raised-line: rgba(244, 239, 230, 0.12); --phone-bezel: #34433B;
    --num-1-bg: #24302A; --num-1-fg: #E4C153; --num-2-bg: #24302A; --num-2-fg: #E4C153; --num-3-bg: #24302A; --num-3-fg: #E4C153; --num-ring: rgba(201, 162, 39, 0.45); --card-line: rgba(244, 239, 230, 0.09);
    --band-forest: #1A2520; --band-footer: #0C120F; --focus: #D9B43A; --shadow: rgba(0, 0, 0, 0.5);
    --selection: rgba(217, 180, 58, 0.35);
    --logo-mark: #F2F4F0; --logo-word: #F2F4F0; --logo-sub: #D5DED8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121A16; --bg-alt: #17201B; --surface: #1C2621; --surface-raised: #24302A; --field: #121A16;
  --fg: #E8ECE8; --fg-muted: #B3BDB6; --surface-plain: #1C2621; --fg-faint: #8E9A93; --line: #2E3A33; --field-line: #6E7C74; --accent-ink: #D9B43A;
  --primary-bg: #E8ECE8; --primary-fg: #17201B; --primary-hover: #F4F7F4; --feature-bg: #223029; --feature-line: rgba(201, 162, 39, 0.5); --raised-line: rgba(244, 239, 230, 0.12); --phone-bezel: #34433B;
  --num-1-bg: #24302A; --num-1-fg: #E4C153; --num-2-bg: #24302A; --num-2-fg: #E4C153; --num-3-bg: #24302A; --num-3-fg: #E4C153; --num-ring: rgba(201, 162, 39, 0.45); --card-line: rgba(244, 239, 230, 0.09);
  --band-forest: #1A2520; --band-footer: #0C120F; --focus: #D9B43A; --shadow: rgba(0, 0, 0, 0.5);
  --selection: rgba(217, 180, 58, 0.35);
  --logo-mark: #F2F4F0; --logo-word: #F2F4F0; --logo-sub: #D5DED8;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 28px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.005em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 3px; }
strong { font-weight: 600; }
::selection { background: var(--selection); }
input, select, textarea, button { font: inherit; }
input, textarea { caret-color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--fg-muted); max-width: 60ch; }
.fill { background: var(--placeholder); border: 1px dashed var(--placeholder-line); color: var(--placeholder-ink); padding: 0 4px; border-radius: 4px; font-family: var(--font-body); font-size: 0.86rem; font-weight: 500; font-style: normal; letter-spacing: 0; overflow-wrap: anywhere; }
.setup-note { flex-basis: 100%; color: var(--fg-muted); font-size: 0.85rem; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 50; background: var(--primary-bg); color: var(--primary-fg); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.2s ease; }
.text-link::after { content: "\00a0\2192"; }
.hp { display: none; }

/* forest surfaces carry their own focus colour */
.hero, .closer, .site-footer, .area-feature, .fee.featured { --focus: var(--gold); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0.8em 1.4em; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out); }
.btn:active { transform: scale(0.97); }
/* elements with their own press state skip the grey tap flash on phones */
.btn, .menu-toggle, .motion-toggle, .tablist [role="tab"], .faq summary { -webkit-tap-highlight-color: transparent; }
.btn-gold { background: var(--gold); color: var(--forest); }
/* the longer booking button at the top of the Weight Management page: same height and text, more width */
.btn-lg { min-width: 260px; padding-inline: 2.6em; }
.btn-primary { background: var(--primary-bg); color: var(--primary-fg); }
.btn-ghost { border-color: var(--on-forest-line); background: var(--on-forest-glass); color: var(--on-forest); }
.btn-line { border-color: var(--fg); color: var(--fg); background: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* the main booking button glows softly in gold. On pages with a pause button the glow breathes; on pages without one
   (Weight Management) it rises once and stays steady. Still, but glowing, when motion is reduced */
.btn-glow { position: relative; }
.btn-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 16px 3px rgba(217, 180, 58, 0.6), 0 0 42px 12px rgba(201, 162, 39, 0.3); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn-glow::after { animation: glow-rise 1.6s ease-out 0.3s both; }
  html:has([data-motion-toggle]) .btn-glow::after { animation: glow-breathe 4.5s ease-in-out infinite; }
  :is(.hero, .closer):has(.colour-field.is-offscreen) .btn-glow::after { animation-play-state: paused; }
}
@keyframes glow-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes glow-rise { from { opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { background: var(--gold-bright); }
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-ghost:hover { background: var(--on-forest); border-color: var(--on-forest); color: var(--forest); }
  .btn-line:hover { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
  .text-link:hover { text-decoration-color: currentColor; }
}
/* every link underlined in gold darkens to its text colour under a mouse */
.details a, .faq-head a, .faq details a, .doc a, .doc-back, .crisis-line a, .site-footer a { transition: text-decoration-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .details a:hover, .faq-head a:hover, .faq details a:hover, .doc a:hover, .doc-back:hover, .crisis-line a:hover, .site-footer a:hover { text-decoration-color: currentColor; }
}

/* ------------------------------------------------------------------ logos (one sprite, coloured by the tokens above) */
.logo { display: block; flex: none; border-radius: 6px; }
.logo-svg { display: block; height: 44px; width: auto; }
.logo-collective { aspect-ratio: 753.99 / 215.93; }
.logo-wellbeing { aspect-ratio: 1012.05 / 215.93; }
.logo-work-wellbeing { aspect-ratio: 804.51 / 215.93; }
.logo-vocational { aspect-ratio: 1236.83 / 215.93; }
.logo-weight { aspect-ratio: 794.51 / 215.93; }
.logo-weight-clinic { aspect-ratio: 972.75 / 215.93; }

/* ------------------------------------------------------------------ header and menu */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); padding-block: 10px; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.nav-links a, .nav-phone { display: block; padding-block: 6px; font-size: 0.95rem; font-weight: 500; text-decoration: none; white-space: nowrap; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nav-phone { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover, .nav-phone:hover { text-decoration-line: underline; } }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, transform 0.16s var(--ease-out); }
.menu-toggle:active { transform: scale(0.97); }
.menu-icon { position: relative; width: 16px; height: 10px; }
/* the two bars become a cross by transform alone, so nothing is laid out again while they move */
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.22s var(--ease-out); }
.menu-icon::before { transform: translateY(-4px) rotate(0deg); }
.menu-icon::after { transform: translateY(4px) rotate(0deg); }
.site-header[data-menu="open"] .menu-icon::before { transform: translateY(0) rotate(45deg); }
.site-header[data-menu="open"] .menu-icon::after { transform: translateY(0) rotate(-45deg); }
@media (max-width: 1100px) { .nav-phone { display: none; } }
@media (max-width: 920px) {
  .nav { margin-left: auto; }
  .js .menu-toggle { display: inline-flex; order: 2; }
  .js .nav-links { display: none; }
  .js .site-header[data-menu="open"] .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 0; padding: 8px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px -18px var(--shadow); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
  .js .site-header[data-menu="open"] .nav-links a { padding-block: 13px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .js .site-header[data-menu="open"] .nav-links li:last-child a { border-bottom: 0; }
  @starting-style { .js .site-header[data-menu="open"] .nav-links { opacity: 0; transform: translateY(-6px); } }
  /* without script the links simply wrap under the logo */
  html:not(.js) .header-row { flex-wrap: wrap; }
  html:not(.js) .nav { flex-wrap: wrap; row-gap: 4px; }
  html:not(.js) .nav-links { flex-wrap: wrap; gap: 4px 18px; }
}
@media (max-width: 760px) { .nav-cta { display: none; } }
@media (max-width: 480px) { .logo-svg { height: 38px; } }
@media (max-width: 380px) { .header-row { gap: 12px; } .site-header .logo-svg { height: 32px; } .menu-toggle { padding: 0 14px; } }

/* ------------------------------------------------------------------ moving colour field (hero and closing band) */
.hero, .closer { position: relative; isolation: isolate; background: var(--band-forest); color: var(--on-forest); }
.colour-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.colour-field span { position: absolute; border-radius: 50%; animation-duration: 40s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.colour-field .c1 { width: 46rem; height: 46rem; left: -16rem; top: -20rem; background: radial-gradient(closest-side, var(--glow-deep), transparent); animation-name: drift-1; }
.colour-field .c2 { width: 40rem; height: 40rem; right: -12rem; top: -16rem; background: radial-gradient(closest-side, var(--glow-sage), transparent); animation-name: drift-2; }
.colour-field .c3 { width: 36rem; height: 36rem; right: 2rem; bottom: -20rem; background: radial-gradient(closest-side, var(--glow-gold), transparent); animation-name: drift-3; }
.colour-field .c4 { width: 32rem; height: 32rem; left: 28%; bottom: -24rem; background: radial-gradient(closest-side, var(--glow-warm), transparent); animation-name: drift-4; }
.closer .colour-field span { animation-delay: -20s; }
.colour-field.is-offscreen span { animation-play-state: paused; }
/* the moving lights are switched off: the forest sections stay a still, solid green (the box stays, so the button glow still pauses off screen) */
.colour-field span { display: none; }
/* the colours keep moving, but a veil of the band colour softens them behind the words, most on tablets and phones
   where the words cover the whole band, so text stays readable at every frame */
.colour-field::after { content: ""; position: absolute; inset: 0; background: var(--band-forest); opacity: var(--field-veil, 0.18); }
@media (max-width: 1100px) { .colour-field { --field-veil: 0.52; } }
/* a small control pauses the endless decorative motion; the choice is remembered on the device */
.motion-toggle { display: none; }
.js .motion-toggle { position: absolute; right: max(16px, calc((100% - 1120px) / 2)); z-index: 1; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--on-forest-line); border-radius: 50%; background: var(--on-forest-glass); color: var(--on-forest); cursor: pointer; transition: background-color 0.2s ease, transform 0.16s var(--ease-out); }
.hero .motion-toggle { bottom: 20px; }
.closer .motion-toggle { top: 20px; }
.motion-toggle:active { transform: scale(0.95); }
/* pause and play share one spot and blur into each other; keyed to the page state, so a saved choice shows
   from the first frame without animating */
.motion-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: currentColor; transition: opacity 0.2s ease, transform 0.2s var(--ease-out), filter 0.2s ease; }
.motion-toggle .icon-play, html[data-motion="paused"] .motion-toggle .icon-pause { opacity: 0; transform: scale(0.8); filter: blur(3px); }
html[data-motion="paused"] .motion-toggle .icon-play { opacity: 1; transform: none; filter: none; }
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover { background: rgba(244, 239, 230, 0.14); } }
@media (prefers-reduced-motion: reduce) { .js .motion-toggle { display: none; } }
html[data-motion="paused"] .colour-field span, html[data-motion="paused"] .btn-glow::after, html[data-motion="paused"] .kintsugi-glow, html[data-motion="paused"] .map .glint, html[data-motion="paused"] .map .glint-halo { animation-play-state: paused !important; }
@media (max-width: 700px) {
  .colour-field .c1 { width: 30rem; height: 30rem; left: -12rem; top: -12rem; }
  .colour-field .c2 { width: 26rem; height: 26rem; right: -10rem; top: -8rem; }
  .colour-field .c3 { width: 24rem; height: 24rem; right: -6rem; bottom: -12rem; }
  .colour-field .c4 { width: 22rem; height: 22rem; left: 10%; bottom: -14rem; }
}
/* Each keyframe step lasts 10 seconds: the colours drift slowly to a new place, settle, then move on. */
@keyframes drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(12rem, 6rem) scale(1.1); } 50% { transform: translate(4rem, 14rem) scale(0.92); } 75% { transform: translate(-4rem, 5rem) scale(1.05); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-10rem, 8rem) scale(0.94); } 50% { transform: translate(-16rem, -2rem) scale(1.12); } 75% { transform: translate(-5rem, 10rem) scale(1); } }
@keyframes drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-13rem, -7rem) scale(1.12); } 50% { transform: translate(-5rem, -15rem) scale(1); } 75% { transform: translate(6rem, -6rem) scale(0.9); } }
@keyframes drift-4 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(8rem, -8rem) scale(1.06); } 50% { transform: translate(-6rem, -12rem) scale(0.96); } 75% { transform: translate(-10rem, -4rem) scale(1.04); } }

/* ------------------------------------------------------------------ hero */
.hero-main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(28px, 4vw, 44px) 56px; align-items: center; padding-block: clamp(40px, 6vw, 72px); }
.hero-copy { min-width: 0; }
.hero h1 { margin-bottom: 22px; font-size: var(--step-4); line-height: 1.06; color: var(--on-forest); }
.hero h1 em, .closer h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero .lede { color: var(--on-forest-muted); max-width: 54ch; }
/* the clinic name sits above the main heading */
.hero-name { margin: 0 0 16px; color: var(--gold); font-size: 0.9rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; }
.hero .actions { margin-top: 32px; }
/* reassurances under the buttons: a gold check badge and brighter, larger text; one per line on phones */
.ticks { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--on-forest); font-size: 1rem; font-weight: 500; }
.ticks li { display: inline-flex; align-items: center; gap: 10px; }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 12.6l3.6 3.5 7.3-8' fill='none' stroke='%231F2A24' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (max-width: 560px) { .ticks { flex-direction: column; gap: 12px; } }
/* the hero copy settles in once as the page opens, a beat apart; skipped when motion is reduced or paused */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .hero-copy > * { animation: settle-in 0.6s var(--ease-out) backwards; }
  html:not([data-motion="paused"]) .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  html:not([data-motion="paused"]) .hero-copy > :nth-child(3) { animation-delay: 140ms; }
  html:not([data-motion="paused"]) .hero-copy > :nth-child(n + 4) { animation-delay: 210ms; }
}
@keyframes settle-in { from { opacity: 0; transform: translateY(10px); } }

/* the kintsugi bowl: the gold seam flows into the crack once, as the page opens */
.hero-mark { margin: 0; display: grid; justify-items: center; gap: 20px; text-align: center; color: var(--on-forest); }
.kintsugi { display: block; width: min(340px, 100%); height: auto; overflow: visible; }
.kintsugi-seam { fill: var(--gold); }
/* the gold seam glows softly, like the booking button, and breathes in step with it where the page has a pause
   button (steady otherwise); the glow arrives once the seam has drawn in (still when motion is reduced or paused) */
.kintsugi-glow { fill: #E4C153; stroke: #E4C153; stroke-width: 2.2; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .kintsugi-glow-in { opacity: 0; animation: glow-arrive 0.9s ease 2.1s forwards; }
  html:has([data-motion-toggle]) .kintsugi-glow { animation: glow-breathe 4.5s ease-in-out infinite; }
  .hero:has(.colour-field.is-offscreen) .kintsugi-glow { animation-play-state: paused; }
}
@keyframes glow-arrive { to { opacity: 1; } }
.hero-mark figcaption { max-width: 30ch; color: var(--on-forest); font-size: 0.9rem; }
.hero-mark strong { color: var(--on-forest); }
@media (prefers-reduced-motion: no-preference) {
  .kintsugi-seam { clip-path: inset(0 0 100% 0); animation: mend 1.9s var(--ease-in-out) 0.5s forwards; }
}
@keyframes mend { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 900px) {
  .hero-main { grid-template-columns: minmax(0, 1fr); padding-block: 44px 52px; }
  .hero-mark { display: none; }
}

/* ------------------------------------------------------------------ bands */
.band { --section-bg: var(--bg); background: var(--section-bg); padding-block: clamp(64px, 9vw, 108px); }
.band.alt { --section-bg: var(--bg-alt); }
.band:not(.alt) { --surface: var(--surface-plain); }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 4vw, 44px); }
.run-in { color: var(--fg); font-weight: 600; }

/* why reborn (weight management): the Reborn wordmark in the heading, a short video beside the introduction,
   then the reasons in brief */
.why-top { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.why-head { display: grid; gap: 16px; }
.why-wordmark { display: inline-block; width: auto; height: 0.78em; aspect-ratio: 421.1 / 102.0; vertical-align: baseline; overflow: visible; }
.why-video { margin: 0; display: grid; gap: 12px; min-width: 0; }
.video-frame { display: grid; place-content: center; justify-items: center; gap: 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: radial-gradient(120% 100% at 25% 15%, var(--forest-lift), var(--forest) 65%); color: var(--on-forest); box-shadow: 0 0 0 1px var(--raised-line), 0 24px 48px -28px var(--shadow); }
.video-play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gold); color: var(--forest); box-shadow: 0 0 0 10px rgba(201, 162, 39, 0.18); }
.video-play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.why-video figcaption { color: var(--fg-muted); font-size: 0.92rem; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 2.6vw, 36px); }
.why-list li { display: grid; gap: 8px; align-content: start; min-width: 0; }
.why-icon { width: 32px; height: 32px; margin-bottom: 6px; fill: var(--accent-ink); }
.why-list h3 { font-size: 1.22rem; }
.why-list p { color: var(--fg-muted); font-size: 1rem; line-height: 1.6; }
@media (max-width: 1000px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .why-top { grid-template-columns: minmax(0, 1fr); } }
.why-top:not(:has(.why-video)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 560px) {
  .video-play { width: 60px; height: 60px; }
  .why-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .why-list li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .why-icon { grid-row: span 2; margin: 2px 0 0; }
}

/* how it works: three steps, each in its own card */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.steps li { display: grid; justify-items: center; align-content: start; gap: 10px; min-width: 0; padding: clamp(28px, 3vw, 36px) clamp(22px, 2.4vw, 30px) clamp(30px, 3.2vw, 38px); border-radius: var(--radius); background: var(--surface); text-align: center; box-shadow: var(--card-shadow); }
.steps .num { width: 56px; height: 56px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 50%; background: var(--num-bg); color: var(--num-fg); box-shadow: inset 0 0 0 1px var(--num-ring, transparent); font-family: var(--font-display); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.steps li:nth-child(3n + 1) { --num-bg: var(--num-1-bg); --num-fg: var(--num-1-fg); }
.steps li:nth-child(3n + 2) { --num-bg: var(--num-2-bg); --num-fg: var(--num-2-fg); }
.steps li:nth-child(3n + 3) { --num-bg: var(--num-3-bg); --num-fg: var(--num-3-fg); }
.steps h3 { font-size: 1.3rem; }
.steps p { color: var(--fg-muted); max-width: 34ch; line-height: 1.62; }
@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .steps li { padding: 26px 22px 28px; }
}

/* services: tabs on the front page */
.tablist { display: none; }
.js .tablist { position: relative; display: inline-flex; gap: 4px; max-width: 100%; margin-bottom: 36px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.tablist [role="tab"], .tab-ghost > span { padding: 0.7em 1.25em; border-radius: 999px; font-size: 0.95rem; font-weight: 600; line-height: 1.25; text-align: center; }
.tablist [role="tab"] { border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out); }
.tablist [role="tab"]:active { transform: scale(0.97); }
.tablist [role="tab"][aria-selected="true"] { background: var(--primary-bg); color: var(--primary-fg); }
@media (hover: hover) and (pointer: fine) { .tablist [role="tab"][aria-selected="false"]:hover { color: var(--fg); } }
/* the chosen tab: site.js lays a dark copy of the labels over the tabs and clips it to the chosen one, so the pill
   and its light text slide across together instead of two pills crossfading */
.tab-ghost { position: absolute; inset: 0; display: flex; gap: 4px; padding: 5px; background: var(--primary-bg); color: var(--primary-fg); pointer-events: none; user-select: none; transition: clip-path 0.25s ease; }
.tab-ghost > span { display: flex; align-items: center; justify-content: center; }
.has-ghost [role="tab"][aria-selected="true"] { background: transparent; color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .tab-ghost { transition: none; } }
.tab-panel + .tab-panel { margin-top: 64px; }
.js .tab-panel + .tab-panel { margin-top: 0; }
/* a newly chosen panel settles in; the one it replaces leaves at once */
.js .tab-panel { transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
@starting-style { .js .tab-panel { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { @starting-style { .js .tab-panel { transform: translateY(6px); } } }
.service-panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.service-intro { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 901px) { .service-intro { position: sticky; top: calc(var(--header-h) + 40px); } }
.service-intro .logo-svg { height: 58px; }
.service-intro p { color: var(--fg-muted); font-size: var(--step-1); line-height: 1.55; }
.area-feature .text-link { justify-self: start; margin-top: 8px; color: var(--on-forest); }
@media (max-width: 900px) {
  .service-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .js .tablist { display: flex; border-radius: calc(var(--radius-sm) + 6px); }
  .tablist [role="tab"], .tab-ghost > span { flex: 1; border-radius: var(--radius-sm); }
}

/* common areas (weight management): one card per area, easy to scan */
.area-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.area-cards li { display: grid; gap: 8px; align-content: start; min-width: 0; padding: clamp(22px, 2.4vw, 28px); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.area-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--accent-ink); }
.area-icon svg { width: 24px; height: 24px; fill: currentColor; }
.area-cards h3 { font-size: 1.2rem; }
/* the short version: icon and name side by side, no description */
.area-cards.is-compact li { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 18px 22px; }
.area-cards.is-compact .area-icon { margin-bottom: 0; }
.area-cards.is-compact h3 { font-size: 1.1rem; }
.area-cards p { color: var(--fg-muted); font-size: 1rem; line-height: 1.6; }
.area-cards > .area-feature { grid-column: 1 / -1; background: var(--feature-bg); color: var(--on-forest); box-shadow: 0 0 0 1px var(--feature-line), 0 18px 36px -22px var(--shadow); }
.area-cards > .area-feature .area-icon { color: var(--gold); }
.area-cards .area-feature h3 { font-size: 1.35rem; }
.area-cards .area-feature p { max-width: 62ch; color: var(--on-forest-muted); }
.service-panel .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .area-cards, .service-panel .area-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .area-cards li > :not(.area-icon) { grid-column: 2; }
  .area-cards li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 18px 20px; }
  .area-icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .area-icon svg { width: 22px; height: 22px; }
}

/* interdisciplinary plan (weight management).
   Wide screens: seven phones around the centre phone, joined by gold seams; positions are in units of
   1% of the diagram's width (cqw) so the seams in the SVG line up exactly.
   Narrow screens: one list, with a gold seam that site.js draws from the logo through each part in turn. */
.plan-map { margin: 0; display: grid; gap: clamp(28px, 4vw, 44px); }
.map { position: relative; container-type: inline-size; aspect-ratio: 100 / 116; }
.map-items { margin: 0; padding: 0; list-style: none; }
.map-item { position: absolute; left: calc((var(--x) - 2.5) * 1cqw); top: calc(var(--y) * 1cqw); z-index: 1; width: 16cqw; display: grid; gap: 0.35cqw; justify-items: center; text-align: center; }
.map-item h3 { margin-top: 1cqw; font-size: clamp(15px, 1.65cqw, 19px); }
.map-item p { color: var(--fg-muted); font-size: clamp(13px, 1.25cqw, 14.5px); line-height: 1.5; }
.map-dot { display: none; }
.map-phone { width: 11cqw; aspect-ratio: 230 / 508; overflow: hidden; border: 0.65cqw solid var(--phone-bezel); border-radius: 2.3cqw; background: var(--surface); box-shadow: 0 2.4cqw 3.6cqw -2.2cqw var(--shadow); }
.map-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-phone.is-placeholder { display: grid; align-content: center; justify-items: center; gap: 1.4cqw; background: var(--bg-alt); color: var(--accent-ink); }
.map-icon { width: 4cqw; height: 4cqw; fill: currentColor; }
.map-phone .fill { font-size: clamp(9px, 0.82cqw, 11px); }
.map-centre { position: absolute; left: 41.5cqw; top: 17.2cqw; z-index: 1; width: 17cqw; }
.map-centre::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 153%; aspect-ratio: 1; border: 1px solid var(--feature-line); border-radius: 20%; background: radial-gradient(circle at 50% 38%, var(--forest-lift), var(--feature-bg) 70%); transform: translate(-50%, -50%) rotate(45deg); }
.centre-phone { width: 100%; display: grid; align-content: center; justify-items: center; gap: 1.6cqw; border-color: var(--sand); border-width: 0.8cqw; border-radius: 3.2cqw; background: var(--forest); color: var(--ivory); transform: rotate(-6deg); box-shadow: 0 3cqw 5cqw -2.5cqw rgba(12, 18, 15, 0.55); --logo-word: var(--ivory); --logo-sub: var(--sand); --logo-gold: var(--gold); }
.hub-mark { width: 52%; height: auto; overflow: visible; }
.hub-seam { fill: var(--gold); }
.hub-word { width: 80%; height: auto; aspect-ratio: 522.9 / 161.1; }
/* the clinic wordmark is longer, so it takes a little more of the width to keep "Reborn" a similar size */
.hub-word.is-clinic { width: 92%; aspect-ratio: 701.1 / 161.1; }
.map-seams, .map-spine { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-seams { z-index: 2; }
.map-spine { display: none; z-index: 0; }
.map-seams path, .map-spine path { fill: none; stroke: var(--gold); stroke-linecap: round; stroke-linejoin: round; }
.map-seams path { stroke-width: 0.22; }
.map-spine path { stroke-width: 2; }
.map-seams circle { fill: var(--gold); stroke: var(--section-bg); stroke-width: 0.22; }
/* the gold seams glow softly and stay still (no travelling light) */
.map { --seam-glow: rgba(217, 180, 58, 0.55); --seam-glow-soft: rgba(201, 162, 39, 0.28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map { --seam-glow: rgba(242, 207, 110, 0.5); --seam-glow-soft: rgba(217, 180, 58, 0.26); } }
:root[data-theme="dark"] .map { --seam-glow: rgba(242, 207, 110, 0.5); --seam-glow-soft: rgba(217, 180, 58, 0.26); }
.map-seams, .map-spine { filter: drop-shadow(0 0 3px var(--seam-glow)) drop-shadow(0 0 9px var(--seam-glow-soft)); }
.map .glint, .map .glint-halo { display: none; }
.plan-map figcaption { justify-self: center; max-width: 62ch; color: var(--fg-muted); text-align: center; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .map[data-armed] .map-seams path:not([class]), .map[data-armed] .map-spine path:not([class]) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .map[data-armed] .map-seams circle { opacity: 0; }
  .map[data-armed] .hub-seam { clip-path: inset(0 0 100% 0); }
  .map[data-armed]:not(.is-joined) .map-dot { border-color: var(--line); color: var(--fg-faint); }
  /* wide screens: each crack grows from its phone into the centre, then the centre crack mends, like the hero bowl */
  .map[data-armed].is-joined .map-seams path:not([class]) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i, 0) * 160ms); }
  .map[data-armed].is-joined .map-seams circle { opacity: 1; transition: opacity 0.4s ease calc(1.3s + var(--i, 0) * 160ms); }
  .map[data-armed].is-joined .hub-seam { clip-path: inset(0 0 0 0); transition: clip-path 1.9s var(--ease-in-out) 1.4s; }
  /* narrow screens: the seam runs down the list and each part lights up as it arrives */
  .map[data-armed].is-joined .map-spine path:not([class]) { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(0.45, 0, 0.55, 1) 0.2s; }
  .map[data-armed].is-joined .map-dot { transition: border-color 0.4s ease, color 0.4s ease; transition-delay: calc(0.45s + var(--i, 0) * 0.3s); }
}
@media (max-width: 1000px) {
  .map { aspect-ratio: auto; container-type: normal; max-width: 560px; }
  .map-seams, .map-item .map-phone { display: none; }
  .map-spine { display: block; }
  .map-centre { position: relative; left: auto; top: auto; width: 116px; margin: 26px auto 48px; }
  .centre-phone { gap: 9px; border-width: 5px; border-radius: 20px; }
  .map-items { display: grid; }
  .map-item { position: static; width: auto; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "dot title" "dot desc"; column-gap: 18px; row-gap: 2px; justify-items: start; align-items: center; padding-block: 12px; text-align: left; }
  .map-dot { grid-area: dot; position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--gold); border-radius: 50%; background: var(--surface); color: var(--accent-ink); }
  .map-dot-icon { width: 24px; height: 24px; fill: currentColor; }
  .map-item h3 { grid-area: title; align-self: end; margin-top: 0; font-size: 1.08rem; }
  .map-item p { grid-area: desc; align-self: start; font-size: 0.94rem; }
  .plan-map figcaption { justify-self: start; text-align: left; }
}

/* fees: the three prices sit on one line */
.fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.fee { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.fee h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.fee .price { align-self: end; font-family: var(--font-display); font-size: 2.5rem; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fee .price small { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--fg-muted); }
.fee p:not(.price) { color: var(--fg-muted); font-size: 0.97rem; }
.fee.featured { background: var(--feature-bg); color: var(--on-forest); box-shadow: 0 0 0 1px var(--feature-line), 0 18px 36px -22px var(--shadow); }
.fee.featured p:not(.price), .fee.featured .price small { color: var(--on-forest-muted); }
.fee-note { margin-top: 18px; color: var(--fg-muted); font-size: 0.92rem; }
@media (max-width: 860px) { .fees { grid-template-columns: minmax(0, 1fr); } .fee { grid-row: auto; grid-template-rows: none; } }

/* referrers */
.refer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.refer-text { display: grid; gap: 14px; }
.refer-text p { max-width: 60ch; color: var(--fg-muted); }
.refer-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.referrer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.panel { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.panel ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.panel li::marker { color: var(--accent-ink); }
.referrer-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
@media (max-width: 860px) { .refer, .referrer-grid { grid-template-columns: minmax(0, 1fr); } }

/* psychologist */
.person { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; display: grid; place-items: center; padding: 20px; border: 1.5px dashed var(--placeholder-line); border-radius: var(--radius); background: var(--bg-alt); color: var(--fg-muted); font-size: 0.95rem; text-align: center; }
.person-text { display: grid; gap: 14px; min-width: 0; }
.role { margin-top: -6px; color: var(--fg-muted); font-weight: 600; }
.person-text > p:not(.role) { max-width: 62ch; }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg-muted); font-size: 0.9rem; }
.quals { list-style: none; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; color: var(--fg-muted); font-size: 0.94rem; line-height: 1.5; }
@media (max-width: 560px) { .quals { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .person { grid-template-columns: minmax(0, 1fr); gap: 28px; } .portrait { max-width: 240px; } }

/* questions */
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 14px; }
.faq-head p { color: var(--fg-muted); }
.faq-head a { font-weight: 600; text-decoration-color: var(--gold); }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.15s ease, transform 0.16s var(--ease-out); }
/* each question answers the press; the card is wide, so it gives a little less than a button */
.faq details:has(> summary:active) { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .faq details:has(> summary:hover) { border-color: var(--field-line); } }
.faq summary { position: relative; padding: 18px 56px 18px 22px; border-radius: var(--radius-sm); font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
/* plus that turns into a minus */
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent-ink); transition: transform 0.22s var(--ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 22px 20px; color: var(--fg-muted); }
.faq details a { color: var(--fg); text-decoration-color: var(--gold); }
/* the answer fades in as it opens; kept when motion is reduced, because it shows what opened */
@supports selector(::details-content) {
  .faq details::details-content { opacity: 0; }
  .faq details[open]::details-content { opacity: 1; transition: opacity 0.24s ease 0.04s; }
}
/* where the height can animate: open in 0.28s; close faster, with the words fading first */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height 0.2s var(--ease-out), opacity 0.12s ease, content-visibility 0.2s allow-discrete; }
    .faq details[open]::details-content { height: auto; transition: height 0.28s var(--ease-out), opacity 0.24s ease 0.04s, content-visibility 0.28s allow-discrete; }
  }
}
@media (max-width: 860px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .faq-head { position: static; } }

/* closing band: book, call back, contact details */
.closer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(36px, 5vw, 64px); align-items: start; padding-block: clamp(64px, 9vw, 108px) 28px; }
.closer-copy { display: grid; gap: 16px; align-content: start; }
.closer h2 { color: var(--on-forest); }
.closer .lede { color: var(--on-forest-muted); }
.closer .actions { margin-top: 6px; }
.closer .setup-note { color: var(--on-forest-muted); }
/* weight management booking: the first consult in three short facts */
.consult-facts { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; gap: 12px; max-width: 48ch; }
.consult-facts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; color: var(--on-forest); font-size: 1.04rem; line-height: 1.45; }
.consult-facts svg { width: 22px; height: 22px; margin-top: 2px; fill: var(--gold); }
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 10px 0 0; padding-top: 22px; border-top: 1px solid var(--on-forest-line); }
.details dt { font-weight: 600; }
.details dd { margin: 0; color: var(--on-forest-muted); overflow-wrap: anywhere; }
.details a { color: var(--on-forest); text-decoration-color: var(--gold); }
.callback { --focus: var(--accent-ink); display: grid; gap: 16px; padding: 28px; border-radius: var(--radius); background: var(--surface-raised); color: var(--fg); box-shadow: 0 0 0 1px var(--raised-line), 0 16px 36px -24px var(--shadow); }
.callback h3 { font-size: var(--step-2); }
.callback > p { color: var(--fg-muted); }
.callback label { display: grid; gap: 6px; font-size: 0.95rem; font-weight: 500; }
.callback .optional { color: var(--fg-muted); font-weight: 400; }
.nowrap { white-space: nowrap; }
.callback input, .callback select { width: 100%; min-width: 0; min-height: 46px; padding: 0.65em 0.85em; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--field); color: var(--fg); font-size: 1rem; font-weight: 400; }
.callback input::placeholder { color: var(--fg-faint); opacity: 1; }
.callback input:focus-visible, .callback select:focus-visible { outline-offset: 1px; border-color: var(--focus); }
.callback small { color: var(--fg-muted); font-size: 0.86rem; line-height: 1.5; }
.callback small a { color: var(--fg); }
.callback button { justify-self: start; }
/* when the opening has no bowl beside it, the words take the full width at a comfortable line length */
.hero-main:not(:has(.hero-mark, .hero-portrait)) { grid-template-columns: minmax(0, 1fr); }
.hero-main:not(:has(.hero-mark, .hero-portrait)) .hero-copy { max-width: 900px; }
/* the bowl on its own (its meaning sits at the foot of the page), set against the far right edge */
.hero-mark-end { justify-self: end; }
.hero-mark-end .kintsugi { width: min(320px, 100%); }
/* the kintsugi bowl and its meaning, small and quiet, centred at the foot of the booking section */
.kintsugi-note { display: grid; grid-template-columns: auto minmax(0, 46ch); justify-content: center; gap: 16px; align-items: center; margin: 12px 0 20px; padding-top: 26px; border-top: 1px solid var(--on-forest-line); color: var(--on-forest); }
.kintsugi-note .kintsugi { width: 48px; height: 48px; }
.kintsugi-note figcaption { color: var(--on-forest-muted); font-size: 0.9rem; line-height: 1.55; }
.kintsugi-note strong { color: var(--on-forest); font-weight: 600; }
.crisis-line { padding-block: 8px 44px; color: var(--on-forest); font-size: 0.9rem; }
.crisis-line a { text-decoration-color: var(--gold); }
@media (max-width: 900px) { .closer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 520px) { .details { grid-template-columns: minmax(0, 1fr); gap: 0; } .details dd { margin-bottom: 12px; } .callback { padding: 22px; } .callback button { justify-self: stretch; } }

/* thank-you page */
.thanks { display: grid; gap: 18px; justify-items: start; padding-block: 24px; }
.thanks h1 { font-size: var(--step-4); line-height: 1.06; }
.thanks .crisis-line { padding: 0; color: var(--fg-muted); }

/* privacy policy (document page) */
.doc { width: min(780px, 100% - 32px); margin-inline: auto; padding-block: 56px 88px; }
.doc h1 { margin-bottom: 14px; font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.1; }
.doc h2 { margin: 44px 0 10px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--step-2); }
.doc p, .doc li { max-width: 68ch; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; }
.doc li::marker { color: var(--accent-ink); }
.doc a { text-decoration-color: var(--gold); }
.doc .updated { margin-top: 12px; font-size: 0.9rem; color: var(--fg-muted); }
.doc .summary { position: relative; margin-top: 32px; padding: 30px 24px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.doc .summary::before { content: ""; position: absolute; top: -6px; left: 24px; width: 38px; height: 12px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 12'%3E%3Cpath d='M1 8 L9 6.5 L14 9 L22 4.5 L29 6 L37 3.5 M14 9 L18 11.5' fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.doc .summary ul { margin: 8px 0 0; }
.doc dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; }
.doc dt { font-weight: 600; }
.doc dd { margin: 0; overflow-wrap: anywhere; }
.wrap.narrow { width: min(780px, 100% - 32px); }
.doc-back { font-weight: 600; font-size: 0.95rem; white-space: nowrap; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 560px) { .doc dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .doc dd { margin-bottom: 10px; } }

/* ------------------------------------------------------------------ footer */
.site-footer { --logo-mark: var(--ivory); --logo-word: var(--ivory); --logo-sub: var(--sand); background: var(--band-footer); color: var(--on-forest-muted); font-size: 0.92rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-block: 60px 40px; }
.footer-top.cols-3 { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand .logo-svg { height: 64px; }
.footer-col h2 { margin-bottom: 14px; color: var(--on-forest); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col li { min-width: 0; overflow-wrap: anywhere; }
.site-footer a { color: var(--on-forest); text-decoration-color: rgba(201, 162, 39, 0.7); }
.footer-base { display: grid; gap: 8px; padding-block: 24px 44px; border-top: 1px solid var(--on-forest-line); font-size: 0.86rem; }
.footer-slim { padding-block: 32px; font-size: 0.9rem; }
@media (max-width: 900px) { .footer-top, .footer-top.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top, .footer-top.cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ phone: booking bar fixed to the bottom */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 -10px 28px -14px var(--shadow); transition: transform 0.28s var(--ease-drawer); }
  /* it tucks away faster than it arrives */
  .mobile-bar[data-hidden] { transform: translateY(calc(100% + 16px)); transition-duration: 0.2s; transition-timing-function: var(--ease-out); }
  .mobile-bar .btn { padding: 0.75em 1em; }
  body:has(.mobile-bar) .site-footer { padding-bottom: 84px; }
  html:has(.mobile-bar) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------ reduced motion: keep feedback, drop travel */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .colour-field span { animation: none; }
  /* the booking bar fades out and in rather than sliding */
  .mobile-bar { transition: opacity 0.2s ease, visibility 0.2s; }
  .mobile-bar[data-hidden] { transform: none; opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------------------ the opening fills the window
   Below the header (and above the booking bar on phones), with its content centred. */
main > .hero {
  --room: calc(100svh - var(--header-h));
  display: grid;
  align-content: center;
  min-height: min(var(--room), 1000px);
}
@media (max-width: 760px) { main > .hero { --room: calc(100svh - var(--header-h) - 76px); } }
@media (max-width: 900px) { .hero-main:has(.hero-doors) { padding-bottom: 84px; } }

/* the front page opening: the two services as doors along the bottom of the screen */
.hero-doors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.door {
  --logo-mark: var(--ivory); --logo-word: var(--ivory); --logo-sub: var(--sand); --logo-gold: var(--gold);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 10px; align-items: center;
  min-width: 0; padding: 20px 22px; border: 1px solid var(--on-forest-line); border-radius: var(--radius);
  background: rgba(244, 239, 230, 0.06); color: var(--on-forest); text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out);
}
.door .logo-svg { grid-column: 1; height: 40px; max-width: 100%; }
.door-text { grid-column: 1; color: var(--on-forest-muted); font-size: 0.98rem; line-height: 1.5; }
.door-arrow { grid-column: 2; grid-row: 1 / span 2; width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: var(--gold); fill: none; stroke: var(--forest); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); }
.door:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .door:hover { background: rgba(244, 239, 230, 0.11); border-color: rgba(201, 162, 39, 0.55); }
  .door:hover .door-arrow { transform: translateX(4px); }
}
@media (max-width: 700px) {
  .hero-doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .door { padding: 16px 18px; column-gap: 14px; }
  .door .logo-svg { height: 34px; }
  .door-text { font-size: 0.95rem; }
  .door-arrow { width: 40px; height: 40px; padding: 10px; }
}

/* the content of each section glides gently into place as it arrives */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > :not(.hero) :is(.section-head, .why-top, .why-list > li, .tablist, .area-cards > li, .steps > li, .fees > *, .fee-note, .refer, .referrer-grid > *, .referrer-actions, .portrait, .person-text, .faq-head, .faq > details, .closer-copy, .callback, .crisis-line, .plan-map > figcaption) {
      animation: glide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    main > :not(.hero) :is(.why-list > li, .area-cards > li, .steps > li, .fees > *, .referrer-grid > *):nth-child(3n + 2) { animation-range: entry 6% entry 56%; }
    main > :not(.hero) :is(.why-list > li, .area-cards > li, .steps > li, .fees > *, .referrer-grid > *):nth-child(3n + 3) { animation-range: entry 12% entry 62%; }
  }
}
@keyframes glide-in { from { opacity: 0; translate: 0 24px; } }

/* ------------------------------------------------------------------ moving between pages
   The next page fades softly into place instead of flashing white; the header and the booking bar stay put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.mobile-bar { view-transition-name: mobile-bar; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 0.3s ease both page-leave; }
  ::view-transition-new(root) { animation: 0.45s var(--ease-out) both page-arrive; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes page-leave { to { opacity: 0; } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------------ smooth scrolling
   site.js turns on Lenis (assets/lenis.min.js) so the mouse wheel and trackpad glide instead of stepping; touch and
   keyboard scrolling stay native. These are the library's own rules. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* a section reached from an in-page link takes the keyboard focus without drawing a ring around the whole section */
:is(main, main > section)[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------ the Weight Management opening: a small line of
   services, a short line about Antony, two buttons, and a photo card with a name tag, all in the forest and gold */
.hero-eyebrow { margin: 0 0 18px; color: var(--gold); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.hero .lede strong { color: var(--on-forest); font-weight: 600; }
/* a longer title sits a size down so the opening still fits on one screen */
.hero h1.is-long { font-size: clamp(2.2rem, 4.1vw, 3.5rem); line-height: 1.1; }
.hero .actions { gap: 14px; }
.hero-portrait { position: relative; justify-self: end; width: min(360px, 100%); margin: 0 0 72px; }
.hero-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 1px solid var(--on-forest-line); border-radius: 24px; background: var(--forest-lift); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.hero-photo, .portrait.has-photo { overflow: hidden; }
.hero-photo img, .portrait.has-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.portrait.has-photo { padding: 0; border: 0; }
@media (max-width: 900px) {
  .hero-portrait { justify-self: start; width: min(300px, 86%); margin: 8px 0 96px 22px; }
}

/* the optional part of the plan (working with your care team): joined by a soft red seam instead of gold, with a
   dashed ring on narrow screens, so it reads as an add-on to the core plan */
.map { --optional: #D9837A; --optional-ink: #B0554A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map { --optional: #E59A8C; --optional-ink: #EBA396; } }
:root[data-theme="dark"] .map { --optional: #E59A8C; --optional-ink: #EBA396; }
.map-seams.is-optional, .map-spine.is-optional { --seam-glow: rgba(217, 131, 122, 0.5); --seam-glow-soft: rgba(217, 131, 122, 0.24); }
.map-seams.is-optional path, .map-spine.is-optional path { stroke: var(--optional); }
.map-seams.is-optional circle { fill: var(--optional); }
.map-item.is-optional .map-phone.is-placeholder { color: var(--optional-ink); }
.optional-note { color: var(--optional-ink); font-weight: 400; white-space: nowrap; }
@media (max-width: 1000px) {
  .map-item.is-optional .map-dot { border-style: dashed; border-color: var(--optional); color: var(--optional-ink); }
}
@media (prefers-reduced-motion: no-preference) {
  /* the red stretch runs on once the gold seam has reached Biomarker tracking */
  .map[data-armed].is-joined .map-spine.is-optional path:not([class]) { transition: stroke-dashoffset 0.8s cubic-bezier(0.45, 0, 0.55, 1) 2.3s; }
  .map[data-armed].is-joined .map-item.is-optional .map-dot { transition-delay: 2.9s; }
}

/* ------------------------------------------------------------------ the Weight Management opening, split layout
   left: name and roles as a compact title, the promise and the button, sitting low on a fine dividing line;
   right: a large photo */
main > .hero.hero-split { align-content: stretch; }
.hero-split .colour-field::after { opacity: 0; }
.hero-split .hero-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr); column-gap: clamp(36px, 4.5vw, 64px); align-items: stretch; padding-block: 0; }
.hero-split .hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 34px) clamp(48px, 5.5vw, 80px) 0; border-right: 1px solid var(--on-forest-line); }
.hero-split h1 { margin-bottom: 20px; font-size: clamp(1.85rem, 2.25vw, 2.15rem); line-height: 1.16; }
.hero-split h1 .h1-line { display: block; }
.hero-split h1 em { margin-top: 6px; font-size: 0.72em; line-height: 1.25; }
.hero-split .lede { max-width: 32ch; color: var(--on-forest); font-size: clamp(1.1rem, 1.45vw, 1.28rem); font-weight: 500; line-height: 1.5; }
.hero-split .actions { margin-top: 30px; }
.hero-split .hero-portrait { justify-self: stretch; align-self: stretch; width: auto; margin: clamp(40px, 5vw, 64px) 0 clamp(48px, 5.5vw, 80px); }
.hero-split .hero-photo { position: relative; height: 100%; min-height: 420px; aspect-ratio: auto; }
.hero-split .hero-photo img { position: absolute; inset: 0; object-position: 52% 30%; }
.hero-split .lede-gold { color: var(--gold); font-weight: 600; }
@media (max-width: 900px) {
  .hero-split .hero-main { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .hero-split .hero-copy { padding: 44px 0 8px; border-right: 0; }
  .hero-split .hero-portrait { justify-self: stretch; width: auto; margin: 28px 0 92px; }
  .hero-split .hero-photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; max-height: 72svh; }
  .hero-split .hero-photo img { position: static; }
}

/* the opening, laid out like Anton's reference page: the photo shown whole at its own 4 to 3 shape and as wide as the
   space allows; the dividing line exactly as long as the photo, starting and ending level with it; the words beside
   the line, finishing level with the bottom of the photo. The words stay lined up with the logo above; the photo
   runs on towards the right edge. */
main > .hero.hero-split { min-height: 0; align-content: start; }
.hero-split .hero-main {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr); align-items: stretch;
  width: auto; margin-left: max(16px, (100% - 1120px) / 2); margin-right: clamp(16px, 3vw, 48px);
  padding-block: clamp(40px, 4.5vw, 64px);
}
/* as in the reference: the words sit at the bottom left, and the button is pinned to the bottom, its bottom edge
   level with the bottom of the photo, with a wider gap above it so it stands apart from the words */
.hero-split .hero-copy { justify-content: flex-end; padding-block: 0; }
.hero-split .actions { margin-top: clamp(40px, 4.4vw, 64px); }
.hero-split h1 { font-size: clamp(1.5rem, 2.15vw, 2.15rem); }
.hero-split h1 .h1-line:not(em) { white-space: nowrap; }
/* the name stands alone at title size; the three roles sit on a smaller line below, joined by thin gold bars like
   the gold seams of kintsugi. When the line runs out of room it breaks after "Registered Psychologist", and the bar
   that would start the new line falls just outside the clipped edge, so no line starts or ends with a bar. */
.hero-split h1 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.hero-split .h1-roles { --sep: 1em; display: block; overflow: hidden; margin-top: 12px; font-size: clamp(0.95rem, 1.08vw, 1.1rem); line-height: 1.4; }
.hero-split .roles-row { display: flex; flex-wrap: wrap; margin-left: calc(var(--sep) * -1); }
.hero-split .hero-role-pair { display: flex; flex-wrap: wrap; }
.hero-split .hero-role { position: relative; padding-left: var(--sep); white-space: nowrap; }
.hero-split .hero-role::before { content: ""; position: absolute; left: calc(var(--sep) / 2 - 1px); top: 0.3em; bottom: 0.26em; width: 2px; border-radius: 2px; background: var(--gold); }
.hero-split .hero-portrait { display: flex; flex-direction: column; margin: 0; }
.hero-split .hero-photo { flex: 1 1 auto; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.hero-split .hero-photo img { object-position: 50% 40%; }
@media (max-width: 900px) {
  .hero-split .hero-main { grid-template-columns: minmax(0, 1fr); width: min(1120px, 100% - 32px); margin-inline: auto; padding-block: 0; }
  .hero-split .hero-copy { padding: 44px 0 8px; }
  .hero-split h1 .h1-line:not(em) { white-space: normal; }
  .hero-split .hero-portrait { display: block; margin: 28px 0 44px; }
  .hero-split .hero-photo { max-height: 72svh; }
}

/* the About me page: the name is the page heading, at the size the section heading had on the Weight Management page;
   the menu and footer underline the page you are on, in gold */
.person-text h1 { font-size: var(--step-3); }
.nav-links a[aria-current="page"], .site-footer a[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* "What we can help with": eight topics in a four by two grid, icon above the words; below, who we're suited to and
   who we're not, side by side, with a short pointer to the right care */
.area-cards.is-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.area-cards.is-topics li { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; padding: 22px; }
.area-cards.is-topics h3 { font-size: 1.08rem; line-height: 1.3; }
@media (max-width: 1000px) { .area-cards.is-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .area-cards.is-topics { grid-template-columns: minmax(0, 1fr); }
  .area-cards.is-topics li { grid-template-columns: 44px minmax(0, 1fr); align-items: center; padding: 16px 20px; }
  .area-cards.is-topics .area-icon { grid-row: auto; }
}

/* when Why Reborn stands on its own (its four points now have their own section), no extra space under it */
.why-top:last-child { margin-bottom: 0; }

/* "What we help with" as tabs (the same component as the front page): the topics, who we suit and who we don't, one
   at a time. The boxes in each tab match the topic boxes; "who we don't suit" uses quieter grey circles, and the
   pointer to the doctor and the Butterfly Foundation sits in its own box beside them. */
.tab-panel-title { margin-bottom: 18px; font-size: 1.25rem; }
.js .tab-panel-title { display: none; }
.area-cards.is-fit p { color: var(--fg); font-size: 1.02rem; font-weight: 500; line-height: 1.45; }
.fit-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); align-items: stretch; }
.fit-row .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit-note { display: grid; align-content: start; gap: 14px; padding: 22px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.fit-note .area-icon { margin-bottom: 0; }
.fit-note p { color: var(--fg); font-size: 1rem; line-height: 1.55; }
.fit-note a { color: var(--fg); font-weight: 600; white-space: nowrap; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1000px) { .fit-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .fit-row .area-cards { grid-template-columns: minmax(0, 1fr); }
  .fit-note { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 20px; }
  .fit-note .area-icon { width: 44px; height: 44px; }
}

/* the simpler header (Weight Management and About me): only About me beside the logo, so it stays in view on narrow
   screens instead of moving into a menu */
@media (max-width: 920px) { .js .site-header.is-simple .nav-links { display: flex; } }
@media (max-width: 760px) { .site-header.is-simple .nav-links a { padding-block: 12px; } }

/* header links on the Weight Management and About me pages: a gold line draws in from the left on hover and slides
   away to the right when the pointer leaves; keyboard focus and the current page show the line too */
.site-header.is-simple :is(.nav-links a, .nav-phone) { position: relative; text-decoration-line: none; }
.site-header.is-simple :is(.nav-links a, .nav-phone)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right center; transition: transform 0.3s var(--ease-out); }
.site-header.is-simple :is(.nav-links a, .nav-phone):hover { text-decoration-line: none; }
.site-header.is-simple :is(.nav-links a, .nav-phone):hover::after { transform: scaleX(1); transform-origin: left center; }
.site-header.is-simple :is(.nav-links a, .nav-phone):focus-visible::after,
.site-header.is-simple .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.site-header.is-simple .nav-links a[aria-current="page"] { text-decoration-line: none; }
@media (max-width: 760px) { .site-header.is-simple .nav-links a::after { bottom: 7px; } }
@media (prefers-reduced-motion: reduce) { .site-header.is-simple :is(.nav-links a, .nav-phone)::after { transition: none; } }

/* the opening on wider screens: the name, roles and statement sit in the middle, level with the middle of the photo;
   Book a consult stays at the bottom, level with the bottom of the photo */
@media (min-width: 901px) {
  .hero-split .hero-copy { display: grid; grid-template-rows: 1fr auto auto 1fr; align-content: stretch; }
  .hero-split .hero-copy > h1 { grid-row: 2; }
  .hero-split .hero-copy > .lede { grid-row: 3; }
  .hero-split .hero-copy > .actions { grid-row: 4; align-self: end; margin-top: 28px; }
}

/* "How we support your goals": "You" at the centre, joined by gold seams to the three places support happens:
   sessions (by video), your app (between sessions) and your doctor. Wide screens: sessions above your doctor on the
   left, the app on the right, "You" between them. Narrow screens: one column, with a seam running down the left. */
.support { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "you" "sessions" "app" "doctor"; gap: 44px; }
.support > :not(.support-seams) { position: relative; z-index: 1; }
.support-you { grid-area: you; display: grid; place-items: center; width: 116px; aspect-ratio: 1; border-radius: 50%; background: var(--feature-bg); color: var(--on-forest); font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.01em; box-shadow: 0 0 0 2px var(--gold), 0 0 0 10px rgba(201, 162, 39, 0.14), 0 22px 44px -24px var(--shadow); }
.support-group { display: grid; gap: 18px; align-content: start; min-width: 0; }
.support-group.is-sessions { grid-area: sessions; }
.support-group.is-app { grid-area: app; }
.support-group.is-doctor { grid-area: doctor; }
.support-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--accent-ink); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.support-eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22); }
.support-group h4 { margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; line-height: 1.25; }
.support-group p { margin: 4px 0 0; color: var(--fg-muted); font-size: 0.95rem; line-height: 1.55; }
.support-meta { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--gold); border-radius: 999px; color: var(--accent-ink); font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; vertical-align: 0.15em; white-space: nowrap; }
.support-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.support-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.support-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--accent-ink); }
.support-icon svg { width: 20px; height: 20px; fill: currentColor; }
.support-app { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: center; }
/* the devices */
.device-laptop { margin: 0; display: grid; justify-items: center; width: min(100%, 340px); }
.laptop-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 9px solid var(--phone-bezel); border-bottom-width: 12px; border-radius: 14px 14px 4px 4px; background: #101713; box-shadow: 0 22px 40px -26px var(--shadow); }
.laptop-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 32%; transform: scale(1.18); transform-origin: 54% 32%; }
.laptop-self { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24%; aspect-ratio: 4 / 3; border: 1px solid rgba(244, 239, 230, 0.55); border-radius: 6px; background: var(--feature-bg); color: var(--gold); }
.laptop-self svg { width: 42%; height: auto; fill: currentColor; }
.laptop-bar { position: absolute; left: 50%; bottom: 8px; display: flex; gap: 6px; padding: 4px 7px; border-radius: 999px; background: rgba(16, 23, 19, 0.62); transform: translateX(-50%); }
.laptop-bar > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(244, 239, 230, 0.2); color: #F4EFE6; }
.laptop-bar > span svg { width: 11px; height: 11px; fill: currentColor; }
.laptop-bar > .is-end { width: 26px; border-radius: 999px; background: #D9837A; }
.laptop-base { display: block; width: 112%; height: 10px; margin-top: -1px; border-radius: 2px 2px 10px 10px; background: linear-gradient(var(--phone-bezel), color-mix(in srgb, var(--phone-bezel) 70%, #000)); }
.device-phone { width: clamp(118px, 12vw, 156px); aspect-ratio: 230 / 508; overflow: hidden; border: 7px solid var(--phone-bezel); border-radius: 22px; background: var(--surface); box-shadow: 0 22px 40px -26px var(--shadow); }
.device-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the seams */
.support-seams { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px rgba(217, 180, 58, 0.45)); }
.support-seams path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.support-seams circle { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .support[data-armed] .support-seams path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .support[data-armed] .support-seams circle { opacity: 0; }
  .support[data-armed].is-joined .support-seams path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i, 0) * 0.15s); }
  .support[data-armed].is-joined .support-seams circle { opacity: 1; transition: opacity 0.3s ease calc(0.85s + var(--i, 0) * 0.15s); }
}
@media (min-width: 1000px) {
  .support { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); grid-template-areas: "sessions you app" "doctor you app"; gap: 56px clamp(48px, 5.5vw, 84px); align-items: center; }
  .support-you { width: clamp(140px, 13vw, 176px); font-size: clamp(2rem, 2.6vw, 2.5rem); }
}
@media (max-width: 999px) {
  /* the seam runs down the left, so everything but the labels sits a little in from it */
  .support-group > :not(.support-eyebrow) { margin-left: 22px; }
  .support-you { margin-left: -2px; }
  /* the laptop fits the space beside the seam, its base reaching just past the screen */
  .device-laptop { width: min(calc(100% - 34px), 340px); }
  .laptop-base { width: calc(100% + 12px); }
}
@media (max-width: 560px) {
  .support-app { grid-template-columns: minmax(0, 1fr); }
  .device-phone { width: 132px; }
}

/* the centre of "How we support your goals": the bowl, the Reborn wordmark and CLIENTS, set like the logo */
.support-you { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7%; padding-top: 2%; }
.you-mark { display: block; width: 30%; height: auto; color: var(--on-forest); overflow: visible; }
.you-seam { fill: var(--gold); }
.you-word { display: block; width: 60%; height: auto; aspect-ratio: 421.1 / 102; --logo-word: var(--on-forest); --logo-gold: var(--gold); }
.you-label { margin-top: -2%; padding-left: 0.34em; color: var(--sand); font-family: var(--font-body); font-size: clamp(0.52rem, 0.62vw, 0.66rem); font-weight: 600; letter-spacing: 0.34em; line-height: 1; text-transform: uppercase; }
/* the items are titles only now */
.support-list li { align-items: center; }
.support-note { color: var(--fg-muted); font-family: var(--font-body); font-size: 0.84rem; font-weight: 400; white-space: nowrap; }
/* "(Optional)" keeps its soft red, at the same size as the other notes */
.support { --optional-ink: #B0554A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .support { --optional-ink: #EBA396; } }
:root[data-theme="dark"] .support { --optional-ink: #EBA396; }
.support .optional-note { font-family: var(--font-body); font-size: 0.84rem; }

/* "How we support your goals": the group labels are read out by screen readers but not shown; the optional care team
   item is all in the soft orange */
.support-eyebrow { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.support { --optional: #D9837A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .support { --optional: #E59A8C; } }
:root[data-theme="dark"] .support { --optional: #E59A8C; }
.support-list li.is-optional .support-icon { border-color: var(--optional); color: var(--optional-ink); }
.support-list li.is-optional h4 { color: var(--optional-ink); }

/* each tag or note sits on its own line under its title, flush with it, at every width */
.support-list h4 { display: grid; justify-items: start; row-gap: 5px; }
.support-list h4 .support-meta { margin-left: 0; vertical-align: baseline; }

/* more space between the sessions and the doctor items, so they read as two groups */
@media (min-width: 1000px) { .support { row-gap: clamp(88px, 8vw, 120px); } }
@media (max-width: 999px) { .support-group.is-doctor { margin-top: 24px; } }

/* the phone in "How we support your goals": it takes the home screen's own height, with a small camera island */
.support .device-phone { position: relative; aspect-ratio: auto; }
.support .device-phone img { height: auto; }
.support .device-phone::before { content: ""; position: absolute; top: 4px; left: 50%; width: 30%; aspect-ratio: 3.6; border-radius: 999px; background: var(--phone-bezel); transform: translateX(-50%); }

/* ==== "How we support your goals": the gold thread (plan, track, follow up, repeat) ==== */
/* ---------- shared: the heading's line, the step headings ---------- */
.step-lede { margin: 0; max-width: 64ch; color: var(--fg-muted); font: 400 clamp(1.02rem, 1.2vw, 1.15rem)/1.5 var(--font-body); }
.step-head { display: grid; gap: 4px; }
.step-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.55rem, 2.3vw, 2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.step-sub { margin: 0; color: var(--fg-muted); font: 500 0.95rem/1.4 var(--font-body); }

/* ---------- shared: lists with gold circles, the results card, the phone ---------- */
.gold-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gold-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.gold-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--accent-ink); }
.gold-icon svg { width: 20px; height: 20px; fill: currentColor; }
.gold-list h4 { display: grid; justify-items: start; row-gap: 2px; margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; line-height: 1.25; }
.gold-list li.is-optional .gold-icon { border-color: var(--optional); color: var(--optional-ink); }
.gold-list li.is-optional h4 { color: var(--optional-ink); }
.gold-list .optional-note { font-family: var(--font-body); font-size: 0.84rem; }
.results-card { position: relative; display: grid; gap: 0.8em; padding: 1.07em 1.07em 0.4em; border-radius: 1.2em; font-size: 15px; background: var(--card-bg); color: var(--card-ink); box-shadow: 0 22px 40px -24px var(--shadow), 0 0 0 1px var(--card-edge); }
.results-head { display: flex; align-items: center; gap: 0.67em; font: 600 0.92em/1.2 var(--font-body); }
.results-badge { display: grid; place-items: center; flex: none; width: 2.17em; height: 2.17em; border-radius: 50%; background: var(--badge-bg); color: var(--gold); }
.results-badge svg { width: 1.23em; height: 1.23em; fill: currentColor; }
.results-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--card-rule); }
.results-rows li { display: flex; align-items: center; justify-content: space-between; gap: 0.9em; padding: 0.83em 0.15em; color: var(--card-muted); font: 500 0.88em/1.2 var(--font-body); }
.results-rows li + li { border-top: 1px solid var(--card-rule); }
.spark { flex: none; width: 4.7em; height: 1.36em; overflow: visible; }
.spark polyline { fill: none; stroke: var(--spark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark circle { fill: var(--spark); }
.checkin-chip { position: absolute; top: -1.15em; right: 1em; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.85em; border-radius: 999px; background: var(--chip-bg, #1F2A24); color: #F2F4F0; font: 600 0.78em/1 var(--font-body); white-space: nowrap; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5); }
.checkin-chip svg { width: 1.25em; height: 1.25em; fill: var(--gold); }
.thread .device-phone { position: relative; flex: none; aspect-ratio: auto; box-shadow: 0 24px 44px -24px var(--shadow); }
.thread .device-phone img { height: auto; }
.thread .device-phone::before { content: ""; position: absolute; top: 4px; left: 50%; width: 30%; aspect-ratio: 3.6; border-radius: 999px; background: var(--phone-bezel); transform: translateX(-50%); }

/* ---------- Option A: the gold thread ---------- */
.thread { --optional: #D9837A; --optional-ink: #B0554A; --card-bg: #FFFFFF; --card-ink: var(--fg); --card-muted: var(--fg-muted); --card-rule: rgba(31, 42, 36, 0.09); --card-edge: var(--line); --spark: #2A4636; --badge-bg: var(--feature-bg);
          position: relative; display: grid; gap: 64px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .thread { --optional: #E59A8C; --optional-ink: #EBA396; --card-bg: #1F2A25; --card-rule: rgba(242, 244, 240, 0.09); --card-edge: rgba(242, 244, 240, 0.08); --spark: #D9B43A; --badge-bg: rgba(217, 180, 58, 0.16); } }
:root[data-theme="dark"] .thread { --optional: #E59A8C; --optional-ink: #EBA396; --card-bg: #1F2A25; --card-rule: rgba(242, 244, 240, 0.09); --card-edge: rgba(242, 244, 240, 0.08); --spark: #D9B43A; --badge-bg: rgba(217, 180, 58, 0.16); }
.thread > :not(.thread-line):not(.thread-pill) { position: relative; z-index: 1; }
.thread-you { grid-area: auto; justify-self: start; margin-left: 0; }
.chapter { display: grid; gap: 22px; padding-left: 50px; }
.ch-text { display: contents; }
.chapter .step-head { order: 0; }
.chapter .ch-visual { order: 1; padding-top: 6px; }
.chapter .gold-list { order: 2; }
.ch-visual { display: flex; }
.chapter .device-laptop { width: min(100%, 420px); margin: 0; }
.chapter .laptop-base { width: 108%; }
.chapter .device-phone { width: 156px; }
.chapter .results-card { width: min(100%, 310px); margin-top: 14px; }
.thread-line { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px rgba(217, 180, 58, 0.45)); }
.thread-line path { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; }
.thread { padding-bottom: 64px; }
.thread-line .loop { stroke-dashoffset: 1; }
.thread.is-looped .thread-line .loop { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .thread.is-looped .thread-line .loop { transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.55, 1); } }
.thread-pill { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 1px solid rgba(201, 162, 39, 0.6); border-radius: 999px; background: var(--section-bg, var(--bg)); color: var(--accent-ink); font: 600 0.88rem/1 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; visibility: hidden; }
.thread-pill.is-placed { visibility: visible; }
.thread .chapter[data-step="1"] { margin-top: 44px; }
.loop-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #1F2A24; }
.loop-icon svg { width: 16px; height: 16px; fill: currentColor; }
.thread[data-live] .loop-pill, .thread[data-live] .start-pill:not(.is-lit) { opacity: 0; transform: translateY(6px); }
.thread[data-live] .start-pill.is-lit { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.thread[data-live].is-looped .loop-pill { opacity: 1; transform: none; transition: opacity 0.4s ease 0.5s, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.5s; }
.thread-line .knot { fill: var(--gold); }
.thread-line .halo { fill: var(--gold); opacity: 0.2; }
.thread-line .knot-n { fill: #1F2A24; font: 500 15px/1 var(--font-display); }
.thread-line .knot-g { transform-box: fill-box; transform-origin: center; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.thread[data-live] .thread-line .knot-g:not(.is-lit) { opacity: 0; transform: scale(0.3); }
@media (min-width: 1000px) {
  .thread { gap: 60px; padding-bottom: 104px; }
  .thread .chapter[data-step="1"] { margin-top: 70px; }
  .thread-you { justify-self: center; }
  .chapter { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; gap: 0; padding-left: 0; }
  .ch-text { display: grid; gap: 26px; grid-column: 3; grid-row: 1; justify-self: start; }
  .chapter > .ch-visual { grid-column: 1; grid-row: 1; justify-content: flex-end; padding-top: 0; }
  .chapter.is-flip > .ch-visual { grid-column: 3; justify-content: flex-start; }
  .chapter.is-flip > .ch-text { grid-column: 1; justify-self: end; }
}

/* ==== Reborn Psychology and Vocational Support ==== */
.vocational-grid { margin-top: var(--card-gap); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.panel .split-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 900px) { .vocational-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .panel .split-list { grid-template-columns: minmax(0, 1fr); } }
.panel .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.panel .chips li::marker { content: none; }
.panel .chips + .setup-note { margin: 0; }
/* the logo is longer than the others: let it narrow with the screen rather than overflow */
.logo-vocational { max-width: 100%; }
@media (max-width: 480px) {
  .site-header .logo-vocational { height: auto; width: min(212px, 54vw); }
  .footer-brand .logo-vocational { height: auto; width: min(367px, 100%); }
}
@media (max-width: 380px) { .site-header .logo-vocational { width: min(160px, 50vw); } }
/* its header: the phone number goes first, then the menu button takes over earlier than on the other pages */
@media (max-width: 1240px) { .site-header:not(.is-simple):has(.logo-vocational) .nav-phone { display: none; } }
@media (max-width: 1100px) {
  .site-header:not(.is-simple):has(.logo-vocational) .nav { margin-left: auto; }
  .js .site-header:not(.is-simple):has(.logo-vocational) .menu-toggle { display: inline-flex; order: 2; }
  .js .site-header:not(.is-simple):has(.logo-vocational) .nav-links { display: none; }
  .js .site-header:not(.is-simple):has(.logo-vocational)[data-menu="open"] .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 0; padding: 8px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px -18px var(--shadow); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
  .js .site-header:not(.is-simple):has(.logo-vocational)[data-menu="open"] .nav-links a { padding-block: 13px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .js .site-header:not(.is-simple):has(.logo-vocational)[data-menu="open"] .nav-links li:last-child a { border-bottom: 0; }
  @starting-style { .js .site-header:not(.is-simple):has(.logo-vocational)[data-menu="open"] .nav-links { opacity: 0; transform: translateY(-6px); } }
  html:not(.js) .site-header:not(.is-simple):has(.logo-vocational) .header-row { flex-wrap: wrap; }
  html:not(.js) .site-header:not(.is-simple):has(.logo-vocational) .nav { flex-wrap: wrap; row-gap: 4px; }
  html:not(.js) .site-header:not(.is-simple):has(.logo-vocational) .nav-links { flex-wrap: wrap; gap: 4px 18px; }
}

/* ==== Psychology and Vocational Support, on the Weight Management page's layout ==== */
/* the progress cards beside "Build" and "Review": a gold tick or a short status in place of the trend lines */
.results-rows .row-tick { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--badge-bg); color: var(--gold); }
.results-rows .row-tick svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.results-rows .row-state { flex: none; color: var(--card-ink); font-weight: 600; }
.goals-card .results-rows, .update-card .results-rows { margin-bottom: 0.4em; }
/* referrers: one card under "How to get started" */
.refer-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; margin-top: clamp(32px, 4vw, 48px); padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: var(--feature-bg); color: var(--on-forest); box-shadow: 0 0 0 1px var(--feature-line), 0 18px 36px -22px var(--shadow); --focus: var(--gold); }
.refer-card .area-icon { margin: 0; color: var(--gold); }
.refer-card h3 { font-size: 1.3rem; }
.refer-card p { max-width: 64ch; margin: 8px 0 0; color: var(--on-forest-muted); }
.refer-card .setup-note { color: var(--on-forest-muted); }
@media (max-width: 860px) { .refer-card { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
/* Reborn Work and Wellbeing: the logo narrows with the screen rather than overflowing */
.logo-work-wellbeing { max-width: 100%; }
/* its three path tabs: a little less padding on phones, so the single word "Assessment" fits */
@media (max-width: 480px) { .paths-tabs :is(.tablist [role="tab"], .tab-ghost > span) { padding-inline: 0.8em; } }
/* Reborn Work and Wellbeing's opening, as a business: a promise that may wrap, and the Reborn bowl in place of a photo */
.hero-business h1 .h1-line:not(em) { white-space: normal; }
.hero-brand .hero-photo { color: var(--on-forest); background: radial-gradient(circle at 50% 46%, var(--forest-lift), var(--feature-bg) 72%); }
.hero-brand .kintsugi { width: min(42%, 240px); }
/* on phones and small tablets the bowl panel steps aside (the logo above already carries it), and the opening keeps its
   breathing room below the buttons */
@media (max-width: 900px) { .hero-split .hero-portrait.hero-brand { display: none; } .hero-split.hero-business .hero-copy { padding-bottom: 52px; } }
/* Reborn Work and Wellbeing's workflow runs once from the first call to the long-term check-ins, so its thread has no
   loop back to the start */
.thread-linear .loop-pill, .thread-linear .thread-line .loop { display: none; }
.thread.thread-linear { padding-bottom: 8px; }
/* the Brief intervention tab lists five steps: one row of five on wide screens */
@media (min-width: 1101px) { .area-cards.is-topics.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* "How we're different" with three points: one row of three on wide screens */
@media (min-width: 1001px) { .why-list.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Reborn Work and Wellbeing's workflow pictures: a text reminder, sessions ticking off, a report */
.thread-linear .step-sub { max-width: 40ch; color: var(--fg); font-size: 1.02rem; line-height: 1.5; }
.thread .sms-card, .thread .progress-card, .thread .doc-card { padding-bottom: 1.07em; }
.sms-bubble { margin: 0; padding: 0.8em 1em; border-radius: 1.1em 1.1em 1.1em 0.35em; background: rgba(201, 162, 39, 0.14); color: var(--card-ink); font: 500 0.9em/1.45 var(--font-body); }
.sms-time { margin: 0; color: var(--card-muted); font: 500 0.75em/1 var(--font-body); }
.session-dots { display: flex; gap: 0.7em; }
.session-dot { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1.5px solid var(--card-rule); color: var(--card-muted); font: 600 0.9em/1 var(--font-body); }
.session-dot.is-done { border-color: var(--gold); background: var(--gold); color: #1F2A24; }
.session-dot.is-next { border-color: var(--gold); color: var(--card-ink); }
.doc-lines { display: grid; gap: 0.6em; padding-top: 0.2em; }
.doc-lines span { display: block; height: 0.55em; border-radius: 999px; background: var(--card-rule); }
/* Reborn Work and Wellbeing: the thread starts with the consultant's clients ("Your clients"), not a Reborn wordmark */
.thread-linear .you-text { display: block; margin-bottom: 4%; color: var(--on-forest); font-family: var(--font-display); font-size: 0.6em; font-weight: 500; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; }
/* Reborn Work and Wellbeing hero: the logo is embossed into the forest panel, lit from the top left, so it blends in;
   the gold seam stays the one bright line */
.hero-brand .hero-photo { position: relative; isolation: isolate; background: radial-gradient(120% 100% at 28% 18%, #2F3E35 0%, #26332C 46%, #1D2722 100%); }
.hero-brand .hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-brand .kintsugi { width: min(50%, 320px); color: #34443A; filter: drop-shadow(-1px -1px 0 rgba(242, 244, 240, 0.22)) drop-shadow(1.5px 2px 1.5px rgba(0, 0, 0, 0.5)); }
.hero-brand .kintsugi-glow { fill-opacity: 0.35; stroke-opacity: 0.35; }
@media (max-width: 999px) { .thread-linear .you-text { font-size: 0.56em; } }
/* Reborn Work and Wellbeing's opening (option 2, without the service cards): a daylight background, the promise on
   its own at a larger size, the button in forest */
.hero.hero-light { background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); color: var(--fg); --focus: var(--accent-ink); }
.hero.hero-light h1 { color: var(--fg); }
.hero.hero-light .lede { color: var(--fg-muted); }
.hero-split.hero-solo .hero-main { grid-template-columns: minmax(0, 1fr); padding-block: clamp(56px, 7vw, 104px); }
.hero-split.hero-solo .hero-copy { max-width: 820px; padding: 0; border-right: 0; }
@media (min-width: 901px) {
  .hero-split.hero-solo .hero-copy { display: flex; flex-direction: column; justify-content: center; }
  .hero-split.hero-solo .hero-copy > .actions { align-self: start; margin-top: 36px; }
}
.hero-split.hero-solo h1 { margin-bottom: 20px; font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: 1.07; letter-spacing: -0.012em; }
.hero-split.hero-solo .lede { max-width: 40ch; font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 500; line-height: 1.5; }
@media (max-width: 900px) { .hero-split.hero-solo .hero-main { padding-block: 40px 48px; } .hero-split.hero-solo .hero-copy { padding: 0; } }
/* Reborn Work and Wellbeing's opening: forest green with Anton's photo, laid out like the Weight Management opening;
   the portrait is cropped from the top so his face and shoulders fill the frame */
.hero-headshot .hero-photo { background: #E9ECEA; }
.hero-split .hero-headshot .hero-photo img { object-position: 50% 12%; }
/* Reborn Work and Wellbeing: "The team" page. A short forest header, Antony first, then a card for each team member */
main > .hero.hero-team { min-height: 0; align-content: start; }
.hero-team-main { display: grid; gap: 14px; padding-block: clamp(56px, 7vw, 96px); }
.hero-team h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; }
.hero-team .lede { margin: 0; color: var(--on-forest-muted); }
.team-lead .person-text h2 { font-size: var(--step-3); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--card-gap); margin: 0; padding: 0; list-style: none; }
.team-card { display: grid; gap: 18px; align-content: start; padding: 16px 16px 22px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.team-card .portrait { width: 100%; max-width: none; border-radius: calc(var(--radius) - 6px); }
.team-text { display: grid; gap: 8px; padding-inline: 6px; }
.team-text h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.team-text .role { margin: 0; }
.team-text p:not(.role) { margin: 0; color: var(--fg-muted); line-height: 1.6; }
.team-note { margin-top: 20px; }
.team-closer { display: grid; gap: 16px; justify-items: start; padding-block: clamp(64px, 9vw, 108px) 28px; }
.team-closer h2 { margin: 0; }
.team-closer .lede { margin: 0; max-width: 46ch; }
/* Reborn Work and Wellbeing's opening: a marked space for the stock photo until it is supplied */
.hero-photo.hero-photo-empty { display: grid; place-items: center; padding: 24px; border: 1.5px dashed var(--placeholder-line); background: var(--forest-lift); text-align: center; }
.hero-split .hero-stock .hero-photo img { object-position: 30% 40%; }
/* Work and Wellbeing headline: what Reborn does, in bold gold */
.hero-business h1 .h1-strong { color: var(--gold); font-weight: 600; }
/* Work and Wellbeing's longer headline: a little smaller, with a wider column for the words */
.thread .skills-card .results-rows { margin-top: 2px; }
/* ==== Reborn Work and Wellbeing workflow: one call, then one of the services, then long-term check-ins ====
   The gold line is drawn piece by piece: each step carries its own stretch, and the fork splits it into the service
   lanes (four since 20 October 2026) and joins it again. */
.flow { --flow-x: 50%; --flow-gap: 60px; gap: var(--flow-gap); }
.flow .thread-you { justify-self: center; }
.flow-pill { position: relative; justify-self: center; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 1px solid rgba(201, 162, 39, 0.6); border-radius: 999px; background: var(--section-bg, var(--bg)); color: var(--accent-ink); font: 600 0.88rem/1 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; }
.flow-pill::before, .flow-step::before { content: ""; position: absolute; z-index: -1; left: var(--flow-x); width: 2.2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 6px rgba(217, 180, 58, 0.45); transform: translateX(-50%); }
.flow-pill::before { top: calc(var(--flow-gap) * -1); height: var(--flow-gap); }
.flow-step { position: relative; display: grid; gap: 18px; }
.flow-step::before { top: calc(var(--flow-gap) * -1); bottom: calc(var(--flow-gap) * -1); }
.flow-step:last-child::before { bottom: 50%; }
.flow-step + .flow-step::before { top: 0; }
.flow-knot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #1F2A24; font: 500 15px/1 var(--font-display); box-shadow: 0 0 0 8px rgba(201, 162, 39, 0.2); }
.flow-text { display: grid; gap: 6px; }
.flow-visual { display: flex; }
.flow-visual .results-card { width: min(100%, 310px); }
.flow-fork { position: relative; display: grid; }
.flow-split, .flow-join { display: block; width: 100%; height: 60px; overflow: visible; }
.flow-split path, .flow-join path { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(217, 180, 58, 0.45)); }
.flow-lanes { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 0 8px; }
.flow-or { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border: 1px solid rgba(201, 162, 39, 0.6); border-radius: 50%; background: var(--section-bg, var(--bg)); color: var(--accent-ink); font: 600 0.88rem/1 var(--font-body); }
.flow-lane { display: grid; gap: 18px; align-content: start; padding: 22px 20px 24px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--bg-alt); }
.lane-head { display: grid; justify-items: start; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lane-title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance; }
.lane-meta { margin: 0; color: var(--accent-ink); font-size: 0.92rem; font-weight: 600; }
.lane-steps { position: relative; display: grid; gap: 16px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.lane-steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(201, 162, 39, 0.4); }
.lane-steps li { position: relative; display: grid; gap: 4px; }
.lane-steps li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18); }
.lane-steps strong { color: var(--fg); font: 600 1rem/1.35 var(--font-body); }
.lane-steps li > span { color: var(--fg-muted); font-size: 0.98rem; line-height: 1.55; }
.flow-lane .results-card { justify-self: center; width: min(100%, 320px); margin-top: 4px; }
@media (min-width: 1000px) {
  .flow-step { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; gap: 0; }
  .flow-step .flow-text { grid-column: 1; grid-row: 1; justify-self: end; max-width: 40ch; }
  .flow-step .flow-knot { grid-column: 2; grid-row: 1; justify-self: center; }
  .flow-step .flow-visual { grid-column: 3; grid-row: 1; justify-content: flex-start; }
  .flow .chapter-gap { display: none; }
}
@media (max-width: 999px) {
  .flow { --flow-x: 16px; --flow-gap: 44px; }
  .flow .thread-you, .flow-pill { justify-self: start; }
  .flow-pill::before { display: none; }
  .flow-step { padding-left: 50px; }
  .flow-step .flow-knot { position: absolute; left: 0; top: 0; }
  .flow-step[data-step="1"]::before { top: 16px; }
  .flow-step:last-child::before { bottom: auto; height: calc(var(--flow-gap) + 16px); }
  .flow-fork { padding-left: 50px; }
  .flow-fork::before { content: ""; position: absolute; z-index: -1; left: var(--flow-x); top: 0; bottom: 0; width: 2.2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 6px rgba(217, 180, 58, 0.45); transform: translateX(-50%); }
  .flow-split, .flow-join { display: none; }
  .flow-lanes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow-or { justify-self: start; width: 34px; height: 34px; margin-left: calc(-50px + var(--flow-x) - 17px); font-size: 0.8rem; }
  .flow-lane { padding: 18px 18px 22px; }
}
/* Group workshops: the topics card lists the workshops as plain rows, each with a small gold mark */
.topics-card .results-rows li { justify-content: flex-start; gap: 0.75em; color: var(--card-ink); }
.topics-card .results-rows li::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gold); }
@media (min-width: 1000px) and (max-width: 1199px) { .flow-lane .results-card { font-size: 14px; } }
/* four services across a wide screen: slimmer "or" marks and lanes, and slightly smaller lane titles, so the four sit
   side by side; on narrower screens the lanes stack down the line as before */
@media (min-width: 1000px) {
  .flow-lanes.flow-lanes-4 { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); gap: 0 6px; }
  .flow-lanes-4 .flow-or { width: 32px; height: 32px; font-size: 0.8rem; }
  .flow-lanes-4 .flow-lane { padding: 20px 16px 22px; }
  .flow-lanes-4 .lane-title { font-size: 1.3rem; }
  .flow-lanes-4 .lane-steps li > span { font-size: 0.94rem; }
}
/* Reborn Work and Wellbeing: while the scroll-drawn line is live, the stylesheet's own line pieces step aside, and the
   numbered points, the starting label and the "or" marks wait for the line to reach them */
.flow[data-live] .flow-pill::before, .flow[data-live] .flow-step::before, .flow[data-live] .flow-fork::before { display: none; }
.flow[data-live] .flow-split, .flow[data-live] .flow-join { visibility: hidden; }
.flow[data-live] .flow-knot:not(.is-lit) { opacity: 0; transform: scale(0.3); }
.flow[data-live] .flow-pill:not(.is-lit), .flow[data-live] .flow-or:not(.is-lit) { opacity: 0; transform: translateY(6px); }
.flow[data-ready] .flow-knot { transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.flow[data-ready] .flow-pill, .flow[data-ready] .flow-or { transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
/* Reborn Work and Wellbeing's booking section: with less beside the call-back form, the words sit level with the middle
   of the form rather than leaving an empty column under them */
@media (min-width: 901px) { .closer-short .closer-copy { align-self: center; } }
/* a numbered point with no words beside it still keeps the knot's height, so the line runs through it */
.flow-step-mark { min-height: 32px; }
/* on wide screens point 2 sits right where the line branches into the services */
@media (min-width: 1000px) {
  .thread.flow > .flow-step.flow-step-mark { z-index: 2; margin-bottom: calc(-16px - var(--flow-gap)); }
  .flow-step-mark::before { bottom: 0; }
  .flow-step-mark .flow-knot { position: relative; top: 22px; }
  .flow-step-mark .flow-text { margin-right: 22px; }
}
/* Reborn Work and Wellbeing's opening uses the Weight Management layout and photo size; its longer headline is set a
   little smaller so it sits in four even lines beside the photo */
.hero-split.hero-business h1 { font-size: clamp(1.75rem, 2.2vw, 2.05rem); line-height: 1.2; }
/* sub-headings inside a policy page */
.doc h3 { margin: 1.6em 0 0.4em; font-size: 1.2rem; }
/* a policy page's contents list: numbered, two columns on wide screens */
.doc .toc { margin-top: 28px; }
.doc .toc ol { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 6px 36px; }
.doc .toc li::marker { color: var(--accent-ink); font-weight: 600; }
@media (min-width: 720px) { .doc .toc ol { display: block; columns: 2; column-gap: 36px; } .doc .toc li { break-inside: avoid; margin-bottom: 6px; } }
/* Reborn Work and Wellbeing's "Why Reborn": the problem on a pale panel and Reborn's answer on a forest panel, joined
   by the site's gold arrow. Each panel opens with its first sentence as a bold lead-in, and the few phrases that carry
   the reason to choose Reborn are gold. When site.js turns on the slide (not with reduced motion, and only when the
   section fits on the screen), the section holds still for a short stretch of scrolling: the problem shows first, then
   the answer slides in from the right. On wide screens it comes in beside the problem, as in the static layout; on
   narrow screens the two panels sit in a row and the row slides across, so one panel shows at a time. The gold phrases
   underline once the answer is in place. Without the slide, the panels sit side by side (one under the other on phones).
   (Chosen 18 October 2026; the earlier looks are kept in qa/before-logo.) */
.why-head-split { margin-bottom: clamp(26px, 3.4vw, 44px); }
.why-split { --why-arrow-from: 0 -8px; display: grid; grid-template-columns: minmax(0, 1fr); font-size: clamp(1.0625rem, 1rem + 0.22vw, 1.15rem); line-height: 1.7; }
.why-panel { margin: 0; padding: clamp(26px, 3.4vw, 46px); border-radius: var(--radius); text-wrap: pretty; view-timeline-name: --why-panel; view-timeline-axis: block; }
.why-gap { background: var(--bg-alt); color: var(--fg-muted); }
.why-answer { color: var(--on-forest); background: var(--band-forest); box-shadow: inset 0 0 0 1px var(--on-forest-line); }
.why-lead { display: block; margin-bottom: 0.5em; color: var(--fg); font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.42rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.006em; text-wrap: balance; }
.why-answer .why-lead { color: var(--ivory); }
.why-answer em { font-style: normal; font-weight: 500; color: #E4C153; padding-bottom: 1px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.why-bridge { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin: -16px auto; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--bg), 0 10px 24px -8px rgba(201, 162, 39, 0.7); }
.why-bridge svg { width: 22px; height: 22px; fill: none; stroke: var(--forest); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
@media (max-width: 859px) {
  .why-split { font-size: 1rem; line-height: 1.6; }
  .why-panel { padding: 22px 22px 24px; }
  .why-lead { font-size: 1.15rem; }
}
@media (min-width: 860px) {
  .why-split { --why-arrow-from: -8px 0; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); column-gap: 14px; align-items: stretch; }
  .why-bridge { align-self: center; margin: 0 -26px; }
  .why-bridge svg { transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .why-answer em { animation: why-underline linear both; animation-timeline: --why-panel; animation-range: cover 20% cover 38%; }
    .why-answer em:nth-of-type(2) { animation-range: cover 25% cover 44%; }
    .why-answer em:nth-of-type(3) { animation-range: cover 32% cover 52%; }
    .why-bridge { animation: why-bridge linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
    .why-bridge svg { animation: why-arrow linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
  }
}
@keyframes why-underline { from { background-size: 0% 1.5px; } }
@keyframes why-bridge { from { scale: 0.8; opacity: 0.3; } }
@keyframes why-arrow { from { translate: var(--why-arrow-from); } }

.why-slide { overflow-x: clip; }
.why-slide[data-pin] > .wrap { position: sticky; top: var(--why-pin-top, 120px); }
.why-slide[data-pin]::after { content: ""; display: block; height: var(--why-runway, 0px); }
.why-slide .why-answer em, .why-slide .why-bridge, .why-slide .why-bridge svg { animation: none; }
.why-slide .why-answer em { background-size: 0% 1.5px; transition: background-size 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.why-slide .why-answer em:nth-of-type(2) { transition-delay: 0.18s; }
.why-slide .why-answer em:nth-of-type(3) { transition-delay: 0.36s; }
.why-slide .why-answer.is-in em { background-size: 100% 1.5px; }
/* wide screens: the answer comes in from the right, beside the problem, and the arrow appears between them */
.why-slide .why-split[data-mode="wide"] .why-answer { translate: calc((1 - var(--why-in, 1)) * 72px) 0; opacity: var(--why-in, 1); }
.why-slide .why-split[data-mode="wide"] .why-bridge { scale: calc(0.6 + 0.4 * var(--why-arrow, 1)); opacity: var(--why-arrow, 1); }
.why-slide .why-split[data-mode="wide"] .why-bridge svg { translate: calc((1 - var(--why-arrow, 1)) * -8px) 0; }
/* narrow screens: one panel at a time, in a row that slides across */
.why-slide .why-split[data-mode="narrow"] { display: flex; align-items: stretch; translate: calc(-1 * var(--why-x, 0px)) 0; }
.why-slide .why-split[data-mode="narrow"] .why-panel { flex: 0 0 100%; }
.why-slide .why-split[data-mode="narrow"] .why-bridge { flex: 0 0 auto; align-self: center; margin: 0 18px; opacity: var(--why-arrow, 0); }
.why-slide .why-split[data-mode="narrow"] .why-bridge svg { transform: none; }
/* Reborn Work and Wellbeing's "How to get started" moves the same way as "Why Reborn" (site.js turns it on; not with
   reduced motion, and only when the section fits on the screen). The section holds still for a short stretch of
   scrolling: step 1 shows first, then steps 2 and 3 slide in from the right in turn. On wide screens they come in beside
   step 1; on narrow screens the three steps sit in a row that slides across, so one step shows at a time. Only the list
   marked .steps-slide moves, so the same steps on other pages stay as they are. */
.how-slide { overflow-x: clip; }
.how-slide[data-pin] > .wrap { position: sticky; top: var(--how-pin-top, 120px); }
.how-slide[data-pin]::after { content: ""; display: block; height: var(--how-runway, 0px); }
.how-slide .steps-slide[data-mode] > li { animation: none; }   /* the slide replaces the usual glide-in of the steps */
.how-slide .steps-slide[data-mode="wide"] li { translate: calc((1 - var(--step-in, 1)) * 72px) 0; opacity: var(--step-in, 1); }
.how-slide .steps-slide[data-mode="narrow"] { display: flex; gap: 18px; align-items: stretch; translate: calc(-1 * var(--how-x, 0px)) 0; }
.how-slide .steps-slide[data-mode="narrow"] li { flex: 0 0 100%; }
/* "arrive" style (html[data-motion-style="arrive"] or "path"): things slide in as they come into view, without holding
   the page. site.js adds .why-arrive and .how-arrive, then .is-in as each part arrives. */
.why-arrive .why-answer, .why-arrive .why-bridge, .why-arrive .why-bridge svg, .why-arrive .why-answer em { animation: none; }
.why-arrive .why-answer { opacity: 0; translate: 48px 0; transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.why-arrive .why-bridge { opacity: 0; scale: 0.6; transition: opacity 0.35s ease 0.3s, scale 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s; }
.why-arrive .why-answer em { background-size: 0% 1.5px; transition: background-size 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.75s; }
.why-arrive .why-answer em:nth-of-type(2) { transition-delay: 0.93s; }
.why-arrive .why-answer em:nth-of-type(3) { transition-delay: 1.11s; }
.why-arrive .why-split.is-in .why-answer { opacity: 1; translate: 0 0; }
.why-arrive .why-split.is-in .why-bridge { opacity: 1; scale: 1; }
.why-arrive .why-split.is-in .why-answer em { background-size: 100% 1.5px; }
.how-arrive .steps.steps-slide > li { animation: none; opacity: 0; translate: 40px 0; transition: opacity 0.5s ease, translate 0.65s cubic-bezier(0.23, 1, 0.32, 1); }
.how-arrive .steps.steps-slide > li.is-in { opacity: 1; translate: 0 0; }
@media (min-width: 821px) {
  .how-arrive .steps.steps-slide > li:nth-child(2) { transition-delay: 0.14s; }
  .how-arrive .steps.steps-slide > li:nth-child(3) { transition-delay: 0.28s; }
}
/* "path" style: the steps lose their cards and sit on a gold path that draws through their numbers as you scroll */
.how-path .steps.steps-slide { position: relative; }
.how-path .steps.steps-slide > li { animation: none; background: none; box-shadow: none; padding-top: 0; }
.how-path .steps-slide::before, .how-path .steps-slide::after { content: ""; position: absolute; left: var(--path-left, 0px); top: var(--path-top, 0px); width: var(--path-width, 0px); height: var(--path-height, 0px); border-radius: 2px; pointer-events: none; }
.how-path .steps-slide::before { background: var(--line); }
.how-path .steps-slide::after { background: var(--gold); box-shadow: 0 0 6px rgba(217, 180, 58, 0.45); transform-origin: 0 0; scale: var(--path, 0) 1; }
.how-path .steps-slide .num { position: relative; z-index: 1; transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, scale 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
.how-path .steps-slide > li:not(.is-lit) .num { background: var(--bg-alt); color: var(--fg-muted); box-shadow: inset 0 0 0 1.5px var(--line); scale: 0.9; }
@media (max-width: 820px) {
  .how-path .steps.steps-slide { gap: 30px; }
  .how-path .steps-slide::after { scale: 1 var(--path, 0); }
  .how-path .steps.steps-slide > li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; justify-items: start; align-items: start; padding: 0; text-align: left; }
  .how-path .steps-slide .num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .how-path .steps-slide h3 { grid-column: 2; padding-top: 12px; }
  .how-path .steps-slide p { grid-column: 2; max-width: none; }
}
/* "swipe" style: on phones, rows of cards you swipe through sideways, with the next card peeking in and dots below */
.swipe-dots { display: none; justify-content: center; gap: 2px; margin-top: 12px; }
.swipe-dots button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.swipe-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width 0.25s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s ease; }
.swipe-dots button[aria-current="true"]::before { width: 22px; background: var(--gold); }
.swipe-dots button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* the row itself can take keyboard focus while it scrolls; it runs to the screen's edges, so its ring sits inside */
.why-swipe .why-split:focus-visible, .how-swipe .steps.steps-slide:focus-visible { outline-offset: -3px; border-radius: 12px; }
@media (max-width: 859px) {
  .why-swipe .why-split { position: relative; display: flex; gap: 12px; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .why-swipe .why-split::-webkit-scrollbar { display: none; }
  .why-swipe .why-panel { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
  .why-swipe .why-bridge { display: none; }
  .why-swipe .why-answer em { animation: none; }
  .why-swipe .swipe-dots { display: flex; }
}
@media (max-width: 820px) {
  .how-swipe .steps.steps-slide { position: relative; display: flex; gap: 12px; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .how-swipe .steps.steps-slide::-webkit-scrollbar { display: none; }
  .how-swipe .steps.steps-slide > li { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; animation: none; }
  .how-swipe .swipe-dots { display: flex; }
}

/* Why Reborn, easier-to-read options (preview, 18 October 2026, made by build_read_options.py). The words stay the
   same; the cards hold them differently. In .why-read the cards are divs: a lead line, then short paragraphs
   (.why-read-paras) or points marked with a short gold dash (.why-points), in option 3 under a small signpost heading
   (.why-label). The body text is full strength rather than muted, for more contrast. */
.why-read .why-gap { color: var(--fg); }
.why-read .why-lead { margin-bottom: 0.6em; }
.why-read .why-panel > p + p { margin-top: 0.8em; }
.why-read .why-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75em; }
.why-read .why-points li { position: relative; padding-left: 1.25em; }
.why-read .why-points li::before { content: ""; position: absolute; left: 0; top: calc(0.85em - 1px); width: 0.6em; height: 2px; border-radius: 1px; background: var(--gold); }
.why-read .why-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--accent-ink); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; text-wrap: nowrap; }
.why-read .why-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.why-read .why-answer .why-label { color: #E4C153; }
/* the gold phrases still underline one after another as the answer arrives, now that they sit in separate parts */
.why-arrive .why-read-paras .why-answer p:last-child em { transition-delay: 1.11s; }
.why-arrive .why-read .why-answer li:nth-child(2) em { transition-delay: 0.93s; }
.why-arrive .why-read .why-answer li:nth-child(3) em { transition-delay: 1.11s; }
/* while Why Reborn's answer (or a step) waits off to the right to slide in, it must not widen the page */
.why-arrive, .how-arrive { overflow-x: clip; }