/* ==========================================================================
   STUDIO 20 — the athletic skin
   Loaded last on every public page (never in the admin area). main.css is the structure, premium.css the motion; this
   file is what makes it read as a serious gym rather than a friendly app: a condensed athletic typeface, square
   corners, steel-and-knurl detail, a measuring-tape ruler, and one consistent dark, high-contrast photo grade.
   Nothing here hides or moves content, so it needs no motion gate.
   ========================================================================== */

:root {
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --steel: #8d919b;
  --steel-2: #565a64;
  /* One grade for every photograph: darker, flatter colour, more contrast. Colour returns on hover. */
  --grade: grayscale(0.55) contrast(1.14) brightness(0.82);
  --grade-hover: grayscale(0) contrast(1.06) brightness(0.98);
  --knurl:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #202026, #0c0c0f);
}

/* Type ------------------------------------------------------------------------------------------------------------------ */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: 0; }
.display, .display-sm, .h2 { text-transform: uppercase; line-height: 0.9; letter-spacing: -0.005em; }
.display { font-size: clamp(3.6rem, 11.5vw, 9.5rem); font-weight: 800; }
.display-sm { font-size: clamp(3rem, 7.6vw, 6.2rem); font-weight: 800; }
.h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); }
.eyebrow { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.28em; }
.eyebrow::before { width: 28px; border-radius: 0; }
.page-hero .display { font-size: clamp(3.4rem, 10.5vw, 8.4rem); }

/* Square corners: tags, pills and buttons become cut edges. Round things (dots, plates, icon buttons) stay round. */
.btn { border-radius: 2px; padding: 0.95rem 1.7rem; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.12em; }
.btn--sm { padding: 0.62rem 1.1rem; font-size: 0.92rem; }
.btn--xs { font-size: 0.82rem; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.14rem; }
.btn--hero { padding: 1rem 2rem; font-size: 1.04rem; letter-spacing: 0.16em; }
.chip, .badge, .hero-status, .day-tab, .day-tab__count, .slot__state, .plan-card__badge, .plan-card__save,
.member-tabs, .member-tab, .coaching-facts li, .hero-dock__chip, .hero-dock__label, .policy-banner, .pills li,
.feature__meta, .hours-board__state, .staff-profile__chips li, .site-nav__link { border-radius: 2px; }
.filter-chip { border-radius: 2px; }
.input, .input-toggle { border-radius: 3px; }
.chip, .badge, .day-tab, .filter-chip, .member-tab { letter-spacing: 0.1em; }
.hero-status, .hero-dock__chip { font-size: 0.82rem; }

/* Header: a flat black bar, not a floating pill ---------------------------------------------------------------------------- */
.site-header { pointer-events: auto; background: rgba(7, 7, 8, 0.86); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--border); transition: transform 0.45s var(--ease), background 0.3s; }
.site-header.is-scrolled { background: rgba(7, 7, 8, 0.94); }
.site-header__inner, .site-header.is-scrolled .site-header__inner { width: min(var(--container), 100% - var(--gutter) * 2); min-height: calc(var(--header-h) - 1px); margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav__link { padding: 0.55rem 0.85rem; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.16em; background: none; }
.site-nav__link:hover { background: none; }
.site-nav__link::after { left: 0.85rem; right: 0.85rem; bottom: 0.1rem; width: auto; height: 2px; margin: 0; border-radius: 0; background: var(--red-2); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); }
body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }

/* Hero: the wordmark at athletic scale, centred, framed like a competition board --------------------------------------------------- */
/* The wordmark is set one weight lighter than the headings (700): at poster size the heaviest weight closes the counters of the
   S, D, O and 0. The tagline uses the same condensed face, in capitals, so the whole hero reads as one voice. */
