/* ==========================================================================
   Yuval Fitness - Global stylesheet
   Black bands, white sheets, one hot orange | RTL Hebrew | Mobile first
   --------------------------------------------------------------------------
   The site wears the coaching app's clothes (see DESIGN.md in the app repo):
   near-black bands carry titles in Karantina, white sheets with rounded top
   corners ride up over them and hold the reading, and orange marks the one
   action a block is for. Someone who signs in to app.yuval-fitness.com from
   here should feel they never left.

   Order inside this file:
     1. Design tokens
     2. Surfaces (band / sheet)
     3. Reset & base
     4. Typography
     5. Layout primitives
     6. Accessibility utilities
     7-19. Components & sections
     20. Breakpoints
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Values are the app's (apps/mobile/src/theme/tokens.ts). Surface-dependent
   colours - text, lines, cards, focus - are NOT here; they are set per
   surface in section 2, so a component reads correctly on either one.
   ========================================================================== */

:root {

  /* ---- Fixed colours ---------------------------------------------------- */

  --band:          #0b0b0d;   /* bands, tab-bar black                      */
  --band-raised:   #1c1d21;   /* controls and cards on a band              */
  --sheet:         #ffffff;

  --c-accent:      #ff6b2c;   /* fill: primary pill, marks, rules          */
  --c-accent-press:#e85a1e;
  --c-accent-ink:  #b3410e;   /* orange as TEXT on white (5.71:1)          */
  --c-on-accent:   #0e0e10;   /* text on the orange fill (6.79:1) - white
                                 on this orange is only 2.84:1             */

  --c-wa:          #25d366;   /* WhatsApp brand green                      */
  --c-wa-hover:    #2ee878;
  --c-wa-ink:      #08210f;   /* text on the green                         */

  /* ---- Typography ---------------------------------------------------------
     Karantina is the app's display face: tall, condensed, heavy. It runs
     larger than a regular face would for the same weight. Heebo reads.
     Sizes are rem-based so browser text zoom and user settings work.      */

  --font-display: 'Karantina', 'Heebo', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Heebo', 'Segoe UI', Arial, sans-serif;

  /* Four title sizes, desktop / phone (see the launch canvas spec):
     display 120/68, h2 80/52, title 44/36, h3 20/18. */
  --fs-display: clamp(4.25rem,  8.4vw, 7.5rem);  /* hero headline only    */
  --fs-h1:      clamp(3.25rem,  5.6vw, 5rem);    /* page title, off home */
  --fs-h2:      clamp(3.25rem,  5.6vw, 5rem);    /* section titles       */
  --fs-title:   clamp(2.25rem,  3.1vw, 2.75rem); /* cards, chapters      */
  --fs-h3:      clamp(1.125rem, 1.4vw, 1.25rem); /* Heebo 700             */
  --fs-lead:    clamp(1.125rem, 1.4vw, 1.25rem);
  --fs-body:    clamp(1rem,     1.2vw, 1.0625rem);
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  --lh-display: .92;    /* Karantina headlines                            */
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;    /* body copy - Hebrew reads better with air       */

  --measure:      65ch;
  --measure-lead: 42ch;

  /* ---- Spacing: 4px base, as in the app -------------------------------- */

  --sp-1:  .25rem;    /*   4px */
  --sp-2:  .5rem;     /*   8px */
  --sp-3:  .75rem;    /*  12px */
  --sp-4:  1rem;      /*  16px */
  --sp-5:  1.5rem;    /*  24px */
  --sp-6:  2rem;      /*  32px */
  --sp-7:  2.5rem;    /*  40px */
  --sp-8:  3rem;      /*  48px */
  --sp-9:  4rem;      /*  64px */
  --sp-10: 5rem;      /*  80px */
  --sp-11: 6.5rem;    /* 104px */
  --sp-12: 8rem;      /* 128px */

  --section-y: clamp(5rem, 8.9vw, 8rem);   /* 128 desktop, 80 phone */

  /* ---- Layout ------------------------------------------------------------ */

  /* ONE content width for every section, header and hero included: 1240px
     of content, so at 1440 the page has 100px margins and every block
     starts on the same edge. (Header and hero used to run 110px wider.) */
  --container:        calc(1240px + 2 * var(--gutter));
  --container-wide:   var(--container);
  --container-narrow: 760px;
  --grid-gap:         var(--sp-5);   /* 24px: the 12-column gutter */
  /* 16px on a phone, as in the app; opens up on wider screens. */
  --gutter:           clamp(1rem, 5vw, 3rem);

  /* ---- Radius (app values) ---------------------------------------------- */

  --r-sm:    .5rem;     /*  8 */
  --r-md:    .75rem;    /* 12 */
  --r-lg:    1rem;      /* 16 - cards, stat tiles */
  --r-xl:    1.5rem;    /* 24 - large media       */
  --r-sheet: 1.75rem;   /* 28 - a sheet's top corners where it rides over */
  --r-pill:  999px;

  --shadow-md: 0 1.25rem 3rem rgba(0, 0, 0, .40);

  /* ---- Motion ------------------------------------------------------------ */

  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur-base: .4s;

  /* ---- Targets: the app's pill minimum is 50pt ------------------------- */

  --target-min: 2.75rem;   /* 44px - small controls, links */
  --target-btn: 3.125rem;  /* 50px - pills                 */
}


