/* F45 brand: navy #211551 and red #D6001C, sampled from f45training.com theme.css and logo.svg.
   #FF4455 (F45's own "#f45" in their CSS) is the red used for text on navy, since #D6001C is too dark there.
   Gotham is not on Google Fonts: Barlow Condensed stands in for Gotham Condensed, Montserrat for Gotham. */
:root {
  --navy: #211551;
  --navy-deep: #170E3D;
  --panel: #1C1248;
  --red: #D6001C;
  --red-hover: #BB051D;
  --red-text: #FF4455;
  --fg: #FFFFFF;
  --muted: #BBBBC1;
  --ink: #211551;
  --paper: #F5F7FA;
  --line: rgba(255, 255, 255, .16);
  --field: rgba(255, 255, 255, .05);
  --picked: rgba(255, 68, 85, .14);
  --error: #FFB3BA;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --radius: 16px;
  --intro: 1s;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.quiz-open { overflow: hidden; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--navy); color: var(--fg);
  font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
main { flex: 1; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- intro: the logo arrives, then zooms through the screen ---------- */
/* Intro: page.js animates the SVG viewBox (vector redraw each frame, so it stays sharp at ~150x).
   The curtain is part of the SVG, so the page shows only through the 4's triangle until it fills the screen.
   The failsafe hides the layer after 3s even if page.js never runs. */
.intro { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; background: var(--navy);
  animation: intro-failsafe 0s linear 3s forwards; }
.intro.is-open { background: transparent; }       /* set by page.js when the zoom starts: the hole becomes see-through */
.intro-svg { display: block; width: 100%; height: 100%; }
.intro-logo { opacity: 0; }
html:not(.js) .intro, html.no-intro .intro { display: none; }
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }

/* hero content rises in as the logo clears; static when there is no intro or no JS */
.js .reveal { opacity: 0; transform: translateY(22px); animation: rise .8s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--intro) * .45 + var(--d, 0) * 90ms); }     /* rising as the hole opens */
.js.no-intro .reveal { animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 6px; cursor: pointer;
  font: 700 15px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center;
  padding: 14px 24px; transition: background .15s, transform .15s, box-shadow .15s; }
.btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible, .q-option:focus-visible, .cal-day:focus-visible, .cal-time:focus-visible, .quiz-back:focus-visible,
.quiz-close:focus-visible, .ba-range:focus-visible + .ba-handle { outline: 2px solid #fff; outline-offset: 4px; }
.btn-go { background: var(--red); color: #fff; box-shadow: 0 12px 32px rgba(214, 0, 28, .35); }
.btn-go:hover { background: var(--red-hover); transform: translateY(-1px); }
.btn-go:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-lg { padding: 20px 30px; font-size: 16px; }

.eyebrow { font: 700 13px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--red-text); }

/* ---------- header ---------- */
.topbar { position: relative; z-index: 2; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand img { width: 104px; height: auto; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; min-height: calc(100dvh - 76px); display: flex; align-items: center; padding: 32px 0 88px; }
.hero::before { content: ''; position: absolute; left: 50%; top: 52%; width: min(1200px, 160vw); aspect-ratio: 1.5; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(214, 0, 28, .26), rgba(214, 0, 28, .06) 55%, transparent); pointer-events: none; }
/* the logo's side bars, echoed at full width behind the headline */
.hero-wings { position: absolute; left: 0; right: 0; top: 50%; height: 28px; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--line), var(--line)) left top / 18vw 12px no-repeat,
    linear-gradient(var(--red), var(--red)) left bottom / 18vw 6px no-repeat,
    linear-gradient(var(--line), var(--line)) right top / 18vw 12px no-repeat,
    linear-gradient(var(--red), var(--red)) right bottom / 18vw 6px no-repeat; }
.hero-inner { position: relative; text-align: center; }
/* Headline sizing (measured in Barlow Condensed 800: "YOU WON'T RECOGNIZE" = 8.06em, widest single word ~4em).
   640px+: max-width 8.4em forces exactly two lines at any size; font follows width AND height so the CTA
   stays above the fold on short laptops. Phones: see the max-width 639px block (exactly four lines). */
