/* ================= Kicks v2 layer ================= */
@font-face {
  font-family: "Kicks Marker"; /* = Lacquer, the brandbook face (OFL) */
  src: url(/fonts/Lacquer.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --rx-accent: #6ba81f;
  --rx-accent-ink: #4c7d10;
  --rx-dark: #0e0e0e;
}

/* ---------- chrome: menu on TOP, plain text, wide spacing, no backgrounds ---------- */
nav[data-v-577eb12e] { display: none !important; } /* bottom bar retired */
/* nav = NAKED lowercase words, wide air (owner r19 — pills rejected, the
   round-4 decision stands). The one thing that must never revert: the captured
   header is pointer-events:none and only restores auto on ITS children, so
   .v2-nav restores it itself or every link is silently dead. */
.v2-nav { display: flex; gap: clamp(2rem, 4vw, 4.2rem); margin-right: 3vw; align-items: center; pointer-events: auto; }
.v2-nav a { color: #fff; font: 600 13px/1 "DM Sans", sans-serif; letter-spacing: .05em; text-transform: lowercase; transition: opacity .15s; }
.v2-nav a:hover, .v2-nav a:focus-visible { opacity: .55; }
.v2-league-btn { display: inline-flex; align-items: center; gap: 6px; color: #fff;
  font: 600 13px/1 "DM Sans", sans-serif; letter-spacing: .05em; transition: opacity .15s; }
.v2-league-btn:hover, .v2-league-btn:focus-visible { opacity: .55; }
.header-actions { display: flex; align-items: center; gap: 26px; }
@media (max-width: 1023px) { .v2-nav { display: none; } }

/* ---------- hero ---------- */
.v2-herovideo { animation: v2-kenburns 14s ease-in-out infinite alternate; transform-origin: 60% 40%;
  opacity: 1 !important; /* poster-seam: v1's .video video sits at opacity 0 until is-playing */ }
@keyframes v2-kenburns { from { scale: 1.02; } to { scale: 1.14; } }
/* motion-rest (r17): the hero settles ONCE and then holds a composed frame —
   the endless kenburns drift reads as fake footage. Real footage (hero.mp4
   seam) will bring real motion back the newkid way. Scoped under .v2-rest so
   flipping REST in behaviors-v2.js reverts everything. */
.v2-rest .v2-herovideo { animation: v2-hero-settle 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes v2-hero-settle { from { scale: 1.06; } to { scale: 1; } }

.v2-h1 { display: block; color: #fff; text-align: left !important; font-family: "DM Sans", sans-serif; font-weight: 700;
  font-size: clamp(56px, 8.6vw, 124px) !important; line-height: .94 !important; letter-spacing: -0.025em; }
.v2-line { display: block; }
/* verb slot: ONE word visible at a time, sequential wipe (never overlaps);
   colour changes with the verb (copy222).
   top: Lacquer sits lower than DM Sans at the same size — lift the whole slot
   (word + underline together) so the verb optically centres against "WE". */
.v2-verb-slot { position: relative; top: -0.07em; display: inline-block; min-width: 5.2em; }
.v2-verb-slot[data-active="PLAY"] { color: var(--rx-accent); }
.v2-verb-slot[data-active="ORGANIZE"] { color: #fff; }
.v2-verb-slot[data-active="FILM"] { color: #b5e264; }
/* left inset stays a constant -4% through every state (only the right edge
   wipes) — at 0 the boil displacement + letter tilt clipped the first glyph's
   left edge (ORGANIZE's O rendered cut) */
.v2-verb { position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: "Kicks Marker", "DM Sans", sans-serif; font-weight: 400; letter-spacing: 0;
  font-size: .92em; transform: rotate(-1.6deg); opacity: 0; pointer-events: none; visibility: hidden;
  clip-path: inset(-10% 100% -12% -4%); }
.v2-verb:first-child { position: relative; }
/* r60: the wipe cuts with the film — out in .16 s, the new word in .3 s */
.v2-verb.is-on { opacity: 1; visibility: visible; clip-path: inset(-10% -6% -12% -4%);
  transition: clip-path .3s cubic-bezier(.2,.7,.3,1); }
.v2-verb.is-out { opacity: 1; visibility: visible; clip-path: inset(-10% -6% -12% 102%);
  transition: clip-path .16s cubic-bezier(.55,.06,.68,.19); }

.v2-verb-stroke { position: absolute; left: 0; bottom: -.12em; width: 96%; height: .14em; color: currentColor;
  stroke-dasharray: 230; stroke-dashoffset: 230; transition: width .25s cubic-bezier(.25,.46,.45,.94); }
.v2-verb-stroke.draw { animation: v2-draw .34s .06s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes v2-draw { to { stroke-dashoffset: 0; } }

/* headline never collides with the fork band: reserve room as the viewport
   narrows or shortens (the fork stacks to two rows under 768) */
@media (max-width: 1023px) { .hero__tagline[data-v-7a32b953] { bottom: 8.5rem; } }
@media (max-width: 767px) { .hero__tagline[data-v-7a32b953] { bottom: 10.5rem; } }
@media (max-height: 720px) {
  .hero__tagline[data-v-7a32b953] { bottom: 7.5rem; }
  .v2-h1 { font-size: clamp(40px, 7vw, 88px) !important; }
}

/* header rides out of the way on the way down, returns on the way up —
   fixes blend-mode legibility over photography and gives the scroll some life */
header[data-v-c172c8bb] { transition: transform .5s cubic-bezier(.25,.46,.45,.94); will-change: transform; }
header.v2-hide { transform: translateY(-130%); }

/* hero legibility: scrims instead of psychedelic blend over the photo */
.hero[data-v-7a32b953]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.55), transparent); pointer-events: none; }
.hero[data-v-7a32b953]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.hero__tagline[data-v-7a32b953] { z-index: 2; }

/* mascot colour follows the verb (same effect, same moment) + sticker outline.
   PARKED per owner note 2026-08-27 — hidden until a better treatment exists;
   the verb clock runs independently. Delete the display rule to bring it back. */
.v2-mascot { display: none; }
.v2-mascot { position: absolute; right: 5vw; bottom: 15vh; width: clamp(150px, 17vw, 250px); height: clamp(180px, 21vw, 300px);
  color: var(--rx-accent); z-index: 2; transition: color .3s cubic-bezier(.25,.46,.45,.94); }
.v2-mascot[data-active="PLAY"] { color: var(--rx-accent); }
.v2-mascot[data-active="ORGANIZE"] { color: #fff; }
.v2-mascot[data-active="FILM"] { color: #b5e264; }
.v2-pose { position: absolute; bottom: 0; left: 50%; translate: -50% 0; height: 74%; width: auto; opacity: 0;
  transition: opacity .13s linear;
  filter: drop-shadow(0 0 1.2px rgba(255,255,255,.9)) drop-shadow(0 0 1.2px rgba(255,255,255,.9)) drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.v2-mascot[data-active="ORGANIZE"] .v2-pose { filter: drop-shadow(0 0 1.2px rgba(14,14,14,.8)) drop-shadow(0 0 1.2px rgba(14,14,14,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.v2-pose.is-pose { opacity: 1; }
.v2-mascot-ball { position: absolute; left: 60%; bottom: 2%; width: 25%; color: #0e0e0e; transform-origin: 50% 100%; will-change: transform;
  filter: drop-shadow(0 0 1.2px rgba(255,255,255,.95)) drop-shadow(0 0 1.2px rgba(255,255,255,.9)); }
.v2-ball-shadow { position: absolute; left: 60%; bottom: 0; width: 25%; height: 7px; border-radius: 50%;
  background: rgba(0,0,0,.4); filter: blur(1.5px); will-change: transform, opacity; }
@media (max-width: 767px) { .v2-mascot { right: 5vw; bottom: 24vh; width: 104px; height: 130px; } }

.v2-fork { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between;
  padding: 0 28.5px 24px; pointer-events: none; }
.hero[data-v-7a32b953] { position: relative; }
.v2-fork-link { pointer-events: auto; color: #fff; font: 600 13px/1 "DM Sans", sans-serif; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 6px; transition: color .15s, border-color .15s; }
.v2-fork-link { display: inline-flex; align-items: center; gap: .55em; }
.v2-arrow { height: 1.5em; width: auto; filter: brightness(0) invert(1); }
.v2-fork-link:hover .v2-arrow { filter: none; } /* the drawn arrow is brand-green already */
.v2-kicker { height: 24px; width: auto; margin-right: 10px; filter: brightness(0) invert(1); vertical-align: middle; }
.header-logo { display: inline-flex !important; align-items: center; }
#about .section-header .label { font-size: 20px; letter-spacing: .03em; }
.v2-fork-link:hover { color: var(--rx-accent); border-color: var(--rx-accent); }
@media (max-width: 767px) {
  .v2-fork { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 16px; }
}

/* ---------- marker + dark register ---------- */
.v2-marker { font-family: "Kicks Marker", sans-serif; text-transform: lowercase; letter-spacing: .01em; }
.v2-marker-acc { font-family: "Kicks Marker", sans-serif; color: var(--rx-accent); font-weight: 400; }
.v2-dark { background: var(--rx-dark) !important; color: #fff; }
.v2-dark .title, .v2-dark h2, .v2-dark p, .v2-dark .label { color: #fff; }
.v2-dark .label { color: var(--rx-accent); }
section.mission.v2-dark { padding-top: 100px; padding-bottom: 100px; margin: 0; }
section.mission.v2-dark .illustration { color: var(--rx-accent); }

/* ---------- shared block scaffolding ---------- */
.v2-block { padding: 100px 28.5px; }
.v2-block-head { max-width: 800px; margin: 0 auto 50px; text-align: center; }
.v2-block-head .label { display: block; font: 600 12px/1.33 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.v2-panel { border: 1.5px solid currentColor; border-radius: 6px; overflow: hidden; }
.v2-panel-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1.5px solid currentColor; font: 500 12px/1 "DM Sans", monospace; letter-spacing: .04em; }
.v2-panel-bar i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.v2-panel-bar span { margin-left: 8px; opacity: .7; }

/* retired games passes (round-2 dashboard, games2 chalkboard) deleted 2026-08-28 —
   their .v2-dots .d pop animation outranked the inline transforms the interactive
   pitch writes and collapsed every dot onto the SVG origin. Only v2-pop survives. */
@keyframes v2-pop { to { opacity: 1; transform: scale(1); } }
/* ---------- games, third pass: quiet and instant ---------- */
.v2-games3 { color: #000; }
.v2-g3 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; max-width: 1180px; margin: 0 auto; align-items: start; }
@media (max-width: 1023px) { .v2-g3 { grid-template-columns: 1fr; } }
.v2-g3-pitchcard { border: 2px solid #0e0e0e; border-radius: 6px; overflow: hidden; }
.v2-g3-pitch { display: block; width: 100%;
  background: linear-gradient(rgba(8,44,19,.85), rgba(8,44,19,.85)), url(/brand/grass.webp) center/cover; }
/* volleyball is indoors: the grass goes, the surface flattens */
.v2-g3-pitch.is-volley { background: #0e2113; }
.v2-g3-pitch .pl * { opacity: .92; }
.v2-dots .solo { fill: #f2f6ee; }
.v2-dots .trio { fill: var(--rx-accent); }
.v2-dots .duo { fill: #f2f6ee; stroke: var(--rx-accent); stroke-width: 6; }
.v2-dots .opp { fill: none; stroke: #f2f6ee; stroke-width: 3.5; opacity: .8; }
.v2-legend { display: flex; gap: 26px; flex-wrap: wrap; padding: 14px 16px; background: #fff; border-top: 2px solid #0e0e0e;
  font: 500 13.5px/1 "DM Sans", sans-serif; }
.v2-legend span { display: inline-flex; align-items: center; gap: 8px; }
.v2-legend .sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.v2-legend .sw.trio { background: var(--rx-accent); }
.v2-legend .sw.duo { background: #fff; border: 3.5px solid var(--rx-accent); box-sizing: border-box; }
.v2-legend .sw.solo { background: #fff; border: 1.5px solid #0e0e0e; box-sizing: border-box; }
.v2-legend .sw.opp { background: none; border: 2px dashed #8a8a8a; box-sizing: border-box; }
/* the facts line, re-dealt as chips whenever a session is chosen */
.v2-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.v2-chip { display: inline-flex; align-items: baseline; border: 1.5px solid #d9d9d9; border-radius: 40px;
  padding: 8px 14px; font: 600 13px/1 "DM Sans", sans-serif; color: #1a1a1a; background: #fff; white-space: nowrap;
  animation: v2-chip-in .38s cubic-bezier(.25,.46,.45,.94) backwards; animation-delay: calc(.055s * var(--i, 0)); }
@keyframes v2-chip-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .v2-chip { animation: none; } }
.v2-steps b { font-family: "DM Sans", sans-serif; font-size: 17px; }
.v2-gamescol { display: flex; flex-direction: column; gap: 26px; }
.v2-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.v2-steps li { font: 500 17px/1.4 "DM Sans", sans-serif; border-bottom: 1px solid #e2e2e2; padding-bottom: 12px; }
.v2-steps b { color: var(--rx-accent-ink); font-weight: 700; margin-right: 10px; }
.v2-note { font: 400 14px/1.5 "DM Sans", sans-serif; color: #444; }

/* registration widget — the group chat */
.v2-chat { border: 1.5px solid #0e0e0e; border-radius: 10px; overflow: hidden; background: #fff; }
.v2-chat-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0e0e0e; color: #fff; font: 600 12px/1 "DM Sans", sans-serif; letter-spacing: .03em; }
@keyframes v2-pulse { 50% { opacity: .35; } }
.v2-msg { margin: 14px; padding: 12px 14px; background: #f2f2f2; border-radius: 2px 12px 12px 12px; font: 400 14.5px/1.45 "DM Sans", sans-serif; width: fit-content; max-width: 85%; }
.v2-msg b { font-weight: 700; margin-right: .4em; }
.v2-count { display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; font: 700 15px/1 "DM Sans", sans-serif; }
.v2-count-n { color: var(--rx-accent-ink); font-size: 20px; }
.v2-avatars { display: inline-flex; margin-left: auto; }
.v2-avatars svg { width: 22px; height: 22px; color: #0e0e0e; margin-left: -4px; }
.v2-join { display: flex; gap: 0; border-top: 1.5px solid #0e0e0e; }
.v2-join input { flex: 1; border: 0; padding: 13px 14px; font: 500 14px/1 "DM Sans", sans-serif; outline: none; background: #fff; color: #000; }
.v2-join button { border: 0; background: var(--rx-accent); color: #0e0e0e; font: 700 14px/1 "DM Sans", sans-serif; padding: 0 20px; cursor: pointer; transition: background .15s; }
.v2-join button:hover { background: #7fc32b; }
.v2-seam { margin: 8px 14px 12px; font: 400 11.5px/1.4 "DM Sans", sans-serif; color: #8a8a8a; }
.v2-chat.is-joined .v2-join { display: none; }
.v2-chat.is-joined .v2-seam::before { content: "✓ noted locally · "; color: var(--rx-accent-ink); font-weight: 700; }

/* ---------- prefooter close facts: stamped chips, not a prose aside ---------- */
.v2-close-facts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.v2-close-facts i { font: 700 13px/1 "DM Sans", sans-serif; font-style: normal; letter-spacing: .02em;
  border: 1.5px solid currentColor; border-radius: 999px; padding: 10px 16px; }
.v2-close-facts i:last-child { background: var(--rx-accent); border-color: var(--rx-accent); color: #0e0e0e; }

/* ---------- footer: the real brand lockup, inverted to white ---------- */
.v2-footer-logo { display: block; width: 100%; height: auto; margin: -16% 0 -9%;
  filter: brightness(0) invert(1); pointer-events: none; }

/* ---------- page-leave wipe v3 (r25): TRIM-PATH paint-out. A thin lime
   stroke leads like the pen, four fat ink marker passes draw across in a
   painter's zigzag (paths alternate direction), a fill catches any gap,
   the kicker STAMPS on held frames (props keep cels; the strokes glide).
   The next page's painted-K intro is the enter half. */
.v2-wipe { position: fixed; inset: 0; z-index: 3000; pointer-events: none; visibility: hidden; }
.v2-leave .v2-wipe { visibility: visible; }
.v2-wipe-svg { position: absolute; inset: -2%; width: 104%; height: 104%; }
.v2-wipe-svg path { fill: none; stroke-linecap: round; }
.v2-wipe-svg .wl { stroke: var(--rx-accent); stroke-width: 7; }
.v2-wipe-svg .ws { stroke: #0e0e0e; stroke-width: 34; }
.v2-leave .v2-wipe-svg path { animation: v2-wipe-draw var(--wd, .27s) cubic-bezier(.3,0,.25,1) var(--wdel, 0s) forwards; }
@keyframes v2-wipe-draw { to { stroke-dashoffset: 0; } }
.v2-wipe-fill { position: absolute; inset: 0; background: #0e0e0e; opacity: 0; }
.v2-leave .v2-wipe-fill { animation: v2-wipe-fillin .12s linear .5s forwards; }
@keyframes v2-wipe-fillin { to { opacity: 1; } }
.v2-wipe-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(96px, 10vw, 150px); opacity: 0; z-index: 2; }
.v2-wipe-mark img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.v2-leave .v2-wipe-mark { animation: v2-wipe-stamp .26s steps(3, end) .4s forwards; }
@keyframes v2-wipe-stamp {
  0% { opacity: 0; transform: scale(1.55) rotate(-7deg); }
  34% { opacity: 1; transform: scale(.93) rotate(2.5deg); }
  67% { opacity: 1; transform: scale(1.06) rotate(-1.2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); } }

/* ---------- legal pages + league page + 404 (r18) ---------- */
.v2-legalgrid { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; }
.v2-legalgrid > div { display: grid; grid-template-columns: 240px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid #e3e3e0; }
.v2-legalgrid > div:last-child { border-bottom: 1px solid #e3e3e0; }
.v2-legalgrid dt { font: 700 12.5px/1.5 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #67695f; }
.v2-legalgrid dd { margin: 0; font: 500 15.5px/1.5 "DM Sans", sans-serif; }
@media (max-width: 767px) { .v2-legalgrid > div { grid-template-columns: 1fr; gap: 4px; } }
.v2-legalprose { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; font: 500 16px/1.6 "DM Sans", sans-serif; }
.v2-leaguepage .v2-close-facts { justify-content: flex-start; margin: 4px 0; }
.v2-leaguepage .v2-close-facts i { border-color: rgba(242,246,238,.65); }
/* ---------- about: the tactics field (r19) ----------
   Sticky stage, scroll-driven camera pans spot to spot across a painted
   pitch; the run path draws in dashes as you travel; each move's card
   stamps on when its spot goes live. ≤1023 + reduced-motion fall back to
   the stacked list. */
.v2-fieldwrap { position: relative; height: 780vh; background: #0c1a0e; }
/* NOT position:sticky — captured ancestors carry overflow rules that kill it.
   The camera rAF loop pins the stage with a translate instead. */
.v2-fieldstage { position: absolute; left: 0; right: 0; top: 0; height: 100vh; overflow: hidden; will-change: transform; }
/* soft camera-frame vignette: keeps the eye centre-field */
.v2-fieldstage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 105% at 50% 46%, transparent 58%, rgba(5,12,6,.55) 100%); }
.v2-fieldworld { position: absolute; left: 0; top: 0; width: 2400px; height: 1500px;
  transform-origin: 0 0; will-change: transform;
  /* mowed stripes + a soft centre light, not a photo tile (tile seams read as slabs) */
  background: radial-gradient(58% 52% at 50% 48%, rgba(242,246,238,.05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(242,246,238,.028) 0 150px, transparent 150px 300px), #0e1d10; }
.v2-fieldlines { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-fieldchalk { filter: drop-shadow(0 0 5px rgba(242,246,238,.22)); }
.v2-runpath { stroke: var(--rx-accent); stroke-width: 6; fill: none;
  stroke-linecap: round; stroke-dasharray: 22 17;
  filter: drop-shadow(0 0 7px rgba(107,168,31,.55)); }
.v2-runball { fill: #f2f6ee; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
/* focus: the station you're at speaks, the rest sit back */
.v2-spot { position: absolute; width: 0; height: 0; opacity: .34;
  transition: opacity .6s cubic-bezier(.22,1,.36,1); }
.v2-spot.is-live { opacity: 1; }
.v2-spot-num { position: absolute; left: -30px; top: -215px; font-size: 120px; line-height: 1;
  color: rgba(242,246,238,.9); rotate: -3deg; white-space: nowrap;
  text-shadow: 0 0 14px rgba(242,246,238,.18); }
.v2-spot-board { position: absolute; left: -340px; top: -80px; width: 265px; display: block;
  color: #f2f6ee; rotate: -2deg; opacity: .95; }
.v2-spot:nth-child(2n) .v2-spot-board { left: 70px; top: 40px; rotate: 2deg; }
.v2-spot-board .v2-mini { width: 100%; height: auto; }
/* the fallback list draws these on scroll-in — on the field they're already painted */
.v2-spot-board .v2-mini rect { stroke-dasharray: none; stroke-dashoffset: 0; }
.v2-spot-board .v2-mini circle, .v2-spot-board .v2-mini path, .v2-spot-board .v2-mini polygon { opacity: 1; }
.v2-spot-card { position: absolute; left: 56px; top: -70px; width: 340px;
  background: #f6f5f0; color: #131313; padding: 24px 24px 26px;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 94% 100%, 0 100%);
  box-shadow: 0 22px 44px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(28px) scale(.965) rotate(2.2deg);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.v2-spot-card::before { content: ""; position: absolute; top: -12px; left: 50%; translate: -50% 0;
  width: 84px; height: 24px; background: rgba(242,246,238,.4); transform: rotate(-2deg); }
.v2-spot.is-live .v2-spot-card { opacity: 1; transform: translateY(0) scale(1) rotate(.8deg);
  transition-delay: .12s; }
.v2-spot:nth-child(2n) .v2-spot-card { left: auto; right: 56px; }
.v2-spot-title { margin: 0 0 8px; font: 700 19px/1.2 "DM Sans", sans-serif; }
.v2-spot-card p { margin: 0; font: 500 14.5px/1.55 "DM Sans", sans-serif; }
.v2-field-close { position: absolute; left: 1200px; top: 1305px; translate: -50% 0;
  font-size: 92px; color: var(--rx-accent); white-space: nowrap; margin: 0;
  rotate: -2deg; opacity: 0; transform: translateY(24px) scale(.97);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 10px rgba(107,168,31,.35)); }
.v2-fieldworld.is-done .v2-field-close { opacity: 1; transform: translateY(0) scale(1); }
.v2-field-hint { position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
  font: 600 11.5px/1 "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(242,246,238,.55); margin: 0; transition: opacity .3s; }
.v2-fieldstage.is-going .v2-field-hint { opacity: 0; }
.v2-moves-fallback { display: none; }
@media (max-width: 1023px) {
  .v2-fieldwrap { display: none; }
  .v2-moves-fallback { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-fieldwrap { display: none; }
  .v2-moves-fallback { display: block; }
}

/* ---------- the draw layer (r25): trim-path where it points at something.
   (CTA rings removed r28 — parked; captured button hovers restored.) */

/* margin doodles: chalk scribbles that draw once when their section scrolls in */
.v2-doodle-host { position: relative; }
.v2-doodle { position: absolute; width: clamp(70px, 8.5vw, 125px); height: auto; pointer-events: none;
  z-index: 1; color: #22251e; opacity: .5; }
.v2-dark .v2-doodle, .v2-doodle-host.v2-dark > .v2-doodle { color: var(--rx-accent); opacity: .55; }
.v2-doodle path { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.3,0,.2,1) var(--dd, 0s); }
.v2-doodle.v2-dood-on path { stroke-dashoffset: 0 !important; }
.v2-doodle-cta { width: clamp(64px, 6.5vw, 96px); }
@media (max-width: 1023px) { .v2-doodle { display: none; } }

/* contact form: the focus underline draws itself */
.v2-cform input, .v2-cform textarea {
  background-image: linear-gradient(var(--rx-accent), var(--rx-accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2.5px;
  transition: background-size .35s cubic-bezier(.3,0,.2,1); }
.v2-cform input:focus, .v2-cform textarea:focus { background-size: 100% 2.5px; }

/* ---------- WHY KICKS: the four straight men to the joke stats (r29) ---------- */

/* ---------- footer sitemap columns (r29, owner-draft structure) ---------- */
.v2-footmap { display: flex; gap: clamp(40px, 8vw, 120px); padding: 56px max(2.4rem, 2vw) 8px; }
.v2-footmap > div { display: flex; flex-direction: column; gap: 9px; }
.v2-footmap b { font: 700 11.5px/1 "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8b8f85; margin-bottom: 4px; }
.v2-footmap a { color: #f2f6ee; font: 600 14px/1 "DM Sans", sans-serif; text-transform: lowercase; opacity: .92; transition: opacity .15s, color .15s; }
.v2-footmap a:hover, .v2-footmap a:focus-visible { color: var(--rx-accent); opacity: 1; }
@media (max-width: 600px) { .v2-footmap { flex-wrap: wrap; gap: 28px 44px; } }

/* the social-proof numbers speak in the marker face (r27) */
section.stats .ticker-number, section.stats .ticker-number__ghost {
  font-family: "Kicks Marker", "DM Sans", sans-serif; font-weight: 400; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) {
  .v2-doodle path { stroke-dashoffset: 0 !important; transition: none !important; }
}

.v2-404 { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.v2-404-num { font-size: clamp(90px, 14vw, 200px); color: var(--rx-accent); margin: 0; line-height: 1; }
.v2-404-sub { color: #cfe3c2; margin: 2px 0 18px; }
.v2-msg--me { margin-left: auto; margin-right: 14px; background: #e3f2cf; border-radius: 12px 2px 12px 12px; animation: v2-pop .35s cubic-bezier(.34,1.56,.64,1); }

/* ---------- lockers v4: the locker-room bank ----------
   One dark cabinet holding three tall metal doors (real gym proportions,
   capped width — no more ballooning at wide viewports). Hardware reads as
   hardware: riveted number plate, embossed louvres, hinge knuckles, latch
   handle. The punk is the personalization layer per door. A bench in front,
   because it's a locker room. Door colour matches the dive interior, so the
   camera cut lands dark-to-dark. */
.v2-lockerbank { max-width: 1000px; margin: 26px auto 40px; grid-column: 1 / -1; width: 100%; }
.v2-lockers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  background: #0d1109; padding: 13px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(242,246,238,.07), inset 0 2px 0 rgba(242,246,238,.05),
    0 40px 60px -38px rgba(10,14,6,.65); }
.v2-locker { position: relative; aspect-ratio: 10 / 15.2; perspective: 1400px; }
.v2-locker-door { position: absolute; inset: 0; z-index: 2; width: 100%; cursor: pointer; font: inherit;
  color: #f2f6ee; border: 1px solid #080b05; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #232b1b, #181e11 58%, #141a0e);
  box-shadow: inset 0 1px 0 rgba(242,246,238,.11), inset -2px -3px 0 rgba(0,0,0,.38);
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 20px); padding: 20px 0 24px;
  transform-origin: left center; transition: transform .22s steps(3, end); backface-visibility: hidden; }
.v2-locker-door::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(242,246,238,.09); border-radius: 2px; pointer-events: none; }
/* the latch-side sliver of interior light that leaks when the door stirs */
.v2-locker-door::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(-90deg, rgba(143,212,54,.32), rgba(143,212,54,.06) 55%, transparent);
  transition: width .5s cubic-bezier(.25,.46,.45,.94); pointer-events: none; }
.v2-locker:hover .v2-locker-door::after { width: 26%; }
.v2-locker.is-open .v2-locker-door::after { width: 70%; }
.v2-locker-door:focus-visible, .v2-seat:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: 3px; }
.v2-plate { display: inline-flex; align-items: center; gap: 8px; background: #f2f6ee; color: #10140c;
  border-radius: 2px; padding: 5px 11px; box-shadow: 0 1px 0 rgba(0,0,0,.55); }
.v2-plate::before, .v2-plate::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #99a08a; }
.v2-locker-num { font: 900 13px/1 "DM Sans", sans-serif; letter-spacing: .08em; }
.v2-vents { display: flex; flex-direction: column; gap: 8px; width: 46%; }
.v2-vents b { height: 7px; border-radius: 2px; background: #090c06; box-shadow: 0 1px 0 rgba(242,246,238,.08); }
.v2-vents.lo { margin-top: auto; }
.v2-tape { position: relative; margin-top: clamp(8px, 3.4vh, 34px); background: var(--rx-accent); color: #10130b;
  font-family: "Kicks Marker", sans-serif; font-size: clamp(24px, 2.5vw, 34px); text-transform: lowercase; line-height: 1;
  padding: 9px 22px 12px; transform: rotate(-2deg); box-shadow: 0 3px 10px rgba(0,0,0,.45);
  clip-path: polygon(1.5% 0, 100% 2%, 98.5% 100%, 0 96%); }
.v2-locker:nth-child(2) .v2-tape { transform: rotate(1.6deg); }
.v2-locker:nth-child(3) .v2-tape { transform: rotate(-1.1deg); }
.v2-hinge { position: absolute; left: -2px; width: 7px; height: 30px; border-radius: 3px;
  background: linear-gradient(90deg, #050703, #20261a); box-shadow: inset 0 1px 0 rgba(242,246,238,.16); }
.v2-hinge.t { top: 12%; } .v2-hinge.b { bottom: 12%; }
.v2-handle { position: absolute; right: 13px; top: 50%; translate: 0 -50%; width: 10px; height: 52px;
  border: 2.5px solid #dfe5d6; border-radius: 6px; background: rgba(0,0,0,.35);
  box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.v2-handle::before { content: ""; position: absolute; inset: auto -5px -9px -5px; height: 4px; background: #090c06; border-radius: 2px; }
/* the personalization layer — every door dressed differently */
.v2-sticker { width: clamp(50px, 5.4vw, 80px); height: auto; color: #f2f6ee; opacity: .92;
  transform: rotate(7deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.v2-scrap { background: #f2f6ee; color: #10130b; font-family: "Kicks Marker", sans-serif;
  font-size: clamp(14px, 1.25vw, 17px); line-height: 1; padding: 8px 13px 10px; transform: rotate(-4deg);
  clip-path: polygon(0 6%, 98% 0, 100% 92%, 3% 100%); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.v2-photopeek { position: absolute; top: -7px; right: 26%; width: clamp(42px, 4vw, 58px); height: 34px;
  background: #f2f6ee; transform: rotate(-5deg); box-shadow: 0 3px 6px rgba(0,0,0,.45); }
.v2-photopeek::before { content: ""; position: absolute; inset: 4px 4px 8px; background: #2a331f; }
.v2-tally { width: clamp(44px, 4.4vw, 62px); height: auto; color: #f2f6ee; opacity: .8; transform: rotate(-2deg); }
/* resting open pose = the reduced-motion / animation-off fallback;
   the stop-motion keyframes below override it while they run */
.v2-locker.is-open .v2-locker-door { transform: rotateY(-98deg); }
.v2-locker:nth-child(2).is-open .v2-locker-door { transform: rotateY(98deg); }
.v2-locker-inside { position: absolute; inset: 0; border: 1px solid #080b05; border-radius: 3px; background: #0b0b0b; color: #fff;
  display: flex; flex-direction: column; padding: 14px; gap: 12px; }
.v2-locker-inside > * { opacity: 0; transform: translateY(8px); transition: opacity .35s .25s, transform .35s .25s; }
.v2-locker.is-open .v2-locker-inside > * { opacity: 1; transform: none; }
.v2-locker-inside img { width: 100%; flex: 1; object-fit: cover; min-height: 42%; opacity: .9; }
.v2-locker-inside p { font: 400 13.5px/1.45 "DM Sans", sans-serif; margin: 0; }
.v2-locker-cta { color: var(--rx-accent); font: 700 13px/1 "DM Sans", sans-serif; border-bottom: 1px solid var(--rx-accent); width: fit-content; padding-bottom: 4px; }
/* the bench in front + its legs */
.v2-lockerbench { display: block; position: relative; margin: 28px auto 0; width: 62%; height: 15px;
  background: linear-gradient(180deg, #171c10, #0d1109); border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(242,246,238,.10), 0 22px 18px -14px rgba(10,14,6,.35); }
.v2-lockerbench::before, .v2-lockerbench::after { content: ""; position: absolute; top: 15px; width: 12px; height: 28px;
  background: linear-gradient(90deg, #0d1109, #171c10); border-radius: 0 0 2px 2px; }
.v2-lockerbench::before { left: 9%; } .v2-lockerbench::after { right: 9%; }
@media (max-width: 1023px) { .v2-lockerbank { max-width: 94%; } .v2-tape { font-size: clamp(19px, 2.6vw, 26px); padding: 8px 16px 10px; } }
@media (max-width: 767px) {
  /* r44: three doors side by side, as a locker bank stands (stacked doors read as three cupboards) */
  .v2-lockers { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
  .v2-locker { aspect-ratio: 10 / 17; }
  .v2-locker-door { gap: 7px; padding: 12px 0 12px; }
  .v2-plate { padding: 3px 6px; gap: 5px; } .v2-locker-num { font-size: 11px; }
  .v2-vents { width: 56%; gap: 5px; } .v2-vents b { height: 5px; }
  .v2-tape { margin-top: 4px; font-size: clamp(13px, 4vw, 17px); padding: 6px 8px 7px; }
  .v2-sticker { width: 34px; } .v2-tally { width: 30px; }
  .v2-scrap { font-size: 11px; padding: 5px 7px 6px; }
  .v2-photopeek { width: 30px; height: 22px; right: 16%; }
  .v2-handle { right: 6px; width: 6px; height: 30px; border-width: 2px; }
  .v2-hinge { width: 5px; height: 18px; }
  .v2-lockerbench { margin-top: 16px; width: 74%; height: 11px; }
}

/* ---------- league broadcast ---------- */
.v2-league { color: #fff; }
.v2-cast { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; max-width: 1180px; margin: 0 auto; align-items: center; }
@media (max-width: 1023px) { .v2-cast { grid-template-columns: 1fr; } }
.v2-castpanel { color: #fff; background: #151515; padding-bottom: 16px; }
.v2-lowerthird { margin: 22px 16px 0; transform: translateX(-110%); }
.in-view .v2-lowerthird { animation: v2-slidein .6s .2s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes v2-slidein { to { transform: translateX(0); } }
.v2-lowerthird b { display: block; background: var(--rx-accent); color: #0e0e0e; font: 700 20px/1 "DM Sans", sans-serif; padding: 10px 14px; width: fit-content; }
.v2-lowerthird span { display: block; background: #fff; color: #0e0e0e; font: 600 12.5px/1 "DM Sans", sans-serif; padding: 8px 14px; width: fit-content; }
.v2-fixture { margin: 18px 16px 0; font: 600 13px/1 "DM Sans", monospace; letter-spacing: .05em; opacity: 0; }
.in-view .v2-fixture { animation: v2-fadein .4s .7s forwards; }
@keyframes v2-fadein { to { opacity: 1; } }
.v2-live { background: #e02c2c; color: #fff; border-radius: 3px; padding: 3px 7px; margin-right: 8px; animation: v2-pulse 1.4s infinite; }
.v2-season { display: flex; align-items: center; gap: 10px; margin: 20px 16px 0; font: 700 12px/1 "DM Sans", sans-serif; }
.v2-seasonbar { flex: 1; height: 6px; border: 1.5px solid #fff; border-radius: 6px; overflow: hidden; }
.v2-seasonbar i { display: block; height: 100%; width: 0; background: var(--rx-accent); }
.in-view .v2-seasonbar i { animation: v2-grow 1.1s .8s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes v2-grow { to { width: 38%; } }
.v2-slots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 20px 16px 0; }
.v2-slots i { aspect-ratio: 1; border: 1.5px solid #fff; border-radius: 3px; opacity: 0; transform: translateY(6px); }
.v2-slots i.on { background: var(--rx-accent); border-color: var(--rx-accent); }
.in-view .v2-slots i { animation: v2-pop .35s forwards; }
.in-view .v2-slots i:nth-child(n) { animation-delay: calc(1s + .06s * var(--k, 0)); }
.v2-slots-note { margin: 10px 16px 0; font: 500 12px/1 "DM Sans", sans-serif; opacity: .7; }
.v2-castcopy p { font: 400 16px/1.55 "DM Sans", sans-serif; margin: 0 0 18px; }
.v2-btn-acc { display: inline-flex; align-items: center; height: 46px; padding: 0 34px; border-radius: 40px;
  background: var(--rx-accent) !important; border: 1px solid var(--rx-accent) !important; color: #0e0e0e !important;
  font: 600 14px/1 "DM Sans", sans-serif; letter-spacing: .01em; transition: background .15s, border-color .15s; }
.v2-btn-acc:hover { background: #7fc32b !important; border-color: #7fc32b !important; }

/* ---------- testimonials: the stands (seat grid) ---------- */
.v2-bench { color: #000; padding-bottom: 70px; }
.v2-bench-sub { max-width: 560px; margin: 14px auto 0; font: 400 15px/1.55 "DM Sans", sans-serif; color: #444; }
/* the stands are a raked tribune now: rows shrink toward the back and offset
   half a seat, like real terraces. Hover folds the seat pan DOWN on a stepped
   cel and the chair drops 2px — the chair itself reacts, not a floating card. */
.v2-stand { display: flex; flex-direction: column; gap: 4px; align-items: center; max-width: 860px; margin: 44px auto 0; }
.v2-standrow { display: flex; gap: 10px; justify-content: center;
  transform: translateX(var(--rx, 0)) scale(var(--rs, 1)); transform-origin: 50% 100%; }
.v2-seatc { position: relative; width: 52px; background: none; border: 0; padding: 0; cursor: pointer; color: #b9beb0;
  opacity: 0; transform: translateY(10px); }
.in-view .v2-seatc { animation: v2-pop .4s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(.045s * var(--i)); }
/* hover moves the glyph, not the button — the entrance animation's fill owns
   the button's transform, so effects live on the children */
.v2-seat-glyph { display: block; width: 100%; height: auto; transition: translate .15s steps(2, end); }
.v2-seat-glyph .spn { transform-origin: 22px 26px; transition: transform .15s steps(2, end); }
.v2-seatc:hover .v2-seat-glyph, .v2-seatc:focus-visible .v2-seat-glyph { translate: 0 2px; }
.v2-seatc:hover .spn, .v2-seatc:focus-visible .spn { transform: scaleY(2.1); }
.v2-seatc.filled { color: var(--rx-accent-ink); }
.v2-seatc.filled .sback { fill: var(--rx-accent); stroke: var(--rx-accent-ink); }
.v2-seatc.filled .spn { fill: var(--rx-accent); }
.v2-seatc.soon { color: #0e0e0e; }
.v2-seatc.soon .sback { fill: #fff; }
.v2-soon { position: absolute; inset: 14% 0 auto; font-size: 11px; text-align: center; color: #0e0e0e; }
.v2-seatc:hover::after { content: attr(data-note); position: absolute; bottom: 112%; left: 50%; translate: -50% 0;
  background: #0e0e0e; color: #fff; font-family: "Kicks Marker", sans-serif; font-size: 13px; white-space: nowrap;
  padding: 8px 12px; border-radius: 9px 9px 9px 2px; z-index: 3; pointer-events: none; }
.v2-seatc:not(.filled):not(.soon):hover::after { display: none; }
@media (max-width: 767px) {
  .v2-stand { max-width: 92vw; }
  .v2-standrow { flex-wrap: wrap; gap: 7px; max-width: 92vw; transform: none; }
  .v2-seatc { width: 44px; }
}
.v2-stand-note { text-align: center; margin-top: 26px; font: 400 12.5px/1 "DM Sans", sans-serif; color: #8a8a8a; }

/* ---------- clients: hover fills the row, no cursor follower ---------- */
.partners__logo { display: none !important; }
.partners__line { position: relative; transition: background .18s, padding .18s;
  border-bottom: 1px solid #e6e6e6; padding-top: 6px; padding-bottom: 6px; }
.partners__line:first-child { border-top: 1px solid #e6e6e6; }
.partners__line:hover { background: var(--rx-accent); padding-left: 22px; }
.partners__line:hover .partners__name { font-family: "Kicks Marker", sans-serif; letter-spacing: .01em; }
/* rows read as a list, not a poem: give them a measure and left alignment.
   The captured list is a centred flex column (align-items:center shrink-wraps
   every line) — stretch the items so the hairlines span the measure. */
.partners .partners__list { max-width: 720px; margin-left: auto; margin-right: auto;
  align-items: stretch !important; text-align: left !important; }

/* (the donor's statistics block is cut in r43; its rules went with it) */

.v2-squadline b { color: var(--rx-accent); font-weight: 700; }

/* ---------- footer repairs ---------- */
/* the newsletter input was invisible on black: no field, no placeholder contrast */
footer form input, .footer__form input {
  color: #fff; background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.45);
  padding: 10px 2px; min-width: min(320px, 60vw); font: 500 15px/1.2 "DM Sans", sans-serif; outline: none;
  transition: border-color .2s; }
footer form input::placeholder, .footer__form input::placeholder { color: rgba(255,255,255,.5); }
footer form input:focus-visible, .footer__form input:focus-visible { border-bottom-color: var(--rx-accent); }
.footer__submit { color: var(--rx-accent) !important; letter-spacing: .04em; }
/* the giant wordmark spans the width instead of stranding a black void beside it */
footer .footer__logo svg { width: 100%; height: auto; display: block; }
footer .footer__logo { margin-top: 40px; }

/* fork anchor offset under fixed header */
#games-how, #league, #testimonials, #programs, #about { scroll-margin-top: 40px; }

/* ---------- subpages ---------- */
.v2-main { display: block; }
.v2-pagehead { padding: 150px 28.5px 70px; text-align: center; }
.v2-pagehead .label { display: block; font: 600 13px/1 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--rx-accent); margin-bottom: 16px; }
.v2-pagetitle { font-size: clamp(44px, 6vw, 84px) !important; line-height: 1 !important; letter-spacing: -0.02em; }
.v2-pagesub { max-width: 620px; margin: 22px auto 0; font: 400 16px/1.6 "DM Sans", sans-serif; color: #ddd; }

/* about: the moves */
.v2-moves { padding-top: 20px; }
.v2-move { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center;
  max-width: 900px; margin: 0 auto 70px; opacity: 0; transform: translateY(18px); }
.v2-move.in-view { animation: v2-pop .55s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-move:nth-child(even) { grid-template-columns: 1fr 300px; }
.v2-move:nth-child(even) .v2-move-board { order: 2; }
@media (max-width: 767px) { .v2-move, .v2-move:nth-child(even) { grid-template-columns: 1fr; gap: 20px; } .v2-move:nth-child(even) .v2-move-board { order: 0; } }
.v2-move-board { color: #fff; background: #0b3317; border-color: #0b3317; }
.v2-mini { display: block; width: 100%; color: #f2f6ee;
  background: linear-gradient(rgba(8,44,19,.86), rgba(8,44,19,.86)), url(/brand/grass.webp) center/cover; }
.v2-move-num { font-size: 30px; color: var(--rx-accent); display: block; margin-bottom: 6px; }
.v2-move-title { font: 700 26px/1.1 "DM Sans", sans-serif; margin: 0 0 12px; text-transform: lowercase; }
.v2-move-copy p { font: 400 15.5px/1.6 "DM Sans", sans-serif; margin: 0; color: #e6e6e6; }
.v2-moves-close { text-align: center; font-size: 30px; color: var(--rx-accent); margin: 20px 0 10px; }

/* about: the squad (r43: no tiles; the three stand on one touchline, names as
   marker captions, copy left-aligned; the first column is a touch wider) */
.v2-squadrow { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 0 44px; max-width: 980px; margin: 0 auto; position: relative; align-items: start; }
.v2-squadrow::before { content: ""; position: absolute; left: -8px; right: -8px; top: 150px; height: 2px; background: #0e0e0e; }
.v2-mate { border: 0; padding: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.v2-mate-fig { display: block; height: 150px; width: auto; color: #0e0e0e; margin: 0 0 22px 6px; }
.v2-mate b { font-size: 30px; line-height: 1; }
.v2-mate-role { font: 600 12px/1 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #777; }
.v2-mate p { font: 400 15px/1.55 "DM Sans", sans-serif; margin: 6px 0 0; color: #333; max-width: 30ch; }
@media (max-width: 767px) {
  .v2-squadrow { grid-template-columns: 1fr; gap: 40px; }
  .v2-squadrow::before { display: none; }
  .v2-mate-fig { height: 104px; margin-bottom: 12px; border-bottom: 2px solid #0e0e0e; padding-bottom: 0; }
}

/* about: cta */
.v2-aboutcta { text-align: center; }
.v2-aboutcta .title { color: #fff; margin-bottom: 34px; }
.v2-cta-row { display: flex; gap: 30px; justify-content: center; align-items: center; flex-wrap: wrap; }
.v2-fork-dark { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 6px; font: 600 14px/1 "DM Sans", sans-serif; display: inline-flex; align-items: center; gap: .5em; }
.v2-fork-dark:hover { color: var(--rx-accent); border-color: var(--rx-accent); }

/* testimonials page: big stands */
.v2-stand--big { max-width: 980px; }
.v2-stand--big .v2-seatc { width: 56px; }
@media (max-width: 767px) { .v2-stand--big .v2-seatc { width: 44px; } }

/* ---------- lite preloader on subpages: pure CSS, self-removing ---------- */
.v2-lite-intro { position: fixed; inset: 0; z-index: 1000; background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: v2-lite-out .45s 1.15s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes v2-lite-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .v2-lite-intro { display: none; } }

/* nav mark */
.v2-nav-mark img { height: 21px; width: auto; display: block; filter: brightness(0) invert(1); }
.v2-nav-mark { margin-right: .4rem; }
.v2-nav-mark:hover { opacity: .6; }

/* zoomed media clips inside its frame */
.fullscreen { overflow: hidden; }
.fullscreen img { will-change: transform; }
.v2-ph { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.v2-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- games page ---------- */
.v2-h3 { font: 700 22px/1.1 "DM Sans", sans-serif; margin: 0 0 16px; }
.v2-sessions { border: 1.5px solid #0e0e0e; border-radius: 8px; overflow: hidden; }
.v2-sess { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr 1.4fr .6fr; gap: 10px; align-items: center;
  padding: 13px 16px; font: 400 14px/1.3 "DM Sans", sans-serif; border-bottom: 1px solid #e4e4e4; }
.v2-sess:last-child { border-bottom: 0; }
.v2-sess b { font-weight: 700; }
.v2-sess i { font-style: normal; font-weight: 700; color: var(--rx-accent-ink); text-align: right; }
@media (max-width: 767px) { .v2-sess { grid-template-columns: 1fr 1fr; } }
.v2-photorow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 28.5px 90px; max-width: 1180px; margin: 0 auto; }
.v2-photorow img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 767px) { .v2-photorow { grid-template-columns: 1fr; } }
.v2-inlink { color: var(--rx-accent-ink); font-weight: 700; border-bottom: 1.5px solid var(--rx-accent); padding-bottom: 2px; }

/* ---------- events page ---------- */
.v2-evgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto 30px; }
@media (max-width: 1023px) { .v2-evgrid { grid-template-columns: 1fr; } }
.v2-ev { border: 2px solid #0e0e0e; padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.v2-ev--soon { border-style: dashed; color: #666; }
.v2-ev-tag { font: 600 11.5px/1 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--rx-accent-ink); }
.v2-ev h3 { font-size: 30px; margin: 0; font-weight: 400; }
.v2-ev p { font: 400 14.5px/1.55 "DM Sans", sans-serif; margin: 0; }
.v2-ev-line b { color: #0e0e0e; }
.v2-bizblock .v2-ev-line b { color: var(--rx-accent); }
.v2-bizblock .v2-cta-row { margin-top: 34px; }
.v2-bizgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 1023px) { .v2-bizgrid { grid-template-columns: 1fr; } }
.v2-biz h3 { font-size: 30px; margin: 0 0 14px; font-weight: 400; }
.v2-biz p { font: 400 15px/1.6 "DM Sans", sans-serif; margin: 0 0 14px; }
.v2-tiers { border: 1.5px solid rgba(255,255,255,.55); border-radius: 8px; margin: 6px 0 14px; }
.v2-tiers div { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.22); font: 400 15px/1 "DM Sans", sans-serif; }
.v2-tiers div:last-child { border-bottom: 0; }
.v2-tiers b { font-size: 22px; color: var(--rx-accent); }
.v2-tiers i { font-style: normal; margin-left: auto; font-weight: 700; }

/* ---------- media page ---------- */
.v2-worklist { max-width: 860px; margin: 0 auto 34px; border-top: 2px solid #0e0e0e; }
.v2-work { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 4px; border-bottom: 1px solid #dedede; }
.v2-work b { font: 700 20px/1.2 "DM Sans", sans-serif; }
.v2-work span { font: 400 14px/1.3 "DM Sans", sans-serif; color: #555; }
.v2-work:hover { background: #f4f8ee; }
.v2-mediawhy { max-width: 640px; margin: 0 auto 26px; text-align: center; font: 400 15.5px/1.6 "DM Sans", sans-serif; }
.v2-mediapage .v2-cta-row { justify-content: center; }

/* ---------- contact page ---------- */
.v2-cform { display: flex; flex-direction: column; gap: 12px; }
.v2-cform input, .v2-cform textarea { border: 1.5px solid #0e0e0e; border-radius: 8px; padding: 13px 14px;
  font: 500 14.5px/1.4 "DM Sans", sans-serif; background: #fff; color: #000; outline: none; resize: vertical; }
.v2-cform input:focus-visible, .v2-cform textarea:focus-visible { border-color: var(--rx-accent-ink); }
.v2-cform-send { border: 0; background: var(--rx-accent); color: #0e0e0e; font: 700 15px/1 "DM Sans", sans-serif;
  padding: 14px 0; border-radius: 40px; cursor: pointer; }
.v2-cform-send:hover { background: #7fc32b; }
.v2-direct p { font: 400 15.5px/1.7 "DM Sans", sans-serif; margin: 0 0 10px; }
.v2-direct b { display: inline-block; min-width: 96px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }

/* ---------- preloader: original row layout, kicker draws in the word slot ---------- */
.v2-paintk { width: clamp(90px, 11vw, 150px); height: auto; }
.v2-paintk--fig { width: clamp(120px, 14vw, 190px); }
.intro__scribble svg.v2-paintk-inline { width: 3.7rem; height: auto; transform: translateY(28%); }
.pk1 { animation: v2-paint .38s .05s cubic-bezier(.45,.05,.55,.95) forwards; }
.pk2 { animation: v2-paint .38s .3s cubic-bezier(.45,.05,.55,.95) forwards; }
.pk3 { animation: v2-paint .38s .55s cubic-bezier(.45,.05,.55,.95) forwards; }
.pk4 { animation: v2-paint .38s .8s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes v2-paint { to { stroke-dashoffset: 0; } }

/* drawing effect across: about boards + the 4-3-3 draw their lines once, fast */
.v2-mini rect { stroke-dasharray: 660; stroke-dashoffset: 660; }
.v2-move.in-view .v2-mini rect { animation: v2-paint .6s .1s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-mini circle, .v2-mini path, .v2-mini polygon { opacity: 0; }
.v2-move.in-view .v2-mini circle, .v2-move.in-view .v2-mini path, .v2-move.in-view .v2-mini polygon { animation: v2-fadein .35s .5s forwards; }
.v2-g3-pitch .pl * { stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.in-view .v2-g3-pitch .pl * { animation: v2-paint .75s cubic-bezier(.25,.46,.45,.94) forwards; }
/* dots are drawn and positioned by JS now (format tabs / shuffle / selection),
   so the group fades in as a whole — per-circle animation would fight the
   inline opacity the interaction sets */
.v2-g3-pitch .v2-dots { opacity: 0; transition: opacity .45s .45s; }
.in-view .v2-g3-pitch .v2-dots { opacity: 1; }
.v2-g3-pitch .d { cursor: pointer;
  transition: transform .6s cubic-bezier(.34,1.15,.5,1), opacity .3s ease; }
.v2-g3-pitch .d:hover { opacity: 1 !important; }

/* format tabs + shuffle: the block's controls */
.v2-formats { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; background: #fff;
  border-top: 2px solid #0e0e0e; } /* the card's dividing rule moves up here */
.v2-g3-pitchcard .v2-legend { border-top: 0; padding-top: 12px; }
.v2-formats button { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  border: 1.5px solid #0e0e0e; background: none; border-radius: 40px; padding: 8px 15px;
  font: 700 13px/1 "DM Sans", sans-serif; color: #0e0e0e; transition: background .15s, color .15s; }
.v2-formats button em { font-style: normal; font-weight: 500; font-size: 11.5px; opacity: .65; }
.v2-formats button:hover { background: #f0f5e8; }
.v2-formats button[aria-selected="true"] { background: #0e0e0e; color: #fff; }
.v2-formats button[aria-selected="true"] em { opacity: .7; }
.v2-pitchcap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0; padding: 12px 16px 0; background: #fff; font: 500 13.5px/1.4 "DM Sans", sans-serif; color: #444; }
.v2-shuffle { border: 1.5px solid #0e0e0e; background: none; border-radius: 40px; padding: 8px 15px; cursor: pointer;
  font: 700 12.5px/1 "DM Sans", sans-serif; transition: background .15s; }
.v2-shuffle:hover { background: var(--rx-accent); }
.v2-formats button:focus-visible, .v2-shuffle:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: 2px; }

/* ---------- lockers, motion + interiors ---------- */
/* the rattle is shot on twos now — held frames, no tween */
.v2-locker:hover:not(.is-open):not(.is-closing) .v2-locker-door { animation: v2-rattle .34s step-end; }
.v2-locker:nth-child(2):hover:not(.is-open):not(.is-closing) .v2-locker-door { animation: v2-rattle-r .34s step-end; }
@keyframes v2-rattle { 0% { transform: rotateY(-13deg) rotate(-.4deg); } 28% { transform: rotateY(-21deg) rotate(.3deg); }
  55% { transform: rotateY(-8deg); } 80% { transform: rotateY(-15deg) rotate(-.3deg); } 100% { transform: none; } }
@keyframes v2-rattle-r { 0% { transform: rotateY(13deg) rotate(.4deg); } 28% { transform: rotateY(21deg) rotate(-.3deg); }
  55% { transform: rotateY(8deg); } 80% { transform: rotateY(15deg) rotate(.3deg); } 100% { transform: none; } }
.v2-polaroid { position: relative; flex: 1; min-height: 42%; background: #fff; padding: 8px 8px 26px; transform: rotate(-2.5deg); box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.v2-polaroid::before { content: ""; position: absolute; top: -10px; left: 50%; translate: -50% 0; width: 74px; height: 20px;
  background: rgba(242,246,238,.5); transform: rotate(3deg); }
.v2-polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }
.v2-locker-cta { display: inline-flex; align-items: center; gap: 8px; }
.v2-arrow-ink { filter: none; height: 1.3em; }

/* ---------- lockers v3: stop-motion doors + the dive ----------
   Doors are animated on held frames (step-end, tiny per-frame jitter) like
   hand-shot cels — each locker opens with its own character. Opening a door
   then DIVES the camera into the locker: a chunky 3-step zoom, old-game style,
   into a full-screen interior. Clean bones, punk motion. */

/* locker 02 hangs on the RIGHT hinge (rows of lockers mirror) */
.v2-locker:nth-child(2) .v2-locker-door { transform-origin: right center; }
.v2-locker:nth-child(2) .v2-hinge { left: auto; right: -2px; }
.v2-locker:nth-child(2) .v2-handle { right: auto; left: 13px; }
.v2-locker:nth-child(2) .v2-locker-door::after { inset: 0 auto 0 0; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(143,212,54,.32), rgba(143,212,54,.06) 55%, transparent); }

/* three doors, three tempers: 01 swings with an overshoot · 02 gets flung
   past the stop · 03 sticks, jiggles, then flies */
.v2-locker:nth-child(1).is-open .v2-locker-door { animation: v2-door1 .4s step-end forwards; }
.v2-locker:nth-child(2).is-open .v2-locker-door { animation: v2-door2 .4s step-end forwards; }
.v2-locker:nth-child(3).is-open .v2-locker-door { animation: v2-door3 .44s step-end forwards; }
@keyframes v2-door1 {
  0% { transform: rotateY(-11deg) rotate(-.4deg); }
  26% { transform: rotateY(-46deg) rotate(.5deg) translateY(-1px); }
  54% { transform: rotateY(-84deg) rotate(-.3deg); }
  78% { transform: rotateY(-113deg) rotate(.4deg) translateY(1px); }
  100% { transform: rotateY(-98deg); } }
@keyframes v2-door2 {
  0% { transform: rotateY(14deg) rotate(.5deg); }
  36% { transform: rotateY(62deg) rotate(-.5deg) translateY(1px); }
  66% { transform: rotateY(117deg) rotate(.6deg); }
  100% { transform: rotateY(98deg); } }
@keyframes v2-door3 {
  0% { transform: rotateY(-7deg); }
  18% { transform: rotateY(-13deg) rotate(-.5deg); }
  34% { transform: rotateY(-9deg) rotate(.3deg); }
  55% { transform: rotateY(-68deg) rotate(-.5deg) translateY(-1px); }
  78% { transform: rotateY(-121deg) rotate(.5deg); }
  100% { transform: rotateY(-102deg); } }

/* the slam back: two frames past the stop, then a thud through the box */
.v2-locker.is-closing .v2-locker-door { animation: v2-slam .3s step-end forwards; }
.v2-locker:nth-child(2).is-closing .v2-locker-door { animation: v2-slam-r .3s step-end forwards; }
@keyframes v2-slam { 0% { transform: rotateY(-84deg); } 45% { transform: rotateY(-30deg) rotate(.4deg); }
  72% { transform: rotateY(5deg); } 100% { transform: none; } }
@keyframes v2-slam-r { 0% { transform: rotateY(84deg); } 45% { transform: rotateY(30deg) rotate(-.4deg); }
  72% { transform: rotateY(-5deg); } 100% { transform: none; } }
.v2-locker.is-closing { animation: v2-thud .3s step-end; }
@keyframes v2-thud { 0%, 60% { transform: none; } 72% { transform: translate(1.5px, 1px) rotate(.3deg); }
  86% { transform: translate(-1px, 0); } 100% { transform: none; } }

/* ---------- the dive: full-screen locker interior ---------- */
.v2-dive { position: fixed; inset: 0; z-index: 1200; color: #fff;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px), #0b0b0b;
  transform-origin: 0 0; overflow: hidden; }
.v2-dive[hidden] { display: none; }
/* chunky 3-step zoom from the clicked locker's rect (--dx/--dy/--sx/--sy set
   by JS) — axes scale independently, the squash IS the old-game stretch */
.v2-dive.is-in { animation: v2-dive-in .38s step-end forwards; }
.v2-dive.is-out { animation: v2-dive-out .3s step-end forwards; }
@keyframes v2-dive-in {
  0% { transform: translate(var(--dx), var(--dy)) scale(var(--sx), var(--sy)); }
  30% { transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) rotate(.5deg)
      scale(calc(var(--sx) + (1 - var(--sx)) * .45), calc(var(--sy) + (1 - var(--sy)) * .45)); }
  62% { transform: translate(calc(var(--dx) * .15), calc(var(--dy) * .15)) rotate(-.3deg)
      scale(calc(var(--sx) + (1 - var(--sx)) * .86), calc(var(--sy) + (1 - var(--sy)) * .86)); }
  100% { transform: none; } }
@keyframes v2-dive-out {
  0% { transform: none; }
  30% { transform: translate(calc(var(--dx) * .15), calc(var(--dy) * .15)) rotate(.3deg)
      scale(calc(var(--sx) + (1 - var(--sx)) * .86), calc(var(--sy) + (1 - var(--sy)) * .86)); }
  64% { transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) rotate(-.4deg)
      scale(calc(var(--sx) + (1 - var(--sx)) * .45), calc(var(--sy) + (1 - var(--sy)) * .45)); }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--sx), var(--sy)); } }

/* the box you are inside: wall frame, louvre light, shelf, hook rail, floor */
.v2-dive::before { content: ""; position: absolute; inset: 16px; z-index: 1;
  border: 1.5px solid rgba(255,255,255,.12); pointer-events: none; }
.v2-dive::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 48%, transparent 52%, rgba(0,0,0,.6) 100%); }
/* daylight spilling in around the open door — one soft wedge, not bars */
.v2-dive-vents { position: absolute; top: 0; bottom: 0; left: clamp(96px, 11vw, 150px); z-index: 1;
  width: clamp(140px, 16vw, 260px); pointer-events: none;
  background: linear-gradient(90deg, rgba(196,232,140,.12), rgba(196,232,140,.035) 45%, transparent); }
.v2-dive-vents b { display: none; }
.v2-dive--r .v2-dive-vents { left: auto; right: clamp(96px, 11vw, 150px);
  background: linear-gradient(-90deg, rgba(196,232,140,.12), rgba(196,232,140,.035) 45%, transparent); }
.v2-dive-hud { position: absolute; top: 28px; left: clamp(130px, 13vw, 180px); z-index: 2; margin: 0;
  font: 600 11px/1 "DM Sans", sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.5); pointer-events: none; }
.v2-dive--r .v2-dive-hud { left: 32px; }
/* the shelf things sit on: lit front edge, falloff, drop shadow */
.v2-dive-shelf { position: absolute; left: 16px; right: 16px; top: 26%; height: 13px; z-index: 1;
  pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.05) 46%, rgba(0,0,0,.55));
  box-shadow: 0 12px 20px -9px rgba(0,0,0,.75); }
/* the hook rail things hang from */
.v2-dive-rail { position: absolute; left: 22%; right: 22%; top: calc(26% + 46px); height: 3px;
  border-radius: 2px; background: rgba(255,255,255,.16); z-index: 1; pointer-events: none; }
.v2-dive-rail b { position: absolute; top: 2px; width: 11px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3); border-top: 0; border-radius: 0 0 9px 9px; }
.v2-dive-rail b:first-child { left: 14%; } .v2-dive-rail b:last-child { left: 52%; }
.v2-dive-floor { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 8.5%; z-index: 1;
  pointer-events: none; border-top: 1.5px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }

/* the door you came through, swung at the hinge side — shallow enough that
   the slab and its number stay readable (44° collapsed it to a sliver) */
.v2-dive-door { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3;
  width: clamp(96px, 11vw, 150px); background: #101010; border-right: 1.5px solid rgba(255,255,255,.16);
  transform-origin: left center; transform: perspective(1100px) rotateY(26deg);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  box-shadow: 18px 0 44px rgba(0,0,0,.55); }
.v2-dive--r .v2-dive-door { left: auto; right: 0; border-right: 0; border-left: 1.5px solid rgba(255,255,255,.16);
  transform-origin: right center; transform: perspective(1100px) rotateY(-26deg);
  box-shadow: -18px 0 44px rgba(0,0,0,.55); }
.v2-dive-doornum { font-size: clamp(40px, 4.6vw, 76px); color: rgba(255,255,255,.85); }
.v2-dive-handle { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 8px; height: 44px;
  border: 2px solid rgba(255,255,255,.4); border-radius: 6px; }
.v2-dive--r .v2-dive-handle { right: auto; left: 12px; }

/* the program name goes HUGE across the back wall — background texture now,
   faint enough that the props read over it */
.v2-dive-name { position: absolute; left: 55%; top: 57%; z-index: 0; translate: -50% -50%;
  font-size: clamp(150px, 21vw, 330px); color: rgba(107,168,31,.11); rotate: -2deg;
  pointer-events: none; white-space: nowrap; }
/* right-hinged interiors: shift it so the word clears the door */
.v2-dive--r .v2-dive-name { left: 45%; }

/* what's in the locker — everything obeys the furniture now */
.v2-dive-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.v2-dive-stage > * { pointer-events: auto; }
/* the big print STANDS on the floor, leaning on the wall, lower-left */
.v2-dive-pol { position: absolute; left: 25%; bottom: calc(8.5% + 20px); margin: 0; width: min(24vw, 330px);
  translate: -50% 0; transform-origin: 50% 100%; transform: rotate(-2.6deg);
  background: #fff; padding: 9px 9px 38px; box-shadow: 0 18px 30px -6px rgba(0,0,0,.65); }
.v2-dive-pol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.v2-dive-pol b { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 18px; font-weight: 400; color: #111; }
/* the note is the content sheet, taped to the wall at eye level */
.v2-dive-note { position: absolute; left: 44%; top: 46%; margin: 0; width: min(28vw, 380px);
  transform: rotate(1.2deg); background: #f5f4ef; color: #131313;
  padding: 26px 26px 28px; font: 500 16px/1.6 "DM Sans", sans-serif;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 93% 100%, 0 100%); }
.v2-dive-note::before { content: ""; position: absolute; top: -11px; left: 50%;
  translate: -50% 0; width: 76px; height: 22px; background: rgba(242,246,238,.45); transform: rotate(-2deg); }
.v2-dive-note::after { content: ""; position: absolute; right: -13px; bottom: 24px; width: 52px; height: 18px;
  background: rgba(242,246,238,.4); transform: rotate(48deg); }
/* the CTA hangs from hook 2 on the rail — string meets the hook, clear above the note */
.v2-dive-tag { position: absolute; left: 51%; top: calc(26% + 100px); rotate: -3deg; translate: -15px 0;
  background: var(--rx-accent); color: #0e0e0e; font: 700 15px/1 "DM Sans", sans-serif;
  padding: 16px 24px 16px 36px; white-space: nowrap; }
.v2-dive-tag::after { content: ""; position: absolute; left: 15px; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%; background: #0b0b0b; }
.v2-dive-tag::before { content: ""; position: absolute; left: 18px; bottom: 97%; width: 1.5px; height: 36px;
  background: rgba(255,255,255,.3); transform: rotate(5deg); transform-origin: bottom; }
.v2-dive-tag:hover, .v2-dive-tag:focus-visible { background: #7fc32b; animation: v2-tag-swing .55s steps(3, end) infinite; }
@keyframes v2-tag-swing { 0%, 100% { rotate: -3deg; } 33% { rotate: 2deg; } 66% { rotate: -6deg; } }
/* one prop per locker */
.v2-dp { display: none; position: absolute; z-index: 2; }
.v2-dive[data-locker="0"] .v2-dp-tactics { display: block; left: 44%; top: 26%; translate: 0 -100%; rotate: 3deg;
  width: 100px; background: #f2f6ee; padding: 9px 10px 7px; box-shadow: 0 10px 18px -6px rgba(0,0,0,.6); }
.v2-dp-tactics svg { display: block; width: 100%; height: auto; }
.v2-dive[data-locker="1"] .v2-dp-stubs { display: flex; gap: 9px; left: 43%; top: 26%; translate: 0 -100%; rotate: -2deg; }
.v2-dp-stubs i { display: block; background: #f2f6ee; color: #10130b; font-family: "Kicks Marker", sans-serif;
  font-style: normal; font-size: 13.5px; line-height: 1; padding: 8px 11px 9px;
  clip-path: polygon(3% 0, 100% 5%, 97% 100%, 0 94%); box-shadow: 0 8px 14px -5px rgba(0,0,0,.6); }
.v2-dp-stubs i + i { background: var(--rx-accent); rotate: 3deg; }
.v2-dive[data-locker="2"] .v2-dp-film { display: block; left: 41%; top: calc(26% + 6px); width: 44px; height: 128px;
  rotate: 2deg; background-color: #232323; box-shadow: 0 10px 20px -6px rgba(0,0,0,.7);
  background-image: radial-gradient(circle at 8px 8px, #0b0b0b 3.4px, transparent 3.8px),
    radial-gradient(circle at 36px 8px, #0b0b0b 3.4px, transparent 3.8px);
  background-size: 44px 16px; }
.v2-dive[data-locker="2"] .v2-dp-tally { display: block; left: auto; right: 23%; top: 57%; width: 58px;
  color: #f2f6ee; opacity: .6; rotate: -2deg; }
.v2-dive-x { position: absolute; top: 26px; right: 26px; z-index: 4; cursor: pointer;
  background: none; border: 1.5px solid rgba(255,255,255,.4); border-radius: 40px; color: #fff;
  font: 700 12px/1 "DM Sans", sans-serif; letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 16px; transition: color .15s, border-color .15s; }
.v2-dive-x:hover, .v2-dive-x:focus-visible { color: var(--rx-accent); border-color: var(--rx-accent); }

/* the props land on held frames after the zoom settles */
.v2-dive.is-in .v2-dive-pol { animation: v2-prop-pol .3s .4s step-end backwards; }
.v2-dive.is-in .v2-dive-note { animation: v2-prop-note .26s .52s step-end backwards; }
.v2-dive.is-in .v2-dive-tag { animation: v2-prop-tag .34s .62s step-end backwards; }
.v2-dive.is-in .v2-dive-name { animation: v2-prop-name .3s .48s step-end backwards; }
.v2-dive.is-in .v2-dive-door { animation: v2-prop-door .24s .34s step-end backwards; }
.v2-dive.is-in .v2-dp { animation: v2-prop-dp .26s .58s step-end backwards; }
@keyframes v2-prop-pol {
  0% { transform: translateY(-18px) rotate(-8deg); }
  55% { transform: translateY(3px) rotate(-.8deg); }
  100% { transform: rotate(-2.6deg); } }
@keyframes v2-prop-note {
  0% { transform: translateY(14px) rotate(5deg); opacity: 0; }
  50% { transform: translateY(-4px) rotate(.4deg); opacity: 1; }
  100% { transform: rotate(1.2deg); } }
@keyframes v2-prop-tag {
  0% { rotate: 9deg; opacity: 0; }
  45% { rotate: -8deg; opacity: 1; }
  75% { rotate: 1deg; }
  100% { rotate: -3deg; } }
@keyframes v2-prop-dp {
  0% { opacity: 0; margin-top: -8px; }
  55% { opacity: 1; margin-top: 3px; }
  100% { margin-top: 0; } }
@keyframes v2-prop-name { 0% { opacity: 0; } 50% { opacity: .55; } 100% { opacity: 1; } }
@keyframes v2-prop-door {
  0% { transform: perspective(1100px) rotateY(74deg); }
  55% { transform: perspective(1100px) rotateY(38deg); }
  100% { transform: perspective(1100px) rotateY(44deg); } }

@media (max-width: 1023px) {
  .v2-dive-pol { width: min(30vw, 290px); }
  .v2-dive-note { width: min(36vw, 330px); left: 44%; }
  .v2-dive-name { font-size: 17vw; }
  .v2-dive-rail { left: 20%; right: 16%; }
}
@media (max-width: 767px) {
  .v2-dive { overflow-y: auto; }
  .v2-dive-door { width: 44px; }
  .v2-dive-doornum { font-size: 22px; }
  .v2-dive-handle { display: none; }
  .v2-dive-name, .v2-dive-shelf, .v2-dive-rail, .v2-dive-floor, .v2-dive-vents, .v2-dp { display: none !important; }
  .v2-dive-hud { left: 60px; top: 30px; }
  .v2-dive-stage { position: static; display: flex; flex-direction: column; align-items: center;
    gap: 22px; padding: 110px 30px 46px; }
  .v2-dive-pol, .v2-dive-note, .v2-dive-tag { position: static; width: min(72vw, 320px); translate: none; }
  .v2-dive-pol { transform: rotate(-2deg); }
  .v2-dive-note { transform: rotate(1.2deg); width: 100%; max-width: 420px; }
  .v2-dive-tag { rotate: -2deg; align-self: center; }
  .v2-dive-tag::before { display: none; }
  @keyframes v2-prop-pol { 0% { transform: translateY(-14px) rotate(-7deg); } 55% { transform: rotate(-.5deg); } 100% { transform: rotate(-2deg); } }
  @keyframes v2-prop-note { 0% { transform: translateY(12px) rotate(4deg); opacity: 0; } 50% { transform: rotate(.4deg); opacity: 1; } 100% { transform: rotate(1.2deg); } }
  @keyframes v2-prop-tag { 0% { rotate: 6deg; opacity: 0; } 45% { rotate: -5deg; opacity: 1; } 100% { rotate: -2deg; } }
}

@media (prefers-reduced-motion: reduce) {
  .v2-locker.is-open .v2-locker-door, .v2-locker.is-closing .v2-locker-door,
  .v2-locker.is-closing, .v2-dive.is-in *, .v2-dive .v2-dive-door { animation: none !important; }
  .v2-dive.is-in { animation: v2-dive-fade .2s forwards; }
  .v2-dive.is-out { animation: v2-dive-fade .2s reverse forwards; }
}
@keyframes v2-dive-fade { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }

/* ---------- punk peek cards on story seats ---------- */
.v2-seatc { overflow: visible; }
.v2-peek { position: absolute; bottom: 116%; left: 50%; translate: -50% 8px; width: 196px; z-index: 6;
  background: #0e0e0e; padding: 7px 7px 10px; rotate: var(--r, -2deg);
  clip-path: polygon(2% 3%, 31% 0%, 66% 2%, 98% 0%, 100% 30%, 97% 64%, 100% 96%, 70% 100%, 34% 97%, 3% 100%, 0% 68%, 2% 33%);
  opacity: 0; pointer-events: none; transition: opacity .18s, translate .22s cubic-bezier(.34,1.56,.64,1); }
.v2-seatc:hover .v2-peek, .v2-seatc:focus-visible .v2-peek { opacity: 1; translate: -50% 0; }
.v2-peek img { display: block; width: 100%; height: 120px; object-fit: cover;
  filter: grayscale(1) contrast(1.7) brightness(1.05) sepia(1) hue-rotate(52deg) saturate(2.4); }
.v2-peek b { display: block; font-family: "Kicks Marker", sans-serif; font-weight: 400; font-size: 14.5px; color: #fff; margin: 8px 2px 2px; line-height: 1.25; }
.v2-peek em { display: block; font: 400 10.5px/1.3 "DM Sans", sans-serif; color: #9dbd7a; font-style: normal; margin: 0 2px; }
.v2-peek::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.09) 2px 3px); }

/* ================= r31 owner pack ================= */
/* --- the sign-up under the pitch --- */
.v2-signup { border-top: 1px solid #e3e3e0; margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.v2-party { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-party-lab { font: 700 11.5px/1 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6d7166; margin-right: 4px; }
.v2-party button { border: 1.5px solid #cfd2ca; background: #fff; border-radius: 999px; padding: 8px 14px;
  font: 600 13px/1 "DM Sans", sans-serif; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.v2-party button:hover { border-color: var(--rx-accent); }
.v2-party button[aria-pressed="true"] { background: var(--rx-accent); border-color: var(--rx-accent); color: #0e0e0e; }
.v2-signup-form { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px; }
.v2-signup-form input { border: 1.5px solid #cfd2ca; border-radius: 6px; padding: 11px 12px; font: 500 14px/1 "DM Sans", sans-serif; background: #fff; }
.v2-signup-form input:focus { outline: none; border-color: var(--rx-accent); }
.v2-signup-go { background: #101010; color: #fff; border: 0; border-radius: 6px; padding: 11px 18px;
  font: 700 13.5px/1 "DM Sans", sans-serif; cursor: pointer; transition: background .15s; }
.v2-signup-go:hover { background: var(--rx-accent); color: #0e0e0e; }
.v2-signup-form.is-done .v2-signup-go { background: var(--rx-accent); color: #0e0e0e; }
.v2-signup-form.is-bad input, .v2-game-form.is-bad input { border-color: #b4472f; }
@media (max-width: 700px) { .v2-signup-form { grid-template-columns: 1fr; } }

/* --- the phone that holds the group chat --- */
.v2-phone { background: #101010; border-radius: 28px; padding: 16px 12px; box-shadow: 0 22px 44px -18px rgba(0,0,0,.5);
  max-width: 400px; position: relative; }
.v2-phone-notch { position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 74px; height: 5px; border-radius: 4px; background: #2a2d27; }
.v2-phone .v2-chat { border: 0; border-radius: 18px; overflow: hidden; box-shadow: none; }
.v2-chat-bar { display: flex; align-items: center; gap: 8px; }
.v2-chat-bar em { font-style: normal; opacity: .55; font-weight: 500; }
.v2-chat-av { width: 20px; height: 20px; border-radius: 50%; background: var(--rx-accent); flex: none; }
.v2-chat-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f2f3ef; }
.v2-msg--facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; background: #fff; }
.v2-msg--facts span { display: flex; flex-direction: column; gap: 2px; font: 600 13px/1.25 "DM Sans", sans-serif; }
.v2-msg--facts i { font: 700 10px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8b8f85; font-style: normal; }
.v2-teams { font-weight: 700; }

/* our party on the pitch */
.v2-dots .d.mine { fill: var(--rx-accent); }

/* --- show day: the day seen from the touchline --- */
.v2-showday { padding-bottom: 0; overflow: hidden; }
.v2-sd-info { max-width: 980px; margin: 0 auto; padding: 0 24px; text-align: center; }
.v2-sd-lead { font: 500 clamp(16px, 1.5vw, 19px)/1.5 "DM Sans", sans-serif; color: #dfe6d8; margin: 0 auto 26px; max-width: 62ch; }
.v2-sd-facts { display: flex; justify-content: center; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; margin-bottom: 26px; }
.v2-sd-facts span { display: flex; flex-direction: column; gap: 4px; font: 600 11.5px/1 "DM Sans", sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: #8b9384; }
.v2-sd-facts b { font-family: "Kicks Marker", "DM Sans", sans-serif; font-weight: 400; font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0; text-transform: none; color: var(--rx-accent); }
.v2-sd-cta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.v2-sd-scene { margin-top: 26px; }
.v2-sd-svg { display: block; width: 100%; height: auto; }
.v2-sd-ground, .v2-sd-far { fill: none; stroke: #f2f6ee; stroke-linecap: round; }
.v2-sd-ground { stroke-width: 3; opacity: .7; }
.v2-sd-far { stroke-width: 2; opacity: .28; }
/* r47: a painted goal — a fat chalk frame, slack net, worn goalmouth */
.v2-sd-goal path { fill: none; stroke: #f2f6ee; stroke-linecap: round; stroke-linejoin: round; }
.v2-sd-goal .frame { stroke-width: 8.5; opacity: .85; }
.v2-sd-goal .pegs { stroke-width: 3.4; opacity: .38; }
.v2-sd-goal .net { stroke-width: 1.7; opacity: .3; }
.v2-sd-goal .mouth { fill: #f2f6ee; opacity: .05; }
.v2-sd-fig { color: #f2f6ee; }
.v2-sd-fig.far { opacity: .34; }
.v2-sd-fig.acc { color: var(--rx-accent); }
.v2-sd-ball circle { fill: #f2f6ee; }
.v2-sd-ball .pip { fill: #14180f; }
.v2-sd-arc { fill: none; stroke: var(--rx-accent); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .7s; }

/* --- /join.html: the calendar --- */
.v2-cal { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 860px) { .v2-cal { grid-template-columns: 1fr; } }
.v2-game { border: 1px solid #e3e3e0; border-radius: 10px; padding: 20px 20px 18px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.v2-game.is-full { opacity: .88; }
.v2-game-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v2-game-head b { font-size: 26px; color: #14180f; }
.v2-game-date { font: 700 15px/1 "DM Sans", sans-serif; }
.v2-game-when { font: 500 13.5px/1 "DM Sans", sans-serif; color: #6d7166; margin-left: auto; }
.v2-game-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-game-facts span { border: 1px solid #dfe2da; border-radius: 999px; padding: 4px 11px; font: 600 12px/1.3 "DM Sans", sans-serif; color: #4c4f47; }
.v2-game-meter { height: 6px; border-radius: 3px; background: #eceee8; overflow: hidden; }
.v2-game-meter i { display: block; height: 100%; background: var(--rx-accent); transition: width .4s cubic-bezier(.22,1,.36,1); }
.v2-game-count { margin: 0; font: 500 14px/1 "DM Sans", sans-serif; color: #4c4f47; }
.v2-game-count b { font-size: 17px; color: #14180f; }
.v2-game-form { display: grid; grid-template-columns: 1.1fr 1fr auto auto; gap: 8px; }
.v2-game-form input, .v2-game-form select, .v2-crewadd input { border: 1.5px solid #cfd2ca; border-radius: 6px; padding: 10px 11px; font: 500 13.5px/1 "DM Sans", sans-serif; background: #fff; min-width: 0; }
.v2-game-form input:focus, .v2-game-form select:focus { outline: none; border-color: var(--rx-accent); }
.v2-game-form button { background: #101010; color: #fff; border: 0; border-radius: 6px; padding: 10px 16px; font: 700 13px/1 "DM Sans", sans-serif; cursor: pointer; }
.v2-game-form button:hover { background: var(--rx-accent); color: #0e0e0e; }
@media (max-width: 560px) { .v2-game-form { grid-template-columns: 1fr 1fr; } }
.v2-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.v2-roster li { display: flex; align-items: center; gap: 8px; font: 500 13.5px/1 "DM Sans", sans-serif; padding: 8px 0; border-top: 1px solid #eceee8; }
.v2-roster li b { font-weight: 700; }
.v2-plus { background: var(--rx-accent); color: #0e0e0e; border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 700; }
.v2-tel { margin-left: auto; color: #8b8f85; font-variant-numeric: tabular-nums; }
.v2-empty { color: #8b8f85; }
.v2-del { border: 0; background: none; color: #b4472f; cursor: pointer; font-size: 14px; padding: 0 2px; }
.v2-crewlink { border: 1px solid currentColor; background: none; border-radius: 999px; padding: 3px 10px; font: 600 11px/1 "DM Sans", sans-serif; cursor: pointer; color: inherit; }
.v2-crewadd { display: grid; grid-template-columns: 1fr 1fr 64px auto; gap: 8px; align-items: center; background: #f5f6f2; border: 1px dashed #c8ccc2; border-radius: 8px; padding: 10px; }
.v2-crewlab { grid-column: 1 / -1; font: 700 10.5px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6d7166; }
.v2-crewadd button { background: #101010; color: #fff; border: 0; border-radius: 6px; padding: 9px 14px; font: 700 12.5px/1 "DM Sans", sans-serif; cursor: pointer; }
@media (max-width: 560px) { .v2-crewadd { grid-template-columns: 1fr 1fr; } }

/* --- lockers: graffiti inside, and the dive note loses its white plate --- */
.v2-locker-graf { position: absolute; right: -6%; bottom: 5%; width: 62%; height: auto; color: var(--rx-accent);
  opacity: .16; pointer-events: none; z-index: 0; }
.v2-locker-inside > *:not(.v2-locker-graf) { position: relative; z-index: 1; }
.v2-dive-grafslot { position: absolute; right: 4%; bottom: 2%; width: min(34vw, 460px); pointer-events: none; z-index: 0; }
.v2-dive-grafslot .v2-locker-graf { position: static; width: 100%; opacity: .13; }
.v2-dive-note { background: none !important; color: #eef2e8 !important; clip-path: none !important;
  width: min(38vw, 560px) !important; padding: 0 !important; font-size: clamp(17px, 1.7vw, 23px) !important;
  line-height: 1.45 !important; font-weight: 500 !important; }
.v2-dive-note::before { display: none !important; }

/* --- events: what the day includes --- */
.v2-ev--wide { grid-column: 1 / -1; }
.v2-evlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.v2-evlist li { position: relative; padding-left: 18px; font: 500 14px/1.45 "DM Sans", sans-serif; }
.v2-evlist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--rx-accent); }
@media (max-width: 700px) { .v2-evlist { grid-template-columns: 1fr; } }

/* the programs CTA is retired (r31, owner) — hidden, not cut from the DOM */
.programs .scribble-border { display: none !important; }

/* --- games page (r33): the sessions table takes the full measure, then a
   balanced how-to-join / phone pair. The old two-column split left a void
   under the table and pushed the phone into a lopsided column. --- */
.v2-gamespage { max-width: 1120px; margin: 0 auto; }
.v2-gp-sessions { margin-bottom: clamp(40px, 5vw, 68px); }
.v2-gp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.v2-gp-head .v2-h3 { margin: 0; }
.v2-gp-head .v2-seam { margin: 0; }
.v2-gp-film { margin: 16px 0 0; }
.v2-gamespage .v2-sess { padding: 18px 22px; gap: 18px; }
.v2-gp-grid { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.v2-gp-how { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.v2-gp-how .v2-h3 { margin: 0; }
.v2-gp-how .v2-steps { width: 100%; }
.v2-gp-how .v2-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.v2-gp-how .v2-note { margin: 0; }
.v2-gp-phone .v2-phone { max-width: 380px; margin: 0; }
@media (max-width: 900px) {
  .v2-gp-grid { grid-template-columns: 1fr; gap: 34px; }
  .v2-gp-phone .v2-phone { max-width: 420px; }
  .v2-gamespage .v2-sess { padding: 16px; }
}

/* ===== r34 mobile pass ===== */
/* Mobile-only fixes: hamburger toggle, header pill overflow, tap targets,
   tiny text and a dive-note width regression. Nothing here changes
   >=1024px; every rule below is scoped by a max-width media query and
   overrides earlier rules from the cascade position, not by rewriting them. */

/* B - menu toggle: the captured button is a floating word outside the header
   (fixed at 50% viewport height, display:block only <=767). behaviors-v2.js
   moves it into .header-actions on load; here it becomes a naked word in the
   header row next to the pill, at the header's own tap height. No background,
   no shadow, no pill: the desktop nav is naked words too. The header's own
   difference blend inverts it against the page; the open menu is black, so
   the word reads white there as well. */
@media (max-width: 767px) {
  .header-actions button.menu-toggle {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    mix-blend-mode: normal !important;
    font: 600 12px/1 "DM Sans", sans-serif !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    pointer-events: auto !important;
    cursor: pointer;
    z-index: auto !important;
    opacity: 1 !important;
  }
}

/* C - header on phones: the "next games" text link's destination now also
   lives in the mobile menu CTA (see reskin.js item A), so it is redundant
   chrome here; hiding its whole wrapper (not just the link) also removes
   its decorative underline SVG, avoiding a stray line. The "come play"
   pill spills past the right edge at 390px - trim the header's own edge
   padding and the pill's padding rather than its already-sufficient
   (51px) tap height. */
@media (max-width: 767px) {
  .header-actions .scribble-underline { display: none !important; }
  header[data-v-c172c8bb] { padding-left: 20px; padding-right: 20px; }
  .header-actions[data-v-c172c8bb] { gap: 8px; }
  .header-donate .btn, header .btn--outlined-white {
    padding: 0 14px !important;
    min-height: 40px !important;
  }
}

/* D - hero fork links: real 44px tap height, same look (padding-block only,
   no border/colour change). */
@media (max-width: 767px) {
  .v2-fork-link { padding-block: 13px; min-height: 44px; }
}

/* E - games block: the party-size row goes label-then-grid instead of
   wrapping ("+3" stranding alone), and both form controls get a real
   tap/type height. */
@media (max-width: 767px) {
  .v2-party { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .v2-party-lab { grid-column: 1 / -1; margin: 0 0 2px; }
  .v2-party button { min-height: 42px; padding: 8px 6px; text-align: center; }
  .v2-signup-form input { min-height: 44px; }
  .v2-signup-go { min-height: 44px; }
}

/* F - footer sitemap links are 14px tall (line-height only, no padding).
   12px (not the initial 10px try) because line-height:1 on this class means
   the box is exactly padding*2 + font-size - 10px landed at 35px, 1px shy
   of a real tap target. */
@media (max-width: 767px) {
  .v2-footmap a { padding: 12px 0; font-size: 15px; }
}

/* G - join-page crew toggle button, plus the .v2-inlink instances that
   stand alone as a secondary action (not the ones sitting inline inside
   running prose, which stay untouched on purpose). */
@media (max-width: 767px) {
  .v2-crewlink { min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; }
  .v2-signup .v2-seam .v2-inlink,
  .v2-sd-cta .v2-inlink,
  .v2-cta-row .v2-inlink {
    display: inline-block;
    padding: 10px 0;
  }
}

/* H - stands peek on phones (r42 rewrite): the seat buttons keep a transform
   from their pop keyframe, so a fixed card inside them pins to the 44px button
   and folds into a one-character strip. The in-place card is hidden here and
   behaviors-v2 opens one body-level sheet (.v2-peeksheet) with the tapped
   seat's content instead. The hover note bubble goes too: sticky hover on
   touch left it hanging after a tap and it overflowed at the right edge. */
@media (max-width: 767px) {
  .v2-peek { display: none !important; }
  .v2-seatc:hover::after { display: none; }
  .v2-seatc.is-open .v2-seat-glyph { translate: 0 2px; }
  .v2-seatc.is-open .spn { transform: scaleY(2.1); }
}

/* I - small print bumped to a readable floor. */
@media (max-width: 767px) {
  .v2-msg--facts i { font-size: 11px; }
  .v2-chip { font-size: 12px; }
  .v2-close-facts i { font-size: 12px; }
  .v2-seam { font-size: 12px; }
}

/* J - bug fix: the r31 graffiti pack above sets .v2-dive-note's width with
   !important and no max-width guard, so it silently wins over the earlier
   mobile fallback (width:100%) at every viewport, including phones. Same
   selector, still !important, but later in the file - wins it back for
   phones only. */
@media (max-width: 767px) {
  .v2-dive-note {
    width: 100% !important;
    max-width: none !important;
    font-size: 17px !important;
    /* the note is a flex child of .v2-dive-stage, whose 30px side padding
       used to be enough gutter at the old (narrower, centred) width; at a
       full 100% width the note's own edge now runs under the always-on
       44px-wide .v2-dive-door panel (z-index:3, above the stage's 2),
       clipping the first letter of each line under it. Padding, not
       narrower width - r31's own padding:0 !important is what let this
       edge sit flush in the first place. */
    padding-left: 26px !important;
    padding-right: 12px !important;
  }
  /* locker 02's door hangs on the right instead (behaviors-v2.js toggles
     .v2-dive--r) - mirror the clearance to that side. */
  .v2-dive--r .v2-dive-note {
    padding-left: 12px !important;
    padding-right: 26px !important;
  }
  /* the close button is 34px tall at its base 10px/16px padding - the same
     bug class as the rest of this file's tap targets, fixed the same way */
  .v2-dive-x { min-height: 40px; }
}

/* K - Show Day scene reads small on phones; bleed it past its own box. */
@media (max-width: 600px) {
  .v2-sd-svg { width: 126%; max-width: none; margin-left: -13%; }
  .v2-sd-scene { overflow: hidden; }
}

/* L - footer bar on phones: the captured legal row is three nowrap links with
   text-overflow:ellipsis in a 350px flex row, so "Impressum", "Datenschutz"
   and the address all shipped cut off ("Impress...", "info@kicksgroup..."):
   identifying text never truncates. Let the row wrap, show the full labels,
   and give the copyright line the full width so "Vienna" stops dropping
   to a second line on its own. */
@media (max-width: 767px) {
  .footer__links--legal,
  .footer__links--socials { flex-wrap: wrap; row-gap: 6px; }
  .footer__link { overflow: visible; text-overflow: clip; flex: 0 0 auto; }
  .footer__copy { grid-column: 1 / -1; white-space: nowrap; }
}

/* M - footer scribbles on phones: both boil images (scribbles/_boil/footer-left
   + footer-right) render black on the black footer, so at 390 they only leave
   a 220px void between the newsletter row and the logo. Collapse them and
   pull the headline and the logo back into rhythm. Desktop untouched (the
   invisible scribbles there are logged as a pre-existing item). */
@media (max-width: 767px) {
  footer .footer__scribble { display: none !important; }
  .footer__headline { margin-top: 40px !important; }
  .footer__logo { margin-top: 60px !important; }
}

/* ===== r36: footmap in place, boil v2, the tactics board, the Show Day lob ===== */

/* footer sitemap now sits inside .footer__inner between the form and the wordmark */
.v2-footmap { width: 100%; padding: 64px 0 12px; }

/* ---------- the boil, v2 ----------
   One filter per WORD, three held frames 350ms apart, softer noise: the outline
   sways like a redrawn frame instead of jittering. Only in-view words animate
   (.is-boiling from an IntersectionObserver). No will-change: the old per-letter
   layers were the About-page lag. */
@keyframes v2-boil {
  0%, 100% { filter: url(#v2-boil-1); transform: rotate(0deg) translate(0, 0); }
  33.3% { filter: url(#v2-boil-2); transform: rotate(.35deg) translate(.3px, -.25px); }
  66.6% { filter: url(#v2-boil-3); transform: rotate(-.3deg) translate(-.25px, .3px); }
}
.v2-boil { display: inline-block; }
.v2-boil.is-boiling { animation: v2-boil 1.05s step-end infinite; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .v2-boil { animation: none !important; filter: none; } }

/* ---------- games: the tactics board ----------
   The pitch is a board tilted away (perspective + rotateX); every player is a
   token whose disc floats above the board (translateZ) over its own soft
   shadow on the plane. Hover lifts it further. The card is a white sheet with
   a soft shadow; the board casts its own. */
.v2-g3 { gap: 56px; }
.v2-g3-pitchcard { border: 0; border-radius: 14px; background: #fff; padding: 18px 18px 22px; overflow: visible;
  box-shadow: 0 30px 60px -34px rgba(14,14,14,.45), 0 2px 6px rgba(14,14,14,.06); }
.v2-boardwrap { perspective: 1500px; padding: 8px 0 22px; }
.v2-board { position: relative; border-radius: 10px; transform: rotateX(17deg); transform-origin: 50% 100%; transform-style: preserve-3d;
  background: linear-gradient(rgba(8,44,19,.82), rgba(8,44,19,.82)), url(/brand/grass.webp) center/cover;
  box-shadow: 0 46px 60px -32px rgba(14,14,14,.6); }
.v2-board .v2-g3-pitch { background: none; border-radius: 10px; }
.v2-toks { position: absolute; inset: 0; transform-style: preserve-3d; }
.v2-tok { position: absolute; width: 8.4%; aspect-ratio: 1; translate: -50% -50%; transform-style: preserve-3d; opacity: 0;
  transition: left .6s cubic-bezier(.34,1.15,.5,1), top .6s cubic-bezier(.34,1.15,.5,1); }
@keyframes v2-tok-in { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
.in-view .v2-tok { opacity: 1; animation: v2-tok-in .45s cubic-bezier(.34,1.15,.5,1) backwards; animation-delay: calc(.5s + var(--i, 0) * .035s); }
.v2-tok-sh { position: absolute; left: -6%; right: -6%; bottom: -22%; height: 46%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)); /* a gradient, not a blur filter: r37 measured 46 token shadows as filtered layers on the About field */
  transform: translateZ(0); transition: transform .35s, opacity .35s; }
.v2-tok-disc { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; transform: translateZ(18px);
  transition: transform .35s cubic-bezier(.34,1.15,.5,1), background .3s; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.v2-tok-disc svg { width: 60%; height: 60%; display: block; fill: currentColor; }
.v2-tok.solo .v2-tok-disc { background: #f2f6ee; color: #0e0e0e; }
.v2-tok.mine { z-index: 2; }
.v2-tok.mine .v2-tok-disc { background: var(--rx-accent); color: #0e0e0e; transform: translateZ(26px) scale(1.08); }
.v2-tok.opp .v2-tok-disc { background: rgba(14,14,14,.38); color: #f2f6ee; box-shadow: inset 0 0 0 2.5px rgba(242,246,238,.85); }
.v2-tok.opp .v2-tok-disc svg { opacity: .75; }
.v2-tok:hover .v2-tok-disc, .v2-tok.mine:hover .v2-tok-disc { transform: translateZ(42px) scale(1.12); }
.v2-tok:hover .v2-tok-sh { transform: translateZ(0) scale(1.3); opacity: .55; }
.v2-board-tag { position: absolute; right: 3.5%; top: 5%; color: #f2f6ee; opacity: .72; font-size: clamp(16px, 2.2vw, 26px); pointer-events: none; }
.v2-pitchcap { margin: 0; font: 500 14px/1.4 "DM Sans", sans-serif; color: #4c4f47; }
.v2-signup { border-top: 1px solid #e7e8e3; margin-top: 14px; padding-top: 16px; gap: 14px; }
.v2-party { gap: 10px; }
.v2-signup-form { gap: 10px; }
.v2-signup-form input, .v2-signup-go { min-height: 46px; }
.v2-g3-col { padding-top: 8px; }
.v2-g3-col .v2-note { margin-top: 18px; }
@media (max-width: 767px) {
  .v2-board { transform: rotateX(10deg); }
  .v2-g3-pitchcard { padding: 12px 12px 18px; }
  .v2-tok { width: 9.4%; }
}

/* ---------- show day: the field (r46 smoothing pass) ----------
   Lines and goals draw in; the figures walk in from the edges, back plane
   first; the kicker swings, behaviors-v2 flies the ball on ballistic timing
   (constant horizontal speed, so it hangs at the top) with a shadow running
   under it, the keeper dives and misses, the net takes it, the ball drops out
   and settles, the scorers jump, then the keeper puts it back on the halfway
   line and it starts again. Owner (r46): "smoothen" — every travelling motion
   is eased now; stepped timing is left only on the net, where a vibration is
   what a shake IS. The far planes lag the scroll: a camera move, so it glides. */
.v2-sd-svg:not(.is-in) .v2-sd-ground { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.v2-sd-svg:not(.is-in) .v2-sd-far, .v2-sd-svg:not(.is-in) .v2-sd-back { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.v2-sd-svg:not(.is-in) .v2-sd-goal path { stroke-dasharray: 900; stroke-dashoffset: 900; }
@keyframes v2-sd-draw-ground { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes v2-sd-draw-far { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes v2-sd-draw-goal { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
.v2-sd-svg.is-in .v2-sd-ground { stroke-dasharray: 1200; animation: v2-sd-draw-ground .7s cubic-bezier(.25,.46,.45,.94) both; }
.v2-sd-svg.is-in .v2-sd-far { stroke-dasharray: 1000; animation: v2-sd-draw-far .7s .1s cubic-bezier(.25,.46,.45,.94) both; }
.v2-sd-svg.is-in .v2-sd-back { stroke-dasharray: 1000; animation: v2-sd-draw-far .7s .2s cubic-bezier(.25,.46,.45,.94) both; }
.v2-sd-svg.is-in .v2-sd-goal path { stroke-dasharray: 900; animation: v2-sd-draw-goal .75s .3s cubic-bezier(.25,.46,.45,.94) both; }
.v2-sd-goal .mouth { opacity: 0; transition: opacity .6s 1s; }
.v2-sd-svg.is-in .v2-sd-goal .mouth { opacity: .05; }
.v2-sd-back { fill: none; stroke: #f2f6ee; stroke-width: 1.5; stroke-linecap: round; opacity: .14; }
.v2-sd-fig.back { opacity: .18; }
.v2-sd-spot { fill: #f2f6ee; opacity: .6; }
.v2-sd-shadow { fill: #f2f6ee; opacity: 0; transition: opacity .5s 1.2s; }
.v2-sd-svg.is-in .v2-sd-shadow { opacity: .09; }
/* --o is the plane's resting opacity: the walk-in fades UP TO it, so the far
   and back planes keep their depth instead of being flattened to full strength */
.v2-sd-fig { opacity: 0; --o: 1; transform-box: fill-box; transform-origin: 50% 100%; }
.v2-sd-fig.far { --o: .34; }
.v2-sd-fig.back { --o: .18; }
.v2-sd-cel { transform-box: fill-box; transform-origin: 50% 100%; }
/* they walk on and settle, rather than snapping through three frames */
@keyframes v2-sd-walk {
  0% { opacity: 0; transform: translateX(var(--from, 0px)); }
  34% { opacity: var(--o, 1); }
  100% { opacity: var(--o, 1); transform: translateX(0); }
}
.v2-sd-svg.is-in .v2-sd-fig { animation: v2-sd-walk .72s cubic-bezier(.19,.86,.28,1) forwards; animation-delay: calc(.5s + var(--i, 0) * .07s); }
/* the swing: a fast leg through the ball, an unhurried recovery */
@keyframes v2-sd-kick {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(-11deg); }
  46% { transform: rotate(7deg); }
  100% { transform: rotate(0deg); }
}
.v2-sd-svg.is-kick .v2-sd-kicker .v2-sd-cel { animation: v2-sd-kick .52s cubic-bezier(.3,.7,.2,1) 1; }
/* the keeper commits fast, hangs there while the ball passes, then picks himself up */
@keyframes v2-sd-dive {
  0% { transform: none; }
  22% { transform: translate(26px, -16px) rotate(30deg); }
  62% { transform: translate(26px, -16px) rotate(30deg); }
  100% { transform: none; }
}
.v2-sd-svg.is-dive .v2-sd-keeper .v2-sd-cel { animation: v2-sd-dive 1.5s cubic-bezier(.22,.9,.3,1) 1; }
/* the one thing that should NOT be smooth: a net taking a ball is a vibration */
@keyframes v2-net { 0% { transform: translate(0, 0); } 34% { transform: translate(-3px, 1px); } 67% { transform: translate(3px, -1px); } 100% { transform: translate(0, 0); } }
.v2-sd-goal.is-hit .net { animation: v2-net .36s steps(3, end) 1; }
/* a jump leaves the ground fast and falls back under gravity */
@keyframes v2-jump {
  0% { transform: translateY(0); }
  42% { transform: translateY(-13px); }
  56% { transform: translateY(-13px); }
  100% { transform: translateY(0); }
}
.v2-sd-svg.is-cheer .v2-sd-kicker .v2-sd-cel { animation: v2-jump .62s cubic-bezier(.32,.72,.36,1) 1; }
.v2-sd-svg.is-cheer .v2-sd-fig.acc:not(.v2-sd-kicker) .v2-sd-cel { animation: v2-jump .62s .14s cubic-bezier(.32,.72,.36,1) 1; }
.v2-sd-svg.is-cheer .v2-sd-fig.far .v2-sd-cel { animation: v2-jump .58s cubic-bezier(.32,.72,.36,1) 1; animation-delay: calc(.3s + (var(--i, 4) - 4) * .07s); }
.v2-sd-arc { transition: opacity .8s ease; }
.v2-sd-svg.is-flying .v2-sd-arc { transition: none; opacity: .4; }
.v2-sd-arc2 { fill: none; stroke: #f2f6ee; stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .8s ease; }
.v2-sd-svg.is-flying2 .v2-sd-arc2 { transition: none; opacity: .22; }
@keyframes v2-sd-kick2 { 0% { transform: rotate(0deg); } 26% { transform: rotate(10deg); } 52% { transform: rotate(-8deg); } 100% { transform: rotate(0deg); } }
.v2-sd-svg.is-gk .v2-sd-keeper .v2-sd-cel { animation: v2-sd-kick2 .5s cubic-bezier(.3,.7,.2,1) 1; }
/* the ball appears once the kicker has walked in, and stays: the scene loops */
.v2-sd-ball { opacity: 0; transition: opacity .2s; }
.v2-sd-svg.is-in .v2-sd-ball { opacity: 1; transition-delay: 1.5s; }
.v2-sd-svg.is-done .v2-sd-ball { opacity: 1; transition-delay: 0s; }
/* the shadow that makes the lob read as height rather than as a line drawing:
   behaviors-v2 moves it along the ground and scales it with the ball's height */
/* two opacities that multiply: the wrapper fades the shadow IN with the ball,
   the ellipse itself carries the height factor behaviors-v2 writes every frame.
   They must not share a transition — a transition on a per-frame value damps it,
   which made the shadow lag the ball by a third of a second (r46). */
.v2-sd-shwrap { opacity: 0; transition: opacity .3s; }
.v2-sd-svg.is-in .v2-sd-shwrap { opacity: 1; transition-delay: 1.5s; }
.v2-sd-ballsh { fill: #05070a; }
/* the far row reacts to the goal with one wave, left to right, after the scorer's jump */
.v2-sd-svg.is-cheer .v2-sd-fig.far .v2-sd-cel { animation: v2-jump .4s steps(2, end) 1; animation-delay: calc(.34s + (var(--i, 4) - 4) * .07s); }
@media (max-width: 767px) { .v2-sd-p-back { display: none; } }
@media (prefers-reduced-motion: reduce) {
  /* r46: the figures are opacity-gated now, not visibility-gated — without this they stay invisible when the walk-in animation is switched off */
  .v2-sd-fig, .v2-sd-cel, .v2-sd-goal .net { animation: none !important; visibility: visible; }
  .v2-sd-fig { opacity: var(--o, 1); }
  .v2-sd-arc, .v2-sd-arc2 { opacity: 0 !important; }
  .v2-sd-ball, .v2-sd-shwrap { transition: none; }
  .v2-sd-ball, .v2-sd-shwrap { opacity: 1; }
}

/* ===== r37: About move boards as mini tactics boards · locker props ===== */

/* ---------- the mini boards (about) ----------
   Same board + token system as the games block; smaller tilt, bigger tokens,
   a chalk layer on top for each move's own device. Inside .v2-move the chalk
   draws on and tokens pop with the card; on the desktop field the boards are
   complete from the start (the camera is the motion there). */
.v2-miniwrap { perspective: 900px; padding: 12px 12px 20px; }
.v2-mini2 { transform: rotateX(13deg); box-shadow: 0 26px 34px -20px rgba(0,0,0,.7); border-radius: 8px; }
.v2-mini2 .v2-mini-lines { display: block; width: 100%; height: auto; border-radius: 8px; }
.v2-mini2 .pl * { opacity: .85; }
.v2-mini2 .v2-tok { width: 14%; }
.v2-mini-chalk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform: translateZ(2px); }
.v2-mc-arrow { fill: none; stroke: var(--rx-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.v2-mc-ring { fill: none; stroke: #f2f6ee; stroke-width: 2; stroke-dasharray: 4 4; opacity: .6; }
.v2-mc-ball { fill: #f2f6ee; }
.v2-mc-lab { font-family: "Kicks Marker", "DM Sans", sans-serif; font-size: 15px; fill: var(--rx-accent); text-anchor: middle; }
.v2-mc-lab.big { font-size: 24px; fill: #f2f6ee; }
.v2-mc-lab.small { font-size: 12px; fill: #f2f6ee; opacity: .8; }
/* r48: the mini boards scale down on a phone, so a 15px label lands at 10px —
   under the readable floor. The coin carries a real price, so it gets the size. */
.v2-mc-lab.coin { font-size: 19px; }
.v2-mc-cone { fill: var(--rx-accent); stroke: #0e2113; stroke-width: 1.5; stroke-linejoin: round; }
.v2-mc-snow { fill: none; stroke: #f2f6ee; stroke-width: 2; stroke-linecap: round; opacity: .75; }
.v2-mc-bib { fill: var(--rx-accent); stroke: #0e2113; stroke-width: 1.5; stroke-linejoin: round; }
.v2-mc-mark { fill: none; stroke: #f2f6ee; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; opacity: .9; }
/* the card scrolls in: lines, then tokens, then chalk */
.v2-move .v2-mini2 .pl * { stroke-dasharray: 700; stroke-dashoffset: 700; }
.v2-move.in-view .v2-mini2 .pl * { animation: v2-paint .7s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-move .v2-mc-lab, .v2-move .v2-mc-ring, .v2-move .v2-mc-cone, .v2-move .v2-mc-snow, .v2-move .v2-mc-bib, .v2-move .v2-mc-ball { opacity: 0; transition: opacity .4s 1.1s; }
.v2-move.in-view .v2-mc-lab { opacity: 1; } .v2-move.in-view .v2-mc-lab.small { opacity: .8; }
.v2-move.in-view .v2-mc-ring { opacity: .6; } .v2-move.in-view .v2-mc-snow { opacity: .75; }
.v2-move.in-view .v2-mc-cone, .v2-move.in-view .v2-mc-bib, .v2-move.in-view .v2-mc-ball { opacity: 1; }
.v2-move.in-view .v2-mc-arrow { animation: v2-paint .6s 1.1s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-move.in-view .v2-mc-mark { animation: v2-paint .8s 1s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-move-board { overflow: visible; }
.v2-move-board .v2-miniwrap { padding: 14px 14px 22px; }
/* the field: boards complete, no entrance (the camera moves, the boards do not) */
.v2-spot-board .v2-mini2 { transform: rotateX(11deg); }
.v2-spot-board .v2-tok { opacity: 1; animation: none; }
.v2-spot-board .v2-mini2 .pl *, .v2-spot-board .v2-mc-arrow, .v2-spot-board .v2-mc-mark { stroke-dashoffset: 0; animation: none; }
.v2-spot-board .v2-mc-lab, .v2-spot-board .v2-mc-ring, .v2-spot-board .v2-mc-cone, .v2-spot-board .v2-mc-snow, .v2-spot-board .v2-mc-bib, .v2-spot-board .v2-mc-ball { opacity: 1; transition: none; }
.v2-spot-board .v2-mc-ring { opacity: .6; } .v2-spot-board .v2-mc-snow { opacity: .75; }
.v2-spot-board .v2-miniwrap { padding: 0 0 14px; }

/* ---------- inside the lockers: the props ----------
   Three hooks on the rail now (14% / 52% / 82%); the CTA tag keeps hook 2.
   Every prop is chalk-and-ink line art with the marker face where it writes. */
.v2-dive-rail b:nth-child(2) { left: 52%; }
.v2-dive-rail b:nth-child(3) { left: 92%; }
.v2-dive.is-in .v2-dp { animation-delay: calc(.58s + var(--pd, 0) * .09s); }
.v2-dp svg, svg.v2-dp { display: none; }
/* games (locker 0) */
.v2-dive[data-locker="0"] .v2-dp-bib { display: block; left: calc(22% + 56% * .92); top: calc(26% + 48px); width: 74px; translate: -50% 0; transform-origin: 50% 0; }
.v2-dive[data-locker="0"] .v2-dp-ball { display: block; left: 42%; bottom: calc(8.5% + 12px); width: 62px; }
.v2-dive[data-locker="0"] .v2-dp-boots { display: block; right: 17%; bottom: calc(8.5% + 12px); width: 118px; }
/* events (locker 1) */
.v2-dive[data-locker="1"] .v2-dp-cup { display: block; left: 31%; top: 26%; translate: 0 -100%; width: 64px; }
.v2-dive[data-locker="1"] .v2-dp-score { display: block; left: 61%; top: 26%; translate: 0 -100%; width: 128px; rotate: -1.5deg; }
.v2-dive[data-locker="1"] .v2-dp-whistle { display: block; left: calc(22% + 56% * .92); top: calc(26% + 48px); width: 48px; translate: -50% 0; transform-origin: 50% 0; }
.v2-dive[data-locker="1"] .v2-dp-cone { display: block; right: 19%; bottom: calc(8.5% + 12px); width: 66px; }
/* media (locker 2) */
.v2-dive[data-locker="2"] .v2-dp-camera { display: block; left: 30%; top: 26%; translate: 0 -100%; width: 110px; }
.v2-dive[data-locker="2"] .v2-dp-phones { display: block; left: calc(22% + 56% * .92); top: calc(26% + 48px); width: 70px; translate: -50% 0; transform-origin: 50% 0; }
.v2-dive[data-locker="2"] .v2-dp-clap { display: block; right: 18%; bottom: calc(8.5% + 8px); width: 124px; }
/* the hanging ones swing on hover, three held frames like the tag */
.v2-dp-bib:hover, .v2-dp-whistle:hover, .v2-dp-phones:hover { animation: v2-hook-swing .6s steps(3, end) infinite; }
@keyframes v2-hook-swing { 0%, 100% { rotate: 0deg; } 33% { rotate: 5deg; } 66% { rotate: -4deg; } }
@media (prefers-reduced-motion: reduce) { .v2-dp-bib:hover, .v2-dp-whistle:hover, .v2-dp-phones:hover { animation: none; } }

/* ===== r38: the motion pack (rise · glide · cels) + preloader cut ===== */

/* RISE: the children of a marked block stagger up once it scrolls in. The
   hidden state only exists on blocks JS has marked (.v2-stag), so nothing is
   ever hidden without a script to reveal it. */
.v2-stag > * { opacity: 0; transform: translateY(14px); }
.v2-stag.in-view > * { animation: v2-rise .55s cubic-bezier(.25,.46,.45,.94) both; animation-delay: calc(var(--i, 0) * .07s); }
@keyframes v2-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* blocks whose children carry their own motion keep it: the rise only fades them */
.v2-stag.v2-lockers > * { transform: none; }
.v2-stag.v2-lockers.in-view > * { animation-name: v2-fade-only; }
@keyframes v2-fade-only { from { opacity: 0; } to { opacity: 1; } }

/* GLIDE: desktop-only, JS-driven, transform only (no layout) */
.v2-glide { will-change: transform; }

/* the boards settle their tilt as their block arrives (a layout change, not a fade) */
.v2-board { transition: transform .9s cubic-bezier(.25,.46,.45,.94); }
.v2-games3:not(.in-view) .v2-board { transform: rotateX(28deg) translateY(18px); }
.v2-move:not(.in-view) .v2-mini2 { transform: rotateX(26deg) translateY(10px); }
@media (max-width: 767px) { .v2-games3:not(.in-view) .v2-board { transform: rotateX(18deg) translateY(12px); } }

/* CELS: the locker doors swing ajar on three held frames as the bank scrolls in */
.v2-lockers.in-view .v2-locker-door { animation: v2-ajar .9s steps(3, end) backwards; animation-delay: calc(.25s + var(--i, 0) * .14s); }
.v2-lockers.in-view .v2-locker:nth-child(2) .v2-locker-door { animation-name: v2-ajar-r; }
@keyframes v2-ajar-r { 0% { transform: rotateY(0deg); } 34% { transform: rotateY(11deg); } 67% { transform: rotateY(5deg); } 100% { transform: rotateY(0deg); } }
@keyframes v2-ajar { 0% { transform: rotateY(0deg); } 34% { transform: rotateY(-11deg); } 67% { transform: rotateY(-5deg); } 100% { transform: rotateY(0deg); } }

/* the show day facts count in one held frame after the other (rise handles it); the CTA row rises last */
.v2-sd-cta.v2-stag > * { animation-delay: calc(.25s + var(--i, 0) * .09s); }

@media (prefers-reduced-motion: reduce) {
  .v2-stag > *, .v2-stag.in-view > * { opacity: 1; transform: none; animation: none !important; }
  .v2-board, .v2-mini2 { transition: none; }
  .v2-games3:not(.in-view) .v2-board { transform: rotateX(17deg); }
  .v2-lockers.in-view .v2-locker-door { animation: none; }
}

/* the subpage painted-K preloader is gone (owner: keep only the white logo one);
   the rule stays harmless for any cached markup */
.v2-lite-intro { display: none !important; }

/* ===== r39: scrawled chalk, draggable tokens ===== */
/* every chalk device is two marker passes; the old clean shapes are gone */
.v2-mc-scrawl { fill: none; stroke: #f2f6ee; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.v2-mc-cone .v2-mc-scrawl, .v2-mc-bib .v2-mc-scrawl, .v2-mc-coinring .v2-mc-scrawl { stroke: var(--rx-accent); opacity: .95; }
.v2-mc-hatch { fill: none; stroke: var(--rx-accent); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.v2-mc-ring .v2-mc-scrawl { opacity: .55; }
.v2-mc-snow .v2-mc-scrawl { stroke-width: 1.8; opacity: .8; }
.v2-mc-lab.coin { font-size: 10px; fill: var(--rx-accent); }
.v2-mc-ring, .v2-mc-cone, .v2-mc-snow, .v2-mc-bib, .v2-mc-coin { opacity: 0; transition: opacity .4s 1.1s; }
.v2-move.in-view .v2-mc-ring, .v2-move.in-view .v2-mc-cone, .v2-move.in-view .v2-mc-snow, .v2-move.in-view .v2-mc-bib, .v2-move.in-view .v2-mc-coin,
.v2-spot-board .v2-mc-ring, .v2-spot-board .v2-mc-cone, .v2-spot-board .v2-mc-snow, .v2-spot-board .v2-mc-bib, .v2-spot-board .v2-mc-coin { opacity: 1; }
.v2-spot-board .v2-mc-ring, .v2-spot-board .v2-mc-cone, .v2-spot-board .v2-mc-snow, .v2-spot-board .v2-mc-bib, .v2-spot-board .v2-mc-coin { transition: none; }

/* tokens are magnets: pick one up (it lifts and its shadow spreads), put it down anywhere */
.v2-tok { cursor: grab; touch-action: none; user-select: none; }
.v2-tok.is-dragging { cursor: grabbing; z-index: 5; transition: none; }
.v2-tok.is-dragging .v2-tok-disc { transform: translateZ(54px) scale(1.16) !important; transition: transform .12s; }
.v2-tok.is-dragging .v2-tok-sh { transform: translateZ(0) scale(1.45); opacity: .45; }
.v2-mini-chalk { pointer-events: none; }

/* ===== r40: /join reads as a process ===== */
/* three numbered steps above the calendar, one line each */
.v2-howjoin { list-style: none; margin: 0 auto 34px; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid #e3e3e0; border-bottom: 1.5px solid #e3e3e0; }
.v2-howjoin li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px 18px 0; font: 500 15px/1.45 "DM Sans", sans-serif; color: #2a2a2a; }
.v2-howjoin li + li { border-left: 1.5px solid #e3e3e0; padding-left: 22px; }
.v2-howjoin b { font-size: 30px; line-height: .9; color: var(--rx-accent-ink, #4c7d10); flex: none; }
@media (max-width: 767px) {
  .v2-howjoin { grid-template-columns: 1fr; }
  .v2-howjoin li + li { border-left: 0; border-top: 1.5px solid #e3e3e0; padding-left: 0; }
}
/* the card after you joined: the form is gone, the next three things are here */
.v2-joined { border-left: 3px solid var(--rx-accent); padding: 4px 0 4px 16px; display: flex; flex-direction: column; gap: 10px; }
.v2-joined-line { margin: 0; font: 500 16px/1.4 "DM Sans", sans-serif; color: #0e0e0e; }
.v2-joined-line b { font-weight: 700; }
.v2-joined-next { margin: 0; font: 400 14px/1.5 "DM Sans", sans-serif; color: #4c4f47; }
.v2-joined-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.v2-joined-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 6px; background: #0e0e0e; color: #f2f6ee; font: 700 14px/1 "DM Sans", sans-serif; text-decoration: none; }
.v2-joined-btn:hover, .v2-joined-btn:focus-visible { background: var(--rx-accent); color: #0e0e0e; }
.v2-joined-btn--ghost { background: none; color: #0e0e0e; border: 1.5px solid #0e0e0e; }
.v2-game.is-mine { border-color: var(--rx-accent); }

/* ===== r41: the turf — WebGL ink pitch behind the dark blocks ===== */
/* the page wrapper is white, so the canvas sits above the page and is masked
   (from JS) to the on-screen rectangles of the turf blocks; those blocks are
   raised above the canvas and let it through */
.v2-turf { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.v2-turf.is-on { opacity: 1; }
html.has-turf .v2-turf-block { position: relative; z-index: 2; background: transparent !important; }
/* the wipe and the dive sit above everything as before (z 1000+); the header keeps its difference blend */
@media (prefers-reduced-motion: reduce) { .v2-turf { display: none; } }

/* ================= r42 mobile interactions ================= */
/* the seat peek as a bottom sheet on phones: one node at body level, filled by
   behaviors-v2 from the tapped seat; the desktop card's face, one size up */
.v2-peeksheet { position: fixed; left: 12px; right: 12px; bottom: 72px; z-index: 900; background: #0e0e0e; color: #fff;
  padding: 8px 8px 12px;
  clip-path: polygon(2% 3%, 31% 0%, 66% 2%, 98% 0%, 100% 30%, 97% 64%, 100% 96%, 70% 100%, 34% 97%, 3% 100%, 0% 68%, 2% 33%);
  opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .18s, translate .26s cubic-bezier(.34,1.56,.64,1); }
.v2-peeksheet.is-open { opacity: 1; translate: 0 0; pointer-events: auto; }
.v2-peeksheet img { display: block; width: 100%; height: 160px; object-fit: cover;
  filter: grayscale(1) contrast(1.7) brightness(1.05) sepia(1) hue-rotate(52deg) saturate(2.4); }
.v2-peeksheet b { display: block; font-family: "Kicks Marker", sans-serif; font-weight: 400; font-size: 19px; color: #fff; margin: 10px 4px 2px; line-height: 1.2; }
.v2-peeksheet em { display: block; font: 400 12.5px/1.3 "DM Sans", sans-serif; color: #9dbd7a; font-style: normal; margin: 0 4px; }
.v2-peeksheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.09) 2px 3px); }
@media (min-width: 768px) { .v2-peeksheet { display: none; } }
@media (prefers-reduced-motion: reduce) { .v2-peeksheet { transition: none; } }
/* contact: the direct rows hang the value off the label column, so a wrapped
   line ("book a short call") continues under the value, not under the label */
@media (max-width: 767px) {
  .v2-direct p { padding-left: 104px; text-indent: -104px; }
  .v2-direct b { width: 92px; min-width: 0; margin-right: 8px; text-indent: 0; }
}

/* ================= r43 review repairs ================= */
/* the newsletter field: the donor's own rule zeroed the border after ours, and
   its scribble underline is built with a zero-width viewBox on every page */
.footer__form .footer__input { border: 0 !important; border-bottom: 1.5px solid rgba(255,255,255,.45) !important; border-radius: 0 !important; }
.footer__form .footer__input:focus-visible { border-bottom-color: var(--rx-accent) !important; }
.footer__form-line .scribble-line__svg { display: none; }

/* ================= r44 ================= */
/* hero: the headline keeps clear of the fork band on every desktop height,
   whatever the marker verb's glyphs and underline hang below the line box */
@media (min-width: 1024px) { .hero__tagline[data-v-7a32b953] { bottom: max(7.5rem, 12vh); } }
.v2-verb-stroke { pointer-events: none; }

/* locker interiors: one still life per locker (shelf / hook / floor), the
   props twice the size, the small clutter gone (owner: "rethink the insides") */
.v2-dive .v2-dp-tactics, .v2-dive .v2-dp-stubs, .v2-dive .v2-dp-film, .v2-dive .v2-dp-tally { display: none !important; }
.v2-dive[data-locker="0"] .v2-dp-boots { left: 33%; right: auto; top: 26%; bottom: auto; translate: 0 -100%; width: 214px; }
.v2-dive[data-locker="0"] .v2-dp-bib { width: 108px; }
.v2-dive[data-locker="0"] .v2-dp-ball { left: auto; right: 20%; bottom: calc(8.5% + 10px); width: 98px; }
.v2-dive[data-locker="1"] .v2-dp-score { left: 30%; width: 192px; }
.v2-dive[data-locker="1"] .v2-dp-cup { left: 55%; width: 92px; }
.v2-dive[data-locker="1"] .v2-dp-whistle { width: 72px; }
.v2-dive[data-locker="1"] .v2-dp-cone { right: 20%; width: 104px; }
.v2-dive[data-locker="2"] .v2-dp-camera { left: 30%; width: 200px; }
.v2-dive[data-locker="2"] .v2-dp-phones { width: 104px; }
.v2-dive[data-locker="2"] .v2-dp-clap { right: 18%; width: 182px; }
.v2-dive-grafslot .v2-locker-graf { opacity: .08; }

/* ---------- r44 games block: the board is the form ---------- */
.v2-party--bibs { gap: 6px; }
/* r47: clean ovals. The shirt outlines read as stretched next to the round
   discs on the board; a disc and a pill are the same family, a jersey is not. */
.v2-party--bibs button, .v2-party--bibs button:hover, .v2-party--bibs button[aria-pressed="true"] {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; min-width: 78px; border-radius: 999px;
  border: 2px solid #0e0e0e; background: #fff; color: #0e0e0e;
  font: 700 12.5px/1 "DM Sans", sans-serif; cursor: pointer; transition: background .15s, color .15s; }
/* r48: the button shows who is coming — one painted figure per person */
.v2-partycrowd { display: inline-flex; align-items: flex-end; }
.v2-partyfig { display: block; width: auto; height: 19px; color: #0e0e0e; }
.v2-partyfig + .v2-partyfig { margin-left: -4px; }
.v2-party--bibs button[aria-pressed="true"] .v2-partyfig { color: #0e0e0e; }
.v2-party--bibs button:hover { background: #eef5e2; }
.v2-party--bibs button[aria-pressed="true"] { background: var(--rx-accent); }
.v2-party--bibs button:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: 3px; }
.v2-sheet { grid-template-columns: 1.2fr 1fr auto; align-items: end; gap: 14px; }
.v2-sheet-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-sheet-f .v2-marker { font-size: 15px; color: #6d7166; line-height: 1; }
.v2-sheet input { border: 0 !important; border-bottom: 2px solid #0e0e0e !important; border-radius: 0 !important; padding: 8px 2px 7px !important; background: transparent !important; }
.v2-sheet input:focus { border-bottom-color: var(--rx-accent) !important; outline: none; }
.v2-tok-ini { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font: 800 11px/1 "DM Sans", sans-serif; letter-spacing: .02em; color: #0e0e0e; background: var(--rx-accent); border-radius: 50%; }
.v2-tok.mine .v2-tok-ini:not(:empty) { display: flex; }
.v2-youpos { font: 400 13px/1.4 "DM Sans", sans-serif; color: #5f645a; }
.v2-youpos b { color: #0e0e0e; }
.v2-youpos-hint { color: #8a8f83; }
@media (max-width: 767px) { .v2-sheet { grid-template-columns: 1fr 1fr; } .v2-sheet .v2-signup-go { grid-column: 1 / -1; } .v2-party--bibs button { min-width: 56px; padding: 8px 12px 10px; } }

/* ---------- r44 games block: the thread, no phone ---------- */
.v2-roll { position: relative; height: 122px; margin: 6px 0 14px; }
.v2-roll .v2-ball { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v2-roll-line { position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: #0e0e0e; opacity: .85; border-radius: 2px; }
.v2-roll-shadow { position: absolute; left: 0; bottom: 6px; width: 88px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); transform: translateX(9999px); }
html:not(.has-ball) .v2-roll { background: url(/brand/ball-still.png) left bottom / auto 100% no-repeat; }
html:not(.has-ball) .v2-roll-shadow { display: none; }
.v2-thread { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.v2-thread-head { display: flex; align-items: center; gap: 9px; font: 700 13px/1 "DM Sans", sans-serif; margin: 0 0 12px; }
.v2-thread-head em { font-style: normal; font-weight: 500; opacity: .55; }
.v2-thread .v2-chat-body { padding: 0; background: transparent; gap: 10px; }
.v2-thread .v2-msg { margin: 0; background: #eceee6; }
.v2-replies { display: flex; flex-direction: column; gap: 8px; padding-left: 8px; }
.v2-reply { display: flex; align-items: center; gap: 10px; }
.v2-av { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid #0e0e0e; display: grid; place-items: center; flex: none; }
.v2-av svg { width: 20px; height: 20px; color: #0e0e0e; }
.v2-reply-t { background: #fff; border: 1.5px solid #0e0e0e; border-radius: 12px 12px 12px 2px; padding: 7px 12px; font: 500 13.5px/1.35 "DM Sans", sans-serif; }
.v2-thread .v2-msg--me { margin: 0 0 0 auto; }
.v2-thread .v2-count { margin: 6px 0 0; }
.v2-thread .v2-count-n { font-family: "Kicks Marker", "DM Sans", sans-serif; font-weight: 400; font-size: 28px; color: var(--rx-accent-ink); }

/* r47: Our story — the poster carries the invitation and the link */
.story__video { position: relative; }
.v2-storylink { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .5em;
  color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(10,12,8,.12), rgba(10,12,8,.52));
  transition: background .25s; }
.v2-storylink .v2-marker { font-size: clamp(26px, 3.6vw, 52px); line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.v2-storylink-arrow { font-style: normal; font-size: clamp(20px, 2.4vw, 34px); transition: translate .25s cubic-bezier(.25,.46,.45,.94); }
.v2-storylink:hover { background: linear-gradient(180deg, rgba(10,12,8,.06), rgba(10,12,8,.42)); color: var(--rx-accent); }
.v2-storylink:hover .v2-storylink-arrow { translate: 8px 0; }
.v2-storylink:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: -6px; }
/* the play affordance belongs to a film that does not exist yet — delete this
   rule the day one does, and the player comes back untouched */
.story__video .video-player__play-label, .story__video .video-player__overlay { display: none; }
@media (prefers-reduced-motion: reduce) { .v2-storylink, .v2-storylink-arrow { transition: none; } }

/* ---------- r47: the first testimonial is a film ----------
   Shot vertically with burned-in subtitles, so the frame is phone-shaped and it
   starts muted: the captions carry it, sound is a choice. It is 75 seconds, not
   a loop, and it ends on the mark — so it plays once and rests. */
.v2-firstseat { display: flex; justify-content: center; padding-top: 0; }
.v2-reel { margin: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 320px) minmax(0, 320px); align-items: center; }
.v2-reel-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0e0e0e;
  box-shadow: 0 30px 60px -30px rgba(10,14,6,.7), inset 0 0 0 1px rgba(242,246,238,.09); }
.v2-reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-reel-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(10,12,8,.15), rgba(10,12,8,.55)); color: #fff; transition: background .25s; }
.v2-reel-play .v2-marker { font-size: 42px; line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.v2-reel-play:hover { background: linear-gradient(180deg, rgba(10,12,8,.05), rgba(10,12,8,.42)); color: var(--rx-accent); }
.v2-reel-frame.is-playing .v2-reel-play { display: none; }
.v2-reel-sound { position: absolute; left: 12px; bottom: 12px; border: 1.5px solid rgba(242,246,238,.6); border-radius: 999px;
  background: rgba(10,12,8,.55); color: #f2f6ee; font: 700 12px/1 "DM Sans", sans-serif; padding: 9px 14px; cursor: pointer;
  backdrop-filter: blur(6px); }
.v2-reel-sound[aria-pressed="true"] { border-color: var(--rx-accent); color: var(--rx-accent); }
.v2-reel figcaption { display: flex; flex-direction: column; gap: 10px; }
.v2-reel figcaption b { font-size: 30px; line-height: 1; }
.v2-reel figcaption span { font: 400 15.5px/1.6 "DM Sans", sans-serif; color: #5f645a; max-width: 30ch; }
@media (max-width: 767px) {
  .v2-reel { grid-template-columns: minmax(0, 300px); justify-items: center; text-align: center; }
  .v2-reel figcaption { align-items: center; }
  .v2-reel figcaption span { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .v2-reel-play { transition: none; } }

/* ---------- r48: the games block, switchable ----------
   The owner wanted to compare layouts without losing this one. behaviors-v2
   reads ?games=a|b|c and writes it to data-layout; a is what is live today, so
   the default is unchanged and every variant is one URL away. Picking a winner
   means changing the attribute in remix/v2.js — nothing here gets deleted. */
@media (min-width: 1024px) {
  /* b — the board leads at full width, the sign-up and the thread share the row
     under it: the pitch is the headline, the two things you do come after */
  .v2-games3[data-layout="b"] .v2-g3 { grid-template-columns: 1fr; gap: 30px; max-width: 1040px; }
  .v2-games3[data-layout="b"] .v2-g3-pitchcard { display: grid; grid-template-columns: 1fr; }
  .v2-games3[data-layout="b"] .v2-boardwrap { max-width: 760px; margin: 0 auto; }
  .v2-games3[data-layout="b"] .v2-pitchcap { justify-content: center; }
  .v2-games3[data-layout="b"] .v2-g3-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
  .v2-games3[data-layout="b"] .v2-roll { grid-column: 1 / -1; }
  .v2-games3[data-layout="b"] .v2-signup { border-top: 0; margin-top: 0; }

  /* c — one column, read top to bottom: the pitch, then the thread, then the
     sign-up last, the way the group chat actually goes */
  .v2-games3[data-layout="c"] .v2-g3 { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 26px; }
  .v2-games3[data-layout="c"] .v2-g3-pitchcard { display: contents; }
  .v2-games3[data-layout="c"] .v2-boardwrap { order: 1; }
  .v2-games3[data-layout="c"] .v2-pitchcap { order: 2; }
  .v2-games3[data-layout="c"] .v2-g3-col { order: 3; }
  .v2-games3[data-layout="c"] .v2-signup { order: 4; border-top: 1px solid #e3e3e0; padding-top: 18px; }
  .v2-games3[data-layout="c"] .v2-seam { order: 5; }
  .v2-games3[data-layout="c"] .v2-roll { height: 96px; }
}

/* ---------- r48: Show Day as the shape of the day ----------
   Two lanes, five matches each, six hours, one final, the cup. The lanes and the
   axis draw themselves left to right, the matches land in order alternating
   between pitches, the join and the final follow, the cup stamps last, and then
   it rests. Marker weight throughout: the same pen as the figures. */
.v2-day { display: block; width: 100%; height: auto; }
.v2-day path { fill: none; stroke: #f2f6ee; stroke-linecap: round; stroke-linejoin: round; }
.v2-day text { font-family: "Kicks Marker", "DM Sans", sans-serif; fill: #f2f6ee; }
.v2-day-lane .rail { stroke-width: 3; opacity: .3; }
.v2-day-lane .lab { font-size: 26px; opacity: .62; }
.v2-day-hours .axis { stroke-width: 2; opacity: .18; }
.v2-day-hours .tick { stroke-width: 2; opacity: .3; }
.v2-day-hours .hr { font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: #8f968a; }
.v2-day-match rect { fill: none; stroke: #f2f6ee; stroke-width: 4; opacity: .78; }
.v2-day-match text { font-size: 24px; opacity: .72; }
.v2-day-join { stroke-width: 3; opacity: .4; stroke-dasharray: 9 9; }
.v2-day-final rect { fill: var(--rx-accent); stroke: var(--rx-accent); stroke-width: 4; }
.v2-day-final text { font-size: 26px; fill: #0e1408; }
.v2-day-cup path { stroke-width: 4.5; stroke: var(--rx-accent); opacity: .95; }

/* the draw-on, in the order the day happens */
.v2-day .rail, .v2-day .axis, .v2-day .tick, .v2-day-join { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.v2-day-match, .v2-day-final, .v2-day-cup, .v2-day .lab, .v2-day .hr { opacity: 0; }
@keyframes v2-day-draw { to { stroke-dashoffset: 0; } }
@keyframes v2-day-land { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes v2-day-in { to { opacity: 1; } }
.v2-day.is-on .rail { animation: v2-day-draw .8s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-day.is-on .v2-day-lane:nth-of-type(3) .rail { animation-delay: .12s; }
.v2-day.is-on .axis, .v2-day.is-on .tick { animation: v2-day-draw .7s .1s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-day.is-on .lab, .v2-day.is-on .hr { animation: v2-day-in .5s .5s forwards; }
.v2-day.is-on .v2-day-match { transform-box: fill-box; transform-origin: 50% 50%;
  animation: v2-day-land .42s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(.7s + var(--i, 0) * .11s); }
.v2-day.is-on .v2-day-join { animation: v2-day-draw .5s 1.9s cubic-bezier(.25,.46,.45,.94) forwards; }
.v2-day.is-on .v2-day-final { transform-box: fill-box; transform-origin: 50% 50%;
  animation: v2-day-land .46s 2.2s cubic-bezier(.2,.9,.3,1) forwards; }
.v2-day.is-on .v2-day-cup { transform-box: fill-box; transform-origin: 50% 100%;
  animation: v2-day-land .5s 2.5s cubic-bezier(.2,.9,.3,1) forwards; }
@media (max-width: 767px) { .v2-day-lane .lab { font-size: 21px; } .v2-day-hours .hr { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .v2-day .rail, .v2-day .axis, .v2-day .tick, .v2-day-join { stroke-dashoffset: 0; }
  .v2-day-match, .v2-day-final, .v2-day-cup, .v2-day .lab, .v2-day .hr { opacity: 1; animation: none !important; }
}

/* r50: Show Day = the place, then the moment (owner: "combination b and c") */
.v2-day .sd-chalk, .v2-day .sd-chalk path, .v2-day .sd-chalk rect, .v2-day .sd-chalk circle { fill: none; stroke: #f2f6ee; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.v2-day .sd-fat path { stroke-width: 4; opacity: .88; }
.v2-day .sd-soft-line { fill: none; stroke: #f2f6ee; stroke-width: 2; opacity: .35; stroke-linecap: round; }
.v2-day .sd-lime, .v2-day .sd-lime path { fill: none; stroke: var(--rx-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v2-day .sd-mk { font-family: "Kicks Marker", "DM Sans", sans-serif; font-size: 26px; fill: #f2f6ee; }
.v2-day .sd-acc { fill: var(--rx-accent); }
.v2-day .sd-soft { font-size: 20px; opacity: .85; }
.v2-day .sd-cap { font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: #8f968a; }
/* r50: the drawing ends on the ground line, so the block gives it room instead of bleeding it off */
.v2-showday .v2-sd-scene { padding-bottom: 44px; }
/* r51 */
.v2-day .sd-thin path, .v2-day .sd-thin rect, .v2-day .sd-thin circle { stroke-width: 2; }
.v2-day .sd-dot-a { fill: var(--rx-accent); stroke: none; }
.v2-day .sd-dot-b { fill: #0e0e0e; stroke: #f2f6ee; stroke-width: 2; opacity: .9; }
.v2-day .sd-ball { fill: #f2f6ee; stroke: none; }
.v2-day .sd-crowd circle { fill: none; stroke: #f2f6ee; stroke-width: 1.6; opacity: .42; }
.v2-day .sd-tiny { font-size: 11px; }
/* r53: idle motion on the Show Day drawing, on once the drawing has been seen.
   Every element oscillates about its own resting place: the speakers pump on
   a 120 bpm beat and the sound arcs brighten with them, the crowd bobs, the
   players shift their weight, the drone hovers. Phases are set per element in
   the markup (--d) so nothing moves in step. */
.v2-day .sd-spk, .v2-day .sd-crowd circle, .v2-day .sd-dot, .v2-day .sd-drone { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes sd-pump { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes sd-beat { from { opacity: .22; } to { opacity: .75; } }
@keyframes sd-sway { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(var(--sx, 0px), -3px); } 70% { transform: translate(calc(var(--sx, 0px) * -.6), -1px); } }
@keyframes sd-shift { from { transform: translate(0, 0); } to { transform: translate(var(--sx, 2px), var(--sy, 1px)); } }
@keyframes sd-hover { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(5px, -7px) rotate(4deg); } 65% { transform: translate(-4px, -3px) rotate(-3deg); } }
.v2-day.is-on .sd-spk { animation: sd-pump .5s cubic-bezier(.3, 0, .2, 1) infinite alternate; }
.v2-day.is-on .sd-spk-b { animation-delay: -.25s; }
.v2-day.is-on .sd-wave { animation: sd-beat .5s cubic-bezier(.3, 0, .2, 1) infinite alternate; }
.v2-day.is-on .sd-crowd circle { animation: sd-sway 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.v2-day.is-on .sd-dot { animation: sd-shift 3.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.v2-day.is-on .sd-drone { animation: sd-hover 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .v2-day .sd-spk, .v2-day .sd-wave, .v2-day .sd-crowd circle, .v2-day .sd-dot, .v2-day .sd-drone { animation: none !important; }
}
/* r55: the work. Home: a slim band after Show Day, the reel's poster as a
   film frame, one line, the link. Page: a numbered ledger of films, one job
   per row, the words on one side and the picture on the other, sides swapping
   row by row. Stills sit three across; a film is the 9:16 frame from the
   stands page with the same player. */
.v2-workband { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 32px; align-items: center; max-width: 980px; margin: 0 auto; padding: 48px 28.5px; }
.v2-workband-frame { display: block; width: 96px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #0e0e0e; }
.v2-workband-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-workband .label { display: block; font: 600 12px/1.33 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--rx-accent-ink); margin-bottom: 8px; }
.v2-workband p { margin: 0; font: 700 22px/1.25 "DM Sans", sans-serif; max-width: 24ch; }
.v2-workband .v2-inlink { white-space: nowrap; }
@media (max-width: 767px) {
  .v2-workband { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 36px 28.5px; }
  .v2-workband-frame { width: 72px; }
  .v2-workband .v2-inlink { grid-column: 2; justify-self: start; }
}
.v2-workpage { padding-top: 20px; }
.v2-films { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 80px; }
.v2-film { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.v2-film:nth-child(even) .v2-film-media { order: -1; }
.v2-film-no { display: block; font-size: 64px; line-height: 1; margin-bottom: 16px; }
.v2-film-words b { display: block; font: 700 26px/1.2 "DM Sans", sans-serif; margin-bottom: 8px; }
.v2-film-words > span:not(.v2-film-no) { display: block; font: 400 15.5px/1.6 "DM Sans", sans-serif; color: #5f645a; max-width: 34ch; }
.v2-film-media .v2-reel-frame { width: min(100%, 320px); margin: 0 auto; }
.v2-film-stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v2-film-stills img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 6px; }
.v2-workseam { text-align: center; margin: 56px auto 28px; font-size: 13px; }
@media (max-width: 767px) {
  .v2-films { gap: 56px; }
  .v2-film { grid-template-columns: 1fr; gap: 24px; }
  .v2-film:nth-child(even) .v2-film-media { order: 0; }
  .v2-film-no { font-size: 48px; }
}
/* r57: the phone. The hero headline sits above the two fork links (they
   were laid across it); the mission illustration shows whole instead of a
   parallax crop; the hand arrow at the Show Day CTA returns at a phone size;
   the turf canvas keeps its place under a scrolling page. */
@media (max-width: 767px) {
  .hero__tagline[data-v-7a32b953] { bottom: 16rem; }
  section.mission.v2-dark { padding-top: 72px; padding-bottom: 72px; }
  .mission__image[data-v-a9c95186] { aspect-ratio: 10 / 9; width: min(66.66667vw, 25rem); }
  .mission__image .image { transform: none !important; }
  .v2-doodle-cta { display: block; width: 58px; }
}
/* r57: the portrait drawing on phones, the landscape one above 768px. */
.v2-day-m { display: none; }
@media (max-width: 767px) {
  .v2-day { display: none; }
  .v2-day.v2-day-m { display: block; max-width: 420px; margin: 0 auto; }
}
/* r59: the field nav. Five marks under the stage in the marker face, the
   live one lime; the scroll hint sits above them until the flight starts. */
.v2-fieldnav { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 4; display: flex; gap: 6px; align-items: center; }
.v2-fieldnav button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: #f2f6ee; opacity: .42;
  font-size: 26px; line-height: 1; transition: opacity .25s, color .25s, transform .25s; }
.v2-fieldnav button:hover, .v2-fieldnav button:focus-visible { opacity: .85; outline: none; }
.v2-fieldnav button.is-live { opacity: 1; color: var(--rx-accent); transform: translateY(-3px); }
.v2-fieldnav button.is-live::after { content: ""; display: block; width: 22px; height: 3px; margin: 2px auto 0; border-radius: 2px; background: currentColor; }
.v2-field-hint { bottom: 72px; }
@media (prefers-reduced-motion: reduce) { .v2-fieldnav button { transition: none; } }
/* r62: the phone menu, three openings on the test link (html[data-menu]).
   Shared: numbered links, the drawn ring on the page you are on, the CTA
   underline drawing last. The donor's own fade keeps running underneath. */
html[data-menu] .mobile-menu { will-change: transform; }
html[data-menu] .mobile-menu nav a { position: relative; }
.v2-mm-num { display: inline-block; font-size: .3em; color: var(--rx-accent); vertical-align: top; margin: .35em .5em 0 0; opacity: 0; transition: opacity .25s; transition-delay: calc(.22s + var(--i, 0) * .06s); }
html[data-menu] .mobile-menu.is-open .v2-mm-num { opacity: .95; }
.v2-mm-w { position: relative; display: inline-block; }
.v2-mm-ring { position: absolute; left: -.42em; top: -.1em; width: calc(100% + .9em); max-width: none; height: 1.22em; overflow: visible; pointer-events: none; }
.v2-mm-ring path { fill: none; stroke: var(--rx-accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .5s cubic-bezier(.25,.46,.45,.94) .8s; }
html[data-menu] .mobile-menu.is-open .v2-mm-ring path { stroke-dashoffset: 0 !important; }
html[data-menu] .mobile-menu-cta .scribble-underline__svg path { transition: stroke-dashoffset .45s cubic-bezier(.25,.46,.45,.94) 1.15s; }
html[data-menu] .mobile-menu.is-open .mobile-menu-cta .scribble-underline__svg path { stroke-dashoffset: 0 !important; }
.v2-mm-figs, .v2-mm-wipe, .v2-mm-fill { display: none; }
.v2-mm-ball { position: fixed; left: 0; top: 0; z-index: 3200; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #d6f0a8, var(--rx-accent) 55%, #4c7d10); box-shadow: inset -3px -4px 0 rgba(14,14,14,.35), 0 6px 14px rgba(0,0,0,.35); will-change: transform; }

/* a: the team sheet */
html[data-menu="a"] .mobile-menu { transform: translateY(-101%); transform-origin: 50% 0; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
html[data-menu="a"] .mobile-menu.is-open { transform: none; }
html[data-menu="a"] .v2-mm-word { display: inline-block; clip-path: inset(-12% 100% -12% -2%); transition: clip-path .34s cubic-bezier(.2,.7,.3,1); transition-delay: calc(.3s + var(--i, 0) * .065s); }
html[data-menu="a"] .mobile-menu.is-open .v2-mm-word { clip-path: inset(-12% -4% -12% -2%); }

/* b: the locker door */
html[data-menu="b"] body { perspective: 1400px; }
html[data-menu="b"] main, html[data-menu="b"] body > footer, html[data-menu="b"] .page > footer { transform-origin: 0 50%; transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s; }
html[data-menu="b"].v2-mm-open main, html[data-menu="b"].v2-mm-open body > footer, html[data-menu="b"].v2-mm-open .page > footer { transform: translateX(58%) rotateY(-24deg) scale(.86); filter: brightness(.45); }
html[data-menu="b"] .mobile-menu { width: 84vw; background: #0e0e0e; box-shadow: 28px 0 60px rgba(0,0,0,.55); transform: translateX(-102%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html[data-menu="b"] .mobile-menu.is-open { transform: none; }
html[data-menu="b"] .mobile-menu nav a { transform: translateX(-28px); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; transition-delay: calc(.18s + var(--i, 0) * .05s); }
html[data-menu="b"] .mobile-menu.is-open nav a { transform: none; opacity: 1; }
html[data-menu="b"] .v2-mm-figs { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
html[data-menu="b"] .v2-mm-fig { position: absolute; color: #262c25; opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1) .25s, opacity .6s .25s; }
html[data-menu="b"] .v2-mm-fig svg, html[data-menu="b"] .v2-mm-fig { fill: currentColor; }
html[data-menu="b"] .v2-mm-fig-a { right: -8%; bottom: 6%; width: 52%; transform: translateX(50px) rotate(4deg); }
html[data-menu="b"] .v2-mm-fig-b { left: -12%; top: 6%; width: 40%; transform: translateX(-50px) rotate(-6deg); }
html[data-menu="b"] .mobile-menu.is-open .v2-mm-fig { opacity: 1; transform: none; }

/* c: the kick */
html[data-menu="c"] .mobile-menu { background: transparent; }
html[data-menu="c"] .v2-mm-wipe { display: block; position: absolute; inset: -2%; width: 104%; height: 104%; z-index: 0; pointer-events: none; }
html[data-menu="c"] .v2-mm-wipe path { fill: none; stroke-linecap: round; }
html[data-menu="c"] .v2-mm-wipe .wl { stroke: var(--rx-accent); stroke-width: 7; }
html[data-menu="c"] .v2-mm-wipe .ws { stroke: #0e0e0e; stroke-width: 34; }
html[data-menu="c"] .mobile-menu.is-open .v2-mm-wipe path { animation: v2-wipe-draw var(--wd, .27s) steps(6, end) calc(var(--wdel, 0s) + .18s) forwards; }
html[data-menu="c"] .v2-mm-fill { display: block; position: absolute; inset: 0; z-index: 0; background: #0e0e0e; opacity: 0; pointer-events: none; }
html[data-menu="c"] .mobile-menu.is-open .v2-mm-fill { animation: v2-wipe-fillin .12s linear .72s forwards; }
html[data-menu="c"] .mobile-menu nav, html[data-menu="c"] .mobile-menu-cta { position: relative; z-index: 1; }
html[data-menu="c"] .mobile-menu-cta { position: absolute; }
html[data-menu="c"] .mobile-menu nav a { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.5s + var(--i, 0) * .07s); }
html[data-menu="c"] .mobile-menu.is-open nav a { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html[data-menu] .mobile-menu, html[data-menu] .mobile-menu * { transition: none !important; animation: none !important; } }