:root { --hero-lh: 0.88; }
.hero__title { font-size: clamp(4.6rem, min(23vw, 31svh), 17rem); font-weight: 700; line-height: var(--hero-lh); letter-spacing: 0; }
.hero__sub { margin-top: 1.1rem; font-size: clamp(0.95rem, 1.3vw, 1.2rem); font-weight: 700; letter-spacing: 0.5em; color: var(--steel); }
.hero__lead { max-width: 30ch; font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 600; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
/* The loader counts up inside the same line box, so its step is one hero line. */
.loader__strip--ones { transform: translateY(calc(var(--n, 0) * var(--hero-lh) * -1em)); }
.loader__strip--tens { transform: translateY(calc(var(--tens, 0) * var(--hero-lh) * -1em)); }
/* Labels sitting on the frame's top edge, like the legend on a scoreboard. */
.hero__meta { position: absolute; margin: 0; font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.hero__meta--tl { top: -0.62em; left: calc(clamp(28px, 4vw, 56px) + 0.9rem); }
.hero__meta--tr { top: -0.62em; right: calc(clamp(28px, 4vw, 56px) + 0.9rem); }
.hero__meta--bl { bottom: -0.62em; left: calc(clamp(28px, 4vw, 56px) + 0.9rem); }
@media (max-width: 640px) { .hero__meta--tr, .hero__meta--bl { display: none; } .hero__meta { letter-spacing: 0.22em; font-size: 0.78rem; } }
/* A measuring tape along the foot of the hero. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 100px) left bottom / 100% 26px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 20px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 5px) left bottom / 100% 7px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Photographs: one grade, colour on hover ----------------------------------------------------------------------------------------- */
.gallery__item img, .feature img, .collage__fig img, .ladies__photo img, .media-frame img, .class-card__media img, .tile img,
.timeline__img, .staff-card__media img, .staff-profile__media img, .video__poster { filter: var(--grade); transition: filter 0.7s var(--ease), scale 1s var(--ease), transform 1s var(--ease); }
.page-hero__media img { filter: grayscale(0.85) contrast(1.16) brightness(0.72); }
.gallery__item:hover img, .gallery__item:focus-visible img, .feature:hover img, .collage__fig:hover img, .ladies__photo:hover img,
.media-frame:hover img, .class-card:hover .class-card__media img, .tile:hover img, .timeline__item:hover .timeline__img,
.staff-card:hover .staff-card__media img, .staff-profile__media:hover img, .video:hover .video__poster { filter: var(--grade-hover); }
.timeline__img { filter: var(--grade); }
.gallery__item:hover img, .gallery__item:focus-visible img { scale: 1.06; }

/* Steel and knurl --------------------------------------------------------------------------------------------------------------------- */
.site-footer::before { content: ""; display: block; height: 16px; background: var(--knurl); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.section--dark, .cinema { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 16px); }
.sticker { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.3), inset 0 0 0 6px rgba(255, 255, 255, 0.3), 0 16px 40px -14px rgba(0, 0, 0, 0.85); }
.sticker__core { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }

/* Section counters read like sets ------------------------------------------------------------------------------------------------------ */
.section .eyebrow::after, .gallery .eyebrow::after { content: "Set " counter(sec, decimal-leading-zero); letter-spacing: 0.22em; }

/* Notes: stencilled in italic caps, not handwriting --------------------------------------------------------------------------------------- */
.note { font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.25rem); font-style: italic; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; rotate: 0deg; gap: 0.6rem; }
.note::before { content: "//"; opacity: 0.7; }
.note .icon { rotate: 0deg; }
.note--arrow::after { content: none; }
.note--arrow::before { content: "→"; opacity: 1; }
.staff-profile__chips .lbl { font-family: var(--font-display); font-size: 0.9rem; font-style: italic; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; rotate: 0deg; }
/* A clean red slash under the key word, not a squiggle. */
.scribble::after { -webkit-mask: none; mask: none; left: -1%; right: -1%; bottom: -0.02em; height: 0.11em; background: var(--red-2); transform: skewX(-22deg); }

/* Membership cards: numbered like the access card they become ----------------------------------------------------------------------------- */
.plan-grid { counter-reset: plan; }
.plan-grid > .plan-card:not(.coaching-card)::after { counter-increment: plan; content: "Nº " counter(plan, decimal-leading-zero); position: absolute; top: 1.35rem; right: 1.6rem; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.22em; color: var(--steel-2); }
.plan-card { border-radius: var(--radius-lg); }
.plan-card__name { font-size: 1.05rem; letter-spacing: 0.2em; }
.plan-card__amount { font-size: clamp(3.4rem, 5vw, 4.8rem); font-weight: 900; letter-spacing: -0.01em; }
.members .plan-card__amount { font-size: clamp(3.8rem, 5.4vw, 5.4rem); }
.members .plan-card__name { font-size: 1.05rem; }
.plan-card__period { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; }

