@charset "UTF-8";
/* ==========================================================================
   IRONHAUS ATHLETIC CLUB — core stylesheet
   --------------------------------------------------------------------------
   1.  Fonts
   2.  Tokens
   3.  Reset + base
   4.  Type
   5.  Layout + utilities
   6.  Motion primitives (reveal, marquee, blobs, noise)
   7.  Loader
   8.  Cursor
   9.  Header, nav, mega panel, sheet menu
   10. Buttons + links
   11. Hero
   12. Cards (programme, coach, plan, post, stat, feature)
   13. Sliders, tabs, filters, accordion
   14. Lightbox, modal, compare slider, toast
   15. Forms
   16. Tables
   17. Page-specific blocks
   18. Footer
   19. Print
   Responsive rules live in responsive.css.
   ========================================================================== */

/* ===== 1. Fonts ========================================================== */
/* Self-hosted from Google Fonts (SIL OFL 1.1) — no third-party request.     */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/bebas-neue-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== 2. Tokens ========================================================= */
:root {
  /* surface */
  --ink:      #0A0A0A;
  --ink-2:    #111111;
  --ink-3:    #17171A;
  --ink-4:    #1E1E23;
  --line:     rgba(255, 255, 255, .09);
  --line-2:   rgba(255, 255, 255, .17);
  --glass:    rgba(255, 255, 255, .035);
  --glass-2:  rgba(255, 255, 255, .06);

  /* brand */
  --accent:   #E50914;
  --accent-2: #FF3D00;
  /* #E50914 on #0A0A0A is 4.13:1 — fine for large text, borders and icons but
     under AA for body copy, so small accent text uses this lighter tint (5.9:1) */
  --accent-txt: #FF4B3A;
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --accent-soft: rgba(229, 9, 20, .14);

  /* text */
  --white:    #FFFFFF;
  --text:     #F2F2F3;
  --sub:      #8A8A93;   /* 5.8:1 on --ink */
  --sub-dim:  #61616B;   /* decorative only */

  /* radii — brief calls for 20–30px */
  --r-xs: 10px; --r-sm: 16px; --r-md: 22px; --r-lg: 28px; --r-xl: 34px;
  --r-pill: 999px;

  /* rhythm */
  --gap: clamp(1rem, 2.4vw, 2rem);
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(5rem, 11vw, 10rem);
  --wrap: 1440px;
  --head-h: 78px;

  /* shadow */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --sh-md: 0 18px 40px -18px rgba(0, 0, 0, .8);
  --sh-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
  --sh-accent: 0 18px 50px -18px rgba(229, 9, 20, .55);

  /* motion */
  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .22s; --t: .42s; --t-slow: .8s;
}

/* ===== 3. Reset + base =================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* `clip` not `hidden`: overflow-x:hidden on <body> turns the body into its own
   scroll container, which stops Lenis driving the window scroller entirely. */
html, body { overflow-x: clip; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the header is fixed: a link like contact.html#join must land below it, not under it */
  scroll-padding-top: calc(var(--head-h, 78px) + 1rem);
  scrollbar-color: var(--accent) var(--ink-2);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(.975rem, .35vw + .9rem, 1.0625rem);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -.005em;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}

/* fine, ever-present film grain — keeps large flat blacks from banding */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
svg.ic { flex: none; }
hr { border: 0; border-top: 1px solid var(--line); }

/* The UA sheet gives [hidden] `display:none` at the lowest possible priority,
   so ANY class that sets display beats it — `.grid[hidden]` stays a grid and
   `.btn[hidden]` stays an inline-flex. That silently defeated the imperial
   unit group and the video fallback button. Make the attribute mean what it
   says; components that need to animate out use visibility instead. */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 1200;
  padding: .8em 1.2em; background: var(--accent); color: #fff;
  border-radius: var(--r-xs); font-weight: 600; font-size: .875rem;
  transform: translateY(-160%); transition: transform var(--t) var(--ease);
}
.skip:focus { transform: none; }

/* scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb {
  background: #2a2a2f; border-radius: 99px; border: 2px solid var(--ink-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ===== 4. Type =========================================================== */
h1, h2, h3, h4, h5, .display, .num {
  font-family: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: .012em;
  text-wrap: balance;
}
.d1 { font-size: clamp(3.4rem, 11.5vw, 11rem); }
.d2 { font-size: clamp(2.7rem, 7.4vw, 6.6rem); }
.d3 { font-size: clamp(2.1rem, 5.2vw, 4.4rem); }
.d4 { font-size: clamp(1.65rem, 3vw, 2.7rem); }
.d5 { font-size: clamp(1.35rem, 1.9vw, 1.9rem); line-height: .96; }

h1 { font-size: clamp(2.9rem, 8vw, 7rem); }
h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
h4 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }

p + p { margin-top: 1.1em; }
strong, b { font-weight: 650; color: var(--white); }
em { font-style: italic; }

.lead {
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.375rem);
  line-height: 1.6; color: var(--sub); font-weight: 350; max-width: 62ch;
}
.lead strong { color: var(--text); font-weight: 500; }
.sub { color: var(--sub); }
.dim { color: var(--sub-dim); }
.mono {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: max(.8em, 11px); letter-spacing: .04em;
}
.accent { color: var(--accent-txt); }
.grad-txt {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* background-clip:text paints the box it is set on. Once the splitter wraps
   each word in its own inline-block, those children inherit the transparent
   fill but have no background of their own — so the whole line renders
   invisible. Give every split child the gradient back. */
.grad-txt .sw__i, .grad-txt .sl__i, .grad-txt .sc__i {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.outline-txt {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .34);
  paint-order: stroke fill;
}

.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sub);
  margin-bottom: clamp(1.1rem, 2vw, 1.8rem);
}
.eyebrow__n {
  color: var(--accent-txt); font-variant-numeric: tabular-nums;
}
.eyebrow__l { position: relative; padding-left: .9rem; }
.eyebrow__l::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--line-2);
}
.eyebrow::after {
  content: ''; height: 1px; flex: 1; max-width: 90px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head--split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.sec-head h2 { margin-bottom: .4em; }
.sec-head .lead { max-width: 46ch; }

/* ===== 5. Layout + utilities ============================================ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--nar { max-width: 1040px; }
.wrap--tight { max-width: 800px; }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec--flush-t { padding-top: 0; }
.sec--flush-b { padding-bottom: 0; }
.sec--alt { background: var(--ink-2); }
.sec--ink3 { background: var(--ink-3); }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flex { display: flex; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .eyebrow::after { display: none; }
.center .lead { margin-inline: auto; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 2.75rem; }
.mt-5 { margin-top: clamp(3rem, 6vw, 5rem); }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hairline { height: 1px; background: var(--line); border: 0; }

.rule {
  height: 1px; background: var(--line); position: relative; overflow: hidden;
}
.rule::after {
  content: ''; position: absolute; inset: 0; width: 34%;
  background: var(--accent-grad); transform: translateX(-100%);
  animation: rule-sweep 5.5s var(--ease-io) infinite;
}
@keyframes rule-sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(340%); } }

.pic { display: block; overflow: hidden; position: relative; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .42em .85em; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--glass);
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tag--accent { border-color: rgba(229, 9, 20, .5); background: var(--accent-soft); color: #FF6B5A; }
.tag--dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .22);
}
.stars { display: inline-flex; gap: 2px; color: var(--accent-2); }
.stars .star-i { fill: currentColor; }

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  border: 1px solid var(--line);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.card::after {                       /* hover glow, painted not animated */
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(229, 9, 20, .16), transparent 62%);
}
.card:hover, .card:focus-within {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: var(--sh-md);
}
.card:hover::after, .card:focus-within::after { opacity: 1; }

/* ===== 6. Motion primitives ============================================= */
/* Reveals only hide when JS is running, so a no-JS visit shows everything. */
.js .reveal {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal--l { transform: translate3d(-34px, 0, 0); }
.js .reveal--r { transform: translate3d(34px, 0, 0); }
.js .reveal--s { transform: scale(.93); }
.js .reveal--blur { filter: blur(10px); }
.js .reveal--blur.in { filter: blur(0); }
.js .reveal.in { will-change: auto; }

/* image mask wipe */
.js .mask-rise { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.js .mask-rise.in { clip-path: inset(0 0 0 0); }
.js .mask-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.js .mask-wipe.in { clip-path: inset(0 0 0 0); }

/* word-by-word / line splitting */
.sw, .sl { display: inline-block; overflow: hidden; vertical-align: top; }
.js .sw__i, .js .sl__i {
  display: inline-block;
  transform: translateY(105%) rotate(2deg);
  transition: transform .95s var(--ease); transition-delay: var(--d, 0ms);
}
.js .in .sw__i, .js .in .sl__i, .js .sw.in .sw__i { transform: none; }

/* letter splitting (built by JS) */
.js .sc { display: inline-block; }
.js .sc__i {
  display: inline-block; opacity: 0; transform: translateY(.5em) scale(.94);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .in .sc__i { opacity: 1; transform: none; }

/* Headings that animations.js has split are driven frame-by-frame by GSAP.
   Leaving the CSS transition on would mean two engines writing the same
   property: the transition lags behind every GSAP write and the easing curve
   above gets applied on top of GSAP's, which reads as sluggish and wrong.
   Elements the IntersectionObserver path handles never get this attribute, so
   they keep their transition. */
[data-split-done] .sw__i,
[data-split-done] .sl__i,
[data-split-done] .sc__i {
  transition: none;
  transform: none;   /* GSAP writes its own start value inline */
}

/* floating decoration */
.float { animation: float 7s ease-in-out infinite; }
.float--2 { animation-duration: 9s; animation-delay: -2s; }
.float--3 { animation-duration: 11s; animation-delay: -4s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-16px) rotate(1.4deg); }
}

/* animated background blobs */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .4; will-change: transform;
}
.blob--1 {
  width: 46vw; height: 46vw; left: -14vw; top: -12vw;
  background: radial-gradient(circle, rgba(229, 9, 20, .55), transparent 68%);
  animation: drift-a 22s ease-in-out infinite;
}
.blob--2 {
  width: 38vw; height: 38vw; right: -10vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(255, 61, 0, .38), transparent 68%);
  animation: drift-b 27s ease-in-out infinite;
}
.blob--3 {
  width: 28vw; height: 28vw; left: 42%; top: 30%;
  background: radial-gradient(circle, rgba(120, 60, 255, .18), transparent 66%);
  animation: drift-a 33s ease-in-out infinite reverse;
}
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(7vw, 5vh, 0) scale(1.14); }
  66% { transform: translate3d(-4vw, 8vh, 0) scale(.93); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  40% { transform: translate3d(-8vw, -6vh, 0) scale(.9); }
  75% { transform: translate3d(4vw, -3vh, 0) scale(1.18); }
}

