/* Self-hosted fonts (latin subset), was Google Fonts */
@font-face {
  font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/anton-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
}

:root {
  --ink: #0c0c0c;
  --ink-2: #161616;
  --ink-3: #242424;
  --bone: #f2efe9;
  --bone-2: #e6e1d8;
  --white: #ffffff;
  --muted: #8d8d8d;
  --muted-dark: #5a5750;
  --red: #d7141a;
  --red-dark: #b00f14;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --header-h: 72px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
}
em { font-style: normal; color: var(--red); }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 8px 14px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0.95em 1.6em;
  border: 2px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-lg { font-size: 0.85rem; padding: 1.15em 2em; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); }
.btn-line { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-line:hover { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn-line-dark { border-color: var(--ink); color: var(--ink); }
.btn-line-dark:hover { background: var(--ink); color: var(--bone); }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--white);
  transition: background-color 0.25s, border-color 0.25s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled,
.site-header:has(.site-nav.open) {
  background: rgba(12,12,12,0.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom-color: var(--ink-3);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand-text {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.15rem; line-height: 1; letter-spacing: 0.02em;
}
.brand-text span { color: var(--red); }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a:not(.btn) {
  text-decoration: none; font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.85;
}
.site-nav a:not(.btn):hover { opacity: 1; color: var(--red); }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 12px 10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--white); transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(12,12,12,0.98); padding: 8px 16px 24px;
    border-bottom: 1px solid var(--ink-3);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--ink-3); font-size: 0.9rem; }
  .site-nav .btn { margin-top: 20px; }
}

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--white);
  padding-top: calc(var(--header-h) + 48px);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(0.75);
  opacity: 0.8;
}
/* Red duotone wash + fade to black, turns the low-res footage into texture */
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--red); mix-blend-mode: multiply; opacity: 0.55;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(12,12,12,0.9) 0%, rgba(12,12,12,0.6) 40%, rgba(12,12,12,0) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 25%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 24px;
}
.hero-copy { position: relative; z-index: 1; padding-bottom: 56px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px; padding: 6px 14px 6px 6px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
  font-size: 0.85rem; text-decoration: none; color: #e8e8e8;
  transition: border-color 0.15s;
}
.hero-pill:hover { border-color: var(--red); }
.hero-pill span {
  background: var(--red); color: var(--white); border-radius: 999px;
  padding: 3px 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.hero h1 { font-size: clamp(3rem, 6.4vw, 5.25rem); line-height: 0.95; margin-bottom: 24px; }
.hero-sub { font-size: 1.05rem; color: #cfcfcf; max-width: 26em; margin: 0 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-fighters {
  /* Bleeds left into the gutter so the fighters read bigger than their column */
  justify-self: end; width: 125%; max-width: 760px; margin-left: -25%;
  mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

.hero-stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stats div { padding: 24px 0 32px; }
.hero-stats div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.15); }
.hero-stats dt { font-family: var(--display); font-size: 2.2rem; line-height: 1; color: var(--white); }
.hero-stats dd { margin: 6px 0 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 8px; }
  .hero-sub { max-width: 32em; }
  .hero-fighters { justify-self: center; width: 100%; max-width: 560px; margin-left: 0; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-stats div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.15); }
}

/* Ticker */
.ticker { background: var(--red); color: var(--white); overflow: hidden; padding: 14px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 80s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  display: flex; align-items: center; gap: 28px; margin-right: 28px;
  font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.04em;
  white-space: nowrap;
}
.ticker span::after { content: "✕"; font-family: var(--body); font-size: 0.9rem; opacity: 0.7; }
/* Runs left to right: the track holds 4 copies of the list; start shifted by half (2 copies), slide back to 0 */
@keyframes ticker { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Sections */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-bone { background: var(--bone); color: var(--ink); }
.section-ink { background: var(--ink); color: var(--white); }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.section-head h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0; }
.section-head-split { display: flex; justify-content: space-between; align-items: end; gap: 32px; max-width: none; }
.section-head-split > p { max-width: 26em; margin: 0; color: var(--muted-dark); }
.section-ink .section-head-split > p { color: #bdbdbd; }
.section-ink .section-head-split strong { color: var(--white); }
.kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--red);
}
.kicker::before { content: ""; width: 32px; height: 2px; background: currentColor; }

@media (max-width: 760px) {
  .section-head-split { flex-direction: column; align-items: start; }
}

