/* ==========================================================================
   Pretoria Athletic FC — core stylesheet
   Palette sampled from the club crest. Square corners, hard outlines and
   offset blocks: the club's own look, not a rounded template.
   ========================================================================== */

:root {
  /* Brand — every value sampled from the club badge */
  --orange: #ec5a2e;
  --orange-hi: #ff7a4d;
  --orange-lo: #c4431e;
  --sky: #62d2f5;
  --sky-soft: #a9e5fb;
  --sky-deep: #1ba5d6;
  --navy: #002080;
  --navy-hi: #0b3fb0;
  --royal: #0b57c4;
  --ink: #001a6b;
  --ink-2: #002690;
  --ink-3: #0b3fb0;
  --cream: #faf3e6;
  --cream-2: #f2e7d3;
  --bone: var(--cream);
  --white: #ffffff;

  --text: #071540;
  --muted: #55618a;
  --muted-dark: #b3d9f2;
  --line: rgba(0, 32, 128, 0.16);
  --line-dark: rgba(169, 229, 251, 0.22);

  /* Type */
  --display: "Big Shoulders Display", "Anton", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(3.1rem, 12vw, 10.5rem);
  --fs-hero: clamp(3.2rem, 11.5vw, 9rem);
  --fs-h1: clamp(2.6rem, 8vw, 6.6rem);
  --fs-h2: clamp(2.1rem, 5.6vw, 4.8rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.3rem);
  --fs-h4: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --fs-sm: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Layout */
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1640px;
  --gap: clamp(18px, 2.4vw, 40px);
  --section-y: clamp(80px, 11vh, 170px);
  --radius: 0;
  --radius-lg: 0;

  /* the signature: a solid block offset behind an outlined box */
  --block: 7px 7px 0 var(--navy);
  --block-sky: 7px 7px 0 rgba(98, 210, 245, 0.32);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* z-index scale — no arbitrary values anywhere else in this file */
  --z-sticky: 50;
  --z-menu: 99;
  --z-nav: 100;
  --z-lightbox: 200;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

/* Big Shoulders is a variable face; everything set in it wants the heavy cut */
.brand__txt,
.mobile-menu__links a,
.hero__title,
.ticker span,
.stat__num,
.panel__num,
.svc-card__num,
.team-card__age,
.squad-tab,
.steps li::before { font-weight: 800; }

p { margin: 0; text-wrap: pretty; }

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

:focus-visible {
  outline: 3px solid var(--orange-hi);
  outline-offset: 3px;
}

/* keyboard users get a way past the nav */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-nav) + 1);
  padding: 14px 22px;
  background: var(--orange);
  border: 2px solid var(--sky);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.skip:focus { left: 0; }

/* ---------- layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-y); position: relative; }

.section--dark {
  background: var(--ink);
  color: var(--bone);
}

.section--tint { background: var(--cream-2); }

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--orange);
  flex: none;
}

/* display type is tightly leaded, so it needs explicit room beneath it */
.section-title { font-size: var(--fs-h2); margin-bottom: 18px; }
.svc-head .section-title { margin-bottom: 0; }
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.section--dark .lede { color: var(--muted-dark); }

.accent { color: var(--orange); }
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  --btn-bd: var(--sky);
  --btn-shadow: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-bd);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--btn-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.4s var(--ease);
  will-change: transform;
}

/* the offset block presses in on hover */
.btn:hover,
.btn:focus-visible { box-shadow: 2px 2px 0 var(--btn-shadow); }
.btn:active { box-shadow: 0 0 0 var(--btn-shadow); }

/* on navy surfaces a navy offset would vanish, so switch it to sky */
.section--dark .btn,
.hero .btn,
.footer .btn,
.quote .btn,
.vault .btn,
.path--club .btn { --btn-shadow: rgba(98, 210, 245, 0.5); }