/* ==========================================================================
   2. SURFACES
   Two grounds, each defining the same set of names. Components only ever
   use these names, so a card, a ghost button or a focus ring is right on
   whichever ground it lands on.

   The band is the default (the page's own background, the header, the
   hero); `.sheet` switches to the light set, `.band` switches back.

   Contrast (measured on the darkest ground each colour sits on):
     band:  ink 19.8   ink-soft 12.4   muted 8.0   accent-text 6.9
     sheet: ink 19.1   ink-soft  8.8   muted 5.5   accent-text 5.7
   ========================================================================== */

:root,
.band {
  --c-bg:          var(--band);
  --c-surface:     var(--band-raised);
  --c-ink:         #ffffff;
  --c-ink-soft:    rgba(255, 255, 255, .80);
  --c-muted:       rgba(255, 255, 255, .64);
  --c-line:        rgba(255, 255, 255, .12);
  --c-line-strong: rgba(255, 255, 255, .26);
  --c-accent-text: var(--c-accent);
  --c-focus:       var(--c-accent);
}

.sheet {
  --c-bg:          var(--sheet);
  --c-surface:     #f2f2ef;
  --c-ink:         #0e0e10;
  --c-ink-soft:    #46494f;
  --c-muted:       #5f636b;
  --c-line:        rgba(11, 11, 13, .10);
  --c-line-strong: rgba(11, 11, 13, .22);
  --c-accent-text: var(--c-accent-ink);
  /* The fill orange is 2.84:1 on white - under the 3:1 a focus indicator
     needs - so on a sheet the ring uses the deeper ink cut of the hue. */
  --c-focus:       var(--c-accent-ink);
}

.band,
.sheet {
  background-color: var(--c-bg);
  color: var(--c-ink);
}

/* A panel rides up over whatever came before it, on rounded top corners -
   the app's sheet-over-band move, repeated down the page so bands and
   sheets stack like the app's screens. Later panels paint on top because
   they come later in the DOM. The extra block-end padding is what the
   next panel will cover. */
.panel {
  position: relative;
  margin-block-start: calc(var(--r-sheet) * -1);
  border-start-start-radius: var(--r-sheet);
  border-start-end-radius: var(--r-sheet);
  padding-block: var(--section-y) calc(var(--section-y) + var(--r-sheet));
}


/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] {
  padding: 0;
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--sp-9);
  /* Overscroll at either end shows band, not a white flash. */
  background-color: var(--band);
}

body {
  min-block-size: 100vh;
  background-color: var(--band);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

img { background-color: var(--c-surface); }

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* Titles in the display face. Karantina ships a single 700 file; naming
   that weight exactly means the browser never synthesises a bold on top. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3, h4 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.prose { max-inline-size: var(--measure); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
  max-inline-size: var(--measure-lead);
}

/* The label above a title: short orange rule, then the word. The rule is
   the stat tile's "label / short rule" borrowed from the app. Hebrew has no
   case, so no uppercase or tracking games. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-accent-text);
}

.eyebrow::before {
  content: '';
  inline-size: 1.5rem;
  block-size: 3px;
  border-radius: 2px;
  background-color: var(--c-accent);
  flex: none;
}

/* Section-head variant centres the rule-and-word unit itself. */
.section-head--center .eyebrow { align-self: center; }


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

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

.container--wide   { max-inline-size: var(--container-wide); }
.container--narrow { max-inline-size: var(--container-narrow); }

/* Two sections sharing one sheet get a hairline between them rather than
   a second panel edge. */
.section + .section {
  margin-block-start: var(--section-y);
  padding-block-start: var(--section-y);
  border-block-start: 1px solid var(--c-line);
}


/* ==========================================================================
   6. ACCESSIBILITY UTILITIES
   ========================================================================== */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: translateY(0); }

