/* =========================================================
   Trainingwithstef
   Brand: red / black / white · Oswald (display) + Lato (body)
   A calmer, more editorial take on the current site.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --red:#e81820;
  --red-dark:#c11117;
  --ink:#111213;
  --ink-2:#1a1c1e;
  --paper:#f5f3f0;
  --paper-2:#ecebe7;
  --line:#dedcd7;
  --muted:#6c6f73;
  --white:#ffffff;

  --maxw:1200px;
  --gap:clamp(1.25rem,4vw,2.5rem);
  --sp:clamp(4rem,9vw,7.5rem);      /* section vertical rhythm */
  --radius:4px;

  --shadow:0 18px 50px -24px rgba(0,0,0,.35);

  --font-head:'Oswald',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- Reset-ish ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(232,24,32,.18)}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.03;margin:0;letter-spacing:.5px}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,5vw,2.5rem)}
.section{padding-block:var(--sp)}
.center{text-align:center}
.grid{display:grid;gap:var(--gap)}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.72rem;color:var(--red);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);display:inline-block}
.eyebrow.on-dark{color:#ff5a60}

/* ---------- Headings ---------- */
.h-xl{font-size:clamp(2.6rem,7vw,5rem);text-transform:uppercase}
.h-lg{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase}
.h-md{font-size:clamp(1.5rem,3vw,2.1rem);text-transform:uppercase}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:#3a3c3f;max-width:52ch}
.on-dark .lead,.dark .lead{color:#c7c9cc}
.mark{color:var(--red)}
/* Highlighter that hugs the glyphs. An inset box-shadow paints the bottom of
   the inline em box, which on uppercase Oswald leaves the bar floating in the
   descender gap, reading as a stray pink rectangle. */
/* Percentages here are of the inline content box, which for Oswald includes a
   deep descender well below the baseline. Ending at 88% put the band under the
   caps instead of across them; 78% lands it on the baseline. */
.u-red{
  background-image:linear-gradient(
    transparent 44%,
    rgba(232,24,32,.24) 44%,
    rgba(232,24,32,.24) 78%,
    transparent 78%);
}
/* on a dark band the pale wash turns into a muddy smear, so underline instead */
.dark .u-red,.social-band .u-red{
  background-image:linear-gradient(
    transparent 86%,
    var(--red) 86%,
    var(--red) 96%,
    transparent 96%);
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red);--fg:#fff;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:.86rem;line-height:1;
  padding:1.05rem 1.7rem;background:var(--bg);color:var(--fg);
  border:2px solid var(--bg);border-radius:var(--radius);cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn.ghost{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.ink{--bg:var(--ink);--fg:#fff;border-color:var(--ink)}
.btn.ink:hover{background:#000;border-color:#000}
.btn.outline-ink{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn.outline-ink:hover{background:var(--ink);color:#fff}
.btn.block{width:100%;justify-content:center}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
  padding-block:.65rem;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;z-index:2}
.site-header::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,11,12,.72),rgba(10,11,12,0));
  opacity:1;transition:opacity .3s ease;pointer-events:none}
.site-header.scrolled::before{opacity:0}
.site-header.scrolled{background:rgba(17,18,19,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:.65rem;min-height:44px}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a.navlink{
  font-family:var(--font-head);font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;color:#fff;opacity:.85;position:relative;padding-block:.3rem;
}
.nav a.navlink:hover{opacity:1}
.nav a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .2s ease}
.nav a.navlink:hover::after{width:100%}
.nav .btn{padding:.7rem 1.15rem;font-size:.78rem}

/* mobile nav */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:.25s ease}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
body.nav-open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0c0d}
.hero__media{position:absolute;inset:0}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* video fades in over the still once it is actually playing */
.hero__media video{opacity:0;transition:opacity .6s ease}
.hero__media video.ready{opacity:1}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,12,.55) 0%,rgba(10,11,12,.2) 32%,rgba(10,11,12,.55) 70%,rgba(10,11,12,.94) 100%);}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,6vw,4.5rem);padding-top:8rem;color:#fff}
.hero h1{font-size:clamp(3rem,10vw,7.2rem);text-transform:uppercase;letter-spacing:1px;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.hero h1 .line2{color:var(--red)}
.hero p.lead{color:#e7e8ea;margin-top:1.3rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero__strip{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);
  margin-top:clamp(2rem,5vw,3.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.hero__strip .cell{padding:1.15rem .2rem .2rem;color:#fff}
.hero__strip .k{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem}
.hero__strip .v{font-size:.8rem;color:#b9bbbe;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-head)}

/* ---------- Intro / split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev .split__media{order:-1}
.media-frame{position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:0 26px 60px -26px rgba(0,0,0,.55)}
/* photos carry this site, so give them a little more punch than raw camera output */
.media-frame img,
.gallery img,
.result__media img,
.story .split__media img{filter:saturate(1.12) contrast(1.05)}
.media-frame::before{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:62%;border:3px solid var(--red);border-radius:var(--radius);z-index:-1}
/* three across on one row. As a wrapping flexbox this broke 2+1 at almost
   every width, which read as a mistake rather than a layout. */
.statline{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
          gap:clamp(1rem,2vw,1.5rem);margin-top:1.6rem}
.statline .n{font-family:var(--font-head);font-weight:700;font-size:1.75rem;line-height:1;color:var(--ink);white-space:nowrap}
.statline .l{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-family:var(--font-head);white-space:nowrap}
#about .split__body h2{margin-bottom:1.4rem}
/* the crew shot is landscape, so it needs a wider column than the portrait
   photo it replaced or it reads as a small inset. The offset red accent was
   drawn for that portrait crop and pokes out oddly around a wide photo. */
/* must be min-width scoped: "#about .split" outranks the mobile ".split{1fr}"
   rule on specificity, so unscoped it kept the phone layout in two columns */
@media (min-width:861px){
  /* the photo still leads, but .92fr squeezed the heading to 4-5 lines */
  #about .split{grid-template-columns:.96fr 1.04fr;align-items:center}
  /* hold the trio in from the full column width, flush to the section edge */
  .about-photos{max-width:470px;margin-left:auto}
  /* h-lg is sized for a full-width heading; in a half column it shatters */
  #about .split__body h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
}
/* the red offset accent, retuned for the wide crew photo. The original 60%x62%
   was drawn around a tall portrait crop; against a short wide photo it trails
   a long line underneath, so it is pulled in to read as a corner. */

/* ---------- Section head ---------- */
.sec-head{max-width:60ch}
.sec-head.center{margin-inline:auto}
/* headings sat directly on the paragraph below them */
.sec-head h2{margin-bottom:.9rem}
.split__body h2{margin-bottom:1.3rem}
.cta h2{margin-bottom:1rem}

/* ---------- Training cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.7rem;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#cfcdc8}
.card .tag{font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.card h3{font-size:1.55rem;text-transform:uppercase;margin:.5rem 0 .3rem}
.card .price{font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:.9rem}
.card .price small{color:var(--muted);font-weight:400;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.card p{color:#4c4e51;font-size:.98rem}
.card ul{list-style:none;margin:.4rem 0 1.4rem;padding:0;display:grid;gap:.5rem}
.card li{position:relative;padding-left:1.4rem;font-size:.94rem;color:#3f4144}
.card li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--red);transform:rotate(45deg)}
.card .btn{margin-top:auto}

/* stations */
.stations{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.stations .lbl{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--muted);margin-right:.4rem}
.chip{
  font-family:var(--font-head);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:100px;background:#fff;color:var(--ink);
}

/* HYROX simulation dates */
.hyrox-dates{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.hyrox-dates .lbl{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--muted);margin-right:.2rem}
.hyrox-dates .dates{display:flex;flex-wrap:wrap;gap:.55rem}
.hyrox-dates .month{display:inline-flex;align-items:baseline;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem}
.hyrox-dates .m{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--red)}
.hyrox-dates .d{font-family:var(--font-head);font-weight:500;letter-spacing:.04em;font-size:.86rem;color:var(--ink)}

/* Credentials — rolling marquee (dark) */
.creds{margin-top:clamp(2.6rem,5vw,3.6rem);border-top:1px solid rgba(255,255,255,.12);padding-top:2.2rem}
.marquee{margin-top:1.3rem;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;width:max-content;animation:cred-scroll 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;gap:.7rem;padding-right:.7rem}
.cred-pill{flex:0 0 auto;display:flex;flex-direction:column;gap:.18rem;white-space:nowrap;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:.8rem 1.15rem}
.cred-pill .c-name{font-family:var(--font-head);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.86rem;color:#fff;line-height:1.2}
.cred-pill .c-body{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#ff5a60;font-family:var(--font-head)}
@keyframes cred-scroll{to{transform:translateX(-50%)}}

/* ---------- Dark sections ---------- */
.dark{background:var(--ink);color:#e9eaeb}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .muted{color:#a9abae}

/* Story — sized to fit one viewport */
.section.story{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2rem,5vh,3.5rem)}
.story .split{align-items:stretch}
.story .split__media{position:relative;display:flex}
.story .split__media img{border-radius:var(--radius);width:100%;height:100%;object-fit:cover;max-height:74svh}
.story .split__body{align-self:center}
.story .split__body p.muted{margin-bottom:.7rem}
.pullquote{
  border-left:4px solid var(--red);padding-left:1.3rem;margin:1.1rem 0 0;
  font-family:var(--font-head);font-weight:300;font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.32;color:#fff;text-transform:none;letter-spacing:0;
}
.story .creds{margin-top:clamp(1.4rem,3.2vh,2.4rem);padding-top:clamp(1.2rem,2.6vh,1.9rem)}
.badge-year{
  position:absolute;left:-10px;bottom:-18px;background:var(--red);color:#fff;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  padding:.9rem 1.2rem;font-size:.85rem;box-shadow:var(--shadow);
}

/* ---------- Result stories ---------- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:3rem}
.result{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.result:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#cfcdc8}
/* square keeps these portrait/square photos almost uncropped; the raised
   object-position stops a 4:3 crop from cutting faces off at the top */
/* the border matters for Suzelle: her collage is on white and would otherwise
   bleed into the white card with no edge between image and copy */
.result__media{aspect-ratio:1/1;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line)}
/* anchor to the top: Alrich's photo is portrait, so a square frame crops its
   height and any downward bias clips his head */
.result__media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s ease}
.result:hover .result__media img{transform:scale(1.05)}
/* Suzelle's is a designed before/after card, already square and captioned,
   so it must never be cropped. Keeping every result square guarantees that. */
.result__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.result__tag{
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--red);
}
.result h3{font-size:1.5rem;text-transform:uppercase;margin:.35rem 0 .3rem}
.result__win{
  font-family:var(--font-head);font-weight:500;font-size:.95rem;
  color:var(--ink);margin:0 0 .7rem;line-height:1.35;
}
.result__body p{font-size:.95rem;color:#4c4e51;margin:0}
.result__lifts{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.95rem;color:#4c4e51}
.result__lifts li{position:relative;padding-left:1.4rem}
.result__lifts li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--red);transform:rotate(45deg);
}
.result__lifts b{font-family:var(--font-head);font-weight:600;color:var(--ink);margin-right:.2rem}

/* ---------- Stat band ---------- */
.statband{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center;margin-bottom:3rem}
.statband .n{font-family:var(--font-head);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--red)}
.statband .l{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-family:var(--font-head);margin-top:.4rem}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.7rem;position:relative}
/* the Google logo now heads each card, so the decorative quote mark would
   just collide with it */
.quote::before{content:none}
.quote p{font-size:1.02rem;color:#2f3134;font-style:italic;margin-bottom:1rem}
.quote .who{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
.quote .who small{display:block;font-weight:400;letter-spacing:.1em;color:var(--red);font-size:.72rem;margin-top:.15rem}

/* ---------- Google reviews ---------- */
.g-logo{width:20px;height:20px;flex:0 0 auto}
.stars{display:inline-flex;gap:2px;align-items:center}
.star{width:15px;height:15px;fill:#FBBC04;flex:0 0 auto}

.reviews-badge{
  display:flex;align-items:center;gap:1rem;width:max-content;max-width:100%;
  margin:0 auto 1.8rem;padding:.9rem 1.4rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.35);
}
.reviews-badge .g-logo{width:30px;height:30px}
.reviews-badge__text{display:grid;grid-template-columns:auto auto;align-items:center;gap:.1rem .55rem}
.reviews-badge__score{
  font-family:var(--font-head);font-weight:700;font-size:1.7rem;line-height:1;color:var(--ink);
}
.reviews-badge__label{
  grid-column:1/-1;font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.12em;font-size:.7rem;color:var(--muted);
}

.quote__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.quote .who small{color:var(--muted)}

/* Testimonials — single-line rolling marquee */
.quote-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.qm-track{display:flex;width:max-content;animation:qm-scroll var(--dur,80s) linear infinite}
.quote-marquee:hover .qm-track{animation-play-state:paused}
.qm-group{display:flex;gap:1.4rem;padding-right:1.4rem;align-items:stretch}
.qm-group .quote{flex:0 0 auto;width:clamp(290px,80vw,380px);margin:0;display:flex;flex-direction:column}
.qm-group .quote p{flex:1 0 auto}
.qm-group .quote .who{margin-top:auto}
@keyframes qm-scroll{to{transform:translateX(-50%)}}

/* ---------- Video / Kwêla ---------- */
.videoframe{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.1)}
.videoframe .ratio{position:relative;padding-top:56.25%}
.videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* click-to-load YouTube facade */
.yt-lite{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.yt-lite img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .3s ease}
.yt-lite:hover img,.yt-lite:focus-visible img{opacity:1}
.yt-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:68px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
  transition:transform .2s ease;
}
.yt-lite:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}
.yt-play::before{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;margin-left:4px;
}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
  color:#fff;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center}