.btn span { position: relative; z-index: 2; }

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }
.btn:hover { color: #fff; }

.btn .arw { transition: transform 0.45s var(--ease); position: relative; z-index: 2; }
.btn:hover .arw { transform: translateX(5px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; }
.btn--ghost::after { background: var(--orange); }
.btn--ghost:hover { color: #fff; --btn-bd: var(--orange); }

.btn--light { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--navy); }
.btn--navy { --btn-bg: var(--navy); }
.btn--sm { padding: 11px 22px; font-size: 0.72rem; box-shadow: 4px 4px 0 var(--btn-shadow); }
.btn--sm:hover { box-shadow: 2px 2px 0 var(--btn-shadow); }

/* a quieter third option, so a row is not always two heavy buttons */
.link-arw {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arw:hover { border-color: var(--orange); gap: 14px; }

/* ---------- scroll progress ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: calc(var(--z-nav) + 2);
  background: var(--orange);
  border-bottom: 2px solid var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: var(--z-sticky);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #fff;
  border: 2px solid var(--sky);
  box-shadow: 5px 5px 0 var(--navy);
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0.35s, box-shadow 0.25s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { box-shadow: 2px 2px 0 var(--navy); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-block: 16px;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease),
    box-shadow 0.45s var(--ease), transform 0.5s var(--ease);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav.is-stuck {
  background: rgba(0, 26, 107, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 9px;
  box-shadow: 0 2px 0 var(--sky);
}

.nav.is-hidden { transform: translateY(-105%); }

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  z-index: 2;
}

.brand img {
  width: auto;
  height: 76px;
  transition: height 0.45s var(--ease), transform 0.5s var(--ease);
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}
.brand:hover img { transform: rotate(-4deg); }

.nav.is-stuck .brand img { height: 58px; }

.brand__txt {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.brand__txt small {
  display: block;
  font-family: var(--body);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--orange-hi);
  margin-top: 4px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
}

.nav__links a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding-block: 6px;
  transition: color 0.3s var(--ease), transform 0.35s var(--ease);
}

.nav__links a:hover { transform: translateY(-3px); }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

/* [aria-current] rather than [aria-current="page"]: a section inside the
   current page is "location", and the bar should sit under that too */
.nav__links a:hover,
.nav__links a[aria-current],
.nav__links a.is-here { color: #fff; }
.nav__links a:hover::after,
.nav__links a[aria-current]::after,
.nav__links a.is-here::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta { display: inline-flex; }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 2px solid var(--sky);
  background: rgba(255, 255, 255, 0.1);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.burger span {
  display: block;
  width: 19px;
  height: 2px;
  background: #fff;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  padding: 116px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  overflow-y: auto;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu__links { position: relative; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__links a {
  font-family: var(--display);
  font-size: clamp(2.2rem, 11vw, 3.6rem);
  text-transform: uppercase;
  color: #fff;
  line-height: 1.08;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s;
}
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
.mobile-menu__links a:active { color: var(--orange); }
.mobile-menu__foot {
  position: relative;
  color: var(--muted-dark);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
  border-top: 2px solid var(--line-dark);
}
.mobile-menu__foot a:hover { color: var(--orange-hi); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--ink);
  overflow: hidden;
  color: #fff;
  padding-top: clamp(128px, 15vh, 164px);
  padding-bottom: clamp(28px, 5vh, 70px);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* class, never a style attribute: gsap clearProps empties inline styles */
  object-position: var(--crop-x, 50%) var(--crop-y, 40%);
  will-change: transform;
}
.crop-x-38 { --crop-x: 38%; }
.crop-x-45 { --crop-x: 45%; }
.crop-x-50 { --crop-x: 50%; }
.crop-x-55 { --crop-x: 55%; }
.crop-x-62 { --crop-x: 62%; }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 20, 84, 0.76) 0%, rgba(0, 20, 84, 0.18) 32%,
      rgba(0, 20, 84, 0.5) 62%, rgba(0, 18, 76, 0.95) 100%),
    linear-gradient(96deg, rgba(0, 26, 107, 0.7) 0%, rgba(0, 26, 107, 0.08) 62%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__grid { display: block; }

.hero__kicker {
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.65rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--orange-hi);
  margin-bottom: clamp(14px, 2vh, 26px);
}

.hero__title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: var(--fs-hero);
  line-height: 0.845;
  letter-spacing: -0.024em;
  margin-bottom: clamp(18px, 2.6vh, 34px);
}

/* the mask needs breathing room, or a sub-1 line-height clips the glyphs */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.1em 0.14em;
  margin-block: -0.1em -0.14em;
}
.hero__title .line > span { display: block; will-change: transform; }

/* With script running, the heading waits out of sight until the intro sets
   its start position. Without this it is painted in place first and then
   thrown down by the timeline, which reads as a stutter. The no-GSAP
   fallback adds .is-in, so nothing can leave it hidden. */
.js .hero__title:not(.is-in) .line > span { visibility: hidden; }

/* the three motto words light in sequence — the club's own rhythm, on a loop */
.hero__word { transition: color 0.4s var(--ease); }
.hero__word.is-on { color: var(--orange-hi); }

.hero__copy {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; align-items: center; }

/* quick facts strip along the floor of the hero */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--sky);
  border: 2px solid var(--sky);
  margin-top: clamp(26px, 4vh, 52px);
}
.hero__fact { background: var(--ink); padding: 16px clamp(12px, 1.6vw, 22px); }
.hero__fact b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
}
/* direct child only — the counter lives in a span inside the <b> and must
   keep the display size rather than pick up the label styling */