/* One focus indicator sitewide. Its colour comes from the surface, so it
   holds 3:1 on black and on white alike. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) { outline: none; }


/* ==========================================================================
   7. REVEAL STATES
   Hidden only when scripting is on. If GSAP fails to load, main.js drops
   the `js` class and everything reverts to visible.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .js [data-reveal],
  .js [data-reveal-card],
  .js [data-reveal-media] {
    opacity: 0;
    will-change: transform, opacity;
  }
}


/* ==========================================================================
   8. BUTTONS
   The app's pill: 50px minimum. Primary is orange with a dark label, and a
   block has at most one. WhatsApp keeps its own green because people
   recognise it before they read it.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);

  min-block-size: var(--target-btn);
  padding: var(--sp-3) var(--sp-6);

  border: 1px solid transparent;
  border-radius: var(--r-pill);

  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color var(--dur-fast) var(--ease-soft),
    border-color     var(--dur-fast) var(--ease-soft),
    color            var(--dur-fast) var(--ease-soft),
    transform        var(--dur-fast) var(--ease-soft);
}

/* Pressed state from the app: a slight scale, no lift. */
.btn:active { transform: scale(.96); }

.btn--sm {
  min-block-size: var(--target-min);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
}

.btn--lg {
  min-block-size: 3.5rem;
  padding: var(--sp-4) var(--sp-7);
  font-size: var(--fs-lead);
}

.btn--primary {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}

.btn--primary:hover { background-color: var(--c-accent-press); }

.btn--whatsapp {
  background-color: var(--c-wa);
  color: var(--c-wa-ink);
}

.btn--whatsapp:hover { background-color: var(--c-wa-hover); }

/* Outlined; takes its colours from the surface it sits on. */
.btn--ghost {
  background-color: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}

.btn--ghost:hover {
  border-color: var(--c-ink);
}

/* ---- The way into the app -------------------------------------------
   Every link to app.yuval-fitness.com carries `.app-link` and ends in the
   same badge: the app's orange pill shrunk to a circle holding a forward
   arrow. One mark for "this leaves the site and opens the app", wherever
   it appears. */

.app-badge {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: none;
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  transition: translate var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft);
}

.app-badge .icon { inline-size: 1rem; block-size: 1rem; }

/* On hover the badge steps forward - toward the inline end, which is the
   left in RTL - as if already on its way to the app. */
.app-link:hover .app-badge,
.app-link:focus-visible .app-badge {
  translate: .25rem 0;
  background-color: var(--c-accent-press);
}

[dir="rtl"] .app-link:hover .app-badge,
[dir="rtl"] .app-link:focus-visible .app-badge {
  translate: -.25rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .app-badge { transition: background-color var(--dur-fast) var(--ease-soft); }
  .app-link:hover .app-badge,
  .app-link:focus-visible .app-badge { translate: none; }
}

/* The header's sign-in button. Not a ghost any more: a raised dark pill
   ringed in solid orange, the label in Heebo's heaviest cut, the badge
   tucked into the end. Beside the green WhatsApp pill it reads as the
   other door - for people already training - without competing with it. */
.btn--app {
  gap: var(--sp-3);
  padding-block: var(--sp-1);
  padding-inline: var(--sp-5) var(--sp-1);
  border: 2px solid var(--c-accent);
  background-color: var(--band-raised);
  color: #fff;
  font-weight: 800;
}

.btn--app:hover { background-color: rgba(255, 107, 44, .16); }

.icon-wa { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.icon    { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* Arrow glyphs are drawn pointing right (forward in LTR) and mirrored in
   RTL, so "forward" always points the way the reader is going. */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }


/* ==========================================================================
   9. SHARED SECTION FURNITURE
   ========================================================================== */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-block-end: clamp(2.5rem, 4.4vw, 4rem);   /* 64 desktop, 40 phone */
  max-inline-size: 53rem;                          /* eight columns       */
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background-color: var(--c-surface);
}

.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A card on a sheet: the app's `surface` fill, 16px radius, hairline. */
.card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
}


/* ==========================================================================
   10. SITE HEADER + NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  padding-block: var(--sp-3);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-soft);
}

/* The scrolled background lives on a pseudo-element: backdrop-filter on the
   header itself would become the containing block for the fixed mobile nav
   panel inside it. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(11, 11, 13, .88);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}

.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled { border-block-end-color: var(--c-line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand,
.nav-toggle {
  position: relative;
  z-index: 2;
}

/* ---- Brand ---- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--target-min);
  text-decoration: none;
  color: var(--c-ink);
}

.brand__mark {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border-radius: var(--r-md);
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}

.brand__mark svg { inline-size: 1.35rem; block-size: 1.35rem; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: .9;
}

.brand__role {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-muted);
}

/* ---- Mobile toggle ---- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  background-color: var(--band-raised);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* One square holds the brand glyph and the close X, stacked; which one
   shows depends on aria-expanded, so the state is carried by shape. */