/* animated gradient mesh panel */
.mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(50% 60% at 12% 18%, rgba(229, 9, 20, .34), transparent 60%),
    radial-gradient(46% 56% at 88% 24%, rgba(255, 61, 0, .24), transparent 62%),
    radial-gradient(60% 70% at 50% 110%, rgba(229, 9, 20, .2), transparent 64%);
  background-size: 180% 180%, 170% 170%, 200% 200%;
  animation: mesh-move 24s ease-in-out infinite;
}
@keyframes mesh-move {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50% { background-position: 30% 40%, 60% 30%, 30% 60%; }
}

/* marquee */
.marquee {
  --speed: 34s;
  display: flex; overflow: hidden; user-select: none;
  gap: 0; padding-block: clamp(1.1rem, 2.4vw, 2rem);
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__t {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  flex: none; min-width: 100%; padding-right: clamp(1.5rem, 4vw, 3.5rem);
  animation: slide var(--speed) linear infinite;
}
.marquee:hover .marquee__t { animation-play-state: paused; }
.marquee--rev .marquee__t { animation-direction: reverse; }
.marquee__i {
  font-family: 'Bebas Neue', sans-serif; text-transform: uppercase;
  font-size: clamp(1.9rem, 5.4vw, 4.6rem); line-height: 1;
  letter-spacing: .02em; color: var(--text); white-space: nowrap;
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
}
.marquee__i:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.3); }
.marquee__d { color: var(--accent); font-size: .4em; }
@keyframes slide { to { transform: translateX(-100%); } }

/* logo belt */
.belt { border-block: 1px solid var(--line); overflow: hidden; background: var(--ink); }
.belt__t {
  display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
  flex: none; min-width: 100%; padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  padding-right: clamp(2.5rem, 6vw, 6rem);
  animation: slide 40s linear infinite;
}
.belt__in { display: flex; overflow: hidden; }
.belt__i {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1rem, 1.8vw, 1.55rem);
  letter-spacing: .2em; color: var(--sub-dim); white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.belt__i:hover { color: var(--white); }

/* progress + to-top */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 320;
  background: rgba(255, 255, 255, .06);
}
.progress__bar {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 14px rgba(229, 9, 20, .8);
}
.to-top {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  z-index: 310; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  background: var(--glass-2); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
              background var(--t) var(--ease);
}
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); border-color: var(--accent); }
.to-top__i { transform: rotate(180deg); }

/* ===== 7. Loader ======================================================== */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--ink);
  transition: clip-path 1s var(--ease), opacity .5s ease .55s;
  clip-path: inset(0 0 0 0);
}
.no-js .loader { display: none; }
.been-here .loader { display: none; }
.loader.done { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.loader__grain {
  position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(60% 60% at 50% 45%, rgba(229, 9, 20, .16), transparent 70%);
}
.loader__in { position: relative; text-align: center; width: min(340px, 74vw); }
.loader__mark { margin: 0 auto 1.4rem; color: var(--accent); }
.loader__mark .lm {
  stroke-dasharray: 96; stroke-dashoffset: 96;
  animation: draw 1.1s var(--ease) forwards;
}
.loader__mark .lm--2 { animation-delay: .18s; }
.loader__mark .lm--3 { animation-delay: .34s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.loader__word {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(2rem, 8vw, 2.9rem);
  letter-spacing: .3em; text-indent: .3em; color: var(--white);
  display: flex; justify-content: center; margin-bottom: 1.6rem;
}
.loader__word span {
  display: inline-block; opacity: 0; transform: translateY(70%);
  animation: rise .7s var(--ease) forwards;
}
.loader__word span:nth-child(1) { animation-delay: .10s; }
.loader__word span:nth-child(2) { animation-delay: .16s; }
.loader__word span:nth-child(3) { animation-delay: .22s; }
.loader__word span:nth-child(4) { animation-delay: .28s; }
.loader__word span:nth-child(5) { animation-delay: .34s; }
.loader__word span:nth-child(6) { animation-delay: .40s; }
.loader__word span:nth-child(7) { animation-delay: .46s; }
.loader__word span:nth-child(8) { animation-delay: .52s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.loader__track {
  height: 2px; background: rgba(255, 255, 255, .12); border-radius: 99px;
  overflow: hidden;
}
.loader__bar {
  display: block; height: 100%; width: 0%; background: var(--accent-grad);
  transition: width .3s linear;
}
.loader__pct {
  margin-top: .8rem; font-size: .75rem; letter-spacing: .22em;
  color: var(--sub); font-variant-numeric: tabular-nums;
}

/* ===== 8. Cursor ======================================================== */
.cursor, .cursor-glow { display: none; }
.fine .cursor {
  display: block; position: fixed; inset: 0; z-index: 900; pointer-events: none;
}
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  transform: translate3d(-50%, -50%, 0); will-change: transform;
}
.cursor__dot {
  width: 6px; height: 6px; background: var(--accent);
  transition: opacity .2s, width .25s var(--ease), height .25s var(--ease);
}
.cursor__ring {
  width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .5);
  display: grid; place-items: center;
  transition: width .35s var(--ease), height .35s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease);
}
.cursor__label {
  font-family: 'Bebas Neue', sans-serif; font-size: .72rem; letter-spacing: .12em;
  opacity: 0; transform: scale(.7); color: #fff; white-space: nowrap;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cursor.is-hover .cursor__ring {
  width: 58px; height: 58px; background: rgba(229, 9, 20, .16);
  border-color: rgba(229, 9, 20, .75);
}
.cursor.is-hover .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__ring {
  width: 78px; height: 78px; background: var(--accent); border-color: var(--accent);
}
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-down .cursor__ring { width: 24px; height: 24px; }
.fine .cursor-glow {
  display: block; position: fixed; top: 0; left: 0; width: 420px; height: 420px;
  z-index: 1; pointer-events: none; border-radius: 50%;
  transform: translate3d(-50%, -50%, 0); will-change: transform;
  background: radial-gradient(circle, rgba(229, 9, 20, .13), transparent 65%);
  opacity: 0; transition: opacity .5s ease;
}
.fine .cursor-glow.on { opacity: 1; }
/* keep the OS cursor for anyone using assistive tech / keyboard focus */
.fine.cursor-hidden, .fine.cursor-hidden a, .fine.cursor-hidden button { cursor: none; }

/* ===== 9. Header ======================================================== */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  transition: transform .5s var(--ease), background .4s ease,
              border-color .4s ease, backdrop-filter .4s ease;
  border-bottom: 1px solid transparent;
}
.site-head.stuck {
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line);
}
.site-head.hide { transform: translateY(-102%); }
.site-head.menu-open { transform: none !important; }
.site-head__in {
  display: flex; align-items: center; gap: var(--gap);
  height: var(--head-h); padding-inline: var(--pad);
  max-width: var(--wrap); margin-inline: auto;
}

