/* ==========================================================================
   UNIQUE UNISEX FITNESS AND GYM
   Design system v2: premium dark editorial.

   Palette: the existing obsidian / ember / brass hue family, refined into
   full 50-950 OKLCH tonal scales and exposed as semantic tokens. The scales
   below are the single source of truth for colour; no raw hex appears
   anywhere else in this file.

   Type:     Archivo variable (width 62..125, weight 100..900).
   Spacing:  4px base scale, 8px rhythm at layout sizes.
   Motion:   expo-out entrances, rAF-driven scroll work, reduced-motion gated.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* -- neutral: the obsidian ground, the surfaces, the ink -------------- */
  --neutral-50: oklch(0.985 0.0012 245);
  --neutral-100: oklch(0.955 0.0022 245);
  --neutral-200: oklch(0.912 0.0035 245);
  --neutral-300: oklch(0.858 0.0048 245);
  --neutral-400: oklch(0.792 0.0060 245);
  --neutral-500: oklch(0.732 0.0099 243);
  --neutral-600: oklch(0.640 0.0104 243);
  --neutral-700: oklch(0.520 0.0101 244);
  --neutral-800: oklch(0.420 0.0100 246);
  --neutral-850: oklch(0.329 0.0100 246);
  --neutral-900: oklch(0.264 0.0090 247);
  --neutral-950: oklch(0.211 0.0100 248);
  --neutral-975: oklch(0.158 0.0054 248);

  /* -- ember: the primary accent (from #b9251b) ------------------------- */
  --ember-50: oklch(0.988 0.0222 29.22);
  --ember-100: oklch(0.962 0.0407 29.22);
  --ember-200: oklch(0.921 0.0777 29.22);
  --ember-300: oklch(0.868 0.1222 29.22);
  --ember-400: oklch(0.792 0.1629 29.22);
  --ember-500: oklch(0.700 0.1851 29.22);
  --ember-600: oklch(0.607 0.1943 29.22);
  --ember-700: oklch(0.511 0.1888 29.22);
  --ember-800: oklch(0.414 0.1703 29.22);
  --ember-900: oklch(0.305 0.1370 29.22);
  --ember-950: oklch(0.185 0.0925 29.22);

  /* -- brass: the secondary accent and light source (from #cfab42) ------- */
  --brass-50: oklch(0.988 0.0154 89.80);
  --brass-100: oklch(0.962 0.0282 89.80);
  --brass-200: oklch(0.921 0.0538 89.80);
  --brass-300: oklch(0.868 0.0845 89.80);
  --brass-400: oklch(0.792 0.1127 89.80);
  --brass-500: oklch(0.700 0.1281 89.80);
  --brass-600: oklch(0.607 0.1345 89.80);
  --brass-700: oklch(0.512 0.1307 89.80);
  --brass-800: oklch(0.414 0.1179 89.80);
  --brass-900: oklch(0.305 0.0948 89.80);
  --brass-950: oklch(0.185 0.0641 89.80);

  /* -- status hues, tuned to sit beside ember without competing --------- */
  --jade-300: oklch(0.868 0.0551 158.58);
  --jade-400: oklch(0.792 0.0735 158.58);
  --jade-500: oklch(0.700 0.0835 158.58);
  --jade-600: oklch(0.607 0.0876 158.58);
  --jade-700: oklch(0.512 0.0851 158.58);
  --jade-800: oklch(0.414 0.0768 158.58);
  --jade-900: oklch(0.305 0.0618 158.58);

  --amber-300: oklch(0.868 0.0724 63.18);
  --amber-400: oklch(0.792 0.0965 63.18);
  --amber-500: oklch(0.700 0.1097 63.18);
  --amber-600: oklch(0.607 0.1152 63.18);
  --amber-700: oklch(0.512 0.1119 63.18);
  --amber-800: oklch(0.414 0.1009 63.18);
  --amber-900: oklch(0.305 0.0812 63.18);

  --crimson-300: oklch(0.868 0.1170 18.74);
  --crimson-400: oklch(0.792 0.1560 18.74);
  --crimson-500: oklch(0.700 0.1773 18.74);
  --crimson-600: oklch(0.607 0.1861 18.74);
  --crimson-700: oklch(0.512 0.1808 18.74);
  --crimson-800: oklch(0.414 0.1631 18.74);
  --crimson-900: oklch(0.305 0.1312 18.74);

  /* -- semantic surface tokens ----------------------------------------- */
  --color-bg: var(--neutral-975);
  --color-bg-deep: oklch(0.128 0.0090 29.22);
  --color-surface: var(--neutral-950);
  --color-surface-elevated: var(--neutral-900);
  --color-surface-raised: var(--neutral-850);
  --color-surface-sunken: var(--neutral-975);

  --color-border: oklch(0.264 0.009 247);
  --color-border-strong: oklch(0.329 0.010 246);
  --color-border-soft: oklch(0.211 0.010 248);

  --color-text-primary: var(--neutral-50);
  --color-text-secondary: var(--neutral-300);
  --color-text-muted: var(--neutral-400);
  --color-text-faint: var(--neutral-500);
  /* Text that sits on a saturated ember surface. Kept near-white so the
     accent fill carries its own label at WCAG AA, instead of the near-black
     the old beam used at 3.1:1. */
  --color-text-inverse: var(--neutral-50);

  --color-accent: var(--ember-700);
  --color-accent-hover: var(--ember-600);
  --color-accent-active: var(--ember-800);
  --color-accent-quiet: var(--ember-950);
  --color-accent-text: var(--ember-300);
  /* The deepest red that still clears 4.5:1 as small text on the ground
     surfaces. The header sits over the ember glow, so this step is set by
     the worst case there rather than by the flat page background. */
  --color-accent-strong: var(--ember-500);
  --color-accent-line: oklch(0.511 0.1888 29.22 / 0.42);

  --color-secondary: var(--brass-500);
  --color-secondary-text: var(--brass-300);

  --color-success: var(--jade-400);
  --color-warning: var(--amber-400);
  --color-danger: var(--crimson-400);

  --color-scrim: oklch(0.14 0.006 250 / 0.86);
  --color-overlay: oklch(0.122 0.0062 261.58 / 0.72);

  /* -- typography ------------------------------------------------------- */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step-display: clamp(3rem, 1.6rem + 6.4vw, 7.25rem);
  --step-head: clamp(2rem, 1.25rem + 3.2vw, 3.75rem);
  --step-subhead: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --step-quote: clamp(1.35rem, 1.05rem + 1.5vw, 2.15rem);
  --step-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --step-body: clamp(1rem, 0.975rem + 0.16vw, 1.0625rem);
  --step-small: 1rem;
  --step-micro: 0.8125rem;

  --tracking-display: -0.035em;
  --tracking-head: -0.028em;
  --tracking-body: -0.005em;
  --tracking-label: 0.12em;

  --leading-display: 0.92;
  --leading-head: 1.02;
  --leading-body: 1.62;

  --measure: 46ch;
  --measure-tight: 34ch;

  /* -- spacing: 4px base, 8px rhythm ------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -- radii ------------------------------------------------------------ */
  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-2xl: 1.75rem;
  --r-media: 1rem;
  --r-pill: 999px;

  /* -- motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 750ms;
  --stagger-line: 90ms;
  --stagger-item: 70ms;

  /* -- layout ----------------------------------------------------------- */
  --frame: clamp(1.25rem, 4.2vw, 4.5rem);
  --gutter: clamp(1.5rem, 3.5vw, 3.5rem);
  --content-max: 104rem;
  --header-h: 4.5rem;
}