.nav-toggle__icon {
  display: grid;
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.nav-toggle__icon > svg {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  transition: opacity   var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}

/* The glyph is the one orange thing in the button - brand, not decoration
   of the word beside it. */
.nav-toggle__glyph { color: var(--c-accent); }

.nav-toggle__close { opacity: 0; transform: rotate(-90deg) scale(.6); }

.nav-toggle[aria-expanded="true"] .nav-toggle__glyph {
  opacity: 0;
  transform: scale(.6);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__icon > svg { transition: opacity var(--dur-fast) var(--ease-soft); }
  .nav-toggle__close,
  .nav-toggle[aria-expanded="true"] .nav-toggle__glyph { transform: none; }
}

/* ---- Nav panel (mobile) ----
   visibility:hidden also takes the links out of the tab order. */

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);

  padding: var(--sp-10) var(--gutter);
  background-color: var(--band);

  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft),
              visibility var(--dur-base) step-end;
}

.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-soft),
              visibility 0s;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-nav__list a {
  display: block;
  padding-block: var(--sp-1);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 11vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-soft);
}

.site-nav__list a:hover { color: var(--c-accent); }

.site-nav__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

body.nav-open { overflow: hidden; }


/* ==========================================================================
   11. HERO (band)
   ========================================================================== */

.hero {
  padding-block: var(--sp-7) calc(var(--sp-9) + var(--r-sheet));
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: .86;
  margin-block-start: var(--sp-5);
}

.hero__title-accent { color: var(--c-accent); }

.hero__lead { margin-block-start: var(--sp-6); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-7);
}

.media--hero { aspect-ratio: 4 / 3; }
.media--hero img { object-position: 50% 40%; }


/* ==========================================================================
   12. ABOUT
   ========================================================================== */

.about__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.about__title { margin-block: var(--sp-4) var(--sp-6); }

.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  color: var(--c-ink-soft);
}

.media--portrait { aspect-ratio: 4 / 5; }
.media--portrait img { object-position: 50% 25%; }


/* ==========================================================================
   13. TRAINING OPTIONS
   ========================================================================== */

.training__grid {
  display: grid;
  gap: var(--sp-4);
}

.option {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
}

/* Index and title share a line: the orange figure is the tile's number. */
.option__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.option__index {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-text);
}

.option__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1;
}

.option__text { color: var(--c-ink-soft); }

.option__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}

/* Bullet drawn as a short rule, not a colour dot. */
.option__list li {
  position: relative;
  padding-inline-start: var(--sp-5);
  line-height: var(--lh-normal);
}

.option__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .7em;
  inline-size: .625rem;
  block-size: 2px;
  border-radius: 1px;
  background-color: var(--c-accent);
}

/* ---- Training style companion block ---- */

.style-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  margin-block-start: var(--sp-10);
}

.style-block__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: var(--c-ink-soft);
  max-inline-size: var(--measure);
}

.style-block__copy h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1;
  color: var(--c-ink);
}

.media--style { aspect-ratio: 1 / 1; }


/* ==========================================================================
   14. PROCESS (band)
   ========================================================================== */

.process__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.process__aside h2 { margin-block: var(--sp-4) var(--sp-5); }

.media--detail {
  aspect-ratio: 3 / 2;
  margin-block-start: var(--sp-7);
}

.process__steps {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-block-start: 1px solid var(--c-line);
}

.step:last-child { border-block-end: 1px solid var(--c-line); }

/* The display-face figure, as on the app's stat tiles. */
.step__num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.step__body p { color: var(--c-ink-soft); max-inline-size: var(--measure); }


/* ==========================================================================
   15. THE APP (sheet) - Dylan, the scroll stage, the close
   The stage is a phone that holds still while chapters of copy scroll past
   it; each chapter swaps the screen. Built so the mock screens can be
   replaced by screenshots, video or a 3D model without touching layout -
   see the comment above the section in index.html.
   ========================================================================== */

/* ---- Stage ---- */

.stage { position: relative; display: grid; }

/* Phone first: held under the header while the chapters pass beneath it.
   Its own background hides the copy sliding underneath, and a short fade
   softens the edge the copy emerges from. */
