/* ============================================================
   Corporate site layout. brand.css holds the reusable system;
   put page-specific styles here.
   ============================================================ */

:root { --nav-h: 68px; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.35s var(--ease);
}
.nav--scrolled { background: rgba(14, 14, 14, 0.85); }
.nav__inner {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(24px, 5vw, 72px);
}
.nav__logo { height: 44px; }
.nav__logo img { height: 100%; width: auto; }
.nav__cta { padding: 0.78em 1.4em 0.6em; font-size: 0.9rem; }

/* ---------- HERO (wide full-color banner fading to black, like the main site) ---------- */
.hero {
  position: relative; background: var(--black);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; overflow: hidden;
}
.hero__media { position: relative; width: 100%; height: clamp(380px, 72vh, 820px); flex: none; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 42%; filter: contrast(1.06) saturate(1.06);
}
.hero__fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,23,0.3) 0%, rgba(23,23,23,0) 18%, rgba(23,23,23,0) 34%, rgba(23,23,23,0.55) 60%, rgba(23,23,23,0.9) 82%, var(--black) 94%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  margin-top: clamp(-260px, -21vh, -150px);
  padding-bottom: clamp(36px, 5vh, 64px);
}
.hero__content { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.8vw, 18px); }
.hero__lockup { height: clamp(15px, 2vw, 20px); width: auto; }
.hero .u-eyebrow { color: var(--gold); }
.hero__title {
  margin: 0;
  font-family: var(--sans); font-weight: 900; font-stretch: 75%;
  text-transform: uppercase; line-height: 0.82; letter-spacing: 0.004em;
  font-size: clamp(2.6rem, 9vw, 7.5rem); color: var(--gold);
}
.hero__sub { margin: 0; max-width: 34ch; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--white); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(6px, 1.4vw, 12px); }

/* ---------- SPLIT (showcase) ---------- */
.split { border-top: 1px solid var(--hairline); }
.split__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .split__grid { grid-template-columns: 1.05fr 0.95fr; } }
.split__copy > .u-eyebrow { display: block; margin-bottom: clamp(14px, 2vw, 20px); }
.split__copy .section-title { margin-bottom: clamp(22px, 3vw, 34px); }
.lede {
  margin: 0 0 1em; max-width: 46ch; font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.35; color: var(--white);
}
.body { margin: 0; max-width: 52ch; font-family: var(--serif-text); color: var(--ink-60); }
.split__media { border-radius: 18px; aspect-ratio: 4 / 5; max-height: 620px; }
@media (max-width: 899px) { .split__media { aspect-ratio: 16 / 10; } }
.split__media:hover > img { filter: none; mix-blend-mode: normal; }

/* ---------- badges ---------- */
.badge {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.58rem; padding: 0.5em 0.75em 0.32em;
  border-radius: 999px; white-space: nowrap;
}
.badge--mbb { background: var(--gold); color: var(--black); }
.badge--wbb { background: rgba(255,255,255,0.16); color: var(--white); }

/* ---------- THE PACKAGE (games list) ---------- */
.package { border-top: 1px solid var(--hairline); }
.games { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.game {
  display: grid; align-items: center; gap: 6px 28px;
  grid-template-columns: 1fr; padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 820px) {
  .game { grid-template-columns: minmax(190px, 0.9fr) 1.3fr 0.9fr; grid-template-areas: "when match seats" "when perk seats"; }
  .game__perk { grid-area: perk; }
  .game__when { grid-area: when; }
  .game__match { grid-area: match; }
  .game__seats { grid-area: seats; text-align: right; }
}
.game--featured { position: relative; }
.game--featured::before {
  content: ""; position: absolute; left: -16px; top: 14px; bottom: 14px; width: 3px;
  background: var(--gold); border-radius: 2px;
}
.game__when { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.game__day { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--white); }
.game__time { font-family: var(--serif-text); color: var(--ink-60); font-size: 0.9rem; }
.game__match {
  font-family: var(--sans); font-weight: 900; font-stretch: 75%;
  text-transform: uppercase; line-height: 0.95; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--white);
}
.game__match em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--gold); font-size: 0.7em; margin: 0 0.15em; }
.game__seats { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--gold); }
.game__seats span { color: var(--ink-40); font-weight: 800; }
.game__perk { margin: 0; font-family: var(--serif-text); color: var(--ink-60); font-size: 0.95rem; }

/* ---------- totals ---------- */
.totals {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 6vw, 72px);
  margin-top: clamp(36px, 5vw, 56px);
}
.totals__item { display: flex; flex-direction: column; }
.totals__num { font-family: var(--sans); font-weight: 900; font-stretch: 75%; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: var(--gold); }
.totals__label { margin-top: 6px; font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.64rem; color: var(--ink-40); }

/* ---------- PRICING (tiers) ---------- */
.pricing { border-top: 1px solid var(--hairline); }
.tiers { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 720px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier {
  border: 1px solid var(--hairline); border-radius: 18px;
  padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column;
}
.tier--featured { border-color: var(--gold); background: rgba(198,159,102,0.06); }
.tier__name { margin: 0; font-family: var(--sans); font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--white); }
.tier--featured .tier__name { color: var(--gold); }
.tier__price { margin: 8px 0 0; font-family: var(--sans); font-weight: 900; font-stretch: 75%; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--gold); }
.tier__blurb { margin: 16px 0 0; font-family: var(--serif-text); color: var(--ink-60); }
.tier__blurb strong { color: var(--white); font-weight: 400; }
.tier__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tier__list li { position: relative; padding-left: 22px; font-family: var(--serif-text); color: var(--white); font-size: 0.98rem; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.tier__cta { margin-top: clamp(26px, 3vw, 34px); align-self: flex-start; }

/* ---------- RESERVE ---------- */
.reserve { border-top: 1px solid var(--hairline); text-align: center; }
.reserve__inner { display: flex; flex-direction: column; align-items: center; }
.reserve__inner .u-eyebrow { margin-bottom: 16px; }
.reserve__inner .section-intro { text-align: center; margin-inline: auto; }
.reserve__email { margin-top: clamp(28px, 3.5vw, 40px); font-size: 1.1rem; text-transform: none; letter-spacing: 0; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--hairline); padding-block: clamp(44px, 6vw, 72px); }
.footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.footer__logo { height: clamp(72px, 9vw, 104px); width: auto; }
.footer__legal { margin: 0; font-family: var(--serif-text); color: var(--ink-40); font-size: 0.85rem; }