/* ============================================================
   MÄRJAMAA VIKAT RUGBY CLUB — style.css
   PHASE 1: variables, globals, header, hero, next match card
   ------------------------------------------------------------
   Colour rules:
   - Gold   = championships / legacy / prestige (primary accent)
   - Green  = ONLY join / recruitment CTAs
   - Red    = ONLY small match accents
   - Black/White = base
   ============================================================ */

/* Supplied script font for the Dynasty tagline only */
@font-face {
  font-family: "Brittany Signature";
  src: url("../fonts/BrittanySignature.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. CSS VARIABLES (edit colours here) ---------- */
:root {
  /* Base */
  --black:        #0a0a0b;   /* page background */
  --black-soft:   #121214;   /* card / section background */
  --black-card:   #16161a;   /* raised card */
  --white:        #ffffff;
  --grey:         #a8a8ad;   /* muted body text */
  --grey-dark:    #6b6b70;

  /* Accents */
  --gold:         #eba101;   /* primary gold — richer premium amber */
  --gold-soft:    #b88800;   /* darker gold for hover */
  --gold-bright:  #f0b71f;   /* slightly lifted gold for small glints only */
  --green:        #0b5c17;   /* crest green — join / recruitment CTA only */
  --green-dark:   #0b5c17;
  --green-stat:   #28753b;   /* darker result/stat green on match plaques */
  --red:          #e23b3b;   /* small match accents only */

  /* Lines / borders */
  --line:         rgba(255, 255, 255, 0.08);
  --line-gold:    rgba(235, 161, 1, 0.45);

  /* Master opacity for LARGE ambient section background images only.
     Adjust every big section background from one place. Does NOT affect
     local plaque/card/panel/hero artwork. */
  --section-bg-opacity: 0.80;

  /* One continuous post-hero page background. The image file lives at
     images/master-page-bg-3840.webp. Keep section/card/plaque opacity
     independent from this master layer. */
  --master-bg-image: url("../images/master-page-bg-3840.webp");
  --master-bg-opacity: 0.80;
  --master-bg-size: 100% auto;
  --master-bg-position-x: center;
  --master-bg-position-y: top;
  --master-bg-repeat: no-repeat;

  /* Layout */
  --maxw:         1780px;     /* slightly wider — pushes composition a touch further out */
  --radius:       10px;
  --radius-sm:    6px;

  /* Type */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  /* Teko — championship numeric display, Dynasty plaque numbers only.
     Fallback is generic sans-serif (NOT Oswald) so Teko either applies or
     fails to an obviously different face — no silent Oswald masking. */
  --font-numeric: "Teko", sans-serif;
  /* Jockey One — Dynasty section heading only */
  --font-heading: "Jockey One", "Oswald", sans-serif;
  /* Shared charcoal used by BOTH the hero tail and Dynasty top so they
     dissolve through one common atmosphere (no seam). */
  --charcoal: #0d0d11;

  /* Header height (used to offset anchor scrolling) */
  --header-h:     84px;
}

/* ---------- 2. RESET / GLOBALS ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Fixed header: keep anchor targets clear of the floating bar */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Centered width wrapper */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 56px;        /* sits closer to edges; less centered feel */
}

/* Utility colours */
.text-gold  { color: var(--gold); }
.text-red   { color: var(--red); }

/* Small uppercase label above headings */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ---------- 3. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Gold = legacy / primary */
.btn--gold {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
/* Hover: invert to white fill with gold text/icon */
.btn--gold:hover {
  background: var(--white);
  color: var(--gold);
  border-color: var(--gold);
}

/* Outline (secondary, on dark) */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--white); }

/* Green = JOIN / recruitment only.
   Outlined by default (dark inside + crest-green border/text),
   fills crest green with white text on hover. */
.btn--join {
  background: rgba(11, 92, 23, 0.12);
  color: #2f9d44;                 /* lifted crest green so it reads on dark */
  border-color: var(--green);
}
.btn--join:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

/* Inline icon inside buttons (e.g. Join the Club people icon) */
.btn__icon { flex-shrink: 0; margin-left: 2px; }

/* ============================================================
   4. HEADER / NAVIGATION  (blended over hero — Version_2.png)
   ============================================================ */
.site-header {
  position: fixed;          /* floating sticky — stays visible while scrolling */
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* Page-top state: NO slab, NO blur, NO box, NO hard edge. The header
     bar itself is transparent; a single ::before surface layer paints a
     dark-to-transparent vertical fade that guarantees readability behind
     the nav and resolves naturally ~22px below the header's lower edge.
     (Compact by design — this is NOT the old 160px hero scrim.) */
  background-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* The fade surface. Darkest behind the logo/nav, transparent at the bottom;
   lives just inside the header's own area and dies a touch below its edge. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + 22px);
  background: linear-gradient(180deg,
    rgba(8, 8, 10, 0.92) 0%,
    rgba(8, 8, 10, 0.86) 42%,
    rgba(8, 8, 10, 0.55) 74%,
    rgba(8, 8, 10, 0.20) 90%,
    rgba(8, 8, 10, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Header content rides above the fade. */
.header-inner { position: relative; z-index: 1; }
/* Sticky state (js/header.js adds .is-scrolled once the page scrolls):
   compact + more solid, ONE restrained lower hairline, still no blur,
   no glass, no thick shadow. The bar goes solid; the fade behind it is
   simply covered, so nothing pops on toggle. */
.site-header.is-scrolled {
  background-color: rgba(8, 8, 10, 0.94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);   /* hairline only */
}
/* Compact once sticky */
.site-header.is-scrolled .header-inner { height: 68px; }
.site-header.is-scrolled .brand__logo { width: 46px; height: 46px; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  transition: height 0.25s ease;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 14px; }
.brand__logo {
  width: 54px; height: 54px;
  object-fit: contain;
  transition: width 0.25s ease, height 0.25s ease;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--gold);
}
.brand__sub {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--grey);
}

/* Desktop nav (centered) */
.main-nav { margin-left: auto; }
.nav-list { display: flex; gap: 20px; }
.nav-item { position: relative; }
.nav-link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  white-space: nowrap;          /* labels never wrap to two lines */
  color: var(--white);
  padding-bottom: 6px;
  transition: color 0.15s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(235, 161, 1, 0.6);  /* soft gold glow */
  transition: width 0.2s ease;
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after { width: 100%; }
.nav-link.is-active { color: var(--gold); }
.nav-link.is-active::after { width: 100%; }

/* Beach Rugby Festival is a related event microsite, visually separated from
   the club navigation. The quiet divider behaves as the requested “|” without
   adding a non-semantic text node to the menu. */
.nav-item--festival {
  margin-left: 2px;
  padding-left: 20px;
}
.nav-item--festival::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.22);
}
.nav-link--festival {
  color: var(--white);
}
.nav-link--festival::after {
  background: #78d9f5;
  box-shadow: 0 0 8px rgba(120, 217, 245, 0.5);
}
.nav-link--festival:hover,
.nav-link--festival:focus-visible {
  color: #8fe3fb;
}
.nav-link--festival:focus-visible {
  outline-color: rgba(120, 217, 245, 0.78);
}

/* --- Dropdown navigation (desktop ≥721px; groups reuse [data-nav-sub]) --- */
/* Parent triggers are real <button>s styled as nav links */
.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-chevron {
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.nav-item--has-sub:hover .nav-chevron,
.nav-item--has-sub:focus-within .nav-chevron,
.nav-item--has-sub.is-open .nav-chevron { transform: rotate(180deg); }

/* Clear keyboard focus on all top-level nav triggers */
.nav-link:focus-visible {
  outline: 2px solid rgba(235, 161, 1, 0.7);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Compact dropdown panel — opaque dark, restrained gold hairline */
.nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 216px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
  background: rgba(12, 12, 16, 0.97);
  border: 1px solid var(--line);
  border-top: 2px solid rgba(235, 161, 1, 0.55);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 60;
}
/* Invisible hover bridge across the 12px gap so the panel doesn't
   close while the pointer travels from the trigger to the panel */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -13px; left: 0; right: 0;
  height: 13px;
}
.nav-item--has-sub:hover > .nav-sub,
.nav-item--has-sub:focus-within > .nav-sub,
.nav-item--has-sub.is-open > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-sub a {
  display: block;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-sub a:hover,
.nav-sub a:focus-visible {
  color: var(--gold);
  background: rgba(235, 161, 1, 0.06);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-sub, .nav-chevron { transition: none; }
}

/* --- Nav fit for the expanded IA --------------------------------
   The festival link is intentionally long. Below 1500px the image CTA steps
   out first; below 1240px the remaining labels compress; below 1080px the
   existing drawer takes over. */
@media (max-width: 1240px) {
  .nav-list { gap: 13px; }
  .nav-link { font-size: 0.77rem; letter-spacing: 0.9px; }
  .nav-parent { gap: 5px; }
  .nav-item--festival { padding-left: 15px; }
}
.header-cta { margin-left: 8px; }
/* Desktop header CTA uses one dark PNG artwork. Hover keeps the same image
   and adds only a restrained physical lift and faint gold edge presence. */
.header-image-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: clamp(128px, 8.8vw, 168px);
  margin-left: 8px;
  text-decoration: none;
  flex-shrink: 0;
  transform: translateY(0) scale(1);
  transition: transform 0.20s ease, filter 0.20s ease;
}
.header-image-cta__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.header-image-cta:hover,
.header-image-cta:focus-visible {
  transform: translateY(-2px) scale(1.012);
  filter:
    brightness(1.055)
    contrast(1.02)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 6px rgba(235, 161, 1, 0.17));
}
.header-image-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .header-image-cta { transition: none; }
  .header-image-cta:hover,
  .header-image-cta:focus-visible { transform: none; }
}

/* Free enough horizontal room for the long festival label before the
   navigation hands over to the existing drawer at 1080px. */
@media (max-width: 1500px) {
  .header-image-cta { display: none; }
}

/* Mobile toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Active (X) state, toggled by JS */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Burger visibility override — placed AFTER the .nav-toggle base rule so it
   wins by source order (equal specificity). Below 1080px the desktop nav
   hides and the burger shows; above, the base display:none applies. */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* Mobile slide-down nav */
/* Opaque full-height drawer: nothing (Hero, its Join CTA) shows through
   beneath the open menu. Sits in-flow under the fixed header bar. */
.mobile-nav {
  display: none;
  background: #0c0c0f;                    /* fully opaque drawer */
  border-top: 1px solid var(--line);
  padding: 16px 24px 28px;
}
.mobile-nav.is-open {
  display: block;
  height: calc(100dvh - var(--header-h)); /* cover the viewport below the bar */
  overflow-y: auto;
}
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__festival-item {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(120, 217, 245, 0.24);
}
.mobile-nav a.mobile-nav__festival {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(120, 217, 245, 0.16);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.mobile-nav a.mobile-nav__festival:hover,
.mobile-nav a.mobile-nav__festival:focus-visible {
  color: #8fe3fb;
  background: rgba(120, 217, 245, 0.045);
  outline: none;
}
/* Expandable groups (accordion) — comfortable touch targets */
.mobile-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--white);
  padding: 12px 0;
  text-align: left;
}
.mobile-group__toggle .nav-chevron { transition: transform 0.18s ease; }
.mobile-group.is-open .mobile-group__toggle { color: var(--gold); }
.mobile-group.is-open .mobile-group__toggle .nav-chevron { transform: rotate(180deg); }
.mobile-group__toggle:focus-visible {
  outline: 2px solid rgba(235, 161, 1, 0.7);
  outline-offset: -2px;
}
/* Collapsed by default; only the open group shows its links */
.mobile-group__list {
  display: none;
  padding-left: 16px;
}
.mobile-group.is-open .mobile-group__list { display: flex; flex-direction: column; }
.mobile-group__list a {
  font-size: 0.84rem;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-group__list li:last-child a { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  .mobile-group__toggle .nav-chevron { transition: none; }
}
.mobile-nav a.mobile-nav__cta {
  display: flex;
  width: min(100%, 168px);
  min-height: 0;
  margin: 20px auto 0;
  padding: 0;
  border: 0;
  line-height: 0;
  transition: transform 0.20s ease, filter 0.20s ease;
}
.mobile-nav__cta img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.mobile-nav a.mobile-nav__cta:hover,
.mobile-nav a.mobile-nav__cta:focus-visible {
  transform: translateY(-2px) scale(1.012);
  filter:
    brightness(1.055)
    contrast(1.02)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 6px rgba(235, 161, 1, 0.17));
  outline: none;
}

/* ============================================================
   5. HERO SECTION  (BEST.png — text left, match card right)
   ============================================================ */
.hero {
  position: relative;
  /* Hero art is supplied pre-graded from Photoshop and renders at FULL
     strength: no CSS gradients, scrims, tints or overlays on this layer.
     The single approved artwork lives in .hero__bg. */
  background-color: var(--black-soft); /* charcoal backing before art loads */
  /* Compact hero: content begins below the nav with breathing room */
  padding-top: calc(var(--header-h) + 73px);   /* +45px breathing room under header */
  padding-bottom: 120px;        /* slightly longer hero tail: balances the CTA→divider
                                   gap with the navbar underline→title-arc gap */
  min-height: 620px;            /* keeps the action photo cinematic without the card */
  overflow: hidden;
}
/* ------------------------------------------------------------
   Hero ARTWORK layer (.hero__bg) — gallery slides, under the content.
   Desktop sizing rule: every slide always scales to exactly 100% of
   the visible hero width; height follows the aspect ratio. Only the
   top/bottom may crop against the hero height — never a horizontal
   crop, never wider than the hero. A 3840×2160 source therefore keeps
   the same predictable horizontal composition at 1080p and at 4K.
   ------------------------------------------------------------ */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;                      /* under .hero__inner (z-index: 2) */
  overflow: hidden;
  background: var(--black-soft);   /* backing behind letterboxed art */
}
.hero__bg .hero-slide {            /* one slide = a full-hero frame */
  position: absolute;
  inset: 0;
  overflow: hidden;                /* the frame performs the vertical crop */
  opacity: 0;
  transition: opacity 1.1s ease;   /* gentle crossfade — no zoom/pan */
}
.hero__bg .hero-slide.is-active { opacity: 1; }
.hero__bg .hero-slide img {
  position: absolute;
  left: 0;                         /* left/right are NEVER cropped      */
  width: 100%;                     /* ALWAYS exactly the hero width     */
  max-width: none;                 /* immune to the global img rule     */
  height: auto;                    /* natural ratio — never stretched   */
  top: var(--focal-y, 50%);        /* per-slide vertical focal point    */
  transform: translateY(calc(-1 * var(--focal-y, 50%)));
  object-fit: initial;
}
@media (prefers-reduced-motion: reduce) {
  /* Near-instant swap; manual arrows still work (autoplay is off in JS) */
  .hero__bg .hero-slide { transition: opacity 0.01s linear; }
}
/* Tall portrait layouts only (hero collapses to one column ≤980px): a
   16:9 slide at 100% width would cover only a thin band of the tall
   hero, so small screens fill the frame instead — the one place a
   horizontal crop is allowed. Desktop (>980px) NEVER uses cover or
   height:100% sizing. */
@media (max-width: 980px) {
  .hero__bg .hero-slide img {
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--focal-y, 50%);
  }
}

/* Hero gallery controls — positioned from the Match Command top border
   (the hero divider). The plaque row overlaps upward by
   --match-command-plaque-overlap; the arrows sit halfway into that overlap
   using --hero-gallery-overlap-offset, instead of a hard-coded page Y value. */
.hero__gallery-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-gallery-overlap-offset); /* divider - half plaque overlap */
  height: 0;                               /* zero-height line; buttons centre on it */
  z-index: 6;                              /* above hero content and plaque row */
  pointer-events: none;                    /* only the buttons are interactive */
  display: block;
}
/* Arrow buttons: the PNG art now owns the entire circular visual — no CSS
   circle/background/border. Button stays a 44x44 tap target; two stacked
   PNGs cross-fade on hover/focus. Position/disabled behaviour unchanged. */
