/* ==========================================================================
   Unrivaled Flag — Theme Stylesheet
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchored sections clear the sticky header. */
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* --- Font Faces --- */
@font-face { font-family: "Review"; src: url("../fonts/review-bold-webfont.woff2") format("woff2"), url("../fonts/review-bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Review"; src: url("../fonts/review-heavy-webfont.woff2") format("woff2"), url("../fonts/review-heavy-webfont.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Review Poster"; src: url("../fonts/reviewposter-heavy-webfont.woff2") format("woff2"), url("../fonts/reviewposter-heavy-webfont.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Review Condensed"; src: url("../fonts/reviewcondensed-heavy-webfont.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Plak"; src: url("../fonts/neue_plak_regular-webfont.woff2") format("woff2"), url("../fonts/neue_plak_regular-webfont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Plak"; src: url("../fonts/neue_plak_bold-webfont.woff2") format("woff2"), url("../fonts/neue_plak_bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Plak Text"; src: url("../fonts/neue_plak_regular-webfont.woff2") format("woff2"), url("../fonts/neue_plak_regular-webfont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Plak Text"; src: url("../fonts/neue_plak_bold-webfont.woff2") format("woff2"), url("../fonts/neue_plak_bold-webfont.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* --- Design Tokens --- */
:root {
  /* ---------------------------------------------------------------------
     BRAND SOURCE COLORS — the only values that change per property.
     Fork this theme, swap these three, and the whole system re-skins.
     Flag = the Unrivaled palette with the blues swapped for seafoam/teal.
     NOTE: seafoam/teal/grey are provisional reads off the brand deck —
     confirm against the source file before launch.
     --------------------------------------------------------------------- */
  --color-seafoam: #3FE8A8;
  --color-teal: #0D8A72;
  --color-grey: #C9C9C9;

  /* --- Shared Unrivaled palette (identical to Unrivaled Baseball) --- */
  --color-red: #FF0000;
  --color-dark-red: #BB0101;
  --color-navy: #1D2468;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-white-smoke: #F2F2F2;

  /* --- Design-system roles ---
     Baseball components reference --color-blue / --color-light-blue.
     Flag points those roles at teal / seafoam so ported components
     re-skin without touching their CSS. */
  --color-blue: var(--color-teal);
  --color-light-blue: var(--color-seafoam);

  --gray-50: #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #ededed;
  --gray-300: #d4d4d4;
  --gray-400: #aaaaaa;
  --gray-500: #777777;
  --gray-600: #555555;

  /* --- Accent slots (flat across the site — no per-section color coding) --- */
  --pillar-1: var(--color-seafoam);
  --pillar-2: var(--color-seafoam);
  --pillar-3: var(--color-seafoam);
  --pillar-4: var(--color-seafoam);
  --pillar-5: var(--color-seafoam);

  /* --- Type families --- */
  --font-display: "Review", "Arial Black", sans-serif;
  --font-display-poster: "Review Poster", "Review", "Arial Black", sans-serif;
  --font-display-condensed: "Review Condensed", "Review", "Arial Black", sans-serif;
  --font-ui: "Neue Plak", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Neue Plak Text", "Neue Plak", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-poster-heavy: 800;

  /* --- Baseball type scale (canonical; block CSS migrates to these) --- */
  --fs-hero: 40px;
  --fs-display: 28px;
  --fs-h1: 26px;
  --fs-h2: 22px;
  --fs-section-headline: clamp(36px, 5vw, 56px);
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-meta: 12px;
  --fs-eyebrow: 10px;

  /* --- Layout --- */
  --page-max-width: 1720px;
  --content-max-width: 1600px;
  --margin-desktop: 40px;
  --margin-mobile: 20px;

  --space-section-y-mobile: 56px;
  --space-section-y-desktop: 80px;
  --space-block-y: 48px;
  --space-card-pad: 24px;
  --space-card-gap: 14px;

  --radius-card: 8px;

  --transition-fast: .15s ease;
  --transition-base: .25s ease;
  --transition-slow: 0.4s ease;
  --ease-out: cubic-bezier(.25, .1, .25, 1);

  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-teal);
  --focus-ring-offset: 2px;

  /* --- Responsive aliases ---
     Baseball sets --margin on body.v4; on a base theme :root is the right
     home. Sections read the single alias, so the breakpoint is declared once
     here instead of in every block. */
  --margin: var(--margin-desktop);
  --space-section-y: var(--space-section-y-desktop);

  /* Flat accent — no per-section colour coding. */
  --accent: var(--color-seafoam);

}

@media (max-width: 767px) {
  :root {
    --margin: var(--margin-mobile);
    --space-section-y: var(--space-section-y-mobile);
  }
}

/* --- Base Typography --- */
body {
  /* Matches Unrivaled Baseball exactly: no font-size on body (inherits the
     16px root) and line-height 1.5. Flag previously set 15px/1.4, which
     cascaded into every inheriting element — nav links, footer links, the
     hero matrix and card CTAs all computed a step tighter than Baseball. */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-family: var(--font-display-poster);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.1;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-section-headline); }
h3 { font-size: var(--fs-display); }
h4 { font-size: var(--fs-h1); }
h5 { font-size: var(--fs-h2); }
h6 { font-size: var(--fs-h3); }

/* Text utilities — identical to the Unrivaled Baseball definitions. None of
   them set a colour: they inherit, so the same class reads correctly on white,
   navy and seafoam grounds without a per-section override. */
.text-hero {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.text-large {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.text-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.text-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--fs-body); line-height: 1.5; }
.text-body-sm { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--fs-body-sm); line-height: 1.45; }
.text-meta { font-family: var(--font-body); font-size: var(--fs-meta); }

/* --- Layout --- */
.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* --- Site Header ---
   Structure and behaviour mirror the Unrivaled Baseball chrome so components
   port between properties 1:1. Solid bar by default; add data-transparent-nav
   to <body> for a hero that runs under the nav, plus data-hero="dark" to flip
   the logo to its light variant. No scroll-state JS — CSS handles every case. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  border-bottom: 1px solid var(--gray-200);
}
.site-header__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 14px var(--margin-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__logo { flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; }
.site-header__logo-img { height: 44px; width: auto; display: block; }
/* --- Transparent nav — matched to Unrivaled Baseball exactly ---
   Fully transparent (NO scrim), hairline white rule, 22px padding, 64px lockup,
   the DARK/navy wordmark, and WHITE nav + CTA + burger. An explicitly dark hero
   ([data-hero="dark"]) flips the lockup to its light variant. */
.site-header__logo-img--light { display: none; }

body[data-transparent-nav] .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
body[data-transparent-nav] .site-header__inner { padding-top: 22px; padding-bottom: 22px; }
body[data-transparent-nav] .site-header__logo,
body[data-transparent-nav] .site-header__logo-img { height: 64px; }

body[data-transparent-nav] .site-header__logo-img--light { display: none; }
body[data-transparent-nav] .site-header__logo-img--dark { display: block; }
body[data-transparent-nav][data-hero="dark"] .site-header__logo-img--dark { display: none; }
body[data-transparent-nav][data-hero="dark"] .site-header__logo-img--light { display: block; }

body[data-transparent-nav] .site-header .nav-link { color: #ffffffeb; }
body[data-transparent-nav] .site-header .nav-link:hover,
body[data-transparent-nav] .site-header .nav-link.is-active { color: var(--accent); }
body[data-transparent-nav] .site-header .nav-cta { color: var(--color-white); }
body[data-transparent-nav] .site-header__burger span { background: var(--color-white); }

.site-header__nav { display: none; }
.site-header__menu { display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0; }
.site-header__menu > li { display: inline-flex; }

.nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-navy);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover { color: var(--color-teal); }
.nav-link.is-active { border-bottom-color: var(--color-teal); }

.nav-dropdown { position: relative; }
.nav-dropdown:after { content: ""; position: absolute; top: 100%; left: -8px; width: 340px; height: 16px; }
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 320px;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 24px #00000014;
  padding: 8px 0;
  z-index: 10;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown__menu:hover { display: block; }
.nav-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  font-size: var(--fs-body-sm);
  color: var(--color-navy);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown__item:hover { background: var(--gray-50); color: var(--color-teal); }
.nav-dropdown__item .pillar-dot { margin-top: 6px; }
.nav-dropdown__item-content { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown__item-name { font-weight: var(--weight-semibold); }
.nav-dropdown__item-meta {
  font-size: var(--fs-meta);
  color: var(--gray-500);
  font-weight: var(--weight-regular);
  letter-spacing: .02em;
}

.nav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-navy);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  line-height: .85;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.nav-cta:hover { background: transparent; opacity: .72; }

/* Brand triangle bullet — the shared Unrivaled mark. */
.pillar-dot {
  width: 14px;
  aspect-ratio: 23 / 13;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  display: inline-block;
  flex-shrink: 0;
  background: var(--pillar, var(--color-seafoam));
}

.site-header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.site-header__burger span { display: block; height: 2px; width: 100%; background: var(--color-navy); }

@media (min-width: 1024px) {
  .site-header__inner { padding: 16px var(--margin-desktop); }
  .site-header__nav { display: block; }
  .site-header__burger { display: none; }
}
@media (max-width: 1023px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 16px;
    row-gap: 2px;
  }
  .site-header__logo { grid-row: 1 / 3; }
  .site-header__burger { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav-cta { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; font-size: 9px; letter-spacing: .06em; }
}

/* --- Mobile Menu --- */
.mobile-menu { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.mobile-menu[data-open="true"] { pointer-events: auto; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }
.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 22px 24px 32px;
  overflow-y: auto;
  transform: translate(100%);
  transition: transform .4s cubic-bezier(.42, 0, .58, 1);
}
.mobile-menu[data-open="true"] .mobile-menu__overlay { transform: translate(0); }
.mobile-menu__header { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.mobile-menu__logo img { height: 34px; width: auto; display: block; }
.mobile-menu__close {
  width: 44px; height: 44px; background: none; border: none;
  cursor: pointer; position: relative; flex-shrink: 0;
}
.mobile-menu__close:before, .mobile-menu__close:after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 28px; height: 2px; background: var(--color-white);
}
.mobile-menu__close:before { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu__close:after  { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu__nav { flex: 1; display: flex; flex-direction: column; padding: 40px 0 28px; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-menu__item, .mobile-menu__group-trigger {
  display: block;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  font-size: clamp(44px, 12.5vw, 72px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  transition: color .15s ease;
}
.mobile-menu__list > li:last-child .mobile-menu__item { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.mobile-menu__item:hover, .mobile-menu__item:focus-visible,
.mobile-menu__group-trigger:hover, .mobile-menu__group-trigger:focus-visible { color: var(--color-seafoam); }
.mobile-menu__group-trigger {
  background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mobile-menu__chevron { flex-shrink: 0; transition: transform .25s ease; }
.mobile-menu__group[data-expanded="true"] .mobile-menu__chevron { transform: rotate(180deg); }
.mobile-menu__sublist { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .2s ease; }
.mobile-menu__group[data-expanded="true"] .mobile-menu__sublist { max-height: 480px; opacity: 1; }
.mobile-menu__subitem {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0 16px 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--color-white); text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}
.mobile-menu__subitem:first-child { border-top: 0; }
.mobile-menu__subitem:hover, .mobile-menu__subitem:focus-visible { color: var(--color-seafoam); padding-left: 14px; }
.mobile-menu__subitem .pillar-dot { margin-top: 14px; }
.mobile-menu__subitem-text { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu__subitem-name {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  font-size: clamp(24px, 6.5vw, 36px);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
.mobile-menu__subitem-meta {
  font-family: var(--font-body); font-weight: var(--weight-regular);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #ffffff8c;
}
.mobile-menu[data-open="true"] .mobile-menu__group-trigger,
.mobile-menu[data-open="true"] .mobile-menu__item { animation: mobile-menu-item-in .4s cubic-bezier(.25, .1, .25, 1) both; }
.mobile-menu[data-open="true"] .mobile-menu__group-trigger { animation-delay: .1s; }
.mobile-menu[data-open="true"] .mobile-menu__item:nth-child(2) { animation-delay: .15s; }
.mobile-menu[data-open="true"] .mobile-menu__item:nth-child(3) { animation-delay: .2s; }
.mobile-menu[data-open="true"] .mobile-menu__item:nth-child(4) { animation-delay: .25s; }
.mobile-menu[data-open="true"] .mobile-menu__item:nth-child(5) { animation-delay: .3s; }
@keyframes mobile-menu-item-in { 0% { opacity: 0; transform: translate(28px); } to { opacity: 1; transform: translate(0); } }
.mobile-menu__group[data-expanded="true"] .mobile-menu__subitem { animation: mobile-menu-subitem-in .35s cubic-bezier(.25, .1, .25, 1) both; }
.mobile-menu__group[data-expanded="true"] .mobile-menu__subitem:nth-child(1) { animation-delay: 80ms; }
.mobile-menu__group[data-expanded="true"] .mobile-menu__subitem:nth-child(2) { animation-delay: .13s; }
.mobile-menu__group[data-expanded="true"] .mobile-menu__subitem:nth-child(3) { animation-delay: .18s; }
.mobile-menu__group[data-expanded="true"] .mobile-menu__subitem:nth-child(4) { animation-delay: .23s; }
@keyframes mobile-menu-subitem-in { 0% { opacity: 0; transform: translate(20px); } to { opacity: 1; transform: translate(0); } }
.mobile-menu__footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-shrink: 0; flex-wrap: wrap; }
.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mobile-menu__cta:hover { background: var(--color-white); color: var(--color-navy); }
.mobile-menu__contact { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.mobile-menu__contact-label {
  margin: 0; font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c;
}
.mobile-menu__contact-email { font-family: var(--font-body); font-size: 14px; color: var(--color-white); text-decoration: none; }
.mobile-menu__contact-email:hover { color: var(--color-seafoam); }
body.menu-open { overflow: hidden; }

/* --- Site Footer --- */
.site-footer { background: var(--color-seafoam); color: var(--color-navy); width: 100%; }
.site-footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 56px var(--margin-mobile) 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.site-footer__brand { flex: 1; max-width: 320px; }
.site-footer__logo { display: inline-block; margin-bottom: 16px; }
.site-footer__logo-img { height: 84px; width: auto; display: block; }
.site-footer__tag { opacity: .6; max-width: 240px; }
.site-footer__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; flex: 2; }
.site-footer__heading { opacity: .5; margin-bottom: 14px; color: inherit; }
.site-footer__list { display: flex; flex-direction: column; gap: 8px; }
.site-footer__link {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  opacity: .85;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.site-footer__link:hover { opacity: 1; }
.site-footer__base p, .site-footer__base .text-meta { color: inherit; }
.site-footer__base {
  border-top: 1px solid rgba(29, 36, 104, .15);
  padding: 20px var(--margin-mobile);
  text-align: center;
  color: #1d246899;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 12px; }
.site-footer__legal-link {
  color: rgba(29, 36, 104, .7);
  text-decoration: none;
  font-size: var(--fs-meta);
  transition: color var(--transition-fast);
}
.site-footer__legal-link:hover { color: var(--color-navy); }
@media (min-width: 768px) {
  .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 22px; text-align: left; }
  .site-footer__base p { margin: 0; }
  .site-footer__legal { margin-top: 0; justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .site-footer__inner { padding: 64px var(--margin-desktop) 32px; flex-direction: row; align-items: flex-start; gap: 64px; }
  .site-footer__base { padding: 20px var(--margin-desktop); }
}

/* --- Privacy Modal --- */
.privacy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.privacy-modal-overlay.is-hidden { display: none; }
.privacy-modal {
  background: var(--color-white);
  border-radius: 12px;
  padding: 40px 36px 36px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.privacy-modal__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-navy);
  margin-bottom: 28px;
}
.privacy-modal__link { color: var(--color-red); text-decoration: underline; font-weight: 700; }
.privacy-modal__link:hover { color: var(--color-navy); }
.privacy-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 6px;
  transition: background var(--transition-fast);
}
.privacy-modal__btn:hover { background: var(--color-red); }

/* ==========================================================================
   ACF Blocks
   Ported from the Unrivaled Baseball block CSS so the same markup renders
   identically across properties. Flag's block render.php files already emit
   Baseball's class vocabulary (.sec / .sec__inner / .xcard / .region-card /
   .lead-card / .us-link / .brand-arrow), which the previous simplified
   stylesheet did not match — most block rules were dead.

   Where Baseball has no counterpart (.wte, .story layout) the rules are
   authored in the same idiom rather than invented separately.
   ========================================================================== */

/* ==========================================================================
   Card system — ONE card, used everywhere
   Every card component (.pcv4 pillar, .xcard cross-sell, .region-card event,
   .wte-card promise, .quote-card testimonial) shares this base. Components
   below declare only their own sub-elements.

   The solid-colour card (navy .region-card) was retired on Unrivaled Baseball
   in favour of a white card; it came across in the initial port and is gone
   now. Accent colour appears in small doses inside the card (meta line, badge,
   arrow), never as the card ground. On a .tone--navy section the whole set
   becomes translucent — see the tone block at the end of this file.
   ========================================================================== */
.pcv4,
.xcard,
.region-card,
.wte-card,
.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--color-navy);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
/* Only linked cards lift. */
a.pcv4:hover,
a.xcard:hover,
a.region-card:hover,
a.wte-card:hover { transform: translateY(-4px); border-color: var(--gray-300); }

/* Shared photo ground so a slow image never flashes a different grey. */
.pcv4__photo,
.xcard__photo,
.region-card__photo,
.wte-card__photo { background: var(--gray-200) center / cover no-repeat; }

/* --- Section primitive (shared by btns / lead / regions / wte) --- */
.sec__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
}
/* The eyebrow's colour belongs here, not in the block templates. Five of them
   (btns, faq, lead, regions, wte) used to set it inline, which beat the tone
   rules below at any specificity — so a navy section showed a seafoam eyebrow
   from `quotes` and a grey one from `wte`, and `btns` showed Baseball's gold,
   a token Flag does not otherwise use. Default is grey for light grounds;
   .tone--navy / .tone--light and the navy-by-default sections override it. */
.sec__eyebrow { margin: 0 0 10px; color: var(--gray-500); }
/* .btns ships navy without a tone class, so it needs the override explicitly. */
.btns .sec__eyebrow { color: var(--accent); }
/* Headline row: the section CTA sits at the right edge of the grid, centred
   against the headline. */
.sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}
.sec__head .sec__headline { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.sec__head + .regions__grid,
.sec__head + .wte__grid { margin-top: 24px; }
.regions__cta { flex-shrink: 0; }
/* The CTA was originally meant for a .sec__head row (headline left, link
   right) that the regions template never actually rendered — so both the
   field and this rule sat dead. It now renders after the grid, left-aligned
   to the content column, which is where a "read the rules" action belongs:
   after you have seen the events, not before. */
.regions__cta { margin-top: 28px; align-self: flex-start; }
@media (max-width: 767px) {
  .sec__head { flex-wrap: wrap; align-items: flex-start; }
}
.sec__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  line-height: .95;
  margin: 0 0 24px;
  font-size: var(--fs-section-headline);
  color: var(--color-navy);
  text-wrap: balance;
  letter-spacing: .01em;
}
/* On dark sections the headline inherits instead of forcing navy. */
.btns .sec__headline, .pinnacle .sec__headline, .ngallery .sec__headline { color: inherit; }

/* --- Link + arrow primitives --- */
.us-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 14px;
  line-height: .85;
  letter-spacing: .84px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border: 0;
  padding: 0;
  transition: opacity .15s ease;
}
.us-link:hover { opacity: .72; }
.us-link--inline { margin-top: 20px; align-self: flex-start; }
.us-link__arrow {
  width: 23px;
  aspect-ratio: 23 / 13;
  flex-shrink: 0;
  background: var(--color-blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .2s ease;
}
.us-link:hover .us-link__arrow { transform: translate(3px); }
.brand-arrow {
  display: inline-block;
  width: 14px;
  aspect-ratio: 23 / 13;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  vertical-align: middle;
}

/* --- Hero (phv4) --- */
.phv4 { position: relative; overflow: hidden; background: var(--color-navy); color: var(--color-white); }
.phv4__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 40%;
  filter: contrast(1.05) brightness(.95) saturate(1.05);
}
.phv4__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #1d24684d, #1d246829 30%, #1d246845, #0d102e8c);
}
.phv4__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
  padding: 56px var(--margin);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.phv4__eyebrow { color: #ffffffb3; margin: 0; }
.phv4__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.phv4__chip:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.phv4__headline {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  margin: 0;
  line-height: .95;
  letter-spacing: .01em;
  font-size: clamp(44px, 6vw, 78px);
  max-width: 26ch;
}
.phv4__sub { color: #ffffffd9; max-width: 640px; margin: 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; }
/* Hero CTA. Sits below the sub and above the stats panel; align-self keeps it
   to its own width inside the hero's flex column rather than stretching. */
.phv4__cta { margin-top: 26px; align-self: flex-start; }
.phv4__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  gap: 18px 56px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  max-width: 960px;
}
.phv4__stat-label {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}
.phv4__stat-val {
  display: block;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 15px;
  margin-top: 4px;
}
@media (min-width: 768px) {
  .phv4__inner { min-height: 660px; justify-content: center; padding-top: 140px; padding-bottom: 88px; }
}
@media (max-width: 767px) {
  .phv4__inner { padding: 112px var(--margin) 48px; }
  .phv4__stats { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
}

/* --- Story (no Baseball counterpart for the two-up layout) --- */
.story { background: var(--color-white); }
.story__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.story__eyebrow { color: var(--gray-500); margin: 0 0 10px; }
.story__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: 1;
  color: var(--color-navy);
  margin: 0 0 16px;
  text-wrap: balance;
  letter-spacing: .01em;
}
/* Lead line under the headline. Sized between the headline and the body so a
   two-sentence headline can be split without either half looking like a
   mistake. Mirrors .phv4__sub in the hero. */
/* CTA row — two actions sit side by side and wrap on narrow screens. Replaces
   an inline margin-top that lived on the single link. */
.story__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; }
/* Small print under the buttons: fees, exceptions, conditions. */
.story__note { margin: 14px 0 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--gray-500); }
.story__note a { color: inherit; text-decoration: underline; }
.tone--navy .story__note { color: #ffffff8c; }
.story__sub {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--color-navy);
  text-wrap: pretty;
}
.tone--navy .story__sub { color: #ffffffd1; }
.story__body { color: var(--gray-600); text-wrap: pretty; }
/* The body became rich text (lists, links) when /worlds/ needed a bulleted
   detail list beside a photo. Mirrors .prose__body so a list reads the same
   whichever block an editor puts it in. */
.story__body > :first-child { margin-top: 0; }
.story__body > :last-child { margin-bottom: 0; }
.story__body p { margin: 0 0 .8em; }
.story__body ul, .story__body ol { padding-left: 1.25em; margin: 0 0 .8em; }
.story__body ul { list-style: disc; }
.story__body ol { list-style: decimal; }
.story__body li + li { margin-top: .4em; }
.story__body strong { font-weight: var(--weight-bold); color: var(--color-navy); }
.tone--navy .story__body strong { color: var(--color-white); }
/* Photo on the left. The markup keeps copy first so it still reads first to a
   screen reader and stacks copy-first on mobile; only the visual order flips. */
.story--media-left .story__photo,
.story--media-left .story__gallery { order: -1; }
.story__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--gray-200) center / cover no-repeat;
}

/* Side gallery — the media half of a story block when it carries more than one
   image. A scroll-snap track rather than a JS carousel: swipe and trackpad work
   natively, it degrades to a plain scroller with JS off, and the arrows below
   only nudge scrollLeft. Same footprint as the single photo so the two-column
   grid is unaffected. */
.story__gallery { position: relative; }
.story__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card);
}
.story__track::-webkit-scrollbar { display: none; }
.story__slide { flex: 0 0 100%; scroll-snap-align: center; }
.story__slide-img {
  aspect-ratio: 4 / 3;
  background: var(--gray-200) center / cover no-repeat;
  border-radius: var(--radius-card);
}
.story__slide-cap { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--gray-500); }
.story__nav {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #ffffffe6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.story__nav:hover { background: var(--color-white); }
.story__nav:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.story__nav--prev { left: 12px; }
.story__nav--next { right: 12px; }
/* The brand chevron, mirrored for "previous". */
.story__nav:before {
  content: "";
  width: 13px;
  aspect-ratio: 23 / 13;
  background: var(--color-navy);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.story__nav--prev:before { transform: scaleX(-1); }
.story__count {
  margin: 8px 0 0;
  font-size: var(--fs-meta);
  color: var(--gray-500);
  letter-spacing: .1em;
}
.tone--navy .story__slide-cap,
.tone--navy .story__count { color: #ffffff8c; }
@media (max-width: 767px) {
  .story__nav { width: 34px; height: 34px; }
}
@media (max-width: 767px) {
  .story__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Btns (stat band) --- */
.btns { background: var(--color-navy); color: var(--color-white); }
.btns__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 12px;
}
.btns__num {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--color-white);
}
.btns__label { color: #ffffffb3; font-size: 12px; margin-top: 6px; }
@media (max-width: 1023px) {
  .btns__grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
}
@media (max-width: 599px) {
  .btns__grid { grid-template-columns: 1fr; }
}

/* --- WTE (3-card promise) — authored in the .xcard idiom --- */
.wte { background: var(--color-white); }
.wte__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wte-card__photo { aspect-ratio: 16 / 10; display: block; }
.wte-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wte-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.04;
  margin: 0;
  color: var(--color-navy);
}
.wte-card__eyebrow { color: var(--gray-500); margin: 0 0 6px; }
.tone--navy .wte-card__eyebrow { color: var(--accent); }
.wte-card__desc { color: var(--gray-600); font-size: 13px; line-height: 1.5; margin: 0; }
/* A card's description can carry a list now, so two plain-layout cards work as
   two columns of rich text. Mirrors .prose__body / .story__body. */
.wte-card__desc > :first-child { margin-top: 0; }
.wte-card__desc > :last-child { margin-bottom: 0; }
.wte-card__desc p { margin: 0 0 .7em; }
.wte-card__desc ul, .wte-card__desc ol { padding-left: 1.2em; margin: 0 0 .7em; }
.wte-card__desc ul { list-style: disc; }
.wte-card__desc ol { list-style: decimal; }
.wte-card__desc li + li { margin-top: .35em; }
.wte-card__desc strong { font-weight: var(--weight-bold); color: var(--color-navy); }
.tone--navy .wte-card__desc strong { color: var(--color-white); }
/* Cards with no image. The photo well is a 16:10 block of --gray-200, so a card
   left without an image rendered as a large empty grey rectangle above two
   lines of text. The template now omits the well entirely and flags the card,
   which also lets the body take the roomier padding it wants when there is no
   photo anchoring it. */
.wte-card--textonly .wte-card__body { padding: 28px; gap: 10px; }

/* Chips — a set the reader scans for one item, not prose they read.
   Age divisions were the case that forced this: as a run of "5U · 6U · 7U …"
   at body size, answering "is my 12U team in?" meant reading a string. A real
   table was the other candidate and is worse here — 14 ages x 2 columns is 28
   cells encoding a single exception (girls start at 7U), and a 14-row table is
   exactly what has to be re-invented for small screens. Chips carry the same
   fact, give every token its own target, and wrap on their own at any width,
   so there is no mobile special case. Both cards in a two-up share a width, so
   equal min-width chips line up column-wise and the missing 5U/6U reads as a
   gap. For genuinely tabular content — every cell different — use rows, not
   these. Baseball's .qrow is that pattern; it is not ported to Flag yet. */
.wte-card__chips {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wte-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
}
/* On a grey section the card is white, so the chip inverts to keep the edge. */
.tone--grey .wte-chip { background: var(--color-white); }
.tone--navy .wte-chip {
  background: #ffffff1f;
  border-color: #ffffff2e;
  color: var(--color-white);
}
@media (max-width: 479px) {
  .wte-card__chips { gap: 6px; }
  .wte-chip { min-width: 46px; padding: 6px 10px; font-size: 12px; }
}

/* Plain text grid — the same 3-up rhythm with the card chrome removed.
   For sections whose items are statements, not objects: nothing to click, no
   image, no need for a panel to say "this is a discrete thing". The border and
   translucent ground were doing no work on navy and made five short statements
   read as five empty containers. Titles keep the house uppercase display face;
   only the container goes away. */
.wte__grid--plain { gap: 44px 32px; }
.wte__grid--plain .wte-card,
.tone--navy .wte__grid--plain .wte-card,
.tone--grey .wte__grid--plain .wte-card {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.wte__grid--plain .wte-card__body { padding: 0; gap: 12px; }
.wte__grid--plain .wte-card__title { font-size: clamp(20px, 1.9vw, 26px); }
.wte__grid--plain .wte-card__desc { font-size: var(--fs-body); line-height: 1.55; }
/* Nothing to hover — the lift belongs to cards that are links. */
.wte__grid--plain a.wte-card:hover { transform: none; }
@media (max-width: 767px) {
  .wte__grid--plain { gap: 32px; }
}
@media (max-width: 767px) {
  .wte__grid { grid-template-columns: 1fr; }
}

/* --- Lead (leadership) --- */
.lead-sec { background: var(--color-white); }
.lead__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lead-card__photo {
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: var(--gray-200) center / cover no-repeat;
  filter: grayscale(100%);
}
.lead-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 16px;
  color: var(--color-navy);
  margin: 12px 0 2px;
}
.lead-card__role { color: var(--gray-500); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.lead-card__bio { color: var(--gray-600); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
/* Pull quote lives inside the person's card — the About page pairs each
   leader with what they said, rather than repeating both lists in two
   separate sections. */
.lead-card__quote {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gray-200);
}
.lead-card__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.25;
  color: var(--color-navy);
  text-wrap: pretty;
}
.lead-card__quote blockquote::before { content: "\201C"; }
.lead-card__quote blockquote::after  { content: "\201D"; }
.lead-card__quote figcaption {
  margin-top: 8px;
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.lead-card__link { margin-top: 16px; }
/* Two-up leadership cards get room to breathe. */
.lead__grid:has(> :last-child:nth-child(2)) .lead-card__photo { aspect-ratio: 16 / 10; }
.lead__grid:has(> :last-child:nth-child(2)) .lead-card__name { font-size: 22px; }
.lead__grid:has(> :last-child:nth-child(2)) .lead-card__bio { font-size: var(--fs-body-sm); }
.tone--navy .lead-card__quote { border-top-color: #ffffff2e; }
.tone--navy .lead-card__quote blockquote { color: var(--color-white); }
.tone--navy .lead-card__quote figcaption { color: #ffffff8c; }
@media (max-width: 767px) {
  .lead__grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) { .lead__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
@media (max-width: 767px) { .lead__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Regions --- */
.regions { background: var(--gray-50); }
.regions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* region-card uses the shared card base (see "Card system" below). Only its
   own sub-elements are declared here. */
.region-card__photo { aspect-ratio: 16 / 10; }
.region-card__body { position: relative; padding: var(--space-card-pad); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.region-card__tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); }
.region-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.04;
  margin: 0;
  color: var(--color-navy);
}
.region-card__count {
  color: var(--color-teal);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}
.region-card__states { color: var(--gray-600); font-size: 13px; line-height: 1.5; margin: 0; }
/* Baseball widened this to auto-fit at >=1280, which becomes 5-6 very narrow
   columns on a large display. Flag caps at 3 so cards keep a readable measure. */
@media (max-width: 1023px) { .regions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .regions__grid { grid-template-columns: 1fr; } }

/* --- XSell --- */
.xsell { background: var(--color-white); color: var(--color-black); }
.xsell--gray { background: var(--gray-50); }
.xsell__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.xsell__eyebrow { color: var(--gray-500); margin: 0; }
.xsell__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: 1;
  margin: 0;
  color: var(--color-navy);
  text-wrap: balance;
  letter-spacing: .01em;
}
.xsell__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xcard__photo { aspect-ratio: 16 / 10; display: block; }
.xcard__body { position: relative; padding: 24px 24px 46px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.xcard__tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); }
.xcard__name {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.04;
  margin: 0;
  color: var(--color-navy);
}
.xcard__meta { color: var(--gray-600); font-size: 12px; margin: 0; }
.xcard__arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-size: 0;
  width: 20px;
  aspect-ratio: 23 / 13;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .2s ease;
}
a.xcard:hover .xcard__arrow { transform: translate(3px); }
@media (max-width: 767px) { .xsell__grid { grid-template-columns: 1fr; } }

/* --- Two-up card grids ---
   The card grids default to 3-up. When a grid holds exactly two cards, a
   3-column track leaves a dangling empty cell, so it becomes 2-up instead and
   the extra width buys a larger name and body size. Keyed off the card count
   with :has() so editors get the right layout without picking a variant. */
.xsell__grid:has(> :last-child:nth-child(2)),
.wte__grid:has(> :last-child:nth-child(2)),
.regions__grid:has(> :last-child:nth-child(2)),
.quotes__grid:has(> :last-child:nth-child(2)),
.lead__grid:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* The height, not the width, was what made two-up cards overbearing. Capping
   the grid width instead left them narrower AND left-aligned against every
   other section, so the content column no longer lined up. Shorten the photo
   and every section keeps the same measure. */
.xsell__grid:has(> :last-child:nth-child(2)) .xcard__photo,
.wte__grid:has(> :last-child:nth-child(2)) .wte-card__photo,
.regions__grid:has(> :last-child:nth-child(2)) .region-card__photo {
  aspect-ratio: 16 / 9;
}
.xsell__grid:has(> :last-child:nth-child(2)) .xcard__name,
.wte__grid:has(> :last-child:nth-child(2)) .wte-card__title,
.regions__grid:has(> :last-child:nth-child(2)) .region-card__name {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
}
.xsell__grid:has(> :last-child:nth-child(2)) .xcard__meta,
.wte__grid:has(> :last-child:nth-child(2)) .wte-card__desc,
.regions__grid:has(> :last-child:nth-child(2)) .region-card__states {
  font-size: var(--fs-body);
  line-height: 1.55;
}
.xsell__grid:has(> :last-child:nth-child(2)) .xcard__body,
.regions__grid:has(> :last-child:nth-child(2)) .region-card__body {
  padding: 28px 28px 56px;
  gap: 10px;
}
@media (max-width: 767px) {
  .xsell__grid:has(> :last-child:nth-child(2)),
  .wte__grid:has(> :last-child:nth-child(2)),
  .regions__grid:has(> :last-child:nth-child(2)),
  .quotes__grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; }
}

/* --- CTA band (Unrivaled Sports lockup) --- */
.ctaband { background: var(--color-navy); color: var(--color-white); text-align: center; padding: 64px 0; }
.ctaband__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--margin);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ctaband__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: .95;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  letter-spacing: .01em;
}
.ctaband__body { color: #ffffffd1; max-width: 60ch; margin: 0; }
.ctaband__lockup-eyebrow {
  color: var(--color-white);
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: 14px;
  letter-spacing: .84px;
  line-height: .85;
  text-transform: uppercase;
  margin: 0;
}
.ctaband__lockup-logo {
  --lockup-w: clamp(96px, 9vw, 128px);
  color: var(--color-white);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 0;
}
.ctaband__lockup-logo .ctaband__lockup-flag,
.ctaband__lockup-logo .ctaband__lockup-wordmark { width: var(--lockup-w); height: auto; flex-shrink: 0; }
.ctaband__lockup-logo svg { display: block; height: auto; }
.ctaband__btn { background: var(--accent); color: var(--color-navy); }
.ctaband__btn:hover { background: var(--color-white); color: var(--color-navy); }
.ctaband__btn:focus-visible { outline-color: var(--color-white); }

/* --- Pinnacle --- */
.pinnacle { background: var(--color-navy); color: var(--color-white); }
.pinnacle__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pinnacle__eyebrow { color: var(--accent); margin: 0; }
.pinnacle__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: .95;
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
  letter-spacing: .01em;
}
.pinnacle__body { color: #ffffffd1; max-width: 700px; margin: 0; }

/* --- NGallery (photo marquee) --- */
.ngallery { background: #0f1547; color: var(--color-white); }
.ngallery__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ngallery__eyebrow { color: var(--accent); margin: 0; }
.ngallery__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: 1;
  margin: 0;
  text-wrap: balance;
  letter-spacing: .01em;
}
.ngallery__grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  cursor: grab;
  user-select: none;
}
.ngallery__grid::-webkit-scrollbar { display: none; }
.ngallery__grid:active { cursor: grabbing; }
.ngallery__tile {
  flex: 0 0 auto;
  width: clamp(260px, 28vw, 360px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: #0a0e30 center / cover;
  position: relative;
  overflow: hidden;
}
.ngallery__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #ffffffd9; font-size: 11px; margin: 0; }
@media (max-width: 599px) { .ngallery__tile { width: 74vw; } }

/* --- Homepage hero (hero-home) ---
   Ported from Baseball's .v4-hero. This is the HOMEPAGE hero; .phv4 above is
   the sub-page one. Two things from Baseball are deliberately NOT carried over:
   its hardcoded baseball background image (the template sets the photo inline)
   and its per-pillar photo defaults. Baseball also hides .v4-hero__top with an
   !important override in a later bundle; that is reproduced here as a plain
   rule so an editor can re-enable the row by deleting one line. */
.v4-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
  min-height: 880px;
  display: flex;
  flex-direction: column;
}
.v4-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 90%;
  filter: contrast(1.05) brightness(.95) saturate(1.05);
}
.v4-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Reduced motion: drop the video, leave the poster image showing. */
@media (prefers-reduced-motion: reduce) {
  .v4-hero__video { display: none; }
}
.v4-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1d24684d, #1d246829 30%, #1d246845, #0d102e8c);
  pointer-events: none;
}
.v4-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
  padding: 220px var(--margin) 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Matches Baseball, which hides this row. Delete to show it. */
