/* ==========================================================================
   Rhythmic gymnastics photography — design system
   Monochrome, near-black, generous negative space. Colour comes from the
   photography, never from the interface.
   ========================================================================== */

:root {
  --ink:        #0b0b0d;
  --ink-2:      #0e0e11;
  --surface:    #121216;
  --surface-2:  #17171c;
  --line:       rgb(255 255 255 / 0.09);
  --line-soft:  rgb(255 255 255 / 0.055);
  --text:       #f5f5f7;
  --muted:      #8e8e99;
  --muted-dim:  #5f5f6b;
  --glow-a:     rgb(104 92 168 / 0.20);
  --glow-b:     rgb(150 120 170 / 0.10);
  --accent:     #cbb6ff;

  --shell: 1180px;
  --shell-narrow: 900px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 16px;
  --radius-lg: 24px;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

body {
  margin: 0; min-height: 100dvh; background: var(--ink); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.06; letter-spacing: -0.035em; }

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

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: var(--shell-narrow); }
.section { padding-block: clamp(5rem, 11vw, 9.5rem); position: relative; }

/* Ambient light. The hero's purple glow is the site's signature, so the
   sections below carry a quieter version of it rather than sitting on flat
   panels. Each one is placed differently — left, right, low centre — so
   scrolling reads as one continuous light source moving, not a repeated
   pattern. Sizes and positions come from custom properties set per section. */
.section--glow { overflow: hidden; }
.section--glow::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse var(--gw, 55%) var(--gh, 70%) at var(--gx, 50%) var(--gy, 0%),
      var(--glow, rgb(104 92 168 / .30)), transparent 72%),
    radial-gradient(ellipse var(--g2w, 45%) var(--g2h, 55%) at var(--g2x, 80%) var(--g2y, 90%),
      var(--glow2, rgb(150 120 170 / .12)), transparent 70%);
  /* A glow that still has colour where the section ends draws a hard line
     across the page. Fading the layer out at all four edges means the light
     dies away before the boundary, whatever size the section happens to be. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to right,  transparent, #000 10%, #000 90%, transparent);
          mask-composite: intersect;
}
.section--glow > * { position: relative; z-index: 1; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--flush-top { padding-top: 0; }
.surface { background: var(--ink-2); }

/* One ground tone the whole way down. Panels a shade lighter or darker than
   the base read as either washed out or as holes; the hero's own treatment —
   near-black with a soft violet glow over it — is the thing that works, so
   every section is a variation on that rather than a different colour. */
.center { text-align: center; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--text); color: var(--ink); padding: .75rem 1.25rem; border-radius: 0 0 12px 0; }
.skip-link:focus { left: 0; }

/* --- Type scale ------------------------------------------------------------ */
.display   { font-size: clamp(2rem, 5.6vw, 4.3rem); }
.h-section { font-size: clamp(1.95rem, 4vw, 3rem); }
.h-card    { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -0.02em; }

.lede { color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.02rem); line-height: 1.7; max-width: 52ch; }
.lede--center { margin-inline: auto; }

.kicker {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dim); font-weight: 600; margin: 0 0 1.1rem;
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lede { margin-top: 1.15rem; }

/* --- Buttons: the white pill with an arrow disc ---------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: .38rem .38rem .38rem 1.15rem; border-radius: 100px;
  border: 1px solid transparent; background: var(--text); color: var(--ink);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn__arrow {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ink); color: var(--text);
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn__arrow svg { width: 13px; height: 13px; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translateX(2px); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost .btn__arrow { background: rgb(255 255 255 / .09); color: var(--text); }
.btn--ghost:hover { border-color: rgb(255 255 255 / .28); }

.btn--lg { font-size: .95rem; padding: .45rem .45rem .45rem 1.4rem; }
.btn--lg .btn__arrow { width: 36px; height: 36px; }
.btn--plain { padding: .7rem 1.3rem; }
.btn--block { width: 100%; justify-content: center; padding: 1rem 1.5rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row--center { justify-content: center; }

/* --- Nav ------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgb(11 11 13 / .72); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner { display: flex; align-items: center; height: 70px; gap: 1.5rem; position: relative; }
.nav__brand {
  text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: -0.02em;
  text-transform: uppercase; white-space: nowrap;
}
.nav__brand em { font-style: normal; font-weight: 400; color: var(--muted); }
.nav__logo { height: 44px; width: auto; }
.footer__logo { height: 64px; width: auto; margin-bottom: 1.1rem; }
@media (max-width: 520px) { .nav__logo { height: 37px; } }
/* Logo left, order button dead-centre, page links right. The button is taken
   out of the flow and pinned to the middle of the bar rather than centred
   between two items of unequal width — otherwise it sits off-centre by half
   the difference between the logo and the link list. Every transform on it
   keeps the -50% or it jumps on hover. */
.nav__links {
  display: flex; gap: 2rem; list-style: none; margin: 0 0 0 auto; padding: 0;
}
.nav__links a {
  text-decoration: none; font-size: .85rem; font-weight: 500; color: var(--muted);
  transition: color .2s;
}
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--text); }
.nav__cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__cta:hover { transform: translate(-50%, calc(-50% - 2px)); }
.nav__cta.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, calc(-50% - 6px));
}

.nav__toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: .45rem .6rem; cursor: pointer; }