/* ------------------------------------------------------------------- reset */

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

/* The inline BMI and calorie scripts toggle the `hidden` attribute on grid
   containers. Without this the display declaration on those containers
   would win over the user-agent rule and the hidden panels would show. */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  font-size: 100%;
  color-scheme: dark;
  scrollbar-color: var(--color-surface-raised) var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--sans);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
blockquote,
dl,
dd,
address,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

fieldset {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* --------------------------------------------------------------- utilities */

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

.skip-link {
  position: fixed;
  z-index: 200;
  top: var(--space-4);
  left: var(--space-4);
  padding: 0.7rem 1.1rem;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--step-small);
  font-weight: 700;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--t-ui) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.frame-in {
  padding-inline: var(--frame);
}

.frame-in > * {
  min-width: 0;
}

/* Every page section shares one content measure and centres on it. The
   measure is applied as padding on the section itself, never as a max-width
   on a grid child, so grid tracks keep their intended width. */
.sec.frame-in,
.cta-panel {
  padding-inline: max(var(--frame), calc((100% - var(--content-max)) / 2));
}

/* ------------------------------------------------------------ type rhythm */

.display {
  font-family: var(--sans);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.head {
  font-family: var(--sans);
  font-weight: 750;
  font-stretch: 110%;
  letter-spacing: var(--tracking-head);
  line-height: var(--leading-head);
  text-wrap: balance;
}

h1.display {
  font-size: var(--step-display);
}

.head {
  font-size: var(--step-head);
}

.lead {
  color: var(--color-text-secondary);
  font-size: var(--step-lead);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- sections */

.sec {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.sec-head h2 {
  max-width: 26ch;
}

.sec-head .sec-note {
  color: var(--color-text-secondary);
  max-width: 52ch;
  text-wrap: pretty;
}

/* Full-width sections: heading left, note anchored to the right edge.
   Single column until 48rem: a two-column split declared at the base would
   give the fixed-width note track all of the available space on a narrow
   screen and collapse the heading track to zero. */
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.sec-head--split .sec-note {
  margin-bottom: 0;
}

/* Split sections: a narrow heading column, then content at full measure.
   Single column on small screens; the column split arrives at 48rem. */
.sec-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.sec-split--3 {
  grid-template-columns: minmax(0, 1fr);
}

/* On a phone the heading sits directly above the content, so it has to scroll
   away with it. Sticky only makes sense once the two columns sit side by side;
   pinned here it floated over the board and the two texts mixed. */
.sec-split .sec-head {
  margin-bottom: 0;
}

.sec-split .sec-head h2 {
  max-width: 16ch;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
}

.sec-split .sec-note {
  font-size: var(--step-small);
}

.sec-split .letter-side {
  margin-top: var(--space-2);
}

/* ----------------------------------------------------------------- buttons */

.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.8rem 1.4rem;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--step-small);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    background-color var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

.button > * {
  position: relative;
  z-index: 1;
}

.button:active {
  transform: scale(0.975);
}

/* The header action should feel steady on touch and desktop. Keep the press
   state from shrinking the navigation and reserve colour change for real
   pointer hover. */
.site-header .button {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.site-header .button:hover,
.site-header .button:active {
  transform: none;
}

.site-header .button:focus-visible {
  outline: 0.18rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

/* The secondary button is a raised surface, not an outline: a one-pixel
   frame around a box reads as a drawn shape rather than as depth. */
.button--ghost {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.button--ghost:hover {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  width: fit-content;
  color: inherit;
  font-weight: 600;
  font-size: var(--step-small);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.text-link span {
  display: inline-block;
  transition: transform var(--t-ui) var(--ease-out);
}

.ghost-link {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
}

.ghost-link:hover,
.ghost-link:focus-visible {
  color: var(--color-text-primary);
  text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: var(--color-accent-hover);
  }

  .text-link:hover {
    color: var(--color-accent-text);
  }

  .text-link:hover span {
    transform: translateX(4px);
  }
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: fixed;
  z-index: 100;
  inset-inline: 0;
  top: 0;
  min-height: var(--header-h);
  background: transparent;
}

/* The scrolled bar's tint and blur live on a pseudo-element rather than on
   the header itself. backdrop-filter creates a containing block for fixed
   descendants, and the mobile menu is a fixed child of this header: with the
   filter on the header the panel was clipped to the bar and the page showed
   through it. A pseudo-element is not an ancestor, so the menu is free. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  pointer-events: none;
  transition: background-color var(--t-ui) ease;
}

.site-header.is-scrolled::before {
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  column-gap: var(--space-6);
  min-height: var(--header-h);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--frame);
}

.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding-block: 0.7rem;
  color: var(--color-text-primary);
  font-weight: 800;
  font-stretch: 118%;
  font-size: var(--step-lead);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
}

.site-logo small {
  /* Deep red to match the rest of the accent, but one step lighter than
     --color-accent so the tagline still clears the 4.5:1 contrast floor. */
  color: var(--color-accent-strong);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.05em;
  /* The brand tagline is functional text, so it sits on the micro step
     (13px) rather than shrinking below a legible size with the wordmark. */
  font-size: var(--step-micro);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.9rem);
  position: relative;
}

/* Sliding glide indicator for active nav item */
.site-nav__list::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: var(--glide-left, 0px);
  width: var(--glide-width, 0px);
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transition: left var(--t-ui) var(--ease-out), width var(--t-ui) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--color-text-secondary);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-text-primary);
}

