body.intro-open { overflow: hidden; }
.site-intro:not([open]) { display: none; }
.site-intro { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 36px 5vw 30px; border: 0; background: #f27043; color: var(--ink); overflow: hidden; }
.site-intro::backdrop { background: #f27043; }
.intro-layout { height: 100%; display: flex; flex-direction: column; justify-content: space-between; max-width: 1400px; margin: auto; }
.intro-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; }
.intro-brand { display: flex; align-items: center; gap: 20px; }
.intro-logo { width: 100px; height: auto; padding: 7px; background: white; border-radius: 8px; }
.intro-brand-name { font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: .06em; }
.intro-brand-name span { display: block; font-size: 10px; letter-spacing: .24em; margin-top: 6px; }
.intro-skip { display: flex; align-items: center; gap: 15px; background: transparent; border: 1px solid #102d3b55; border-radius: 30px; padding: 12px 18px; font-size: 11px; font-weight: 700; }
.intro-skip:hover { background: #fff0df; }
.site-intro button:focus-visible { outline-color: #fff1d9; }
.intro-skip > span[aria-hidden] { font-size: 19px; }
.intro-stage { position: relative; width: min(100%, 1060px); height: min(53vh, 530px); min-height: 260px; align-self: center; display: grid; place-items: center; }
.intro-track { position: absolute; width: 100%; height: 100%; overflow: visible; transform: rotate(-11deg); }
.intro-lanes { fill: none; stroke: #fff0d8; stroke-width: 1.5; opacity: .72; }
.intro-lap { fill: none; stroke: #102d3b; stroke-width: 4; stroke-linecap: round; }
.intro-runner-disc { fill: #102d3b; }
.intro-runner-icon { color: #fff1d9; }
.intro-stage-copy { position: relative; text-align: center; width: 100%; padding: 0 12%; }
.intro-eyebrow { margin: 0 0 16px; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.intro-stage h1 { font-size: clamp(45px, 7.4vw, 104px); line-height: .95; font-weight: 800; letter-spacing: -.065em; margin: 0; }
.intro-phase { color: #fff1d9; font-size: 38px; line-height: 1; font-weight: 800; margin: 22px 0 0; font-variant-numeric: tabular-nums; }
.intro-footer { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.intro-description { max-width: 330px; margin: 0; font-size: 13px; line-height: 1.8; }
.intro-cheer { display: flex; align-items: center; gap: 15px; padding: 14px 20px; border: 0; border-radius: 30px; background: var(--navy); color: var(--cream); font-size: 12px; font-weight: 700; }
.intro-cheer:hover { background: #194757; }
.intro-cheer > span[aria-hidden] { color: #ffd166; font-size: 20px; }
.intro-spark { position: absolute; width: 8px; height: 16px; background: var(--spark-colour); border-radius: 2px; left: 50%; top: 50%; pointer-events: none; animation: intro-spark .65s ease-out both; }
.site-intro.is-leaving { animation: intro-depart .35s cubic-bezier(.65,0,.35,1) both; pointer-events: none; }
@keyframes intro-spark { from { opacity: 1; transform: translate(-50%,-50%) rotate(var(--spark-angle)); } to { opacity: 0; transform: translate(-50%,-50%) rotate(var(--spark-angle)) translateY(var(--spark-distance)) rotate(130deg); } }
@keyframes intro-depart { to { transform: translateY(-100%); } }
.footer-brand { padding: 0 3vw 24px; }
.footer-brand .footer-word { margin: 0; font-size: clamp(120px, 28vw, 460px); }
.footer-athletics { font-weight: 800; font-size: clamp(70px, 18.1vw, 296px); line-height: .95; letter-spacing: -.06em; color: #087ca1; text-align: center; user-select: none; margin-top: 12px; }
@media (max-width: 760px) {
  .site-intro { padding: 24px 24px 28px; }
  .intro-logo { width: 76px; }
  .intro-brand { gap: 12px; }
  .intro-brand-name { font-size: 15px; }
  .intro-brand-name span { font-size: 8px; }
  .intro-skip { border: 0; padding: 10px 0 10px 10px; font-size: 9px; gap: 8px; }
  .intro-stage { height: 350px; min-height: 230px; width: calc(100% + 30px); }
  .intro-track { width: 160%; height: 100%; }
  .intro-stage-copy { padding: 0 5%; }
  .intro-stage h1 { font-size: clamp(42px, 12vw, 65px); }
  .intro-eyebrow { font-size: 8px; letter-spacing: .12em; margin-bottom: 20px; }
  .intro-phase { font-size: 32px; }
  .intro-footer { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .intro-description { max-width: 280px; font-size: 11px; }
  .intro-cheer { padding: 12px 18px; font-size: 11px; }
  .footer-brand { padding-bottom: 18px; }
  .footer-brand .footer-word { font-size: 28vw; }
  .footer-athletics { font-size: 18.1vw; margin-top: 6px; }
}
@media (max-height: 620px) {
  .site-intro { padding-top: 18px; padding-bottom: 18px; }
  .intro-logo { width: 62px; }
  .intro-stage { min-height: 160px; height: 50vh; }
  .intro-stage h1 { font-size: clamp(38px, 7vw, 70px); }
  .intro-phase { margin-top: 12px; font-size: 26px; }
  .intro-footer { flex-direction: row; text-align: left; align-items: center; }
  .intro-description { font-size: 10px; max-width: 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro.is-leaving, .intro-spark { animation: none; }
}