@media (max-width: 860px) {
  .nav__toggle { display: block; order: 3; margin-left: auto; }
  .nav__cta { order: 2; }
  .nav__links {
    position: fixed; inset: 70px 0 auto; margin: 0; flex-direction: column; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.5rem; display: none;
  }
  .nav__links[data-open='true'] { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: .9rem 0; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
}
/* The label stays at every width — an unlabelled arrow disc reads as a mystery
   button. Shrink the pill instead. */
@media (max-width: 430px) {
  .nav__cta { font-size: .8rem; padding: .3rem .3rem .3rem .85rem; gap: .5rem; }
  .nav__cta .btn__arrow { width: 26px; height: 26px; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative; text-align: center; overflow: hidden;
  min-height: calc(100dvh - 70px);
  display: grid; align-content: center;
  padding-block: clamp(1.25rem, 3.5vh, 3rem) clamp(2.5rem, 7.5vh, 5.5rem);
}
.hero::before {
  content: ''; position: absolute; inset: -20% -20% auto; height: 130%; z-index: 0;
  background:
    radial-gradient(ellipse 46% 42% at 50% 34%, var(--glow-a), transparent 68%),
    radial-gradient(ellipse 70% 40% at 50% 8%, var(--glow-b), transparent 72%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__logo {
  width: auto; height: clamp(64px, 12.5vh, 190px);
  margin: 0 auto clamp(1.4rem, 4.5vh, 3.25rem);
}
.hero .display { max-width: 15ch; margin-inline: auto; }
.hero .lede { margin: clamp(1.15rem, 3vh, 2.1rem) auto 0; max-width: 50ch;
  font-size: clamp(.95rem, 1.45vw, 1.2rem); line-height: 1.65; }

/* --- Stat row -------------------------------------------------------------- */
.stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 5vw, 4rem);
  margin: clamp(1.9rem, 5vh, 3.5rem) 0 clamp(1.9rem, 5vh, 3.25rem);
}
@media (max-width: 580px) {
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem .4rem; }
  .stat b { font-size: 1.05rem; }
  .stat span { font-size: .5rem; letter-spacing: .06em; }
}
/* Short screens: give the headline and logo less room rather than push the
   button below the fold. */
@media (max-height: 730px) {
  .display { font-size: clamp(1.85rem, 4.6vh, 3rem); }
  .hero__logo { height: clamp(56px, 10vh, 120px); }
}
/* Landscape phones: compress hard rather than push the button off screen. */
@media (max-height: 570px) {
  .hero { padding-block: clamp(.5rem, 1.5vh, 1rem) clamp(1rem, 3vh, 2rem); }
  .hero__logo { height: clamp(42px, 8vh, 72px); margin-bottom: .8rem; }
  .display { font-size: clamp(1.55rem, 4.2vh, 2.1rem); }
  .hero .lede { margin-top: .75rem; font-size: .88rem; }
  .stats { margin: 1rem 0 1.1rem; }
}
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -0.03em; }
.stat span { display: block; font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-dim); margin-top: .35rem; }