/* Classes */
.classes { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.class-tabs { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.class-tab {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0; background: none; border: 0; border-bottom: 1px solid var(--bone-2);
  font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1;
  text-transform: uppercase; text-align: left; color: #b9b3a8; cursor: pointer;
  transition: color 0.15s, padding-left 0.2s;
}
.class-tab .num { font-family: var(--body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: inherit; }
.class-tab:hover { color: var(--ink); }
.class-tab[aria-selected="true"] { color: var(--ink); padding-left: 12px; box-shadow: inset 4px 0 0 var(--red); }
.class-tab[aria-selected="true"] .num { color: var(--red); }

.class-panel { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--white); }
.class-panel[hidden] { display: none; }
.class-panel img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.class-body { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; }
.class-body h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.class-body p { color: var(--muted-dark); margin: 0 0 28px; }
.class-meta { margin: auto 0 0; display: grid; gap: 16px; }
.class-meta div { border-top: 1px solid var(--bone-2); padding-top: 12px; }
.class-meta dt { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--red); }
.class-meta dd { margin: 4px 0 0; font-weight: 600; }

@media (max-width: 1000px) {
  .class-panel { grid-template-columns: 1fr; }
  .class-panel img { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .classes { grid-template-columns: 1fr; }
  .class-tabs { flex-direction: row; flex-wrap: wrap; border-top: 0; gap: 8px; }
  .class-tab {
    font-size: 1.25rem; padding: 10px 16px; border: 2px solid var(--ink); gap: 8px;
    color: var(--ink);
  }
  .class-tab .num { display: none; }
  .class-tab[aria-selected="true"] { background: var(--ink); color: var(--bone); padding-left: 16px; box-shadow: none; }
}

/* Coaches */
.coach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.coach-photo { overflow: hidden; margin-bottom: 24px; background: var(--ink-2); }
.coach-photo img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 25%;
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.3s, transform 0.4s;
}
.coach:hover .coach-photo img { filter: grayscale(0); transform: scale(1.03); }
.coach h3 { font-size: 2rem; margin-bottom: 6px; }
.coach-role { margin: 0 0 16px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--red); }
.coach ul { list-style: none; margin: 0; padding: 0; }
.coach li { padding: 10px 0; border-top: 1px solid var(--ink-3); color: #cfcfcf; font-size: 0.95rem; }

@media (max-width: 700px) { .coach-grid { grid-template-columns: 1fr; gap: 48px; } }

.team { margin-top: clamp(56px, 7vw, 88px); }
.team-title, .also-title {
  font-family: var(--body); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 20px;
}
.team-title { color: var(--muted); }
.team-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-top: 1px solid var(--ink-3);
}
.team-grid li { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--ink-3); }
.team-grid strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; }
.team-grid span { font-size: 0.8rem; color: var(--muted); }

/* Also on the timetable */
.also { margin-top: clamp(48px, 6vw, 72px); }
.also-title { color: var(--red); }
.also-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--bone-2); border: 2px solid var(--bone-2);
}
.also-grid li { background: var(--bone); padding: 20px 24px; }
.also-grid strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.4rem; text-transform: uppercase; line-height: 1.1; margin-bottom: 4px; }
.also-grid span { font-size: 0.9rem; color: var(--muted-dark); }
@media (max-width: 900px) { .also-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .also-grid { grid-template-columns: 1fr; } }

/* Memberships */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan {
  display: flex; flex-direction: column;
  padding: 32px; border: 1px solid var(--ink-3); background: var(--ink-2);
}
.plan-featured { border-color: var(--red); box-shadow: inset 0 4px 0 var(--red); }
.plan h3 { font-size: 1.6rem; margin-bottom: 16px; }
.plan-price { margin: 0 0 24px; color: var(--muted); font-size: 0.9rem; }
.plan-price span { font-family: var(--display); font-size: 3.5rem; line-height: 1; color: var(--white); margin-right: 4px; }
.plan ul { list-style: none; margin: 0 0 32px; padding: 0; }
.plan li { padding: 10px 0; border-top: 1px solid var(--ink-3); color: #cfcfcf; font-size: 0.95rem; }
.plan .btn { margin-top: auto; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* Family */
.family { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.family-photo { margin: 0; position: relative; }
.family-photo::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  background: var(--red); z-index: 0;
}
.family-photo img { position: relative; z-index: 1; width: 100%; }
.family-copy h2 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.family-copy > p { color: var(--muted-dark); font-size: 1.05rem; margin: 0 0 32px; }
.family-copy blockquote { margin: 0; padding: 24px 0 0; border-top: 2px solid var(--ink); }
.family-copy blockquote p { font-size: 1.15rem; font-weight: 500; line-height: 1.5; margin: 0 0 12px; }
.family-copy blockquote footer { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--red); }

@media (max-width: 860px) {
  .family { grid-template-columns: 1fr; }
  .family-photo { margin-right: 16px; }
}

/* Booking */
.booking-widget {
  background: var(--white);
  border: 1px solid var(--bone-2);
  min-height: 400px;
  overflow: hidden;
}
#teamup-mount { container-type: inline-size; }
/* TeamUp shows an instructors/filter sidebar (270px) whenever its iframe is
   992px or wider. Once there's room (722px + 270px = 992px), widen the iframe
   by 270px and slide it left so the sidebar sits outside the clipped box and
   the calendar gets the full width. Narrower than that, TeamUp hides the
   sidebar itself, so the iframe is left alone. */
@container (min-width: 722px) {
  #teamup-mount iframe {
    width: calc(100% + 270px) !important;
    max-width: none;
    margin-left: -270px;
  }
}
/* On desktop, let the timetable grow to its content height, up to 1400px
   (TeamUp itself would cap it at the window height). --teamup-content-h is
   set from TeamUp's own height messages in main.js. */
