/* ==========================================================================
   THE CAMP TRANSFORMATION CENTER — HUNTINGTON BEACH
   21-Day Challenge — styles
   ==========================================================================
   Look: night-black frame (header, hero, members, footer) around a paper
   booking section. Red is an accent, not a fill. The scheduler block is the
   one the 6-Week Challenge and Whittier pages use, so all three book the
   same way.
   ===== EDIT THIS SECTION: BRAND COLORS =====
   -------------------------------------------------------------------------- */
:root {
  --red:        #bf2d32;   /* The Camp red (from the logo)      */
  /* ===== END EDIT SECTION ===== */

  --red-dark:   #9d2429;   /* pressed / hover state             */
  --red-hi:     #f0484e;   /* red that holds up on black        */
  --red-tint:   #fdf1f1;   /* selected / hover background       */

  --night:      #0e0e0f;
  --night-2:    #18181a;
  --on-night:   #f3f1ec;
  --on-night-2: rgba(243, 241, 236, .76);
  --on-night-3: rgba(243, 241, 236, .58);
  --hair-night: rgba(255, 255, 255, .12);

  --panel-dark: #2b2b2e;   /* scheduler rail — same as 6-Week   */
  --panel-dark2:#232326;

  --paper:      #f3f3f4;
  --ink:        #1f1f22;
  --ink-2:      #55555b;
  --ink-3:      #66666d;   /* AA-safe on --paper, --card, --card-2 */
  --card:       #ffffff;
  --card-2:     #f7f7f8;
  --line:       #e3e3e6;
  --line-2:     #c9c9cf;
  --bad:        #b3261e;

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);

  --r:   14px;
  --r-s: 10px;
  --pad: clamp(18px, 4vw, 64px);
  --maxw: 1680px;
  --head-h: 64px;
  --section-y: clamp(64px, 9vw, 128px);
}

/* -------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
ol, ul { margin: 0; }
abbr { text-decoration: none; color: var(--red); }
::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(calc(-100% - 16px));
  background: var(--red); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 13px 18px; border-radius: 8px;
  transition: transform .18s ease;
}
.skip:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* Small uppercase label with a short red rule in front of it */
.kicker {
  display: flex; align-items: center; gap: 12px; text-wrap: balance;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-night-2);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--red-hi); flex: 0 0 auto; }
.kicker--dark { color: var(--ink-3); }
.kicker--dark::before { background: var(--red); }

/* A headline line that text rises into. The padding keeps italic overhang,
   accents on capitals (DÍAS) and the condensed caps from being shaved by the
   mask; the negative margins give the space back. */
.line { display: block; overflow: hidden; padding: .14em .1em .07em 0; margin: -.14em 0 -.07em; }
.line > span { display: block; will-change: transform; }

/* ------------------------------------------------------------ masthead --- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14, 14, 15, .86);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair-night);
  color: var(--on-night);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand__logo { height: 34px; width: auto; flex: 0 0 auto; }
.brand__text { display: grid; min-width: 0; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.brand__loc {
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-night-3); margin-top: 3px; white-space: nowrap;
}
.masthead__tools { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* EN / ES switch */
.lang { display: inline-flex; border: 1px solid var(--hair-night); border-radius: 99px; padding: 3px; }
.lang__btn {
  border: 0; background: none; cursor: pointer; border-radius: 99px; min-width: 34px; min-height: 32px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--on-night-3);
  padding: 6px 9px; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.lang__btn[aria-pressed="true"] { background: var(--on-night); color: var(--night); }
.lang__btn:not([aria-pressed="true"]):hover { color: var(--on-night); }

.masthead__phone {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 40px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--hair-night); border-radius: 99px; padding: 8px 14px;
  transition: border-color .2s ease, background .2s ease;
}
.masthead__phone svg { width: 15px; height: 15px; color: var(--red-hi); }
.masthead__phone:hover { border-color: var(--red-hi); background: rgba(240, 72, 78, .08); }
.masthead__phoneNum { display: none; font-variant-numeric: tabular-nums; }

/* Appears once the hero's own button has scrolled away (script.js). Takes no
   room in the layout, so the phone pill stays flush right. */