/* --- Marquee trust strip --------------------------------------------------- */
.marquee-band { border-block: 1px solid var(--line-soft); padding-block: 1.5rem; overflow: hidden; max-width: 100%; }
.marquee-band__label { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 1rem; }
.marquee { display: flex; width: 100%; max-width: 100%; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 3.5rem; padding-right: 3.5rem; flex: none; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-size: .95rem; font-weight: 500; color: var(--muted); white-space: nowrap; letter-spacing: -0.01em; }
@keyframes slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* --- Split (text + media) --------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.split--wide-media { grid-template-columns: 0.9fr 1.1fr; }
.split--top { align-items: start; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--tall { aspect-ratio: 4 / 5; }
.split p { color: var(--muted); margin: 1.15rem 0 0; max-width: 46ch; }
.split .btn-row { margin-top: 2rem; }
@media (max-width: 820px) { .split, .split--wide-media { grid-template-columns: 1fr; } .split__media { order: -1; } }

/* --- Benefit / feature cards ------------------------------------------------ */
.grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.tile {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.6rem 1.5rem 1.75rem;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.tile:hover { border-color: var(--line); background: var(--surface-2); }
.tile h3 { margin-bottom: .65rem; }
.tile p { color: var(--muted); font-size: .9rem; margin: 0; }
.tile__num { font-size: .68rem; letter-spacing: .14em; color: var(--muted-dim); font-weight: 600; margin-bottom: 1.6rem; }

/* --- Process steps ---------------------------------------------------------- */
.steps { display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 5rem 1fr 1.2fr; gap: 1.5rem; align-items: baseline;
  padding: 1.9rem 0; border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step__num { font-size: .7rem; letter-spacing: .14em; color: var(--muted-dim); font-weight: 600; }
.step h3 { font-size: 1.25rem; }
.step p { color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 760px) { .step { grid-template-columns: 3.5rem 1fr; } .step p { grid-column: 2; } }

/* --- Packages --------------------------------------------------------------- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.75rem 1.6rem; display: flex; flex-direction: column;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.card:hover { border-color: var(--line); background: var(--surface-2); }
.card--featured { border-color: rgb(255 255 255 / .2); background: var(--surface-2); }
.card__flag { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: .8rem; }
.card__prices { margin: .7rem 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.price-row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.price-row b { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; }
.price-row span { color: var(--muted-dim); font-size: .78rem; }
.price-note { color: var(--muted-dim); font-size: .78rem; line-height: 1.5; margin-top: .6rem; }
.price-cur { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dim); margin-top: .6rem; }
.card__blurb { color: var(--muted); font-size: .88rem; margin: 0 0 1.3rem; }
.card__list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .55rem; }
.card__list li { font-size: .84rem; color: var(--muted); padding-left: 1.3rem; position: relative; }
.card__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-dim); }
.card .btn { margin-top: auto; align-self: flex-start; }

/* --- Events ----------------------------------------------------------------- */
.events { display: grid; }
.event {
  display: grid; grid-template-columns: 12rem 1fr auto; gap: .3rem 2rem; align-items: center;
  padding: 1.6rem 0; border-top: 1px solid var(--line-soft);
}
.event:last-child { border-bottom: 1px solid var(--line-soft); }
.event__dates { font-size: .95rem; font-weight: 600; letter-spacing: -0.02em; }
.event__name { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; }
.event__meta { color: var(--muted-dim); font-size: .82rem; margin-top: .15rem; }
.event__closed { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dim); }
.event--closed { opacity: .45; }
@media (max-width: 760px) { .event { grid-template-columns: 1fr; gap: .5rem; } .event__status { justify-self: start; } }

/* --- Work grid -------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; }
.filter {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 100px; padding: .5rem 1.05rem; font: inherit; font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: all .25s var(--ease);
}
.filter:hover { color: var(--text); border-color: rgb(255 255 255 / .25); }
.filter[aria-pressed='true'] { background: var(--text); color: var(--ink); border-color: var(--text); }

.work-grid { display: grid; gap: .85rem; grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.work-item {
  position: relative; margin: 0; border: 0; padding: 0; background: var(--surface-2);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
}
/* --tile-zoom lets one photograph be pushed in a little further than the
   square crop gives on its own. The hover lift multiplies it rather than
   replacing it, or a zoomed tile would jump back on hover. */
.work-item img {
  width: 100%; height: 100%; object-fit: cover;
  scale: var(--tile-zoom, 1); transition: scale .7s var(--ease);
}
.work-item:hover img { scale: calc(var(--tile-zoom, 1) * 1.035); }
.work-item[data-ratio='portrait']  { aspect-ratio: 4 / 5; }
.work-item[data-ratio='landscape'] { aspect-ratio: 3 / 2; grid-column: span 2; }
.work-item[data-ratio='square']    { aspect-ratio: 1 / 1; }
@media (max-width: 700px) { .work-item[data-ratio='landscape'] { grid-column: span 1; } }

/* Home preview: one uniform rhythm, no ragged holes. The mixed-ratio mosaic
   is reserved for the gallery page, where there are enough tiles to fill it. */
.work-grid--uniform .work-item { aspect-ratio: 4 / 5; grid-column: span 1; }

/* Collage: an explicit bento. Every tile is placed by hand on a 6-column grid,
   so the thirteen photographs tessellate exactly — no gaps, no repeating
   column rhythm, and no two neighbours the same size. Slot shapes alternate
   portrait and landscape; HOME_WORK in config.js is ordered to match. */
.work-grid--collage {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 92px;
}
.work-grid--collage .work-item { aspect-ratio: auto; }

.work-grid--collage .work-item:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 7; }
.work-grid--collage .work-item:nth-child(2)  { grid-column: 3 / 7; grid-row: 1 / 5; }
.work-grid--collage .work-item:nth-child(3)  { grid-column: 3 / 5; grid-row: 5 / 7; }
.work-grid--collage .work-item:nth-child(4)  { grid-column: 5 / 7; grid-row: 5 / 7; }
.work-grid--collage .work-item:nth-child(5)  { grid-column: 1 / 3; grid-row: 7 / 12; }
.work-grid--collage .work-item:nth-child(6)  { grid-column: 3 / 5; grid-row: 7 / 12; }
.work-grid--collage .work-item:nth-child(7)  { grid-column: 5 / 7; grid-row: 7 / 12; }
.work-grid--collage .work-item:nth-child(8)  { grid-column: 1 / 4; grid-row: 12 / 15; }
.work-grid--collage .work-item:nth-child(9)  { grid-column: 4 / 7; grid-row: 12 / 15; }
.work-grid--collage .work-item:nth-child(10) { grid-column: 1 / 3; grid-row: 15 / 21; }
.work-grid--collage .work-item:nth-child(11) { grid-column: 3 / 5; grid-row: 15 / 21; }
.work-grid--collage .work-item:nth-child(12) { grid-column: 5 / 7; grid-row: 15 / 18; }
.work-grid--collage .work-item:nth-child(13) { grid-column: 5 / 7; grid-row: 18 / 21; }

/* Tablet: a coarser bento on 4 columns. */
@media (max-width: 1000px) {
  .work-grid--collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 86px; }
  .work-grid--collage .work-item:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 7; }
  .work-grid--collage .work-item:nth-child(2)  { grid-column: 3 / 5; grid-row: 1 / 4; }
  .work-grid--collage .work-item:nth-child(3)  { grid-column: 3 / 5; grid-row: 4 / 7; }
  .work-grid--collage .work-item:nth-child(4)  { grid-column: 1 / 3; grid-row: 7 / 10; }
  .work-grid--collage .work-item:nth-child(5)  { grid-column: 3 / 5; grid-row: 7 / 12; }
  .work-grid--collage .work-item:nth-child(6)  { grid-column: 1 / 3; grid-row: 10 / 15; }
  .work-grid--collage .work-item:nth-child(7)  { grid-column: 3 / 5; grid-row: 12 / 17; }
  .work-grid--collage .work-item:nth-child(8)  { grid-column: 1 / 3; grid-row: 15 / 18; }
  .work-grid--collage .work-item:nth-child(9)  { grid-column: 3 / 5; grid-row: 17 / 20; }
  .work-grid--collage .work-item:nth-child(10) { grid-column: 1 / 3; grid-row: 18 / 24; }
  .work-grid--collage .work-item:nth-child(11) { grid-column: 3 / 5; grid-row: 20 / 26; }
  .work-grid--collage .work-item:nth-child(12) { grid-column: 1 / 3; grid-row: 24 / 27; }
  .work-grid--collage .work-item:nth-child(13) { grid-column: 3 / 5; grid-row: 26 / 29; }
}