.stage__device {
  position: sticky;
  inset-block-start: 4.5rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  block-size: min(52svh, 28rem);
  padding-block: var(--sp-3);
  background-color: var(--c-bg);
}

.stage__device::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: var(--sp-6);
  background: linear-gradient(var(--c-bg), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.phone-tilt { block-size: 100%; perspective: 1400px; }

.phone {
  position: relative;
  block-size: 100%;
  aspect-ratio: 9 / 19;
  overflow: hidden;
  container-type: inline-size;
  border: .5rem solid var(--band-raised);
  border-radius: 2.25rem;
  background-color: var(--band);
  box-shadow: 0 2rem 4rem rgba(11, 11, 13, .28);
  transform-style: preserve-3d;
}

.phone__notch {
  position: absolute;
  z-index: 3;
  inset-block-start: 1.4%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 30%;
  block-size: 3%;
  border-radius: var(--r-pill);
  background-color: #000;
}

/* Every size inside the phone is in em off a font size set in container
   units, so the mock scales as one piece from a 190px phone to a 330px one. */
.scr,
.phone__tabs { font-size: clamp(7px, 4.6cqw, 15px); }

.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--band);
  opacity: 0;
  transform: translateY(3%);
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft);
}

.scr.is-active { opacity: 1; transform: none; }

.scr svg { inline-size: 1.2em; block-size: 1.2em; flex: none; }

.scr__band { padding: 3.4em 1.4em 2.6em; color: #fff; line-height: 1.2; }
.scr__kicker { font-size: .8em; color: rgba(255, 255, 255, .64); }
.scr__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2em;
  line-height: .95;
}

/* The app's sheet: white, rounded top, riding over the band. */
.scr__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .75em;
  margin-block-start: -1.6em;
  padding: 1.6em 1.2em 5em;
  border-radius: 1.8em 1.8em 0 0;
  background-color: #fff;
  color: #0e0e10;
  line-height: 1.35;
}

.scr__label { font-weight: 700; }

.scr__input {
  padding: .8em 1em;
  border: 1px solid rgba(11, 11, 13, .1);
  border-radius: .9em;
  background-color: #f2f2ef;
}

.scr__agent,
.scr__chip {
  display: flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--c-accent-ink);
}

.scr__agent { font-size: .9em; }

.scr__chip {
  padding: .55em .8em;
  border-radius: var(--r-pill);
  background-color: rgba(255, 107, 44, .14);
  font-size: .76em;
}

.scr__list {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scr__list li,
.scr__card,
.scr__set {
  padding: .7em .9em;
  border-radius: .8em;
  background-color: #f2f2ef;
}

.scr__list li { display: flex; justify-content: space-between; align-items: center; }
.scr__list i { font-style: normal; font-size: .75em; font-weight: 700; color: #1d7f52; }

.scr__card { display: flex; flex-direction: column; gap: .15em; }
.scr__card b { font-size: .95em; }
.scr__card span { font-size: .85em; color: #46494f; }
.scr__card i { font-style: normal; font-size: .75em; font-weight: 700; color: var(--c-accent-ink); }
.scr__card--agent b { display: flex; align-items: center; gap: .35em; color: var(--c-accent-ink); }

.scr__ok { font-size: .85em; font-weight: 700; color: #1d7f52; }

.scr__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }

.scr__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: .8em;
  background: linear-gradient(160deg, #e8e8e4, #cfcfca);
  color: rgba(11, 11, 13, .28);
}

.scr__photo svg { inline-size: 55%; block-size: 55%; }

.scr__photo i {
  position: absolute;
  inset-block-start: .5em;
  inset-inline-start: .5em;
  padding: .2em .6em;
  border-radius: var(--r-pill);
  background-color: rgba(11, 11, 13, .82);
  color: #fff;
  font-style: normal;
  font-size: .7em;
  font-weight: 700;
}

.scr__lock { font-size: .75em; color: #5f636b; }

.scr__set { display: flex; align-items: center; gap: .4em; }
.scr__set span { flex: 1; font-size: .92em; font-weight: 700; }
.scr__set i {
  inline-size: 1.4em;
  block-size: 1.4em;
  border: 2px solid rgba(11, 11, 13, .2);
  border-radius: 50%;
}
.scr__set i.on { border-color: var(--c-accent); background-color: var(--c-accent); }

.scr__pr {
  margin-block-start: .3em;
  padding: .8em;
  border-radius: .9em;
  background-color: var(--band);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.7em;
  line-height: 1;
  text-align: center;
}

/* The app's black tab bar with its raised orange "+". */
.phone__tabs {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  block-size: 11%;
  padding-inline: 1em;
  background-color: var(--band);
}

.phone__tabs span {
  inline-size: 1.3em;
  block-size: 1.3em;
  border-radius: .35em;
  background-color: rgba(255, 255, 255, .28);
}

.phone__tabs b {
  display: grid;
  place-items: center;
  inline-size: 2.6em;
  block-size: 2.6em;
  margin-block-start: -1.4em;
  border-radius: 50%;
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 1.3em;
  box-shadow: 0 0 0 .3em var(--band);
}

/* ---- Chapters ---- */

.stage__chapters {
  margin: 0;
  padding: 0 0 18svh;
  list-style: none;
}

/* On a phone the copy starts at the top of its chapter, so it rises into
   view right under the pinned device instead of trailing in from the
   bottom edge. Wide screens centre it beside the phone (section 20). */
.chapter {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--sp-3);
  min-block-size: 52svh;
  padding-block: var(--sp-5);
  transition: opacity var(--dur-base) var(--ease-soft);
}

/* Once main.js is steering, the chapters not on screen step back. Without
   it, all four read at full strength. */
.stage.is-live .chapter { opacity: .3; }
.stage.is-live .chapter.is-active { opacity: 1; }

.chapter__num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-text);
}

.chapter__kicker {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-muted);
}