.brand { display: flex; align-items: baseline; gap: .55rem; flex: none; }
.brand__mark { color: var(--accent); align-self: center; }
.brand__word {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.55rem; letter-spacing: .12em;
  color: var(--white); line-height: 1;
}
.brand__sub {
  font-size: .6875rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--sub); font-weight: 500;
}
.brand--lg .brand__word { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .1em; }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: .2rem; position: relative; }
.nav__link {
  display: flex; align-items: center; gap: .3rem;
  padding: .7rem 1rem; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 550; letter-spacing: .02em; color: var(--sub);
  transition: color var(--t-fast) var(--ease);
  position: relative; white-space: nowrap;
}
.nav__link > span { position: relative; display: inline-block; }
.nav__link > span::after {           /* underline grow */
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .38s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--white); }
.nav__link:hover > span::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--white); }
.nav__chev { transition: transform var(--t) var(--ease); }
.nav__trigger[aria-expanded="true"] { color: var(--white); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__ind {                          /* sliding active pill */
  position: absolute; left: 0; top: 50%; height: 34px; width: 0;
  transform: translateY(-50%); border-radius: var(--r-pill);
  background: var(--glass-2); border: 1px solid var(--line);
  opacity: 0; z-index: -1;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s ease;
}
.nav__ind.on { opacity: 1; }

.mega {
  position: absolute; top: calc(100% - 6px); left: 50%; width: min(760px, 92vw);
  transform: translateX(-50%);
  background: rgba(17, 17, 17, .92); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  padding: clamp(1.2rem, 2vw, 1.8rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(.985);
  transition: opacity .3s var(--ease), transform .38s var(--ease), visibility .3s;
}
/* The mega panel is never given the hidden attribute — it animates out and is
   taken off the a11y tree by `visibility: hidden` above. */
.mega.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.mega__label {
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sub-dim); margin-bottom: .9rem; font-weight: 600;
}
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.mega__grid a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .3rem 1rem; padding: .85rem 1rem; border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.mega__grid a:hover, .mega__grid a:focus-visible { background: var(--glass-2); }
.mega__t {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: .05em;
  color: var(--white); grid-column: 1;
}
.mega__d { grid-column: 1; font-size: .8125rem; color: var(--sub); line-height: 1.45; }
.mega__a {
  grid-column: 2; grid-row: 1 / span 2; color: var(--sub-dim);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.mega__grid a:hover .mega__a { transform: translate(3px, -3px); color: var(--accent-txt); }
.mega__foot {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.mega__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--sub); font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.mega__cta:hover { color: var(--accent-txt); }

.site-head__act { display: flex; align-items: center; gap: .6rem; flex: none; }
.burger {
  display: none; align-items: center; gap: .55rem;
  padding: .6rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--glass);
  color: var(--white); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.burger__box { width: 18px; height: 12px; position: relative; }
.burger__box i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  border-radius: 2px; transition: transform .4s var(--ease), width .4s var(--ease);
}
.burger__box i:first-child { top: 0; }
.burger__box i:last-child { bottom: 0; width: 68%; }
.burger:hover .burger__box i:last-child { width: 100%; }
.burger[aria-expanded="true"] .burger__box i:first-child { transform: translateY(5.2px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:last-child { width: 100%; transform: translateY(-5.2px) rotate(-45deg); }

/* full-screen sheet menu */
.sheet { position: fixed; inset: 0; z-index: 500; }
.sheet[hidden] { display: none; }
.sheet__bg {
  position: absolute; inset: 0; background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .45s var(--ease);
}
.sheet.open .sheet__bg { opacity: 1; }
.sheet__panel {
  position: absolute; inset: 0 0 0 auto; width: min(560px, 100%);
  background: var(--ink-2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  transform: translateX(100%); transition: transform .6s var(--ease);
}
.sheet.open .sheet__panel { transform: none; }
.sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sheet__eyebrow {
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sub-dim);
}
.sheet__x {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--white); flex: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.sheet__x:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.sheet__list { margin: clamp(1.5rem, 4vw, 2.5rem) 0 auto; }
.sheet__item { border-bottom: 1px solid var(--line); }
.sheet__item a {
  display: flex; align-items: center; gap: 1rem; padding: clamp(.75rem, 1.6vw, 1rem) 0;
  color: var(--sub); transition: color var(--t) var(--ease), padding-left var(--t) var(--ease);
}
.sheet__item a:hover, .sheet__item a:focus-visible { color: var(--white); padding-left: .6rem; }
.sheet__item a[aria-current] { color: var(--accent-txt); }
.sheet__n {
  font-size: .6875rem; color: var(--sub-dim); font-variant-numeric: tabular-nums;
  width: 2ch; flex: none;
}
.sheet__t {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing: .05em; margin-right: auto; line-height: 1;
}
.sheet__item a svg { opacity: 0; transform: translate(-6px, 6px); transition: all var(--t) var(--ease); }
.sheet__item a:hover svg { opacity: 1; transform: none; }
.sheet__foot { padding-top: 1.6rem; display: grid; gap: 1rem; }
.sheet__meta { display: grid; gap: .5rem; }
.sheet__meta a {
  display: inline-flex; align-items: center; gap: .55rem; color: var(--sub);
  font-size: .875rem; transition: color var(--t-fast) var(--ease);
}
.sheet__meta a:hover { color: var(--white); }

.socials { display: flex; gap: .5rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--sub);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background var(--t) var(--ease), transform var(--t) var(--ease);
}
.socials a:hover {
  color: #fff; background: var(--accent); border-color: var(--accent);
  transform: translateY(-3px);
}
.socials--lg a { width: 44px; height: 44px; }

/* ===== 10. Buttons ===================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05em 1.7em; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              color var(--t) var(--ease), border-color var(--t) var(--ease),
              background var(--t) var(--ease);
}
.btn > span { position: relative; z-index: 2; }
.btn > svg { position: relative; z-index: 2; transition: transform var(--t) var(--ease); }
.btn:hover > svg { transform: translateX(4px); }
.btn--sm { padding: .8em 1.25em; font-size: .75rem; }
.btn--lg { padding: 1.2em 2.1em; font-size: .875rem; }
.btn--block { width: 100%; justify-content: center; }

.btn--accent { background: var(--accent-grad); color: #fff; box-shadow: var(--sh-accent); }
.btn--accent::before {                /* gradient slide on hover */
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  transition: opacity var(--t) var(--ease);
}
.btn--accent:hover {
  transform: translateY(-3px); box-shadow: 0 22px 60px -16px rgba(229, 9, 20, .75);
}
.btn--accent:hover::before { opacity: 1; }

.btn--ghost { border-color: var(--line-2); color: var(--white); background: var(--glass); }
.btn--ghost::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--white); transform: translateY(101%);
  transition: transform .48s var(--ease);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--white); transform: translateY(-3px); }
.btn--ghost:hover::before { transform: none; }

.btn--solid { background: var(--white); color: var(--ink); }
.btn--solid:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -18px rgba(255,255,255,.4); }

.btn--line {
  border-color: var(--line-2); color: var(--sub); background: transparent;
}
.btn--line:hover { color: var(--white); border-color: var(--white); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); position: relative; padding-bottom: .35rem;
  max-width: 100%; overflow-wrap: anywhere;   /* a long email address must break, not run out of its card */
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--line-2);
}
.tlink::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 1;
  transition: transform .45s var(--ease);
}
.tlink:hover::before { transform: scaleX(1); }
.tlink svg { transition: transform var(--t) var(--ease); }
.tlink:hover svg { transform: translate(3px, -3px); }

/* ===== 11. Hero ======================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-top: calc(var(--head-h) + 2rem); padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img, .hero__media .pic {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__media video { filter: saturate(.72) contrast(1.06) brightness(.66); }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.28) 34%, rgba(10,10,10,.94) 100%),
    radial-gradient(70% 90% at 18% 90%, rgba(229,9,20,.24), transparent 60%);
}
.hero__scrim::after {                 /* fine scanline texture */
  content: ''; position: absolute; inset: 0; opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px);
}
.hero__in { position: relative; width: 100%; }
.hero h1 { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.hero h1 .ln { display: block; }
.hero__lead { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.hero__bar {
  margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
.hero__video-btn {
  display: inline-flex; align-items: center; gap: .8rem; color: var(--white);
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.hero__video-btn i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--glass);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.hero__video-btn:hover i { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }

/* page hero (inner pages) */
.phero {
  position: relative; padding-top: calc(var(--head-h) + clamp(3.5rem, 9vw, 8rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem); overflow: hidden; isolation: isolate;
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg .pic, .phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.88), rgba(10,10,10,.7) 40%, var(--ink) 100%);
}
.phero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .75rem; color: var(--sub-dim); margin-bottom: 1.2rem; }
.crumbs a { color: var(--sub); transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--accent-txt); }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: '/'; color: var(--sub-dim); }
.crumbs [aria-current] { color: var(--text); }

/* ===== 12. Cards ======================================================= */
/* stat */
.stat { position: relative; }
.stat__n {
  font-family: 'Bebas Neue', sans-serif; line-height: .85;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); color: var(--white);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline;
}
.stat__n em { font-style: normal; color: var(--accent); }
.stat__l {
  margin-top: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: var(--text);
}
.stat__note { font-size: .8125rem; color: var(--sub); margin-top: .15rem; }

/* programme card */
.prog { display: block; position: relative; }
.prog__media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.prog__media .pic { aspect-ratio: 4 / 5; }
/* Stock frames vary wildly in exposure — a daylight cardio deck next to a
   near-black weight room reads as two different sites. Pull every card to the
   same level at rest, and let hover brighten it back. */
.prog__media img {
  filter: brightness(.8) saturate(.9) contrast(1.04);
  transition: transform 1.1s var(--ease), filter .6s ease;
}
.prog:hover .prog__media img,
.prog:focus-visible .prog__media img { transform: scale(1.07); filter: none; }
.prog__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%,
              rgba(10, 10, 10, .1) 34%, rgba(10, 10, 10, .95) 100%);
}
.prog__n {
  position: absolute; top: 1rem; left: 1.15rem; z-index: 2;
  font-family: 'Bebas Neue', sans-serif; font-size: .9rem; letter-spacing: .18em;
  color: rgba(255, 255, 255, .55);
}
.prog__ic {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: rgba(10,10,10,.5); color: var(--white);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.prog:hover .prog__ic { background: var(--accent); border-color: var(--accent); transform: rotate(-8deg) scale(1.06); }
.prog__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.1rem, 2vw, 1.6rem); }
.prog__t { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--white); }
.prog__s { font-size: .875rem; color: var(--sub); margin-top: .35rem; max-width: 32ch; }
.prog__meta {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem;
  /* keep the chips clear of the round arrow button pinned bottom-right */
  padding-right: calc(44px + .5rem);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);
}
.prog:hover .prog__meta, .prog:focus-visible .prog__meta { max-height: 84px; opacity: 1; }
.prog__go {
  position: absolute; bottom: clamp(1.1rem, 2vw, 1.6rem); right: clamp(1.1rem, 2vw, 1.6rem);
  z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--ink);
  opacity: 0; transform: scale(.6) rotate(-30deg);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.prog:hover .prog__go, .prog:focus-visible .prog__go { opacity: 1; transform: none; }