/* Phone: stop placing by hand — a single column of natural crops reads better
   than a bento squeezed into 320px. */
@media (max-width: 640px) {
  .work-grid--collage { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .work-grid--collage .work-item { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .work-grid--collage .work-item img { height: auto; }
}

.work-item__cap {
  position: absolute; inset: auto 0 0; padding: 3rem 1.1rem 1.1rem; text-align: left;
  background: linear-gradient(to top, rgb(8 8 10 / .92), transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.work-item:hover .work-item__cap, .work-item:focus-visible .work-item__cap { opacity: 1; }
.work-item__cap b { display: block; font-weight: 600; font-size: .92rem; letter-spacing: -0.02em; }
.work-item__cap span { display: block; color: var(--muted); font-size: .76rem; }
.work-item__badge {
  position: absolute; top: .75rem; left: .75rem; background: rgb(8 8 10 / .7);
  backdrop-filter: blur(8px); border-radius: 100px; padding: .25rem .65rem;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.work-empty { color: var(--muted); padding: 3rem 0; }

/* --- Gallery wall -------------------------------------------------------------
   Uniform square tiles butted close together. Equal tiles are the only way to
   guarantee no gaps, and 30 photographs divide exactly by 5, 3 and 2, so every
   row is full at every breakpoint. Tiles crop; the lightbox shows the whole
   frame uncropped on click. */
.work-grid--wall {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  grid-auto-flow: row;
}
.work-grid--wall .work-item[data-ratio] {
  aspect-ratio: 1 / 1;
  grid-column: span 1;
  grid-row: auto;
  border-radius: 3px;
}
.work-grid--wall .work-item img { object-fit: cover; }
.work-grid--wall .work-item__cap { padding: 2rem .7rem .7rem; }
.work-grid--wall .work-item__cap b { font-size: .8rem; }
.work-grid--wall .work-item__cap span { font-size: .68rem; }

@media (max-width: 1000px) { .work-grid--wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .work-grid--wall { grid-template-columns: repeat(2, 1fr); gap: 4px; } }

/* --- Slideshow ---------------------------------------------------------------
   `cover` so every photograph fills the frame identically — the set mixes
   portrait and landscape, so this crops. Biased slightly above centre, where
   the gymnast and her apparatus usually are. */
/* Wide on a desktop, standing on a phone. The script feeds each shape its own
   set of photographs, so nothing is ever cropped against its grain. */
.slideshow {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  border-radius: var(--radius-lg); background: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  opacity: 0;
  /* Not var(--ease): that curve is front-loaded, so most of the fade happens
     in the first fraction of it and the change reads as a jump however long
     the duration. ease-in-out spreads it evenly. */
  transition: opacity .8s ease-in-out;
}
.slideshow img.is-live { opacity: 1; }
@media (max-width: 700px) { .slideshow { aspect-ratio: 3 / 4; } }
@media (prefers-reduced-motion: reduce) { .slideshow img { transition: none; } }

/* --- Lightbox ---------------------------------------------------------------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  overscroll-behavior: contain; }
/* Set while the lightbox is open, so the page behind cannot scroll away under
   a swipe meant to move to the next photograph. */
html.is-locked, html.is-locked body { overflow: hidden; touch-action: none; }
.lightbox::backdrop { background: rgb(6 6 8 / .95); backdrop-filter: blur(8px); }
.lightbox__body { position: relative; width: min(1080px, 94vw); }
.lightbox__body img, .lightbox__body iframe, .lightbox__body video {
  width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius); background: #000;
}
.lightbox__body iframe { aspect-ratio: 16 / 9; height: auto; border: 0; }
.lightbox__meta {
  padding-top: .9rem; color: var(--muted); font-size: .85rem;
  display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
}
.lightbox__count { color: var(--muted-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Step buttons. Sit inside the frame's edges so they never fall off a phone
   screen; on touch the swipe is the main way through anyway. */
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgb(10 10 13 / .6);
  backdrop-filter: blur(8px); color: var(--text);
  font-size: 1.6rem; line-height: 1; padding: 0 0 .18em 0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__nav:hover { background: rgb(10 10 13 / .85); border-color: rgb(255 255 255 / .3); }
.lightbox__nav--prev { left: .75rem; }
.lightbox__nav--next { right: .75rem; }
@media (max-width: 640px) {
  .lightbox__nav { width: 38px; height: 38px; font-size: 1.3rem; }
  .lightbox__meta { flex-direction: column; gap: .25rem; }
}
.lightbox__close {
  position: absolute; top: -3rem; right: 0; background: none; border: 1px solid var(--line);
  color: var(--text); border-radius: 50%; width: 38px; height: 38px; cursor: pointer;
}

/* --- Quotes ------------------------------------------------------------------ */
.quote { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.75rem 1.6rem; }
.quote p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.65; letter-spacing: -0.015em; }
.quote footer { color: var(--muted-dim); font-size: .8rem; }

/* --- Prose (about) ----------------------------------------------------------- */
.prose p { color: var(--muted); margin: 0 0 1.15rem; max-width: 62ch; }
.prose p.prose__lead { color: var(--text); font-size: 1.15rem; line-height: 1.6; letter-spacing: -0.02em; }
.prose h3 { font-size: 1.4rem; margin: 2.5rem 0 .9rem; }

/* --- Order option tree -------------------------------------------------------
   Each choice is its own card. Selecting one does not wrap the next level
   inside it: the next level appears as separate cards below, indented just
   enough to show what they belong to.

   Only the deepest live choice stays highlighted. Once a card's own children
   have been answered it drops back to resting state, so a four-level order
   doesn't leave four nested boxes lit up at once. */
.opt-tree { display: grid; gap: .55rem; }

.opt { display: grid; gap: .55rem; }

.opt__head {
  display: flex; align-items: center; gap: .8rem; cursor: pointer; margin: 0;
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.opt__head:hover { border-color: rgb(255 255 255 / .22); }
.opt.is-on > .opt__head { border-color: var(--text); background: var(--surface-2); }

/* Answered further down — step back out of the way. */
.opt.is-answered > .opt__head { border-color: var(--line); background: var(--surface); }

.opt__label { font-weight: 600; font-size: .95rem; }
.opt__hint { display: block; color: var(--muted-dim); font-size: .78rem; font-weight: 400; margin-top: .15rem; }
.opt__price { margin-left: auto; color: var(--muted); font-size: .88rem; font-weight: 600; white-space: nowrap; }

/* Below, not within. */
.opt__body { display: grid; gap: .55rem; padding-left: 1.5rem; }
@media (max-width: 560px) { .opt__body { padding-left: .9rem; } }

.opt__legend {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-dim); font-weight: 600; margin: .15rem 0 .1rem;
}
/* The combination block wraps its legend and pills in a div, which put them
   outside .opt__body's grid and left the label sitting on top of the pills.
   The wrapper carries the same gap, so it spaces like every other step. */
[data-combo-apparatus] { display: grid; gap: .55rem; }

/* Apparatus and routine-count pills — leaves, so these stay lit when chosen. */
.opt-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.opt-pill {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px; padding: .5rem .9rem;
  font-size: .85rem; background: var(--surface); transition: border-color .2s, background .2s;
}
.opt-pill:hover { border-color: rgb(255 255 255 / .28); }
.opt-pill.is-on { border-color: var(--text); background: var(--surface-2); }
.opt-pill b { font-weight: 600; }
.opt-pill span { color: var(--muted-dim); font-size: .78rem; }

/* --- Forms -------------------------------------------------------------------- */
.form-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0,1fr) 330px; align-items: start; }
@media (max-width: 940px) { .form-layout { grid-template-columns: 1fr; } }

.form-aside { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.7rem 1.6rem; position: sticky; top: 94px; }
@media (max-width: 940px) { .form-aside { position: static; } }
.form-aside h3 { font-size: 1.2rem; margin-bottom: 1.1rem; }
.form-aside ol { color: var(--muted); font-size: .86rem; padding-left: 1.15rem; margin: 0; display: grid; gap: .7rem; }

/* No border on the fieldset itself: a <legend> is painted inside the border
   box and cuts a gap through it. The rule is a generated block instead, which
   sits above the legend in normal flow and never interferes with it. */
fieldset { border: 0; margin: 0 0 2.5rem; padding: 0; }
fieldset::before {
  content: ''; display: block; height: 1px; background: var(--line-soft); margin-bottom: 2.25rem;
}
fieldset:first-of-type::before { display: none; }
legend { display: block; width: 100%; font-size: 1.4rem; font-weight: 500;
  letter-spacing: -0.03em; padding: 0; margin-bottom: .4rem; }
.fieldset__note { color: var(--muted); font-size: .86rem; margin: 0 0 1.6rem; }

.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.15rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: -0.005em; }
.field .hint { color: var(--muted-dim); font-size: .76rem; }

input[type='text'], input[type='email'], input[type='tel'], select, textarea {
  font: inherit; font-size: .93rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: .8rem .95rem; width: 100%;
  transition: border-color .2s, background .2s;
}
input:hover, select:hover, textarea:hover { border-color: rgb(255 255 255 / .2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text); background: var(--surface-2); }
textarea { resize: vertical; min-height: 110px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }

.choice-grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.choice {
  display: flex; align-items: center; gap: .65rem; cursor: pointer; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: .75rem .9rem; font-size: .88rem;
  transition: border-color .2s, background .2s;
}
.choice:hover { border-color: rgb(255 255 255 / .22); }
/* Custom check/radio — the OS defaults read as cheap against this palette.
   Native inputs are kept, only their box is restyled, so keyboard and screen
   reader behaviour is untouched. */
.choice input, .consent input, .opt input, .opt-pill input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 17px; height: 17px; border: 1px solid rgb(255 255 255 / .22);
  background: var(--ink); border-radius: 5px; display: grid; place-items: center;
  cursor: pointer; transition: background .18s, border-color .18s;
}
.choice input[type='radio'], .opt input[type='radio'], .opt-pill input[type='radio'] { border-radius: 50%; }
.choice input:checked, .consent input:checked, .opt input:checked, .opt-pill input:checked { background: var(--text); border-color: var(--text); }
.choice input[type='checkbox']:checked::after, .consent input:checked::after,
.opt input[type='checkbox']:checked::after, .opt-pill input[type='checkbox']:checked::after {
  content: ''; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.choice input[type='radio']:checked::after, .opt input[type='radio']:checked::after, .opt-pill input[type='radio']:checked::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.choice:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.choice--stack { align-items: flex-start; }
.choice--stack > span > span { display: block; font-weight: 600; }
.choice--stack small { display: block; color: var(--muted-dim); font-size: .76rem; margin-top: .15rem; }

.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { margin-top: .18rem; }

.error { color: #ff8fa3; font-size: .76rem; min-height: 1em; }
.field--invalid input, .field--invalid select, .field--invalid textarea, .field--invalid .choice { border-color: #ff8fa3; }
.form-status { margin-top: 1rem; font-size: .86rem; color: var(--muted); }
.form-status[data-tone='error'] { color: #ff8fa3; }

.form-success { text-align: center; padding: clamp(3rem, 7vw, 5rem) 1rem; }
.form-success .tick { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.75rem; background: var(--text); color: var(--ink); font-size: 1.5rem; }
.form-success h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.form-success p { color: var(--muted); max-width: 46ch; margin: 1.2rem auto 2rem; }
[hidden] { display: none !important; }

/* Once an order is in, the page becomes a receipt: the form's heading is no
   longer true, the confirmation takes the full width, and "what happens next"
   moves below it rather than sitting alongside a form that is gone. */
.is-submitted .pagehead { display: none; }
.is-submitted .form-layout { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
.is-submitted #form-success { order: 1; }
.is-submitted .form-aside {
  order: 2; position: static;
  max-width: 460px; margin-inline: auto; width: 100%;
}
.form-actions { display: flex; justify-content: center; }
.is-submitted #submitted-actions {
  order: 3; flex-direction: column; align-items: center; gap: 1.1rem;
}
.is-submitted .nav__cta { display: none; }

/* The confirmation is meant to be read without scrolling, on a phone as much as
   a laptop, so the whole receipt is sized against the viewport rather than the
   text: the section fills the screen below the header and everything inside it
   tightens up. */
.is-submitted .section--tight { padding: 0; }
/* The receipt is the whole page: no footer competing below the fold. */
.is-submitted .footer { display: none; }
.is-submitted .form-layout {
  min-height: calc(100dvh - 70px);
  align-content: center;
  padding-block: clamp(.6rem, 4vh, 2.5rem);
  gap: clamp(.75rem, 2.5vh, 1.75rem);
}
.is-submitted .form-success { padding: 0 1rem; }
.is-submitted .form-success .tick {
  width: clamp(42px, 7vh, 58px); height: clamp(42px, 7vh, 58px);
  margin-bottom: clamp(.7rem, 2vh, 1.4rem); font-size: clamp(1.1rem, 3vh, 1.5rem);
}
.is-submitted .form-success h2 { font-size: clamp(1.5rem, 4.5vh, 2.5rem); margin: 0; }
.is-submitted .form-aside { padding: clamp(1rem, 3vh, 1.7rem) 1.5rem; }
.is-submitted .form-aside h3 { font-size: 1.05rem; margin-bottom: clamp(.6rem, 1.6vh, 1.1rem); }
.is-submitted .form-aside ol { gap: clamp(.35rem, 1.2vh, .7rem); font-size: .82rem; }
.is-submitted .form-aside > p { margin-top: clamp(.7rem, 2vh, 1.25rem) !important; }

/* A quiet line, not a pitch that competes with the confirmation. */
.pitch {
  margin: 0; max-width: 42ch; text-align: center;
  color: var(--muted-dim); font-size: .78rem; line-height: 1.5;
}
.pitch a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.pitch a:hover { color: var(--text); }

/* Running order total, above the send button. */
.order-total {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .35rem 1rem; margin: 0 0 1.4rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm, 12px);
  background: var(--surface);
}
.order-total__label { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.order-total__value { font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.order-total__note { grid-column: 1 / -1; font-size: .78rem; color: var(--muted-dim); }

/* Instagram mark sits with the word, not instead of it. */
.footer__ig { display: inline-flex; align-items: center; gap: .45rem; }
.footer__ig svg { width: 15px; height: 15px; flex: none; }

/* --- Sending overlay ---------------------------------------------------------
   The full-screen cover shown while an order is in flight. What is drawn
   inside it — the four apparatus, their finishing gestures and the
   confirmation's entrance — lives in assets/css/sending.css, alongside
   assets/js/sending.js which drives them.
--------------------------------------------------------------------------- */
.sending {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgb(10 10 13 / .93);
  backdrop-filter: blur(10px);
}
.sending__inner { text-align: center; }
.sending__label {
  margin: 0; color: var(--muted); font-size: .9rem; letter-spacing: .02em;
}

/* --- CTA band ----------------------------------------------------------------- */
/* Where each section's light sits. */
#packages{ --gx: 88%; --gy: 14%;  --gw: 66%; --gh: 88%; --glow: rgb(104 92 168 / .20);
           --g2x: 6%;  --g2y: 95%; --g2w: 55%; --g2h: 55%; --glow2: rgb(150 120 170 / .09); }
/* Slightly cooler than the packages glow above it, so the two lit sections
   read as the same light from a different angle, not the same effect twice. */
#events  { --gx: 55%; --gy: 6%;   --gw: 76%; --gh: 80%; --glow: rgb(92 94 172 / .20);
           --g2x: 10%; --g2y: 95%; --g2w: 50%; --g2h: 55%; --glow2: rgb(140 118 172 / .08); }
#gallery { --gx: 50%; --gy: 0%;  --gw: 90%; --gh: 45%; --glow: rgb(104 92 168 / .22);
           --g2x: 50%; --g2y: 100%; --g2w: 70%; --g2h: 40%; --glow2: rgb(150 120 170 / .10); }
#bio     { --gx: 18%; --gy: 30%; --gw: 65%; --gh: 90%; --glow: rgb(104 92 168 / .24);
           --g2x: 90%; --g2y: 90%; --g2w: 50%; --g2h: 60%; --glow2: rgb(150 120 170 / .12); }

.cta-band {
  position: relative; text-align: center; overflow: hidden;
  border-top: 1px solid var(--line-soft);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 55% 58% at 50% 100%, rgb(104 92 168 / .13), transparent 72%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .lede { margin: 1.4rem auto 2.4rem; }
/* The lede is optional here; keep the button clear of the heading without it. */
.cta-band h2 + .btn-row { margin-top: clamp(1.9rem, 3.5vw, 2.6rem); }
.cta-band__fineprint { color: var(--muted-dim); font-size: .78rem; margin-top: 1.75rem; }

/* --- Footer -------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; margin-bottom: 3.5rem; }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand { font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: .8rem; }
.footer__brand em { font-style: normal; font-weight: 400; color: var(--muted); }
.footer p { color: var(--muted); font-size: .85rem; margin: 0; max-width: 30ch; }
.footer h4 { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dim); margin: 0 0 1.1rem; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer a { color: var(--muted); text-decoration: none; font-size: .85rem; transition: color .2s; }
.footer a:hover { color: var(--text); }
.footer__base { border-top: 1px solid var(--line-soft); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--muted-dim); font-size: .78rem; }

/* --- Reveal ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* --- Page header ------------------------------------------------------------------ */
.pagehead { position: relative; padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); overflow: hidden; }
.pagehead::before { content: ''; position: absolute; inset: -50% -20% auto; height: 200%; background: radial-gradient(ellipse 40% 40% at 50% 40%, var(--glow-a), transparent 70%); pointer-events: none; }
.pagehead > * { position: relative; z-index: 1; }

/* ==========================================================================
   Conversion layout — the home page as a funnel: work → offer → trust → book.
   These supersede the old hero/stats/cards/steps/events rules above, which
   are left in place for the lightbox, wall and form they still serve.
   ========================================================================== */

/* --- Hero: a photograph, one line, one button --------------------------------- */
.hero--photo {
  min-height: calc(100vh - 70px);    /* fallback for browsers without svh */
  min-height: calc(100svh - 70px); max-height: 980px;
  padding: 0; display: grid; align-items: end; text-align: center;
  overflow: hidden; background: var(--ink-2);
}
.hero--photo::before { display: none; }
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero__slides img.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__slides img { transition: none; } }
/* Darken only where the type sits, so the photograph stays a photograph. */
.hero__slides::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(8 8 10 / .92) 0%, rgb(8 8 10 / .55) 32%, rgb(8 8 10 / .08) 62%, transparent 100%);
}
.hero__copy {
  position: relative; z-index: 1; width: 100%;
  padding: 0 var(--gutter) clamp(2.5rem, 7vh, 5rem);
}
.hero__copy .display { max-width: 16ch; margin-inline: auto; font-size: clamp(2rem, 5vw, 3.9rem); text-wrap: balance; }
.hero__copy .lede { margin: 1rem auto 0; max-width: 46ch; color: #d6d6de; font-size: clamp(.92rem, 1.25vw, 1.05rem); }
.hero__copy .btn-row { margin-top: 1.6rem; }
.hero__copy .btn--ghost { border-color: rgb(255 255 255 / .35); }
@media (max-width: 700px) {
  .hero--photo { min-height: calc(100vh - 70px); min-height: calc(100svh - 70px); }
  .hero__slides img { object-position: center 22%; }
  .hero__copy .btn-row { flex-direction: column; align-items: center; }
  .hero__copy .btn { width: min(100%, 320px); justify-content: space-between; }
}

/* --- Section rhythm on the funnel: tighter than the old marketing page ------- */
.funnel .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.funnel .section-head { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.funnel .section-head .lede { margin-top: .5rem; }
.section-head--row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Home wall: four across, twelve tiles — full rows at every width. */
.work-grid--wall.work-grid--home { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .work-grid--wall.work-grid--home { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .work-grid--wall.work-grid--home { grid-template-columns: repeat(2, 1fr); } }

/* --- Video edits --------------------------------------------------------------- */
/* Grouped by what you can order: individual, combination, group routines. */
.clipsets { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.clipset__head { margin-bottom: 1.1rem; }
.clipset__name { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); font-weight: 600; margin: 0; }
.clipset__note { color: var(--muted-dim); font-size: .84rem; margin: .35rem 0 0; }

/* The edits are cut for phones — upright, 9:16 — so they sit side by side
   as tall cards on a wide screen and one at a time on a phone. */
.clips { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 300px)); }
/* A set of landscape edits sits two across, wider. */
.clips--wide { grid-template-columns: repeat(2, minmax(0, 520px)); }
.clip--wide .clip__frame { aspect-ratio: 16 / 9; }
@media (max-width: 980px) { .clips { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 900px) { .clips--wide { grid-template-columns: minmax(0, 560px); } }
@media (max-width: 640px) { .clips { grid-template-columns: minmax(0, 340px); justify-content: center; }
  .clips--wide { grid-template-columns: 1fr; } }
.clip { margin: 0; }
.clip__frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.clip__frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* While it is looping its preview the card is a picture, not a player: the
   pointer says "this opens", and the controls only appear once it does. */
.clip__frame:not(.is-playing) video { pointer-events: none; }
.clip__frame:not(.is-playing) { cursor: pointer; }
/* The chosen thumbnail sits above the video. A <video> only shows its poster
   attribute until it has rendered a frame, so once a preview has played the
   poster is gone for good — the card would keep showing the preview's first
   frame instead of the photograph chosen for it. An image layer that fades
   out while something is playing, and back in when it stops, is the only way
   to actually return to the thumbnail. */
.clip__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .4s ease; pointer-events: none;
}
.clip__frame.is-preview .clip__poster,
.clip__frame.is-playing .clip__poster { opacity: 0; }

/* Quiet: a thin ring over the photograph rather than a solid white disc. */
.clip__play {
  position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; color: #fff;
  background: rgb(10 10 13 / .34); backdrop-filter: blur(7px);
  border: 1px solid rgb(255 255 255 / .5);
  display: grid; place-items: center;
  transition: opacity .3s ease, transform .25s var(--ease), background .25s;
}
.clip__play svg { width: 19px; height: 19px; fill: currentColor; margin-left: 2px; }
.clip__frame:hover .clip__play { transform: scale(1.05); background: rgb(10 10 13 / .5); }
.clip__frame.is-playing .clip__play { display: none; }
/* Where there is a pointer, the moving preview is invitation enough and the
   button steps out of the way. On a touch screen the preview plays by itself,
   so the button stays as the only sign the card opens something. */
@media (hover: hover) and (pointer: fine) {
  .clip__frame.is-preview .clip__play { opacity: 0; pointer-events: none; }
}
.clip figcaption { margin-top: .7rem; display: flex; gap: .6rem; align-items: baseline; }
.clip figcaption b { font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; }
.clip figcaption span { color: var(--muted-dim); font-size: .8rem; }

/* --- The offer ----------------------------------------------------------------- */
.offer { max-width: 900px; margin-inline: auto; }
.offer__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 640px) { .offer__grid { grid-template-columns: 1fr; } }
.offer__item {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
}
.offer__name { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 .9rem; }
.offer__price { display: flex; align-items: baseline; gap: .6rem; }
.offer__price b { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.offer__price span { color: var(--muted); font-size: .9rem; }
.offer__price--minor { margin-top: .5rem; }
.offer__price--minor b { font-size: 1.25rem; letter-spacing: -0.02em; }
.offer__note { color: var(--muted-dim); font-size: .82rem; line-height: 1.5; margin: .9rem 0 0; }
.offer__facts {
  list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: .5rem .6rem;
}
.offer__facts li {
  font-size: .82rem; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 100px;
  padding: .45rem .9rem;
}
.offer__facts li b { color: var(--text); font-weight: 600; }
.offer__cta { margin-top: 1.5rem; }

/* --- How it works: three lines ------------------------------------------------- */
.hows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1000px; margin-inline: auto; }
@media (max-width: 760px) { .hows { grid-template-columns: 1fr; max-width: 520px; } }
.how { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .9rem; align-items: start; }
.how__num {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: var(--muted);
  grid-row: 1 / 3;
}
.how h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; margin: .3rem 0 .25rem; }
.how p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }

/* --- Who is behind the camera -------------------------------------------------- */
.who { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 960px; margin-inline: auto; }
@media (max-width: 760px) { .who { grid-template-columns: 1fr; max-width: 520px; } }
.who__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); }
.who__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who__placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  border: 1px dashed rgb(255 255 255 / .18); border-radius: inherit; color: var(--muted-dim); font-size: .85rem;
}
.who__lead { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; letter-spacing: -0.02em; margin: 0 0 .9rem; }
.who__text p:not(.who__lead) { color: var(--muted); margin: 0 0 1.2rem; line-height: 1.6; }
.who__label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dim); font-weight: 600; margin: 1.4rem 0 .6rem; }
.who__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.who__chips li { font-size: .8rem; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 100px; padding: .4rem .85rem; }

/* --- Next event + book --------------------------------------------------------- */
.book { text-align: center; }
.book__meta { color: var(--muted); margin: .6rem 0 1.6rem; }
.book__other { color: var(--muted-dim); font-size: .85rem; margin: 1.4rem 0 0; }
.book__other a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.book__other a:hover { color: var(--text); }

/* --- Footer, minimal ------------------------------------------------------------ */
.footer__row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: start; }
.footer__who p { color: var(--muted-dim); font-size: .85rem; margin: 0; }
.footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .88rem; }
.footer__contact a { color: var(--muted); text-decoration: none; }
.footer__contact a:hover { color: var(--text); }
.footer__row .footer__base { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); padding-top: 1.25rem; color: var(--muted-dim); font-size: .78rem; }
@media (max-width: 640px) { .footer__row { grid-template-columns: 1fr; } }

/* Page headers on inner pages: less air than before. */
.pagehead--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }

/* --- Hero: split — words on the dark, photograph beside them ------------------- */
.hero--split {
  min-height: 0; text-align: left; overflow: visible;
  padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
  display: block;
}
.hero--split::before { inset: -30% -20% auto; height: 120%; opacity: .7; }
.hero__split {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; z-index: 1;
}
.hero__text .display { font-size: clamp(2.1rem, 4.4vw, 3.9rem); max-width: 14ch; margin: 0; text-wrap: balance; }
.hero__text .lede { margin: 1.1rem 0 0; max-width: 44ch; font-size: clamp(.95rem, 1.2vw, 1.05rem); }
.hero__text .btn-row { margin-top: 1.8rem; }
.hero__media {
  position: relative; aspect-ratio: 4 / 5; width: 100%; max-height: min(78vh, 760px);
  justify-self: end; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--line-soft);
}
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero__media img.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__media img { transition: none; } }
@media (max-width: 860px) {
  .hero__split { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero__media { justify-self: center; max-width: 520px; max-height: none; }
}

/* The total that sits directly under the package choices. */
.order-total--inline { margin: 1rem 0 0; }