.hero__fact > span {
  display: block;
  margin-top: 7px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  border: 2px solid var(--sky);
}
.hero__cue::after {
  content: "";
  width: 4px;
  height: 8px;
  background: var(--orange);
  animation: cue 1.9s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-7px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* ---------- ticker ---------- */
.ticker {
  background: var(--sky);
  color: var(--navy);
  padding-block: 15px;
  overflow: hidden;
  border-block: 3px solid var(--navy);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: tick 34s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; }
.ticker span {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-inline: clamp(18px, 2.4vw, 34px);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  white-space: nowrap;
}
.ticker span::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--orange);
  border: 2px solid var(--navy);
  flex: none;
}

@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line-dark);
  border-block: 2px solid var(--line-dark);
}
.stat {
  background: var(--ink);
  padding: clamp(26px, 3.4vw, 48px) clamp(16px, 2vw, 34px);
  transition: background 0.4s var(--ease);
}
.stat:hover { background: var(--ink-2); }
.stat__num {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 0.9;
  color: var(--sky);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

/* ---------- partners ---------- */
.partners { padding-block: clamp(54px, 6.5vw, 100px); }
.partner-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: 34px;
}
.partner {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--sky);
  box-shadow: var(--block);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.4s var(--ease);
}
.partner:hover { box-shadow: 2px 2px 0 var(--navy); transform: translateY(-2px); }

/* Each logo arrived with its own baked-in background — white, navy, near-black
   — so the tile takes that colour rather than forcing one treatment that would
   make two of the three unreadable. Set per card via an inline background. */
.partner__logo {
  height: clamp(112px, 12vw, 148px);
  padding: 16px;
  border-bottom: 2px solid var(--navy);
  overflow: hidden;
}
/* object-fit letterboxes the mark inside a definite box. A percentage
   max-height would resolve against an auto-sized track and overflow. */
.partner__logo img { width: 100%; height: 100%; object-fit: contain; }

.partner__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px, 2vw, 26px);
}
.partner__role {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.partner__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---------- why we exist ---------- */
/* These carry photographs, not logos. .partner__logo is a short fixed-height
   box built to letterbox a mark, so a photograph in it came out as a sliver;
   a square frame crops both portrait and landscape sources sensibly. */
.why-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: 34px;
}
.why-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--sky);
  box-shadow: var(--block);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.4s var(--ease);
}
.why-card:hover { box-shadow: 2px 2px 0 var(--navy); transform: translateY(-2px); }
.why-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 2px solid var(--navy);
}
.why-card__media img {
  width: 100%;
  height: 100%;
  /* faces sit in the upper half of these frames */
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.8s var(--ease);
}
.why-card:hover .why-card__media img { transform: scale(1.05); }
.why-card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(18px, 2vw, 26px);
}
.why-card__role {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.why-card__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--navy);
}
.why-card p { color: var(--muted); font-size: 0.93rem; }

/* ---------- split (about) ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: center;
}
.split__media {
  grid-column: span 6;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* photographs carry the same outline + offset block as the buttons */
.split__media,
.gal__item,
.team-card {
  border: 2px solid var(--sky);
  box-shadow: var(--block);
}
/* a navy block is invisible on a navy ground, so lift it to sky there */
.section--dark .split__media,
.section--dark .gal__item,
.section--dark .team-card { box-shadow: var(--block-sky); }
.split__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
.split__body { grid-column: span 5 / -1; }
.split__body p + p { margin-top: 1.1em; }