.hero h1 { margin: 18px auto 0; max-width: 8.4em; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance;
  font: 800 clamp(60px, min(10.6vw, 17vh), 136px)/.92 var(--display); }
.hero h1 em { font-style: italic; color: var(--red-text); }
.hero-sub { margin: 26px auto 0; max-width: 640px; font-size: clamp(17px, 1.8vw, 19px); color: #E4E3EC; text-wrap: pretty; }
.hero-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-note { font-size: 14px; color: var(--muted); }

/* ---------- before / after ---------- */
.results { background: var(--paper); color: var(--ink); padding: 88px 0 72px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.results .eyebrow { color: var(--red); }
.section-head h2, .closer h2 { margin-top: 12px; font: 800 clamp(38px, 5.4vw, 64px)/.95 var(--display); text-transform: uppercase; text-wrap: balance; }
.section-sub { margin-top: 14px; color: #4A4370; }
.ba-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ba { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(33, 21, 81, .12); }
.ba-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #dcdbe6; user-select: none; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-ph { display: grid; place-items: center; font: 600 15px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.ba-ph span { opacity: .7; }
.ba-ph-before { background: repeating-linear-gradient(135deg, #CFCDDB 0 14px, #C6C4D4 14px 28px); color: var(--ink); }
.ba-ph-after { background: repeating-linear-gradient(135deg, #2C1F66 0 14px, #251959 14px 28px); color: #fff; }
.ba-tag { position: absolute; top: 14px; padding: 5px 10px; border-radius: 4px; font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.ba-tag-before { left: 14px; background: rgba(255, 255, 255, .92); color: var(--ink); }
.ba-tag-after { right: 14px; background: var(--red); color: #fff; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(33, 21, 81, .15); }
.ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211551' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100vh; }
.ba-range::-moz-range-thumb { width: 48px; height: 100vh; border: 0; }
.ba figcaption { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 18px; }
.ba figcaption strong { font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.ba figcaption span { font-size: 15px; color: var(--red); font-weight: 600; }
.disclaimer { margin-top: 28px; text-align: center; font-size: 13px; color: #5D5880; }

/* ---------- closer ---------- */
.closer { background: var(--red); padding: 80px 0; }
.closer-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.closer h2 { margin-top: 0; }
.closer p { margin-top: 14px; font-size: 18px; max-width: 520px; }
.closer .btn-go { margin-top: 32px; background: #fff; color: var(--navy); box-shadow: 0 14px 34px rgba(33, 21, 81, .3); }
.closer .btn-go:hover { background: #F0EFF6; }

.footer { background: var(--navy-deep); color: var(--muted); font-size: 12px; padding: 22px 0 28px; text-align: center; }
.footer p + p { margin-top: 4px; }

/* ---------- pop-up ---------- */
.quiz { border: 1px solid var(--line); padding: 0; width: min(640px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); border-radius: 18px;
  background: var(--panel); color: var(--fg); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); overflow: hidden; }
.quiz::backdrop { background: rgba(14, 8, 38, .78); backdrop-filter: blur(6px); }
.quiz[open] { display: flex; animation: pop .22s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.quiz-shell { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.quiz-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 0; }
.quiz-progress { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.quiz-progress i { display: block; height: 100%; width: 0; background: var(--red); border-radius: inherit; transition: width .3s ease; }
.quiz-back, .quiz-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); cursor: pointer; display: grid; place-items: center; }
.quiz-back[hidden] { display: none; }
.quiz-back svg, .quiz-close svg { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiz-body { overflow-y: auto; padding: 26px 32px 32px; overscroll-behavior: contain; }

.q-enter { animation: slide .26s ease-out; }
@keyframes slide { from { opacity: 0; transform: translateY(14px); } }
.q-count { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); margin-bottom: 12px; }
.q-title { font: 800 clamp(30px, 5vw, 40px)/1 var(--display); text-transform: uppercase; text-wrap: balance; }
.q-help { margin-top: 10px; color: var(--muted); font-size: 16px; }
.q-options { margin-top: 24px; display: grid; gap: 10px; }
.q-option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 10px; cursor: pointer;
  background: var(--field); border: 1px solid var(--line); font-weight: 500; font-size: 16px; transition: border-color .12s, background .12s; }
.q-option:hover { border-color: rgba(255, 255, 255, .45); }
.q-option[aria-checked="true"] { border-color: var(--red-text); background: var(--picked); }
.q-key { flex: none; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); color: var(--muted); }
.q-option[aria-checked="true"] .q-key { background: var(--red); border-color: var(--red); color: #fff; }
.q-input { display: block; width: 100%; margin-top: 20px; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  font: 500 22px/1.3 var(--font); color: var(--fg); border-radius: 0; }
.q-input::placeholder { color: rgba(255, 255, 255, .38); }
.q-input:focus { border-bottom-color: var(--red-text); outline: none; }
.q-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.q-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--red); }
.q-error { min-height: 1.4em; margin-top: 12px; color: var(--error); font-weight: 500; font-size: 15px; }
.q-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.q-hint { font-size: 13px; color: var(--muted); }

/* calendar (only when F45.booking is true) */
.cal-body { margin-top: 22px; }
.cal-loading { color: var(--muted); padding: 30px 0; text-align: center; }
.cal-zone { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.cal-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.cal-day { flex: none; scroll-snap-align: start; width: 72px; padding: 10px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--field); cursor: pointer; display: grid; gap: 2px; }
.cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cal-dom { font-weight: 600; }
.cal-day[aria-selected="true"] { border-color: #fff; background: #fff; }
.cal-day[aria-selected="true"] span { color: var(--navy); }
.cal-times { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cal-time { padding: 12px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--field); font-weight: 500; cursor: pointer; }
.cal-time:hover { border-color: rgba(255, 255, 255, .45); }
.cal-time[aria-checked="true"] { background: var(--picked); border-color: var(--red-text); }
.cal-confirm { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.cal-confirm[hidden] { display: none; }
.cal-summary { font-weight: 600; }
.cal-other { margin-top: 4px; background: none; border: 0; padding: 6px 0; color: var(--muted); font-size: 14px; text-decoration: underline; cursor: pointer; }

/* end screens */
.q-end { text-align: center; padding: 18px 0 6px; display: flex; flex-direction: column; align-items: center; }
.q-end .btn { margin-top: 22px; }
.q-end-icon { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 18px; background: var(--red)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 30px no-repeat; }

/* side bars only where they clear the paragraph */
@media (max-width: 1099px) { .hero-wings { display: none; } }

/* ---------- phones: four-line headline, largest size where the widest word fits and the CTA stays visible ---------- */
@media (max-width: 639px) {
  .hero h1 { max-width: none; font-size: clamp(40px, min(calc((100vw - 32px) / 4.3), calc((100vh - 400px) / 3.7)), 80px); }
  @supports (height: 100svh) {
    .hero h1 { font-size: clamp(40px, min(calc((100vw - 32px) / 4.3), calc((100svh - 400px) / 3.7)), 80px); }
  }
}
@media (max-width: 639px) and (max-height: 640px) {
  .hero { padding-top: 24px; }
  .hero h1 { margin-top: 12px; }
  .hero-sub { margin-top: 18px; font-size: 16px; }
  .hero-cta { margin-top: 26px; }
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .topbar-inner { height: 64px; }
  .brand img { width: 88px; }
  .hero { min-height: 0; align-items: flex-start; padding: 40px 0 64px; }
  .hero-wings { display: none; }
  .btn-lg { width: 100%; padding: 18px 16px; font-size: 14px; letter-spacing: .04em; }
  .results { padding: 64px 0 56px; }
  .closer { padding: 64px 0; }
  .quiz { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; margin: 0; }
  .quiz-body { padding: 20px 18px calc(28px + env(safe-area-inset-bottom)); }
  .q-hint { display: none; }
  .q-actions .btn { width: 100%; }
  .cal-confirm .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}