.v4-hero__top { display: none; }
.v4-hero__eyebrow { display: inline-flex; align-items: center; gap: 16px; color: #ffffffeb; }
.v4-hero__rule { display: inline-block; width: 60px; height: 1px; background: var(--accent); }
.v4-hero__caption { color: #ffffff8c; }
.v4-hero__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 60px 0 48px; gap: 28px; }
.v4-hero__headline {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  font-size: clamp(72px, 10vw, 180px);
  /* Leading here is Baseball's, not a taste call: same family, size, weight,
     tracking and max-width, so spacing was the only thing out of step. It came
     from TWO places — line-height .92 and a 6px row-gap between the grid rows,
     which stacked. Both now match Baseball (.8 / 0), making this rule identical
     to theirs. Interior heroes (.phv4__headline) are already .95 on both sites;
     leave those alone. */
  line-height: .8;
  letter-spacing: .01em;
  max-width: 1320px;
  display: grid;
  row-gap: 0;
}
.v4-hero__line { display: block; }
.v4-hero__line--accent { color: var(--color-white); }
.v4-hero__matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ffffff1f;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.v4-hero__matrix-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  background: #00000073;
  color: #ffffffeb;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.v4-hero__matrix-cell:hover { background: #000000a6; }
/* Flat accent — Flag retired per-pillar colour coding. */
.v4-hero__matrix-cell .v4-hero__matrix-dot {
  width: 14px;
  aspect-ratio: 23 / 13;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  background: var(--accent);
}
.v4-hero__matrix-num { color: #ffffff73; margin-right: 4px; }
.v4-hero__matrix-cell .text-eyebrow { white-space: nowrap; }
@media (max-width: 1023px) {
  /* Baseball keeps min-height:880px at every width — the scrim gradient is
     distributed across the hero's height, so shortening it here changed how
     the overlay read against Baseball. Only the top padding is adjusted. */
  .v4-hero__inner { padding-top: 160px; }
  .v4-hero__matrix-cell .text-eyebrow { white-space: normal; }
}
@media (max-width: 767px) {
  .v4-hero__matrix { grid-template-columns: repeat(2, 1fr); }
}

/* --- Ways to Play (portfolio) --- */
.portfolio { background: var(--gray-50); }
.portfolio__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.portfolio__eyebrow { color: var(--gray-500); }
.portfolio__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: .95;
  color: var(--color-navy);
  max-width: 900px;
  margin: 0;
  text-wrap: balance;
  letter-spacing: .01em;
}
.portfolio__body {
  font-family: var(--font-body);
  color: var(--color-black);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  margin: 12px 0 32px;
  max-width: 760px;
}
.v4__pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
/* Ways to Play dropped from four cards to three when All-American Flag was
   retired, and a fixed 4-track leaves a dangling cell. Count-driven, the same
   way the two-up card grids work, so an editor adding a fourth card back gets
   the four-column layout again with nothing to configure. */
.v4__pillar-grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.pcv4__photo { flex: 0 0 auto; aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.pcv4__photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0000 60%, #00000059);
  pointer-events: none;
}
.pcv4__body { flex: 1; padding: 22px 22px 46px; display: flex; flex-direction: column; gap: 8px; color: inherit; position: relative; }
/* Number badge — seafoam on navy rather than Baseball's gold. */
.pcv4__num {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--color-navy);
  font-size: 9px;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.pcv4__name {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.12;
  margin: 0;
  color: var(--color-navy);
}
.pcv4__desc { color: #3a3f5a; font-size: 13px; line-height: 1.4; margin: 0; }
.pcv4__cta {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform var(--transition-fast);
}
.pcv4:hover .pcv4__cta { transform: translateX(2px); }
/* Third class beats the global .brand-arrow rule without !important. */
.pcv4__cta .pcv4__arrow.brand-arrow {
  position: static;
  background: var(--color-navy);
  width: 11px;
  aspect-ratio: 23 / 13;
  font-size: 0;
  margin: 0;
  transform: none;
}
@media (max-width: 1023px) { .v4__pillar-grid, .v4__pillar-grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .v4__pillar-grid, .v4__pillar-grid:has(> :last-child:nth-child(3)) { grid-template-columns: 1fr; } }

/* --- FAQ --- */
.faq { background: var(--color-white); }
.faq__list { border-top: 1px solid var(--gray-200); }
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-navy);
  transition: color var(--transition-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-teal); }