.badge-note {
  margin-top: 34px;
  padding: 22px 26px;
  border-left: 3px solid var(--orange);
  background: rgba(236, 90, 46, 0.07);
  font-size: 0.98rem;
  color: var(--muted);
}
.section--dark .badge-note { background: rgba(236, 90, 46, 0.12); color: #d9dfef; }

/* ---------- vision / mission panels ---------- */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 2px;
  background: var(--line-dark);
}
.panel {
  padding: clamp(34px, 4.2vw, 68px);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.panel--orange { background: var(--orange); color: #fff; }
.panel--navy { background: var(--navy); color: #fff; }
.panel__num {
  font-family: var(--display);
  font-size: 5rem;
  line-height: 1;
  opacity: 0.17;
  position: absolute;
  top: 14px;
  right: 24px;
}
.panel h3 { font-size: var(--fs-h3); margin-bottom: 18px; }
.panel p { color: rgba(255, 255, 255, 0.87); }

/* ---------- checklist ---------- */
.checks { display: grid; gap: 14px; margin-top: 30px; }
.checks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 1rem;
}
.checks li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 4px;
  background: var(--orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* ---------- philosophy quote ---------- */
.quote {
  /* brighter than --ink so it reads as its own band, not a continuation */
  background: var(--navy-hi);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.quote__inner { position: relative; z-index: 1; text-align: center; }
.quote__text {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.4vw, 4rem);
  line-height: 1.07;
  text-transform: uppercase;
  max-width: 20ch;
  margin-inline: auto;
}
.quote__text .w {
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.25s linear;
}
.quote__text .w.on { color: #fff; }
.quote__text .w.hl.on { color: var(--sky); }
.quote__attr {
  margin-top: 36px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange-hi);
}

/* ---------- services ---------- */
.svc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(34px, 4.6vw, 66px);
}

.svc-viewport { overflow: hidden; }
.svc-track {
  display: flex;
  gap: var(--gap);
  padding-inline: var(--pad);
  width: max-content;
}
/* drag-to-scroll: anything that scrolls sideways says so with the cursor */
.is-draggable { cursor: grab; }
.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.is-dragging .svc-card,
.is-dragging .lt__table { pointer-events: none; }

.svc-card {
  position: relative;
  width: clamp(270px, 27vw, 400px);
  flex: none;
  padding: clamp(28px, 2.4vw, 42px);
  min-height: clamp(300px, 30vw, 400px);
  background: var(--ink);
  border: 2px solid var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: border-color 0.45s var(--ease), transform 0.55s var(--ease);
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.svc-card:hover { border-color: rgba(236, 90, 46, 0.55); transform: translateY(-6px); }
.svc-card:hover::before { transform: scaleX(1); }

.svc-card__num {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--sky);
}
.svc-card h3 {
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  margin-block: 26px 14px;
  color: #fff;
}
.svc-card p { color: var(--muted-dark); font-size: 0.96rem; }

.svc-progress {
  margin: 34px var(--pad) 0;
  height: 4px;
  background: var(--line);
  position: relative;
}
.svc-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: var(--orange);
  transform-origin: left;
}

/* ---------- team cards ---------- */
.teams-grid {
  display: grid;
  /* 360px keeps five squads as 3 + 2 rather than an orphaned fifth card */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: var(--gap);
}

.team-card {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform 0.6s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.4s var(--ease);
}
.team-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
  filter: grayscale(0.55) contrast(1.05);
}
.team-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 26, 107, 0.96) 6%,
    rgba(0, 26, 107, 0.6) 42%,
    rgba(0, 26, 107, 0.22) 100%
  );
  transition: background 0.6s var(--ease);
}
.team-card:hover {
  transform: translateY(-10px) rotate(-0.7deg);
  border-color: var(--orange);
  box-shadow: 9px 9px 0 var(--orange);
}
.team-card:hover .team-card__media img { transform: scale(1.09); filter: grayscale(0) contrast(1.05); }
.team-card:hover::after {
  background: linear-gradient(
    to top,
    rgba(0, 26, 107, 0.96) 6%,
    rgba(196, 67, 30, 0.42) 60%,
    rgba(236, 90, 46, 0.2) 100%
  );
}

/* Squads with no photograph on the card. Rather than an empty grey frame it
   becomes a solid card — same outline, same offset block, same type — so the
   row still reads as one set. */
.team-card--plain { background: var(--navy); }
.team-card--plain::after {
  background: linear-gradient(155deg, rgba(11, 63, 176, 0.6), rgba(0, 26, 107, 0) 64%);
}
/* The tall card and its floor-aligned text were shaped around a photograph.
   With none behind it the age label is the card, so it grows and the card
   stops holding open a space for an image that is not coming. */
.team-card--plain {
  min-height: clamp(240px, 26vw, 290px);
  justify-content: center;
}
.team-card--plain .team-card__age { font-size: clamp(3.4rem, 6vw, 5rem); }

button.team-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.team-card__body { padding: clamp(24px, 2.4vw, 34px); color: #fff; position: relative; }
.team-card__age {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  line-height: 0.86;
  text-transform: uppercase;
}
.team-card__league {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 12px;
  background: var(--navy);
  border: 2px solid var(--sky);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
}
.team-card__desc { margin-top: 14px; font-size: 0.94rem; color: rgba(255, 255, 255, 0.76); }

.team-card__meta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid var(--line-dark);
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted-dark);
}
.team-card__meta div { display: flex; justify-content: space-between; gap: 14px; }
.team-card__meta b { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.tbd { color: rgba(255, 255, 255, 0.4); font-style: italic; }

/* ==========================================================================
   SQUAD EXPLORER (teams page) — one unit: picker, squad card, league data
   ========================================================================== */
.squad-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(26px, 3vw, 42px);
}
.squad-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: 5px 5px 0 var(--navy);
  color: var(--navy);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.3s var(--ease);
}
.squad-tab small {
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.squad-tab:hover { box-shadow: 2px 2px 0 var(--navy); transform: translateY(-2px); }
.squad-tab[aria-selected="true"] {
  background: var(--orange);
  border-color: var(--sky);
  color: #fff;
  box-shadow: 5px 5px 0 var(--navy);
}
.squad-tab[aria-selected="true"] small { color: rgba(255, 255, 255, 0.85); }

.squad-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--gap);
  align-items: stretch;
  margin-bottom: var(--gap);
}
.squad-shot {
  position: relative;
  overflow: hidden;
  /* 320 was the room a squad photograph wanted. What stands here now is the
     age and two badges, and the white box beside it is a heading and a
     sentence, so both were left holding about a third of themselves empty. */
  min-height: 240px;
  background: var(--ink-2);
  border: 2px solid var(--sky);
  box-shadow: var(--block);
}
.squad-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.squad-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 20, 84, 0.92) 4%, rgba(0, 20, 84, 0.08) 62%);
}
.squad-shot__tag { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: #fff; }
.squad-shot__tag b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  /* the age is the card now that the photograph has gone, so it is sized to
     be read across the room rather than to sit politely on an image */
  font-size: clamp(3.4rem, 7vw, 6.2rem);
  line-height: 0.84;
  text-transform: uppercase;
}
/* level and competition sit together under the age, and wrap on a phone
   rather than running off the edge */