.hero__gallery-btn {
  position: relative;
  pointer-events: auto;
  width: 44px;
  height: 44px;                    /* comfortable tap target */
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
}
/* Independently placed on the seam band; absolute wins now that these come
   AFTER the base rule. translateY(-50%) is positioning only (no hover move). */
.hero__gallery-btn--prev,
.hero__gallery-btn--next {
  position: absolute;
  top: 0;                          /* band is zero-height at the row centre */
  transform: translate(-50%, -50%);/* centre button on its plaque-edge anchor point */
}
.hero__gallery-btn--prev {
  left: calc(var(--hero-gallery-plaque-edge-x) - var(--hero-gallery-plaque-gap) - var(--hero-gallery-arrow-half));
}
.hero__gallery-btn--next {
  right: calc(var(--hero-gallery-plaque-edge-x) - var(--hero-gallery-plaque-gap) - var(--hero-gallery-arrow-half));
  transform: translate(50%, -50%);
}
.hero__gallery-img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;             /* never distort the circular art */
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.hero__gallery-img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hero__gallery-btn:hover  .hero__gallery-img--default,
.hero__gallery-btn:focus-visible .hero__gallery-img--default { opacity: 0; }
.hero__gallery-btn:hover  .hero__gallery-img--hover,
.hero__gallery-btn:focus-visible .hero__gallery-img--hover { opacity: 1; }
.hero__gallery-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 50%;              /* round focus ring to match the art */
}
.hero__gallery-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 720px) {
  /* Small screens: plaques stack, side arrows do not fit — return to a
     compact bottom-right pair for usability. */
  .hero__gallery-nav {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 12px 22px 0 auto;
    pointer-events: auto;
  }
  .hero__gallery-btn--prev,
  .hero__gallery-btn--next {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
  }
}

/* Hero content column: headline/text/buttons sit high-left; the action
   photo owns the right side of the frame. The match card moved into the
   Match Command Strip below the hero. */
.hero__inner {
  position: relative;
  z-index: 2;              /* above the background treatments */
  width: 100%;
  /* Left-focused composition: the title lockup + CTAs sit in a single
     left column; the right side stays open (background art only). */
}
.hero__content { max-width: 660px; min-width: 0; }


.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ------------------------------------------------------------
   Hero image slots (PNG title lockup + PNG CTAs). The visible
   headline/lead and the two CTAs are flat PNGs; semantic text
   lives in .sr-only. No CSS button chrome is drawn — the art
   carries the whole appearance. Left column, same left edge. */
.hero__title-lockup { width: min(100%, 660px); margin-bottom: 20px; }
.hero__title-lockup-img {
  display: block;
  width: 100%;
  height: auto;               /* preserve 1100x520 ratio — never distort */
}
/* Image CTAs: real anchors, centred under the title lockup, no chrome */
.hero__actions--image-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: min(100%, 660px);
}
.hero-image-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  transform: translateY(0) scale(1);
  transition: transform 0.22s ease, filter 0.22s ease;
  will-change: transform;
}

/* Both CTAs keep identical dimensions. */
.hero-image-btn--story,
.hero-image-btn--join {
  width: clamp(220px, 14vw, 270px);
  aspect-ratio: 2500 / 480;
  flex: 0 0 auto;
}

.hero-image-btn__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* One artwork only: a restrained physical lift, slight clarity increase,
   and a low accent-colour glow instead of swapping to another PNG. */
.hero-image-btn:hover,
.hero-image-btn:focus-visible {
  transform: translateY(-3px) scale(1.012);
}

.hero-image-btn--story:hover,
.hero-image-btn--story:focus-visible {
  filter:
    brightness(1.035)
    contrast(1.015)
    drop-shadow(0 5px 10px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 7px rgba(235, 161, 1, 0.20));
}

.hero-image-btn--join:hover,
.hero-image-btn--join:focus-visible {
  filter:
    brightness(1.07)
    contrast(1.025)
    drop-shadow(0 5px 10px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 9px rgba(30, 110, 40, 0.30));
}

.hero-image-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.48);
  outline-offset: 4px;
  border-radius: 6px;
}


@media (max-width: 560px) {
  .hero__actions--image-buttons {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .hero-image-btn--story,
  .hero-image-btn--join {
    width: min(82vw, 280px);
    aspect-ratio: 2500 / 480;
  }
}

/* Respect reduced-motion: no fades/nudges on either hero button family */
@media (prefers-reduced-motion: reduce) {
  .hero-image-btn,
  .hero-image-btn__img,
  .hero__gallery-btn,
  .hero__gallery-img { transition: none; }

  .hero-image-btn:hover,
  .hero-image-btn:focus-visible {
    transform: none;
  }
}


/* Screen-reader-only utility (visually hidden, still in the a11y tree) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   6. MATCH COMMAND STRIP  (wide match centre beneath the hero)
   ------------------------------------------------------------
   Replaces the old in-hero Next Match card. A vertical NEXT MATCH
   side label introduces three zones: meta · fixture · status.
   Static placeholder content; the block is modular so it can be
   swapped for SportsPress/WordPress match data later. Countdown
   IDs (#nextMatch, #countdown, #cd-*) are unchanged — js/main.js
   keeps driving the clock without modification.
   ============================================================ */
.match-command {
  position: relative;
  z-index: 2;                    /* plaque row paints over the lower hero */
  background: var(--charcoal);
  /* Plaque row bridges the hero divider: the row is pulled up by this much
     so ~30% of its height sits above the divider. Tune 48-64px on desktop. */
  --match-command-plaque-overlap: 63px;
  /* Arrow placement: anchor to the divider and move upward by roughly half
     the plaque overlap (63px / 2 ≈ 31.5px). Keep this value in sync if the
     plaque overlap changes. */
  --hero-gallery-overlap-offset: -31.5px;
  /* Horizontal arrow placement: anchor each arrow to the actual plaque/container
     edge with a fixed gap. This keeps the arrows the same visual distance from
     the plaques at 1080p, 1440p and 4K instead of drifting into the wider
     viewport gutter. */
  --hero-gallery-container-pad: 56px;
  --hero-gallery-arrow-size: 44px;
  --hero-gallery-arrow-half: 22px;
  --hero-gallery-plaque-gap: 8px;
  --hero-gallery-plaque-edge-x: calc(max((100vw - var(--maxw)) / 2, 0px) + var(--hero-gallery-container-pad));
  /* No top padding: the row starts at the divider then lifts via overlap.
     Bottom owns the plaque -> Cover Stories title gap. */
  padding: 0 0 36px;
  /* Hero bottom edge: the same clean full-width gold divider used at the
     New Players lower edge (.partners border-top) — one thin line,
     no glow, no companion. Sits exactly where the hero ends. */
  border-top: 1px solid var(--line-gold);
}
/* Normal-flow stacking so the plaque row sits above the hero divider. */
.match-command__inner { position: relative; z-index: 1; }
.match-command__row {
  position: relative;
  z-index: 2;
  /* Lift the whole row as one unit across the divider (no clip/mask/split). */
  margin-top: calc(-1 * var(--match-command-plaque-overlap));
}
/* FULL-SECTION atmosphere plate — spans the entire Match Command chapter
   behind BOTH plaques (Next Match + Season at a Glance). Swap ONLY the JPG
   below for final artwork:
     images/match-command-section-placeholder.jpg
   This is SEPARATE from the LOCAL Next Match plaque background
   (.mc-plaque-bg--match / images/match-command-placeholder.webp), which is
   unchanged. The layer carries no background-color: if the image is
   missing it paints nothing and the section degrades to the plain
   charcoal base. Same pattern as .dynasty::before. */
.match-command::before {
  display: none;
}
/* Lift the section content above the atmosphere layer */
.match-command__inner { position: relative; z-index: 1; }
/* Two aligned panels sharing one row: Next Match ~71% · Season ~29% */
.match-command__row {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: stretch;
  /* Own stacking context so the shadow pads (z 0) sit strictly behind the
     plaques (z 1) and never leak above the section atmosphere layer. */
  position: relative;
  isolation: isolate;
}
/* Plaques ride above their shadow pads. Each plaque is pinned to the SAME cell
   as its pad (row 1, explicit column) — otherwise auto-flow places the plaques
   in fresh implicit tracks and the grid gains phantom rows/columns (shifting
   and shrinking the plaques). Explicit placement makes pad + plaque co-occupy
   one cell, so the pad sits directly behind its plaque with zero layout cost. */
.match-command__row > .match-command__panel,
.match-command__row > .season-glance {
  position: relative;
  z-index: 1;
  grid-row: 1;
}
.match-command__row > .match-command__panel { grid-column: 1; }
.match-command__row > .season-glance { grid-column: 2; }
/* DEDICATED EXTERNAL SHADOW PADS — one per plaque, placed as grid items in the
   SAME cell as each plaque (row 1, cols 1/2) so they track the plaque geometry
   exactly. The plaque's own outer shadow was invisible because pure-black blur
   on #0d0d11 charcoal has almost no contrast; these pads solve that two ways:
   a black CONTACT/LIFT core for the drop, plus a barely-visible warm amber rim
   so the edge separates from the charcoal in BOTH tonal directions. The pads
   add no layout height (negative bottom margin) and take no pointer events. */
.match-command__row::before,
.match-command__row::after {
  content: "";
  grid-row: 1;
  align-self: stretch;
  border-radius: calc(var(--radius) + 10px);
  pointer-events: none;
  z-index: 0;
  transform: translateY(12px);
  background:
    radial-gradient(120% 82% at 50% 62%,
      rgba(235, 161, 1, 0.10) 0%,
      rgba(235, 161, 1, 0.05) 30%,
      rgba(0, 0, 0, 0) 62%),
    radial-gradient(120% 90% at 50% 78%,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.54) 40%,
      rgba(0, 0, 0, 0.22) 70%,
      rgba(0, 0, 0, 0) 100%);
  filter: blur(20px);
}
.match-command__row::before {
  grid-column: 1;
  margin: 10px 4px -22px 4px;
}
.match-command__row::after {
  grid-column: 2;
  margin: 10px 4px -22px 4px;
}
.match-command__panel {
  position: relative;
  --mc-rail-w: 92px;               /* ticket-stub rail width (desktop) */
  display: grid;
  grid-template-columns: var(--mc-rail-w) minmax(196px, 0.9fr) minmax(0, 1.15fr) minmax(236px, 1fr);
  grid-template-areas: "side meta fixture status";
  align-items: stretch;
  background: linear-gradient(180deg, rgba(18,18,23,0.92) 0%, rgba(10,10,14,0.96) 100%);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  /* The OUTSIDE shadow now comes from .match-command__row::before (a dedicated
     pad) — reliable under this panel's notch mask, and visible on charcoal.
     This panel keeps only the INSET edge system, which survives the mask and
     gives the raised, rounded read: top white sheen, lower dark seat, faint
     gold keyline. No outer box-shadow / drop-shadow here (both were swallowed
     by the mask or the charcoal). */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 18px 30px -24px rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 -30px 44px -28px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(235, 161, 1, 0.14);
}
/* Thin gold top edge-highlight (shared by both panels in the row).
   z 2: above the local background plates and zone surfaces; the ticket
   notches (z 3) still cut through it. */
.match-command__panel::after,
.season-glance::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(235,161,1,0), var(--gold) 50%, rgba(235,161,1,0));
  opacity: 0.65;
  z-index: 2;
  pointer-events: none;
}
/* (The notch mask below physically removes the panel — border, background
   and this highlight — inside each hole, so the top highlight can safely
   span the full width again.) */
/* Thin gold internal dividers between the zones. The meta zone's left
   divider is gone — the ticket perforation on the rail replaces it. */
.match-command__fixture {
  border-left: 1px solid rgba(235, 161, 1, 0.18);
}
/* The divider BEFORE the ESKARLIIGA (status) block is a controlled
   ticket perforation: a repeating-linear-gradient with a deliberate
   9px dash / 7px gap rhythm at 1px weight — not the tiny, inconsistent
   browser-default `dashed`. Painted as a left-edge background layer over
   the zone's own translucent fill. */
.match-command__status {
  background:
    repeating-linear-gradient(180deg,
      rgba(235, 161, 1, 0.55) 0 9px,
      rgba(235, 161, 1, 0) 9px 16px) left center / 1px 100% no-repeat,
    rgba(0, 0, 0, 0.30);
}
/* All live content rides above the local background plates (z 0). */
.match-command__side,
.match-command__meta,
.match-command__fixture,
.match-command__status,
.season-glance__head,
.season-glance__body,
.season-glance__cta {
  position: relative;
  z-index: 1;
}

/* --- Local plaque background plates (both Match Command panels) ---
   One replaceable JPG per plaque (swap ONLY the file for final artwork),
   clipped by the plaque's own overflow:hidden and sitting BELOW every
   content zone. The same element carries a subtle internal top sheen
   and a darker lower depth band so the artwork itself never needs
   CSS re-grading. --- */
.mc-plaque-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: var(--master-bg-repeat);
  opacity: 0.5;
}
.mc-plaque-bg--match  { background-image: url("../images/match-command-placeholder.webp"); }
.mc-plaque-bg--season { background-image: url("../images/season-glance-placeholder.webp"); }
.mc-plaque-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 16%),
    linear-gradient(180deg, rgba(10, 10, 14, 0) 38%, rgba(8, 8, 12, 0.50) 100%);
}

/* --- Ticket notches (rebuilt): two circular holes are physically MASKED
   out of the Next Match panel at the rail/perforation junction — top edge
   and bottom edge. The mask removes the panel's material entirely inside
   each hole (border, background, plate AND the gold top highlight), so
   nothing can ever run through the cut; the surrounding Match Command
   charcoal shows through naturally. This replaces the old approach of a
   full border covered by circular pseudo-elements. --- */
.match-command__panel {
  --mc-notch-r: 11px;
  -webkit-mask:
    radial-gradient(circle var(--mc-notch-r) at var(--mc-rail-w) 0,
      transparent 98%, #000 100%),
    radial-gradient(circle var(--mc-notch-r) at var(--mc-rail-w) 100%,
      transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--mc-notch-r) at var(--mc-rail-w) 0,
      transparent 98%, #000 100%),
    radial-gradient(circle var(--mc-notch-r) at var(--mc-rail-w) 100%,
      transparent 98%, #000 100%);
  mask-composite: intersect;
}
/* Old circular notch elements are retired by the mask rebuild. */
.mc-notch { display: none; }

/* --- TICKET STUB rail (label reads bottom→top, museum-style) ---
   The container stays UNROTATED so its background geometry is physical:
   warm dark-charcoal ticket material, a gold dashed perforation column
   on its right edge and a faint inner gold keyline on the left. Only
   the inner text span is rotated. --- */
.match-command__side {
  grid-area: side;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(180deg,
      rgba(235, 161, 1, 0.42) 0 7px,
      rgba(235, 161, 1, 0) 7px 16px) right center / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(29, 25, 16, 0.55) 0%, rgba(13, 12, 9, 0.65) 100%);
  box-shadow: inset 1px 0 0 rgba(235, 161, 1, 0.14);
  padding: 12px 0;                 /* keeps the larger lettering from
                                      driving the plaque any taller */
}
/* Vertical NEXT MATCH label as an image hook (PNG uploaded to FTP later).
   background-image so a missing file never shows a broken-image icon; the
   rail keeps its size/layout whether or not the art is present. */
.match-command__side-art {
  display: block;
  /* The PNG was visually tiny because this hook was locked to 42px wide
     and only 78% of the rail height. The rail itself is 92px wide, so the
     artwork can safely use more of that ticket-stub area without changing
     the plaque layout. */
  width: calc(var(--mc-rail-w) - 22px);
  height: calc(100% - 20px);
  max-height: 240px;
  background-image: url("../images/next-match-vertical-placeholder.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- LEFT: match-info panel --- */
.match-command__meta {
  grid-area: meta;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 18px 22px;
}
.match-command__details {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  gap: 22px;
  min-height: 0;
  transform: none;
}
.match-command__details li {
  display: flex;
  align-items: center;
  gap: 11px;
}
.match-command__details li > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.match-command__details strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.2;
  white-space: nowrap;
}
.match-command__detail-sub {
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.5px;
  color: var(--grey);
  white-space: nowrap;
}
.match-command__detail-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--gold);
}
/* --- CENTRE: fixture panel --- */
.match-command__fixture {
  grid-area: fixture;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 32px);   /* ~1/3 tighter: teams pulled toward the VS art */
  padding: 22px 18px;
  min-width: 0;
}
.match-command__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 180px;
  min-width: 0;
  flex-shrink: 0;      /* identity content holds its width; the decorative
                          VS artwork box (flex-shrink:1) yields instead */
  text-align: center;
}
.match-command__crest {
  width: 74px; height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}