/* Brand triangle as the toggle: points right when closed, down when open. */
.faq__icon {
  flex-shrink: 0;
  width: 14px;
  aspect-ratio: 23 / 13;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform var(--transition-base);
}
.faq__item[open] .faq__icon { transform: rotate(90deg); }
.faq__a { padding: 0 0 24px; max-width: 820px; color: var(--gray-600); font-size: var(--fs-body); line-height: 1.6; }
.faq__a > * + * { margin-top: 1em; }

/* --- Video --- */
.videoblk { background: var(--color-navy); color: var(--color-white); }
.videoblk__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.videoblk__eyebrow { color: var(--accent); margin: 0; }
.videoblk__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: 1;
  margin: 0;
  text-wrap: balance;
  letter-spacing: .01em;
}
.videoblk__grid { display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
/* A pair sits two-up; one video keeps the full width. Same count rule as the
   card grids so the layout follows the content, not a variant switch. */
.videoblk__grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.video-item { display: flex; flex-direction: column; gap: 12px; }
.video-item__label { color: var(--accent); margin: 0; }
.video-item__title {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.02;
  margin: 0 0 4px;
  text-wrap: balance;
  letter-spacing: .01em;
}
@media (max-width: 900px) {
  .videoblk__grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; }
}
.videoblk__frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-black);
  aspect-ratio: 16 / 9;
}
.videoblk__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Partners strip (ported from Baseball) --- */
.partners-strip { background: var(--color-white); border-top: 1px solid var(--gray-200); }
.partners-strip__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 64px var(--margin);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.partners-strip__label { color: var(--gray-500); margin: 0; }
.partners-strip__row { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: center; justify-content: center; }
.partners-strip__logo { height: 56px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.partners-strip__name {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--gray-400);
  letter-spacing: .02em;
}
@media (max-width: 767px) {
  .partners-strip__inner { padding: 48px var(--margin); gap: 24px; }
  .partners-strip__row { gap: 32px 48px; }
  .partners-strip__logo { height: 44px; max-width: 160px; }
}