.masthead__cta {
  position: absolute; top: 50%; right: calc(100% + 10px);
  display: none; align-items: center; min-height: 40px; white-space: nowrap;
  background: var(--red); color: #fff; text-decoration: none; border-radius: 99px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translate(10px, -50%); pointer-events: none;
  transition: opacity .3s ease, transform .45s var(--ease-out), background .2s ease;
}
.masthead__cta.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.masthead__cta:hover { background: #d0363b; }

@media (min-width: 780px) { .masthead__cta { display: inline-flex; } }
/* Phones: the call button goes icon-only (its label stays for screen readers)
   so the logo, the language switch and the call button fit on one line. */
@media (max-width: 639px) {
  .masthead__phone { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .masthead__phoneLabel {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 640px) {
  .masthead__phoneLabel { display: none; }
  .masthead__phoneNum { display: inline; }
}
@media (max-width: 420px) { .brand__loc { letter-spacing: .14em; } }
@media (max-width: 380px) {
  .brand__logo { height: 28px; }
  .brand__name { font-size: 17px; }
}

/* ---------------------------------------------------------------- hero --- */
/* Phone: the footage fills the hero behind the copy.
   960px+: copy on the left, footage as a full-height panel on the right. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night); color: var(--on-night);
  min-height: calc(100svh - var(--head-h));
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero::after {    /* fine grain over everything, so it reads as print rather than screen */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--night-2); }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform-origin: 50% 40%; }
.hero__media::after {    /* keeps the header edge and the pause button legible */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,14,15,.45) 0%, rgba(14,14,15,0) 18%);
}
.hero__caption { display: none; }

.hero__pause {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(14,14,15,.5); color: #fff; border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease;
}
.hero__pause svg { width: 16px; height: 16px; }
.hero__pause .i-play { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }
.hero__pause:hover { background: rgba(14,14,15,.75); border-color: rgba(255,255,255,.5); }

.hero__copy {
  position: relative; z-index: 1;
  padding: clamp(150px, 34svh, 300px) var(--pad) clamp(28px, 5vw, 44px);
}
/* Phone scrim rides on the copy, so the text is always on dark footage no
   matter how tall the hero ends up. Removed at 960px, where they split. */
.hero__copy::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
  top: clamp(0px, calc(34svh - 170px), 140px);
  background: linear-gradient(180deg, rgba(14,14,15,0) 0, rgba(14,14,15,.8) 150px, rgba(14,14,15,.94) 55%, var(--night) 100%);
  pointer-events: none;
}

/* Live dot on the countdown — the one perpetual motion on the page */
.live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--red-hi); flex: 0 0 auto; }
.live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red-hi);
  animation: live 2.4s var(--ease-out) infinite;
}
@keyframes live { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

.hero__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.4rem, 15.5vw, 6.2rem); line-height: .86; letter-spacing: -.005em;
  color: var(--on-night);
}
/* The one serif moment: lowercase italic against the condensed caps */
.hero__title em {
  margin-top: .04em;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -.015em; line-height: .98;
  font-size: .88em; color: var(--red-hi);
  text-wrap: balance;
}
/* "empieza el 2 de nov." runs half again as long as "starts Nov 2." */
html[lang="es"] .hero__title em { font-size: .7em; }

.hero__facts {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
}
.hero__facts li {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(15px, .9rem + .2vw, 17px); font-weight: 500;
  color: var(--on-night-2); line-height: 1.35;
}
.hero__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red-hi); flex: 0 0 auto; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 30px; }

.hero__count { margin-top: 18px; font-size: 14px; color: var(--on-night-2); font-variant-numeric: tabular-nums; }
.hero__count strong { color: var(--on-night); font-weight: 600; }
.hero__count .live { display: inline-block; vertical-align: .08em; margin-right: 10px; }