.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after {
  transform: none;
}

.hdr-cta {
  min-height: 2.6rem;
  padding: 0.55rem 1.05rem;
  font-size: var(--step-small);
  border-radius: var(--r-xs);
}

.site-nav .hdr-cta-mobile {
  display: none;
}

/* -------------------------------------------------------------- mobile menu */

.menu-toggle {
  display: none;
  /* If large text pushes the lockup wider than the row, the toggle wraps to
     its own line and stays flush right instead of being pushed offscreen. */
  margin-inline-start: auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--step-small);
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  display: block;
  width: 1.4rem;
  height: 2px;
  background: currentColor;
  content: "";
  transition: transform var(--t-ui) var(--ease-out);
}

.menu-toggle__icon {
  position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  position: absolute;
  left: 0;
}

.menu-toggle__icon::before {
  top: -0.4rem;
}

.menu-toggle__icon::after {
  top: 0.4rem;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------- mobile menu */

@media (max-width: 60rem) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.35rem;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--step-small);
    font-weight: 700;
    cursor: pointer;
  }

  /* The phone menu is a full opaque sheet: a translucent panel with a blur
     behind it is a second glass surface on top of the scrolled header, and
     the page behind it stays legible through the panel. */
  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
    background: var(--color-bg);
    z-index: 90;
    overflow-y: auto;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* No divider rules: the rows are separated by space, and each one is a
     comfortable target on its own. */
  .site-nav__list li {
    padding-bottom: 0.9rem;
  }

  .site-nav__list a {
    display: block;
    padding-block: 1rem 0;
    font-size: var(--step-lead);
    font-weight: 600;
  }

  .site-nav__list a::after {
    display: none;
  }

  .site-nav__cta {
    display: none;
  }

  /* Matches the specificity of the desktop hide rule above so the phone CTA
     actually appears inside the open menu. */
  .site-nav .hdr-cta-mobile {
    display: inline-flex;
    align-self: flex-start;
    /* A full 44px target, matching the rows above it. */
    min-height: 2.75rem;
  }
}

/* ------------------------------------------------------------------ hero */

.v-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Fill the first viewport so the page ground never shows as a band
     beneath the gradient before the scroll begins. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-12);
  /* Base of the elegant-dark pattern: a deep radial wash from the top-left,
     in the palette's own ground hues rather than the component's gray/black. */
  background:
    radial-gradient(100% 100% at 0% 0%,
      var(--neutral-850) 0%,
      var(--color-bg) 100%);
}

/* The streak layer: one element per beam, ember over brass, masked into
   bands the way the component's five cyan beams are. */
.v-hero .v-hero__streaks {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
}

.v-hero .v-hero__streaks span {
  position: absolute;
  inset: -40% -60%;
  opacity: 0.14;
  background: linear-gradient(
    color-mix(in srgb, var(--ember-500) 70%, var(--brass-400)) 0%,
    transparent 100%);
  transform: skewX(45deg);
}

.v-hero .v-hero__streaks span:nth-child(1) {
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, black 20%, transparent 36%, black 55%,
    rgb(0 0 0 / 0.13) 67%, black 78%, transparent 97%);
  mask-image: linear-gradient(90deg,
    transparent 0%, black 20%, transparent 36%, black 55%,
    rgb(0 0 0 / 0.13) 67%, black 78%, transparent 97%);
}

.v-hero .v-hero__streaks span:nth-child(2) {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 11%, black 25%, rgb(0 0 0 / 0.55) 41%,
    rgb(0 0 0 / 0.13) 67%, black 78%, transparent 97%);
  mask-image: linear-gradient(90deg,
    transparent 11%, black 25%, rgb(0 0 0 / 0.55) 41%,
    rgb(0 0 0 / 0.13) 67%, black 78%, transparent 97%);
}

.v-hero .v-hero__streaks span:nth-child(3) {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 9%, black 20%, rgb(0 0 0 / 0.55) 28%,
    rgb(0 0 0 / 0.42) 40%, black 48%, rgb(0 0 0 / 0.27) 54%,
    rgb(0 0 0 / 0.13) 78%, rgb(0 0 0 / 0.88) 88%, transparent 97%);
  mask-image: linear-gradient(90deg,
    transparent 9%, black 20%, rgb(0 0 0 / 0.55) 28%,
    rgb(0 0 0 / 0.42) 40%, black 48%, rgb(0 0 0 / 0.27) 54%,
    rgb(0 0 0 / 0.13) 78%, rgb(0 0 0 / 0.88) 88%, transparent 97%);
}

.v-hero .v-hero__streaks span:nth-child(4) {
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, black 17%, rgb(0 0 0 / 0.55) 26%, black 35%,
    transparent 47%, rgb(0 0 0 / 0.13) 69%, rgb(0 0 0 / 0.79) 79%, transparent 97%);
  mask-image: linear-gradient(90deg,
    transparent 0%, black 17%, rgb(0 0 0 / 0.55) 26%, black 35%,
    transparent 47%, rgb(0 0 0 / 0.13) 69%, rgb(0 0 0 / 0.79) 79%, transparent 97%);
}

.v-hero .v-hero__streaks span:nth-child(5) {
  background: linear-gradient(
    color-mix(in srgb, var(--brass-500) 60%, var(--ember-600)) 0%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, black 20%, rgb(0 0 0 / 0.55) 27%, black 42%,
    transparent 48%, rgb(0 0 0 / 0.13) 67%, black 74%,
    rgb(0 0 0 / 0.82) 88%, transparent 97%);
  mask-image: linear-gradient(90deg,
    transparent 0%, black 20%, rgb(0 0 0 / 0.55) 27%, black 42%,
    transparent 48%, rgb(0 0 0 / 0.13) 67%, black 74%,
    rgb(0 0 0 / 0.82) 88%, transparent 97%);
}