/* --- Quotes (text testimonials) --- */
.quotes { background: var(--gray-50); }
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote-card { gap: 18px; margin: 0; padding: var(--space-card-pad); }
.quote-card__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-navy);
  text-wrap: pretty;
}
/* This used to draw the brand arrow (the 23:13 chevron) above the quote as a
   stand-in quote mark. That chevron means "onward" everywhere else in the
   system — .us-link__arrow, .brand-arrow, .pillar-dot — so borrowing it here
   read as a link, not a quotation. The site already has a quote treatment on
   .lead-card__quote: a top hairline, real typographic quote marks, and an
   uppercase attribution. Match it rather than inventing a second one. */
.quote-card { border-top: 1px solid var(--gray-200); padding-top: 26px; }
.quote-card__text:before { content: "\201C"; }
.quote-card__text:after  { content: "\201D"; }
.quote-card__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.quote-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.1;
  color: var(--color-navy);
}
.quote-card__meta {
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500);
}
@media (max-width: 1023px) { .quotes__grid { grid-template-columns: 1fr; } }

/* --- Prose (legal / long-form) --- */
.prose { background: var(--color-white); }
.prose__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-section-y) var(--margin);
}
.prose__eyebrow { color: var(--gray-500); margin: 0 0 10px; }
.prose__headline {
  font-family: var(--font-display-condensed);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-section-headline);
  line-height: .95;
  color: var(--color-navy);
  margin: 0 0 28px;
  letter-spacing: .01em;
  text-wrap: balance;
}
.prose__body { color: var(--gray-600); font-size: var(--fs-body); line-height: 1.65; }
.prose__body > * + * { margin-top: 1em; }
.prose__body h2, .prose__body h3, .prose__body h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  color: var(--color-navy);
  line-height: 1.15;
  margin-top: 1.8em;
}
.prose__body h2 { font-size: var(--fs-h2); }
.prose__body h3 { font-size: var(--fs-h3); }
.prose__body h4 { font-size: var(--fs-body); }
.prose__body a { color: var(--color-teal); text-decoration: underline; }
.prose__body a:hover { color: var(--color-navy); }
.prose__body ul, .prose__body ol { padding-left: 1.25em; }
.prose__body ul { list-style: disc; }
.prose__body ol { list-style: decimal; }
.prose__body li + li { margin-top: .4em; }
.prose__body strong { font-weight: var(--weight-bold); color: var(--color-navy); }