/* coach card */
.coach { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3); }
.coach__media { position: relative; }
.coach__media .pic { aspect-ratio: 3 / 4; }
.coach__media img {
  transition: transform 1s var(--ease), filter .6s ease;
  filter: grayscale(1) contrast(1.05) brightness(.86);
}
.coach:hover .coach__media img { transform: scale(1.05); filter: grayscale(0) contrast(1.02) brightness(1); }
.coach__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(10,10,10,.94));
}
.coach__yrs {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
}
.coach__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1rem, 2vw, 1.4rem); }
.coach__n { font-size: clamp(1.35rem, 2vw, 1.75rem); color: var(--white); }
.coach__r {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-txt); font-weight: 600; margin-top: .3rem;
}
.coach__q {
  font-size: .875rem; color: var(--sub); line-height: 1.5; margin-top: .6rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin-top .55s var(--ease);
}
.coach:hover .coach__q, .coach:focus-within .coach__q { max-height: 90px; opacity: 1; }
.coach__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.coach__soc {
  position: absolute; top: .9rem; right: .9rem; z-index: 3; display: grid; gap: .4rem;
}
.coach__soc a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 10, 10, .55); border: 1px solid var(--line-2); color: var(--white);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateX(12px);
  transition: all var(--t) var(--ease);
}
.coach:hover .coach__soc a, .coach:focus-within .coach__soc a { opacity: 1; transform: none; }
.coach__soc a:nth-child(2) { transition-delay: .06s; }
.coach__soc a:nth-child(3) { transition-delay: .12s; }
.coach__soc a:hover { background: var(--accent); border-color: var(--accent); }

/* feature card */
.feat { padding: clamp(1.4rem, 2.4vw, 2.1rem); }
.feat__ic {
  width: 52px; height: 52px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-txt); border: 1px solid rgba(229,9,20,.3);
  margin-bottom: 1.1rem; transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.card:hover .feat__ic { transform: translateY(-3px) rotate(-6deg); background: var(--accent); color: #fff; }
.feat h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-bottom: .5rem; }
.feat > .d4 + h3 { margin-top: .45rem; }   /* numbered steps: the "01" sat right on top of its title */
.feat p { font-size: .9375rem; color: var(--sub); }

/* plan card */
.plan { padding: clamp(1.5rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; }
.plan--pop {
  border-color: rgba(229, 9, 20, .42);
  background: linear-gradient(165deg, rgba(229, 9, 20, .11), rgba(255, 255, 255, .015));
}
.plan__flag {
  position: absolute; top: 0; right: clamp(1.2rem, 2vw, 2rem);
  padding: .4em .8em .5em; border-radius: 0 0 var(--r-xs) var(--r-xs);
  background: var(--accent-grad); color: #fff;
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.plan__n { font-size: clamp(1.6rem, 2.2vw, 2rem); }
.plan__for { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sub-dim); margin-top: .3rem; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin: 1.1rem 0 .3rem; }
.plan__cur { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--sub); }
.plan__v {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 5vw, 4rem); line-height: .84;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.plan__per { font-size: .8125rem; color: var(--sub); }
.plan__save { font-size: .75rem; color: var(--accent-txt); font-weight: 600; min-height: 1.2em; }
/* Four plan cards side by side leave ~195px for the button: "CHOOSE PERFORMANCE" plus its
   arrow does not fit on one line there and was being clipped by .btn's overflow:hidden.
   Let the label wrap, and keep every button the same height either way. */
.plan .btn { white-space: normal; justify-content: center; text-align: center; line-height: 1.25; min-height: 3.4rem; }
@media (min-width: 1181px) { .plan .btn { min-height: 3.9rem; } }   /* four across: some labels wrap, so make them all the same height */
.plan__save:empty { display: none; }   /* monthly billing has no saving to show: don't leave a hole under the price */
.plan__line { font-size: .9375rem; color: var(--sub); margin: .9rem 0 1.3rem; }
.plan__f { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.plan__f li { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; align-items: start; font-size: .875rem; line-height: 1.5; }
.plan__f svg { margin-top: .18rem; }
.plan__f .yes { color: var(--accent-txt); }
.plan__f .no { color: var(--sub-dim); }
.plan__f li.off { color: var(--sub-dim); }
.plan .btn { margin-top: auto; }

/* toggle */
.toggle {
  display: inline-flex; padding: 4px; border-radius: var(--r-pill);
  background: var(--ink-3); border: 1px solid var(--line); position: relative;
}
.toggle__pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: var(--r-pill);
  background: var(--accent-grad); box-shadow: var(--sh-accent);
  transition: transform .48s var(--ease), width .48s var(--ease);
}
.toggle button {
  position: relative; z-index: 2; padding: .7em 1.3em; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sub); transition: color var(--t) var(--ease); white-space: nowrap;
}
.toggle button[aria-pressed="true"] { color: #fff; }
.toggle__note { font-size: .8125rem; color: var(--sub); }

/* post card */
.post { display: flex; flex-direction: column; height: 100%; }
.post__media { position: relative; overflow: hidden; }
.post__media .pic { aspect-ratio: 16 / 10; }
.post__media img { transition: transform 1.1s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__cat { position: absolute; bottom: .8rem; left: .8rem; z-index: 2; }
.post__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.post__meta {
  display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .75rem; color: var(--sub-dim);
  margin-bottom: .7rem;
}
.post__t { font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--white); }
.post a.post__t:hover { color: var(--accent-txt); }
.post__x { font-size: .9375rem; color: var(--sub); margin-top: .55rem; }
.post__foot { margin-top: auto; padding-top: 1.1rem; }
.post--wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.post--wide .post__media .pic { aspect-ratio: auto; height: 100%; min-height: 320px; }
.post--wide .post__body { padding: clamp(1.5rem, 3vw, 2.6rem); justify-content: center; }

/* testimonial */
.quote { padding: clamp(1.5rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; height: 100%; }
.quote__ic { color: var(--accent); opacity: .5; margin-bottom: 1rem; }
.quote__t { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.62; color: var(--text); }
.quote__foot {
  margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line);
}
.quote__who { font-weight: 600; font-size: .9375rem; }
.quote__role { font-size: .8125rem; color: var(--sub-dim); }

/* timeline */
.tl { position: relative; padding-left: clamp(2rem, 5vw, 4rem); }
.tl::before {
  content: ''; position: absolute; left: clamp(.5rem, 1.4vw, 1.1rem); top: .6rem; bottom: .6rem;
  width: 1px; background: linear-gradient(180deg, var(--accent), var(--line) 45%, transparent);
}
.tl__i { position: relative; padding-bottom: clamp(2rem, 4vw, 3.2rem); }
.tl__i:last-child { padding-bottom: 0; }
.tl__dot {
  position: absolute; left: calc(clamp(2rem, 5vw, 4rem) * -1 + clamp(.5rem, 1.4vw, 1.1rem) - 5px);
  top: .55rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, .16);
}
.tl__y {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--accent-txt); line-height: 1;
}
.tl__t { font-size: clamp(1.2rem, 1.8vw, 1.55rem); margin: .35rem 0 .5rem; }
.tl__x { color: var(--sub); font-size: .9375rem; max-width: 56ch; }

/* awards list */
.awards { border-top: 1px solid var(--line); }
.awards li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem;
  align-items: center; padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line); position: relative;
  transition: padding-left var(--t) var(--ease);
}
.awards li::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .45s var(--ease);
}
.awards li:hover { padding-left: 1.1rem; }
.awards li:hover::before { transform: scaleY(1); }
.awards__y { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; color: var(--sub-dim); }
.awards__n { font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.awards__b { font-size: .8125rem; color: var(--sub); text-align: right; }

/* ===== 13. Sliders, tabs, filters, accordion ========================== */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .62em 1.15em; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--glass); color: var(--sub);
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chip:hover { color: var(--white); border-color: var(--line-2); transform: translateY(-2px); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--accent-grad); border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px -12px rgba(229, 9, 20, .7);
}
.chip__c { opacity: .6; margin-left: .3em; font-variant-numeric: tabular-nums; }

/* filterable grid item states */
.js [data-item] {
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
[data-item].hide { display: none; }
.js [data-item].fade { opacity: 0; transform: scale(.96) translateY(10px); }

/* drag slider */
.slider { position: relative; }
.slider__vp { overflow: hidden; cursor: grab; }
.slider__vp.dragging { cursor: grabbing; }
.slider__track {
  display: flex; gap: var(--gap); will-change: transform;
  transition: transform .7s var(--ease);
}
.slider__track.nosnap { transition: none; }
.slider__s { flex: 0 0 auto; width: min(420px, 82vw); }
.slider__nav { display: flex; gap: .5rem; }
.sbtn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--white); background: var(--glass);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease),
              opacity var(--t) var(--ease), border-color var(--t) var(--ease);
}
.sbtn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.sbtn[disabled] { opacity: .3; pointer-events: none; }
/* the visible dot is a pseudo-element; the button itself is a 24x32 touch target */
.slider__dots { display: flex; align-items: center; }
.slider__dots button {
  position: relative; width: 24px; height: 32px; background: none;
  transition: width var(--t) var(--ease);
}
.slider__dots button::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-radius: 99px; background: var(--line-2); transform: translate(-50%, -50%);
  transition: width var(--t) var(--ease), background var(--t) var(--ease);
}
.slider__dots button[aria-current="true"] { width: 36px; }
.slider__dots button[aria-current="true"]::before { width: 26px; background: var(--accent); }