/* ---- the film button ---- */
.film {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--on-night); font-size: 15px; font-weight: 600; text-align: left;
}
.film__icon {
  position: relative; width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s ease;
}
.film__icon svg { width: 16px; height: 16px; margin-left: 2px; }
.film:hover .film__icon { background: var(--on-night); color: var(--night); border-color: var(--on-night); transform: scale(1.06); }
.film:active .film__icon { transform: scale(.96); }
.film__len { color: var(--on-night-3); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ---- 21-day timeline ---- */
.rail { position: relative; margin-top: clamp(34px, 6svh, 60px); padding-top: 30px; max-width: 620px; }
.rail__flag {
  position: absolute; top: 0; left: calc(100% * 3 / 20);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--red-hi); padding-left: 1px;
}
.rail__ticks {
  list-style: none; margin: 0; padding: 0; position: relative;
  height: 30px; display: flex; justify-content: space-between; align-items: flex-end;
}
.rail__ticks::after {   /* the baseline */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair-night);
}
.rail__ticks li {
  width: 2px; height: 14px; border-radius: 1px; flex: 0 0 auto;
  background: rgba(243, 241, 236, .42); transform-origin: 50% 100%;
}
.rail__ticks li:first-child,
.rail__ticks li:last-child { height: 24px; background: var(--on-night); }
.rail__ticks li.is-flag { height: 30px; width: 3px; background: var(--red-hi); }
.rail__ticks li.is-past { opacity: .28; }
.rail__ticks li.is-today { height: 30px; width: 3px; background: var(--on-night); }
.rail__ends {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 12px;
  font-size: 12.5px; color: var(--on-night-3); font-variant-numeric: tabular-nums;
}
.rail__ends b { color: var(--on-night); font-weight: 600; margin-right: 6px; }
.rail__ends span:last-child { text-align: right; }

@media (min-width: 640px) {
  .hero__copy { padding-top: clamp(220px, 40svh, 380px); }
}

@media (min-width: 960px) {
  .hero {
    display: grid; justify-content: stretch;
    grid-template-columns: minmax(0, 1fr) clamp(400px, 42vw, 780px);
    min-height: clamp(680px, calc(100svh - var(--head-h)), 1000px);
  }
  .hero__media { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; }
  .hero__media::after {
    background: linear-gradient(90deg, var(--night) 0%, rgba(14,14,15,0) 16%),
                linear-gradient(0deg, rgba(14,14,15,.55) 0%, rgba(14,14,15,0) 24%);
  }
  .hero__video { position: absolute; inset: 0; object-position: 50% 32%; }
  .hero__pause { top: auto; bottom: 22px; right: auto; left: calc(16% + 4px); }
  .hero__caption {
    display: block; position: absolute; right: 24px; bottom: 34px; z-index: 2;
    font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.86);
  }
  .hero__copy::before { display: none; }
  .hero__copy {
    grid-column: 1; grid-row: 1; align-self: center;
    /* line the copy up with the logo in the header at every width */
    padding: clamp(56px, 8svh, 96px) clamp(40px, 5vw, 96px) clamp(40px, 6svh, 72px)
             max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  }
  .hero__title { font-size: clamp(4.6rem, 8.7vw, 10.8rem); }
  .hero__facts { margin-top: 34px; }
  .hero__actions { margin-top: 36px; }
}

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 99px; cursor: pointer;
  font-weight: 600; letter-spacing: .01em; text-decoration: none;
  padding: 15px 26px; min-height: 48px;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .3s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--red); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 19px 30px;
}
.btn--primary svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.btn--primary:hover { background: #d0363b; }
.btn--primary:hover svg { transform: translateY(3px); }
#finalCta:hover svg { transform: translateY(-3px); }
.btn--go {
  width: 100%; background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 23px;
  text-transform: uppercase; letter-spacing: .05em; padding: 17px 26px; margin-top: 4px;
}
.btn--go:hover { background: var(--red-dark); }
.btn--go[disabled] { opacity: .6; cursor: not-allowed; }
.btn--ghost { border-color: var(--line-2); background: #fff; color: var(--ink); font-size: 15px; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

/* "Join online · $97" — the secondary path to paying in ABC. Outlined, never
   red-filled, so "Reserve your spot" stays the main button. Light variant for
   the paper booking section. */
.btn--pay {
  border-color: rgba(243, 241, 236, .42); background: transparent; color: var(--on-night);
  font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 26px;
}
.btn--pay svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.btn--pay:hover { border-color: var(--on-night); background: rgba(243, 241, 236, .07); }
.btn--pay:hover svg { transform: translate(2px, -2px); }
.btn--pay-light { border-color: var(--ink); color: var(--ink); }
.btn--pay-light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.pay__note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.pay__note:empty { display: none; }

.btn__spin { display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.is-sending .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- booking --- */
.booking { background: var(--paper); padding-block: var(--section-y) calc(var(--section-y) * .75); outline: none; }
.booking > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.booking__head { margin-bottom: clamp(16px, 3vw, 30px); display: grid; gap: 16px; }
.booking__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 5rem); line-height: .88; letter-spacing: -.005em; color: var(--ink);
}
.booking__sub { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-2); max-width: 44ch; }
@media (min-width: 900px) {
  .booking__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
  .booking__head .kicker { grid-column: 1 / -1; }
  .booking__sub { text-align: right; padding-bottom: 6px; }
}