.cta__bg{position:absolute;inset:0;opacity:.28}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(2.2rem,6vw,4rem);text-transform:uppercase}
.cta .btn{margin-top:1.8rem}
.cta .fineprint{margin-top:1rem;font-size:.85rem;color:#b9bbbe;letter-spacing:.02em}

/* ---------- Trial session offer ---------- */
.trial-card{
  max-width:760px;margin:1.6rem auto 0;
  background:rgba(12,13,14,.62);border:1px solid rgba(255,255,255,.14);
  border-top:3px solid var(--red);
  border-radius:var(--radius);padding:1.5rem 1.6rem;backdrop-filter:blur(6px);
  display:grid;gap:1rem 2.4rem;text-align:left;
  grid-template-columns:auto 1fr;align-items:center;
}
.trial-card__head{display:flex;flex-direction:column;gap:.15rem}
.trial-card__tag{
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:#ff5a60;
}
.trial-card__price{
  font-family:var(--font-head);font-weight:700;font-size:2.9rem;line-height:1;
  color:#fff;margin:0;white-space:nowrap;
}
.trial-card__price small{
  font-size:.72rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:#b9bbbe;margin-left:.45rem;
}
.trial-card__list{
  list-style:none;margin:0;padding:0;display:grid;gap:.4rem;
  font-size:.94rem;color:#dcdee0;
}
.trial-card__list li{position:relative;padding-left:1.4rem}
.trial-card__list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--red);transform:rotate(45deg);
}
.trial-card .btn{margin-top:0;grid-column:1/-1}
/* the CTA band is the last thing on the page and should land on one screen */
.cta.section{padding-block:clamp(2.4rem,6vh,4rem)}
.cta h2{margin-bottom:.6rem}
@media (max-width:700px){
  .trial-card{grid-template-columns:1fr;gap:.9rem;text-align:center;padding:1.3rem 1.2rem}
  .trial-card__head{align-items:center}
  .trial-card__list{text-align:left;max-width:19rem;margin-inline:auto}
}