.chapter__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: .95;
}

.chapter__text {
  max-inline-size: 36ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
}

.chapter__soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 500;
  color: var(--c-ink-soft);
}

/* Marks a feature that is announced, not shipped. Text, not just colour. */
.tag-soon {
  padding: .2rem .7rem;
  border-radius: var(--r-pill);
  background-color: rgba(255, 107, 44, .14);
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .scr { transform: none; transition: opacity .2s linear; }
  .chapter { transition: none; }
}

/* ---- The close: WhatsApp for newcomers, the app for members ---- */

/* The top margin clears the pinned phone's fade, which otherwise lands
   on this box as the stage scrolls out. */
.showcase__close {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  margin-block-start: var(--sp-8);
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--r-xl);
}

.showcase__close-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: .95;
}

.showcase__close-text {
  margin-block-start: var(--sp-3);
  max-inline-size: 42ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
}

.showcase__close-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.showcase__member {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--target-min);
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
}


/* ==========================================================================
   15b. WHY TRUST IT (band)
   ========================================================================== */

.trust__grid { display: grid; gap: var(--sp-4); }

.trust__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
}

.trust__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--sp-2);
  border-radius: var(--r-pill);
  background-color: rgba(255, 107, 44, .14);
  color: var(--c-accent);
}

.trust__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

.trust__item p { color: var(--c-ink-soft); }


/* ==========================================================================
   16. CALL TO ACTION (band)
   ========================================================================== */

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}

.cta__title { font-size: var(--fs-h2); }

.cta__text {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
  max-inline-size: 34ch;
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
}

.cta__phone {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-soft);
}

.cta__phone:hover { text-decoration-color: var(--c-accent); }


/* ==========================================================================
   16b. THE STUDIO (on the first sheet, after the training options)
   ========================================================================== */

/* "Where is it": the address as a link down to the map, so the section
   that shows the place also answers how to reach it. */
.studio-section__where {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--target-min);
  font-weight: 700;
  color: var(--c-accent-text);
  text-decoration: none;
}

.studio-section__where:hover { text-decoration: underline; }

.media--studio { aspect-ratio: 3 / 2; }

/*
 * The studio gallery: one large frame with a strip of thumbnails under it.
 *
 * Not a carousel. A carousel would hide three quarters of what someone opened
 * this section to look at, and needs controls that four images do not justify.
 * Every photo is visible at once; clicking one promotes it to the large frame.
 */

.studio-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  padding: 0;
  list-style: none;
}

.studio-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  /* Dimmed until chosen, so the current photo is obvious without a caption. */
  opacity: .55;
  transition: opacity var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}

.studio-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.studio-thumb:hover,
.studio-thumb:focus-visible { opacity: 1; }

/*
 * The selected thumbnail: full opacity AND a ring - two channels, because
 * opacity alone is a weak signal.
 *
 * Selection uses box-shadow, NOT outline. outline belongs to :focus-visible;
 * an earlier version marked the current thumbnail with an outline, which
 * silently replaced the focus ring. On separate properties neither can erase
 * the other, and a focused non-current thumbnail shows both.
 */
.studio-thumb.is-current {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--c-focus);
}

@media (prefers-reduced-motion: reduce) {
  .studio-thumb { transition: none; }
}


/* ==========================================================================
   17. LOCATION (sheet)
   ========================================================================== */