/* "Ready to commit?" — one line above the scheduler for people who'd rather pay now */
.joinbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.joinbar__text { font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.joinbar__text strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.joinbar .btn--pay { padding: 13px 20px; font-size: 13.5px; }

#bookingForm { min-width: 0; display: grid; gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(18px, 4.6vw, 28px); margin: 0; min-width: 0;
  box-shadow: 0 1px 2px rgba(31,31,34,.05);
}

.step { transition: opacity .35s ease; min-width: 0; scroll-margin-top: 90px; }
.step.is-locked { opacity: .55; }
.step.is-locked .grid2,
.step.is-locked .submit { pointer-events: none; }
.step.is-done .step__num { background: var(--red); color: #fff; border-color: var(--red); }
/* Step 2 announces itself when the time is picked */
.step.is-unlocking .step__num { animation: numPop .55s var(--ease-out); background: var(--red); color: #fff; border-color: var(--red); }
@keyframes numPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

.step__head {
  float: left; width: 100%; display: flex; gap: 14px; align-items: flex-start;
  padding: 0; margin-bottom: 20px;
}
.step > *:not(legend) { clear: both; }
.step__num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.step__title {
  display: block; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.5rem, 5.4vw, 1.9rem);
  line-height: 1.05; color: var(--ink);
}
.step__hint { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }

/* ---- the two steps sit side by side once there is room (as on 6-Week) ---- */
@media (min-width: 1200px) {
  #bookingForm {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    align-items: stretch;
  }
  #step-1, #step-2 { display: flex; flex-direction: column; }

  #step-1 .sched__grid { flex: 1 1 auto; grid-template-columns: 184px minmax(0, 1fr); gap: 18px; }
  #step-1 .sched__aside { padding: 22px 20px; }
  #step-1 .sched__main { display: flex; flex-direction: column; }
  #step-1 .cal { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 16px; }
  #step-1 .cal__tz { margin-top: auto; padding-top: 14px; }
  #step-1 .slots { padding: 16px; }
  #step-1 .slots__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #step-1 .slot { padding-inline: 6px; font-size: 14px; }

  #step-2 .grid2 { flex: 1 1 auto; grid-template-rows: auto auto minmax(0, 1fr); }
  #step-2 .field--full { display: flex; flex-direction: column; }
  #step-2 .field--full textarea { flex: 1 1 auto; min-height: 72px; resize: none; }
  #step-2 .submit { margin-top: 0; padding-top: 18px; }
  #step-2.is-locked { opacity: .58; }
}

/* ==========================================================================
   SCHEDULER — date + time picker. Ported from the 6-Week Challenge page.
   Left rail states what is being booked; right side does the choosing.
   ========================================================================== */
.sched { padding-block: clamp(20px, 3.4vw, 30px); container-type: inline-size; }
.sched__grid { display: grid; gap: clamp(20px, 3vw, 34px); margin-top: 20px; }
@container (min-width: 600px) {
  .sched__grid { grid-template-columns: minmax(176px, 212px) minmax(0, 1fr); }
}

/* ---- left rail ---- */
.sched__aside {
  background: linear-gradient(170deg, var(--panel-dark) 0%, var(--panel-dark2) 100%);
  color: #fff; border-radius: var(--r); padding: clamp(20px, 3vw, 26px);
  display: flex; flex-direction: column; gap: 2px;
  position: relative; overflow: hidden;
}
.sched__aside::before {
  content: ""; position: absolute; inset: -40% -60% auto auto; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(191,45,50,.30) 0%, transparent 68%);
  pointer-events: none;
}
.sched__logo { width: 46px; height: auto; margin-bottom: 14px; position: relative; }
.sched__eyebrow {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0; position: relative;
}
.sched__name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.4vw, 2.1rem); line-height: 1; margin: 6px 0 18px;
  color: #fff; position: relative;
}
.sched__meta { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; position: relative; }
.sched__meta li {
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; color: rgba(255,255,255,.80); line-height: 1.35;
}
.sched__meta svg { width: 17px; height: 17px; flex: 0 0 auto; color: #ff8b8f; }

.sched__picked {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16);
  position: relative; animation: schedIn .42s var(--ease-out) both;
}
@keyframes schedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sched__pickedLabel {
  margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.sched__pickedDate {
  margin: 7px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; line-height: 1.1; color: #fff;
}
.sched__pickedTime {
  margin: 3px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.28rem; line-height: 1.1; color: #ff8b8f;
}
.sched__note {
  margin: auto 0 0; padding-top: 20px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.66); position: relative;
}