/* horizontal scroll rail (pinned by GSAP when available, native scroll otherwise) */
.rail { position: relative; }
.rail__vp { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.rail__vp::-webkit-scrollbar { display: none; }
.rail__track {
  display: flex; gap: var(--gap); padding-inline: var(--pad); width: max-content;
}
.rail__c { flex: 0 0 auto; width: min(380px, 78vw); }
.pinned .rail__vp { overflow: visible; }
.pinned .rail__track { will-change: transform; }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; gap: 1rem; text-align: left;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; color: var(--text);
  transition: color var(--t) var(--ease);
}
.acc__btn:hover { color: var(--white); }
.acc__q {
  flex: 1; font-family: 'Bebas Neue', sans-serif; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: .03em; line-height: 1.12;
}
.acc__ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid;
  place-items: center; border: 1px solid var(--line-2); color: var(--white);
  position: relative; transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.acc__ic i {
  position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s ease;
}
.acc__ic i:first-child { width: 12px; height: 1.5px; }
.acc__ic i:last-child { width: 1.5px; height: 12px; }
.acc__btn[aria-expanded="true"] .acc__ic { background: var(--accent); border-color: var(--accent); }
.acc__btn[aria-expanded="true"] .acc__ic i:last-child { transform: rotate(90deg); opacity: 0; }
.acc__p {
  overflow: hidden; height: 0;
  transition: height .5s var(--ease);
}
.acc__p > div {
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); padding-right: clamp(0rem, 6vw, 4rem);
  color: var(--sub); font-size: .9375rem;
}
.no-js .acc__p { height: auto; }

/* schedule table */
.sched { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.sched table { min-width: 780px; }
.sched th, .sched td { padding: .9rem 1rem; text-align: left; font-size: .875rem; }
.sched thead th {
  font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .12em;
  color: var(--sub); background: var(--ink-3); position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line);
}
.sched tbody tr { border-bottom: 1px solid var(--line); transition: background var(--t-fast) ease; }
.sched tbody tr:last-child { border-bottom: 0; }
.sched tbody tr:hover { background: var(--glass); }
.sched__t { font-variant-numeric: tabular-nums; color: var(--white); font-weight: 600; }
.sched__n { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: .04em; }
.sched__book {
  padding: .45em .9em; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.sched__book:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* intensity meter */
.meter { display: inline-flex; gap: 3px; align-items: center; }
.meter i {
  width: 5px; height: 14px; border-radius: 2px; background: var(--line-2);
}
.meter i.on { background: var(--accent); }

/* progress bar (skills) */
.bar { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar__f {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--accent-grad);
  transition: width 1.3s var(--ease);
}
.skill { display: grid; gap: .45rem; }
.skill__top { display: flex; justify-content: space-between; font-size: .8125rem; }
.skill__v { color: var(--sub); font-variant-numeric: tabular-nums; }

/* ===== 14. Lightbox, modal, compare, toast ============================ */
.lb, .modal { position: fixed; inset: 0; z-index: 600; display: grid; }
.lb[hidden], .modal[hidden] { display: none; }
.lb__bg, .modal__bg {
  position: absolute; inset: 0; background: rgba(6, 6, 6, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.lb.open .lb__bg, .modal.open .modal__bg { opacity: 1; }
.lb__fig {
  position: relative; z-index: 2; place-self: center; max-width: min(1180px, 92vw);
  max-height: 88vh; display: grid; gap: .9rem;
  opacity: 0; transform: scale(.94); transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.lb.open .lb__fig { opacity: 1; transform: none; }
.lb__fig img {
  max-height: 76vh; width: auto; margin-inline: auto; border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.lb__cap { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.lb__cap p { font-size: .9375rem; color: var(--text); }
.lb__count { font-size: .8125rem; color: var(--sub-dim); font-variant-numeric: tabular-nums; }
.lb__x, .lb__prev, .lb__next {
  position: absolute; z-index: 3; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  background: var(--glass-2); border: 1px solid var(--line-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.lb__x:hover, .lb__prev:hover, .lb__next:hover { background: var(--accent); border-color: var(--accent); }
.lb__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__x:hover { transform: rotate(90deg); }
.lb__prev { left: clamp(.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(.6rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }

.modal__panel {
  position: relative; z-index: 2; place-self: center; width: min(680px, 92vw);
  max-height: 88vh; overflow-y: auto; border-radius: var(--r-xl);
  background: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(24px) scale(.97);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.modal.open .modal__panel { opacity: 1; transform: none; }
.modal__x {
  position: absolute; top: 1rem; right: 1rem; z-index: 4; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center; color: var(--white);
  background: rgba(10, 10, 10, .6); border: 1px solid var(--line-2);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.modal__x:hover { background: var(--accent); transform: rotate(90deg); }
.modal__media .pic { aspect-ratio: 16 / 9; }
.modal__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
.modal__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.modal__k { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sub-dim); }
.modal__v { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; margin-top: .2rem; }

/* video modal */
.modal--video .modal__panel { width: min(1100px, 94vw); background: #000; }
.modal--video video { width: 100%; height: auto; display: block; }

/* before / after compare */
.cmp {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 5; touch-action: pan-y; user-select: none; background: var(--ink-3);
}
.cmp__a, .cmp__b { position: absolute; inset: 0; }
.cmp__a img, .cmp__b img { width: 100%; height: 100%; object-fit: cover; }
.cmp__b { clip-path: inset(0 0 0 var(--p, 50%)); }
.cmp__lab {
  position: absolute; bottom: .9rem; z-index: 3; pointer-events: none;
}
.cmp__lab--a { left: .9rem; }
.cmp__lab--b { right: .9rem; }
.cmp__line {
  position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 2px; z-index: 4;
  background: var(--white); transform: translateX(-50%);
  box-shadow: 0 0 24px rgba(0, 0, 0, .8);
}
.cmp__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--ink); box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
  cursor: ew-resize;
}
.cmp__grip svg:first-child { margin-right: -6px; }
.cmp__grip svg:last-child { margin-left: -6px; }
.cmp__grip:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.cmp__range {
  position: absolute; inset: 0; z-index: 5; opacity: 0; width: 100%; height: 100%;
  cursor: ew-resize; margin: 0;
}

/* toast */
.toasts {
  position: fixed; z-index: 700; bottom: clamp(1rem, 3vw, 2rem); left: 50%;
  transform: translateX(-50%); display: grid; gap: .5rem; width: min(420px, 92vw);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  background: rgba(23, 23, 26, .96); border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg); font-size: .875rem; color: var(--text);
  transform: translateY(20px); opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
  pointer-events: auto;
}
.toast.on { transform: none; opacity: 1; }
.toast__ic { color: var(--accent-txt); flex: none; }
.toast--ok .toast__ic { color: #34d399; }

/* ===== 15. Forms ====================================================== */
.field { display: grid; gap: .45rem; position: relative; }
.field label {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sub);
}
.field label .req { color: var(--accent-txt); }
.input, .field input, .field select, .field textarea {
  width: 100%; padding: .95em 1.1em; border-radius: var(--r-sm);
  background: var(--ink-3); border: 1px solid var(--line); color: var(--text);
  font-size: .9375rem; transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  appearance: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); background: var(--ink-4);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, .13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--sub-dim); }
.field .err {
  font-size: .8125rem; color: #FF6B5A; display: none; align-items: center; gap: .35rem;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #FF4B3A; }
.field.invalid .err { display: flex; }
.field.valid input, .field.valid select, .field.valid textarea { border-color: rgba(52, 211, 153, .5); }
.field__hint { font-size: .8125rem; color: var(--sub-dim); }
/* the global `svg { display: block }` would put a leading icon on a line of its own */
.field__hint > svg:first-child { display: inline-block; vertical-align: -.2em; margin-right: .4em; }

/* `.field label` is an uppercase, letter-spaced micro-label. A consent
   checkbox is a full sentence and must not inherit that. */
.check, .field label.check {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .875rem; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none;
  color: var(--sub); cursor: pointer;
}
.check input { appearance: none; width: 20px; height: 20px; flex: none; margin-top: .12rem;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--ink-3);
  display: grid; place-items: center; transition: all var(--t) var(--ease); }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after {
  content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 2px; }

.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radios label {
  padding: .62em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--glass); font-size: .8125rem; letter-spacing: .04em; text-transform: none;
  cursor: pointer; color: var(--sub); transition: all var(--t-fast) var(--ease);
}
.radios input { position: absolute; opacity: 0; width: 0; height: 0; }
.radios input:checked + span, .radios label:has(input:checked) {
  background: var(--accent-grad); border-color: transparent; color: #fff;
}
.radios label:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* range slider */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 99px; background: var(--line-2); outline: 0; margin: 1rem 0; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, .2); cursor: grab;
}
.range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--ink); cursor: grab;
}

/* calculator result dial */
.dial { position: relative; display: grid; place-items: center; }
.dial svg { transform: rotate(-90deg); }
.dial__ring { fill: none; stroke: var(--line); stroke-width: 10; }
.dial__val {
  fill: none; stroke: url(#dialGrad); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.dial__mid { position: absolute; text-align: center; }
.dial__n {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: .9; color: var(--white); font-variant-numeric: tabular-nums;
}
.dial__k { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }

.readout { display: grid; gap: .8rem; }
.readout__i {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.readout__k { font-size: .875rem; color: var(--sub); }
.readout__v {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.scale-bar {
  display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin-top: 1.2rem;
  position: relative; background: var(--ink-3);
}
.scale-bar i { flex: 1; }
.scale-bar i:nth-child(1) { background: #3b82f6; flex: 1.85; }
.scale-bar i:nth-child(2) { background: #34d399; flex: 2.5; }
.scale-bar i:nth-child(3) { background: #fbbf24; flex: 1.5; }
.scale-bar i:nth-child(4) { background: var(--accent); flex: 2; }
.scale-bar__pin {
  position: absolute; top: -5px; width: 3px; height: 20px; background: #fff;
  border-radius: 2px; box-shadow: 0 0 10px rgba(0,0,0,.7);
  left: 0; transition: left .9s var(--ease);
}
.scale-keys { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--sub-dim); margin-top: .5rem; }

/* macro donut legend */
.macro { display: grid; gap: .6rem; }
.macro__i { display: grid; grid-template-columns: 12px 1fr auto; gap: .7rem; align-items: center; font-size: .875rem; }
.macro__sw { width: 12px; height: 12px; border-radius: 3px; }
.macro__v { font-variant-numeric: tabular-nums; color: var(--white); font-weight: 600; }

/* ===== 16. Tables ===================================================== */
/* position:relative so the absolutely-positioned .sr labels inside cells are
   clipped by this scroller instead of widening the page on phones */
.tbl { position: relative; width: 100%; overflow-x: auto; }
.tbl table { min-width: 720px; }
.tbl th, .tbl td { padding: 1rem; text-align: left; font-size: .875rem; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 1.15rem;
  color: var(--white); vertical-align: bottom;
}
.tbl thead th small { display: block; font-family: 'Inter', sans-serif; font-size: .75rem;
  letter-spacing: 0; color: var(--sub); text-transform: none; margin-top: .2rem; }
.tbl tbody tr:hover { background: var(--glass); }
.tbl td:not(:first-child) { text-align: center; }
.tbl th:not(:first-child) { text-align: center; }
.tbl .yes { color: var(--accent-txt); }
.tbl .no { color: var(--sub-dim); }
.tbl .val { font-weight: 600; color: var(--white); }
.tbl col.hot { background: rgba(229, 9, 20, .06); }

/* ===== 17. Page blocks ================================================ */
/* split feature band */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 5rem); align-items: center;
}
.split--rev > *:first-child { order: 2; }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.split__media .pic { aspect-ratio: 4 / 3; }
.split__badge {
  position: absolute; bottom: clamp(1rem, 2vw, 1.6rem); left: clamp(1rem, 2vw, 1.6rem);
  z-index: 2; padding: 1rem 1.2rem; border-radius: var(--r-md);
  background: rgba(10, 10, 10, .72); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.split__badge b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 1; }
.split__badge > span { font-size: .75rem; color: var(--sub); letter-spacing: .1em; text-transform: uppercase; }

/* video band */
.vband { position: relative; overflow: hidden; isolation: isolate; }
.vband__media { position: absolute; inset: 0; z-index: -2; }
.vband__media video, .vband__media img { width: 100%; height: 100%; object-fit: cover; }
.vband__media video { filter: brightness(.5) saturate(.8); }
.vband::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,.86) 100%);
}
.vband__in { padding-block: clamp(5rem, 12vw, 9rem); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-2); }
.cta-band__in { position: relative; z-index: 2; padding-block: clamp(4.5rem, 11vw, 8.5rem); text-align: center; }
.cta-band h2 { margin-bottom: .5em; }

/* Masonry.
   A CSS-grid version using `grid-auto-rows: 12px` plus row spans was the first
   attempt and it does not survive contact with a fluid gap: the height of a
   span-N tile is N*rowHeight + (N-1)*gap, so the gap dominates and tiles come
   out as 261x909 slivers at desktop widths. Multi-column packs true masonry,
   needs no arithmetic, and the tile height follows the image's aspect-ratio at
   every breakpoint. */
.mason { column-count: 4; column-gap: var(--gap); }
.mason__i {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: block; width: 100%; margin: 0 0 var(--gap);
  position: relative; border-radius: var(--r-md); overflow: hidden;
}
.mason__i > button, .mason__i > .pic { display: block; width: 100%; padding: 0; }
.mason__i .pic { aspect-ratio: 4 / 5; }
.mason__i.wide .pic { aspect-ratio: 3 / 2; }
.mason__i.tall .pic { aspect-ratio: 2 / 3; }
.mason__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s ease; }
.mason__i:hover img { transform: scale(1.08); }
.mason__i::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.9));
  transition: opacity var(--t) var(--ease); pointer-events: none;
}
.mason__i:hover::after, .mason__i:focus-within::after { opacity: 1; }
.mason__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  font-size: .875rem; color: #fff; text-align: left;
}
.mason__i:hover .mason__cap, .mason__i:focus-within .mason__cap { opacity: 1; transform: none; }
.mason__zoom { flex: none; color: rgba(255,255,255,.75); }