.match-command__team-name {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.15;
}
/* Supplied graffiti VS artwork (images/match-vs.webp). Fixed transparent
   box + object-fit:contain: any artwork aspect ratio letterboxes inside
   without distortion, layout stays stable before/after load, and the
   flex gap guarantees clearance from both crests. No frame, no filter,
   no background — the artwork is shown exactly as supplied. */
.match-command__vs {
  flex: 0 1 auto;      /* shrinks first when the fixture zone is tight */
  min-width: 0;        /* lift the replaced-element automatic minimum */
  /* Box width tracks the artwork's measured near-square aspect (~1:1 with
     paint drips): the old 128px-wide box letterboxed the square art with
     up to ~35px of invisible padding per side, which read as extra
     crest-to-VS distance. The drawn artwork itself is untouched — still
     height-governed by the clamp below. */
  width: clamp(50px, 4.6vw, 66px);
  height: clamp(44px, 4vw, 58px);
  object-fit: contain;
}

/* --- RIGHT: match-status panel --- */
.match-command__status {
  grid-area: status;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  padding: 18px 10px 18px 34px;
  /* Shift the whole status system slightly right without changing
     the fixture zone or the plaque's outer geometry. */
  /* (background set by the dashed-divider rule above) */
}
/* Inner wrapper: width follows its widest line — the one-line Current Form —
   so that line IS the shared left-alignment anchor. Centred in the zone;
   everything inside is left-aligned to its left edge. */
.match-command__status-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 0;
  text-align: left;
}
.match-command__comp {
  grid-row: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 2px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.92;
  white-space: nowrap;
}
/* Countdown — scoreboard: big gold numbers, quiet labels beneath */
.match-command__countdown {
  grid-row: 2;
  align-self: center;
  justify-self: start;
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  transform: translateY(7px);
}
.match-command__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 38px;
}
.match-command__num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.7vw, 2.1rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.match-command__lbl {
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-dark);
}
/* When the match has passed, JS adds .is-live for a red accent */
.match-command__countdown.is-live .match-command__num { color: var(--red); }

/* Current Form is ONE horizontal line: CURRENT FORM  [W][W][L][W][W].
   flex-direction: column is forbidden here. */
.match-command__form {
  grid-row: 3;
  align-self: end;
  justify-self: start;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 26px;
}
.match-command__form-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey);
}
.match-command__form-row {
  display: flex;
  gap: 8px;
}
.form-pill {
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
}
/* Conventional match-result colours (deliberate exception to the
   recruitment-only-green rule): W = restrained green, L = restrained red */
.form-pill--w {
  color: var(--green-stat);
  border-color: rgba(40, 117, 59, 0.62);
  background: rgba(11, 92, 23, 0.22);
}
.form-pill--l {
  color: var(--red);
  border-color: rgba(226, 59, 59, 0.55);
  background: rgba(226, 59, 59, 0.08);
}


/* Desktop plaque alignment:
   Match Centre and View Fixtures & Results share the same divider height,
   bottom inset and text baseline across the two adjacent plaques. */
.match-command__meta > .match-command__cta {
  grid-row: 2;
  align-self: end;
  width: 100%;
  margin-top: 0;
}

/* --- RIGHT: SEASON AT A GLANCE — SportsPress-ready companion panel.
   Data is the visual focus: gold for rank/headings, green only for WON,
   red only for LOST. Static placeholder content for now. --- */
.season-glance {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px 20px;              /* condensed: tighter internal frame */
  background: linear-gradient(180deg, rgba(18,18,23,0.92) 0%, rgba(10,10,14,0.96) 100%);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  /* Same plaque family as Next Match. The OUTSIDE shadow comes mainly from
     .match-command__row::after (the pad); this panel keeps a thin gold ring
     plus the shared inset edge system so both plaques read identically raised.
     The pad — not this box-shadow — is what lifts it off the charcoal. */
  box-shadow:
    0 0 0 1px rgba(235, 161, 1, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 18px 30px -24px rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.52),
    inset 0 -30px 44px -28px rgba(0, 0, 0, 0.58);
}
.season-glance__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;            /* condensed */
  margin-bottom: 0;
  border-bottom: 1px solid rgba(235, 161, 1, 0.18);
}
.season-glance__title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.season-glance__year {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.season-glance__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  column-gap: 18px;
  min-height: 0;
  padding: 12px 0;
}
.season-glance__rank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  gap: 2px;
}
.season-glance__rank-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 2.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-transform: uppercase;
}
.season-glance__rank-label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey);
}
.season-glance__stats {
  display: flex;
  align-items: center;
  align-self: center;
  justify-self: end;
  gap: clamp(12px, 1.3vw, 20px);   /* condensed */
  list-style: none;
  margin: 0;
  padding: 0;
}
.season-glance__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.season-glance__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.season-glance__num--won  { color: var(--green-stat); } /* darker green: won only */
.season-glance__num--lost { color: var(--red); } /* red: lost only */
.season-glance__stat-label {
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-dark);
}
.season-glance__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(235, 161, 1, 0.14);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.2s ease;
}
.season-glance__cta svg { transition: transform 0.2s ease; }
.season-glance__cta:hover,
.season-glance__cta:focus-visible { color: var(--gold-bright); outline: none; }
.season-glance__cta:hover svg,
.season-glance__cta:focus-visible svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .season-glance__cta svg { transition: none; }
}

/* --- Responsive: tablet — fixture on top, meta + status side by side --- */
@media (max-width: 1200px) {
  .match-command__row { grid-template-columns: 1fr; }
  .match-command__panel {
    --mc-rail-w: 72px;             /* narrower ticket stub on tablet */
    grid-template-columns: var(--mc-rail-w) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "side fixture fixture"
      "side meta status";
  }
  .match-command__meta,
  .match-command__status { border-top: 1px solid rgba(235, 161, 1, 0.14); }
  .match-command__meta { padding: 22px 26px; }
  .match-command__status { padding: 22px 26px; }

  /* Stacked layout: the two shadow pads would collapse into one grid cell and
     overlap only the first plaque — unreliable. Disable them and give each
     plaque its own visible outer shadow. The Next Match panel is still mask-
     clipped in this range (mask turns off only at ≤640px), so its outer shadow
     must ride on filter: drop-shadow() (mask-safe); Season uses box-shadow. */
  .match-command__row::before,
  .match-command__row::after { display: none; }

  .match-command__panel {
    filter:
      drop-shadow(0 34px 60px rgba(0, 0, 0, 0.62))
      drop-shadow(0 10px 20px rgba(0, 0, 0, 0.46));
  }
  .season-glance {
    box-shadow:
      0 34px 60px rgba(0, 0, 0, 0.62),
      0 10px 20px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.50),
      inset 0 0 0 1px rgba(235, 161, 1, 0.12);
  }
}

/* --- Responsive: mobile — clear stacked hierarchy --- */
@media (max-width: 1200px) {
  .match-command {
    --match-command-plaque-overlap: 44px;   /* slightly less overlap on tablet */
    --hero-gallery-overlap-offset: -22px;   /* half of the 44px overlap */
    padding-bottom: 36px;
  }
}
@media (max-width: 640px) {
  .match-command {
    --match-command-plaque-overlap: 24px;   /* smaller overlap when stacked */
    --hero-gallery-overlap-offset: -12px;   /* half of the 24px overlap */
    padding: 0 0 32px;
  }
  .match-command__panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "fixture"
      "meta"
      "status";
    /* No vertical rail on mobile (the stub is a horizontal top label),
       so the desktop notch mask has nothing to cut — turn it off to
       avoid punching a stray hole into the stacked panel. */
    -webkit-mask: none;
    mask: none;
  }
  /* Ticket stub becomes a horizontal top label: the perforation moves
     to its bottom edge and small side notches sit ON the perforation
     line at the panel edges. The desktop edge notches are hidden —
     the pseudo-notches below replace them. */
  .match-command__side {
    background:
      repeating-linear-gradient(90deg,
        rgba(235, 161, 1, 0.42) 0 7px,
        rgba(235, 161, 1, 0) 7px 16px) center bottom / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(29, 25, 16, 0.55) 0%, rgba(13, 12, 9, 0.65) 100%);
    box-shadow: none;
    padding: 12px 0;
  }
  .match-command__side-art {
    width: min(220px, 78%);
    height: 28px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .mc-notch--top,
  .mc-notch--bottom { display: none; }
  .match-command__side::before,
  .match-command__side::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--charcoal);
    border: 1px solid var(--line-gold);
    z-index: 3;
    pointer-events: none;
  }
  .match-command__side::before { left: 0;  transform: translate(-50%, 50%); }
  .match-command__side::after  { right: 0; transform: translate(50%, 50%); }
  .match-command__meta,
  .match-command__fixture,
  .match-command__status { border-left: none; }
  .match-command__fixture {
    padding: 22px 16px;
    gap: 20px;
  }
  .match-command__crest { width: 64px; height: 64px; }
  .match-command__team-name { font-size: 0.92rem; }
  .match-command__vs { width: 48px; height: 42px; }
  .match-command__meta {
    border-top: 1px solid rgba(235, 161, 1, 0.14);
    padding: 20px 22px;
    gap: 16px;
  }
  .match-command__details {
    transform: none;
  }
.match-command__status {
    border-top: 1px solid rgba(235, 161, 1, 0.14);
    padding: 20px 22px;
    gap: 14px;
  }
  .match-command__countdown {
    width: 100%;
    justify-content: space-between;
  }
  .match-command__form {
    width: 100%;
    justify-content: space-between;
  }
  .season-glance { padding: 18px 20px; }
  .season-glance__body {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 14px;
  }
  .season-glance__rank {
    align-items: center;
    text-align: center;
  }
  .season-glance__stats {
    width: 100%;
    justify-self: stretch;
    justify-content: space-between;
  }
}

/* ============================================================
   7. RESPONSIVE  (Phase 1 — full pass comes in Phase 4)
   ============================================================ */

/* Tablet / small laptop: collapse hero to one column, card under the text */
@media (max-width: 980px) {
  .nav-list { gap: 18px; }
  .nav-link { font-size: 0.76rem; }
  .header-cta { display: none; }   /* CTA lives in mobile menu below this size */

  .hero {
    padding-bottom: 56px;
    min-height: auto;
  }
  .hero__content { max-width: 640px; }

}

/* Mobile */
@media (max-width: 720px) {
  :root { --header-h: 70px; }

  .container { padding: 0 22px; }   /* tighter side padding on phones */

  /* (nav switch to the drawer now happens at 1080px — see the nav-fit
     block in section 2; nothing nav-specific needed here) */

  /* Slightly smaller brand on phones so the wordmark doesn't crowd the toggle */
  .brand__logo { width: 46px; height: 46px; }
  .brand__name { font-size: 1.05rem; }
  .brand__sub { font-size: 0.64rem; }

  .hero {
    /* No mobile darkening layer — supplied art carries its own grade */
    padding-bottom: 44px;
  }
}

/* ============================================================
   8. DYNASTY / LEGACY — PHOTOSHOP ARTWORK SLOT
   ------------------------------------------------------------
   The title/motto remain separate. The full stats composition is
   one artwork exported from Photoshop to:
     images/dynasty-ledger-draft.webp

   It fills the same .container width used by Join Hub. There is no
   extra internal side padding, crop, cover scaling, plaque surface,
   border, shadow, or live stat layout.
   ============================================================ */
.dynasty {
  position: relative;
  margin-top: 0;
  padding: 18px 0 24px;
  background: transparent;
  overflow: visible;
}
.dynasty::before { display: none; }
.dynasty__inner {
  position: relative;
  z-index: 2;
}

.dynasty__head {
  text-align: center;
  margin-bottom: 24px;
}
.dynasty__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: 0.5px;
  margin: 0;
}
.dynasty-art {
  display: block;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
}
.dynasty-art__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.dynasty-mobile-grid {
  display: none;
}

@media (max-width: 900px) {
  .dynasty { padding: 34px 0 44px; }
  .dynasty__head { margin-bottom: 22px; }
}

@media (max-width: 560px) {
  .dynasty { padding: 30px 0 40px; }
  .dynasty__head { margin-bottom: 20px; }
}


/* ============================================================
   9. COVER STORIES  (editorial homepage news — future WP loop)
   ------------------------------------------------------------
   Four equal editorial cards on the shared charcoal base. Dark
   image treatment, restrained 1px borders, magazine hierarchy:
   category → title → excerpt → Read More. Each card maps to one
   WordPress post later; VIEW ALL ARTICLES → the news archive.
   ============================================================ */
.cover-stories {
  position: relative;
  background: var(--charcoal);
  /* padding-top 0: the plaque->title gap is owned by .match-command
     padding-bottom (44px) so the two sections never stack a huge gap. */
  padding: 0 0 18px;
}
/* FULL-SECTION atmosphere plate — DORMANT hook. Swap in final artwork at:
     images/cover-stories-placeholder.jpg
   The future image must be dark, charcoal-toned, low-contrast and
   editorial — quiet atmosphere that stays secondary to the article
   cards, never a competing photo. The layer carries no background-color:
   while the file is absent it paints nothing and the section renders
   exactly as the plain charcoal base. Same pattern as
   .match-command::before / .dynasty::before. */
.cover-stories::before {
  display: none;
}
/* Lift heading, cards and links above the atmosphere layer */
.cover-stories__inner { position: relative; z-index: 1; }
.cover-stories__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.cover-stories__title {
  font-family: var(--font-heading);    /* Jockey One — section headings */
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  letter-spacing: 1px;
  color: var(--white);
  margin: 0;
}
.cover-stories__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.cover-stories__all-arrow { transition: transform 0.2s ease; }
.cover-stories__all:hover,
.cover-stories__all:focus-visible {
  color: var(--gold-bright);
  outline: none;
}
.cover-stories__all:hover .cover-stories__all-arrow,
.cover-stories__all:focus-visible .cover-stories__all-arrow {
  transform: translateX(3px);
}