@media (min-width: 761px) {
  /* Only the box that holds the iframe; teamup.js also adds an empty
     placeholder div that must stay collapsed */
  #teamup-mount div:has(> iframe),
  #teamup-mount iframe {
    height: max(600px, min(1400px, var(--teamup-content-h, 1400px))) !important;
  }
}
.booking-loading { margin: 0; padding: 48px 16px; text-align: center; color: var(--muted); }

/* Location */
.location { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.location h2 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.location address { font-style: normal; font-size: 1.1rem; line-height: 1.7; margin-bottom: 32px; color: #bdbdbd; }
.location-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.map { background: var(--ink-2); }
.map iframe { width: 100%; height: 460px; border: 0; }

@media (max-width: 860px) {
  .location { grid-template-columns: 1fr; }
  .map iframe { height: 340px; }
}

/* Footer */
.site-footer { background: var(--ink); color: var(--muted); padding: 64px 0 32px; overflow: hidden; border-top: 1px solid var(--ink-3); }
.footer-mark {
  margin: 0 0 48px;
  font-family: var(--display); text-transform: uppercase; line-height: 0.85;
  font-size: clamp(3rem, 13.5vw, 11.5rem); letter-spacing: -0.01em;
  color: var(--ink-2);
  -webkit-text-stroke: 1px var(--ink-3);
  white-space: nowrap;
}
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 0; border-top: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-nav a, .footer-email {
  text-decoration: none; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: #cfcfcf;
}
.footer-nav a:hover, .footer-email:hover { color: var(--red); }
.footer-legal { margin: 24px 0 0; font-size: 0.8rem; }

.coach-title {
  display: inline-block; margin: 0 0 12px; padding: 4px 10px;
  background: var(--red); color: var(--white);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
}

/* Instagram links */
.btn .icon { margin-right: 8px; flex-shrink: 0; }
.footer-contact { display: flex; align-items: center; gap: 20px; }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--ink-3); border-radius: 50%;
  color: #cfcfcf; transition: color 0.15s, border-color 0.15s;
}
.footer-social:hover { color: var(--red); border-color: var(--red); }

/* Headings that should stay on one line: shrink with the screen on phones */
.section-head .h2-one-line { white-space: nowrap; font-size: clamp(1.5rem, 8vw, 4rem); }

/* Instagram in the header: icon only on desktop, icon + label in the mobile menu */
.site-nav .nav-social { display: inline-flex; align-items: center; gap: 10px; padding: 8px; margin: -8px; }
.nav-social-label { display: none; }
@media (max-width: 860px) {
  .nav-social-label { display: inline; }
  .site-nav .nav-social { padding: 16px 0; margin: 0; }
}

/* ---------------------------------------------------------------
   Gold accents (after the 2026 membership posters).
   Used only on dark sections; red stays for buttons and CTAs.
   --------------------------------------------------------------- */
:root {
  --gold: #d9ae55;
  --gold-metal: linear-gradient(180deg, #fff0b8 0%, #f1c965 30%, #c8922f 58%, #8f5f1c 78%, #e4bc5f 100%);
}
.gold-text,
.hero h1 em,
.hero-stats dt,
.plan-price span {
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Warm glow behind the headline gold, like the poster lettering */
.hero h1 em { filter: drop-shadow(0 2px 14px rgba(217, 174, 85, 0.25)); }

/* Kickers on dark sections */
.section-ink .kicker { color: var(--gold); }

/* Head Coach badge */
.coach-title { background: var(--gold-metal); color: var(--ink); }

/* Featured membership: gold frame instead of red */
.plan-featured {
  border-color: var(--gold);
  box-shadow: inset 0 4px 0 var(--gold), 0 0 40px rgba(217, 174, 85, 0.12);
}