/* ---- calendar ---- */
.cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 2.6vw, 22px); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__month {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(1.1rem, 2.6vw, 1.32rem); color: var(--ink);
}
.cal__nav { display: flex; gap: 6px; }
.cal__arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.cal__arrow svg { width: 17px; height: 17px; }
.cal__arrow:hover:not(:disabled) { border-color: var(--red); color: var(--red); transform: scale(1.06); }
.cal__arrow:active:not(:disabled) { transform: scale(.94); }
.cal__arrow:disabled { opacity: .3; cursor: not-allowed; }

.cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.cal__dow span {
  text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal__cell {
  aspect-ratio: 1; min-width: 0; width: 100%; max-width: 46px; justify-self: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--ink);
  font: 600 15px/1 var(--font-body); cursor: pointer; position: relative;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .2s ease;
}
.cal__cell--blank { pointer-events: none; }
.cal__cell:not(:disabled):hover { background: var(--red-tint); color: var(--red); }
.cal__cell:not(:disabled):active { transform: scale(.92); }
/* An available date is marked with a dot — it reads faster than a hover state */
.cal__cell:not(.is-empty):not(.is-selected):not(.cal__cell--blank)::after {
  content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--red); opacity: .55;
}
/* Day 1 of the challenge gets a ring, so "start on day one" is one tap away */
.cal__cell.is-start:not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--red); }
.cal__cell.is-empty { color: var(--line-2); cursor: default; font-weight: 400; }
.cal__cell.is-selected {
  background: var(--red); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(31,31,34,.4);
  animation: cellPick .35s var(--ease-out);
}
@keyframes cellPick { from { transform: scale(.82); } to { transform: scale(1); } }
.cal__cell:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Month change: the days cascade in, in reading order */
.cal__grid.is-entering .cal__cell { animation: cellIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 11ms); }
@keyframes cellIn { from { opacity: 0; transform: translateY(6px) scale(.94); } }
.cal__tz { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ---- time slots ---- */
.slots {
  margin-top: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(16px, 2.6vw, 22px);
  animation: schedIn .36s var(--ease-out) both;
}
.slots__head {
  margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  font-size: 14px; color: var(--ink-2);
}
.slots__head strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.12rem; letter-spacing: .02em; color: var(--ink); margin-right: 2px;
}
.slots__focus {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: var(--card-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 4px 9px;
}
.slots__focus--day1 { color: #fff; background: var(--red); border-color: var(--red); }
.slots__list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.slot {
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  border-radius: var(--r-s); padding: 13px 10px; min-height: 48px;
  font: 700 15px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer;
  animation: cellIn .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms);
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease, box-shadow .2s ease;
}
.slot:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.slot:active { transform: translateY(0) scale(.97); }
.slot.is-selected {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(31,31,34,.4);
}
.slot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ------------------------------------------- reschedule banner + gate ---- */
.rebook {
  background: var(--panel-dark); color: #fff; border-radius: var(--r);
  padding: 16px clamp(18px, 4.6vw, 24px); display: grid; gap: 6px;
}
.rebook__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.15rem; line-height: 1.1;
}
.rebook__body { font-size: 14px; color: #d5d5d8; max-width: 52ch; }
.rebook__current {
  margin-top: 4px; font-size: 13.5px; color: #fff;
  background: rgba(255,255,255,.08); border-radius: var(--r-s);
  padding: 9px 12px; justify-self: start;
}
.rebook__current strong { color: #ff8b8f; }

.gate {
  background: var(--panel-dark); color: #fff; border-radius: var(--r);
  padding: clamp(22px, 5vw, 34px); text-align: center;
}
.gate__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1; color: #fff;
}
.gate__body { margin: 12px auto 0; max-width: 46ch; color: #d5d5d8; font-size: 14.8px; line-height: 1.55; }
.gate .btn--go { margin-top: 20px; display: inline-flex; width: auto; padding-inline: 30px; }

/* --------------------------------------------------------------- form ---- */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 620px) {
  .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; transition: color .2s ease; }
.field:focus-within label { color: var(--red); }
.opt { color: var(--ink-3); font-weight: 400; }
.field input, .field textarea {
  width: 100%; background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--r-s); padding: 13px 14px; font-size: 16px; /* 16px stops iOS zoom */
  min-height: 48px;
  transition: border-color .16s ease, background .16s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: #8e8e95; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 4px rgba(191,45,50,.12);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }

.counter { text-align: right; font-size: 12px; color: var(--ink-3); margin-top: 5px; }

.err { color: var(--bad); font-size: 13px; margin-top: 6px; font-weight: 500; }
.err--form {
  background: #fdf1f0; border: 1px solid rgba(179,38,30,.3);
  border-radius: var(--r-s); padding: 12px 14px; margin-top: 14px;
}
.notice { border-radius: var(--r-s); padding: 14px 16px; font-size: 14.5px; }
.notice--warn { background: #fff8e6; border: 1px solid #e8cf8a; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit { margin-top: 24px; }
.summary { font-size: 14px; color: var(--red); font-weight: 600; margin-bottom: 12px; min-height: 1.4em; }
.fineprint { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; text-align: center; line-height: 1.5; }

/* ------------------------------------------------------------ success --- */
.success { animation: pop .5s var(--ease-out) both; scroll-margin-top: 90px; width: 100%; max-width: 720px; outline: none; }
@keyframes pop { from { opacity: 0; transform: translateY(14px); } }
.success__mark { width: 56px; height: 56px; margin-bottom: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.success__mark circle { stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 164; stroke-dashoffset: 164; animation: draw .7s var(--ease-out) .1s forwards; }
.success__mark path { stroke: var(--red); stroke-width: 3.5; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s var(--ease-out) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: .95; letter-spacing: -.01em;
}
.success__lead { margin-top: 10px; color: var(--ink-2); max-width: 46ch; }
.recap {
  margin: 22px 0 0; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden;
}
.recap > div { background: var(--card-2); padding: 12px 15px; display: flex; justify-content: space-between; gap: 16px; }
.recap dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.recap dd { margin: 0; font-weight: 600; text-align: right; }
.success__bring { margin-top: 20px; font-size: 14.5px; color: var(--ink-2); }
.okpay {
  margin-top: 18px; padding: 16px 18px; display: grid; gap: 12px; justify-items: start;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-s);
}
.okpay p { font-size: 14.5px; color: var(--ink-2); }
.okpay strong { color: var(--ink); font-weight: 600; }
.okpay .btn--pay { padding: 13px 20px; font-size: 13.5px; }
.success__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ------------------------------------------------------------- members --- */
.members { background: var(--night); color: var(--on-night); padding-block: var(--section-y); }
.members__head { display: grid; gap: 18px; margin-bottom: clamp(28px, 4vw, 52px); }
.members__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.8rem, 9vw, 6.4rem); line-height: .86; letter-spacing: -.005em;
}

.gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gallery__item { margin: 0; overflow: hidden; border-radius: 4px; background: var(--night-2); aspect-ratio: 4 / 5; }
.gallery__item picture { display: block; width: 100%; height: 100%; }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.04);
  transform-origin: 50% 50%;
}
/* phone order: wide, pair, wide, pair */
.g-b { order: 1; grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.g-a { order: 2; }
.g-c { order: 3; }
.g-e { order: 4; grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.g-d { order: 5; }
.g-f { order: 6; }
.g-b img { object-position: 50% 30%; }
.g-c img { object-position: 50% 45%; }
.g-d img { object-position: 45% 55%; }
.g-f img { object-position: 50% 42%; }

/* 900px+: three equal columns, tall and short tiles alternating. Columns stay
   narrow enough that the 1000px HB landscape photos are never upscaled. */
@media (min-width: 900px) {
  .gallery {
    --gg: clamp(10px, 1vw, 16px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, calc((min(100vw, var(--maxw)) - 2 * var(--pad) - 2 * var(--gg)) / 4.5));
    gap: var(--gg);
  }
  .gallery__item { aspect-ratio: auto; order: 0; }
  .g-a { grid-column: 1; grid-row: 1 / 3; }
  .g-e { grid-column: 1; grid-row: 3; }
  .g-b { grid-column: 2; grid-row: 1; }
  .g-c { grid-column: 2; grid-row: 2 / 4; }
  .g-d { grid-column: 3; grid-row: 1 / 3; }
  .g-f { grid-column: 3; grid-row: 3; }
}

.members__cta {
  margin-top: clamp(36px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.members__deadline { font-size: 14px; color: var(--on-night-2); }

/* ------------------------------------------------------- footer: info --- */
.info {
  background: var(--night); color: var(--on-night);
  border-top: 1px solid var(--hair-night);
  padding: clamp(56px, 8vw, 96px) 0 calc(28px + env(safe-area-inset-bottom));
}
.info__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .info__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
}
.info__label {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-night-3); margin-bottom: 16px;
}
.info__big {
  display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.6vw, 1.85rem); line-height: 1.08; letter-spacing: .01em;
  text-decoration: none; color: var(--on-night); font-variant-numeric: tabular-nums;
}
a.info__big:hover { color: var(--red-hi); }
.info__note { margin-top: 8px; font-size: 14px; color: var(--on-night-2); }
.info__link {
  display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600;
  color: var(--on-night); text-decoration: none;
  border-bottom: 1px solid var(--hair-night); padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.info__link:hover { border-color: var(--red-hi); color: #fff; }

.hours { margin: 0; display: grid; gap: 12px; }
.hours > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair-night);
}
.hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hours dt {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-night-3); padding-top: 3px;
}
.hours dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-night); font-variant-numeric: tabular-nums; }