.cover-stories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cover-story-card {
  position: relative;
  background: linear-gradient(180deg, rgba(18,18,23,0.85) 0%, rgba(11,11,15,0.92) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);      /* standard site radius — matches the plaques */
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.cover-story-card:hover,
.cover-story-card:focus-within {
  border-color: var(--line-gold);
  transform: translateY(-4px);
}
.cover-story-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  outline: none;
}
/* Dark image treatment: desaturated + dimmed, lifting slightly on hover */
.cover-story-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.cover-story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) brightness(0.72) contrast(1.02);
  transition: transform 0.4s ease, filter 0.3s ease;
}
.cover-story-card:hover .cover-story-card__media img,
.cover-story-card:focus-within .cover-story-card__media img {
  transform: scale(1.04);
  filter: grayscale(0.05) brightness(0.85) contrast(1.02);
}
/* In-image lower shade so the body text region reads as one dark block */
.cover-story-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,14,0) 55%, rgba(10,10,14,0.65) 100%);
}
.cover-story-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 18px 20px 20px;
}
.cover-story-card__cat {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.cover-story-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: 0.5px;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
}
.cover-story-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--grey);
  margin: 0;
}
.cover-story-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
  transition: color 0.2s ease;
}
.cover-story-card__arrow {
  color: var(--gold);
  transition: transform 0.2s ease;
}
.cover-story-card:hover .cover-story-card__more,
.cover-story-card:focus-within .cover-story-card__more { color: var(--white); }
.cover-story-card:hover .cover-story-card__arrow,
.cover-story-card:focus-within .cover-story-card__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cover-story-card,
  .cover-story-card__media img,
  .cover-stories__all-arrow,
  .cover-story-card__arrow { transition: none; }
  .cover-story-card:hover,
  .cover-story-card:focus-within { transform: none; }
  .cover-story-card:hover .cover-story-card__media img,
  .cover-story-card:focus-within .cover-story-card__media img { transform: none; }
}

/* Tablet: two cards per row */
@media (max-width: 1100px) {
  .cover-stories { padding: 0 0 60px; }   /* top owned by .match-command */
  .cover-stories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobile: compact two-by-two article grid */
@media (max-width: 600px) {
  .cover-stories { padding: 0 0 52px; }   /* top owned by .match-command */
  .cover-stories__head {
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 20px;
  }
  .cover-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ============================================================
   10. BROTHERHOOD / FEATURED VIDEO + GALLERY
   ------------------------------------------------------------
   Content-only redesign over the continuous master background.
   No independent section wallpaper and no full-width divider.
   ============================================================ */
.brother {
  position: relative;
  background: transparent;
  padding: 0 0 64px;
  overflow: visible;
}

.brother__inner {
  position: relative;
  z-index: 1;
}

.brother__grid {
  display: grid;
  /* Keep the two side columns close to their current visual size.
     The extra full-container width is therefore given to the video. */
  grid-template-columns:
    minmax(300px, 390px)
    minmax(0, 1fr)
    minmax(190px, 250px);
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.brother__grid > * {
  min-height: 0;
}

/* --- LEFT: Vikat media gateway ------------------------------- */
.brother__copy {
  min-width: 0;
  align-self: center;
}

.brother__copy.media-intro {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 360px;
}

.media-intro__mid {
  display: flex;
  flex-direction: column;
  margin-block: auto;
}

.media-intro__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
}

.brother__eyebrow {
  margin-bottom: 16px;
}

.media-intro__heading {
  position: relative;
  display: inline-block;
  width: min(100%, 390px);
  margin: 0 0 24px;
}

.media-intro__heading--art {
  min-height: 148px;
}

.media-intro__heading-art {
  display: block;
  width: min(100%, 360px);
  height: auto;
}


.brother__lead {
  max-width: 390px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--font-body);
  font-size: clamp(0.94rem, 1vw, 1.04rem);
  line-height: 1.72;
}

.media-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(235, 161, 1, 0.20);
}

.media-pillars__item {
  min-width: 0;
  padding: 0 12px;
  text-align: center;
}

.media-pillars__item:first-child {
  padding-left: 0;
}

.media-pillars__item:last-child {
  padding-right: 0;
}

.media-pillars__item + .media-pillars__item {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.media-pillars__icon {
  width: 58px;
  height: 48px;
  display: block;
  margin: 0 auto 10px;
  object-fit: contain;
}

.media-pillars__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.media-pillars__text strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1.15px;
  line-height: 1.18;
  text-transform: uppercase;
  white-space: nowrap;
}

.media-pillars__text small {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.62rem;
  line-height: 1.35;
}

.media-intro__cta {
  width: min(100%, 310px);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  margin: 0 auto;
  border: 1px solid rgba(235, 161, 1, 0.62);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(21, 21, 24, 0.78), rgba(8, 8, 10, 0.88));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.35px;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(0);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.media-intro__youtube {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: rgba(235, 161, 1, 0.76);
}

.media-intro__youtube-play {
  fill: #0a0a0b;
}

.media-intro__cta-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.media-intro__cta:hover,
.media-intro__cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(235, 161, 1, 0.90);
  background: linear-gradient(180deg, rgba(28, 26, 20, 0.86), rgba(10, 10, 12, 0.92));
  color: var(--white);
  outline: none;
}

.media-intro__cta:hover .media-intro__cta-arrow,
.media-intro__cta:focus-visible .media-intro__cta-arrow {
  transform: translateX(3px);
}

.media-intro__channels {
  margin: 12px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 1.45px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.media-intro__channels span {
  margin: 0 7px;
  color: rgba(235, 161, 1, 0.55);
}

/* --- CENTRE: featured video card ----------------------------- */
.brother-feature {
  position: relative;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  align-self: center;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}


.video {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
}

.video__poster {
  position: absolute;
  inset: 0;
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
}

.video__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
  box-shadow: none;
}

.video__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(235, 161, 1, 0.72);
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.62);
  color: var(--white);
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.video__play-icon {
  margin-left: 4px;
  pointer-events: none;
}


.video__play-callout {
  position: absolute;
  z-index: 3;
  top: calc(50% + 54px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.7px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.video.is-playing .video__play-callout,
.video.is-playing .brother-feature__meta {
  display: none;
}

.video__play:hover,
.video__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
  border-color: var(--gold);
  background: rgba(8, 8, 10, 0.48);
  box-shadow:
    0 0 0 1px rgba(235, 161, 1, 0.20),
    0 0 24px rgba(235, 161, 1, 0.26);
  outline: none;
}

.video.is-playing .video__poster,
.video.is-playing .video__overlay,
.video.is-playing .video__play {
  display: none;
}

.video__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.brother-feature__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 0;
  padding: 34px 20px 18px;
  border-top: 0;
  background: transparent;
}

.brother-feature__copy {
  min-width: 0;
}

.brother-feature__kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}

.brother-feature__title {
  margin: 0 0 5px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(0.96rem, 1.3vw, 1.22rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-transform: uppercase;
}

.brother-feature__duration {
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-body);
  font-size: 0.76rem;
}

.brother-feature__click-separator,
.brother-feature__click-label {
  display: none;
}

.brother-feature__play-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease;
}

.brother-feature__play-link svg {
  color: var(--gold);
  transition: transform 0.18s ease;
}

.brother-feature__play-link:hover,
.brother-feature__play-link:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

.brother-feature__play-link:hover svg,
.brother-feature__play-link:focus-visible svg {
  transform: translateX(3px);
}

/* --- RIGHT: one-column gallery rail -------------------------- */
.media-rail {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 360px; /* gallery.js matches the rendered video height */
  min-height: 0;
  max-height: none;
  align-self: center;
  display: grid;
  grid-template-rows: auto 22px minmax(0, 1fr) 22px auto;
  gap: 8px;
  padding: 4px 0 4px 14px;
  overflow: hidden;
  border-left: 1px solid rgba(235, 161, 1, 0.20);
  --rail-visible: 4;
  --rail-gap: 10px;
}

.media-rail__head {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: stretch;
  min-height: 26px;
}

.media-rail__label-art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.media-rail__ctl {
  position: relative;
  left: auto;
  z-index: 5;
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(235, 161, 1, 0.68);
  cursor: pointer;
  transition: color 0.18s ease, filter 0.18s ease;
}

.media-rail__ctl::after {
  content: "";
  position: absolute;
  inset: -8px;
}


.media-rail__ctl--prev {
  grid-row: 2;
}

.media-rail__ctl--next {
  grid-row: 4;
}

.media-rail__ctl:hover,
.media-rail__ctl:focus-visible {
  color: var(--gold-bright);
  filter: drop-shadow(0 0 5px rgba(235, 161, 1, 0.40));
  outline: none;
}

.media-rail__viewport {
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.media-rail__viewport::-webkit-scrollbar {
  display: none;
}

.media-rail__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  gap: var(--rail-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-rail__item {
  width: 100%;
  height: var(--thumb-h, 76px) !important;
  min-height: 0;
  flex: 0 0 var(--thumb-h, 76px);
  scroll-snap-align: start;
}

.media-rail__thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: var(--charcoal);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.media-rail__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.80) saturate(0.88) contrast(1.03);
}

.media-rail__thumb::before,
.media-rail__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.media-rail__thumb::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.12), rgba(8, 8, 12, 0.34));
  box-shadow:
    inset 0 0 18px rgba(184, 136, 0, 0.08),
    inset 0 0 50px rgba(235, 161, 1, 0.025);
}

.media-rail__thumb::after {
  z-index: 2;
  box-shadow:
    inset 0 0 0 2px rgba(3, 3, 5, 0.70),
    inset 0 0 0 1px rgba(235, 161, 1, 0.14);
}

.media-rail__thumb:hover,
.media-rail__thumb:focus-visible {
  border-color: rgba(235, 161, 1, 0.46);
  box-shadow: 0 0 16px rgba(235, 161, 1, 0.10);
  outline: none;
}


.media-rail__all {
  grid-row: 5;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  justify-self: start;
  gap: 8px;
  min-height: 36px;
  padding-top: 10px;
  border-top: 1px solid rgba(235, 161, 1, 0.18);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.media-rail__grid-icon {
  opacity: 0.78;
}

.media-rail__all-arrow {
  transition: transform 0.18s ease;
}

.media-rail__all:hover,
.media-rail__all:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

.media-rail__all:hover .media-rail__all-arrow,
.media-rail__all:focus-visible .media-rail__all-arrow {
  transform: translateX(3px);
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 1180px) {
  .brother__grid {
    grid-template-columns:
      minmax(250px, 320px)
      minmax(0, 1fr)
      minmax(170px, 210px);
    gap: 20px;
  }

  .media-pillars__item {
    padding-inline: 8px;
  }

  .media-pillars__text strong {
    font-size: 0.62rem;
    letter-spacing: 0.9px;
  }

  .media-intro__heading {
    padding-right: 52px;
  }

  .media-intro__crown {
    width: 66px;
  }
}

@media (max-width: 1100px) {
  .brother {
    padding: 36px 0 58px;
  }

  .brother__grid {
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 28px;
  }

  .brother-feature {
    height: auto;
    align-self: auto;
  }

  .video {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .brother__copy {
    align-self: auto;
  }

  .brother__lead {
    max-width: 560px;
  }

  .media-pillars {
    max-width: 560px;
  }

  .media-intro__heading {
    width: min(100%, 560px);
  }

  .media-intro__cta {
    width: min(100%, 340px);
  }

  .media-rail {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none;
    align-self: auto;
    grid-template-rows: auto auto auto;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 10px;
    padding-left: 0;
    overflow: visible;
    border-left: 0;
  }

  .media-rail__ctl {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: auto;
    transform: none;
  }

  .media-rail__head,
  .media-rail__all {
    grid-column: 1 / -1;
  }

  .media-rail__viewport {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .media-rail__ctl--prev {
    grid-column: 1;
    grid-row: 2;
  }

  .media-rail__ctl--next {
    grid-column: 3;
    grid-row: 2;
  }

  .media-rail__ctl svg {
    transform: rotate(-90deg);
  }

  .media-rail__track {
    display: flex;
    min-height: 0;
    flex-direction: row;
  }

  .media-rail__item {
    width: 148px;
    height: auto !important;
    flex: 0 0 148px;
  }

  .media-rail__thumb {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .media-rail__all {
    grid-row: 3;
  }
}

@media (max-width: 560px) {
  .brother {
    padding: 32px 0 52px;
  }

  .brother__grid {
    gap: 24px;
  }

  .media-intro__heading {
    padding-right: 46px;
  }

  .media-intro__title {
    font-size: clamp(3rem, 16vw, 4.4rem);
  }

  .media-intro__crown {
    top: -10px;
    width: 58px;
  }

  .media-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 19px;
  }

  .media-pillars__item,
  .media-pillars__item:first-child,
  .media-pillars__item:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0 6px;
    text-align: center;
  }

  .media-pillars__item + .media-pillars__item {
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .media-pillars__icon {
    width: 38px;
    height: 32px;
    margin: 0 auto 2px;
  }

  .media-pillars__text {
    align-items: center;
    gap: 2px;
  }

  .media-pillars__text strong {
    font-size: 0.50rem;
    letter-spacing: 0.55px;
    line-height: 1.15;
    white-space: normal;
  }

  .media-pillars__text small {
    font-size: 0.47rem;
    line-height: 1.2;
  }

  .media-intro__cta {
    width: min(100%, 330px);
  }

  .media-intro__foot {
    margin-top: 19px;
  }

  .media-intro__channels {
    white-space: normal;
  }

  .brother-feature__meta {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 42px;
  }

  .video__play-callout {
    top: calc(50% + 46px);
    font-size: 0.76rem;
  }

  .brother-feature__play-link {
    justify-self: start;
  }

  .video__play {
    width: 72px;
    height: 72px;
  }

  .media-rail__item {
    flex-basis: 124px;
    width: 124px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-intro__cta,
  .media-intro__cta-arrow,
  .video__play,
  .brother-feature__play-link svg,
  .media-rail__ctl,
  .media-rail__thumb,
  .media-rail__thumb img,
  .media-rail__all-arrow {
    transition: none;
  }

  .media-intro__cta:hover,
  .media-intro__cta:focus-visible {
    transform: none;
  }

  .media-intro__cta:hover .media-intro__cta-arrow,
  .media-intro__cta:focus-visible .media-intro__cta-arrow {
    transform: none;
  }

  .video__play:hover,
  .video__play:focus-visible {
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   12. JOIN HUB  (unified recruitment + mobile app)
   ------------------------------------------------------------
   Desktop height follows the rendered Media video card: the full
   upper composition plus the supporting band stays within one
   compact 3.035:1 frame. The upper backgrounds meet on one shared
   diagonal, with the seam generated from those exact coordinates.
   ============================================================ */
.join-hub {
  position: relative;
  padding: 32px 0 64px;
  background: transparent;
}

.join-hub::before { display: none; }
.join-hub__inner { position: relative; z-index: 1; }

.join-hub__frame {
  position: relative;
  --join-row-gap: 12px;
  --join-split-top: 60%;
  --join-split-bottom: 55%;
  --join-plaque-gap: 9px;
  --join-diagonal-stroke: 2px;
  --join-half-diagonal-stroke: calc(var(--join-diagonal-stroke) / 2);
  --join-plaque-stroke: 1px;
  --join-plaque-border-color: rgba(235, 161, 1, 0.20);
  --join-diagonal-dx: 5cqw;
  --join-upper-height: calc(86cqh - 10.32px);
  --join-lower-height: calc(14cqh - 1.68px);
  --join-diagonal-angle: atan2(var(--join-diagonal-dx), var(--join-upper-height));
  --join-gap-drift: calc(var(--join-row-gap) * tan(var(--join-diagonal-angle)));
  --join-lower-drift: calc(var(--join-lower-height) * tan(var(--join-diagonal-angle)));
  container-type: size;
  display: grid;
  grid-template-rows: minmax(0, 86fr) minmax(0, 14fr);
  row-gap: var(--join-row-gap);
  width: 100%;
  aspect-ratio: 3.4 / 1;
  max-height: 500px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------- Upper split plaques ---------- */
.join-hub__upper {
  position: relative;
  isolation: isolate;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The old shared background layers are retired. Each content panel now owns
   its own artwork and clipped rhombus geometry, so the two plaques are truly
   separated instead of merely looking divided. */
.join-hub__upper-bg { display: none; }

/* The divider remains independent and centred in the clear corridor. Each
   plaque stops --join-plaque-gap before it, leaving visible air on both sides. */
.join-hub__upper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--gold);
  clip-path: polygon(
    calc(var(--join-split-top) - var(--join-half-diagonal-stroke)) 0,
    calc(var(--join-split-top) + var(--join-half-diagonal-stroke)) 0,
    calc(var(--join-split-bottom) + var(--join-half-diagonal-stroke)) 100%,
    calc(var(--join-split-bottom) - var(--join-half-diagonal-stroke)) 100%
  );
  pointer-events: none;
}

.join-hub__recruit,
.join-hub__member {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

/* One continuous SVG path per plaque. The full outline, outer rounded
   corners and diagonal edge are one connected stroke, avoiding fractional
   seams between separate CSS gradients and clip-path fragments. */
.join-hub__recruit::before,
.join-hub__recruit::after,
.join-hub__member::before,
.join-hub__member::after {
  display: none;
}

.join-hub__plaque-border {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.join-hub__plaque-border--recruit {
  left: 0;
  width: calc(var(--join-split-top) - var(--join-plaque-gap));
}

.join-hub__plaque-border--member {
  left: calc(var(--join-split-bottom) + var(--join-plaque-gap));
  width: calc(100% - var(--join-split-bottom) - var(--join-plaque-gap));
}

.join-hub__plaque-border path {
  fill: none;
  stroke: var(--join-plaque-border-color);
  stroke-width: var(--join-plaque-stroke);
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-miterlimit: 16;
}

.join-hub__recruit {
  left: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  width: calc(var(--join-split-top) - var(--join-plaque-gap));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px clamp(58px, 4vw, 80px) 24px clamp(40px, 3vw, 58px);
  background-color: #d8d1c5;
  background-image: url('../images/new-players-bg.webp');
  background-position: center center;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--join-diagonal-dx)) 100%, 0 100%);
}

.join-hub__stage {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  transform: translateX(clamp(96px, 6vw, 148px));
}

.title-art--new-players-welcome {
  width: min(100%, 690px);
  margin: 0 auto 6px;
  line-height: 0;
  transform: translateY(-12px);
}

.title-art--new-players-welcome .title-art__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  object-position: center;
}

.join-hub__lead {
  max-width: 660px;
  margin: 0 auto 18px;
  color: #292a2f;
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 0.82vw, 0.98rem);
  font-weight: 500;
  line-height: 1.52;
}

.join-hub__lead-line {
  display: block;
  white-space: nowrap;
}

.join-hub__cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 330px);
  min-height: 52px;
  margin: 0 auto;
  padding: 0 22px;
  border: 1px solid rgba(235, 161, 1, 0.62);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(21, 21, 24, 0.88), rgba(8, 8, 10, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 5px 12px rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: clamp(0.76rem, 0.72vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 1.15px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(0);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.join-hub__cta-button-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--gold);
  transition: transform 0.18s ease;
}

.join-hub__cta-button:hover,
.join-hub__cta-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(235, 161, 1, 0.90);
  background: linear-gradient(180deg, rgba(28, 26, 20, 0.92), rgba(10, 10, 12, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 8px 17px rgba(0, 0, 0, 0.24);
  color: var(--white);
  outline: none;
}

.join-hub__cta-button:hover .join-hub__cta-button-arrow,
.join-hub__cta-button:focus-visible .join-hub__cta-button-arrow {
  transform: translateX(3px);
}

/* ---------- Mobile app side ---------- */
.join-hub__member {
  left: calc(var(--join-split-bottom) + var(--join-plaque-gap));
  border-radius: 0 var(--radius) var(--radius) 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px clamp(172px, 10vw, 208px) 22px clamp(78px, 5vw, 94px);
  background-color: #0b0c0f;
  background-image: url('../images/spond-member-placeholder.webp');
  background-position: center center;
  clip-path: polygon(var(--join-diagonal-dx) 0, 100% 0, 100% 100%, 0 100%);
}

.join-hub__member-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(100%, 430px);
  max-width: 430px;
  text-align: left;
}

.join-hub__member-title {
  width: 100%;
  margin: 0;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(2.15rem, 2.3vw, 3.05rem);
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 0.94;
  text-align: left;
  text-transform: uppercase;
}

.join-hub__member-title-main,
.join-hub__member-title-accent {
  display: block;
  white-space: nowrap;
}

.join-hub__member-title-accent {
  margin-top: 7px;
  color: var(--gold);
}

.join-hub__member-rule {
  display: block;
  width: 58px;
  height: 2px;
  margin: 11px 0 13px;
  background: var(--gold);
  transform: skewX(-22deg);
}

.join-hub__member-lead {
  width: 100%;
  max-width: 420px;
  margin: 0 0 15px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.82rem, 0.75vw, 0.92rem);
  line-height: 1.5;
  text-align: left;
}

.join-hub__app-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
}