/* instagram strip */
.ig { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.ig__i { position: relative; aspect-ratio: 1; overflow: hidden; }
.ig__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ig__i:hover img { transform: scale(1.12); }
.ig__i::after {
  content: ''; position: absolute; inset: 0; background: rgba(229, 9, 20, .5);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.ig__i:hover::after { opacity: 1; }
.ig__meta {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  color: #fff; font-size: .8125rem; font-weight: 600; opacity: 0; transform: scale(.8);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.ig__i:hover .ig__meta { opacity: 1; transform: none; }

/* phone mock (app promo) */
.phone {
  position: relative; width: min(320px, 74vw); margin-inline: auto;
  border-radius: 42px; padding: 12px; background: #16161a;
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.phone__screen {
  position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 9 / 19.5;
  background: #000;
}
.phone__screen video, .phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phone__notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 78px; height: 20px; border-radius: 99px; background: #000;
}
.phone__ui {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  justify-content: space-between; padding: 2.6rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(10,10,10,.75) 0%, transparent 30%, rgba(10,10,10,.9) 100%);
}
.phone__row {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem;
  border-radius: 14px; background: rgba(20, 20, 22, .82); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .75rem;
}
.phone__row b { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .04em; }
.phone__row span:not(.phone__pill) { color: var(--sub); }
.phone__pill {
  margin-left: auto; padding: .2em .6em; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: .625rem; font-weight: 700;
  letter-spacing: .08em;
}
.phone__stack { display: grid; gap: .5rem; }

/* clubs list */
.club {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem;
  align-items: start; padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
  border-bottom: 1px solid var(--line); position: relative;
}
.club:first-child { border-top: 1px solid var(--line); }
.club__n {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1; color: var(--white);
}
.club__role { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-txt); }
.club__addr { font-size: .875rem; color: var(--sub); margin-top: .5rem; }
.club__addr .mono { display: inline-block; white-space: nowrap; }   /* coordinates wrap as one unit, not mid-number */
.club__x { font-size: .9375rem; color: var(--sub); margin-top: .6rem; max-width: 54ch; }
.club__i {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--accent-txt); flex: none;
}

/* map placeholder */
.map {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--ink-3); border: 1px solid var(--line);
}
.map__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.map__roads { position: absolute; inset: 0; }
.map__pin {
  position: absolute; transform: translate(-50%, -100%); z-index: 3;
  display: grid; justify-items: center; gap: .3rem; color: var(--white);
}
.map__pin i {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(45deg);
  background: var(--accent-grad); box-shadow: var(--sh-accent); display: block;
}
.map__pin b {
  font-family: 'Bebas Neue', sans-serif; font-size: .8125rem; letter-spacing: .1em;
  padding: .2em .6em; border-radius: 99px; background: rgba(10,10,10,.85);
  border: 1px solid var(--line-2); white-space: nowrap;
}
.map__pin--main i { animation: pin-pulse 2.4s ease-in-out infinite; }
@keyframes pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, .55); }
  60% { box-shadow: 0 0 0 18px rgba(229, 9, 20, 0); }
}
.map__note {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 4; max-width: 68%;
}
/* on a phone the 16:10 frame is so short the top pin's label pokes out of it and the
   right-hand pin's label touches the border */
@media (max-width: 560px) {
  .map { aspect-ratio: 4 / 3; }
  .map__pin[style*="left:84%"] { left: 76% !important; }
}

/* transformation block */
.trans { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.trans .sub { max-width: 68ch; }   /* once the layout stacks, keep the line length readable */
.trans__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.trans__m { padding: 1rem; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); }
.trans__mv { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--accent-txt); line-height: 1; }
.trans__mk { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sub-dim); margin-top: .3rem; }
.disclosure {
  font-size: .75rem; color: var(--sub-dim); display: flex; gap: .5rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--glass);
  border: 1px dashed var(--line-2);
}