/* Subtle dot pattern overlay, as in the component. */
.v-hero .v-hero__dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  background-image: radial-gradient(circle at 1px 1px,
    color-mix(in srgb, var(--neutral-50) 50%, transparent) 1px,
    transparent 0);
  background-size: 20px 20px;
}

.v-hero::before,
.v-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(28rem, 65vw, 60rem);
  aspect-ratio: 1;
  pointer-events: none;
  translate: var(--glow-x, 0px) var(--glow-y, 0px);
}

.v-hero::before {
  top: -10%;
  left: -15%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--ember-600) 42%, transparent) 0%,
    color-mix(in srgb, var(--ember-800) 20%, transparent) 38%,
    transparent 70%);
}

.v-hero::after {
  translate: calc(var(--glow-x, 0px) * -0.65) calc(var(--glow-y, 0px) * -0.65);
  right: -14%;
  bottom: -25%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brass-600) 30%, transparent) 0%,
    color-mix(in srgb, var(--ember-700) 16%, transparent) 40%,
    transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .v-hero::before,
  .v-hero::after {
    animation: hero-glow-drift 18s ease-in-out infinite alternate;
    animation-play-state: paused;
  }

  .v-hero::after {
    animation-duration: 23s;
    animation-delay: -9s;
    animation-direction: alternate-reverse;
  }

  .v-hero.is-glow-active::before,
  .v-hero.is-glow-active::after {
    animation-play-state: running;
  }
}

@keyframes hero-glow-drift {
  from { transform: translate3d(-4%, 3%, 0) scale(0.94); }
  to { transform: translate3d(18%, -10%, 0) scale(1.12); }
}

.v-hero__inner {
  display: grid;
  /* Full width: as a grid item of the viewport-filling hero, auto margins
     would otherwise shrink-to-fit and pull both columns to the middle. */
  width: 100%;
  gap: var(--space-10);
  align-items: center;
  max-width: var(--content-max);
  margin-inline: auto;
}

.v-hero__copy {
  container-type: inline-size;
}

h1.v-hero__title {
  font-size: clamp(2.5rem, 15.8cqw, 7.25rem);
  font-weight: 750;
  font-stretch: 104%;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: initial;
}

.v-hero__title > span {
  display: block;
}

.v-hero__lead {
  max-width: 38ch;
  margin-top: var(--space-8);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.v-hero .hero-actions {
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.v-hero .button {
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--r-pill);
}

.v-hero .hero-call:hover {
  background: var(--color-accent-hover);
}

.hero-directions,
.hero-reviews,
.hero-bmi-calc__head a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--step-small);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--t-hover) ease;
}

.hero-directions:hover,
.hero-reviews:hover,
.hero-bmi-calc__head a:hover {
  color: var(--color-accent-text);
}

.v-hero__aside {
  min-width: 0;
  overflow: visible;
}

@media (min-width: 64rem) {
  .v-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
  }
}

body[data-page="home"] .site-header .button {
  min-height: 2.75rem;
  background: var(--color-accent);
  border-radius: var(--r-pill);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero-bmi-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
}

.hero-bmi-calc__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.hero-bmi-calc__head h2 {
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-bmi-calc__head a {
  color: var(--color-text-secondary);
}

.hero-bmi-calc label {
  display: grid;
  gap: var(--space-2);
}

.hero-bmi-calc label > span {
  color: var(--color-text-secondary);
  font-size: var(--step-small);
  font-weight: 500;
}

.hero-bmi-calc label small {
  font-size: inherit;
}

.hero-bmi-calc input {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
  transition: border-color var(--t-hover) ease;
}

.hero-bmi-calc input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.hero-bmi-calc input:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

.v-hero .hero-bmi-calc button {
  grid-column: 1;
  justify-self: stretch;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  border: 0;
}

.v-hero .hero-bmi-calc button:hover {
  background: color-mix(in oklch, var(--color-accent) 50%, var(--color-accent-hover));
}

.v-hero .hero-bmi-calc button:active {
  background: var(--color-accent-active);
}

.hero-bmi-calc__result {
  grid-column: 1;
  align-self: center;
  min-width: 0;
  font-size: var(--step-micro);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.hero-bmi-calc__result strong:not(:empty) {
  margin-right: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--step-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero-bmi-calc__note {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--step-micro);
  line-height: 1.5;
}

.v-hero__meta {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  margin-top: var(--space-10);
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

.v-hero__meta .open-now {
  color: var(--color-text-primary);
  font-weight: 500;
}

.v-hero__meta .open-now::before {
  flex-shrink: 0;
}

.hero-reviews {
  gap: 0.25em;
  flex-wrap: wrap;
  margin-top: var(--space-3);
  text-decoration-color: var(--color-border-strong);
}

.hero-reviews strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.open-now {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-secondary);
}

/* The status dot carries a soft ring drawn as an outline. */
.open-now::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
  outline: 0.25rem solid oklch(0.792 0.0735 158.58 / 0.16);
  outline-offset: 0;
}

.open-now.is-closed::before {
  background: var(--color-warning);
  outline-color: oklch(0.792 0.0965 63.18 / 0.16);
}

/* -------------------------------------------------------------- floor figs */

.figs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

/* A photograph is not a card: no fill, no frame, no drop shadow. The tile is
   the picture itself, and the caption sits on a scrim over the image. */
.figs figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
}

/* The lead and tall variants are qualified with the element selector so they
   outrank the `.figs figure` rule above, which is one type selector more
   specific than a bare class and would otherwise win the cascade. */
.figs figure.figs__lead {
  aspect-ratio: 16 / 10;
}

.figs img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The placeholder colour sits on the image, so a photograph that has not
     loaded yet shows a flat field rather than a broken frame. */
  background: var(--color-surface-elevated);
  transition: transform 1500ms var(--ease-soft), scale 420ms var(--ease-out);
}

.figs figure:hover img {
  scale: 1.035;
}

.figs figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: var(--color-text-inverse);
  font-size: var(--step-small);
  font-weight: 500;
  background: linear-gradient(rgba(6, 7, 9, 0) 0%, rgba(6, 7, 9, 0.85) 70%); /* taste-skill-ignore */
}

/* ----------------------------------------------------------- listing board */