/* --- Embed --- */
.embed { background: var(--color-white); }
.embed__frame {
  position: relative;
  width: 100%;
  height: var(--embed-h, 640px);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}
.embed__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.embed__raw { width: 100%; }
.embed__raw iframe { display: block; width: 100%; border: 0; }
/* Provider form styling — keep inputs legible on either ground. */
.embed__raw input, .embed__raw textarea, .embed__raw select { font-family: var(--font-body); font-size: var(--fs-body); }

/* --- Progressive Reveal ---
   Every block section carries data-reveal, so the hidden state MUST be gated
   on a class that only lands when JS is running. An inline <head> script adds
   .uf-js; the observer in wp_footer then adds .is-revealed as sections enter
   the viewport. Without the gate, a missing/failed observer leaves every section
   at opacity:0 and the whole page renders blank. */
.uf-js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.uf-js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Children of a stagger container fade in sequence once the parent reveals. */
.uf-js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.uf-js [data-reveal-stagger].is-revealed > *,
.uf-js .is-revealed [data-reveal-stagger] > * { opacity: 1; transform: none; }
.uf-js [data-reveal-stagger] > *:nth-child(2) { transition-delay: .08s; }
.uf-js [data-reveal-stagger] > *:nth-child(3) { transition-delay: .16s; }
.uf-js [data-reveal-stagger] > *:nth-child(4) { transition-delay: .24s; }
.uf-js [data-reveal-stagger] > *:nth-child(n+5) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .uf-js [data-reveal],
  .uf-js [data-reveal].is-revealed,
  .uf-js [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Responsive ---
   Chrome breakpoints live with the chrome above; this is block-level only.
   .phv4 previously carried a Flag-only `min-height:50vh` here; Baseball sets
   no min-height on the sub-page hero and lets .phv4__inner's padding size it,
   so it has been removed for parity. */

/* --- Buttons ---
   Unrivaled Baseball ships exactly ONE button: a seafoam pill with navy type.
   The shared rule below is Baseball's verbatim (height/padding/type/hover/
   active/focus), including its default fill — a bare .btn is already correct.
   Flag previously carried extra --accent / --outline / --outline-light
   variants that do not exist in Baseball; they have been removed so there is a
   single control. .mobile-menu__cta keeps Baseball's own slightly larger
   sizing rather than being folded into the 38px pill. */
.btn,
.ctaband__btn {
  appearance: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 26px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--color-navy);
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover,
.ctaband__btn:hover { background: var(--color-navy); color: var(--color-white); }
.btn:active,
.ctaband__btn:active { transform: scale(.98); }
.btn:focus-visible,
.ctaband__btn:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* On a light ground the white focus ring would vanish. */
.tone--light .btn:focus-visible,
body:not([data-transparent-nav]) .sec__head .btn:focus-visible { outline-color: var(--color-navy); }

/* --- 404 --- */
.four-oh-four {
  background: var(--color-navy);
  color: var(--color-white);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.four-oh-four__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 100px var(--margin-mobile);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.four-oh-four__eyebrow { color: var(--color-seafoam); }
.four-oh-four__headline { max-width: 800px; }
.four-oh-four__sub { opacity: .85; max-width: 560px; }
.four-oh-four__cta { margin-top: 16px; }
@media (min-width: 1024px) {
  .four-oh-four__inner { padding: 140px var(--margin-desktop); }
}

/* ==========================================================================
   Section tone
   A `tone` field on the section blocks emits .tone--navy. Placed last in the
   file so it wins on equal specificity against each block's own background.
   Every child that hardcodes a light-ground colour is corrected here — this is
   the whole cost of the modifier, and why it is defined once rather than per
   block.
   ========================================================================== */
.tone--navy { background: var(--color-navy); color: var(--color-white); }

/* Headlines drop their navy and inherit white. */
.tone--navy .sec__headline,
.tone--navy .story__headline,
.tone--navy .xsell__headline { color: inherit; }

/* Eyebrows go to the accent rather than mid-grey. */
.tone--navy .sec__eyebrow,
.tone--navy .story__eyebrow,
.tone--navy .xsell__eyebrow { color: var(--accent); }

/* Body copy. */
.tone--navy .story__body,
.tone--navy .faq__a,
.tone--navy .prose__body { color: #ffffffd1; }

/* Cards sit on the navy as translucent panels instead of grey ones. */
.tone--navy .pcv4,
.tone--navy .xcard,
.tone--navy .region-card,
.tone--navy .wte-card,
.tone--navy .quote-card {
  background: #ffffff14;
  border-color: #ffffff2e;
  color: var(--color-white);
}
/* .quote-card carries a top hairline as well, so it needs the light value. */
.tone--navy .quote-card { border-top-color: #ffffff2e; }
.tone--navy .xcard__name,
.tone--navy .region-card__name,
.tone--navy .pcv4__name,
.tone--navy .wte-card__title,
.tone--navy .quote-card__name { color: var(--color-white); }
.tone--navy .xcard__meta,
.tone--navy .region-card__states,
.tone--navy .pcv4__desc,
.tone--navy .wte-card__desc,
.tone--navy .quote-card__text { color: #ffffffd1; }
.tone--navy .xcard__tag,
.tone--navy .region-card__tag,
.tone--navy .quote-card__meta { color: #ffffff8c; }
.tone--navy .region-card__count { color: var(--accent); }
.tone--navy .xcard__photo,
.tone--navy .region-card__photo,
.tone--navy .pcv4__photo,
.tone--navy .wte-card__photo { background-color: #ffffff1f; }

/* Leadership portraits keep their treatment; only the type flips. */
.tone--navy .lead-card__name { color: var(--color-white); }
.tone--navy .lead-card__role { color: #ffffff8c; }
.tone--navy .lead-card__bio { color: #ffffffd1; }

/* FAQ rules and triggers. */
.tone--navy .faq__list { border-top-color: #ffffff2e; }
.tone--navy .faq__item { border-bottom-color: #ffffff2e; }
.tone--navy .faq__q { color: var(--color-white); }
.tone--navy .faq__q:hover { color: var(--accent); }

/* Embed frame. */
.tone--navy .embed__frame { background: #ffffff14; border-color: #ffffff2e; }

/* Inline text links invert. */
.tone--navy .us-link { color: var(--color-white); }

/* --- tone--grey ---
   The light-grey ground already used by regions / portfolio / quotes, made
   available to any section. Type stays as the light default; only the ground
   changes, so no child corrections are needed beyond cards, which sit white
   on grey rather than grey on grey. */
.tone--grey { background: var(--gray-50); }
.tone--grey .xcard,
.tone--grey .wte-card,
.tone--grey .region-card,
.tone--grey .quote-card,
.tone--grey .pcv4 { background: var(--color-white); }
.tone--grey .story__photo,
.tone--grey .lead-card__photo { background-color: var(--gray-200); }

/* --- tone--light ---
   The mirror of .tone--navy, for blocks that ship navy by default (video).
   Same principle: the modifier corrects every child that assumes a dark
   ground, so a section can be flipped without touching the block. */
.tone--light { background: var(--color-white); color: var(--color-navy); }
.tone--light .sec__headline,
.tone--light .videoblk__headline,
.tone--light .pinnacle__headline { color: var(--color-navy); }
/* Seafoam is too pale on white — eyebrows drop to teal. */
.tone--light .sec__eyebrow,
.tone--light .videoblk__eyebrow,
.tone--light .video-item__label,
.tone--light .pinnacle__eyebrow { color: var(--color-teal); }
.tone--light .video-item__title { color: var(--color-navy); }
.tone--light .videoblk__body,
.tone--light .pinnacle__body { color: var(--gray-600); }
.tone--light .region-card__tag { color: var(--gray-500); }
.tone--light .us-link { color: var(--color-navy); }
.tone--navy .us-link__arrow { background: var(--accent); }

/* ==========================================================================
   Embedded provider forms (ActiveCampaign)
   The provider ships Montserrat, grey 4px inputs and a black square button.
   Restyled to the Unrivaled system. Scoped under .embed__raw and using
   !important on the handful of properties the provider sets inline — without
   that its own stylesheet wins and the form reverts.
   ========================================================================== */
.embed__raw ._form,
.embed__raw ._form_element,
.embed__raw ._field-wrapper { max-width: 100% !important; }

.embed__raw ._form,
.embed__raw form,
.embed__raw ._form-content {
  font-family: var(--font-body) !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.embed__raw ._form-content { display: flex; flex-direction: column; gap: 18px; }
.embed__raw ._form_element { margin: 0 !important; padding: 0 !important; float: none !important; width: 100% !important; }

.embed__raw ._form-label,
.embed__raw ._form_element label {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--color-navy) !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.embed__raw .field-required { color: var(--color-red) !important; }

.embed__raw input[type="text"],
.embed__raw input[type="email"],
.embed__raw input[type="tel"],
.embed__raw input[type="number"],
.embed__raw select,
.embed__raw textarea {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  color: var(--color-navy) !important;
  background: var(--color-white) !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius-card) !important;
  padding: 12px 14px !important;
  height: auto !important;
  min-height: 46px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.embed__raw textarea { min-height: 120px !important; resize: vertical; }
.embed__raw input:focus,
.embed__raw select:focus,
.embed__raw textarea:focus {
  outline: none !important;
  border-color: var(--color-teal) !important;
  box-shadow: 0 0 0 3px rgba(13, 138, 114, .18) !important;
}
.embed__raw ::placeholder { color: var(--gray-500) !important; opacity: 1; }

/* Submit takes the one shared pill. */
.embed__raw ._submit,
.embed__raw button[type="submit"],
.embed__raw input[type="submit"] {
  appearance: none !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  width: auto !important;
  padding: 0 26px !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-bold) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: var(--accent) !important;
  color: var(--color-navy) !important;
  border-radius: 999px !important;
  transition: background-color .15s ease, color .15s ease;
}
.embed__raw ._submit:hover,
.embed__raw button[type="submit"]:hover {
  background: var(--color-navy) !important;
  color: var(--color-white) !important;
}

/* On a navy section the labels and inputs invert. */
.tone--navy .embed__raw ._form-label,
.tone--navy .embed__raw ._form_element label { color: var(--color-white) !important; }
.tone--navy .embed__raw input[type="text"],
.tone--navy .embed__raw input[type="email"],
.tone--navy .embed__raw input[type="tel"],
.tone--navy .embed__raw select,
.tone--navy .embed__raw textarea {
  background: #ffffff14 !important;
  border-color: #ffffff2e !important;
  color: var(--color-white) !important;
}
.tone--navy .embed__raw ::placeholder { color: #ffffff8c !important; }

/* Provider chrome we do not want. */
.embed__raw ._form-branding,
.embed__raw ._clear-element { display: none !important; }