.squad-shot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.squad-shot__tag span {
  display: inline-block;
  padding: 5px 12px;
  background: var(--navy);
  border: 2px solid var(--sky);
  color: var(--sky);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.squad-facts {
  background: var(--white);
  border: 2px solid var(--sky);
  box-shadow: var(--block);
  padding: clamp(24px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.squad-facts h3 { font-size: var(--fs-h3); color: var(--navy); }
.squad-facts p { color: var(--muted); }
.squad-facts__rows {
  display: grid;
  gap: 2px;
  background: var(--navy);
  border: 2px solid var(--navy);
  margin-top: auto;
}
.squad-facts__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 13px 16px;
  background: var(--white);
  font-size: 0.9rem;
}
.squad-facts__row span {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.squad-facts__row b { color: var(--navy); font-weight: 700; }

/* ---------- next match countdown ---------- */
.nextup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
  margin-bottom: var(--gap);
  background: var(--navy);
  border: 2px solid var(--sky);
  box-shadow: 7px 7px 0 var(--orange);
  color: #fff;
}
.nextup__tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sky);
  padding: 7px 13px;
  white-space: nowrap;
}
.nextup__teams {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.nextup__when {
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.nextup__clock { display: flex; gap: 8px; }
.nextup__unit {
  min-width: 56px;
  padding: 9px 6px;
  text-align: center;
  background: var(--ink);
  border: 2px solid var(--sky);
}
.nextup__unit b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
}
.nextup__unit span {
  display: block;
  margin-top: 5px;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.nextup--live .nextup__tag { background: var(--orange); color: #fff; }

/* ---------- league tables / fixtures / results ---------- */
.lt { margin-top: 0; }

.lt__league {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border: 2px solid var(--sky);
  padding: 6px 13px;
  margin-bottom: 18px;
}

.lt__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 140px), 1fr));
  gap: 2px;
  background: var(--navy);
  border: 2px solid var(--navy);
  margin-bottom: 26px;
}
.lt__stat { background: var(--white); padding: 15px 18px; }
.lt__stat b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.lt__stat span {
  display: block;
  margin-top: 7px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.lt__form { display: flex; gap: 5px; }
.lt__form i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 800;
  color: #fff;
  background: var(--muted);
}
.lt__form i.w { background: #1c8a4e; }
.lt__form i.d { background: #6b7794; }
.lt__form i.l { background: var(--orange-lo); }

.lt__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: var(--gap);
  align-items: start;
}
/* grid children default to min-width:auto, which would let the wide table
   push the whole page sideways instead of scrolling inside .lt__scroll */
.lt__grid > *,
.lt__box { min-width: 0; }
.lt__side { display: grid; gap: var(--gap); min-width: 0; }

.lt__box {
  background: var(--white);
  border: 2px solid var(--sky);
  box-shadow: var(--block);
}
.lt__box h3 {
  font-size: 1.05rem;
  padding: 15px 18px;
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
}
.lt__scroll { overflow-x: auto; }

.lt__table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.lt__table th,
.lt__table td {
  padding: 9px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lt__table tbody tr { transition: background 0.2s var(--ease); }
.lt__table tbody tr:hover { background: rgba(0, 32, 128, 0.06); }
.lt__table th {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.lt__table th:nth-child(2),
.lt__table td:nth-child(2) { text-align: left; white-space: normal; min-width: 150px; }
.lt__table td:first-child,
.lt__table th:first-child { padding-left: 18px; }
.lt__table td:last-child,
.lt__table th:last-child { padding-right: 18px; font-weight: 800; color: var(--navy); }
.lt__table tr.us { background: rgba(236, 90, 46, 0.13); }
.lt__table tr.us:hover { background: rgba(236, 90, 46, 0.2); }
.lt__table tr.us td { font-weight: 700; }

.lt__match {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  transition: background 0.2s var(--ease);
}
.lt__match:hover { background: rgba(0, 32, 128, 0.04); }
.lt__match:last-child { border-bottom: 0; }
.lt__match time {
  grid-column: 1 / -1;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.lt__match .lt__teams strong { font-weight: 700; }
.lt__score {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.lt__kick { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lt__empty { padding: 22px 18px; color: var(--muted); font-size: 0.9rem; }

.lt__stamp { margin-top: 24px; font-size: 0.76rem; color: var(--muted); }
.lt__stamp a { color: var(--orange); font-weight: 700; }

/* the panel fades between squads rather than snapping */
.is-swapping { opacity: 0; transform: translateY(10px); }
.lt__panel,
.squad-panel,
.nextup { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }

/* ---------- gallery ---------- */
.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* the gap has to clear the 7px offset block on each tile */
  gap: clamp(16px, 1.4vw, 24px);
  grid-auto-flow: dense;
}
.gal__item {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  cursor: pointer;
  grid-column: span 4;
  aspect-ratio: 3 / 4;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the same crop-NN classes the heroes use: a wide tile crops hard
     vertically, and centre is rarely where the subject is */
  object-position: 50% var(--crop-y, 50%);
  transition: transform 0.85s var(--ease), filter 0.6s var(--ease);
}
.gal__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 26, 107, 0.8), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.gal__item:hover { box-shadow: 2px 2px 0 var(--orange); transform: translateY(-3px); }
.gal__item:hover img { transform: scale(1.07); }
.gal__item:hover::after { opacity: 1; }

.gal__item--wide { grid-column: span 8; aspect-ratio: 16 / 10; }
.gal__item--tall { grid-column: span 4; aspect-ratio: 3 / 4.6; }
.gal__item--half { grid-column: span 6; aspect-ratio: 4 / 3; }
.gal__item--full { grid-column: span 12; aspect-ratio: 21 / 9; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(0, 16, 66, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 60px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  border: 2px solid var(--sky);
  transform: scale(0.96);
  transition: transform 0.5s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__cap {
  margin-top: 18px;
  text-align: center;
  color: var(--muted-dark);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--sky);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.lightbox__close { top: 22px; right: 22px; font-size: 1.5rem; }
.lightbox__nav.prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--orange); }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  min-height: clamp(430px, 62vh, 640px);
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-bottom: clamp(40px, 6vh, 80px);
  padding-top: 150px;
}
.page-hero__media { position: absolute; inset: 0; overflow: hidden; }
.page-hero__media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% var(--crop-y, 50%);
  will-change: transform;
}

/* A page hero is a wide letterbox and these photographs are groups of people
   with their faces in the upper half, so each one says where its crop should
   sit. It has to be a class rather than a style attribute: the motion layer
   calls gsap clearProps on parallax images, which empties style entirely. */
/* top of frame: for a photograph whose subject is the thing in the sky */
.crop-0 { --crop-y: 0%; }
.crop-22 { --crop-y: 22%; }
.crop-30 { --crop-y: 30%; }
.crop-32 { --crop-y: 32%; }
.crop-35 { --crop-y: 35%; }
.crop-40 { --crop-y: 40%; }
.crop-45 { --crop-y: 45%; }
.crop-50 { --crop-y: 50%; }
.crop-60 { --crop-y: 60%; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 107, 0.8), rgba(0, 26, 107, 0.55) 45%, rgba(0, 26, 107, 0.97));
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { font-size: var(--fs-h1); }
.page-hero .lede { color: rgba(255, 255, 255, 0.8); margin-top: 22px; }

.crumbs {
  display: flex;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 20px;
}
.crumbs a:hover { color: var(--orange-hi); }
.crumbs span { color: var(--orange); }

/* ==========================================================================
   REGISTRATION — one route picker, one form
   ========================================================================== */
.reg { max-width: 1120px; margin-inline: auto; }

.reg-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--gap);
  margin-bottom: clamp(34px, 4vw, 56px);
  counter-reset: rs;
}
.reg-step {
  counter-increment: rs;
  position: relative;
  padding-top: 26px;
  border-top: 3px solid var(--navy);
}
.reg-step::before {
  content: counter(rs, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--orange);
  border: 2px solid var(--sky);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
}
.reg-step h3 { font-size: 1.25rem; color: var(--navy); margin: 18px 0 8px; }
.reg-step p { font-size: 0.93rem; color: var(--muted); }