.info__base {
  margin-top: clamp(48px, 7vw, 80px); padding-top: 22px; border-top: 1px solid var(--hair-night);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  font-size: 12.5px; color: var(--on-night-3);
}
.info__terms { max-width: 72ch; }

/* --------------------------------------------------------- mobile dock --- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 45; display: flex; align-items: center; gap: 12px;
  background: var(--panel-dark); color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px; padding: 9px 9px 9px 18px; box-shadow: 0 12px 34px rgba(31,31,34,.3);
  animation: dockIn .55s var(--ease-out) both;
}
@keyframes dockIn { from { opacity: 0; transform: translateY(calc(100% + 16px)); } }
.dock__text { min-width: 0; flex: 1; }
.dock__label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #b6b6bb; }
.dock__value { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Outlined, not filled, so it never reads as the submit button */
.dock__btn {
  flex: 0 0 auto; background: transparent; color: #fff; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 99px; padding: 10px 16px; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease;
}
.dock__btn:hover, .dock__btn:active { border-color: #fff; background: rgba(255,255,255,.12); }

/* ------------------------------------------------------------ the film --- */
.filmbox {
  padding: 0; border: 0; background: transparent; overflow: visible;
  width: min(92vw, 1120px); max-width: none; max-height: none;
}
.filmbox::backdrop { background: rgba(8, 8, 9, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.filmbox[open] { animation: filmIn .6s var(--ease-out) both; }
.filmbox[open]::backdrop { animation: fadeIn .4s ease both; }
@keyframes filmIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes fadeIn { from { opacity: 0; } }
.filmbox__frame {
  aspect-ratio: 16 / 9; width: 100%; max-height: 80svh; margin-inline: auto;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 120px -24px rgba(0,0,0,.7);
}
.filmbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.filmbox__close {
  position: absolute; top: -58px; right: 0;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25);
  transition: background .2s ease, transform .2s ease;
}
.filmbox__close svg { width: 18px; height: 18px; }
.filmbox__close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
html.is-filmOpen { overflow: hidden; }

/* ------------------------------------------------- motion gate + a11y --- */
/* Set only when motion is allowed (inline script in <head>); motion.js
   animates these in. If it never runs, the gate lifts after 2.5s. */
.motion .hero [data-reveal],
.motion .hero [data-line],
.motion .rail__ticks li,
.motion [data-rail-flag],
.motion [data-rail-ends] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .live::after { display: none; }
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.masthead :focus-visible, .hero :focus-visible, .members :focus-visible, .info :focus-visible, .filmbox :focus-visible { outline-color: var(--red-hi); }