/* article body */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: clamp(2rem, 4vw, 3rem) 0 .7rem; }
.prose h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 1.8rem 0 .5rem; }
.prose p, .prose ul, .prose ol { color: var(--sub); }
.prose p + p { margin-top: 1.1em; }
.prose ul, .prose ol { margin: 1rem 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.1rem; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 2px; background: var(--accent);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--accent-txt); font-weight: 600; }
.prose blockquote {
  margin: 2rem 0; padding: 1.4rem 1.6rem; border-left: 2px solid var(--accent);
  background: var(--glass); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose blockquote p { color: var(--text); font-size: 1.0625rem; }
.prose a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 3px; }
.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: .8125rem; color: var(--sub-dim); margin-top: .6rem; }
.prose strong { color: var(--white); }

.toc { position: sticky; top: calc(var(--head-h) + 1.5rem); }
.toc ol { display: grid; gap: .55rem; counter-reset: t; }
/* scoped to the list: the share icons below it are links inside .toc too */
.toc ol a {
  display: flex; gap: .7rem; font-size: .875rem; color: var(--sub);
  padding: .35rem 0; transition: color var(--t-fast) var(--ease);
}
.toc ol a::before {
  counter-increment: t; content: '0' counter(t); color: var(--sub-dim);
  font-size: .75rem; font-variant-numeric: tabular-nums;
}
.toc ol a:hover, .toc ol a.on { color: var(--white); }
.toc ol a.on::before { color: var(--accent-txt); }

/* author box */
.author {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem;
  align-items: center; padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.author .pic { width: 76px; height: 76px; border-radius: 50%; }
.author__n { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: .04em; }
.author__r { font-size: .8125rem; color: var(--accent-txt); }
.author__x { font-size: .875rem; color: var(--sub); margin-top: .4rem; }

/* event card */
.event { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; padding: clamp(1.2rem, 2.4vw, 1.7rem); }
.event__date {
  text-align: center; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid rgba(229, 9, 20, .3); align-self: start;
}
.event__d { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: .9; color: var(--white); }
.event__m { font-size: .6875rem; letter-spacing: .16em; color: var(--accent-txt); font-weight: 700; }
.event__n { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.event__x { font-size: .9375rem; color: var(--sub); margin: .5rem 0 .9rem; }

/* pillars (nutrition) */
.pillar { padding: clamp(1.4rem, 2.4vw, 2rem); text-align: center; }
/* .pillar p (below) would win on specificity and shrink the figure to body size */
.pillar .pillar__fig {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: .9; color: var(--white);
}
.pillar .pillar__unit { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-txt); }
.pillar h3 { font-size: 1.3rem; margin: 1rem 0 .5rem; }
.pillar p { font-size: .9375rem; color: var(--sub); }
.pillar .feat__ic { margin-inline: auto; }

/* menu list (fuel) */
.menu-l { border-top: 1px solid var(--line); }
.menu-l li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem 1.5rem;
  align-items: baseline; padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--line); transition: padding-left var(--t) var(--ease);
}
.menu-l li:hover { padding-left: .8rem; }
.menu-l__n { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.2rem, 1.9vw, 1.55rem); letter-spacing: .03em; }
.menu-l__d { grid-column: 1; font-size: .875rem; color: var(--sub); }
.menu-l__p { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; color: var(--accent-txt); }
.menu-l__m { font-size: .75rem; color: var(--sub-dim); letter-spacing: .06em; }

/* meal plan timeline */
.meal { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 1.2rem;
  align-items: center; padding: clamp(.9rem, 1.8vw, 1.3rem) 0; border-bottom: 1px solid var(--line); }
.meal:first-child { border-top: 1px solid var(--line); }
.meal__t { font-variant-numeric: tabular-nums; color: var(--accent-txt); font-weight: 600; font-size: .875rem; }
.meal .pic { width: 72px; height: 56px; border-radius: var(--r-xs); }
.meal__n { font-weight: 600; font-size: .9375rem; }
.meal__d { font-size: .875rem; color: var(--sub); }
.meal__m { font-size: .75rem; color: var(--sub-dim); letter-spacing: .04em; white-space: nowrap; }

/* 404 */
.e404 {
  min-height: 100svh; display: grid; place-items: center;
  position: relative; overflow: hidden; text-align: center;
  /* the header is fixed, so the centred block has to clear it */
  padding: calc(var(--head-h) + 2rem) 0 clamp(2rem, 6vw, 4rem);
}
.e404__n {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(8rem, 30vw, 22rem);
  line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .18);
  position: relative;
}
.e404__n span {
  position: absolute; inset: 0; -webkit-text-stroke: 0;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  clip-path: inset(46% 0 0 0);
}
.e404__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* legal pages */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* the sidebar must be as tall as the article, or the sticky contents inside it has nowhere to travel */
.legal > aside { align-self: stretch; }
.legal__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8125rem; color: var(--sub-dim); margin-bottom: 2rem; }

/* newsletter */
/* Label, input and button share one grid: the button sits in the input's row,
   so it is exactly as tall as the input, and a validation message drops to a
   row of its own instead of stretching the button. */
.news-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .45rem; }
.news-form .field { display: contents; }
.news-form .field > label { grid-area: 1 / 1; }
.news-form .field > input { grid-area: 2 / 1; }
.news-form .field > .err { grid-area: 3 / 1; }
.news-form .btn { grid-area: 2 / 2; }

/* ===== 18. Footer ===================================================== */
.foot { position: relative; padding-top: clamp(3.5rem, 8vw, 6rem); background: var(--ink-2); overflow: hidden; }
.foot__glow {
  position: absolute; inset: auto 0 -40% 0; height: 70%; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(229, 9, 20, .18), transparent 70%);
}
.foot__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .8fr)) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 2;
}
.foot__pitch { color: var(--sub); font-size: .9375rem; max-width: 34ch; margin: 1rem 0 1.5rem; }
.foot__h {
  font-size: 1.15rem; letter-spacing: .1em; color: var(--white); margin-bottom: 1.1rem;
}
.foot__col ul { display: grid; gap: .6rem; }
.foot__col a {
  font-size: .9375rem; color: var(--sub); position: relative; display: inline-block;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.foot__col a:hover { color: var(--white); transform: translateX(3px); }
.foot__hours { display: grid; gap: .5rem; }
.foot__hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.foot__hours span:first-child { color: var(--sub); }
.foot__hours span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.foot__note { font-size: .8125rem; color: var(--sub-dim); margin-top: 1rem; }
.foot__mid {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0; border-top: 1px solid var(--line);
  position: relative; z-index: 2;
}
.foot__addr, .foot__link { display: flex; gap: .6rem; align-items: center; font-size: .9375rem; color: var(--sub); }
.foot__addr svg, .foot__link svg { color: var(--accent-txt); flex: none; }
.foot__link { transition: color var(--t-fast) var(--ease); }
.foot__link:hover { color: var(--white); }
.foot__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.6rem) 0; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--sub-dim); position: relative; z-index: 2;
}
.foot__legal { display: flex; gap: 1.4rem; }
.foot__legal a:hover { color: var(--white); }