.join-hub__app-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 62px;
  padding: 0 7px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 0.55vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
}

.join-hub__app-feature + .join-hub__app-feature::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 34px;
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 22%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.18) 78%,
    rgba(255, 255, 255, 0) 100%
  );
}

.join-hub__icon-hook {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 38px;
  margin: 0 auto 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.join-hub__icon-hook--training     { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23EBA101%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2211%22%20y%3D%2215%22%20width%3D%2242%22%20height%3D%2238%22%20rx%3D%225%22/%3E%3Cpath%20d%3D%22M20%209v13M44%209v13M11%2027h42M21%2036h7M36%2036h7M21%2045h7%22/%3E%3C/svg%3E"); }
.join-hub__icon-hook--availability { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23EBA101%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2222%22/%3E%3Cpath%20d%3D%22m21%2032%208%208%2015-18%22/%3E%3C/svg%3E"); }
.join-hub__icon-hook--chat         { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23EBA101%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015h40v30H29L16%2053v-8h-4z%22/%3E%3C/svg%3E"); }
.join-hub__icon-hook--payments     { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23EBA101%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2210%22%20y%3D%2217%22%20width%3D%2244%22%20height%3D%2232%22%20rx%3D%225%22/%3E%3Cpath%20d%3D%22M10%2025h44M40%2034h14v9H40a4.5%204.5%200%200%201%200-9Z%22/%3E%3C/svg%3E"); }
.join-hub__icon-hook--start        { background-image: url("../images/icon-start-from-zero.webp"); }
.join-hub__icon-hook--train        { background-image: url("../images/icon-train-with-team.webp"); }
.join-hub__icon-hook--play         { background-image: url("../images/icon-play-when-ready.webp"); }
.join-hub__icon-hook--events       { background-image: url("../images/icon-events.webp"); }
.join-hub__icon-hook--polls        { background-image: url("../images/icon-polls.webp"); }

.join-hub__download {
  width: auto;
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.join-hub__store-label {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

.join-hub__stores {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  height: 42px;
  padding: 6px 10px;
  color: var(--white);
  background: #07080a;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.store-badge:first-child { width: 126px; }
.store-badge:last-child  { width: 142px; }

.store-badge:hover,
.store-badge:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(235, 161, 1, 0.64);
  outline: none;
}

.store-badge__logo {
  flex: 0 0 auto;
  width: auto;
  height: 20px;
  max-width: 20px;
}
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.02; }
.store-badge__small { font-size: 0.46rem; letter-spacing: 0.1px; }
.store-badge__big { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; }

.join-hub__member-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
  text-align: left;
}

.join-hub__member-prompt {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
}

.join-hub__open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.join-hub__open:hover,
.join-hub__open:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

/* ---------- Shared lower feature band ---------- */
.join-hub__lower {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(235, 161, 1, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(132deg, transparent 47%, rgba(235, 161, 1, 0.26) 48% 49.5%, transparent 50.5%) left -24px bottom -12px / 92px 48px no-repeat,
    linear-gradient(132deg, transparent 46%, rgba(190, 100, 22, 0.20) 47% 50%, transparent 51%) left 22px bottom -6px / 138px 66px no-repeat,
    linear-gradient(132deg, transparent 48%, rgba(255, 255, 255, 0.12) 49% 50%, transparent 51%) left 126px bottom 8px / 62px 32px no-repeat,
    linear-gradient(132deg, transparent 47%, rgba(235, 161, 1, 0.24) 48% 49.5%, transparent 50.5%) right -18px top -12px / 96px 50px no-repeat,
    linear-gradient(132deg, transparent 46%, rgba(190, 100, 22, 0.18) 47% 50%, transparent 51%) right 28px top -4px / 142px 68px no-repeat,
    linear-gradient(132deg, transparent 48%, rgba(255, 255, 255, 0.10) 49% 50%, transparent 51%) right 136px top 12px / 60px 30px no-repeat,
    linear-gradient(180deg, rgba(18, 19, 23, 0.34) 0%, rgba(8, 9, 12, 0.28) 100%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(235, 161, 1, 0.22);
}

/* The upper diagonal continues through the supporting card after the gap.
   These coordinates extrapolate the same top-to-bottom trajectory used by
   .join-hub__upper, while the card itself clips the segment cleanly. */
.join-hub__lower::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--gold);
  clip-path: polygon(
    calc(var(--join-split-bottom) - var(--join-gap-drift) - var(--join-half-diagonal-stroke)) 0,
    calc(var(--join-split-bottom) - var(--join-gap-drift) + var(--join-half-diagonal-stroke)) 0,
    calc(var(--join-split-bottom) - var(--join-gap-drift) - var(--join-lower-drift) + var(--join-half-diagonal-stroke)) 100%,
    calc(var(--join-split-bottom) - var(--join-gap-drift) - var(--join-lower-drift) - var(--join-half-diagonal-stroke)) 100%
  );
  pointer-events: none;
}

.join-hub__lower-half {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 4px clamp(28px, 2.2vw, 40px);
}

.join-hub__lower-half + .join-hub__lower-half {
  border-left: 0;
  padding-left: clamp(38px, 3vw, 54px);
}

.join-hub__lower-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: min(100%, 760px);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}

.join-hub__lower-half:not(.join-hub__lower-half--app) .join-hub__lower-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.join-hub__lower-feature {
  position: relative;
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
}

.join-hub__lower-feature:first-child,
.join-hub__lower-feature:last-child {
  padding-inline: 18px;
}

.join-hub__lower-feature + .join-hub__lower-feature::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 38px;
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    rgba(235, 161, 1, 0) 0%,
    rgba(235, 161, 1, 0.28) 18%,
    rgba(235, 161, 1, 0.58) 50%,
    rgba(235, 161, 1, 0.28) 82%,
    rgba(235, 161, 1, 0) 100%
  );
}

.join-hub__lower-feature .join-hub__icon-hook {
  width: 42px;
  height: 42px;
  margin: 0;
}

.join-hub__lower-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.join-hub__lower-copy strong {
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 0.61vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
}

.join-hub__lower-copy span {
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(0.6rem, 0.54vw, 0.7rem);
  line-height: 1.2;
  white-space: nowrap;
}

.join-hub__lower-feature--spond {
  display: flex;
  align-items: center;
  justify-content: center;
}

.join-hub__lower-feature--spond a {
  display: block;
  width: min(100%, 104px);
  transform: translateY(0) scale(1);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.join-hub__lower-feature--spond img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.join-hub__lower-feature--spond a:hover,
.join-hub__lower-feature--spond a:focus-visible {
  transform: translateY(-2px) scale(1.035);
  filter:
    brightness(1.12)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 6px rgba(235, 161, 1, 0.18));
  outline: none;
}

@media (max-width: 1450px) {
  .join-hub__member {
    padding-right: clamp(132px, 10vw, 154px);
    padding-left: 36px;
  }

  .join-hub__member-copy { max-width: 400px; }
  .join-hub__member-title { font-size: clamp(1.95rem, 2.25vw, 2.65rem); }
  .join-hub__app-feature { padding-inline: 5px; }
  .store-badge:first-child { width: 126px; }
  .store-badge:last-child  { width: 142px; }
  .join-hub__lower-half { padding-inline: 24px; }
  .join-hub__lower-feature { grid-template-columns: 46px auto; padding-inline: 14px; }
  .join-hub__lower-feature:first-child,
  .join-hub__lower-feature:last-child { padding-inline: 14px; }
  .join-hub__lower-feature .join-hub__icon-hook { width: 38px; height: 38px; }
}

@media (max-width: 1180px) {
  .join-hub__frame {
    display: block;
    aspect-ratio: auto;
    max-height: none;
    overflow: visible;
  }

  .join-hub__upper {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line-gold);
    border-radius: var(--radius);
    background: #0b0c0f;
  }

  .join-hub__upper-bg--recruit,
  .join-hub__upper-bg--member {
    display: none;
  }

  .join-hub__upper::after { display: none; }

  .join-hub__recruit,
  .join-hub__member {
    position: relative;
    inset: auto;
    width: auto;
    right: auto;
    clip-path: none;
    filter: none;
    border-radius: 0;
  }

  .join-hub__recruit {
    min-height: 500px;
    padding: 48px 38px;
    background: #d8d1c5 url('../images/new-players-bg.webp') center / cover no-repeat;
  }

  .join-hub__stage { transform: none; }

  .join-hub__member {
    min-height: 560px;
    padding: 48px 38px;
    background: #0b0c0f url('../images/spond-member-placeholder.webp') right center / cover no-repeat;
  }

  .join-hub__member-copy { width: min(68%, 600px); max-width: 600px; }
  .join-hub__lower { grid-template-columns: 1fr; margin-top: 12px; }
  .join-hub__lower::after { display: none; }
  .join-hub__lower-half + .join-hub__lower-half {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 0;
    padding-left: clamp(28px, 2.2vw, 40px);
  }
}

@media (max-width: 720px) {
  .join-hub { padding: 24px 0 48px; }
  .join-hub__recruit { min-height: 0; padding: 38px 22px; }
  .join-hub__member { min-height: 0; padding: 38px 22px; }
  .join-hub__member-copy { width: 100%; max-width: none; }
  .join-hub__member-title { font-size: clamp(2rem, 11vw, 2.8rem); }
  .join-hub__app-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .join-hub__app-feature:nth-child(3)::before { display: none; }
  .join-hub__download { width: 100%; }
  .join-hub__stores { flex-wrap: wrap; justify-content: flex-start; }
  .store-badge { min-width: 150px; }
  .join-hub__member-action { align-items: flex-start; flex-direction: column; gap: 7px; }
  .title-art--new-players-welcome {
    width: min(100%, 620px);
    margin-bottom: 8px;
    transform: translateY(-6px);
  }
  .title-art--new-players-welcome .title-art__img { max-height: 132px; }
  .join-hub__cta-button {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 0.75rem;
    letter-spacing: 0.9px;
  }
  .join-hub__lower-half { padding: 26px 22px; }
  .join-hub__lower-features,
  .join-hub__lower-half:not(.join-hub__lower-half--app) .join-hub__lower-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .join-hub__lower-feature,
  .join-hub__lower-feature:first-child,
  .join-hub__lower-feature:last-child { padding: 0; }
  .join-hub__lower-feature + .join-hub__lower-feature::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .join-hub__cta-button,
  .join-hub__cta-button-arrow,
  .store-badge { transition: none; }
  .join-hub__cta-button:hover,
  .join-hub__cta-button:focus-visible,
  .join-hub__cta-button:hover .join-hub__cta-button-arrow,
  .join-hub__cta-button:focus-visible .join-hub__cta-button-arrow,
  .store-badge:hover,
  .store-badge:focus-visible { transform: none; }
}

/* --- Our Partners: seamless logo reel --------------------------------- */
.partners {
  position: relative;
  overflow: hidden;
  padding: 42px 0 44px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.partners::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 112px), calc(var(--maxw) - 112px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    rgba(235, 161, 1, 0) 0%,
    var(--line-gold) 8%,
    var(--line-gold) 92%,
    rgba(235, 161, 1, 0) 100%);
  pointer-events: none;
}
.partners__inner {
  position: relative;
  z-index: 1;
}
.partners__header {
  text-align: center;
}
.partners__heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.partners__heading-rule {
  width: clamp(42px, 8vw, 112px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}
.partners__title {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.partners__title span {
  color: rgba(255, 255, 255, 0.78);
}
.partners__subtitle {
  margin: 11px 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Seamless partner reel. Add each real partner only once in index.html;
   partners.js creates the repeated visual track and calculates its loop. */
.partners__marquee {
  position: relative;
  width: min(100%, 1420px);
  margin: 28px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.partners__track {
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.partners__marquee.is-ready .partners__track {
  animation: partners-reel var(--partners-loop-duration, 28s) linear infinite;
}
.partners__marquee:hover .partners__track,
.partners__marquee:focus-within .partners__track {
  animation-play-state: paused;
}
.partners__list {
  --partners-item-gap: clamp(28px, 2.4vw, 46px);
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--partners-item-gap);
  width: max-content;
  margin: 0;
  padding: 8px clamp(18px, 2vw, 32px);
  list-style: none;
}
.partners__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: clamp(128px, 9vw, 170px);
  min-height: 86px;
  padding-inline: clamp(6px, 0.8vw, 12px);
}
.partners__item::after {
  content: "";
  position: absolute;
  right: calc(var(--partners-item-gap) / -2);
  top: 50%;
  width: 1px;
  height: 48px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(235, 161, 1, 0.24), transparent);
}
.partners__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 100%;
  min-height: 86px;
  text-decoration: none;
}
.partners__logo-link img {
  display: block;
  max-width: 176px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(0.18) brightness(0.82) contrast(0.95);
  transform: translateY(0);
  transition: opacity 0.24s ease, filter 0.24s ease, transform 0.24s ease;
}
.partners__logo-link:hover img,
.partners__logo-link:focus-visible img {
  opacity: 1;
  filter: grayscale(0) brightness(1) contrast(1);
  transform: translateY(-2px);
}
.partners__logo-link:focus-visible,
.partners__cta:focus-visible {
  outline: 1px solid rgba(235, 161, 1, 0.72);
  outline-offset: 7px;
  border-radius: 2px;
}

.partners__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.partners__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(235, 161, 1, 0.28);
  border-radius: 3px;
  background: rgba(12, 13, 16, 0.56);
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.partners__cta-kicker {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.partners__cta-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.partners__cta-arrow {
  font-family: var(--font-body);
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.partners__cta:hover,
.partners__cta:focus-visible {
  border-color: rgba(235, 161, 1, 0.62);
  background: rgba(18, 19, 22, 0.82);
  transform: translateY(-1px);
}
.partners__cta:hover .partners__cta-arrow,
.partners__cta:focus-visible .partners__cta-arrow {
  transform: translateX(4px);
}

@keyframes partners-reel {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--partners-loop-distance, 0px)), 0, 0); }
}