/* ---------- Social band ---------- */
.social-band{background:var(--ink);text-align:center;padding-block:clamp(2.6rem,5vw,3.8rem);border-top:1px solid rgba(255,255,255,.08)}
.social-band h2{margin:.2rem 0 .6rem}
.social-band .lead{margin-bottom:1.4rem}
.social-band__btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
/* Platform buttons in their own brand colours.
   Instagram's real gradient is built for a large square app icon: squashed into
   a short wide button its pale yellow lands right under the label and the white
   text washes out. This diagonal ramp keeps the brand read but stays dark
   enough for white text the whole way across. */
.btn__icon{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.social-band__btns .btn{min-width:190px;justify-content:center;border-width:0;padding:1.05rem 1.5rem}
.btn--ig{
  --fg:#fff;
  background-image:linear-gradient(115deg,#8A3AB9 0%,#C13584 42%,#E1306C 72%,#F0603C 100%);
}
.btn--ig:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn--fb{--bg:#1877F2;--fg:#fff}
.btn--fb:hover{background:#0F63D2}

/* ---------- Footer ---------- */
.footer{background:#0c0d0e;color:#c3c5c8;padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.footer .flogo{height:44px;width:auto;margin-bottom:1rem}
.footer h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:#fff;margin-bottom:1rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.93rem}
.footer .socials{display:flex;gap:.7rem;margin-top:1rem}
.footer .socials a{width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:.2s}
.footer .socials a:hover{background:var(--red);border-color:var(--red)}
.footer .socials svg{width:18px;height:18px;fill:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.8rem;color:#83868a}
.footer__bottom a{color:#a9abae}

/* ---------- Floating WhatsApp button ---------- */
.wa-float{
  position:fixed;
  right:calc(clamp(1rem,3vw,1.6rem) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(1rem,3vw,1.6rem) + env(safe-area-inset-bottom,0px));
  z-index:75;
  width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.5);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float:active{transform:scale(.96)}
.wa-float svg{width:32px;height:32px;fill:#fff}
.wa-float::before,.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;
  animation:wa-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.wa-float::after{animation-delay:1.2s}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2);opacity:0}
  100%{transform:scale(2);opacity:0}
}
body.nav-open .wa-float{opacity:0;pointer-events:none;transition:opacity .2s ease}
@media (max-width:520px){.wa-float{width:52px;height:52px}.wa-float svg{width:28px;height:28px}}

/* ---------- Contact page ---------- */
.page-hero{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0c0d}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,12,.35),rgba(10,11,12,.9))}
.page-hero .inner{position:relative;z-index:2;color:#fff;padding-block:8rem 3rem}
.page-hero h1{font-size:clamp(2.6rem,7vw,4.8rem);text-transform:uppercase}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);margin-bottom:.4rem}
input,textarea,select{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  padding:.85rem .95rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:border-color .18s ease,background .18s ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);background:#fff}
textarea{resize:vertical;min-height:130px}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236c6f73' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px;
}
label .opt{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.4rem}