/* the segmented control that picks which form you actually fill in */
.reg-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--navy);
  border: 2px solid var(--navy);
  margin-bottom: 14px;
}
.reg-switch button {
  padding: 13px 28px;
  background: var(--white);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.reg-switch button:hover { color: var(--navy); }
.reg-switch button[aria-selected="true"] { background: var(--orange); color: #fff; }

.reg-hint { font-size: 0.9rem; color: var(--muted); margin-bottom: 28px; max-width: 60ch; }

.reg-card {
  background: var(--white);
  border: 2px solid var(--sky);
  box-shadow: 9px 9px 0 var(--navy);
  padding: clamp(26px, 3vw, 46px);
}
.reg-card__head { margin-bottom: 28px; }
.reg-card__head h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); color: var(--navy); }
.reg-card__head p { margin-top: 14px; color: var(--muted); max-width: 62ch; }

.reg-need {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  margin-bottom: 30px;
  padding: 22px;
  background: var(--cream-2);
  border-left: 3px solid var(--sky-deep);
}
.reg-need li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--muted);
}
.reg-need li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex: none;
  background: var(--sky-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 9px no-repeat;
}

.reg-pane[hidden] { display: none; }

/* ---------- paths (home page teaser) ---------- */
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--gap);
}

.path {
  position: relative;
  padding: clamp(30px, 3.4vw, 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--sky);
  box-shadow: var(--block);
  transition: box-shadow 0.35s var(--ease), transform 0.4s var(--ease);
}
.path:hover { box-shadow: 2px 2px 0 var(--navy); transform: translateY(-3px); }
.path--club { background: var(--navy); color: #fff; }
.path--trial { background: var(--orange); color: #fff; }
.path__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.22);
  border: 2px solid var(--sky);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.path h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.path__sub { margin-top: 16px; color: rgba(255, 255, 255, 0.85); }

.steps { counter-reset: s; margin: 30px 0; display: grid; gap: 18px; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.9);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display);
  font-size: 0.95rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.path__foot { margin-top: auto; padding-top: 22px; }