@media (max-width: 720px) {
  .partners { padding: 36px 0 38px; }
  .partners__heading-row { gap: 12px; }
  .partners__heading-rule { width: 34px; }
  .partners__subtitle {
    max-width: 280px;
    margin-inline: auto;
    line-height: 1.5;
  }
  .partners__marquee {
    margin-top: 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .partners__list {
    --partners-item-gap: 28px;
    padding-inline: 20px;
  }
  .partners__item {
    min-width: 132px;
    min-height: 80px;
  }
  .partners__item::after {
    height: 42px;
  }
  .partners__logo-link,
  .partners__logo-link img { max-height: 72px; }
  .partners__cta {
    flex-direction: column;
    gap: 4px;
    min-height: 58px;
    padding: 8px 18px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners__marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
  }
  .partners__marquee.is-ready .partners__track { animation: none; }
  .partners__logo-link img,
  .partners__cta,
  .partners__cta-arrow { transition: none; }
  .partners__logo-link:hover img,
  .partners__logo-link:focus-visible img,
  .partners__cta:hover,
  .partners__cta:focus-visible,
  .partners__cta:hover .partners__cta-arrow,
  .partners__cta:focus-visible .partners__cta-arrow { transform: none; }
}


/* --- Footer: calm, utility-focused --- */
.site-footer {
  position: relative;
  background: var(--black);
  color: rgba(255, 255, 255, 0.66);
  /* FUTURE FOOTER BACKGROUND — dormant hook.
     To activate: set the custom property below to the image, e.g.
       --footer-background-image: url("../images/footer-placeholder.jpg");
     Suggested asset location: images/footer-placeholder.jpg.
     The image must be subtle, low-opacity, charcoal-toned — it may later
     carry faint tactical marks, a light diagonal motif, or quiet rugby
     atmosphere, and must NEVER compromise footer readability.
     While set to `none`, this layer paints nothing and the footer is
     visually unchanged (no request, no broken-image state). */
  --footer-background-image: none;
}
/* Isolated background layer behind ALL footer content (content is lifted
   above it via z-index on .footer__grid / .footer__bar below). */
.site-footer::before {
  display: none;
}

.footer__grid {
  position: relative;
  z-index: 1;                      /* above the dormant background layer */
  display: grid;
  grid-template-columns: 1.35fr 1.1fr 1.15fr 1.25fr;
  gap: 48px;
  padding-top: 52px;
  padding-bottom: 40px;
}

.footer__heading {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}

/* Centre only the three content-column headings (desktop). Their content
   below stays as authored: Quick Links + Home Ground left-aligned, the
   crest group centred. */
.footer__col--links .footer__heading,
.footer__col--ground .footer__heading,
.footer__col--represent .footer__heading {
  text-align: center;
}

/* Thin faded-gold vertical dividers in the gaps after columns 1–3 (desktop
   only). Centred in the 48px gap, ~72% of grid height, soft fade top/bottom,
   never after Proud to Represent. */
.footer__col {
  position: relative;
}
.footer__col--brand::after,
.footer__col--links::after,
.footer__col--ground::after {
  content: "";
  position: absolute;
  top: 14%;
  height: 72%;
  right: -24px;            /* half of the 48px column gap */
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(235, 161, 1, 0.28), transparent);
}

/* Column 1 — brand lockup (same family as the header brand) */
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 22px;
}
.footer__brand-crest {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}
.footer__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer__brand-sub {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 3px;
}
.footer__socials {
  display: flex;
  gap: 12px;
}
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.footer__social:hover,
.footer__social:focus-visible {
  color: var(--gold);
  border-color: var(--line-gold);
  background: rgba(235, 161, 1, 0.06);
}

/* Brand statement — secondary to the lockup; muted-light, compact. */
.footer__statement {
  margin: 20px 0 0;
  max-width: 42ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}

/* Column 2 — quick links: one heading, two internal columns */
/* The UL is the intrinsic-width wrapper: the two-column group centres as
   one unit inside the cell while links stay left-aligned internally. */
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 11px 28px;
  width: fit-content;
  margin-inline: auto;
}
.footer__links a {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.2s ease;
}
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--gold); }

/* Column 3 — home ground (icon + content rows) */
/* The address block is the intrinsic-width wrapper: the whole icon+details
   group centres in the cell; rows stay left-aligned internally. */
.footer__address {
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.6;
  width: fit-content;
  margin-inline: auto;
}
.footer__addr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.footer__addr-row:last-child { margin-bottom: 0; }
.footer__addr-icon {
  flex: 0 0 auto;
  color: var(--gold);
  display: inline-flex;
}
.footer__address a {
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.2s ease;
}
.footer__address a:hover,
.footer__address a:focus-visible { color: var(--gold); }

/* Column 4 — Proud to Represent (local identity trio, NOT sponsors).
   The column is a plain footer grid item. The inner stage below is the ONE
   element that positions the composition: heading, crest row, captions and
   motto share its single centre axis. Base rule (all viewports): full-width
   flex column with centred children — tablet/mobile use this as-is. */
.footer__represent-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.footer__crests {
  display: flex;
  flex-wrap: nowrap;                 /* one desktop row, centred as a unit */
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
/* NOTE: this desktop block must stay AFTER the .footer__crests base rule
   above — equal specificity means source order decides, and the grid
   override must win at >=1025px (same source-order class of bug as the
   old burger toggle). */
/* Desktop composition — structural, no offsets, no transforms.
   THE INVISIBLE REFERENCE AREA: the represent column itself. Its grid
   track's right edge IS the container content edge — the exact endpoint
   of "Terms & Conditions" in the legal row below. (Its left boundary is
   the Home Ground divider zone; for a right-aligned stage only the right
   edge positions anything, so no extra wrapper element is needed.)
   THE STAGE: sizes to its own content (fit-content) and is RIGHT-ALIGNED
   inside the reference area — margin-left:auto pushes it flush against
   the T&C endpoint; it is deliberately NOT centred in the column. All
   slack space falls on the left, inside the reference area. The real
   Brittany Signature motto is wider than the column's fr share, so a
   centred stage would overflow BOTH sides and poke past T&C on the
   right; right-alignment pins the right edge exactly on the T&C stop.
   THE SHARED AXIS: the crest row is three EQUAL grid columns stretched
   to the full stage width, so Märjamaa Town — the middle column — sits
   structurally ON the stage's centre axis for any font metrics, and the
   centred heading and motto share that same axis. */
@media (min-width: 1025px) {
  .footer__represent-inner {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;    /* right-align the stage on the T&C endpoint */
    margin-right: 0;
    text-align: center;
  }
  .footer__crests {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    align-self: stretch;
    column-gap: 10px;
  }
  /* Align the legal-links row with the right endpoint of the community
     motto and the footer container's content edge. */
  .footer__bar-inner { padding-right: 56px; }
  /* Desktop: force each crest caption to two centred lines
     ("Märjamaa" on row 1). Tablet/mobile keep natural wrapping. */
  .footer__crest-cap-l { display: block; }
}
/* Each crest is a real external link. Identity-mark interactivity only:
   a ~2px lift + a soft warm halo behind the crest artwork itself. No
   frame, no box, no scale; the logo artwork is never recoloured. */
.footer__crest {
  margin: 0;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  padding: 8px 4px 6px;
  transition: transform 0.2s ease;
}
.footer__crest img {
  height: 56px;          /* one consistent display HEIGHT; width follows aspect */
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: filter 0.2s ease;
}
.footer__crest-cap {
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.22s ease;
}
/* Captions may wrap to two lines so all three crests fit one desktop row
   within the column (keeps crest scale + labels unchanged). */
.footer__crest-cap { max-width: 96px; }
/* Hover / keyboard-focus: the crest is acknowledged — small lift, warm gold
   halo behind the artwork, label brightens toward muted gold. Same visible
   treatment for both pointer and keyboard. */
.footer__crest:hover,
.footer__crest:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.footer__crest:hover img,
.footer__crest:focus-visible img {
  filter: drop-shadow(0 4px 14px rgba(235, 161, 1, 0.35))
          drop-shadow(0 1px 4px rgba(235, 161, 1, 0.22));
}
.footer__crest:hover .footer__crest-cap,
.footer__crest:focus-visible .footer__crest-cap {
  color: rgba(219, 190, 116, 0.95);   /* muted gold */
}

/* Community motto — same handwritten script as the Dynasty tagline.
   Soft off-white words; both "community" words gold. No bold, glow, or quotes. */
.footer__motto {
  font-family: "Brittany Signature", cursive;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;                 /* one line on desktop */
  color: rgba(255, 255, 255, 0.78);    /* soft off-white ordinary words */
  margin: 24px 0 0;                    /* modest, deliberate gap above */
}
.footer__motto span { color: var(--gold); }

/* Respect reduced-motion: keep the halo acknowledgement, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .footer__crest { transition: none; }
  .footer__crest img { transition: none; }
  .footer__crest:hover,
  .footer__crest:focus-visible { transform: none; }
}

/* Copyright bar */
.footer__bar {
  position: relative;
  z-index: 1;                      /* above the dormant background layer */
  border-top: 1px solid var(--line);
}
.footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.footer__copy {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.45);
}
.footer__legal {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__legal-sep {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.84rem;
  line-height: 1;
}
.footer__legal a {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease;
}
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--gold); }

/* --- Tablet: footer collapses to two columns --- */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
  }
  /* Dividers are a desktop-only flourish: hide once columns reflow. */
  .footer__col--brand::after,
  .footer__col--links::after,
  .footer__col--ground::after {
    display: none;
  }
}

/* --- Mobile: stack cleanly, no overflow --- */
@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 44px;
    padding-bottom: 40px;
  }
  .footer__crests { gap: 28px; }
  /* Allow a clean centred wrap when the line can't fit; gold words preserved. */
  .footer__motto { white-space: normal; }

  .footer__bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer__legal { gap: 10px; }
}

/* === TITLE ART placeholders (temporary PNG heading images) ===
   Selected section headings render as transparent PNGs sized to match the
   live text they replace. Height-driven (matches the cap-height of the old
   text) with a width guard so nothing overflows or distorts. Swap the PNG
   files only for final art. === */
.title-art { line-height: 0; }
.title-art__img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Cover Stories: left aligned, enlarged ~1.5x (66px desktop). */
.title-art--cover-stories { text-align: left; }
.title-art--cover-stories .title-art__img { width: auto; height: 66px; }
/* Our Journey / Our Legacy: wide replacement-image slot.
   The wrapper now owns the full visual area for the title asset, not just
   a tiny inline text-height strip. Replace images/title-journey-legacy.webp
   with any wider lockup/mural title and it can use this whole band. */
.title-art--journey-legacy {
  text-align: center;
  width: min(300%, calc(100vw - 32px));
  max-width: none;
  height: clamp(172px, 12.8vw, 224px);
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-art--journey-legacy .title-art__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}
/* A Brotherhood / A Family: left aligned two-line, ~114px footprint. */
@media (max-width: 820px) {
  .title-art--cover-stories .title-art__img { height: 54px; }
  .title-art--journey-legacy { width: min(300%, calc(100vw - 24px)); height: 148px; }
  
}
@media (max-width: 480px) {
  .title-art--cover-stories .title-art__img { height: 45px; }
  .title-art--journey-legacy { width: min(300%, calc(100vw - 16px)); height: 108px; }
  
}

.page-master-bg-shell {
  position: relative;
  isolation: isolate;
  background: var(--charcoal);
  overflow: visible;              /* allows Match Command overlap + hero arrows */
}
.page-master-bg-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--master-bg-image);
  background-position: var(--master-bg-position-x) var(--master-bg-position-y);
  background-size: var(--master-bg-size);
  background-repeat: var(--master-bg-repeat);
  opacity: var(--master-bg-opacity);
}
.page-master-bg-shell > * {
  position: relative;
  z-index: 1;
}

/* Let the single master background show through the large page chapters.
   Content-local panels and plaques still draw their own surfaces. */
.page-master-bg-shell > .match-command,
.page-master-bg-shell > .cover-stories,
.page-master-bg-shell > .dynasty,
.page-master-bg-shell > .brother,
.page-master-bg-shell > .site-footer {
  background: transparent;
}

/* Legacy large section background hooks are intentionally dormant.
   Local plaque/card/button surfaces are not affected. */
.match-command::before,
.cover-stories::before,
.dynasty::before,
.site-footer::before,
.brother__bg {
  display: none;
}


.media-intro__cta > span {
  flex: 0 0 auto;
  text-align: center;
}

@media (max-width: 1180px) {
  .brother__copy.media-intro {
    min-height: auto;
  }

  .media-intro__cta {
    margin-top: 20px;
  }
}

/* Numbered promises replace generic check marks. */
















/* Mobile-app panel: content occupies the left, product visual owns the right. */










































/* Tablet: phone becomes atmosphere and both panels use full-width content. */
@media (max-width: 1180px) {
  
  
}

@media (max-width: 1024px) {
  
  
  
  
  
}