.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.board__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* Each group is one filled panel and the entries inside it are separated by
   space. Hairline rules between the rows were reading as a table grid. */
.board-group {
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--r-lg);
}

.board-group h3 {
  font-size: var(--step-subhead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.board-item {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-4) 0;
}

.board-item__name {
  font-size: var(--step-body);
  font-weight: 600;
  color: var(--color-text-primary);
}

.board-item__value {
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--color-accent-text);
}

.board-item__desc {
  font-size: var(--step-small);
  color: var(--color-text-secondary);
}

.board-item__leader {
  width: 1.5rem;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.5;
  align-self: center;
}

.board__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  color: var(--color-text-secondary);
}

.board-phone {
  color: var(--color-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ----------------------------------------------------------- letter split */

.letter {
  max-width: none;
  font-size: var(--step-body);
  line-height: 1.62;
  letter-spacing: -0.012em;
  color: var(--color-text-secondary);
}

.letter p {
  margin: 0 0 var(--space-4);
}

.letter .mark {
  color: var(--color-accent-text);
  font-weight: 700;
}

.letter em {
  color: var(--color-text-primary);
  font-style: normal;
  font-weight: 500;
}

.letter .signature {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  font-size: var(--step-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.letter-side {
  position: relative;
}

.fac-fig {
  margin: 0 0 var(--space-8) 0;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.fac-fig img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1500ms var(--ease-soft), scale 420ms var(--ease-out);
}

.fac-fig:hover img {
  scale: 1.03;
}

/* -------------------------------------------------- founder scroll timeline */

.founder-history {
  padding-top: clamp(4rem, 8vw, 8rem);
}

.founder-timeline {
  width: 100%;
}

.founder-timeline__list {
  display: grid;
  gap: clamp(3rem, 9vw, 9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.founder-timeline__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  min-height: 0;
  scroll-margin-top: calc(var(--header-h) + var(--space-8));
}

.founder-timeline__item:nth-child(1) {
  --stack-index: 1;
  --card-surface: var(--color-surface);
}

.founder-timeline__item:nth-child(2) {
  --stack-index: 2;
  --card-surface: var(--color-surface-elevated);
}

.founder-timeline__item:nth-child(3) {
  --stack-index: 3;
  --card-surface: var(--color-surface-raised);
}

.founder-timeline__item:nth-child(4) {
  --stack-index: 4;
  --card-surface: var(--color-surface);
}

.founder-timeline__item:nth-child(5) {
  --stack-index: 5;
  --card-surface: var(--color-surface-elevated);
}

.founder-timeline__item:nth-child(6) {
  --stack-index: 6;
  --card-surface: var(--color-surface-raised);
}

.founder-timeline__item:nth-child(7) {
  --stack-index: 7;
  --card-surface: var(--color-accent-quiet);
}

.founder-timeline__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-sunken);
  border-radius: var(--r-lg);
}

.founder-timeline__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--color-surface-sunken);
  transition: scale 900ms var(--ease-soft);
}

.founder-timeline__media:hover img {
  scale: 1.025;
}

.founder-timeline__media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: var(--color-text-inverse);
  font-size: var(--step-small);
  font-weight: 550;
  background: var(--color-overlay);
}

.founder-timeline__copy {
  display: grid;
  align-content: center;
  gap: var(--space-5);
  max-width: 42rem;
  min-height: 22rem;
}

.founder-timeline__copy h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(2rem, 1.25rem + 2.8vw, 4.25rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
  text-wrap: balance;
}

.founder-timeline__meta {
  margin: 0;
  color: var(--color-accent-text);
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.35;
}

.founder-timeline__copy > p:not(.founder-timeline__meta):not(.founder-timeline__result) {
  max-width: 42ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--step-lead);
  line-height: 1.55;
}

.founder-timeline__result {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.65rem 0.9rem;
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border-radius: var(--r-sm);
  font-size: var(--step-small);
  font-weight: 650;
}

/* The following section gets its own ground so the last sticky image cannot
   visually bleed into the gym-floor gallery. */
body[data-page="about"] .founder-history + #floor {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}

/* ------------------------------------------- certifications + achievements */

.achievements-history {
  position: relative;
  isolation: isolate;
  padding-top: clamp(5rem, 10vw, 10rem);
  padding-bottom: clamp(5rem, 10vw, 10rem);
  background: var(--color-bg-deep);
}

.achievement-scroller {
  position: relative;
  min-width: 0;
  margin-top: var(--space-8);
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--r-xl);
}

.achievement-scroller__viewport {
  width: 100%;
  overflow: hidden;
}

.achievement-scroller__track {
  display: flex;
  width: max-content;
  animation: achievement-marquee 62s linear infinite;
  will-change: transform;
}

.achievement-scroller__track:hover,
.achievement-scroller__track:focus-within {
  animation-play-state: paused;
}

.achievements-history.is-marquee-paused .achievement-scroller__track {
  animation-play-state: paused;
}

.achievement-scroller__controls {
  display: none;
}

.achievement-marquee-toggle {
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--step-small);
  font-weight: 700;
  cursor: pointer;
}

.achievement-marquee-toggle:focus-visible {
  outline: 0.18rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

.achievement-scroller__list {
  display: flex;
  align-items: stretch;
  gap: clamp(0.35rem, 0.8vw, var(--space-3));
  flex: 0 0 auto;
  width: max-content;
  height: min(62svh, 38rem);
  padding: 0 clamp(1rem, 5vw, 6rem);
}

.achievement-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 0 0 clamp(13rem, 17vw, 19rem);
  height: min(62svh, 38rem);
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--r-lg);
}

.achievement-card__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.achievement-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-surface-sunken);
}

.achievement-card__media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-2);
  background: var(--color-surface-sunken);
}

.achievement-card__media-pair img {
  min-width: 0;
  min-height: 0;
}

.achievement-card__copy {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  min-width: 0;
}

.achievement-card__year {
  color: var(--color-accent-text);
  font-size: var(--step-small);
  font-weight: 700;
  line-height: 1;
}

.achievement-card__copy h3 {
  color: var(--color-text-primary);
  font-size: clamp(1.2rem, 1rem + 1.25vw, 2rem);
  font-weight: 800;
  letter-spacing: var(--tracking-head);
  line-height: 1.05;
  text-wrap: balance;
}

