/* US Officials — stylesheet.

   Design language borrowed from major league sports sites: a near-black field,
   condensed italic display type, a hard red accent, wide stat bands and a lot
   of diagonal motion. Brand colours come from the existing USO badge
   (red / white / blue), pushed to a deeper, more modern range. */

:root {
  /* Brand */
  --red:        #e01b24;
  --red-dark:   #b4141c;
  --blue:       #1d3fd6;
  --blue-light: #4d74ff;

  /* Field */
  --ink:        #05070f;
  --ink-2:      #0a0e1a;
  --ink-3:      #121829;
  --line:       rgba(255, 255, 255, .12);
  --line-soft:  rgba(255, 255, 255, .07);

  --text:       #eef1f8;
  --muted:      #98a2bd;

  --wrap:       1200px;
  --header-h:   76px;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Barlow Condensed', 'Arial Narrow', var(--sans);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(3.4rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1rem; letter-spacing: .06em; }

h1 em, h2 em {
  font-style: italic;
  color: var(--red);
  font-weight: 700;
}

p { margin: 0 0 1.1em; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.center { text-align: center; }
.center .head { margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: .8rem 1.2rem;
  font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ---------------------------------------------------------------- kickers */

.kicker {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.kicker::before {
  content: '';
  width: 28px; height: 3px;
  background: var(--red);
  flex: none;
}
.center .kicker { justify-content: center; }
.kicker.gold { color: #fff; }

.head { max-width: 62ch; margin: 0 0 3rem; }
.head .lede { color: var(--muted); font-size: 1.1rem; margin: 0; }

.lede { font-size: 1.15rem; color: var(--muted); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-red   { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }

.btn-line  { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--red); color: #fff; }

.btn-sm { padding: .72rem 1.3rem; font-size: .74rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.stuck {
  background: rgba(5, 7, 15, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.header-grid {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: min(100% - 2.5rem, var(--wrap));
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  margin-right: auto;
}

/* The mark: a red/blue chevron block that reads as a badge at any size. */
.brand-mark {
  display: inline-flex;
  align-items: stretch;
  height: 38px;
  border-radius: 3px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.brand-mark span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 700;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: #fff;
  padding: 0 .5rem;
}
.bm-us { background: var(--red); }
.bm-o  { background: var(--blue); padding-inline: .55rem; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b {
  font-family: var(--disp);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.brand-text span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.main-nav { display: flex; gap: 2rem; }
.main-nav a {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: .4rem 0;
  position: relative;
  transition: color .2s var(--ease);
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: #fff; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span::before { transform: translate(-50%, -7px); }
.nav-toggle span::after  { transform: translate(-50%, 5px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 auto;
  background: rgba(5, 7, 15, .98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  padding: 1rem 1.25rem 1.6rem;
}
.mobile-nav a {
  font-family: var(--disp);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a[aria-current="page"] { color: var(--red); }
.mn-login { color: var(--red); border-bottom: 0 !important; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 6rem) 0 5rem;
  min-height: 82vh;
}
.hero-page { min-height: 58vh; padding-bottom: 4rem; }

/* The field: deep navy, a red raking light, and a faint pitch-line grid. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(29,63,214,.42), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(224,27,36,.30), transparent 60%),
    linear-gradient(165deg, var(--ink-3) 0%, var(--ink-2) 42%, var(--ink) 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.055) 0 1px, transparent 1px 76px);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 92%);
}

.hero-fade {
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--ink));
}

/* --- photo heroes ------------------------------------------------------- */
/* The photograph sits on the right half on desktop and behind everything on
   mobile; a scrim keeps the headline legible over either. */
.hero.has-photo .hero-photo {
  position: absolute;
  /* start below the fixed header so faces are never tucked behind the bar */
  inset: var(--header-h) 0 0 auto;
  z-index: -2;
  width: 58%;
  height: calc(100% - var(--header-h));
  object-fit: cover;
  object-position: center top;
  /* feather the inner edge into the field rather than cutting a hard line */
  mask-image: linear-gradient(90deg, transparent, #000 34%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
}
.hero.has-photo .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--ink) 6%, rgba(5,7,15,.82) 38%, rgba(5,7,15,.30) 66%, rgba(5,7,15,.55) 100%),
    linear-gradient(to bottom, rgba(5,7,15,.55), transparent 30%);
}
.hero.has-photo .hero-inner { max-width: 62%; }

/* The recruiting shot is a tight two-up portrait. Anchor right so the fade
   falls between the two faces instead of cutting one of them in half, and pull
   the copy column in so the headline stops short of the photo. */
.hero-officials .hero-photo {
  object-position: 68% top;
  width: 46%;
  mask-image: linear-gradient(90deg, transparent, #000 26%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%);
}
.hero-officials .hero-inner { max-width: 54%; }

.hero-inner { position: relative; }
.hero-inner h1 { margin-bottom: .35em; }
.hero-lede {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

/* Per-page hue shifts so the sections do not all read identically. */
.hero-officials .hero-bg { filter: hue-rotate(-8deg); }
.hero-leagues .hero-bg   { filter: hue-rotate(12deg); }
.hero-partners .hero-bg,
.hero-contact .hero-bg   { filter: saturate(.85); }

/* Entrance: the hero animates on load, not on scroll. */
.hero-inner > * {
  animation: rise .9s var(--ease) both;
}
.hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3) { animation-delay: .16s; }
.hero-inner > :nth-child(4) { animation-delay: .24s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ stats */

.stats {
  background: var(--red);
  position: relative;
  z-index: 1;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 2.6rem 1.5rem;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.2);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-family: var(--disp);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: #fff;
}
.stat span {
  display: block;
  margin-top: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

/* --------------------------------------------------------------- sections */

.band, .sports, .split, .partners, .cta { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.band.alt { background: var(--ink-2); }
.sports { background: var(--ink-2); }

/* Pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.pillar {
  padding: 2.2rem 1.9rem;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--red);
  border-radius: 2px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.band.alt .pillar { background: var(--ink-3); }
.pillar:hover { transform: translateY(-6px); border-color: var(--line); border-top-color: var(--red); }
.pillar p { color: var(--muted); margin: 0; }

/* Sports cards */
.sport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.sport {
  position: relative;
  padding: 2.4rem 1.9rem;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .3s var(--ease);
}
.sport::before {
  content: '';
  position: absolute;
  inset: auto -40% -60% auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,27,36,.22), transparent 68%);
}
.sport-baseball::before   { background: radial-gradient(circle, rgba(29,63,214,.26), transparent 68%); }
.sport-basketball::before { background: radial-gradient(circle, rgba(255,140,30,.20), transparent 68%); }
.sport:hover { transform: translateY(-6px); }
.sport p { color: var(--muted); margin: 0; position: relative; }
.sport h3 { position: relative; }

.sport-icon {
  display: block;
  width: 44px; height: 44px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  position: relative;
  border: 2px solid var(--red);
}
.sport-icon::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: .45;
}
.sport-baseball .sport-icon,
.sport-baseball .sport-icon::before   { border-color: var(--blue-light); }
.sport-basketball .sport-icon,
.sport-basketball .sport-icon::before { border-color: #ff8c1e; }

/* Steps */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  counter-reset: s;
}
.step {
  padding: 2rem 1.6rem;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  position: relative;
}
.band.alt .step { background: var(--ink); }
.step-no {
  display: block;
  font-family: var(--disp);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  margin-bottom: .8rem;
}
.step p { color: var(--muted); margin: 0; font-size: .96rem; }

/* Checklist */
.checks {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem 2rem;
}
.checks li {
  position: relative;
  padding: .85rem 0 .85rem 2.4rem;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}
.checks li::before {
  content: '';
  position: absolute;
  left: .35rem; top: 1.35rem;
  width: 9px; height: 16px;
  border: solid var(--red);
  border-width: 0 3px 3px 0;
  transform: rotate(42deg);
}

/* Split */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split-copy .checks { grid-template-columns: 1fr; }
.split-copy p { color: var(--muted); }

/* Photo panel with a floating "open game" chip over it. */
.split-media { position: relative; }
.split-media > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 2px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.split-media::before {
  /* a red corner rule, echoing the pillar tops */
  content: '';
  position: absolute;
  inset: -14px auto auto -14px;
  width: 84px; height: 84px;
  border-top: 3px solid var(--red);
  border-left: 3px solid var(--red);
}
.split-badge {
  position: absolute;
  right: -14px;
  bottom: 28px;
  display: grid;
  gap: .15rem;
  padding: 1rem 3.9rem 1rem 1.2rem;
  background: rgba(10,14,26,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.split-badge b {
  font-family: var(--disp);
  font-size: 1.1rem;
  text-transform: uppercase;
}
.split-badge span { font-size: .82rem; color: var(--muted); }
.split-badge em {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: .4rem .7rem;
  border-radius: 2px;
}

/* The assignment-card panel — a hint of the product behind the login. */
.split-panel { display: grid; gap: 1rem; }
.panel-card {
  display: grid;
  gap: .3rem;
  padding: 1.4rem 1.5rem;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: 2px;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.panel-card:nth-child(2) { margin-left: 2rem; }
.panel-card:nth-child(3) { margin-left: 1rem; }
.pc-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-card b {
  font-family: var(--disp);
  font-size: 1.25rem;
  text-transform: uppercase;
}
.pc-meta { font-size: .85rem; color: var(--muted); }
.pc-accept, .pc-cta {
  position: absolute;
  right: 1.2rem; top: 50%;
  transform: translateY(-50%);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .7rem;
  border-radius: 2px;
}
.pc-accept { color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.pc-cta { background: var(--red); color: #fff; }
.pc-open { border-left-color: var(--red); }

/* ---------------------------------------------------------------- marquee */

.partners { background: var(--ink-2); overflow: hidden; }
.partners .wrap.center { margin-top: 2.5rem; }

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  margin-bottom: 1rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  flex: none;
  gap: 1rem;
  padding-right: 1rem;
  animation: scroll 70s linear infinite;
}
.marquee.right .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Logo tiles: the partner marks are mixed-quality JPEGs on white, so they get a
   uniform white card rather than being keyed out. Desaturated at rest so the
   wall reads as one band, full colour on hover. */
.logo-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 122px;
  padding: .55rem;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
}
.logo-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.25) contrast(1.05);
  opacity: .78;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.marquee:hover .logo-tile img { filter: none; opacity: 1; }

/* The static wall on the partners page. */
.logo-wall {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: .85rem;
}
.logo-wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: .8rem;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.logo-wall img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.3) contrast(1.05);
  opacity: .85;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-wall li:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
.logo-wall li:hover img { filter: none; opacity: 1; }

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* League grid */
.league-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.league {
  padding: 1.05rem 1.3rem;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue);
  border-radius: 2px;
  font-weight: 500;
  font-size: .95rem;
  transition: border-left-color .25s var(--ease), transform .25s var(--ease);
}
.league:hover { border-left-color: var(--red); transform: translateX(4px); }

/* ------------------------------------------------------- platform teaser */

.peek {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.peek-copy p:not(.kicker) { color: var(--muted); }

/* A stylised screenshot: real markup, not an image, so it stays crisp. */
.peek-shot {
  display: block;
  text-decoration: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.peek-shot:hover { transform: translateY(-5px); border-color: var(--line-2, rgba(255,255,255,.2)); }

.peek-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: .7rem .9rem;
  background: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
}
.peek-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.peek-chrome i:first-child { background: var(--red); }

.peek-rows { display: block; padding: .5rem 0; }
.pr {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.pr:last-child { border-bottom: 0; }
.pr b { font-size: .82rem; width: 78px; flex: none; color: var(--muted); }
.pr em { font-style: normal; font-weight: 600; font-size: .9rem; flex: 1; }
.pr s {
  text-decoration: none;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 2px;
}
.pr s.ok   { color: #34d399; background: rgba(52,211,153,.12);  border: 1px solid rgba(52,211,153,.3); }
.pr s.warn { color: #fbbf24; background: rgba(251,191,36,.12);  border: 1px solid rgba(251,191,36,.3); }
.pr s.bad  { color: #f2545b; background: rgba(242,84,91,.12);   border: 1px solid rgba(242,84,91,.32); }

/* -------------------------------------------------------------------- CTA */

.cta {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(29,63,214,.28), transparent 62%),
    var(--ink-2);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.cta-inner { max-width: 62ch; margin-inline: auto; }
.cta-inner p { color: var(--muted); font-size: 1.1rem; }
.cta-inner a { color: #fff; }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------- contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.form label {
  display: grid;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.form input, .form textarea {
  font: inherit;
  color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .95rem 1rem;
  width: 100%;
  transition: border-color .2s var(--ease);
}
.form input:focus, .form textarea:focus { border-color: var(--red); outline: none; }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; }

.contact-side { display: grid; gap: 1rem; }
.card {
  padding: 1.8rem;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--red);
  border-radius: 2px;
}
.card p { color: var(--muted); font-size: .95rem; }
.card p:last-child { margin-bottom: 0; }
.card a { color: #fff; }
.side-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; }
.side-social a {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
}
.side-social a:hover { color: var(--red); }

.prose { max-width: 68ch; }
.prose p { font-size: 1.12rem; color: var(--muted); }
.prose p:first-child { font-size: 1.3rem; color: var(--text); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding: 4.5rem 0 2rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-soft);
}
.foot-brand p { color: var(--muted); font-size: .92rem; margin: 1.1rem 0; max-width: 40ch; }
.foot-social, .foot-links ul { list-style: none; margin: 0; padding: 0; }
.foot-social { display: flex; gap: 1.3rem; }
.foot-social a {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--muted);
}
.foot-social a:hover { color: #fff; }
.foot-links h4 { color: #fff; margin-bottom: 1.1rem; }
.foot-links li { margin-bottom: .6rem; }
.foot-links a {
  color: var(--muted); text-decoration: none; font-size: .93rem;
  transition: color .2s var(--ease);
}
.foot-links a:hover { color: #fff; }
.foot-fine {
  margin: 1.6rem 0 0;
  font-size: .8rem;
  color: #5a6480;
}

/* --------------------------------------------------------------- reveals */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease) var(--d, 0ms),
              transform .7s var(--ease) var(--d, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-inner > * { animation: none; }
  .marquee-track { animation: none; }
  .btn:hover, .pillar:hover, .sport:hover, .league:hover { transform: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: block; }
  body.nav-open .mobile-nav { display: flex; }
  .split-grid, .contact-grid, .peek { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }

  /* Photo goes full-bleed behind the copy once the two-column split is gone. */
  .hero.has-photo .hero-photo,
  .hero-officials .hero-photo {
    width: 100%;
    object-position: center top;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .hero.has-photo .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(5,7,15,.72) 0%, rgba(5,7,15,.55) 34%, rgba(5,7,15,.94) 82%, var(--ink) 100%);
  }
  .hero.has-photo .hero-inner { max-width: 100%; }
  .split-media { max-width: 460px; margin-inline: auto; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.2); }
  .hero { min-height: 76vh; padding-top: calc(var(--header-h) + 4rem); }
  .panel-card:nth-child(2), .panel-card:nth-child(3) { margin-left: 0; }
  .brand-text span { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
}