@media (max-width: 700px) {
  
  
  
  
  
  
  

  
  
  
  
  
  
  
}



/* Recruitment kicker: stronger contrast against the warm worn plate. */




/* Recruitment copy: retain sentence case, but move away from a generic
   document-like body treatment toward the site's condensed editorial face. */


/* Dark recruitment CTA with a restrained green keyline, matching the site's
   darker button language instead of using a flat green slab. */




/* Recruitment promises: the number spans the visual height of both copy
   lines; text switches to white uppercase with a controlled shadow so it
   remains legible over the darker lower edge of the artwork. */












/* Mobile-app feature cells: icon and title share one line. The cells become
   shorter, while the secondary row moves up. A fixed desktop body footprint
   keeps the download label and store badges in their current visual zone. */








@media (max-width: 1180px) {
  
}

@media (max-width: 700px) {
  

  
}


.brother {
  padding-bottom: 44px;
}



/* Move the media paragraph/divider group upward beneath the title artwork. */
.media-intro__heading {
  margin-bottom: 36px;
}

.media-intro__mid {
  margin: 0 0 auto;
}

.brother__lead.media-intro__lead {
  margin-bottom: 18px;
}

.media-pillars {
  padding-top: 17px;
}

/* Distinct editorial sentence face, without the previous text shadow. */


/* The recruitment CTA is artwork again. Its fixed visual width cannot widen
   the 62/38 frame or shift/crop the mobile-app background. */






/* The number's rendered line-box matches the combined height of the two copy
   rows: top edge of the title to bottom edge of the supporting line. */












/* Keep the panel and its baked phone exactly where the approved background
   places them. Only content distribution changes. */


/* Paragraph + feature cells + secondary items become one centred middle unit
   between ONE APP. and the unchanged Download the Club App block. */






/* Content-width cells: every label gets real side padding, while shorter
   labels no longer sit inside oversized empty equal-width boxes. */






/* Deliberately preserve the approved separation before the download block. */


@media (max-width: 1180px) {
  
}

@media (max-width: 700px) {
  .brother { padding-bottom: 36px; }
  

  

  

  

  
}

@media (prefers-reduced-motion: reduce) {
  
  
}

/* --- Media: restore the earlier vertical rhythm ---------------- */
.media-intro__heading {
  margin-bottom: 36px;
}

.media-intro__mid {
  margin-block: auto;
}

.brother__lead.media-intro__lead {
  margin: 0 0 24px;
}

.media-pillars {
  padding-top: 20px;
}

.media-intro__foot {
  margin-top: auto;
}

/* Optically match the footer line to VIEW FULL GALLERY. */
.media-intro__channels {
  margin: 10px auto 18px;
  transform: translateY(-6px);
}

.brother {
  padding-bottom: 28px;
}



/* Readable charcoal kicker; gold remains in the flanking rules. */




/* Number and both copy rows share the exact same 32px visual height. */










/* --- Mobile app: one unified feature rail instead of three boxes --- */














@media (max-width: 1180px) {
  .media-intro__channels {
    transform: none;
  }

  
}

@media (max-width: 700px) {
  .brother {
    padding-bottom: 24px;
  }

  

  

  

  

  
}


/* Keep the YouTube CTA fixed; lower only its small channel line to the
   same optical baseline as VIEW FULL GALLERY. */
.media-intro__channels {
  margin: 10px auto 0;
  transform: translateY(15px);
}

.brother {
  padding-bottom: 14px;
}



/* Clearer eyebrow without glow or text shadow. */




/* Number height tracks the exact two-line copy block. */










/* Six equal app reasons: two clean rows, no dark cells, no rail dividers. */










@media (max-width: 1180px) {
  .media-intro__channels {
    transform: none;
  }
}

@media (max-width: 700px) {
  .brother {
    padding-bottom: 18px;
  }

  

  

  
}

.brother {
  padding-bottom: 32px;
}



/* Keep WATCH ON YOUTUBE in place. Position only its small channel line against
   the bottom of the media column so it shares VIEW FULL GALLERY's baseline. */
.media-intro__channels {
  transform: none;
}

@media (min-width: 1181px) {
  .brother__copy.media-intro {
    position: relative;
  }

  .media-intro__foot {
    position: relative;
    margin-top: auto;
    padding-bottom: 24px;
  }

  .media-intro__channels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
  }
}

/* Numbers now occupy the same visual height as both copy rows together, with
   a slightly stronger charcoal keyline. Supporting copy remains mid-charcoal,
   not white, but gains enough weight and contrast to survive the worn edge. */










/* Mobile app reasons: one quiet six-item grid with no dark cell slabs, no
   full-width dividers and no background rail. The common icon treatment and
   two-row rhythm make the set read as one system. */












@media (max-width: 1180px) {
  .brother {
    padding-bottom: 28px;
  }

  
}

@media (max-width: 700px) {
  .brother {
    padding-bottom: 24px;
  }

  

  

  

  

  
}


/* MEDIA: the CTA occupies its own row between the three media categories
   and the channel footer. The channel footer remains on the gallery-link
   baseline and does not overlap the button. */
@media (min-width: 1181px) {
  .media-intro__foot {
    position: relative;
    height: 112px;
    min-height: 112px;
    margin-top: 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .media-intro__cta {
    position: static;
    flex: 0 0 auto;
    margin: 0 auto;
  }

  .media-intro__channels {
    position: static;
    flex: 0 0 auto;
    margin: 0 auto;
    transform: none;
  }
}

/* Stronger charcoal keyline without changing the approved number height. */


/* MOBILE APP: restore the approved compact three-cell feature row and the
   centred Events · Polls · Payments line beneath it. */
















@media (max-width: 1180px) {
  .media-intro__foot {
    height: auto;
    min-height: 0;
  }

  
}

@media (max-width: 700px) {
  

  
}

/* ============================================================
   MEDIA FOOTER ALIGNMENT — FINAL TWO-POINT ADJUSTMENT
   1. Align the channel list with VIEW FULL GALLERY.
   2. Keep WATCH ON YOUTUBE visually paired with the channel list.
   Desktop only; stacked responsive layouts remain unchanged.
   ============================================================ */
@media (min-width: 1181px) {
  .brother__copy.media-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: center;
    min-height: 0;
  }

  .media-intro__heading {
    margin-bottom: 38px;
  }

  .media-intro__mid {
    margin: 0;
  }

  .brother__lead.media-intro__lead {
    margin: 0 0 30px;
  }

  .media-pillars {
    padding-top: 22px;
  }

  .media-intro__foot {
    position: static;
    height: auto;
    min-height: 0;
    margin: 40px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
  }

  .media-intro__cta {
    position: static;
    margin: 0 auto;
  }

  .media-intro__channels {
    position: static;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
  }
}

/* ============================================================
   MEDIA INTRO MID-GROUP — VERTICAL CENTRING
   Keeps the approved WATCH ON YOUTUBE + channel footer locked.
   Moves only the paragraph/divider/three-icon group upward so it
   sits visually midway between the title artwork and CTA button.
   ============================================================ */
@media (min-width: 1181px) {
  .media-intro__mid {
    transform: none;
  }
}

/* ============================================================
   MOBILE RESPONSIVE SYSTEM — HOMEPAGE
   Desktop rules above remain the source of truth. This layer only
   restructures the approved desktop compositions for tablet/phone.
   ============================================================ */
@media (max-width: 1200px) {
  .match-command__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .match-command__row > .match-command__panel,
  .match-command__row > .season-glance {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }
}