.achievement-card__meta {
  color: var(--color-text-secondary);
  font-size: var(--step-small);
  font-weight: 650;
  line-height: 1.35;
}

.achievement-card__copy > p:last-child {
  max-width: 42ch;
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@keyframes achievement-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

body[data-page="about"] .achievements-history + #floor {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}

/* ------------------------------------------------------------- review wall */

.rwall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-5);
}

.rwall__card {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface-elevated);
  border-radius: var(--r-lg);
}

.rwall__card blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-inline-start: 2px solid var(--color-accent);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-primary);
}

.rwall__card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: var(--space-3);
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

.rwall__card figcaption strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.rwall__card figcaption span {
  color: var(--color-text-faint);
  font-size: var(--step-micro);
}

.rwall__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------- faq cols */

.faq-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
}

/* The questions run as a list, not as a row of boxes: the question is set as
   a heading in its own right and the answer follows under it. */
.faq-item {
  margin: 0;
  font-size: var(--step-body);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.faq-item strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--step-lead);
  font-weight: 700;
  line-height: 1.25;
}

/* ------------------------------------------------------------- cta panel */

.cta-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: clamp(4rem, 8vw, 8rem);
  overflow: clip;
}

.cta-copy {
  position: relative;
  z-index: 1;
}

.cta-copy h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--step-head);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}

.cta-copy p {
  margin: 0 0 var(--space-5);
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.cta-media {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-2xl);
}

.cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1500ms var(--ease-soft), scale 420ms var(--ease-out);
}

.cta-media:hover img {
  transform: scale(1.04);
}

/* ----------------------------------------------------------------- footer */

/* The footer is separated from the page by its own ground, not by a rule
   across the width. */
.site-footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--color-bg-deep);
}

.site-footer__panel {
  max-width: var(--content-max);
  margin-inline: auto;
  /* The panel is capped at the content measure, so it only needs the frame
     inset; without it the footer sat flush to the viewport while every
     section above was inset by --frame. */
  padding-inline: var(--frame);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-menu .site-logo {
  line-height: 1.1;
}

.footer-menu nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.footer-menu nav a {
  /* Footer links are standalone targets, not inline prose, so they need a
     hit area of their own: 15px text plus this padding clears 28px. */
  display: inline-block;
  padding: 0.45rem 0.3rem;
  color: var(--color-text-muted);
  font-size: var(--step-small);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

.footer-menu nav a:hover {
  color: var(--color-text-primary);
}

.footer-info {
  display: grid;
  gap: var(--space-5);
}

.footer-info h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--step-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.footer-info address {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.footer-info p {
  margin: 0;
  font-size: var(--step-small);
  color: var(--color-text-secondary);
}

.footer-info p > a {
  /* The phone number and the map link stand alone in their paragraphs, so
     they get a full-size hit area rather than the inline-text exception. */
  display: inline-block;
  padding-block: 0.45rem;
}

.footer-legal {
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--color-text-faint);
}

.footer-legal a {
  color: var(--color-text-faint);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-legal a:hover {
  color: var(--color-text-muted);
}

@media (max-width: 60rem) {
  .site-footer__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ inner hero */

.p-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vh, 5rem)) var(--frame) clamp(3rem, 7vw, 6rem);
}

/* The inner-page headline is set at display size: it is the first thing on
   the screen and it has to carry the page the way the home hero does. */
.p-hero__copy h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.0;
}

.p-hero__copy .lead {
  margin: 0;
  max-width: 46ch;
}

.p-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-2xl);
}

.p-hero__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--color-surface-elevated);
}

/* A neutral scrim under the caption so the words hold against the
   photograph. */
.p-hero__media figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  font-size: var(--step-small);
  color: var(--color-text-inverse);
  background: linear-gradient(rgba(6, 7, 9, 0) 0%, rgba(6, 7, 9, 0.88) 72%); /* taste-skill-ignore */
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

.hero-meta strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

@media (min-width: 64rem) {
  .p-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ forms */

.form-field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.form-field label {
  color: var(--color-text-secondary);
  font-size: var(--step-small);
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}

.form-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-faint);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.form-field input.touched:invalid,
.form-field textarea.touched:invalid {
  border-color: var(--color-danger);
}

.form-field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' stroke='%23a3a9ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  cursor: pointer;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-note {
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--color-text-faint);
}

/* The status line is a quiet filled note, framed by a hairline rather than
   a thick accent edge. */
.form-status {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.form-status.is-error {
  background: oklch(0.305 0.1312 18.74 / 0.24);
  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------ calculator */

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.calc {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--r-xl);
}

.calc-toggle {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  justify-self: start;
  padding: 3px;
  background: var(--color-surface-sunken);
  border-radius: var(--r-sm);
}

.calc-toggle button {
  padding: 0.5rem 0.95rem;
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  color: var(--color-text-muted);
  font-size: var(--step-micro);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.calc-toggle button.is-on {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.calc-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-4);
}

.calc-msg {
  min-height: 1.3rem;
  font-size: var(--step-small);
  color: var(--color-warning);
}

.calc-result {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-6);
}

.calc-bmi {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.25rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-text-primary);
}

.calc-bmi small {
  /* The unit sits at body size rather than as a scaled-down tracked label:
     the number is the reading, and "BMI" is a plain word beside it. */
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

.calc-band {
  font-size: var(--step-subhead);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-accent-text);
}