.path__note { margin-top: 18px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }

/* forms */
.form { display: grid; gap: 20px; }
/* grid items stretch by default, which would make the submit button full-bleed */
.form > .btn { justify-self: start; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--dark .field label { color: var(--muted-dark); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 15px 17px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--text);
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 4px 4px 0 rgba(236, 90, 46, 0.3);
}
/* inline validation, never an alert box */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--orange-lo); }
.field .err { font-size: 0.78rem; color: var(--orange-lo); font-weight: 700; }
.form__hint { font-size: 0.8rem; color: var(--muted); }
.form-note {
  padding: 16px 20px;
  background: rgba(236, 90, 46, 0.08);
  border-left: 3px solid var(--orange);
  font-size: 0.86rem;
  color: var(--muted);
}

/* ---------- gated registration forms ---------- */
.vault {
  margin-top: clamp(34px, 4vw, 56px);
  padding: clamp(26px, 3vw, 44px);
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--sky);
  box-shadow: 9px 9px 0 var(--orange);
}
.vault__tag {
  display: inline-block;
  padding: 7px 15px;
  margin-bottom: 18px;
  background: var(--orange);
  border: 2px solid var(--sky);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vault__head h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.vault__head p { color: rgba(255, 255, 255, 0.85); max-width: 62ch; }

/* two beats: ask for a code, then enter it */
.vault__steps {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  margin-top: clamp(24px, 2.6vw, 34px);
}
.vault__steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.vault__step-n {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--orange);
  border: 2px solid var(--sky);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
}
.vault__steps b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.vault__steps li > div > p {
  margin: 6px 0 14px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.76);
}

.vault__form { margin-top: 0; }
.vault__form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
}
.vault__row { display: flex; flex-wrap: wrap; gap: 14px; }
.vault__row input {
  flex: 1 1 240px;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--sky);
}
.vault__row input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 4px 4px 0 rgba(236, 90, 46, 0.35);
}
.vault__row .btn { flex: none; }