/* Big numerals ---------------------------------------------------------------------------------------------------------------------------------- */
.stat__value { font-size: clamp(3.8rem, 12.5vw, 10.5rem); letter-spacing: 0; }
.stat__label { font-size: 0.95rem; letter-spacing: 0.14em; }
.step__num { font-size: clamp(4.4rem, 9vw, 8rem); letter-spacing: 0; }
.timeline__year { font-size: clamp(3.4rem, 7vw, 6rem); letter-spacing: 0; }
.value-row__title { font-size: clamp(3rem, 8vw, 6.6rem); letter-spacing: 0; line-height: 0.9; }
.ticker__word { font-size: clamp(4rem, 13vw, 11.5rem); letter-spacing: 0; line-height: 0.9; }
.tape__group span { font-size: clamp(1.15rem, 2.4vw, 1.75rem); letter-spacing: 0.1em; }
.footer-mark__t { font-size: clamp(4.5rem, 23.5vw, 26rem); letter-spacing: -0.01em; }
.hours-board__range { font-size: clamp(1.3rem, 1.9vw, 1.65rem); letter-spacing: 0; text-wrap: balance; }
.hours-board__state { font-size: 0.95rem; }
.today-strip__time { font-size: 1.4rem; }
.slot__time { font-size: 1.55rem; }
.slot__name { font-size: 1.25rem; }
.slot__price { font-size: 1.3rem; }
.feature__title { font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: 0.88; letter-spacing: 0; }
.staff-card__name { font-size: clamp(2.3rem, 3.2vw, 3.1rem); letter-spacing: 0; }
.staff-profile__name { font-size: clamp(4rem, 12vw, 10.5rem); line-height: 0.84; letter-spacing: 0; }
.staff-profile__num { font-size: clamp(6rem, 17vw, 15rem); }
.pull__quote { font-size: clamp(2.8rem, 9vw, 8rem); letter-spacing: -0.005em; line-height: 0.92; max-width: 20ch; }
.cinema__title { font-size: clamp(3rem, 10vw, 9.5rem); letter-spacing: 0; }
.why__text .display, .ladies .display { font-size: clamp(3.4rem, 8.2vw, 7rem); }
.hours-board__day, .hours-board__sub { letter-spacing: 0.16em; }
.gallery__count { font-size: clamp(3.4rem, 7vw, 6.4rem); }
.gallery__label strong { font-size: 1.5rem; letter-spacing: 0.04em; }
.timeline__title, .step h3, .perk strong { letter-spacing: 0.01em; }
.perk strong { font-size: 1.18rem; }
.step h3 { font-size: 1.5rem; }
.timeline__title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.staff-card__role, .card__title, .compare__title, .perks__title { letter-spacing: 0.2em; }
.staff-profile__spec { font-size: 1.05rem; }
.compare__table thead th { font-size: 1rem; letter-spacing: 0.14em; }
.compare__table td strong { font-size: 1.5rem; }
.id-card__value { font-weight: 800; }

/* The drone tour: a centred frame ---------------------------------------------------------------------------------------------------------------- */
.cinema { padding-bottom: var(--section); }
.cinema__stage, .cinema__stage:has(iframe) { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; clip-path: none; scale: calc(0.9 + 0.1 * var(--p, 1)); transform-origin: 50% 35%; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 50px 120px -50px rgba(224, 19, 43, 0.4), 0 30px 80px -40px rgba(0, 0, 0, 0.9); }
.cinema__stage .video { max-height: none; }
@media (max-width: 700px) { .cinema__stage, .cinema__stage:has(iframe) { clip-path: none; width: calc(100% - var(--gutter) * 2); } .cinema { padding-bottom: 1.5rem; } }

/* Footer, forms, small print --------------------------------------------------------------------------------------------------------------------- */
.site-footer__heading { font-size: 0.95rem; letter-spacing: 0.24em; }
.site-footer__notice { background: #0c0a0b; }
.notice-strip { font-size: 0.95rem; letter-spacing: 0.16em; }
.policy-banner { font-size: clamp(0.85rem, 1.4vw, 1rem); }
.cta-band .display { font-size: clamp(3.8rem, 13vw, 11.5rem); max-width: 11ch; }
.cta-band--sm { padding-block: clamp(3rem, 6vw, 5rem); }
.cta-band--sm .display { font-size: clamp(2.8rem, 7vw, 5.6rem); max-width: none; }
.cta-band--sm::after { font-size: clamp(9rem, 24vw, 20rem); bottom: -22%; }
.cta-band--sm .btn-row { margin-top: clamp(1.25rem, 2.4vw, 2rem); }

@media print {
  .hero::after, .site-footer::before { display: none !important; }
}