/* Self-hosted fonts (Anton + Barlow, latin) */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400.woff2') format('woff2');
  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: 'Barlow';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700i.woff2') format('woff2');
  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: 'Barlow';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-900i.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-800.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-900.woff2') format('woff2');
  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;
}

/* ==========================================================================
   Bulldog Gym - Muay Thai, Kickboxing & Boxing, Manly
   Production stylesheet. Big, bold, sporty sports-brand aesthetic.
   Breakpoint: 920px (desktop nav -> mobile burger). All type/spacing fluid.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  --ink: #0b0b0c;            /* page background */
  --surface: #131316;        /* alternating sections, cards */
  --surface-2: #17171a;      /* card hover */
  --white: #f6f5f3;          /* primary text */
  --text-muted: #dcdbd8;
  --text-dim: #cfceca;
  --text-faint: #9b9a97;
  --text-footer: #7c7b78;
  --text-legal: #5e5d5b;
  --red: #e4111c;            /* brand accent */
  --hairline: rgba(255, 255, 255, .1);
  --hairline-soft: rgba(255, 255, 255, .08);

  /* Timetable category colours */
  --cat-all: #e4111c;
  --cat-beginners: #f6f5f3;
  --cat-women: #e8a13a;
  --cat-kids: #3a9be8;
  --cat-fighters: #6b6a67;

  --maxw: 1300px;
  --pad-x: clamp(20px, 4vw, 52px);
  --skew: -8deg;
  --skew-i: 8deg;
}

/* ---- Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--white);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 20px;
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Typography helpers -------------------------------------------------- */
.display { font-family: 'Anton', Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; line-height: .98; }
.accent { color: var(--red); }
.eyebrow { font-weight: 900; font-size: clamp(12px, 1.4vw, 15px); letter-spacing: 2px; text-transform: uppercase; }

/* ---- Layout -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 110px) var(--pad-x); }
.section--tight { padding: clamp(48px, 7vw, 90px) var(--pad-x); }
.section--ink { background: var(--ink); }
.section--surface { background: var(--surface); }

.media { background-size: cover; background-position: center; }

/* ---- Buttons (signature skew) ------------------------------------------- */
.btn {
  display: inline-block;
  font-family: 'Anton', Impact, sans-serif;
  transform: skewX(var(--skew));
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer; border: none;
}
.btn > span { display: inline-block; transform: skewX(var(--skew-i)); }