.location__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.location__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.location__address {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.location__street {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: .95;
}

.location__city {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
}

.location__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink-soft);
}

.location__note .icon { color: var(--c-accent-text); }

.location__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.location__map {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background-color: var(--c-surface);
}

.location__map iframe {
  display: block;
  inline-size: 100%;
  block-size: 22rem;
  border: 0;
}

/* ==========================================================================
   18. FOOTER (band)
   The extra block-end padding keeps the last row clear of the floating
   WhatsApp button.
   ========================================================================== */

.site-footer {
  padding-block: var(--sp-9) calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-7);
  margin-block-end: var(--sp-8);
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.site-footer__role { color: var(--c-muted); }

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-muted);
  margin-block-end: var(--sp-2);
}

.site-footer__address { font-style: normal; color: var(--c-ink-soft); }

.site-footer__links {
  display: flex;
  flex-direction: column;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--c-ink);
  text-decoration: underline;
}

/* The way into the app: the one link in the footer that is an action, not
   information, so it is the one that looks like it. Bold orange, carrying
   the same arrow badge as the header's sign-in button (section 8). */
.site-footer__links a.site-footer__app {
  gap: var(--sp-3);
  font-weight: 700;
  color: var(--c-accent-text);
}

.site-footer__links a.site-footer__app:hover,
.site-footer__links a.site-footer__app:focus-visible {
  color: var(--c-accent-text);
  text-decoration: none;
}

.site-footer__legal {
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}


/* ==========================================================================
   19. FLOATING WHATSAPP
   Inline-end edge - the left in RTL, where the app puts its own WhatsApp
   pill - clear of iOS safe areas.
   ========================================================================== */

.wa-float {
  position: fixed;
  z-index: 80;
  inset-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(var(--sp-4) + env(safe-area-inset-left, 0px));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);

  min-inline-size: 3.5rem;
  min-block-size: 3.5rem;
  padding: 0;

  border-radius: var(--r-pill);
  background-color: var(--c-wa);
  color: var(--c-wa-ink);

  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;

  box-shadow: var(--shadow-md);
  transition: background-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}

.wa-float:hover { background-color: var(--c-wa-hover); }
.wa-float:active { transform: scale(.96); }

/* The float sits on both grounds as the page scrolls, so its ring is the
   one colour that holds on each: near-black with a white halo. */
.wa-float:focus-visible {
  outline: 2px solid var(--band);
  box-shadow: 0 0 0 5px #fff, var(--shadow-md);
}

.wa-float__icon { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }

.wa-float__text { display: none; }


/* ==========================================================================
   20. BREAKPOINTS
   Widths in em so the layout also responds to browser text zoom.
   ========================================================================== */

/* ---- 40em / 640px ---------------------------------------------------- */
@media (min-width: 40em) {

  .cta__actions {
    flex-direction: row;
    gap: var(--sp-7);
  }


  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---- 48em / 768px ---------------------------------------------------- */
@media (min-width: 48em) {

  .training__grid { grid-template-columns: repeat(2, 1fr); }
  .option:last-child { grid-column: 1 / -1; }

  .option,
  .trust__item { padding: var(--sp-7) var(--sp-6); }

  .style-block {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
  }

  .style-block__media { flex: 0 0 42%; }
  .style-block__copy  { flex: 1 1 auto; }

  .step {
    grid-template-columns: 4.5rem 1fr;
    gap: var(--sp-6);
    padding-block: var(--sp-7);
  }

  .step__num { font-size: 3.5rem; }

  .showcase__close {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-8);
  }

  .location__map iframe { block-size: 26rem; }

  .media--hero { aspect-ratio: 16 / 10; }

  .wa-float { padding-inline: var(--sp-5) var(--sp-6); }
  .wa-float__text { display: inline; }
}