.calc-note {
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.calc-scale {
  display: flex;
  gap: 2px;
  height: 0.5rem;
  margin: var(--space-4) 0 var(--space-1);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.calc-scale span {
  background: var(--color-surface-raised);
  transition: filter var(--t-ui) ease;
}

.calc-scale span[data-seg="under"] { background: var(--amber-500); }
.calc-scale span[data-seg="healthy"] { background: var(--jade-500); }
.calc-scale span[data-seg="over"] { background: var(--brass-500); }
.calc-scale span[data-seg="obese"] { background: var(--crimson-500); }

/* An inset outline marks the segment containing the reading. */
.calc-scale span.is-here {
  position: relative;
  z-index: 1;
  filter: brightness(1.3);
  outline: 2px solid oklch(1 0 0 / 0.7);
  outline-offset: -2px;
}

.calc-range {
  font-size: var(--step-small);
  color: var(--color-text-faint);
}

.calc-range strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.bands {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.board__foot p {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.fac-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.fac-pair .fac-fig {
  position: relative;
}

.fac-pair .fac-fig figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-size: var(--step-micro);
  color: var(--color-text-inverse);
  background: linear-gradient(rgba(6, 7, 9, 0) 0%, rgba(6, 7, 9, 0.85) 70%); /* taste-skill-ignore */
}

@media (min-width: 64rem) {
  .calc-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  /* The form is much shorter than the band list beside it, so it holds the
     top of the viewport and travels with the reader down the bands instead
     of leaving a hole in the left column. */
  .calc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

/* ------------------------------------------------------ calorie estimator */

.calorie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.calorie-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-4);
}

.calorie-results {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.calorie-result-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--r-lg);
}

.calorie-result-card > span {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--color-text-muted);
}

.calorie-result-card strong {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: var(--tracking-head);
  line-height: 1;
  color: var(--color-text-primary);
}

.calorie-result-card strong small {
  font-size: var(--step-micro);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-faint);
}

.calorie-result-card p {
  margin: var(--space-3) 0 0;
  font-size: var(--step-small);
  color: var(--color-text-muted);
}

.calorie-disclaimer {
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--color-text-faint);
}

@media (min-width: 64rem) {
  .calorie-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.contact-details {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.contact-detail {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--r-lg);
}

/* The label is a word, not a stamped code: sentence case at a readable size,
   with the value below it in the primary ink. */
.contact-detail h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-accent-text);
}

.contact-detail p {
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.contact-detail a {
  color: var(--color-accent-text);
  font-weight: 600;
  text-decoration: none;
}

.contact-detail a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.map-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-elevated);
  border-radius: var(--r-lg);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) hue-rotate(180deg) brightness(0.92) contrast(1.05);
}

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--r-xl);
}

.contact-form h2 {
  margin: 0;
  font-size: var(--step-subhead);
  font-weight: 750;
  letter-spacing: var(--tracking-head);
  color: var(--color-text-primary);
}

.contact-form .form-note {
  margin: 0;
}

.contact-form > button,
.contact-form > .form-status {
  justify-self: start;
}

.contact-maps-note {
  margin: var(--space-5) 0 0;
}

@media (min-width: 34rem) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form h2,
  .contact-form > .form-note,
  .contact-form > .form-field--full,
  .contact-form > button,
  .contact-form > .form-status {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  }
}

/* ==================================================================== motion
   These selectors are a contract with assets/main.js. The script toggles
   .is-in, .is-on, .is-here, .is-open, .is-closed and .is-error and writes
   the --d, --i, --magnet-x, --magnet-y and --hero-scroll custom properties.
   Renaming any of them breaks the behaviour, so they are reproduced here
   exactly as the script expects them.
   ========================================================================= */

.js [data-reveal="rise"] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-reveal) var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal="rise"].is-in {
  opacity: 1;
  transform: none;
}

.js [data-reveal="open"] {
  clip-path: inset(0 0 22% 0);
  opacity: 0;
  transition: clip-path 1100ms var(--ease-in-out), opacity 600ms ease;
  transition-delay: var(--d, 0ms);
}

.js [data-reveal="open"] > img {
  transform: scale(1.09);
  transition: transform 1500ms var(--ease-soft), scale 420ms var(--ease-out);
}

.js [data-reveal="open"].is-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.js [data-reveal="open"].is-in > img {
  transform: none;
}

.js [data-lines] .line {
  display: block;
  overflow: clip;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.js [data-lines] .line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 900ms var(--ease-expo);
}

.js [data-lines].is-in .line > span {
  transform: none;
  transition: transform 900ms var(--ease-expo) calc(var(--i, 0) * var(--stagger-line));
}

.js .v-hero [data-load] {
  opacity: 0;
  transform: translateY(14px);
  animation: load-rise 560ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes load-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Image zoom is a separate property so it composes with the reveal
   transform instead of fighting it for specificity. */
.fac-fig img,
.cta-media img,
.p-hero__media img {
  transition: transform 1500ms var(--ease-soft), scale 420ms var(--ease-out);
}

.fac-fig:hover img,
.cta-media:hover img,
.p-hero__media:hover img {
  scale: 1.035;
}

/* Legacy split-stage hook, kept so the script path stays valid. */
.stage__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.stage__media img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__media img.is-on {
  display: block;
}

/* ================================================================ responsive
   Mobile first: every layout starts as a single column and gains tracks as
   the viewport allows. The four reference widths are 375 / 768 / 1280 /
   1920 CSS pixels, i.e. 23.4rem / 48rem / 80rem / 120rem. The breakpoints
   used here are 30rem (480), 34rem (544), 48rem (768), 60rem (960) and
   64rem (1024).
   ========================================================================= */

@media (max-width: 25rem) {
  /* Below 400px the header cannot hold the wordmark and its tagline on one
     line, so the lockup stacks deliberately instead of wrapping mid-phrase. */
  .site-header .site-logo {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    padding-block: 0.55rem;
  }

  .site-header .site-logo small {
    font-size: var(--step-micro);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

@media (min-width: 30rem) {
  .hero-bmi-calc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-bmi-calc button {
    grid-column: 1;
  }

  .hero-bmi-calc__result {
    grid-column: 2;
  }
}

@media (min-width: 34rem) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  /* On a phone the right-hand chapter copy already names the image and event;
     removing the overlay keeps the scroll sequence calm and prevents the
     caption from competing with the next chapter heading. */
  .founder-timeline__media figcaption {
    display: none;
  }

  .founder-timeline__list {
    gap: 0;
  }

  .founder-timeline__item {
    position: sticky;
    top: calc(var(--header-h) + 0.8rem + (var(--stack-index) * 0.35rem));
    z-index: var(--stack-index);
    min-height: 0;
    margin-bottom: 3.5rem;
    padding: 1rem;
    background: var(--card-surface, var(--color-surface));
    border-radius: var(--r-lg);
    box-shadow: 0 1.25rem 2.5rem oklch(0.02 0.006 250 / 0.26);
  }

  .founder-timeline__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
  }

  .founder-timeline__copy {
    min-height: 0;
    padding-top: var(--space-6);
  }

  .achievement-scroller {
    margin-top: var(--space-6);
  }

  .achievement-scroller__controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
    padding-inline: 1rem;
  }

  .achievement-marquee-toggle {
    display: inline-flex;
  }

  .achievement-scroller__track {
    animation-duration: 46s;
  }

  .achievement-scroller__list {
    gap: var(--space-3);
    height: min(64svh, 32rem);
    padding: 0 1rem;
  }

  .achievement-card {
    flex-basis: clamp(11.5rem, 52vw, 16rem);
    height: min(64svh, 32rem);
  }
}