/* ===== Reduced motion ================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal--l, .js .reveal--r, .js .reveal--s {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .js .mask-rise, .js .mask-wipe { clip-path: none !important; }
  .js .sw__i, .js .sl__i, .js .sc__i { transform: none !important; opacity: 1 !important; }
  .loader { display: none !important; }
  .cursor, .cursor-glow { display: none !important; }
  .blob, .mesh, .rule::after { animation: none !important; }
  .marquee__t, .belt__t { animation: none !important; }
  .prog__meta, .coach__q { max-height: none !important; opacity: 1 !important; }
  .coach__soc a { opacity: 1 !important; transform: none !important; }
  .coach__media img { filter: none !important; }
}

/* ===== 19. Print ====================================================== */
@media print {
  .site-head, .sheet, .loader, .cursor, .cursor-glow, .to-top, .progress,
  .marquee, .belt, .foot__glow, .blobs, .mesh { display: none !important; }
  body { background: #fff; color: #111; }
  body::after { display: none; }
  a { color: #111; text-decoration: underline; }
  .card, .glass { border: 1px solid #ccc; background: none; }
  .sec { padding-block: 1.5rem; }
  h1, h2, h3 { color: #000; }
}

@charset "UTF-8";
/* ==========================================================================
   IRONHAUS — responsive layer
   --------------------------------------------------------------------------
   style.css is written mobile-tolerant but desktop-first for the grid-heavy
   blocks, so this file steps those down. Order: ultra-wide, then descending
   max-width breakpoints, then orientation / capability queries.

   Breakpoints
     1920+   ultra-wide      wider gutters, capped measure
     1440+   large desktop   (base)
     1200    laptop
     1080    nav collapses to the sheet menu
     1024    tablet landscape
     880     tablet portrait
     680     mobile
     460     small mobile
     landscape phones, hover-less pointers, high contrast, forced colors
   ========================================================================== */

/* ===== Ultra-wide ======================================================= */
@media (min-width: 1920px) {
  :root { --wrap: 1720px; --pad: 6rem; --sec: 11rem; }
  body { font-size: 1.125rem; }
  .d1 { font-size: 12.5rem; }
  .hero__bar { gap: 3rem; }
  .mason { column-count: 5; }
}

@media (min-width: 2560px) {
  :root { --wrap: 2040px; }
  .ig { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ===== Laptop =========================================================== */
@media (max-width: 1280px) {
  :root { --head-h: 74px; }
  .foot__top {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }
  .foot__col--hours { grid-column: 2 / -1; }
  .foot__hours { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
  .nav__link { padding: .7rem .8rem; font-size: .875rem; }
  .brand__sub { display: none; }
}

@media (max-width: 1180px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post--wide { grid-template-columns: 1fr; }
  .post--wide .post__media .pic { min-height: 260px; aspect-ratio: 16 / 9; }
  .legal { grid-template-columns: 1fr; }
  .legal__nav { position: static; }
  .toc { position: static; }
}

/* ===== Nav collapse ===================================================== */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .site-head__in { justify-content: space-between; }
  .site-head__act { margin-left: auto; }
}

/* ===== Tablet landscape ================================================= */
@media (max-width: 1024px) {
  :root { --sec: clamp(4rem, 9vw, 7rem); }
  .sec-head--split { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--rev > *:first-child { order: 0; }
  .split__media .pic { aspect-ratio: 16 / 10; }
  .trans { grid-template-columns: 1fr; }
  .phero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .mason { column-count: 3; }
  .ig { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .modal__panel { width: min(560px, 94vw); }
  .cmp { aspect-ratio: 3 / 4; }
}

/* ===== Tablet portrait ================================================== */
@media (max-width: 880px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col--hours { grid-column: 1 / -1; }
  .club { grid-template-columns: auto minmax(0, 1fr); }
  .club__cta { grid-column: 2; }
  .awards li { grid-template-columns: 4rem minmax(0, 1fr); row-gap: .3rem; }
  .awards__b { grid-column: 2; text-align: left; }
  .meal { grid-template-columns: auto minmax(0, 1fr); row-gap: .4rem; }
  .meal .pic { display: none; }
  .meal__m { grid-column: 2; }
  .author { grid-template-columns: 1fr; }
  .author .pic { width: 64px; height: 64px; }
  .menu-l li { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-l__m { grid-column: 1; }
}

/* ===== Mobile =========================================================== */
@media (max-width: 680px) {
  :root {
    --pad: 1.15rem;
    --sec: clamp(3.25rem, 12vw, 4.75rem);
    --gap: .9rem;
    --head-h: 66px;
    --r-lg: 22px; --r-xl: 26px;
  }
  body { line-height: 1.62; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .lead { font-size: 1rem; }

  .hero { min-height: 92svh; align-items: flex-end; }
  .hero__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .scroll-cue { display: none; }

  .sec-head { margin-bottom: 2rem; }
  .stat__n { font-size: 2.4rem; }

  .mason { column-count: 2; }
  .mason__cap { opacity: 1; transform: none; font-size: .75rem; padding: .7rem .8rem; }
  .mason__i::after { opacity: 1; }

  .ig { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig__i:nth-child(n + 7) { display: none; }

  .prog__media .pic { aspect-ratio: 3 / 4; }
  .prog__meta { max-height: 84px; opacity: 1; margin-top: .7rem; }
  .coach__q { max-height: none; opacity: 1; }
  .coach__soc a { opacity: 1; transform: none; }
  .prog__go { opacity: 1; transform: none; }

  .toggle { width: 100%; }
  .toggle button { flex: 1; padding: .7em .5em; font-size: .6875rem; }

  .tl { padding-left: 1.75rem; }
  .tl::before { left: .3rem; }
  .tl__dot { left: -1.75rem; }

  .trans__metrics { grid-template-columns: 1fr; gap: .6rem; }
  .trans__m { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .trans__mk { margin-top: 0; }

  .lb__prev, .lb__next { width: 42px; height: 42px; }
  .lb__prev { left: .4rem; } .lb__next { right: .4rem; }
  .lb__fig img { max-height: 62vh; }

  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__col--hours { grid-column: 1 / -1; }   /* full row: half a phone is too narrow for "Monday – Friday 05:30 – 23:00" */
  .foot__hours { grid-template-columns: 1fr; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
  .foot__legal { gap: 1rem; }

  .sheet__panel { width: 100%; border-left: 0; }
  .news-form { grid-template-columns: minmax(0, 1fr); }
  .news-form .field > label, .news-form .field > input,
  .news-form .field > .err, .news-form .btn { grid-area: auto; }
  .news-form .btn { width: 100%; justify-content: center; }
  .news-form .field > input, .news-form .btn { height: 3.4rem; }

  .e404__n { -webkit-text-stroke-width: 1.5px; }
  .to-top { width: 44px; height: 44px; }

  .sched table { min-width: 640px; }
  .tbl table { min-width: 560px; }
  .tbl th, .tbl td { padding: .75rem .6rem; font-size: .8125rem; }
}

/* ===== Small mobile ===================================================== */
/* The header carries a wordmark, a CTA and the menu button. Below this the
   three of them stop fitting, so the CTA drops to just "Join" — losing the
   primary action entirely would cost more than the words do. */
@media (max-width: 620px) {
  .btn__more { display: none; }
  .site-head__act .btn--sm { padding: .72em 1.05em; }
  .site-head__act .btn--sm svg { display: none; }
  .site-head__in { gap: .5rem; }
  .burger { padding: .6rem .75rem; }
}
@media (max-width: 420px) {
  .burger__txt { display: none; }
  .burger { padding: .65rem; }
}

@media (max-width: 460px) {
  :root { --pad: 1rem; }
  .brand__word { font-size: 1.35rem; }
  .btn { padding: .95em 1.4em; font-size: .75rem; }
  .hero__bar { grid-template-columns: 1fr; gap: 1rem; }
  .hero__bar .stat { display: flex; align-items: baseline; gap: .8rem; }
  .hero__bar .stat__n { font-size: 2rem; }
  .hero__bar .stat__note { display: none; }
  /* two columns even on phones: 24 full-width frames was twelve screens of scrolling */
  .mason { column-count: 2; column-gap: .6rem; }
  .mason__i { margin-bottom: .6rem; }
  .ig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig__i:nth-child(n + 5) { display: none; }
  .filters { gap: .35rem; }
  .chip { padding: .55em .9em; font-size: .6875rem; }
  .acc__q { font-size: 1.05rem; }
  .modal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone { width: min(260px, 82vw); border-radius: 34px; padding: 9px; }
  .phone__screen { border-radius: 26px; }
}

/* ===== Landscape phones ================================================= */
/* Short viewports: a 100svh hero eats the whole screen with nothing to read. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 640px; padding-top: calc(var(--head-h) + 1rem); }
  .hero__bar { margin-top: 1.5rem; padding-top: 1rem; }
  .scroll-cue { display: none; }
  .e404 { min-height: 620px; }
  .sheet__panel { padding: 1rem 1.25rem; }
  .sheet__list { margin-block: 1rem; }
  .sheet__t { font-size: 1.35rem; }
  .sheet__item a { padding-block: .5rem; }
  .lb__fig img { max-height: 68vh; }
  .modal__panel { max-height: 92vh; }
}

/* ===== Coarse pointer / no hover ======================================= */
/* Everything revealed by :hover has to already be visible when hover cannot
   happen, otherwise the content is simply unreachable on a touchscreen. */
@media (hover: none) {
  .prog__meta { max-height: 84px; opacity: 1; margin-top: .7rem; }
  .coach__q { max-height: none; opacity: 1; }
  .coach__soc a { opacity: 1; transform: none; }
  .prog__go { opacity: 1; transform: none; }
  .mason__cap { opacity: 1; transform: none; }
  .mason__i::after { opacity: .85; }
  .ig__meta { opacity: 1; }
  .ig__i::after { opacity: .25; }
  .sheet__item a svg { opacity: .5; transform: none; }
  .card:hover { transform: none; }
  .btn:hover, .socials a:hover, .sbtn:hover { transform: none; }
}

/* ===== Wide + fine pointer: enable the 4-up gallery rail ============== */
@media (min-width: 1025px) and (hover: hover) {
  .rail__c { width: min(420px, 32vw); }
}

/* ===== Accessibility preferences ======================================= */
@media (prefers-contrast: more) {
  :root {
    --sub: #C2C2C8;
    --sub-dim: #9A9AA2;
    --line: rgba(255, 255, 255, .28);
    --line-2: rgba(255, 255, 255, .48);
    --glass: rgba(255, 255, 255, .08);
  }
  body::after { display: none; }
  .card, .glass { background: #141416; }
  .prog__media::after, .coach__media::after {
    background: linear-gradient(180deg, transparent 20%, rgba(10, 10, 10, .97));
  }
  .outline-txt { -webkit-text-stroke-color: rgba(255, 255, 255, .7); }
}

@media (forced-colors: active) {
  .card, .glass, .btn { border: 1px solid CanvasText; }
  .btn--accent { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .progress__bar, .bar__f, .toggle__pill { background: Highlight; forced-color-adjust: none; }
  .cursor, .cursor-glow, body::after, .blobs, .mesh { display: none !important; }
  .chip[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .prog__media::after, .coach__media::after { display: none; }
  .prog__body, .coach__body { background: Canvas; position: static; }
}

/* Devices that cannot do backdrop-filter get a solid panel rather than a
   transparent one that leaves text sitting on top of imagery. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head.stuck { background: rgba(10, 10, 10, .97); }
  .mega { background: #131315; }
  .lb__bg, .modal__bg { background: rgba(6, 6, 6, .985); }
  .sheet__bg { background: rgba(6, 6, 6, .93); }
  .glass, .tag { background: #16161a; }
  .to-top, .sbtn, .lb__x, .lb__prev, .lb__next { background: #1c1c20; }
}