/* ---- 64em / 1024px --------------------------------------------------- */
@media (min-width: 64em) {

  /* ---- The shared grid ----
     Every two-part row sits on the same 12 columns and 24px gutter, so a
     photo or a column of copy lands on the same edges section after
     section. Column 1 is the start - the right, in RTL. */
  .hero__inner,
  .about__inner,
  .style-block,
  .process__inner,
  .location__grid,
  .stage,
  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  /* ---- Hero: copy on 7 columns, photograph on 5 ---- */
  .hero {
    display: flex;
    align-items: center;
    min-block-size: min(86vh, 52rem);
    padding-block: var(--sp-8) calc(var(--sp-10) + var(--r-sheet));
  }

  .hero__inner { align-items: center; }

  .hero__copy  { grid-column: 1 / span 7; }
  .hero__media { grid-column: 8 / span 5; }

  .media--hero { aspect-ratio: 9 / 10; }
  .media--hero img { object-position: 55% 35%; }

  /* ---- About: portrait on 5 columns, copy from column 7 ---- */
  .about__inner { align-items: center; }

  .about__media { grid-column: 1 / span 5; }
  .about__copy  { grid-column: 7 / span 6; }

  .media--portrait { aspect-ratio: 9 / 10; }

  /* ---- Training: three across ---- */
  .training__grid { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
  .option:last-child { grid-column: auto; }

  .style-block {
    align-items: center;
    margin-block-start: 6rem;
  }

  .style-block__media { grid-column: 1 / span 5; }
  .style-block__copy  { grid-column: 7 / span 6; }

  .media--style { aspect-ratio: 8 / 7; }

  /* ---- Process: sticky heading against scrolling steps ---- */
  .process__inner { align-items: stretch; }

  /* Stretched to the height of the steps: a sticky child can only travel
     inside its parent, and a parent sized to its own content leaves it
     nowhere to go - which is why this heading never actually stuck. */
  .process__aside { grid-column: 1 / span 5; }
  .process__steps { grid-column: 7 / span 6; align-self: start; }

  /* The steps run far longer than the heading, so the aside is sticky and
     its photo stretches to fill the rest of the viewport: a tall frame the
     steps scroll past, rather than a small landscape one above a column
     of empty band. Capped so a very tall screen does not get a banner. */
  .process__aside-sticky {
    position: sticky;
    inset-block-start: var(--sp-11);
    display: flex;
    flex-direction: column;
    block-size: calc(100vh - var(--sp-11) - var(--sp-7));
    block-size: calc(100svh - var(--sp-11) - var(--sp-7));
    max-block-size: 56rem;
  }

  .media--detail {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-block-size: 18rem;
  }

  /* Keep the balls and kettlebells, the subject, in frame as it goes tall. */
  .media--detail img { object-position: 45% 60%; }

  /* ---- App stage: copy scrolls on the start side, the phone holds
     still on the end side, vertically centred in the viewport ---- */
  .stage { align-items: start; }

  .stage__device {
    grid-column: 8 / span 5;
    grid-row: 1;
    inset-block-start: 6rem;
    align-items: center;
    block-size: calc(100svh - 8rem);
    max-block-size: 46rem;
    padding: 0;
    background: none;
  }

  .stage__device::after { display: none; }

  .stage__chapters {
    grid-column: 1 / span 7;
    grid-row: 1;
    padding-block: 8svh 16svh;
  }

  .chapter { justify-content: center; min-block-size: 78svh; padding-block: var(--sp-8); }
  .chapter__num { font-size: 3.5rem; }

  .phone { border-width: .6rem; border-radius: 3rem; }

  /* ---- Trust: three across ---- */
  .trust__grid { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

  /* ---- Location ---- */
  .location__grid { align-items: start; }

  .location__info { grid-column: 1 / span 4; }
  .location__map  { grid-column: 6 / span 7; }

  .location__map iframe { block-size: 30rem; }

  /* ---- Studio: the large frame goes panoramic, thumbnails stay a strip ---- */
  .media--studio { aspect-ratio: 16 / 9; }
  .studio-gallery { gap: var(--sp-3); margin-block-start: var(--sp-3); }

  .site-footer__grid > :nth-child(1) { grid-column: span 4; }
  .site-footer__grid > :nth-child(2) { grid-column: span 3; }
  .site-footer__grid > :nth-child(3) { grid-column: span 2; }
  .site-footer__grid > :nth-child(4) { grid-column: span 3; }
}


/* ---- 80em / 1280px --------------------------------------------------- */
@media (min-width: 80em) {

  /* Inline navigation replaces the overlay panel. Not before 80em: six
     links, two buttons and the brand need the room, and below this they
     wrap onto two lines. main.js keys its menu behaviour to the same
     width. */
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-7);
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
  }

  .site-nav__list a {
    padding-block: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-ink-soft);
    white-space: nowrap;
  }

  .site-nav__list a:hover { color: var(--c-ink); }

  .site-nav__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
  }

  .site-header { padding-block: var(--sp-4); }

}


/* ---- 100em / 1600px -------------------------------------------------- */
@media (min-width: 100em) {

  /* Wider screens keep the same 1240px grid, centred; nothing reflows. */
  .hero { min-block-size: min(80vh, 52rem); }
}


/* ---- Short landscape screens ---------------------------------------- */
@media (min-width: 64em) and (max-height: 34rem) {
  .hero { min-block-size: auto; }
}