@media (min-width: 48rem) {
  .v-hero {
    padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 5rem));
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  }

  .sec-split {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .sec-split .sec-head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }

  .sec-split--3 {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }

  /* The photographs occupy a full-width row here. The heading must scroll
     away before that row reaches it; pin only with three separate columns. */
  .sec-split--3 .sec-head {
    position: static;
  }

  .sec-split--3 .letter-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .founder-timeline__list {
    gap: 0;
  }

  .founder-timeline__item {
    position: sticky;
    top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem) + (var(--stack-index) * 0.55rem));
    z-index: var(--stack-index);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: min(76svh, 52rem);
    margin-bottom: clamp(4rem, 8vw, 8rem);
    padding: clamp(1rem, 2vw, 2rem);
    background: var(--card-surface, var(--color-surface));
    border-radius: var(--r-xl);
    box-shadow: 0 1.5rem 3rem oklch(0.02 0.006 250 / 0.24);
  }

  .founder-timeline__media {
    position: relative;
    top: auto;
    align-self: center;
    height: min(62svh, 38rem);
    aspect-ratio: auto;
    border-radius: var(--r-md);
  }

  .founder-timeline__copy {
    min-height: 0;
    padding-inline: clamp(0.5rem, 1vw, 1rem);
  }

  .figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figs figure {
    aspect-ratio: 4 / 3;
  }

  .figs figure.figs__lead {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  .board__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rwall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

@media (min-width: 64rem) {
  /* The heading and its note sit side by side only once the viewport is
     wide enough for both to hold their line. Below that they stack, which
     keeps the heading at full width instead of breaking it over three
     lines in a narrow column. */
  .sec-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end;
    gap: var(--gutter);
  }

  .sec-head--split .sec-note {
    justify-self: end;
    margin-bottom: 0.2rem;
  }

  .sec-split {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  }

  .sec-split--3 {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 16rem);
  }

  .sec-split--3 .sec-head {
    position: sticky;
  }

  .sec-split--3 .letter-side {
    grid-column: auto;
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }

  .founder-timeline__list {
    gap: 0;
  }

  .founder-timeline__item {
    position: sticky;
    top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem) + (var(--stack-index) * 0.55rem));
    z-index: var(--stack-index);
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: min(76svh, 52rem);
    margin-bottom: clamp(4rem, 8vw, 8rem);
    padding: clamp(1rem, 2vw, 2rem);
    background: var(--card-surface, var(--color-surface));
    border-radius: var(--r-xl);
    box-shadow: 0 1.5rem 3rem oklch(0.02 0.006 250 / 0.24);
  }

  .founder-timeline__media {
    position: relative;
    top: auto;
    align-self: center;
    height: min(62svh, 38rem);
    aspect-ratio: auto;
    border-radius: var(--r-md);
  }

  .founder-timeline__copy {
    min-height: 0;
    padding-inline: clamp(0.5rem, 1vw, 1rem);
  }


  .figs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .figs figure {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }

  .figs figure.figs__lead {
    grid-column: span 4;
    aspect-ratio: 4 / 3;
  }

  .figs figure.figs__tall {
    grid-column: span 2;
    aspect-ratio: 2 / 3;
  }

  .rwall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cta-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .cta-media {
    aspect-ratio: 5 / 4;
  }
}

/* ================================================================ behaviour */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal="rise"],
  .js [data-reveal="open"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .js [data-reveal="open"] > img,
  .js [data-lines] .line > span {
    transform: none !important;
  }
}

/* Stronger text and rules when the system asks for more contrast, and no
   translucent surfaces letting imagery soften an edge. The default palette
   already clears 4.5:1; this is the extra step. */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--neutral-300);
    --color-text-faint: var(--neutral-400);
    --color-border-soft: var(--neutral-850);
    --color-border: var(--neutral-800);
    --color-border-strong: var(--neutral-700);
  }

  .v-hero::before,
  .v-hero::after,
  .v-hero .v-hero__streaks,
  .v-hero .v-hero__dots {
    display: none;
  }

  .v-hero {
    background: var(--color-bg);
  }

  .hero-bmi-calc {
    background: var(--color-surface-elevated);
  }

  .site-header.is-scrolled::before {
    background: var(--color-bg-deep);
  }
}

/* Achievement cards use their own marquee presentation. Do not combine it
   with the generic reveal choreography. */
.achievement-card [data-reveal="open"],
.achievement-card [data-reveal="rise"] {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

.achievement-card [data-reveal="open"] > img,
.achievement-card [data-reveal="open"] .achievement-card__media-pair img {
  transform: none;
  scale: 1;
}

@media print {
  .site-header,
  .map-frame,
  .site-footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .sec,
  .p-hero,
  .cta-panel {
    padding-block: 1.5rem;
  }
}

/* People-first photo frames: preserve the complete original on every page.
   Dimensions follow the photo, not a fixed landscape crop; captions stay outside. */
[data-full-photo-frame] {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  overflow: visible;
}
img[data-full-photo] {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  transform: none;
  scale: 1;
  border-radius: var(--r-md);
}
[data-full-photo-frame]:hover img[data-full-photo] {
  transform: none;
  scale: 1;
}
[data-full-photo-frame] > figcaption {
  position: static;
  padding: var(--space-4) 0 0;
  background: none;
  color: var(--color-text-secondary);
}
.founder-timeline__item {
  position: relative;
  top: auto;
  min-height: 0;
}
.founder-timeline__media[data-full-photo-frame] {
  height: auto;
  aspect-ratio: auto;
  background: transparent;
}
.blog-card__media[data-full-photo-frame],
.blog-post__hero[data-full-photo-frame] {
  display: block;
  width: min(100%, 34rem);
  margin-inline: auto;
}