@media (max-width: 1180px) {
  .join-hub__frame {
    container-type: normal;
    contain: none;
  }

  .join-hub__upper {
    gap: 14px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .join-hub__plaque-border {
    display: none;
  }

  .join-hub__recruit,
  .join-hub__member {
    overflow: hidden;
    border: 1px solid rgba(235, 161, 1, 0.26);
    border-radius: var(--radius);
  }
}

@media (max-width: 1080px) {
  :root {
    --header-h: 70px;
  }

  .container {
    padding-inline: 28px;
  }

  .partners::before {
    width: calc(100% - 56px);
  }

  .site-header::before {
    height: calc(var(--header-h) + 14px);
  }

  .header-inner,
  .site-header.is-scrolled .header-inner {
    height: var(--header-h);
  }

  .brand {
    gap: 10px;
  }

  .brand__logo,
  .site-header.is-scrolled .brand__logo {
    width: 44px;
    height: 44px;
  }

  .brand__name {
    font-size: 1.02rem;
  }

  .brand__sub {
    font-size: 0.61rem;
    letter-spacing: 1.55px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-color: rgba(235, 161, 1, 0.26);
  }

  .mobile-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 28px 28px;
    background: rgba(8, 8, 10, 0.985);
    border-top-color: rgba(235, 161, 1, 0.20);
  }

  .mobile-nav.is-open {
    height: auto;
  }

  .hero {
    min-height: 650px;
    padding-top: calc(var(--header-h) + 50px);
    padding-bottom: 88px;
  }

  .hero__bg .hero-slide img {
    object-position: 68% center;
  }

  .hero__content {
    width: min(62%, 620px);
  }

  .hero__title-lockup {
    width: 100%;
  }

  .hero__actions--image-buttons {
    width: 100%;
    flex-wrap: wrap;
  }

  .hero-image-btn--story,
  .hero-image-btn--join {
    width: min(46%, 250px);
  }

  .cover-stories {
    padding-bottom: 34px;
  }

  .dynasty {
    padding-block: 24px 36px;
  }

  .brother__grid {
    margin-inline: auto;
  }

  .brother__copy.media-intro {
    min-height: 0;
  }

  .media-intro__heading {
    padding-right: 0;
  }

  .media-intro__mid {
    margin-block: 0;
  }

  .media-intro__foot {
    position: static;
    height: auto;
    min-height: 0;
    margin-top: 24px;
    padding: 0;
  }

  .media-intro__channels {
    position: static;
    margin-top: 10px;
    padding: 0;
  }

  .join-hub__frame {
    container-type: normal;
    contain: none;
  }

  .join-hub__upper {
    gap: 14px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .join-hub__plaque-border {
    display: none;
  }

  .join-hub__recruit,
  .join-hub__member {
    overflow: hidden;
    border: 1px solid rgba(235, 161, 1, 0.26);
    border-radius: var(--radius);
  }

  .join-hub__recruit {
    min-height: 480px;
  }

  .join-hub__member {
    min-height: 540px;
  }

  .join-hub__lower {
    overflow: hidden;
  }

  .page-master-bg-shell {
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 64px;
    --master-bg-size: auto 100%;
  }

  html {
    scroll-padding-top: calc(var(--header-h) + 8px);
  }

  body {
    overflow-x: hidden;
  }

  .container {
    padding-inline: 18px;
  }

  .partners::before {
    width: calc(100% - 36px);
  }

  .site-header::before {
    height: calc(var(--header-h) + 12px);
  }

  .brand__logo,
  .site-header.is-scrolled .brand__logo {
    width: 40px;
    height: 40px;
  }

  .brand__name {
    font-size: 0.92rem;
    letter-spacing: 0.75px;
  }

  .brand__sub {
    font-size: 0.56rem;
    letter-spacing: 1.25px;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  .mobile-nav {
    padding-inline: 18px;
  }

  .mobile-nav a,
  .mobile-group__toggle {
    min-height: 48px;
  }

  /* Hero */
  .hero {
    min-height: 290px;
    padding-top: calc(var(--header-h) + 18px);
    padding-bottom: 4px;
  }

  .hero__bg {
    background:
      var(--black-soft)
      url('../images/mobile-hero-placeholder.webp')
      center center / cover no-repeat;
  }

  .hero__bg .hero-slide img {
    display: none;
  }

  .hero__content {
    width: min(100%, 520px);
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .hero__title-lockup {
    width: min(94%, 500px);
    margin: 0 auto 10px;
  }

  .hero__actions--image-buttons {
    display: none;
  }

  .hero__gallery-nav {
    margin: 10px 18px 0 auto;
  }

  .hero__gallery-btn,
  .hero__gallery-img {
    width: 40px;
    height: 40px;
  }

  /* Match Command */
  .match-command {
    --match-command-plaque-overlap: 0px;
    --hero-gallery-overlap-offset: 0px;
    padding: 12px 0 34px;
  }

  .match-command__row {
    margin-top: 0;
  }

  .match-command__row {
    gap: 16px;
  }

  .match-command__panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "fixture"
      "meta"
      "status";
    filter: none;
    -webkit-mask: none;
    mask: none;
  }

  .match-command__side {
    position: relative;
    min-height: 46px;
    padding-block: 8px;
  }

  .match-command__side-art {
    width: auto;
    height: auto;
    background-image: none;
  }

  .match-command__side-art::before {
    content: "NEXT MATCH";
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
  }

  .match-command__side::before,
  .match-command__side::after {
    display: none;
  }

  .match-command__fixture {
    gap: clamp(10px, 3.6vw, 18px);
    padding: 19px 12px;
  }

  .match-command__team {
    width: min(36%, 116px);
    gap: 7px;
  }

  .match-command__crest {
    width: 56px;
    height: 56px;
  }

  .match-command__team-name {
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: normal;
  }

  .match-command__vs {
    width: 40px;
    height: 36px;
  }

  .match-command__meta,
  .match-command__status {
    padding: 16px 14px;
  }

  .match-command__details {
    gap: 10px;
  }

  .match-command__details li > span {
    gap: 5px;
  }

  .match-command__details strong,
  .match-command__detail-sub {
    white-space: normal;
  }

  .match-command__status {
    background: rgba(0, 0, 0, 0.30);
  }

  .match-command__status-inner {
    gap: 14px;
  }

  .match-command__comp {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }

  .match-command__countdown {
    width: 100%;
    gap: 5px;
    justify-content: space-between;
    transform: none;
  }

  .match-command__unit {
    min-width: 0;
  }

  .match-command__num {
    font-size: clamp(1.55rem, 8vw, 1.95rem);
  }

  .match-command__form {
    display: none;
  }

  .match-command__status-inner {
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .match-command__meta > .match-command__cta {
    justify-content: flex-start;
    gap: 8px;
  }

  .season-glance {
    display: none;
    min-height: 0;
    padding: 15px;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 0 1px rgba(235, 161, 1, 0.10);
  }

  .season-glance__head {
    align-items: center;
  }

  .season-glance__title {
    font-size: 0.76rem;
    letter-spacing: 1.8px;
  }

  .season-glance__year {
    font-size: 0.62rem;
  }

  .season-glance__body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 0;
  }

  .season-glance__rank {
    align-items: center;
    text-align: center;
  }

  .season-glance__stats {
    justify-self: stretch;
    justify-content: space-around;
  }

  .season-glance > .season-glance__cta {
    justify-content: space-between;
  }

  /* Cover Stories */
  .cover-stories {
    padding-bottom: 6px;
  }

  .cover-stories__head {
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 14px;
    margin-bottom: 20px;
  }

  .title-art--cover-stories {
    flex: 1 1 auto;
    min-width: 0;
  }

  .title-art--cover-stories .title-art__img {
    max-width: 100%;
  }

  .title-art--cover-stories .title-art__img {
    height: 44px;
  }

  .cover-stories__all {
    padding-bottom: 3px;
    font-size: 0.68rem;
    letter-spacing: 1.2px;
  }

  .cover-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cover-story-card__body {
    gap: 5px;
    padding: 10px 9px 11px;
  }

  .cover-story-card__cat {
    font-size: 0.49rem;
    letter-spacing: 1.1px;
  }

  .cover-story-card__title {
    display: -webkit-box;
    min-height: 2.55em;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cover-story-card__excerpt {
    display: none;
  }

  .cover-story-card__more {
    gap: 4px;
    padding-top: 3px;
    font-size: 0.52rem;
    letter-spacing: 0.8px;
  }

  .cover-story-card__arrow {
    width: 10px;
    height: 10px;
  }

  .cover-story-card__media {
    aspect-ratio: 4 / 3;
  }

  /* Mobile uses four independent transparent assets instead of cropping the
     desktop ledger. Replace each 1200 × 600 PNG without touching the layout. */
  .dynasty {
    padding-block: 0 12px;
  }

  .dynasty__head {
    margin-bottom: 10px;
  }

  .title-art--journey-legacy {
    width: 100%;
    height: 92px;
    left: auto;
    transform: none;
  }

  .dynasty-art {
    display: none;
  }

  .dynasty-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .dynasty-mobile-panel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    object-position: center;
    border: 1px solid rgba(235, 161, 1, 0.12);
    border-radius: 4px;
    background: rgba(11, 12, 15, 0.42);
  }

  /* Media */
  .brother {
    padding: 8px 0 18px;
  }

  .brother__grid {
    gap: 22px;
  }

  .media-intro__heading,
  .media-intro__heading-art {
    width: min(100%, 360px);
  }

  .media-intro__heading {
    margin-bottom: 14px;
  }

  .media-intro__heading--art {
    min-height: 0;
  }

  .brother__lead {
    max-width: 100%;
    font-size: 0.9rem;
    line-height: 1.58;
  }

  .media-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
  }

  .media-intro__cta {
    width: min(100%, 330px);
  }

  .brother-feature__meta {
    min-height: 94px;
    padding: 28px 16px 14px;
  }

  .brother-feature__title {
    font-size: 0.88rem;
  }

  .video__play {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
  }

  .video__play-icon,
  .video__play-callout {
    display: none;
  }

  .brother-feature__duration {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }

  .brother-feature__click-separator,
  .brother-feature__click-label {
    display: inline;
  }

  .brother-feature__click-separator {
    color: rgba(255, 255, 255, 0.38);
    font-family: var(--font-body);
    font-weight: 400;
  }

  .brother-feature__click-label {
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .media-rail {
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    gap: 8px;
  }

  .media-rail__item {
    width: 132px;
    flex-basis: 132px;
  }

  .media-rail__all {
    justify-self: start;
  }

  /* Join Hub */
  .join-hub {
    padding: 10px 0 44px;
  }

  .join-hub__upper {
    gap: 12px;
  }

  .join-hub__recruit,
  .join-hub__member {
    min-height: 0;
  }

  .join-hub__recruit {
    isolation: isolate;
    align-items: flex-end;
    padding: 238px 18px 26px;
    border: 0;
    background-image:
      linear-gradient(180deg,
        rgba(216, 209, 197, 0.02) 0%,
        rgba(216, 209, 197, 0.10) 34%,
        rgba(216, 209, 197, 0.88) 58%,
        #d8d1c5 76%),
      url('../images/new-players-bg.webp');
    background-position: 18% top, 18% top;
    background-size: cover, auto 100%;
    background-repeat: no-repeat;
  }

  .join-hub__recruit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    box-sizing: border-box;
    border: 1px solid rgba(235, 161, 1, 0.34);
    border-radius: var(--radius);
    background: none;
    pointer-events: none;
  }

  .join-hub__stage {
    width: 100%;
    max-width: none;
    transform: none;
  }

  .title-art--new-players-welcome {
    width: min(102%, 430px);
    margin-bottom: 8px;
    transform: none;
  }

  .title-art--new-players-welcome .title-art__img {
    max-height: 126px;
  }

  .join-hub__lead {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: clamp(0.68rem, 3.25vw, 0.80rem);
    line-height: 1.42;
  }

  .join-hub__lead-line {
    display: block;
    white-space: nowrap;
  }

  .join-hub__cta-button {
    width: min(100%, 330px);
  }

  .join-hub__member {
    align-items: flex-start;
    padding: 20px 16px 18px;
    border-color: rgba(126, 92, 18, 0.72);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(11, 12, 15, 0.88);
    background-color: #0b0c0f;
    background-image:
      linear-gradient(90deg,
        rgba(8, 9, 12, 0.98) 0%,
        rgba(8, 9, 12, 0.90) 48%,
        rgba(8, 9, 12, 0.46) 76%,
        rgba(8, 9, 12, 0.16) 100%),
      linear-gradient(180deg,
        rgba(8, 9, 12, 0.10) 0%,
        rgba(8, 9, 12, 0.26) 46%,
        rgba(8, 9, 12, 0.72) 100%),
      url('../images/spond-member-placeholder.webp');
    background-position: center, center, 94% center;
    background-size: cover, cover, auto 112%;
    background-repeat: no-repeat;
  }

  .join-hub__member-copy {
    width: 78%;
    max-width: 310px;
  }

  .join-hub__member-title {
    font-size: clamp(1.58rem, 7.6vw, 1.95rem);
  }

  .join-hub__member-rule {
    margin: 6px 0 8px;
  }

  .join-hub__member-title-main,
  .join-hub__member-title-accent {
    white-space: normal;
  }

  .join-hub__member-lead {
    max-width: 32ch;
    margin-bottom: 14px;
    font-size: 0.70rem;
    line-height: 1.32;
  }

  .join-hub__app-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 14px;
  }

  .join-hub__app-feature {
    min-height: 42px;
    padding-inline: 3px;
  }

  .join-hub__app-feature .join-hub__icon-hook {
    width: 27px;
    height: 24px;
    margin-bottom: 2px;
  }

  .join-hub__app-feature span:last-child {
    font-size: 0.50rem;
    line-height: 1.14;
  }

  .join-hub__app-feature:nth-child(3)::before {
    display: block;
  }

  .join-hub__download {
    margin-top: 2px;
  }

  .join-hub__store-label {
    margin-bottom: 6px;
  }

  .join-hub__stores {
    gap: 8px;
  }

  .store-badge {
    height: 34px;
    padding-block: 4px;
  }

  .store-badge,
  .store-badge:first-child,
  .store-badge:last-child {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }

  .store-badge__txt {
    min-width: 0;
  }

  .store-badge__small {
    font-size: 0.43rem;
    white-space: nowrap;
  }

  .store-badge__big {
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .join-hub__member-action {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
    margin-top: 8px;
    white-space: nowrap;
  }

  .join-hub__member-prompt {
    font-size: 0.62rem;
  }

  .join-hub__open {
    margin-left: auto;
    font-size: 0.60rem;
    letter-spacing: 0.75px;
  }

  .join-hub__lower {
    margin-top: 12px;
  }

  .join-hub__lower-half,
  .join-hub__lower-half + .join-hub__lower-half {
    padding: 16px 9px;
  }

  .join-hub__lower-features,
  .join-hub__lower-half:not(.join-hub__lower-half--app) .join-hub__lower-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .join-hub__lower-feature,
  .join-hub__lower-feature:first-child,
  .join-hub__lower-feature:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-height: 78px;
    padding: 0 5px;
    text-align: center;
  }

  .join-hub__lower-feature + .join-hub__lower-feature::before {
    display: block;
    height: 56px;
  }

  .join-hub__lower-feature .join-hub__icon-hook {
    width: 34px;
    height: 34px;
    margin: 0 auto;
  }

  .join-hub__lower-copy {
    align-items: center;
    gap: 3px;
  }

  .join-hub__lower-copy strong,
  .join-hub__lower-copy span {
    white-space: normal;
  }

  .join-hub__lower-copy strong {
    font-size: 0.64rem;
    line-height: 1.15;
  }

  .join-hub__lower-copy span {
    font-size: 0.55rem;
    line-height: 1.25;
  }

  .join-hub__lower-feature--spond a {
    width: min(100%, 90px);
    margin: auto;
  }

  /* Partners */
  .partners {
    padding-block: 30px 34px;
  }

  .partners__heading-rule {
    width: 28px;
  }

  .partners__title {
    font-size: 1.06rem;
  }

  .partners__subtitle {
    font-size: clamp(0.54rem, 2.35vw, 0.66rem);
    line-height: 1.2;
    white-space: nowrap;
  }

  .partners__marquee {
    margin-top: 16px;
  }

  .partners__list {
    --partners-item-gap: 16px;
    padding-inline: 12px;
  }

  .partners__item {
    min-width: 126px;
    min-height: 76px;
  }

  .partners__logo-link {
    min-height: 76px;
  }

  .partners__logo-link img {
    max-width: 154px;
    max-height: 68px;
  }

  .partners__cta-row {
    margin-top: 18px;
  }

  .partners__cta {
    width: min(100%, 330px);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 34px;
  }

  .footer__col--brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
  }

  .footer__brand {
    min-width: 0;
    margin-bottom: 0;
  }

  .footer__socials {
    justify-self: end;
    gap: 6px;
  }

  .footer__social {
    width: 34px;
    height: 34px;
  }

  .footer__social svg {
    width: 16px;
    height: 16px;
  }

  .footer__statement {
    display: none;
  }

  .footer__col--links,
  .footer__col--ground {
    display: none;
  }

  .footer__col--links .footer__heading,
  .footer__col--ground .footer__heading {
    text-align: left;
  }

  .footer__links,
  .footer__address {
    margin-inline: 0;
  }

  .footer__links {
    gap: 10px 24px;
  }

  .footer__col--represent {
    padding-top: 4px;
  }

  .footer__crests {
    width: 100%;
    gap: 12px;
    justify-content: space-between;
  }

  .footer__crest {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 2px;
  }

  .footer__crest img {
    height: 50px;
  }

  .footer__crest-cap {
    max-width: 82px;
    font-size: 0.68rem;
  }

  .footer__motto {
    margin-top: 18px;
    font-size: 1.05rem;
  }

  .footer__bar-inner {
    align-items: center;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 20px;
  }

  .footer__legal {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .brand__text {
    max-width: 150px;
  }

  .hero {
    min-height: 278px;
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 2px;
  }

  .cover-stories__head {
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
  }

  .cover-stories__all {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
  }

  .season-glance__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .join-hub__recruit {
    padding-top: 218px;
  }

  .join-hub__member {
    padding: 20px 14px 18px;
  }

  .join-hub__cta-button {
    padding-inline: 14px;
    font-size: 0.70rem;
    letter-spacing: 0.65px;
  }

  .partners__heading-rule {
    display: none;
  }

  .partners__cta {
    padding-inline: 14px;
  }

  .footer__links {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .footer__col--brand {
    column-gap: 10px;
  }

  .footer__brand {
    gap: 8px;
  }

  .footer__brand-crest {
    width: 36px;
    height: 36px;
  }

  .footer__brand-name {
    font-size: 0.82rem;
  }

  .footer__brand-sub {
    font-size: 0.48rem;
    letter-spacing: 0.13em;
  }

  .footer__socials {
    gap: 4px;
  }

  .footer__social {
    width: 31px;
    height: 31px;
  }

  .footer__social svg {
    width: 14px;
    height: 14px;
  }

}

/* ============================================================
   MOBILE RESPONSIVE — S20 CORRECTION PASS
   Fixes accordion specificity, plaque stacking and narrow-phone
   section flow without changing the approved desktop composition.
   ============================================================ */
@media (max-width: 1200px) {
  /* Force the two Match Command plaques into separate explicit rows.
     This prevents the desktop grid placement from making them overlap. */
  .match-command__row {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }

  .match-command__row > .match-command__panel {
    grid-column: 1;
    grid-row: 1;
  }

  .match-command__row > .season-glance {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-width: 1080px) {
  body.nav-open {
    overflow: hidden;
  }

  .mobile-nav {
    z-index: 80;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The generic .mobile-nav ul rule is intentionally overridden here.
     Submenus are closed until their parent receives .is-open from nav.js. */
  .mobile-nav .mobile-group__list {
    display: none;
    flex-direction: column;
    padding-left: 16px;
  }

  .mobile-nav .mobile-group.is-open > .mobile-group__list {
    display: flex;
  }
}

@media (max-width: 760px) {
  /* Keep every Join Hub chapter in normal document flow on phones. */
  .join-hub,
  .join-hub__inner,
  .join-hub__frame,
  .join-hub__upper,
  .join-hub__lower,
  .partners,
  .site-footer {
    position: relative;
    height: auto;
    min-height: 0;
    clear: both;
  }

  .join-hub__frame {
    display: block;
    aspect-ratio: auto;
    max-height: none;
    overflow: visible;
  }

  .join-hub__upper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .join-hub__recruit,
  .join-hub__member {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    clip-path: none;
    border: 1px solid rgba(126, 92, 18, 0.72);
    border-radius: var(--radius);
    overflow: hidden;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(11, 12, 15, 0.88);
  }

  .join-hub__recruit {
    padding: 228px 18px 26px;
  }

  /* Compact mobile app panel: equal top/bottom breathing room with the
     phone mockup remaining visible on the right side of the plaque. */
  .join-hub__member {
    align-items: flex-start;
    padding: 20px 16px 18px;
    border-color: rgba(126, 92, 18, 0.72);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(11, 12, 15, 0.88);
    background-color: #0b0c0f;
    background-image:
      linear-gradient(90deg,
        rgba(8, 9, 12, 0.98) 0%,
        rgba(8, 9, 12, 0.90) 48%,
        rgba(8, 9, 12, 0.46) 76%,
        rgba(8, 9, 12, 0.16) 100%),
      linear-gradient(180deg,
        rgba(8, 9, 12, 0.10) 0%,
        rgba(8, 9, 12, 0.26) 46%,
        rgba(8, 9, 12, 0.72) 100%),
      url('../images/spond-member-placeholder.webp');
    background-position: center, center, 94% center;
    background-size: cover, cover, auto 112%;
    background-repeat: no-repeat;
  }

  .join-hub__member-copy {
    position: relative;
    z-index: 2;
    width: 72%;
    max-width: 290px;
  }

  .join-hub__member-title {
    font-size: clamp(1.58rem, 7.6vw, 1.95rem);
    line-height: 0.96;
  }

  .join-hub__member-rule {
    margin: 6px 0 8px;
  }

  .join-hub__member-lead {
    max-width: 32ch;
    margin-bottom: 14px;
    font-size: 0.70rem;
    line-height: 1.32;
  }

  .join-hub__app-features {
    grid-template-columns: minmax(84px, 1.28fr) repeat(3, minmax(0, 0.91fr));
    column-gap: 0;
    margin-bottom: 14px;
  }

  .join-hub__app-feature {
    min-height: 42px;
    padding-inline: 5px;
  }

  .join-hub__app-feature:first-child {
    padding-left: 2px;
    padding-right: 14px;
  }

  .join-hub__app-feature + .join-hub__app-feature::before {
    left: 0;
  }

  .join-hub__app-feature .join-hub__icon-hook {
    width: 27px;
    height: 24px;
    margin-bottom: 2px;
  }

  .join-hub__app-feature span:last-child {
    font-size: 0.50rem;
    line-height: 1.14;
  }

  .join-hub__lower {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    overflow: hidden;
  }

  .join-hub__lower-half,
  .join-hub__lower-half + .join-hub__lower-half {
    position: relative;
    width: 100%;
    padding: 16px 10px;
  }

  .join-hub__lower-half + .join-hub__lower-half {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .partners,
  .site-footer {
    z-index: 1;
  }
}

@media (max-width: 420px) {
  .mobile-nav {
    padding: 8px 18px 24px;
  }

  .mobile-nav > ul > li > a,
  .mobile-group__toggle {
    min-height: 50px;
    padding: 13px 0;
    font-size: 0.90rem;
    letter-spacing: 1.25px;
  }

  .mobile-group__list a {
    min-height: 44px;
    padding: 11px 0;
    font-size: 0.79rem;
    letter-spacing: 1px;
  }

  .join-hub__recruit {
    padding-top: 210px;
  }

  .join-hub__member {
    padding: 20px 14px 18px;
    background-position: center, center, 96% center;
    background-size: cover, cover, auto 112%;
  }
}