/* Goodyear Mavericks Cheer — site styles
   Colors are sampled from the school's official circle mark (navy #0B2240, green #037835).
   One stylesheet, no framework. Page-specific rules sit at the bottom under their page name. */

:root {
  --navy-950: #050c19;
  --navy-900: #081a33;
  --navy-800: #0b2240;
  --navy-700: #12305a;
  --navy-600: #1b3f73;
  --green-700: #026a2f;
  --green-600: #037835;
  --green-500: #049a45;
  --green-bright: #34d27b;
  --silver: #c3ccd6;
  --silver-dim: #8f9db0;
  --paper: #f3f5f8;
  --paper-2: #e8ecf2;
  --white: #ffffff;
  --ink: #0b2240;
  --ink-soft: #3c4b63;

  --f-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-jersey: "Graduate", "Anton", serif;

  --pad: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px -18px rgba(5, 12, 25, .45);
  --shadow-lg: 0 30px 70px -30px rgba(5, 12, 25, .6);
  --slant: 3.2vw;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1; }
:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--green-600); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

/* ---------- type ---------- */
.kicker {
  font-family: var(--f-label); font-weight: 700; font-style: italic; text-transform: uppercase;
  letter-spacing: .16em; font-size: .9rem; color: var(--green-600);
  display: inline-flex; align-items: center; gap: .7em; margin: 0 0 14px;
}
.kicker::before { content: ""; width: 34px; height: 8px; flex: none;
  background: linear-gradient(to bottom, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
.on-navy .kicker, .kicker--light { color: var(--green-bright); }
.h-display {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .92;
}
.h-section {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: .95; letter-spacing: .01em; margin-bottom: 18px;
}
.h-card { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; letter-spacing: .02em; line-height: 1.05; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.on-navy .lede { color: var(--silver); }
.hl { color: var(--green-600); }
.on-navy .hl { color: var(--green-bright); }
.outline-text { color: transparent; -webkit-text-stroke: 2px var(--green-bright); }
.fine { font-size: .9rem; color: var(--ink-soft); }
.on-navy .fine { color: var(--silver-dim); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--green-600); --fg: #fff; --bd: var(--green-600);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--bd);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  font-family: var(--f-label); font-weight: 700; font-style: italic; text-transform: uppercase;
  letter-spacing: .08em; font-size: 1.05rem; line-height: 1;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 22px -12px rgba(3, 120, 53, .8);
  white-space: nowrap;
}
.btn:hover { --bg: var(--green-500); --bd: var(--green-500); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 1.2em; height: 1.2em; }
.btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.55); box-shadow: none; }
.btn--ghost:hover { --bg: #fff; --fg: var(--navy-800); --bd: #fff; }
.btn--navy { --bg: var(--navy-800); --bd: var(--navy-800); box-shadow: 0 10px 22px -12px rgba(11, 34, 64, .8); }
.btn--navy:hover { --bg: var(--navy-600); --bd: var(--navy-600); }
.btn--line { --bg: transparent; --fg: var(--navy-800); --bd: var(--navy-800); box-shadow: none; }
.btn--line:hover { --bg: var(--navy-800); --fg: #fff; --bd: var(--navy-800); }
.btn--white { --bg: #fff; --fg: var(--navy-800); --bd: #fff; box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.btn--white:hover { --bg: var(--paper-2); --bd: var(--paper-2); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.textlink {
  font-family: var(--f-label); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .08em;
  color: var(--green-600); text-decoration: none; display: inline-flex; align-items: center; gap: .4em; font-size: 1.02rem;
}
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
/* A LINK THAT IS AN EMAIL ADDRESS HAS NO SPACES TO BREAK AT. Set in capitals with letter-spacing,
   gyhscheerbooster@gmail.com is wider than a card column and ran straight off the edge (Ian saw it on
   the Give page, 2026-09-23). inline-flex will not wrap on its own: the row has to be allowed to wrap
   and the word has to be allowed to break. */
.textlink { flex-wrap: wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.on-navy .textlink { color: var(--green-bright); }

/* ---------- piping (uniform trim) ---------- */
.piping { height: 12px; background:
  linear-gradient(to bottom, var(--green-600) 0 5px, #fff 5px 7px, var(--green-600) 7px 9px, transparent 9px); }
.piping--thin { height: 7px; background: linear-gradient(to bottom, var(--green-600) 0 3px, transparent 3px 4px, var(--green-600) 4px 7px); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(8, 26, 51, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__bar { display: flex; align-items: center; gap: 22px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex: none; }
.brand img { width: 50px; height: 50px; }
.brand__words { display: flex; flex-direction: column; line-height: 1; }
.brand__main { font-family: var(--f-display); font-size: 1.55rem; letter-spacing: .03em; text-transform: uppercase; }
.brand__sub { font-family: var(--f-label); font-weight: 600; font-style: italic; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--green-bright); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: 1rem;
  color: #fff; text-decoration: none; padding: 10px 12px; border-radius: 10px; position: relative;
}
.nav a:hover { color: var(--green-bright); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--green-bright); }
.nav .nav__date { display: inline-flex; align-items: center; gap: 6px; }
.nav .nav__date .pill { background: #c8102e; color: #fff; font-size: .72rem; padding: 3px 7px; border-radius: 999px; letter-spacing: .06em; }
.header-cta { display: flex; gap: 10px; flex: none; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; align-items: center; justify-content: center; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn .ico-close { display: none; }
.menu-open .menu-btn .ico-open { display: none; }
.menu-open .menu-btn .ico-close { display: block; }

.mobile-menu { display: none; }
@media (max-width: 1080px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-menu {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--navy-900);
    padding: 26px var(--pad) 40px; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .mobile-menu a.mm-link {
    display: flex; justify-content: space-between; align-items: center; color: #fff; text-decoration: none;
    font-family: var(--f-display); text-transform: uppercase; font-size: 2.3rem; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .mobile-menu a.mm-link[aria-current="page"] { color: var(--green-bright); }
  .mobile-menu .btn-row { margin-top: 26px; }
  .mobile-menu .btn { flex: 1 1 200px; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 420px) {
  .brand img { width: 42px; height: 42px; }
  .brand__main { font-size: 1.3rem; }
}

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--navy { background: var(--navy-800); color: #fff; }
.section--deep { background: var(--navy-900); color: #fff; }
.section--white { background: #fff; }
.section--green { background: var(--green-600); color: #fff; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.section-head--split > div { max-width: 700px; }
.slant-top { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--slant) * -1); padding-top: calc(clamp(64px, 9vw, 120px) + var(--slant)); }
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); padding-bottom: calc(clamp(64px, 9vw, 120px) + var(--slant)); }
.dots-bg { position: relative; isolation: isolate; }
.dots-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.2px, transparent 1.6px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 60%); mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
}

/* ---------- hero (home) ---------- */
.hero { position: relative; background: var(--navy-800); color: #fff; overflow: hidden; isolation: isolate; }
.hero::before { /* halftone dots */
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .55;
  background-image: radial-gradient(rgba(255,255,255,.10) 1.3px, transparent 1.8px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 20% 30%, #000 0%, transparent 70%);
}
.hero::after { /* green light sweep */
  content: ""; position: absolute; z-index: -3; width: 70vw; height: 70vw; right: -18vw; top: -30vw;
  background: radial-gradient(circle, rgba(52,210,123,.22) 0%, rgba(52,210,123,0) 62%);
}
.hero__horse { position: absolute; z-index: -1; left: -6vw; bottom: -8vw; width: min(52vw, 700px); opacity: .06; filter: grayscale(1) brightness(3); pointer-events: none; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(88px, 10vw, 140px);
}
.hero__title { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; line-height: .9; margin: 0 0 26px; }
.hero__title span { display: block; }
.hero__title .t1 { margin-bottom: .06em; }
.hero__title .t2 { margin-bottom: .02em; }
.hero__title .t1 { font-size: clamp(2.4rem, 5.2vw, 4.6rem); letter-spacing: .02em; }
.hero__title .t2 { font-size: clamp(3.4rem, 8.4vw, 7.6rem); color: var(--green-bright); letter-spacing: -.005em; }
.hero__title .t3 { font-size: clamp(4.4rem, 11.4vw, 10.4rem); letter-spacing: .01em; }
.hero__lede { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--silver); max-width: 34em; margin-bottom: 30px; }
.hero__lede strong { color: #fff; font-weight: 600; }
.hero__social { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--f-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; color: var(--silver); }
.hero__social a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.hero__social a:hover { color: var(--green-bright); }

.hero__media { position: relative; min-height: 560px; }
.hero__photo {
  position: relative; width: 78%; margin-left: auto; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden;
  transform: rotate(2.2deg); box-shadow: var(--shadow-lg); border: 6px solid #fff; background: var(--navy-700);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__clip {
  position: absolute; left: 0; bottom: -6%; width: 42%; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden;
  transform: rotate(-4deg); box-shadow: var(--shadow-lg); border: 5px solid var(--green-600); background: var(--navy-900);
}
.hero__clip video, .hero__clip img { width: 100%; height: 100%; object-fit: cover; }
.clip-tag {
  position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-label); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.clip-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 4px rgba(52,210,123,.25); flex: none; }
.seal { position: absolute; right: -2%; top: -4%; width: clamp(110px, 12vw, 150px); aspect-ratio: 1; z-index: 3; }
.seal__ring { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.seal__ring text { font-family: var(--f-label); font-weight: 800; font-style: italic; font-size: 11.4px; letter-spacing: 2.2px; text-transform: uppercase; fill: #fff; }
.seal__core { position: absolute; inset: 22%; border-radius: 50%; background: var(--green-600); display: grid; place-items: center; text-align: center; box-shadow: 0 8px 22px -8px rgba(0,0,0,.6); }
.seal__core b { font-family: var(--f-jersey); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: .8; color: #fff; }
.seal__core small { display: block; font-family: var(--f-label); font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #dff7e8; margin-top: 2px; }
.seal__bg { position: absolute; inset: 0; border-radius: 50%; background: var(--navy-900); box-shadow: 0 0 0 4px rgba(255,255,255,.08); z-index: -1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- ticker ---------- */
.ticker-wrap { overflow: hidden; margin-top: -40px; padding: 10px 0 14px; position: relative; z-index: 5; }
.ticker { background: var(--green-600); color: #fff; overflow: hidden; transform: rotate(-1.6deg); margin: 0 -2vw; position: relative; z-index: 5; box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); border-top: 3px solid #fff; border-bottom: 3px solid #fff; }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__group { display: flex; flex: none; }
.ticker span { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.3rem, 2.3vw, 1.9rem); padding: 14px 0; white-space: nowrap; display: inline-flex; align-items: center; letter-spacing: .03em; }
.ticker span::after { content: "★"; font-size: .7em; margin: 0 .9em; color: var(--navy-800); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat {
  background: #fff; border-radius: var(--radius); padding: 26px 24px 24px; position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(11,34,64,.06), 0 14px 30px -24px rgba(11,34,64,.5);
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--green-600); }
.stat__num { font-family: var(--f-jersey); font-size: clamp(2.5rem, 4vw, 3.4rem); line-height: 1; color: var(--navy-800); letter-spacing: .01em; }
.stat__num sup { font-size: .45em; vertical-align: top; position: relative; top: .3em; margin-left: 2px; color: var(--green-600); }
.stat__label { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; margin: 12px 0 6px; line-height: 1.1; }
.stat p { font-size: .98rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ---------- event band (Cardinals) ---------- */
.event { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.event::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 85% 10%, rgba(200,16,46,.28), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(52,210,123,.16), transparent 50%); }
.event__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.event__media { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: end; }
.event__media figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy-800); }
.event__media figure:first-child { aspect-ratio: 3 / 4; transform: rotate(-2deg); border: 5px solid #fff; }
.event__media figure:last-child { aspect-ratio: 4 / 5; transform: translateY(-14%) rotate(2.5deg); border: 5px solid #c8102e; }
.event__media img, .event__media video { width: 100%; height: 100%; object-fit: cover; }
.datebox { display: inline-grid; grid-template-columns: auto auto; align-items: stretch; border-radius: 16px; overflow: hidden; margin: 6px 0 24px; box-shadow: var(--shadow); }
.datebox__day { background: #c8102e; color: #fff; padding: 12px 18px; text-align: center; display: grid; place-content: center; }
.datebox__day b { display: block; font-family: var(--f-jersey); font-size: 2.6rem; line-height: .9; }
.datebox__day small { font-family: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; }
.datebox__info { background: #fff; color: var(--navy-800); padding: 12px 20px; display: grid; align-content: center; gap: 2px; }
.datebox__info strong { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; line-height: 1.1; }
.datebox__info span { font-size: .95rem; color: var(--ink-soft); }
.checks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.checks li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 15px no-repeat; }
.on-navy .checks li, .event .checks li { color: var(--silver); }
.checks li strong { color: inherit; }
.event .checks li strong { color: #fff; }
.countdown { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--silver); margin-left: 6px; }
.countdown b { font-family: var(--f-jersey); font-weight: 400; font-size: 2rem; color: #fff; letter-spacing: 0; }

/* ---------- package cards ---------- */
.packages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pkg {
  position: relative; border-radius: var(--radius); background: #fff; padding: 26px 24px 24px; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(11,34,64,.06), 0 18px 40px -28px rgba(11,34,64,.55); overflow: hidden; border: 1px solid rgba(11,34,64,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pkg:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(11,34,64,.06), 0 28px 50px -30px rgba(11,34,64,.7); }
.pkg__tag { font-family: var(--f-label); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; color: var(--green-600); }
.pkg__price { font-family: var(--f-jersey); font-size: clamp(2.8rem, 4vw, 3.5rem); line-height: 1; margin: 10px 0 4px; color: var(--navy-800); }
.pkg__price sup { font-size: .45em; position: relative; top: .25em; vertical-align: top; margin-right: 2px; }
.pkg__name { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.12rem; margin-bottom: 16px; }
.pkg ul { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 2px dashed rgba(11,34,64,.13); display: grid; gap: 9px; flex: 1; align-content: start; }
.pkg li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .98rem; line-height: 1.4; color: var(--ink-soft); }
.pkg li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.pkg li strong { color: var(--ink); font-weight: 600; }
.pkg .btn { width: 100%; }
.pkg--blue { background: var(--navy-800); color: #fff; border-color: transparent; }
.pkg--blue::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: linear-gradient(to right, var(--green-600), var(--green-bright)); }
.pkg--blue .pkg__price { color: #fff; }
.pkg--blue .pkg__tag { color: var(--green-bright); }
.pkg--blue ul { border-color: rgba(255,255,255,.18); }
.pkg--blue li { color: var(--silver); }
.pkg--blue li strong { color: #fff; }
.pkg--green { background: var(--green-600); color: #fff; border-color: transparent; }
.pkg--green .pkg__price { color: #fff; }
.pkg--green .pkg__tag { color: #d6f5e3; }
.pkg--green ul { border-color: rgba(255,255,255,.25); }
.pkg--green li { color: #e3f6eb; }
.pkg--green li strong { color: #fff; }
.pkg--green li::before { background-color: var(--navy-800); }
.pkg--green .btn { --bg: #fff; --fg: var(--green-700); --bd: #fff; box-shadow: none; }
.pkg--green .btn:hover { --bg: var(--navy-800); --fg: #fff; --bd: var(--navy-800); }
.pkg__flag {
  position: absolute; top: 16px; right: -34px; transform: rotate(35deg); background: var(--green-bright); color: var(--navy-900);
  font-family: var(--f-label); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 40px;
}

/* ---------- sponsor wall ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.wall__tile {
  aspect-ratio: 16 / 10; border-radius: var(--radius-sm); background: #fff; display: grid; place-items: center; padding: 18px; text-align: center;
  border: 1px solid rgba(11,34,64,.08); box-shadow: 0 14px 30px -26px rgba(11,34,64,.6); text-decoration: none; color: var(--navy-800); position: relative;
  transition: transform .18s ease, border-color .18s ease;
}
.wall__tile:hover { transform: translateY(-3px); }
.wall__tile--sponsor { grid-column: span 2; aspect-ratio: auto; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 12px; border: 2px solid var(--green-600); }
.wall__tile--sponsor .omg { width: min(100%, 300px); height: auto; color: var(--navy-800); }
.wall__tile--sponsor .badge { position: static; }
.wall__tile--open { border: 2px dashed rgba(11,34,64,.25); background: transparent; box-shadow: none; color: var(--ink-soft); }
.wall__tile--open:hover { border-color: var(--green-600); color: var(--green-600); }
.wall__tile--open b { display: block; font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; }
.wall__tile--open span { font-size: .85rem; }
.wall__tile--open .wall__plus { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed currentColor; display: grid; place-items: center; margin: 0 auto 10px; font-family: var(--f-body); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-label); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; padding: 5px 11px; border-radius: 999px; background: var(--green-600); color: #fff; }
.badge--navy { background: var(--navy-800); }
.badge--line { background: transparent; border: 1.5px solid currentColor; color: var(--green-600); }
.on-navy .wall__tile--open { border-color: rgba(255,255,255,.28); color: var(--silver); }

/* ---------- split / squad ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--wide-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.framed { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; background: var(--navy-700); }
.framed img { width: 100%; height: 100%; object-fit: cover; }
.framed--tilt { transform: rotate(-1.8deg); border: 6px solid #fff; }
.framed--tilt-r { transform: rotate(1.6deg); border: 6px solid #fff; }
.caption-chip { position: absolute; left: 14px; bottom: 14px; background: rgba(8,26,51,.86); color: #fff; padding: 8px 14px; border-radius: 999px; font-family: var(--f-label); font-weight: 700; font-style: italic; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drip { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.drip li { display: inline-flex; align-items: baseline; gap: 0; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -20px rgba(11,34,64,.8); border: 1px solid rgba(11,34,64,.08);
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; color: var(--navy-800); }
.drip li b { font: inherit; letter-spacing: inherit; color: var(--green-600); margin: 0; }
.on-navy .drip li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.on-navy .drip li b { color: var(--green-bright); }

/* ---------- photo mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 13vw, 190px); gap: 12px; }
.mosaic figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--navy-700); position: relative; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic .m-a { grid-column: span 2; grid-row: span 2; }
.mosaic .m-b { grid-column: span 2; grid-row: span 1; }
.mosaic .m-c { grid-column: span 1; grid-row: span 2; }
.mosaic .m-d { grid-column: span 1; grid-row: span 1; }
.mosaic figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(5,12,25,.82)); color: #fff; font-family: var(--f-label); font-weight: 700; font-style: italic; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; text-shadow: 0 1px 10px rgba(0,0,0,.8); }

/* ---------- give band / venmo card ---------- */
.give-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.venmo-card {
  background: #fff; color: var(--navy-800); border-radius: 26px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 24px; align-items: center; position: relative;
}
.venmo-card::after { content: ""; position: absolute; inset: auto 26px -12px 26px; height: 12px; border-radius: 0 0 14px 14px; background: var(--green-600); z-index: -1; }
.venmo-card--lg { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
@media (max-width: 1080px) and (min-width: 901px) { .venmo-card { grid-template-columns: 1fr; justify-items: start; } .venmo-card__qr { max-width: 220px; } }
.venmo-card__qr { border-radius: 14px; overflow: hidden; border: 2px solid var(--paper-2); background: #fff; padding: 8px; }
.venmo-card__qr img { width: 100%; height: auto; image-rendering: pixelated; }
.venmo-card__to { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--ink-soft); margin: 0 0 4px; }
.venmo-card__name { font-family: var(--f-label); font-weight: 800; font-size: 1.35rem; line-height: 1.15; margin: 0 0 6px; }
.venmo-card__handle { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .88rem; overflow-wrap: anywhere; color: var(--ink-soft); margin: 0 0 16px; }
.venmo-card__handle wbr { display: inline; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(11,34,64,.22); background: transparent; color: var(--navy-800); border-radius: 999px; padding: 6px 12px; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; cursor: pointer; }
.copy-btn:hover { border-color: var(--green-600); color: var(--green-600); }
.copy-btn.is-done { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.on-navy .copy-btn { border-color: rgba(255,255,255,.35); color: #fff; }
.on-navy .venmo-card .copy-btn, .venmo-card .copy-btn { border-color: rgba(11,34,64,.22); color: var(--navy-800); }
.venmo-card .copy-btn:hover { border-color: var(--green-600); color: var(--green-600); }
.venmo-card .copy-btn.is-done { background: var(--green-600); border-color: var(--green-600); color: #fff; }

/* ---------- cta band ---------- */
.cta-band { background: var(--green-600); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background: repeating-linear-gradient(-58deg, rgba(255,255,255,.07) 0 22px, transparent 22px 44px); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); }
.cta-band h2 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: .95; max-width: 16ch; }
.cta-band .btn { --bg: #fff; --fg: var(--green-700); --bd: #fff; box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.cta-band .btn:hover { --bg: var(--navy-800); --fg: #fff; --bd: var(--navy-800); }
.cta-band .btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.7); box-shadow: none; }
.cta-band .btn--ghost:hover { --bg: #fff; --fg: var(--green-700); --bd: #fff; }

/* ---------- page hero (interior) ---------- */
.phero { position: relative; background: var(--navy-800); color: #fff; overflow: hidden; isolation: isolate; }
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,26,51,.96) 0%, rgba(8,26,51,.86) 42%, rgba(8,26,51,.35) 100%); }
.phero__inner { padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(90px, 11vw, 150px); }
.phero h1 { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: clamp(3rem, 7.6vw, 6.4rem); line-height: .9; margin-bottom: 22px; }
.phero .lede { color: var(--silver); margin-bottom: 30px; }
.crumbs { font-family: var(--f-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--silver-dim); margin-bottom: 18px; }
.crumbs a { color: var(--silver); text-decoration: none; }
.crumbs a:hover { color: #fff; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--green-600), var(--navy-600)); }
.tl { display: grid; grid-template-columns: 100px 36px minmax(0, 1fr); gap: 0 18px; align-items: start; padding: 0 0 30px; position: relative; }
.tl__date { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; color: var(--green-600); text-align: right; padding-top: 4px; line-height: 1.2; }
.tl__date small { display: block; color: var(--ink-soft); font-weight: 600; letter-spacing: .12em; font-size: .78rem; }
.tl__dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--green-600); margin: 3px 0 0 9px; position: relative; z-index: 1; }
.tl--star .tl__dot { background: var(--green-600); box-shadow: 0 0 0 5px rgba(3,120,53,.18); }
.tl__body h3 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: .02em; line-height: 1.15; margin-bottom: 6px; }
.tl__body p { color: var(--ink-soft); margin: 0; max-width: 60ch; }
.tl__body q { font-style: italic; }
.tl--future .tl__dot { border-style: dashed; }

/* ---------- cards (generic) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: #fff; border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 1px 0 rgba(11,34,64,.06), 0 18px 40px -30px rgba(11,34,64,.6); border: 1px solid rgba(11,34,64,.06); position: relative; }
.card__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--navy-800); color: #fff; margin-bottom: 18px; }
.card__icon .ico { width: 26px; height: 26px; }
.card h3 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; margin-bottom: 10px; line-height: 1.1; }
.card p { color: var(--ink-soft); margin: 0 0 14px; }
.card p:last-child { margin-bottom: 0; }
.on-navy .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
.on-navy .card p { color: var(--silver); }
.on-navy .card__icon { background: var(--green-600); }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step { background: #fff; border-radius: var(--radius); padding: 26px 22px; position: relative; counter-increment: step; box-shadow: 0 18px 40px -32px rgba(11,34,64,.6); border: 1px solid rgba(11,34,64,.06); }
.step::before { content: counter(step); font-family: var(--f-jersey); font-size: 2.8rem; line-height: 1; color: var(--green-600); display: block; margin-bottom: 12px; }
.step h3 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .03em; margin-bottom: 8px; }
.step p { color: var(--ink-soft); margin: 0; font-size: .98rem; }
.step a { color: var(--green-600); font-weight: 600; }

/* ---------- compare table ---------- */
.compare-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); box-shadow: 0 18px 40px -30px rgba(11,34,64,.6); background: #fff; }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; table-layout: fixed; }
.compare thead th:first-child { width: 22%; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
.compare thead th { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; background: var(--paper); }
.compare thead th.c-blue { background: var(--navy-800); color: #fff; }
.compare thead th.c-green { background: var(--green-600); color: #fff; }
.compare thead th small { display: block; font-family: var(--f-jersey); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; margin-top: 2px; text-transform: none; }
.compare tbody th { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; width: 22%; }
.compare td { font-size: .96rem; color: var(--ink-soft); }
.compare td.yes strong { color: var(--ink); }
.compare .no { color: #66738a; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: #fff; border-radius: var(--radius-sm); border: 1px solid rgba(11,34,64,.08); box-shadow: 0 12px 26px -24px rgba(11,34,64,.6); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; position: relative; font-family: var(--f-label); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.2rem; color: var(--green-600); transition: transform .2s ease; }
.faq details[open] summary::after { content: "–"; }
.faq .faq__a { padding: 0 22px 20px; color: var(--ink-soft); }
.faq .faq__a p:last-child { margin: 0; }
.faq a { color: var(--green-600); font-weight: 600; }

/* ---------- form ---------- */
.form-card { background: #fff; border-radius: 24px; padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-lg); color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--navy-800); }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid #cdd5e0; border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: #fbfcfd;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(3,120,53,.15); background: #fff; }
.form-note { font-size: .9rem; color: var(--ink-soft); margin: 14px 0 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }

/* ---------- flier ---------- */
.flier { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.flier__img { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(-2deg); border: 6px solid #fff; background: #fff; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gallery figure { margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; position: relative; background: var(--navy-700); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; color: #fff; background: linear-gradient(transparent, rgba(5,12,25,.8)); font-family: var(--f-label); font-weight: 700; font-style: italic; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }

/* ---------- coach ---------- */
.coach { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: 0 18px 40px -30px rgba(11,34,64,.6); }
.coach__mark { width: 96px; height: 96px; border-radius: 50%; background: var(--navy-800); display: grid; place-items: center; }
.coach__mark img { width: 70px; height: 70px; }
.coach h3 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; font-size: 1.45rem; line-height: 1.1; }
.coach p { margin: 6px 0 0; color: var(--ink-soft); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-950); color: var(--silver); position: relative; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--green-bright); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding: clamp(56px, 7vw, 88px) 0 40px; }
.footer-brand { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.footer-brand img { width: 84px; height: 84px; }
.footer-brand b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; text-transform: uppercase; color: #fff; line-height: 1; letter-spacing: .02em; }
.footer-brand span { font-family: var(--f-label); font-weight: 600; font-style: italic; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--green-bright); }
.footer-tagline { margin: 22px 0 0; max-width: 34ch; }
.site-footer .fh { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; color: #fff; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.site-footer li .ico { margin-top: 2px; color: var(--green-bright); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: .88rem; color: var(--silver-dim); }
.footer-bottom p { margin: 0; }
.footer-slogan { font-family: var(--f-label); font-weight: 700; font-style: italic; letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }

/* ---------- mobile action bar ---------- */
.actionbar { display: none; }
@media (max-width: 1080px) {
  .actionbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,26,51,.96); border-top: 1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .25s ease;
  }
  .actionbar.is-on { transform: none; }
  .actionbar .btn { min-height: 48px; font-size: 1rem; padding: 0 12px; }
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 76px; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .event__grid, .split, .split--wide-media, .give-grid, .flier { grid-template-columns: 1fr; }
  .event__media { max-width: 560px; }
  .cards { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .mosaic .m-a { grid-column: span 4; grid-row: span 2; }
  .mosaic .m-b { grid-column: span 2; }
  .mosaic .m-c { grid-column: span 2; grid-row: span 2; }
  .mosaic .m-d { grid-column: span 2; }
  .flier__img { max-width: 420px; }
  .split .order-first-mobile { order: -1; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; }
  .hero__media { min-height: 0; padding-bottom: 14%; }
  .hero__photo { width: 86%; }
  .hero__clip { width: 46%; }
  .seal { width: 96px; right: -4%; }
}
@media (max-width: 760px) {
  .hero__grid { grid-template-columns: 1fr; padding-bottom: 96px; }
  .hero__media { min-height: 0; max-width: 560px; width: 100%; margin: 10px auto 0; padding-bottom: 12%; }
  .hero__photo { width: 80%; }
}
@media (max-width: 640px) {
  :root { --header-h: 68px; --slant: 5vw; }
  body { font-size: 1rem; }
  .packages, .stats, .steps { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__tile { min-width: 0; }
  .wall__tile--open { aspect-ratio: auto; min-height: 128px; padding: 14px 10px; }
  .wall__tile--sponsor { grid-column: 1 / -1; }
  .venmo-card, .venmo-card--lg { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .venmo-card__qr { max-width: 220px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .timeline::before { left: 11px; }
  .tl { grid-template-columns: 26px minmax(0, 1fr); gap: 4px 14px; }
  .tl__date { grid-column: 2; grid-row: 1; text-align: left; padding: 0; }
  .tl__dot { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0 0; }
  .tl__body { grid-column: 2; }
  .datebox { grid-template-columns: 1fr; }
  .datebox__day { grid-auto-flow: column; gap: 10px; align-items: baseline; justify-content: start; }
  .btn-row .btn { flex: 1 1 100%; }
  .coach { grid-template-columns: 1fr; text-align: left; }
  .ticker-wrap { margin-top: -34px; }
  .hero__title .t3 { font-size: clamp(4rem, 22vw, 6rem); }
  .hero__title .t2 { font-size: clamp(3rem, 16vw, 4.6rem); }
  .seal { right: 0; top: -6%; width: 104px; }
  .event__media figure:last-child { transform: translateY(-8%) rotate(2.5deg); }
}

/* ---------- motion preferences ---------- */
/* The ticker, seal and loop videos play for everyone by default (Ian, 2026-09-21); the hero's
   "Pause motion" button is the off switch. A reduced-motion setting still skips smooth scrolling,
   fade-ins and hover transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- print (the give page prints a game-day QR sign) ---------- */
@media print {
  .site-header, .site-footer, .actionbar, .ticker, .no-print { display: none !important; }
  body { background: #fff; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ---------- interior hero, split with a framed photo ---------- */
.phero--split .phero__inner { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(64px, 6vw, 88px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.phero__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lg); transform: rotate(2deg); max-width: 460px; margin: 0 0 0 auto; width: 100%; }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; }
.phero__photo .caption-chip { left: 12px; bottom: 12px; }
.phero .dots { position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.1) 1.3px, transparent 1.8px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse at 15% 40%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 15% 40%, #000, transparent 70%); }
.phero .glow { position: absolute; z-index: -1; width: 60vw; height: 60vw; right: -20vw; top: -26vw; background: radial-gradient(circle, rgba(52,210,123,.2), transparent 62%); }
.phero__horse { position: absolute; z-index: -1; left: -5vw; bottom: -10vw; width: min(44vw, 560px); opacity: .05; filter: grayscale(1) brightness(3); pointer-events: none; }
@media (max-width: 900px) {
  .phero__grid { grid-template-columns: 1fr; }
  .phero__photo { margin: 8px auto 0; max-width: 380px; transform: rotate(1.5deg); }
}

/* ---------- big motto band ---------- */
.motto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.motto__item { padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px); background: var(--navy-800); color: #fff; position: relative; }
.motto__item:nth-child(even) { background: var(--navy-700); }
.motto__item b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(4rem, 8vw, 7rem); line-height: .8; color: var(--green-bright); }
.motto__item span { display: block; font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1rem, 1.5vw, 1.25rem); margin-top: 14px; }
@media (max-width: 640px) { .motto { grid-template-columns: 1fr 1fr; } }

/* ---------- perks (detailed package benefits) ---------- */
.pkg-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.pkg-big { border-radius: 24px; padding: clamp(26px, 3.2vw, 40px); position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--header-h) + 20px); }
.pkg-big--blue { background: var(--navy-800); color: #fff; }
.pkg-big--green { background: var(--green-600); color: #fff; }
.pkg-big__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.pkg-big__name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: .95; }
.pkg-big__price { font-family: var(--f-jersey); font-size: clamp(3rem, 5vw, 4.4rem); line-height: .9; }
.pkg-big__price sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; }
.pkg-big .pkg__flag { top: 20px; }
.perks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 0; flex: 1; align-content: start; }
.perks li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); }
.perks li:first-child { border-top: 0; padding-top: 4px; }
.perks .perk-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.pkg-big--blue .perks .perk-ico { background: var(--green-600); }
.pkg-big--green .perks .perk-ico { background: var(--navy-800); }
.perks .perk-ico .ico { width: 21px; height: 21px; color: #fff; }
.perks h4 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.08rem; margin: 2px 0 3px; line-height: 1.15; }
.perks p { margin: 0; font-size: .98rem; line-height: 1.45; }
.pkg-big--blue .perks p { color: var(--silver); }
.pkg-big--green .perks p { color: #e1f5e9; }
.pkg-big--green .btn { --bg: #fff; --fg: var(--green-700); --bd: #fff; box-shadow: none; }
.pkg-big--green .btn:hover { --bg: var(--navy-800); --fg: #fff; --bd: var(--navy-800); }
.pkg-big--green .btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.6); }
.pkg-big .btn-row .btn { flex: 1 1 200px; }
.alacarte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.ala { background: #fff; border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; box-shadow: 0 18px 40px -30px rgba(11,34,64,.6); border: 1px solid rgba(11,34,64,.07); scroll-margin-top: calc(var(--header-h) + 20px); }
.ala__price { font-family: var(--f-jersey); font-size: clamp(2.6rem, 3.6vw, 3.2rem); line-height: .9; color: var(--navy-800); min-width: 3.2ch; }
.ala__price sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; }
.ala h3 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; line-height: 1.1; margin-bottom: 8px; }
.ala p { color: var(--ink-soft); margin: 0 0 16px; }
@media (max-width: 900px) { .pkg-detail, .alacarte { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ala { grid-template-columns: 1fr; } }

/* ---------- where-to-see-us ---------- */
.where { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.where .card { padding: 24px 22px; }
.where .card h3 { font-size: 1.2rem; }

/* ---------- join band ---------- */
.join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .join { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.lost { min-height: 70vh; display: grid; align-items: center; }
.lost__flag { font-family: var(--f-jersey); font-size: clamp(6rem, 16vw, 12rem); line-height: .8; color: var(--green-bright); }

/* ---------- give page: printable QR sign ---------- */
.print-sign { display: none; }
@media print {
  @page { size: letter portrait; margin: .5in; }
  body[data-page="give"] main > * { display: none !important; }
  body[data-page="give"] main > .print-sign { display: block !important; }
  .print-sign { text-align: center; color: #0b2240; font-family: var(--f-body); }
  .print-sign img.mark { width: 1.6in; height: auto; margin: 0 auto .15in; }
  .print-sign .print-title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 54pt; line-height: .95; margin: 0 0 .1in; }
  .print-sign .print-title span { color: #037835; }
  .print-sign img.qr { width: 4.6in; height: 4.6in; margin: .15in auto; image-rendering: pixelated; }
  .print-sign p { font-size: 16pt; margin: .04in 0; }
  .print-sign .handle { font-family: ui-monospace, Consolas, monospace; font-size: 14pt; }
  .print-sign .stripe { height: 14px; margin: .2in auto 0; width: 70%; background: linear-gradient(#037835 0 6px, #fff 6px 8px, #037835 8px 11px, transparent 11px); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ================= review round 1 (2026-09-21) ================= */
/* focus ring: bright green on dark grounds, navy + white halo on light ones */
.site-header :focus-visible, .mobile-menu :focus-visible, .on-navy :focus-visible, .phero :focus-visible, .hero :focus-visible,
.event :focus-visible, .site-footer :focus-visible, .actionbar :focus-visible, .pkg-big--blue :focus-visible, .pkg--blue :focus-visible { outline-color: var(--green-bright); box-shadow: 0 0 0 6px var(--navy-900); }
.cta-band :focus-visible, .pkg-big--green :focus-visible, .pkg--green :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--navy-900); }
.on-navy .venmo-card :focus-visible, .on-navy .form-card :focus-visible, .on-navy .wall__tile :focus-visible { outline-color: var(--navy-800); box-shadow: 0 0 0 6px #fff; }

/* contrast */
.phero .hl { color: var(--green-bright); }
.pkg-big--blue .pkg__tag { color: var(--green-bright); }
.form-card .fine, .on-navy .form-card .fine { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

/* keyboard focus never hides behind the phone action bar */
@media (max-width: 1080px) { html { scroll-padding-bottom: 96px; } }

/* motion: pause control + ticker pauses on hover */
.ticker:hover .ticker__track { animation-play-state: paused; }
.motion-off .ticker__track, .motion-off .seal__ring { animation-play-state: paused; }
.motion-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(8,26,51,.72); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 11px; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; cursor: pointer; }
.motion-btn:hover { background: var(--navy-900); }
.motion-btn .ico { width: 14px; height: 14px; }
.hero__motion { position: absolute; left: 0; bottom: -18%; z-index: 4; }

/* home hero: the video tile sits over the empty track, not over the stunt's bases */
.hero__clip { left: auto; right: -5%; bottom: -12%; width: 36%; transform: rotate(4deg); }
.seal { right: auto; left: 0; top: -5%; }
@media (max-width: 900px) and (min-width: 761px) { .hero__clip { width: 40%; right: -3%; } .seal { left: -2%; right: auto; width: 96px; } }
@media (max-width: 640px) { .seal { left: 0; right: auto; top: -6%; } .hero__motion { bottom: -16%; } }

/* home hero: Cardinals line */
.hero__event { margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; font-size: .98rem; line-height: 1.3; max-width: 100%; }
.hero__event:hover { background: rgba(255,255,255,.12); }
.hero__event b { background: #c8102e; color: #fff; border-radius: 999px; padding: 5px 10px; font-family: var(--f-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; white-space: nowrap; }
.hero__event span { color: var(--silver); }
.hero__event strong { color: #fff; font-weight: 600; }
.hero__event .ico { color: var(--green-bright); flex: none; }

/* home packages: Blue, Green, then the two a-la-carte options stacked */
.packages--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .95fr); }
.pkg-stack { display: grid; gap: 18px; align-content: stretch; }
.pkg--mini { padding: 20px 22px; }
.pkg--mini .pkg__price { font-size: clamp(2.2rem, 3vw, 2.6rem); margin-top: 6px; }
.pkg--mini .pkg__name { margin-bottom: 10px; }
.pkg--mini ul { padding-top: 12px; margin-bottom: 16px; }
.pkg li.pkg__plus { display: block; font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--green-bright); }
.pkg li.pkg__plus::before { display: none; }
@media (max-width: 1080px) { .packages--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pkg-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .packages--home, .pkg-stack { grid-template-columns: 1fr; } }

/* sponsor: package cards end after their perks */
.pkg-detail { align-items: start; }
.pkg-big__next { font-size: .95rem; margin: 12px 0 0; opacity: .9; }

/* sponsor: how-it-works as a track */
.steps--track { gap: 0 26px; position: relative; }
.steps--track::after { content: ""; position: absolute; top: 31px; left: 32px; right: 12%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--green-600), var(--navy-600)); z-index: 0; }
.steps--track .step { background: transparent; box-shadow: none; border: 0; padding: 0; position: relative; z-index: 1; }
.steps--track .step::before { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-size: 1.9rem; margin-bottom: 18px; box-shadow: 0 0 0 6px var(--paper); }
.steps--track .step:last-child::before { background: var(--green-600); }
@media (max-width: 1080px) { .steps--track { gap: 28px 26px; } .steps--track::after { display: none; } }

/* compare note only where it helps */
@media (min-width: 761px) { .swipe-note { display: none; } }

/* split section heads: link sits on the paragraph's last line */
.section-head--split > div > :last-child, .section-head--split > .lede { margin-bottom: 0; }
.section-head--split .textlink { margin-bottom: .35em; }

/* adjacent light sections don't double their padding */
.section:not(.section--navy):not(.section--deep):not(.event):not(.section--green) + .section:not(.section--navy):not(.section--deep):not(.event):not(.section--green):not(.slant-top) { padding-top: clamp(40px, 5vw, 72px); }

/* home Cardinals band: video on top, stadium photo overlapping below */
.event__media { display: block; position: relative; max-width: 470px; padding-bottom: 18%; }
.event__media figure:first-child { width: 74%; aspect-ratio: 3 / 4; transform: rotate(-2deg); }
.event__media figure:last-child { position: absolute; right: 0; bottom: 0; width: 64%; aspect-ratio: 5 / 4; transform: rotate(3deg); }
@media (max-width: 900px) { .event__media { margin: 0 auto; width: 100%; } }

/* squad: frames that crop the sky out of portrait group shots */
.phero__photo--square { aspect-ratio: 1 / 1; max-width: 500px; }
.framed--landscape { aspect-ratio: 5 / 4 !important; }

/* give: ways-to-help grid with a featured Cardinals card */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ways .card { display: flex; flex-direction: column; }
.card__cta { margin-top: auto !important; padding-top: 8px; }
.card--feature { padding: 0; overflow: hidden; background: var(--navy-800); color: #fff; border: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.card--feature .card__media { position: relative; min-height: 220px; background: var(--navy-900); }
.card--feature .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--feature .card__body { padding: 26px 24px; display: flex; flex-direction: column; }
.card--feature .card__body p { color: var(--silver); }
.card--feature h3 { color: #fff; }
.card--feature .textlink { color: var(--green-bright); }
.card--feature .date-chip { align-self: flex-start; background: #c8102e; color: #fff; border-radius: 999px; padding: 4px 10px; font-family: var(--f-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; margin-bottom: 12px; }
@media (min-width: 901px) { .card--feature { grid-column: span 2; } }
@media (max-width: 520px) { .card--feature { grid-template-columns: 1fr; } .card--feature .card__media { min-height: 200px; } }

/* give: full-bleed photo hero */
.phero--bg { background: var(--navy-900); }
.phero--bg .phero__bg img { object-position: 50% 40%; }
.phero--bg .phero__bg::after { background: linear-gradient(90deg, rgba(8,26,51,.97) 0%, rgba(8,26,51,.9) 38%, rgba(8,26,51,.35) 72%, rgba(8,26,51,.15) 100%); }
.phero--bg .phero__inner { max-width: 640px; margin-left: 0; padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(88px, 11vw, 150px); }
.phero--bg .phero__chip { position: absolute; right: var(--pad); bottom: 24px; left: auto; }
@media (max-width: 760px) {
  .phero--bg .phero__bg::after { background: linear-gradient(180deg, rgba(8,26,51,.25) 0%, rgba(8,26,51,.55) 30%, rgba(8,26,51,.96) 52%, rgba(8,26,51,1) 100%); }
  .phero--bg .phero__inner { padding-top: 250px; }
  .phero--bg .phero__bg img { object-position: 50% 30%; height: 330px; }
  .phero--bg .phero__chip { display: none; }
}

/* sponsor form: errors + fallback */
.form-error { color: #b42318; font-weight: 600; font-size: .95rem; margin: 12px 0 0; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.field .req { color: #b42318; }
.form-status { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--paper-2); color: var(--ink); }
.form-status p { margin: 0 0 12px; font-size: .96rem; color: var(--ink-soft); }
.form-status .btn-row { gap: 10px; }

/* home venmo card reassurance */
.venmo-card__note { font-size: .88rem; color: var(--ink-soft); margin: 0 0 14px; }

/* phone action bar: two or three buttons */
@media (max-width: 1080px) {
  .actionbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .actionbar .btn { padding: 0 8px; font-size: .95rem; letter-spacing: .05em; }
  .actionbar .btn--tickets { --bg: #c8102e; --bd: #c8102e; box-shadow: none; }
}

/* print: every page prints legibly; /give prints only the QR sign */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .phero, .hero, .event, .section--navy, .section--deep, .cta-band, .pkg-big, .pkg--blue, .pkg--green, .card--feature { background: #fff !important; color: #0b2240 !important; }
  body:not([data-page="give"]) main * { color: #0b2240 !important; text-shadow: none !important; }
  .phero__horse, .hero__horse, .dots, .glow, .seal, .hero__clip, .hero__motion, video, .ticker-wrap, .wall, .mosaic, .gallery, .phero__bg, .btn, .caption-chip, .form-card, .pkg__flag { display: none !important; }
  .slant-top, .slant-bottom { clip-path: none !important; margin-top: 0 !important; }
  .section { padding: 24px 0 !important; }
  .print-sign img.mark { width: 1.3in !important; }
  .print-sign img.qr { width: 4.3in !important; height: 4.3in !important; }
}


/* ================= review round 2 (phones + tablets) ================= */
/* M1: the menu is a sibling of the header now; give it the full screen height */
@media (max-width: 1080px) { .mobile-menu { top: var(--header-h); height: calc(100dvh - var(--header-h)); } }
/* M2: the Blue ribbon becomes a pill above the name, so it can never cover the price */
.pkg-big .pkg__flag { position: static; transform: none; align-self: flex-start; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; display: inline-block; }
/* M3: comparison table on phones: row names stay put while you swipe */
@media (max-width: 640px) {
  .compare { min-width: 600px; }
  .compare thead th:first-child { width: 112px; }
  .compare th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--paper-2); }
  .compare thead th:first-child { background: var(--paper); }
  .compare th, .compare td { padding: 12px 12px; }
}
/* M8: comfortable thumb targets */
.site-footer ul { gap: 0; }
.site-footer li { align-items: center; }
.site-footer li a { display: inline-block; padding: 10px 0; }
.copy-btn { min-height: 44px; padding: 0 16px; }
.hero__social a, .crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
.textlink { min-height: 44px; }
.btn--sm { min-height: 44px; }
/* home packages: cards end at their own height */
.packages--home { align-items: start; }
/* motion toggle sits in the hero's social row */
.hero__social { align-items: center; }
.hero__social .motion-btn { margin-left: auto; }
@media (max-width: 760px) { .hero__social .motion-btn { margin-left: 0; } }

/* album: last tile sends people to Instagram */
.gallery__more { aspect-ratio: 4 / 5; border-radius: 16px; background: var(--navy-800); color: #fff; text-decoration: none; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 18px; transition: background-color .2s ease; }
.gallery__more:hover { background: var(--green-600); }
.gallery__more .ico { width: 40px; height: 40px; color: var(--green-bright); }
.gallery__more:hover .ico { color: #fff; }
.gallery__more b { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; }
.gallery__more span { font-family: var(--f-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: var(--silver); }


/* ================= review round 3 ================= */
/* T1: form fields show a real focus ring */
.form-card .field input:focus-visible, .form-card .field select:focus-visible, .form-card .field textarea:focus-visible,
.on-navy .form-card .field input:focus-visible, .on-navy .form-card .field select:focus-visible, .on-navy .form-card .field textarea:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(3,120,53,.28); }
.form-card .form-error { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #fdecea; }
/* T3 / M1: the album goes two-up below tablet width */
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* V1 / M4: links inside sentences stay inline (the 44px minimum is only for stand-alone links) */
.tl__body p .textlink, .where .card p .textlink, .lede .textlink, .fine .textlink, .faq .textlink { display: inline; min-height: 0; }
.lede a:not(.btn):not(.textlink) { color: var(--green-600); font-weight: 600; text-underline-offset: 3px; }
.on-navy .lede a:not(.btn):not(.textlink) { color: var(--green-bright); }
/* T8 / M7: remaining small targets */
.site-footer li a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.brand { min-height: 44px; }
.motion-btn { min-height: 44px; padding: 0 14px; }
/* V2 / M2 / T9: ways-to-help grid with explicit columns */
.ways .card--feature { display: grid; }
.card--feature .card__media img { object-position: 50% 30%; }
@media (min-width: 1300px) { .ways { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ways:has(> [data-event][hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1299px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ways .card--feature { grid-column: 1 / -1; } }
@media (min-width: 561px) and (max-width: 760px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ways .card--feature { grid-column: 1 / -1; } .ways > .card:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ways { grid-template-columns: 1fr; } .ways .card--feature { grid-template-columns: 1fr; } }
@media (min-width: 901px) { .where { grid-template-columns: repeat(4, minmax(0, 1fr)); } .where:has(> [data-event][hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 900px) { .where { grid-template-columns: repeat(2, minmax(0, 1fr)); } .where:has(> [data-event][hidden]) > .card:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .where { grid-template-columns: 1fr; } }
/* T10: when the Cardinals band hides, its neighbours don't double their padding */
.event[hidden] + .section:not(.section--navy):not(.section--deep):not(.slant-top) { padding-top: clamp(40px, 5vw, 72px); }
/* V5: the steps line ends at the last circle */
.steps--track::after { right: calc((100% - 78px) / 4 - 32px); }
/* V6: the Blue pill sits beside its tag so both card headers match */
.pkg-big .pkg__flag { margin: 0 0 0 10px; padding: 3px 10px; vertical-align: 2px; font-size: .68rem; }
/* V8: the video tag never wraps */
.clip-tag { text-wrap: balance; line-height: 1.25; }
@media (max-width: 1400px) { .clip-tag { font-size: .72rem; } }
/* V10 / M9: a real plus in the FAQ circles */
.faq summary::after { font-family: var(--f-body); font-weight: 700; font-size: 1.3rem; line-height: 1; }
/* V11: the sponsor wall always fills its rows */
@media (min-width: 1081px) { .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1080px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* M3: the comparison table fits from 641px up */
@media (min-width: 641px) and (max-width: 900px) { .compare { min-width: 0; } .compare th, .compare td { padding: 12px 10px; } }
/* M10: the Green card's shadow no longer smudges the $250 card */
.alacarte { position: relative; z-index: 1; }
/* T5: sponsor page prints readably */
@media print {
  .compare-wrap { overflow: visible !important; box-shadow: none !important; }
  .compare { min-width: 0 !important; }
  .compare th, .compare td { padding: 8px 10px !important; }
  .compare thead th, .card__icon, .perk-ico { background: #fff !important; }
  .cta-band { display: none !important; }
}

/* OMG Marketing credit: same treatment as the SiteLaunch client footers (CHIdrate, Top Tier):
   a rule, the logo centered, one line of small text under it. */
.footer-agency { border-top: 1px solid rgba(255,255,255,.14); margin-top: 4px; padding: 16px 0 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.footer-agency__link { display: inline-flex; min-height: 0; align-items: center; opacity: .75; transition: opacity .15s ease; }
.footer-agency__link:hover, .footer-agency__link:focus-visible { opacity: 1; }
.footer-agency__link img { height: 22px; width: auto; display: block; }
.footer-agency p { margin: 0; font-size: .78rem; color: rgba(255,255,255,.62); }

/* Two teams, two cards — the third card in this row was the head coach, who now has her own
   section with both coaches (added 2026-09-23 when the club named Mallorie Cramer as game day coach). */
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* THE COACHES. A photo, a name, which team they run, and the address families write to. The second
   portrait is a placeholder until the club sends it — an empty frame says "coming", a missing card
   would say this team has no coach. */
.coaches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.coach { background: #fff; border-radius: var(--radius); padding: 22px; display: flex; gap: 20px; align-items: flex-start;
  box-shadow: 0 1px 0 rgba(11,34,64,.06), 0 18px 40px -30px rgba(11,34,64,.5); }
.coach__photo { margin: 0; flex: 0 0 132px; width: 132px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--navy-800); }
.coach__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach__photo--pending { display: grid; place-items: center; text-align: center; padding: 10px;
  background: repeating-linear-gradient(135deg, rgba(11,34,64,.05) 0 10px, rgba(11,34,64,.09) 10px 20px); }
.coach__photo--pending span { font: 700 .72rem/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: rgba(11,34,64,.55); }
.coach__body h3 { font-family: var(--f-label); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: .02em; margin: 0 0 2px; }
.coach__role { font: 700 .78rem/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--green-600, #1f7a4d); margin: 0 0 10px; }
.coach__body p { margin: 0 0 10px; }
.coach__body p:last-child { margin: 0; }
@media (max-width: 760px) {
  .cards--two, .coaches { grid-template-columns: 1fr; }
  .coach { flex-direction: column; }
  .coach__photo { flex: 0 0 auto; width: 100%; max-width: 220px; }
}

/* The flyer the club was handed by Panera, shown as itself: it is the thing a cashier recognises,
   and people save it to their phone. Tapping opens the full-size copy. */
.paneranight__flyer { margin: 0; }
.paneranight__flyer a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg, 0 18px 40px -24px rgba(11,34,64,.55)); }
.paneranight__flyer img { display: block; width: 100%; height: auto; }
.paneranight__flyer figcaption { margin-top: 10px; font-size: .85rem; color: rgba(11,34,64,.6); text-align: center; }

/* PANERA NIGHT — a dated fundraiser band. The code is the thing a visitor has to carry to the till,
   so it is set as a ticket rather than buried in a sentence. Added 2026-09-23. */
.paneranight { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: center; }
.paneranight__code { border: 2px dashed rgba(11,34,64,.25); border-radius: var(--radius); padding: 26px 20px; text-align: center; background: var(--paper, #fff); }
.paneranight__code span { display: block; font: 700 .72rem/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(11,34,64,.55); }
.paneranight__code b { display: block; font-family: var(--f-label); font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .04em; color: var(--green-600, #037835); margin: 6px 0 4px; }
.paneranight__code small { display: block; font: 700 .8rem/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: rgba(11,34,64,.7); }
@media (max-width: 760px) {
  .paneranight { grid-template-columns: 1fr; }
  /* A portrait flyer at full phone width is a screen and a half of scrolling before the page carries
     on, so it sits smaller and centred; tapping still opens it full size. */
  .paneranight__flyer a { max-width: 300px; margin: 0 auto; }
}

/* The countdown was written for the navy Cardinals band, where silver-on-navy reads. On a white
   band (Panera night) it was near-invisible grey with a white number. On paper it takes the page's
   own ink and the brand green for the number. */
.section--white .countdown, .section:not(.on-navy) .countdown { color: rgba(11,34,64,.6); }
.section--white .countdown b, .section:not(.on-navy) .countdown b { color: var(--green-600, #037835); }

/* THE SQUAD HERO: the competition squad big, the game day squad inset over it — the home hero's
   arrangement, on the page about the two teams. Ian asked for it 2026-09-23. The stack is what the
   inset is positioned against, so the small picture cannot drift off the big one. */
.phero__stack { position: relative; max-width: 460px; margin-left: auto; padding-bottom: 42px; }
.phero__photo--tall { aspect-ratio: 3 / 4; max-width: 100%; margin: 0; }
.phero__inset {
  position: absolute; left: -6%; bottom: 0; width: 44%; aspect-ratio: 3 / 4; margin: 0;
  border-radius: 18px; overflow: hidden; transform: rotate(-4deg);
  box-shadow: var(--shadow-lg); border: 5px solid var(--green-600); background: var(--navy-900);
}
.phero__inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .phero__stack { margin-inline: auto; padding-bottom: 34px; }
  .phero__inset { width: 40%; left: -2%; }
}
/* The inset sits bottom-LEFT, which is exactly where this frame's caption chip lives, so the caption
   moves to the right of the picture rather than hiding under a photograph. */
.phero__photo--tall .caption-chip { left: auto; right: 12px; }

/* ── THE SQUAD HERO, SECOND PASS (Ian, 2026-09-23: "on desktop there's a lot of empty space, it
   doesn't feel right. and it could be better on mobile as well") ──────────────────────────────────
   Measured at 1440 before this: the text column stopped at x=720 and the photograph began at x=880,
   so 160px of navy ran down the middle of the band, and the picture — the whole point of a page
   about the squad — was 460px wide inside a 1240px track. The columns now split evenly, the gap is
   roughly halved, and the picture takes the room that frees up. */
@media (min-width: 901px) {
  .phero__grid:has(.phero__stack) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 3.4vw, 48px);
  }
  .phero__grid:has(.phero__stack) .lede { max-width: 46ch; }
  .phero__stack { max-width: 560px; }
  /* The small frame reaches into the gap between the columns, which ties the two halves together
     instead of leaving a channel of empty navy between them. */
  .phero__inset { left: -14%; width: 46%; }
}

/* ON A PHONE the 3:4 frame was 430px tall before the inset even started, so the squad's faces were
   small and the page ran long. A 4:5 frame is shorter, the faces are bigger, and the small frame
   sits INSIDE the picture (it used to hang off the left edge and get clipped by the screen). */
@media (max-width: 900px) {
  .phero__grid:has(.phero__stack) { gap: 22px; }
  .phero__photo--tall { aspect-ratio: 4 / 5; }
  .phero__stack { padding-bottom: 0; max-width: 420px; }
  .phero__inset { left: 10px; bottom: 10px; width: 38%; transform: rotate(-3deg); }
}
/* On a phone the two hero buttons stacked full width and pushed the squad photograph most of a
   screen down the page. Side by side they cost one row instead of two. */
@media (max-width: 560px) {
  .phero__grid:has(.phero__stack) .btn-row { display: flex; flex-wrap: nowrap; gap: 10px; }
  .phero__grid:has(.phero__stack) .btn-row .btn { flex: 1 1 0; min-width: 0; padding-inline: 14px; font-size: .92rem; justify-content: center; }
}
/* On a phone the pinned Sponsor/Venmo/Tickets bar sits across the bottom of the screen, which is
   exactly where the small frame was — so on the first look it was half hidden. On phones it moves to
   the TOP RIGHT of the picture: clear of the bar, clear of the caption at bottom right, and over the
   sky rather than over the squad's faces (top left is where the girls on the end are standing). */
@media (max-width: 900px) {
  .phero__inset { top: 10px; bottom: auto; left: auto; right: 10px; transform: rotate(3deg); }
}

/* ── BOTH TEAMS, SEEN (Ian, 2026-09-24: "I need to favor comp squad but not to the point where they
   have such a small picture I can't even see them… these are high school girls. I want them to feel
   included while still featuring the comp team") ─────────────────────────────────────────────────
   The game day frame grows from 46% to 58% of the stack on a desktop and from 38% to 52% on a phone,
   and their photograph is now cropped to the group (gameday-squad) instead of being the same wide
   shot with half a sky in it — at this size the faces read. The competition squad still leads: its
   frame is the big one, it is the first thing the eye lands on, and it carries the page's caption. */
@media (min-width: 901px) {
  /* THE BIG FRAME LEANS TOWARDS THE WORDS, THE SMALL ONE SITS OUT ON THE RIGHT. Ian, 2026-09-24:
     "feel like it makes more sense for the pictures to swap sides so that the large one is on the
     left leaning in helping to fill that dead space." The competition frame is pulled back into the
     channel between the two columns — the empty navy he flagged — and the game day frame moves to
     the outside edge, where it overlaps sky rather than the squad. */
  .phero__stack { max-width: 520px; }
  /* The caption goes back to the LEFT of the big frame now that the small one sits bottom right. */
  .phero__photo--tall .caption-chip { left: 12px; right: auto; }
  .phero__inset { left: auto; right: -12%; width: 54%; bottom: -2%; }
  .phero__stack { padding-bottom: 54px; }
}
/* On a phone an overlap big enough to SEE the game day squad is an overlap that covers the
   competition squad, so on phones the two frames stand side by side instead: competition wider and
   taller, game day beside it, neither hidden, and the pinned bar at the bottom covers neither. */
@media (max-width: 900px) {
  .phero__stack { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 10px; max-width: 100%; padding-bottom: 0; }
  .phero__photo--tall { aspect-ratio: 3 / 4; }
  .phero__inset { position: static; width: auto; aspect-ratio: 3 / 4; transform: rotate(2deg); margin-bottom: 14px; }
  .phero__photo--tall .caption-chip { right: 8px; bottom: 8px; font-size: .68rem; }
}
.phero__inset .clip-tag { font-size: .74rem; }

/* THE LEAN IS FOR WIDE SCREENS ONLY. Pulling the frame 56px left of its column is what fills the
   channel of empty navy at 1440 — but below about 1200 the same pull puts the photograph on top of
   the paragraph (measured at 1024: it covered the end of "Brianna Martinez"). Narrower desktops keep
   the frame inside its own column, with a smaller pair. */
@media (min-width: 1200px) {
  .phero__stack { margin-left: -56px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .phero__stack { max-width: 430px; }
  .phero__inset { right: -8%; width: 50%; }
}

/* THE LEAN, THE WAY ROUND HE ASKED FOR. Ian, 2026-09-24: "big picture should be leaning to the left
   and small to the right." The big competition frame tilts anti-clockwise (leaning left, towards the
   headline) and the small game day frame tilts clockwise, so the pair opens outwards instead of both
   tipping the same way. Applies at every width, phones included, where the two stand side by side. */
.phero__photo--tall { transform: rotate(-2.4deg); }
.phero__inset { transform: rotate(2.6deg); }
@media (max-width: 900px) {
  .phero__photo--tall { transform: rotate(-2deg); }
  .phero__inset { transform: rotate(2.4deg); }
}

/* second sponsor (Desert Financial, Oct 2026): sponsors lead the wall, and the open spots backfill
   whatever gap a two-wide sponsor tile leaves, so every row stays full at 6, 3 and 2 columns */
.wall { grid-auto-flow: row dense; }
.wall__tile--sponsor .wall__logo { width: min(100%, 170px); height: auto; }
.wall__who { display: block; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
.wall__who b { display: block; font-family: var(--f-label); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--navy-800); }
/* the open spots stretch to the sponsor tiles' height, so a row never looks ragged */
.wall__tile--open { aspect-ratio: auto; min-height: 128px; }
.wall__who strong { font-weight: 700; }

/* Mini Mavs clinic (Oct 2026): two dates side by side, wrapping on narrow screens */
.datestack { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 24px; }
.datestack .datebox { margin: 0; }

/* third sponsor (Cruise Planners, Oct 2026): three sponsor tiles fill a desktop row and the one open
   spot runs the full width under them; tablets go two-up so the open spot squares the grid off;
   phones stack. Revisit the open spot's span when a fourth sponsor lands. */
.wall__tile--sponsor .wall__logo--wide { width: min(100%, 230px); }
@media (min-width: 1081px) {
  .wall__tile--open { grid-column: 1 / -1; min-height: 0; padding: 16px 18px; }
  .wall__tile--open > div { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .wall__tile--open .wall__plus { margin: 0; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__tile--sponsor { grid-column: span 1; }
}
@media (max-width: 640px) { .wall__tile--open { grid-column: 1 / -1; } }

/* Zelle sits under the Venmo card on Give */
.pay-stack { display: grid; gap: 30px; }
/* the bold name line always ends its own line, so the specialty or licence number starts the next */
.wall__who strong { display: block; }
@media (max-width: 640px) { .datestack .datebox { width: 100%; } }

/* each payment card leads with its brand's own logo, so Venmo and Zelle read apart at a glance
   (Ian, 2026-10-05). The codes carry the matching app icon in the middle. */
.pay-logo { display: block; height: 24px; width: auto; margin: 0 0 14px; }
.pay-logo--zelle { height: 35px; margin-bottom: 10px; }
@media (max-width: 640px) { .pay-logo { margin-left: auto; margin-right: auto; } }

/* Venmo and Zelle as equals (Ian, 2026-10-05): every card carries its own buttons */
.pay-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 640px) { .pay-actions { justify-content: center; } }
#pay > #venmo { display: block; }

/* the sponsor tile whose phone number dials: the name link stretches over the whole tile */
.wall__link { color: inherit; text-decoration: none; }
.wall__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wall__link:focus-visible { outline: none; }
.wall__tile:has(.wall__link:focus-visible) { outline: 3px solid var(--green-600); outline-offset: 3px; }
.wall__tel { position: relative; z-index: 1; display: block; font-weight: 700; color: var(--navy-800); text-decoration: none; }
.wall__tel:hover { color: var(--green-600); text-decoration: underline; }

/* the printed QR sign shows both codes side by side */
@media print {
  .print-pay { display: grid; grid-template-columns: 1fr 1fr; gap: .45in; margin: .18in 0 .1in; align-items: start; }
  .print-pay .logo { display: block; height: .34in; width: auto; margin: 0 auto .1in; }
  .print-pay .logo--zelle { height: .5in; margin-bottom: 0; }
  .print-sign .print-pay img.qr { width: 3in !important; height: 3in !important; margin: .06in auto; display: block; }
  .print-pay p { font-size: 12pt; }
  .print-sign .print-pay .handle { font-size: 11pt; }
}

/* while a dated card (the yard sale) shows on Give, every row of "Every bit counts" stays full:
   wide screens put the Cardinals card on its own full-width row, tablets give it a 2x2 block */
@media (min-width: 1300px) {
  .ways:not(:has(> [data-event][hidden])) { grid-auto-flow: row dense; }
  .ways:not(:has(> [data-event][hidden])) > .card--feature { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1299px) {
  .ways:not(:has(> [data-event][hidden])) { grid-auto-flow: row dense; }
  .ways:not(:has(> [data-event][hidden])) > .card--feature { grid-column: span 2; grid-row: span 2; }
}
/* print sign: both logos sit in the same-height box, so the two codes line up */
@media print { .print-pay .logo, .print-pay .logo--zelle { height: .5in; width: 2.4in; object-fit: contain; margin: 0 auto .1in; } }

/* ---------- privacy page (plain reading column) ---------- */
.legal > * { max-width: 68ch; }
.legal h2 { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.15rem; line-height: 1.2; color: var(--navy-800); margin: 36px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 12px; }
.legal a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }
.legal .legal__date { font-size: .9rem; margin-top: 28px; }