.vault__hint { margin-top: 14px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.vault__hint a { color: var(--sky); font-weight: 700; }

.vault__msg { margin-top: 18px; font-size: 0.9rem; color: var(--sky); }
.vault__msg.is-error { color: #ffc4ae; }

.vault__files { margin-top: 24px; display: grid; gap: 12px; }
.vault__file {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--line-dark);
}
.vault__file b { display: block; font-size: 1rem; }
.vault__file span {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 58ch;
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  /* 260px lets all four cards sit on one row instead of breaking 3 + 1 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}
.contact-card {
  padding: clamp(28px, 3vw, 44px);
  border: 2px solid var(--line-dark);
  background: var(--ink-2);
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease),
    box-shadow 0.35s var(--ease);
}
/* the cards with a single destination are links end to end, so the whole box
   is the click target rather than just the line of text inside it */
/* Form fallbacks. mailto depends on the operating system having a mail app
   registered, which a visitor who reads mail at gmail.com in a browser does
   not. These sit in the status line and need nothing installed. */
.form-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}
.form-status__actions a,
.form-status__actions button {
  color: var(--orange);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
}

a.contact-card { display: block; cursor: pointer; }
.contact-card:hover,
a.contact-card:focus-visible {
  border-color: var(--sky);
  transform: translateY(-5px);
  box-shadow: var(--block-sky);
}
a.contact-card:hover p,
a.contact-card:hover span { color: var(--orange-hi); }
a.contact-card:active { transform: translateY(-2px); }
.contact-card__icon {
  width: 48px;
  height: 48px;
  background: var(--sky);
  border: 2px solid var(--navy);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.contact-card h3 { font-size: 1.3rem; color: #fff; margin-bottom: 12px; }
.contact-card a, .contact-card p { color: var(--muted-dark); font-size: 0.98rem; }
.contact-card a:hover { color: var(--orange-hi); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--orange);
  color: #fff;
  overflow: hidden;
  text-align: center;
  border-block: 3px solid var(--navy);
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: 22px; }
.cta-band p { max-width: 54ch; margin-inline: auto; color: rgba(255, 255, 255, 0.9); }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--bone); padding-top: clamp(60px, 8vw, 110px); position: relative; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--gap);
  padding-bottom: 56px;
}
.footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer__brand img { height: 112px; width: auto; }
.footer p { color: var(--muted-dark); font-size: 0.94rem; max-width: 34ch; }
.footer h4 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}
.footer__links { display: grid; gap: 11px; }
.footer__links a, .footer address a {
  color: var(--muted-dark);
  font-size: 0.94rem;
  transition: color 0.3s, transform 0.3s var(--ease);
  display: inline-block;
}
.footer__links a:hover, .footer address a:hover { color: var(--orange-hi); transform: translateX(4px); }
.footer address { font-style: normal; color: var(--muted-dark); font-size: 0.94rem; display: grid; gap: 11px; }
.footer__bottom {
  border-top: 2px solid var(--line-dark);
  padding-block: 26px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.42);
}
.social { display: flex; gap: 10px; }
.social a {
  width: 42px;
  height: 42px;
  border: 2px solid var(--line-dark);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.35s var(--ease), border-color 0.35s, transform 0.35s var(--ease);
}
.social a:hover { background: var(--orange); border-color: var(--sky); transform: translateY(-3px); }

/* ---------- motion base states (only when JS is on) ---------- */
.js [data-reveal] { opacity: 0; }
.js [data-split] { opacity: 0; }
.js [data-stagger] > * { opacity: 0; }

/* word masks produced by the splitter */
.splt {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.splt > span { display: inline-block; will-change: transform; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .split__media, .split__body { grid-column: 1 / -1; }
  .split__media { aspect-ratio: 16 / 11; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .squad-panel { grid-template-columns: 1fr; }
  .squad-shot { min-height: 280px; }
  .nextup { grid-template-columns: 1fr; gap: 16px; }
  .nextup__tag { justify-self: start; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; }
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
  .hero__cue { display: none; }
  /* The span classes track the SOURCE orientation: --wide, --half and --full
     only ever carry landscape photographs, the rest are portrait. So as the
     grid collapses, each tile keeps a frame its photo actually fits, instead
     of everything flattening to one ratio and cropping heads off. */
  .gal__item,
  .gal__item--tall { grid-column: span 6; aspect-ratio: 3 / 4; }
  /* two per row here, and a landscape photo next to a portrait leaves an
     obvious step in the row, so the landscape ones take the width instead */
  .gal__item--wide,
  .gal__item--half,
  .gal__item--full { grid-column: span 12; aspect-ratio: 16 / 9; }
  .svc-track { width: auto; flex-wrap: wrap; padding-inline: 0; }
  .svc-card { width: 100%; min-height: 0; }
  .svc-progress { display: none; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lt__grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .footer__top { grid-template-columns: 1fr; }
  /* stacked buttons read as ragged unless they share a width */
  .hero__actions,
  .cta-band .btns { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .cta-band .btns .btn,
  .path__foot .btn { display: flex; justify-content: center; }
  .form > .btn { justify-self: stretch; justify-content: center; }
  .gal__item,
  .gal__item--tall { grid-column: span 12; aspect-ratio: 3 / 4; }
  .gal__item--wide,
  .gal__item--half,
  .gal__item--full { grid-column: span 12; aspect-ratio: 16 / 10; }
  .hero__title { letter-spacing: -0.03em; }
  /* the hero ran ~60px past a 812px phone, which cut the second row of facts
     in half at the fold and read as broken rather than as more to scroll */
  .hero {
    padding-top: clamp(104px, 13vh, 128px);
    padding-bottom: clamp(20px, 3vh, 34px);
  }
  .hero__actions { margin-top: 20px; }
  .hero__facts { margin-top: clamp(18px, 2.4vh, 28px); }
  .hero__fact { padding: 13px 14px; }
  .stat { padding: 22px 18px; }
  .reg-switch { width: 100%; }
  .reg-switch button { flex: 1; padding: 13px 10px; }
  .squad-tab { flex: 1 1 auto; justify-content: center; }
  .nextup__clock { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal],
  .js [data-split],
  .js [data-stagger] > * { opacity: 1 !important; }
  .ticker__track { animation: none; }
}