.info-block{margin-bottom:1.8rem}
.info-block h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--red);margin-bottom:.5rem}
.info-block p{margin:0;color:#2f3134}
.info-block a{color:var(--ink);border-bottom:1px solid var(--line)}
.info-block a:hover{border-color:var(--red);color:var(--red)}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours td{padding:.5rem 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-family:var(--font-head);letter-spacing:.03em;color:var(--ink)}
.hours tr:last-child td{border-bottom:0}
.hours .closed{color:var(--red)}
.mapframe{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.mapframe iframe{width:100%;height:380px;border:0;display:block;filter:grayscale(.2)}
/* HYROX simulation dates: placeholder until the confirmed schedule lands */
.month--tbc{
  display:block;background:transparent;border:1px dashed var(--line);
  border-radius:var(--radius);padding:.7rem 1rem;
}
.month--tbc .d{font-family:var(--font-body);letter-spacing:0;color:var(--muted);font-size:.9rem}
.hyrox-dates .lbl em{font-style:normal;color:var(--muted);opacity:.85}

.perks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.perks .chip{background:var(--paper)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* The fixed header must not create a containing block for the fixed nav.
     backdrop-filter does exactly that, which traps the drawer inside the
     header box (80px tall) instead of letting it fill the viewport. */
  .site-header,
  .site-header.scrolled{
    background:rgba(17,18,19,.95);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }

  .nav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,360px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--ink);
    padding:calc(env(safe-area-inset-top,0px) + 5.25rem) 1.6rem calc(env(safe-area-inset-bottom,0px) + 2rem);
    transform:translateX(100%);transition:transform .3s ease;z-index:70;
    overflow-y:auto;overscroll-behavior:contain;
  }
  body.nav-open .nav{transform:none}
  /* Scrim. Must stay under the header's z-index:60 — the header is a stacking
     context, so the drawer and toggle inside it can never rise above a scrim
     placed higher, however large their own z-index is. */
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(8,9,10,.62);z-index:55}
  .nav a.navlink{
    font-size:1.05rem;color:#fff;opacity:1;
    padding-block:1rem;border-bottom:1px solid rgba(255,255,255,.09);
  }
  .nav a.navlink::after{display:none}
  .nav .btn{margin-top:1.4rem;width:100%;justify-content:center;padding:1.05rem 1.2rem;font-size:.84rem}
  .nav-toggle{display:block;z-index:80}

  .split,.contact-grid{grid-template-columns:1fr}
  .split.rev .split__media{order:0}
  .media-frame{margin-top:1rem}
  .section.story{min-height:auto;padding-block:clamp(3rem,9vw,5rem)}
  /* .split__media is a flex row on desktop — the static badge would sit
     beside the photo as a red sliver once it stops being absolute. */
  .story .split__media{display:block}
  .story .split__media img{max-height:56svh}
  .story .split__body{align-self:auto}
  .cards{grid-template-columns:1fr}
  .results{grid-template-columns:1fr;gap:1.2rem}
  .quotes{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero__strip{grid-template-columns:1fr;gap:0}
  .hero__strip .cell{padding-block:.8rem;border-bottom:1px solid rgba(255,255,255,.12)}
  .statband{grid-template-columns:1fr;gap:2rem}
  .badge-year{position:static;display:inline-block;margin-top:1rem}
  .media-frame::before{display:none}
  /* comfortable tap targets — tablets are touch devices too, so these apply
     from the mobile-nav breakpoint down, not just on phones */
  /* the padding below would strand the border-bottom as a detached grey line,
     so underline the text itself instead */
  .info-block a{display:inline-block;padding-block:.55rem;border-bottom:0;
                text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
  .info-block a:hover{text-decoration-color:var(--red)}
  .form-note a{display:inline-block;padding-block:.45rem}
  .footer ul{gap:.1rem}
  .footer ul li a{display:inline-block;padding-block:.68rem}
  .footer__bottom a{display:inline-block;padding-block:.45rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .row2{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .hero__cta .btn,.card .btn{width:100%;justify-content:center}

  /* The hero stacks a lot on a phone: headline, a long lead, two buttons and
     then three strip rows carrying two lines each. Dropping the strip's
     sub-labels halves that last block and calms the whole screen down. */
  .hero__inner{padding-top:6.5rem}
  .hero p.lead{font-size:1rem;line-height:1.5;max-width:34ch}
  .hero__cta{gap:.7rem;margin-top:1.6rem}
  .hero__strip{margin-top:1.8rem}
  .hero__strip .cell{padding-block:.6rem}
  .hero__strip .k{font-size:.88rem;letter-spacing:.04em;font-weight:500}
  .hero__strip .v{display:none}

  /* 11.5px uppercase labels are too small to read on a phone */
  .eyebrow{font-size:.78rem}
  .card .tag{font-size:.76rem}
  label{font-size:.76rem}
  .cred-pill .c-body{font-size:.78rem}
  .card .price small{font-size:.78rem}

  .quote .who small{font-size:.78rem}

  /* enquiry form is meant to fit one phone screen */
  .form-card{padding:1.15rem 1.1rem}
  .field{margin-bottom:.7rem}
  label{margin-bottom:.25rem}
  input,select,textarea{padding:.72rem .85rem}
  textarea{min-height:76px}
  .form-note{font-size:.78rem;line-height:1.45;margin-top:.55rem}
  #enquire .contact-grid{gap:2.2rem}
  #enquire h2.h-md{margin-bottom:.9rem!important}

  /* 1.03 is set for big one-line desktop headings; on a phone almost every
     heading wraps to 2-3 lines and the lines nearly touch */
  h1,h2{line-height:1.09}
  .hero h1{line-height:1.04}

  /* three across will not fit a phone column, so stack them cleanly */
  .statline{grid-template-columns:1fr;gap:.9rem;margin-top:1.4rem}
  .statline .n{font-size:1.7rem}
  .statband{gap:1.5rem}

  /* only one card is visible at a time here, so pinning the name to the
     bottom of the tallest card just opens a hole under short quotes */
  .qm-group .quote p{flex:0 1 auto}
  .qm-group .quote .who{margin-top:.5rem}

  /* one column reads better than two cramped ones */
  .footer__top{grid-template-columns:1fr;gap:2.2rem}
  .footer__bottom{font-size:.78rem}

  .statline{gap:1.4rem}
  .quote{padding:1.5rem 1.4rem}
}
/* short phones (SE-sized): squeeze the form further so it still lands on one screen */
@media (max-width:560px) and (max-height:720px){
  .form-card{padding:.95rem .9rem}
  .field{margin-bottom:.45rem}
  label{margin-bottom:.15rem;font-size:.72rem}
  input,select,textarea{padding:.58rem .8rem}
  textarea{min-height:52px}
  .form-note{font-size:.72rem;line-height:1.4;margin-top:.4rem}
  #enquire h2.h-md{margin-bottom:.6rem!important}
  .btn.block{padding-block:.85rem}
}
@media (max-width:400px){
  .hours{font-size:.88rem}
  .hours td:last-child{font-size:.82rem}
  .stations .lbl,.hyrox-dates .lbl{width:100%;margin-bottom:.2rem}
}

/* Phone in landscape: 100svh + a stacked strip makes the hero ~2 screens tall */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto}
  .hero__inner{padding-top:5.5rem;padding-bottom:2rem}
  .hero h1{font-size:clamp(2.1rem,6vw,3rem)}
  .hero p.lead{font-size:1rem;margin-top:.8rem}
  .hero__cta{margin-top:1.2rem}
  .hero__strip{grid-template-columns:repeat(3,1fr);margin-top:1.4rem}
  .hero__strip .cell{border-bottom:0;padding:.9rem .4rem .2rem}
  .page-hero{min-height:auto}
  .page-hero .inner{padding-block:6rem 2rem}
  .nav{padding-top:4.5rem}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__media video{display:none}
  .marquee__track{animation:none}
  .marquee{overflow-x:auto}
  .qm-track{animation:none}
  .quote-marquee{overflow-x:auto}
  .wa-float::before,.wa-float::after{animation:none}
}

/* ---------- HYROX Training Club affiliation ---------- */
/* sits beside the TWS mark; margin-right:auto keeps the pair left while the
   nav and toggle stay right inside the space-between header */
.affiliate{
  display:flex;align-items:center;margin-right:auto;
  padding-left:.9rem;border-left:1px solid rgba(255,255,255,.22);
}
/* full white, no dimming: the 'Training Club' lines are an outline face
   and go faint fast at small sizes */
.affiliate img{height:44px;width:auto}

/* the differentiator line, given pull-quote weight */
.standout{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.4;
  border-left:4px solid var(--red);padding-left:1.1rem;
  margin:1.5rem 0 1rem;color:var(--ink);
}
.affiliate-note{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.78rem;color:var(--muted);margin:0;
}

/* strapline under a section heading */
/* sized to break into two lines: 36ch left "EVENT." stranded on a third */
.strapline{
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.35;
  color:var(--red);margin:0 0 .9rem;max-width:42ch;
  text-wrap:balance;
}

@media (max-width:560px){
  .affiliate{padding-left:.7rem}
  .affiliate img{height:36px}
  .standout{font-size:1.02rem;padding-left:.9rem;margin:1.2rem 0 .9rem}
}

/* ---------- About: competition pair ---------- */
/* wide establishing shot across the top, the competition pair beneath */
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.about-photo--wide{grid-column:1 / -1}
.about-photo{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.5);
}
.about-photo img{
  width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  filter:saturate(1.12) contrast(1.05);
}
/* must follow the rule above: equal specificity, so source order decides.
   Placed before it, the crew shot rendered as a 3:4 portrait. */
.about-photo--wide img{aspect-ratio:5/3}
/* the bubble sits on the photo it refers to */
.photo-badge{
  position:absolute;left:.7rem;bottom:.7rem;
  background:var(--red);color:#fff;
  font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;line-height:1;
  padding:.55rem .85rem;border-radius:100px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
}
@media (max-width:560px){
  .about-photos{gap:.7rem}
  .photo-badge{font-size:.66rem;padding:.45rem .7rem;left:.5rem;bottom:.5rem}
}

/* Must come after the .strapline base rule: same specificity, so source order
   decides. Inside the earlier max-width:560 block it was silently overridden. */
@media (max-width:560px){
  .strapline{font-size:.86rem;letter-spacing:.02em}
}