.btn--primary { background: var(--red); color: #fff; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .5px; padding: 18px 34px; }
.btn--primary:hover, .btn--primary:focus-visible { background: #fff; color: var(--ink); }

.btn--sm { font-size: 20px; padding: 13px 26px; }
.btn--lg { font-size: clamp(22px, 3vw, 34px); padding: 20px 44px; }

.btn--inverted { background: var(--ink); color: #fff; }
.btn--inverted:hover, .btn--inverted:focus-visible { background: #fff; color: var(--ink); }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover, .btn--white:focus-visible { background: var(--red); color: #fff; }

/* Compact nav trial button (Barlow, not Anton) */
.btn--nav {
  font-family: 'Barlow', sans-serif; font-weight: 900; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; padding: 12px 20px;
  background: var(--red); color: #fff;
}
.btn--nav:hover, .btn--nav:focus-visible { background: #fff; color: var(--ink); }

/* Outline / secondary */
.btn--outline {
  transform: skewX(var(--skew));
  border: 2px solid rgba(255, 255, 255, .6); color: #fff;
  font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 16px 26px; background: none;
}
.btn--outline:hover, .btn--outline:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* ---- Header / navigation ------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--pad-x);
  background: rgba(11, 11, 12, .8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__logo { width: auto; height: 46px; display: block; }
.nav__wordmark {
  font-family: 'Anton', Impact, sans-serif; font-size: 24px; letter-spacing: 1px;
  line-height: .8; text-transform: uppercase;
}
.nav__sub {
  display: block; font-family: 'Barlow', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 4px; color: var(--text-faint); margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link { font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; transition: color .2s ease; }
.nav__link:hover, .nav__link:focus-visible { color: var(--red); }
.nav__link[aria-current="page"] { color: var(--red); }

/* Dropdown sub-menu (desktop) */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item--has-sub > .nav__link::after { content: "▾"; font-size: 10px; margin-left: 6px; vertical-align: middle; color: var(--text-faint); }
.nav__item--has-sub:hover > .nav__link::after,
.nav__item--has-sub:focus-within > .nav__link::after { color: var(--red); }
.nav__submenu {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 220px; z-index: 101;
  display: flex; flex-direction: column; padding: 8px 0;
  background: rgba(11, 11, 12, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-soft); border-top: 2px solid var(--red);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__item--has-sub:hover .nav__submenu,
.nav__item--has-sub:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu a { padding: 10px 20px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; transition: color .2s ease, background .2s ease; }
.nav__submenu a:hover, .nav__submenu a:focus-visible { color: var(--red); background: rgba(255, 255, 255, .04); }

.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav__burger span { width: 26px; height: 3px; background: #fff; display: block; transition: transform .3s ease, opacity .3s ease; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile full-screen menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(11, 11, 12, .98);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 18px; padding: 0 32px;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-family: 'Anton', Impact, sans-serif; font-size: 42px; text-transform: uppercase; }
.mobile-menu a:not(.btn):hover { color: var(--red); }
.mobile-menu .btn { margin-top: 14px; font-size: 26px; padding: 14px 28px; }
.mobile-menu__sub { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 6px 4px; padding-left: 18px; border-left: 3px solid var(--red); }
.mobile-menu .mobile-menu__sub a { font-family: 'Barlow', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.mobile-menu .mobile-menu__sub a:hover { color: var(--red); }

/* ---- Marquee ------------------------------------------------------------- */
.marquee {
  background: var(--red); color: #fff; overflow: hidden; white-space: nowrap; padding: 13px 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.marquee__track { display: inline-flex; animation: bd-marquee var(--marquee-speed, 28s) linear infinite; will-change: transform; }
.marquee__track span { font-family: 'Anton', Impact, sans-serif; font-size: clamp(20px, 3vw, 26px); letter-spacing: 1px; text-transform: uppercase; }
@keyframes bd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.hero--full { min-height: 100vh; }
.hero--tall { min-height: 66vh; }
.hero--mid { min-height: 64vh; }
.hero--short { min-height: 54vh; }
.hero__bg { position: absolute; inset: 0; }
/* Home hero: keep the fighter (right side of the photo) framed. */
.hero--full .hero__bg { background-position: center 30%; }
@media (max-width: 700px) { .hero--full .hero__bg { background-position: 78% 22%; } }
.hero--kenburns .hero__bg { animation: bd-kenburns 14s ease-out forwards; }
@keyframes bd-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero--kenburns .hero__bg { animation: none; } }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, .18) 42%, rgba(11, 11, 12, .92) 100%); }
.hero__bar { position: absolute; top: 0; bottom: 0; left: 0; width: 8px; background: var(--red); }
.hero__inner { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--pad-x) clamp(44px, 7vw, 96px); }
.hero__title { font-size: clamp(48px, 10vw, 150px); text-wrap: balance; text-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.hero__title--sm { font-size: clamp(48px, 9vw, 140px); }
.hero__lead { max-width: 880px; margin-top: 22px; font-size: clamp(17px, 2vw, 22px); font-weight: 500; color: var(--text-muted); line-height: 1.45; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; align-items: center; }

/* Skewed badge */
.badge {
  display: inline-block; background: var(--red); color: #fff; font-weight: 900;
  font-size: clamp(12px, 1.4vw, 15px); letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px; transform: skewX(var(--skew)); margin-bottom: 22px;
}
.badge > span { display: inline-block; transform: skewX(var(--skew-i)); }

/* ---- Stats band ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border: 1px solid var(--hairline); }
.stat { padding: 34px 28px; border-right: 1px solid var(--hairline); }
.stat:last-child { border-right: none; }
.stat__num { font-family: 'Anton', Impact, sans-serif; font-size: clamp(48px, 6vw, 84px); line-height: .9; color: var(--red); }
.stat__label { font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px; color: var(--text-muted); margin-top: 8px; }

/* ---- Section headers ----------------------------------------------------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 44px; }
.h2 { font-size: clamp(40px, 8vw, 132px); }
.h2--mid { font-size: clamp(38px, 6vw, 96px); }
.h2--sm { font-size: clamp(34px, 5.5vw, 86px); }
.lead-dim { color: var(--text-faint); font-size: 18px; font-weight: 500; }
.lead-light { color: var(--text-dim); font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.6; }

/* ---- Card grids ---------------------------------------------------------- */
.grid { display: grid; gap: 8px; }
.grid--classes { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--benefits { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--testimonials { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--days { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid--insta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid--pillars { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--timeline { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--timetable { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.grid--contact { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* Tall image class cards */
.class-card { position: relative; display: block; min-height: 520px; overflow: hidden; background: var(--surface); }
.class-card__img, .pillar__img, .insta__img { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.class-card:hover .class-card__img, .pillar:hover .pillar__img, .insta:hover .insta__img { transform: scale(1.06); }
.class-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .1), rgba(11, 11, 12, .92)); }
.class-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 28px; }
.class-card__num { font-family: 'Anton', Impact, sans-serif; font-size: 14px; letter-spacing: 3px; color: var(--red); margin-bottom: 6px; }
.class-card__title { font-family: 'Anton', Impact, sans-serif; font-size: clamp(34px, 4vw, 52px); line-height: .9; text-transform: uppercase; }
.class-card__text { color: var(--text-dim); font-size: 16px; font-weight: 500; margin-top: 12px; max-width: 300px; }
.link-underline { display: inline-block; margin-top: 16px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; color: #fff; border-bottom: 2px solid var(--red); padding-bottom: 3px; transition: color .2s ease; }
.link-underline:hover, .link-underline:focus-visible { color: var(--red); }

/* Benefit cards (photo + copy) */
.benefit { background: var(--ink); overflow: hidden; }
.section--surface .benefit { background: var(--ink); }
.benefit__img { height: 200px; }
.benefit__img--tall { height: 220px; }
.benefit__body { padding: 26px 24px 30px; }
.benefit__num { font-family: 'Anton', Impact, sans-serif; font-size: 14px; letter-spacing: 3px; color: var(--red); margin-bottom: 8px; }
.benefit__title { font-family: 'Anton', Impact, sans-serif; font-size: 26px; text-transform: uppercase; line-height: .95; }
.benefit__title--lg { font-size: 28px; line-height: 1; }
.benefit__text { color: var(--text-faint); font-size: 15.5px; font-weight: 500; margin-top: 10px; line-height: 1.5; }

/* Full-width image pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pillar { position: relative; min-height: 420px; overflow: hidden; display: block; }
.pillar--sm { min-height: 380px; }
.pillar--lg { min-height: 400px; }
.pillar__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .15), rgba(11, 11, 12, .85)); }
.pillar__body { position: absolute; bottom: 0; padding: 28px 26px; }
.pillar__title { font-family: 'Anton', Impact, sans-serif; font-size: clamp(32px, 3.4vw, 46px); text-transform: uppercase; line-height: .9; }
.pillar__tag { color: var(--red); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; margin-top: 6px; }

/* Image-led feature band (e.g. Dad & Son) */
.feature-band { position: relative; overflow: hidden; padding: clamp(64px, 10vw, 130px) var(--pad-x); background: var(--ink); }
.feature-band__bg { position: absolute; inset: 0; }
.feature-band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .78) 42%, rgba(11, 11, 12, .35) 100%); }
.feature-band__inner { position: relative; max-width: var(--maxw); margin-inline: auto; }
.feature-band__text { max-width: 640px; }
@media (max-width: 700px) { .feature-band__scrim { background: linear-gradient(180deg, rgba(11, 11, 12, .6) 0%, rgba(11, 11, 12, .85) 60%, rgba(11, 11, 12, .95) 100%); } }

/* ---- Two-column feature / story ----------------------------------------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 70px); align-items: center; }
.split--gap-sm { gap: clamp(28px, 5vw, 64px); }
.feature__num { font-family: 'Anton', Impact, sans-serif; font-size: 18px; letter-spacing: 4px; color: var(--red); }
.feature__title { font-family: 'Anton', Impact, sans-serif; font-size: clamp(40px, 5.5vw, 80px); line-height: .98; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }
.feature__text { color: var(--text-dim); font-size: 18px; font-weight: 500; line-height: 1.6; margin-top: 18px; max-width: 720px; }
.tick-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.tick { display: flex; gap: 12px; align-items: flex-start; }
.tick__mark { color: var(--red); font-family: 'Anton', Impact, sans-serif; font-size: 18px; }
.tick__text { font-weight: 600; color: var(--text-muted); }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-4-5 { aspect-ratio: 4 / 5; }

.story-figure { position: relative; }
.est-badge { position: absolute; bottom: -22px; left: -22px; background: var(--red); color: #fff; font-family: 'Anton', Impact, sans-serif; padding: 18px 26px; transform: skewX(var(--skew)); }
.est-badge > span { display: inline-block; transform: skewX(var(--skew-i)); font-size: clamp(28px, 3vw, 40px); line-height: .9; }
.story-text p + p { margin-top: 16px; }
.story-text p:first-of-type { margin-top: 24px; }

/* ---- Testimonials -------------------------------------------------------- */
.testimonial { background: var(--surface); display: flex; flex-direction: column; border-top: 4px solid var(--red); }
.testimonial__head { display: flex; gap: 20px; padding: 28px 28px 0; align-items: center; }
.avatar { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; }
.avatar--sm { width: 60px; height: 60px; flex: 0 0 60px; }
.testimonial__name { font-family: 'Anton', Impact, sans-serif; font-size: 22px; text-transform: uppercase; line-height: .9; }
.role { color: var(--red); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.testimonial__quote { padding: 20px 28px 30px; color: var(--text-muted); font-size: 18px; font-weight: 500; line-height: 1.55; font-style: italic; }

/* ---- Timetable teaser (home) -------------------------------------------- */
.day-teaser { background: var(--ink); padding: 22px 18px; }
.day-teaser__head { font-family: 'Anton', Impact, sans-serif; font-size: 20px; text-transform: uppercase; color: var(--red); border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin-bottom: 12px; }
.session-teaser { margin-bottom: 12px; }
.session-teaser__name { font-weight: 800; font-size: 15px; }
.session-teaser__time { color: var(--text-faint); font-size: 13px; font-weight: 600; letter-spacing: .3px; }

/* ---- Instagram ----------------------------------------------------------- */
.insta { position: relative; aspect-ratio: 1; overflow: hidden; display: block; background: var(--surface); }
.insta__wash { position: absolute; inset: 0; background: rgba(228, 17, 28, 0); transition: background .35s ease; }
.insta:hover .insta__wash, .insta:focus-visible .insta__wash { background: rgba(228, 17, 28, .35); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq-wrap { max-width: 980px; margin-inline: auto; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq { background: var(--ink); border-left: 4px solid var(--red); }
.section--surface .faq { background: var(--ink); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; color: var(--white); cursor: pointer; text-align: left; padding: 24px 26px;
}
.faq__q-text { font-family: 'Anton', Impact, sans-serif; font-size: clamp(18px, 2.2vw, 26px); text-transform: uppercase; line-height: 1; }
.faq__sign { font-family: 'Anton', Impact, sans-serif; font-size: 30px; color: var(--red); flex: 0 0 auto; line-height: 1; transition: transform .3s ease; }
.faq[aria-expanded="true"] .faq__sign, .faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq__a-inner { padding: 0 26px 26px; color: #bdbcb8; font-size: 17px; font-weight: 500; line-height: 1.6; max-width: 760px; }

/* ---- Big CTA band -------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--red); color: #fff; padding: clamp(56px, 9vw, 130px) var(--pad-x); text-align: center; }
.cta-band__bg { position: absolute; inset: 0; opacity: .16; mix-blend-mode: luminosity; }
.cta-band__inner { position: relative; max-width: 1000px; margin-inline: auto; }
.cta-band__title { font-family: 'Anton', Impact, sans-serif; font-size: clamp(42px, 9vw, 140px); line-height: .96; text-transform: uppercase; letter-spacing: 1px; text-wrap: balance; }
.cta-band__text { font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; margin: 22px auto 0; max-width: 620px; }
.cta-band .btn { margin-top: 34px; }

/* ---- Contact ------------------------------------------------------------- */
.contact-info { margin-top: 30px; display: flex; flex-direction: column; gap: 22px; max-width: 420px; }
.info-label { font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; color: var(--red); }
.info-value { font-size: 19px; font-weight: 600; margin-top: 4px; display: block; }
a.info-value:hover, a.info-value:focus-visible { color: var(--red); }
.info-row { display: flex; gap: 40px; flex-wrap: wrap; }
.map-frame { min-height: 380px; border: 1px solid var(--hairline); }
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }

/* Live ClubWorx booking calendar embed */
.calendar-embed { border: 1px solid var(--hairline); background: #fff; }
.calendar-embed iframe { display: block; width: 100%; height: 940px; border: 0; }
@media (max-width: 700px) { .calendar-embed iframe { height: 1150px; } }

.contact-card { background: var(--surface); padding: 34px 30px; border-top: 4px solid var(--red); display: block; transition: background .25s ease; }
.contact-card:hover { background: var(--surface-2); }
.contact-card__label { font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; color: var(--red); }
.contact-card__title { font-family: 'Anton', Impact, sans-serif; font-size: 26px; text-transform: uppercase; margin-top: 10px; line-height: 1; }
.contact-card__line { font-size: 18px; font-weight: 600; margin-top: 12px; color: var(--text-muted); line-height: 1.4; display: block; }
a.contact-card__line:hover, a.contact-card__line:focus-visible { color: var(--red); }
.social-row { display: flex; gap: 16px; margin-top: 14px; }
.social-row a { font-weight: 800; font-size: 14px; color: var(--text-muted); }
.social-row a:hover, .social-row a:focus-visible { color: var(--red); }

.hours { margin-top: 24px; display: flex; flex-direction: column; max-width: 380px; }
.hours__row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.hours__day { font-weight: 700; color: var(--white); }
.hours__time { font-weight: 600; color: var(--text-faint); }

/* ---- Timetable grid ------------------------------------------------------ */
.legend { display: flex; flex-wrap: wrap; gap: 18px; }
.legend__item { display: flex; align-items: center; gap: 8px; }
.legend__swatch { width: 14px; height: 14px; display: block; }
.legend__label { font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.swatch-all { background: var(--cat-all); }
.swatch-beginners { background: var(--cat-beginners); }
.swatch-women { background: var(--cat-women); }
.swatch-kids { background: var(--cat-kids); }
.swatch-fighters { background: var(--cat-fighters); }

.day { background: var(--surface); display: flex; flex-direction: column; }
.day__head { font-family: 'Anton', Impact, sans-serif; font-size: 24px; text-transform: uppercase; padding: 16px 16px 12px; border-bottom: 2px solid var(--red); color: #fff; }
.day__sessions { display: flex; flex-direction: column; padding: 8px; }
.session { padding: 11px 10px; border-left: 4px solid var(--cat-all); margin-bottom: 6px; background: rgba(255, 255, 255, .02); }
.session--all { border-left-color: var(--cat-all); }
.session--beginners { border-left-color: var(--cat-beginners); }
.session--women { border-left-color: var(--cat-women); }
.session--kids { border-left-color: var(--cat-kids); }
.session--fighters { border-left-color: var(--cat-fighters); }
.session__time { font-weight: 600; font-size: 13px; color: var(--red); letter-spacing: .4px; }
.session__name { font-weight: 700; font-size: 14.5px; line-height: 1.2; margin-top: 2px; color: var(--white); }
.note { max-width: var(--maxw); margin: 24px auto 0; color: var(--text-footer); font-size: 14px; font-weight: 500; }
.note a { color: var(--red); font-weight: 700; }

/* Detailed timetable table (row per session) */
.swatch-thai { background: var(--red); }
.swatch-boxing { background: var(--cat-women); }
.swatch-womens { background: #b23a86; }
.swatch-kids-teens { background: var(--cat-kids); }
.swatch-sparring { background: var(--cat-fighters); }
.swatch-strength { background: #2fae5a; }

.tt { border: 1px solid var(--hairline); }
.tt__head, .tt__row { display: grid; grid-template-columns: 172px 1.7fr 1.3fr 0.9fr 0.8fr; align-items: center; }
.tt__head { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.tt__head span { padding: 14px 18px; font-weight: 900; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); }
.tt__day { background: var(--surface-2); padding: 13px 18px; font-family: 'Anton', Impact, sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; color: var(--white); border-top: 1px solid var(--hairline); }
.tt__row { border-top: 1px solid var(--hairline-soft); border-left: 4px solid var(--red); }
.tt__row > span { padding: 14px 18px; font-size: 15px; color: var(--text-dim); font-weight: 600; }
.tt__time { color: var(--red) !important; font-weight: 700 !important; font-size: 14px; letter-spacing: .3px; }
.tt__class { color: var(--white) !important; font-weight: 700 !important; }
.tt--thai { border-left-color: var(--red); }
.tt--boxing { border-left-color: var(--cat-women); }
.tt--womens { border-left-color: #b23a86; }
.tt--kids { border-left-color: var(--cat-kids); }
.tt--sparring { border-left-color: var(--cat-fighters); }
.tt--strength { border-left-color: #2fae5a; }
.tt__row--tbc > span { color: var(--text-footer); font-weight: 500; font-style: italic; }

@media (max-width: 760px) {
  .tt__head { display: none; }
  .tt__row { grid-template-columns: 1fr; padding: 8px 0 12px; }
  .tt__row > span { padding: 3px 18px; }
  .tt__row > span[data-label]::before { content: attr(data-label) ": "; font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: var(--text-faint); }
  .tt__time { font-size: 16px; padding-top: 12px !important; }
  .tt__row--tbc > span { padding: 14px 18px; }
}

/* ---- Pull quote ---------------------------------------------------------- */
.pullquote { max-width: 1000px; margin-inline: auto; text-align: center; }
.pullquote__mark { font-family: 'Anton', Impact, sans-serif; font-size: 80px; color: var(--red); line-height: .5; }
.pullquote__text { font-family: 'Anton', Impact, sans-serif; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.1; text-transform: uppercase; letter-spacing: .5px; margin-top: 10px; }
.pullquote__by { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }

/* ---- Timeline ------------------------------------------------------------ */
.timeline-card { background: var(--ink); padding: 30px 26px; border-top: 4px solid var(--red); }
.timeline-card__year { font-family: 'Anton', Impact, sans-serif; font-size: clamp(36px, 4vw, 56px); color: var(--red); line-height: .9; }
.timeline-card__title { font-family: 'Anton', Impact, sans-serif; font-size: 22px; text-transform: uppercase; margin-top: 14px; line-height: 1; }
.timeline-card__text { color: var(--text-faint); font-size: 15.5px; font-weight: 500; margin-top: 10px; line-height: 1.55; }

/* ---- Footer -------------------------------------------------------------- */
.footer { background: var(--ink); padding: clamp(48px, 6vw, 80px) var(--pad-x) 36px; border-top: 1px solid var(--hairline); margin-top: clamp(48px, 7vw, 90px); }
.footer--flush { margin-top: 0; }
.footer__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer__logo { height: 42px; width: auto; }
.footer__wordmark { font-family: 'Anton', Impact, sans-serif; font-size: 24px; letter-spacing: 1px; }
.footer__tag { color: var(--text-footer); font-size: 14px; font-weight: 500; max-width: 260px; line-height: 1.5; }
.footer__head { font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; color: var(--red); margin-bottom: 14px; }
.footer__col-links { display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: 15px; color: var(--text-dim); }
.footer__col-links a:hover, .footer__col-links a:focus-visible { color: var(--red); }
.footer__bar { max-width: var(--maxw); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--hairline-soft); color: var(--text-legal); font-size: 13px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.footer__bar a:hover, .footer__bar a:focus-visible { color: var(--red); }
.footer__credit { max-width: var(--maxw); margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--hairline-soft); text-align: center; color: var(--text-legal); font-size: 12px; font-weight: 600; letter-spacing: .5px; }
.footer__credit a { color: var(--text-footer); font-weight: 700; }
.footer__credit a:hover, .footer__credit a:focus-visible { color: var(--red); }

/* Legal / long-form content pages */
.legal { max-width: 820px; margin-inline: auto; }
.legal__updated { color: var(--text-faint); font-size: 14px; font-weight: 500; margin-bottom: 30px; }
.legal h2 { font-family: 'Anton', Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; font-size: clamp(22px, 3vw, 32px); margin: 38px 0 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--text-muted); font-size: 16px; font-weight: 500; line-height: 1.65; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--red); font-weight: 700; }
.legal a:hover, .legal a:focus-visible { text-decoration: underline; }
.legal strong { color: var(--white); }

/* ---- Scroll reveal ------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(44px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* No-JS / reduced-motion: always show content */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Responsive - desktop/mobile nav switch at 920px
   ========================================================================== */
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .hero__title { font-size: clamp(48px, 12vw, 90px); }
  .section-head .lead-dim { white-space: normal; }
}

@media (max-width: 620px) {
  .stat { border-right: none; border-bottom: 1px solid var(--hairline); }
  .stat:last-child { border-bottom: none; }
  .est-badge { left: 0; }
}