/* Dynamites Youth Soccer */
:root {
  --knit: #B3B1AE; --ink: #1A1919; --crimson: #AF1520; --crimson-press: #8E111A; --charcoal: #464040;
  --chalk: #F7F6F4; --night: #0F0E0E; --stitch: #8C8B89; --plate-foot: #B9B6B1; --field: #F1EFEB;
  --ring: var(--ink); --yes: var(--crimson-press); --no: var(--charcoal);
  --r: 22px; --r-s: 12px;
  --mast-h: 60px; --dock-h: 70px; --gutter: 16px;
  --font-head: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
@font-face { font-family: "Archivo Black"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/archivo-black-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.5 var(--font-body); color: var(--ink); background-color: var(--knit);
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.05)), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); min-height: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--crimson); color: var(--chalk); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; }
.skip:focus { left: 8px; background: var(--chalk); color: var(--ink); padding: 8px 12px; border-radius: var(--r-s); }
.kit { position: relative; }
.ages { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page { padding-bottom: calc(var(--dock-h) + 20px); }
h1, h2, h3, .club, .ask, .place-addr, .facts li, .big, .n, .arch-t { font-family: var(--font-head); font-weight: 400; }

/* ---- mast --------------------------------------------------------------------- */
.mast { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--mast-h); padding: 0 var(--gutter); background: rgba(247,246,244,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mast-home { display: inline-flex; align-items: center; min-height: 48px; }
.wordmark { height: 42px; width: auto; }
.mast-phone { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 700 15px/1 var(--font-body); color: var(--chalk); background: var(--crimson-press); border-radius: 999px; text-decoration: none; }

/* ---- hero -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--mast-h)); display: grid; grid-template-rows: auto minmax(230px, 1fr) auto; color: var(--chalk); scroll-margin-top: var(--mast-h); }
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #3a3a3a; }
.yard, .yard img, .yard-alt, .yard-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yard img { object-position: 50% 45%; }
.yard-alt { z-index: 1; display: none; background-size: cover; background-position: 50% 45%; opacity: 0; transition: opacity 420ms ease; }
.yard-video { z-index: 2; display: none; opacity: 0; transition: opacity 420ms ease; }
.yard-video[src] { display: block; }
.scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(15,14,14,.60) 0%, rgba(15,14,14,.32) 24%, rgba(15,14,14,.06) 42%, rgba(15,14,14,.10) 60%, rgba(15,14,14,.55) 82%, rgba(15,14,14,.72) 100%); }
/* dust in the light: a dozen drifting motes, pure CSS, always alive */
.dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.dust span { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(255,246,230,.95), rgba(255,246,230,0) 70%); filter: blur(.4px); opacity: 0; animation: mote var(--d) linear var(--dl) infinite; }
@keyframes mote { 0% { transform: translate(0,0); opacity: 0; } 12% { opacity: .55; } 88% { opacity: .35; } 100% { transform: translate(var(--dx), -60vh); opacity: 0; } }
.stage { position: relative; z-index: 1; grid-row: 2; min-height: clamp(230px, 36svh, 440px); }
.cut { --base: translateX(-50%); position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 1533 / 2048; transform: var(--base); transform-origin: 50% 3%; max-width: 100%; container-type: size; filter: drop-shadow(0 26px 30px rgba(0,0,0,.5)) drop-shadow(0 4px 6px rgba(0,0,0,.3)); animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: var(--base) rotate(-.9deg); } 50% { transform: var(--base) rotate(.9deg) translateY(-4px); } }
.cut-img { width: 100%; height: 100%; object-fit: contain; }
.emblem { position: absolute; left: 50%; top: 17.5%; width: 21%; transform: translateX(-50%); mix-blend-mode: multiply; opacity: .92; pointer-events: none; }
.arch { position: absolute; left: 50%; top: 28.5%; width: 60%; transform: translateX(-50%); mix-blend-mode: multiply; filter: url(#cloth); pointer-events: none; }
.arch-t { font-size: 96px; fill: var(--crimson); letter-spacing: .1em; }
.n { position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); margin: 0; font-size: 36cqh; line-height: 1; letter-spacing: -.02em; color: var(--crimson); mix-blend-mode: multiply; filter: url(#cloth); opacity: 0; pointer-events: none; }
.n.is-out { color: var(--charcoal); }
.hero-copy { position: relative; z-index: 1; padding: 14px var(--gutter) 0; }
.where { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.club { margin: 0; font-size: clamp(17px, 4.8vw, 24px); line-height: 1.1; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.ask { margin: 6px 0 0; font-size: clamp(36px, 10.4vw, 52px); line-height: .96; letter-spacing: -.02em; max-width: 12ch; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
/* the age panel: a frosted plate so the numbers never sink into the photo */
.console { position: relative; z-index: 1; grid-row: 3; margin: 0 var(--gutter) calc(var(--dock-h) + 16px); padding: 12px 12px 14px; background: rgba(15,14,14,.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.chip { position: relative; min-height: 46px; display: grid; place-items: center; font: 800 20px/1 var(--font-body); color: rgba(247,246,244,.86); border-radius: var(--r-s); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background 140ms, color 140ms, transform 140ms; }
.chip:hover { background: rgba(255,255,255,.10); color: var(--chalk); }
.chip:active { transform: scale(.96); }
.chip-out { font-size: 14px; letter-spacing: .02em; }
.verdict { margin-top: 10px; min-height: 0; }
.v { display: none; margin: 0; font: 800 clamp(18px, 5vw, 24px)/1.15 var(--font-body); color: var(--chalk); }
.v strong { font-weight: 900; }
.free { display: inline-block; margin: 6px 0 0; padding: 4px 10px; font: 700 14px/1.2 var(--font-body); color: var(--chalk); background: var(--crimson); border-radius: 999px; }
.acts { display: none; margin-top: 14px; gap: 10px 12px; flex-wrap: wrap; align-items: center; }
/* buttons */
.call, .sms, .book, .btn, .dock-call, .dock-sms { display: none; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; font: 700 17px/1 var(--font-body); letter-spacing: .005em; text-decoration: none; text-align: center; border: 0; border-radius: 14px; cursor: pointer; transition: transform 140ms, box-shadow 140ms, filter 140ms; }
.call, .btn, .dock-call { background: linear-gradient(180deg, #C4182A, #9A1019); color: var(--chalk); box-shadow: 0 10px 24px rgba(142,17,26,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.sms, .dock-sms { background: rgba(247,246,244,.14); color: var(--chalk); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.book { background: var(--chalk); color: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.call:hover, .btn:hover, .dock-call:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(142,17,26,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.book:hover { transform: translateY(-2px); }
.sms:hover, .dock-sms:hover { background: rgba(247,246,244,.22); }
.call:active, .sms:active, .book:active, .btn:active, .dock-call:active, .dock-sms:active { transform: translateY(1px) scale(.99); }
.out-note { display: none; margin: 10px 0 0; font-size: 14px; color: var(--chalk); }
.hero :focus-visible { outline-color: var(--chalk); }

/* ---- film bands ---------------------------------------------------------------------- */
.film { position: relative; isolation: isolate; overflow: clip; min-height: 92svh; display: grid; align-items: end; background: var(--night); color: var(--ink); }
.film-short { min-height: 74svh; }
.film-still, .film-still img, .film-video, .film-still-ns { position: absolute; left: 0; right: 0; top: -8%; height: 116%; width: 100%; object-fit: cover; z-index: 0; will-change: transform; }
.film-video { display: none; }
.film-video[src] { display: block; }
.film-plate { position: relative; z-index: 1; margin: 0 var(--gutter) 36px; padding: 24px 22px 26px; max-width: 560px; background: rgba(247,246,244,.96); border-radius: var(--r); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.film-plate h2 { margin: 0 0 10px; font-size: clamp(34px, 8.6vw, 64px); line-height: .96; letter-spacing: -.02em; }
.film-plate p { margin: 0; font-size: 17px; }
.plate-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.plate-acts .call, .plate-acts .book, .film-plate .call { display: inline-flex; }
.film-plate--right { margin-left: auto; }

/* ---- knit bands ------------------------------------------------------------------------ */
.band { padding: 60px var(--gutter); scroll-margin-top: var(--mast-h); }
.kicker { margin: 0 0 8px; font: 700 14px/1.3 var(--font-body); letter-spacing: .02em; color: var(--crimson-press); }
.band h2 { margin: 0 0 16px; font-size: clamp(34px, 9vw, 76px); line-height: .96; letter-spacing: -.02em; color: var(--ink); }
.band h3 { margin: 0 0 8px; font-size: clamp(24px, 6vw, 34px); line-height: 1; }
.band p { margin: 0 0 12px; font-size: 17px; max-width: 60ch; }
.big { font-size: clamp(20px, 4.8vw, 28px) !important; line-height: 1.15; }
.coach { display: grid; gap: 20px; }
.coach-photo img, .club-still img, .place-still img, .map img { border-radius: var(--r); }
.coach-photo img { width: 100%; max-width: 460px; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.club-grid { display: grid; gap: 24px; }
.club-still img { width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.quote { margin: 0 0 22px; padding: 20px 20px 22px; font-size: 20px; line-height: 1.35; color: var(--chalk); background: linear-gradient(180deg, #B8172A, #8E111A); border-radius: var(--r); box-shadow: 0 16px 40px rgba(142,17,26,.28); }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.facts li { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 10px 16px 10px 12px; font-size: clamp(17px, 4.6vw, 24px); line-height: 1.1; color: var(--ink); background: rgba(247,246,244,.92); border-radius: 999px; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.facts li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--crimson); }
.facts li:nth-child(2) { margin-left: 8%; } .facts li:nth-child(3) { margin-left: 3%; } .facts li:nth-child(4) { margin-left: 14%; }
.place-addr { display: block; margin: 4px 0 18px; font-size: clamp(30px, 8.6vw, 64px); line-height: .96; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.place-grid { display: grid; gap: 16px; }
.map { display: block; border-radius: var(--r); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.map img { width: 100%; }
.place-still img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.map-credit { margin: 10px 0 0; font-size: 14px; }
.band-book { padding-bottom: 72px; }
.book-grid { display: grid; gap: 28px; }
.book-copy .big { margin: 0 0 20px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px 6px 10px; font-size: 17px; font-weight: 700; text-decoration: none; background: rgba(247,246,244,.7); border-radius: 999px; width: fit-content; max-width: 100%; }
.mail { overflow-wrap: anywhere; }
.sign { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--crimson-press); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* the booking card */
.form { padding: 0; background: var(--chalk); border-radius: var(--r); box-shadow: 0 28px 60px rgba(0,0,0,.25); overflow: hidden; }
.form-head { padding: 22px 22px 20px; color: var(--chalk); background: linear-gradient(135deg, #C4182A, #8E111A); }
.form-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.form h3 { margin: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.02; color: var(--chalk); }
.form-body { padding: 20px 22px 22px; }
.form-body > p { margin: 0 0 16px; font-size: 15px; color: #444; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 14px; font-weight: 700; }
.field input, .field select { min-height: 52px; padding: 10px 16px; font: 17px var(--font-body); color: var(--ink); background: var(--field); border: 2px solid transparent; border-radius: 14px; transition: border-color 140ms, background 140ms; }
.field input:hover, .field select:hover { background: #ECE9E4; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231A1919' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--crimson); background: #fff; }
.field input::placeholder { color: #8C8B89; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn { display: flex; width: 100%; min-height: 58px; margin-top: 6px; font-size: 18px; }
.form-foot { margin: 14px 0 0; font-size: 14px; color: #444; }
.form-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 700; color: var(--ink); }
.foot { padding: 32px var(--gutter) 40px; background: var(--charcoal); color: var(--chalk); }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.foot-row a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration: none; }
.legal { margin: 0; font-size: 14px; }

/* ---- dock --------------------------------------------------------------------------------- */
.dock { position: fixed; left: 10px; right: 10px; bottom: 10px; height: var(--dock-h); z-index: 40; display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
.dock-call { display: flex; min-height: var(--dock-h); font-size: 18px; border-radius: 18px; }
.dock-sms { min-height: var(--dock-h); padding: 0 8px; font-size: 15px; border-radius: 18px; background: rgba(26,25,25,.82); border: 1px solid rgba(255,255,255,.16); }
.dock-sms-off { background: rgba(26,25,25,.82); color: var(--chalk); }
.dock-sms-off.is-on { display: flex; }

/* ---- cookie note ---------------------------------------------------------------------------- */
.cookie { position: fixed; left: 10px; right: 10px; bottom: calc(var(--dock-h) + 20px); z-index: 45; display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 16px; background: rgba(247,246,244,.97); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.28); font-size: 14px; line-height: 1.35; }
.cookie p { margin: 0; flex: 1; }
.cookie a { font-weight: 700; }
.cookie button { flex: none; min-height: 44px; padding: 0 18px; font: 700 15px/1 var(--font-body); color: var(--chalk); background: var(--ink); border: 0; border-radius: 12px; cursor: pointer; }
.cookie[hidden] { display: none; }

/* ---- secondary pages ------------------------------------------------------------------------ */
.err { min-height: calc(100svh - var(--dock-h) - 24px); padding: 48px var(--gutter) calc(var(--dock-h) + 28px); display: grid; align-content: start; gap: 14px; max-width: 720px; }
.plaque { width: fit-content; padding: 8px 24px 12px; background: var(--chalk); border-radius: var(--r); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.err p.n-static { margin: 0; font-family: var(--font-head); font-size: clamp(80px, 24vw, 150px); line-height: .9; color: var(--crimson); max-width: none; }
.err h1 { margin: 6px 0 0; font-size: clamp(34px, 9vw, 68px); line-height: .96; letter-spacing: -.02em; }
.err p { margin: 0; font-size: 17px; max-width: 60ch; }
.call-inline, .err a, .legal-page p a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; margin: 2px 0; font: 700 16px/1 var(--font-body); text-decoration: none; color: var(--chalk); background: var(--yes); border-radius: 14px; }
.legal-page { padding: 40px var(--gutter) calc(var(--dock-h) + 28px); max-width: 760px; }
.legal-page h1 { font-size: clamp(34px, 9vw, 64px); line-height: .96; margin: 0 0 16px; letter-spacing: -.02em; }
.legal-page h2 { font-size: clamp(22px, 5.6vw, 34px); line-height: 1.05; margin: 28px 0 8px; }
.legal-page p, .legal-page li { font-size: 16px; }

/* ---- motion: reveal (JS adds .rv on init and .in when seen; no JS = everything simply visible) */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-2 { transition-delay: .1s; } .rv-3 { transition-delay: .2s; } .rv-4 { transition-delay: .3s; }
@keyframes drift { from { translate: 0 -6%; scale: 1.06; } to { translate: 0 6%; scale: 1; } }
@keyframes settle { from { translate: 0 6%; } to { translate: 0 -3%; } }
@keyframes lift { from { translate: 0 0; } to { translate: 0 -14%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .film-still img, .film-video, .film-still-ns { animation: drift linear both; animation-timeline: view(); }
    .coach-photo img, .club-still img, .place-still img, .map { animation: settle linear both; animation-timeline: view(); }
    .stage { animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  }
}
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---- desktop ---------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --gutter: 6vw; --mast-h: 68px; }
  .page { padding-bottom: 0; }
  .dock { display: none; }
  .cookie { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  .wordmark { height: 48px; }
  .mast-phone { font-size: 16px; min-height: 48px; padding: 0 18px; }
  .hero { grid-template-columns: minmax(0, 48vw) 1fr; grid-template-rows: 1fr auto; }
  .scrim { background: linear-gradient(90deg, rgba(15,14,14,.70) 0%, rgba(15,14,14,.40) 40%, rgba(15,14,14,.04) 68%), linear-gradient(180deg, rgba(15,14,14,.18), rgba(15,14,14,0) 28%, rgba(15,14,14,.28) 100%); }
  .stage { grid-column: 2; grid-row: 1 / span 2; min-height: 0; }
  .cut { --base: none; left: auto; right: 9vw; top: 6svh; height: 84svh; transform: none; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: end; padding: 9vh var(--gutter) 0; }
  .where { font-size: 16px; }
  .club { font-size: 26px; }
  .ask { font-size: clamp(56px, 5.4vw, 92px); max-width: 11ch; }
  .console { grid-column: 1; grid-row: 2; align-self: start; margin: 22px var(--gutter) 8vh; max-width: 640px; padding: 16px 16px 18px; }
  .chips { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
  .chip { min-height: 46px; font-size: 20px; }
  .chip-out { font-size: 13px; }
  .v { font-size: 26px; }
  .acts { display: flex; }
  .call, .book { display: inline-flex; }
  .film-plate { margin: 0 var(--gutter) 9vh; padding: 32px 32px 34px; max-width: 640px; }
  .film-plate p { font-size: 19px; }
  .band { padding: 110px var(--gutter); }
  .coach { grid-template-columns: minmax(0, 28vw) 1fr; gap: 5vw; align-items: center; }
  .club-grid { grid-template-columns: 1fr minmax(0, 42vw); gap: 5vw; align-items: center; }
  .place-grid { grid-template-columns: minmax(0, 36vw) 1fr; gap: 3vw; }
  .book-grid { grid-template-columns: 1fr minmax(360px, 42vw); gap: 6vw; align-items: start; }
  .quote { font-size: 22px; padding: 26px 26px 28px; }
}
@media (min-width: 900px) and (max-width: 1279px) { .hero { grid-template-columns: minmax(0, 54vw) 1fr; } .chips { grid-template-columns: repeat(7, minmax(0, 1fr)); } .ask { font-size: clamp(46px, 4.8vw, 72px); } .cut { right: 4vw; height: 76svh; top: 10svh; } }
@media (min-width: 900px) and (max-height: 760px) { .hero-copy { padding-top: 5vh; } .console { margin-bottom: 5vh; } .club { font-size: 22px; } .ask { font-size: clamp(42px, 4.4vw, 64px); } }
/* short phones */
@media (max-width: 899px) and (max-height: 760px) {
  .club { display: none; } .hero-copy { padding-top: 8px; } .ask { font-size: clamp(30px, 8.6vw, 40px); }
  .stage { min-height: 196px; } .hero { grid-template-rows: auto minmax(196px, 1fr) auto; }
  .console { padding: 10px 10px 12px; margin-bottom: calc(var(--dock-h) + 14px); }
  .chip { min-height: 44px; font-size: 19px; } .verdict { margin-top: 6px; } .v { font-size: 17px; } .free { margin-top: 4px; font-size: 13.5px; }
}
@media (max-width: 379px) { :root { --gutter: 12px; --dock-h: 62px; } .chip { min-width: 40px; min-height: 42px; font-size: 17px; } .chip-out { font-size: 12.5px; } .stage { min-height: 150px; } .hero { grid-template-rows: auto minmax(150px, 1fr) auto; } .ask { font-size: 28px; } .v { font-size: 16px; } .dock-call { font-size: 16px; } .dock { grid-template-columns: 1fr 96px; } .dock-sms { font-size: 14px; } }
@media (max-width: 899px) and (max-height: 600px) { .stage { min-height: 172px; } .hero { grid-template-rows: auto minmax(172px, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .yard-video, .film-video { display: none !important; } .cut, .dust span { animation: none; } .rv { opacity: 1; transform: none; transition: none; } .chip, .call, .sms, .btn, .n, .yard-alt { transition: none; } }

/* ---- the age machine ------------------------------------------------------ */
#age-4:checked ~ .page .n-4 { opacity: 1; }
#age-4:checked ~ .page .v-4 { display: block; }
#age-4:checked ~ .page .sms-4 { display: inline-flex; }
#age-4:checked ~ .dock .dock-sms-4 { display: flex; }
#age-4:checked ~ .page .chip-4 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-4:focus-visible ~ .page .chip-4 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-5:checked ~ .page .n-5 { opacity: 1; }
#age-5:checked ~ .page .v-5 { display: block; }
#age-5:checked ~ .page .sms-5 { display: inline-flex; }
#age-5:checked ~ .dock .dock-sms-5 { display: flex; }
#age-5:checked ~ .page .chip-5 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-5:focus-visible ~ .page .chip-5 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-6:checked ~ .page .n-6 { opacity: 1; }
#age-6:checked ~ .page .v-6 { display: block; }
#age-6:checked ~ .page .sms-6 { display: inline-flex; }
#age-6:checked ~ .dock .dock-sms-6 { display: flex; }
#age-6:checked ~ .page .chip-6 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-6:focus-visible ~ .page .chip-6 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-7:checked ~ .page .n-7 { opacity: 1; }
#age-7:checked ~ .page .v-7 { display: block; }
#age-7:checked ~ .page .sms-7 { display: inline-flex; }
#age-7:checked ~ .dock .dock-sms-7 { display: flex; }
#age-7:checked ~ .page .chip-7 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-7:focus-visible ~ .page .chip-7 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-8:checked ~ .page .n-8 { opacity: 1; }
#age-8:checked ~ .page .v-8 { display: block; }
#age-8:checked ~ .page .sms-8 { display: inline-flex; }
#age-8:checked ~ .dock .dock-sms-8 { display: flex; }
#age-8:checked ~ .page .chip-8 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-8:focus-visible ~ .page .chip-8 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-9:checked ~ .page .n-9 { opacity: 1; }
#age-9:checked ~ .page .v-9 { display: block; }
#age-9:checked ~ .page .sms-9 { display: inline-flex; }
#age-9:checked ~ .dock .dock-sms-9 { display: flex; }
#age-9:checked ~ .page .chip-9 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-9:focus-visible ~ .page .chip-9 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-10:checked ~ .page .n-10 { opacity: 1; }
#age-10:checked ~ .page .v-10 { display: block; }
#age-10:checked ~ .page .sms-10 { display: inline-flex; }
#age-10:checked ~ .dock .dock-sms-10 { display: flex; }
#age-10:checked ~ .page .chip-10 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-10:focus-visible ~ .page .chip-10 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-11:checked ~ .page .n-11 { opacity: 1; }
#age-11:checked ~ .page .v-11 { display: block; }
#age-11:checked ~ .page .sms-11 { display: inline-flex; }
#age-11:checked ~ .dock .dock-sms-11 { display: flex; }
#age-11:checked ~ .page .chip-11 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-11:focus-visible ~ .page .chip-11 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-12:checked ~ .page .n-12 { opacity: 1; }
#age-12:checked ~ .page .v-12 { display: block; }
#age-12:checked ~ .page .sms-12 { display: inline-flex; }
#age-12:checked ~ .dock .dock-sms-12 { display: flex; }
#age-12:checked ~ .page .chip-12 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-12:focus-visible ~ .page .chip-12 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-13:checked ~ .page .n-13 { opacity: 1; }
#age-13:checked ~ .page .v-13 { display: block; }
#age-13:checked ~ .page .sms-13 { display: inline-flex; }
#age-13:checked ~ .dock .dock-sms-13 { display: flex; }
#age-13:checked ~ .page .chip-13 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-13:focus-visible ~ .page .chip-13 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-14:checked ~ .page .n-14 { opacity: 1; }
#age-14:checked ~ .page .v-14 { display: block; }
#age-14:checked ~ .page .sms-14 { display: inline-flex; }
#age-14:checked ~ .dock .dock-sms-14 { display: flex; }
#age-14:checked ~ .page .chip-14 { color: var(--chalk); background: var(--crimson); box-shadow: 0 8px 20px rgba(175,21,32,.45); }
#age-14:focus-visible ~ .page .chip-14 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-3:checked ~ .page .n-3 { opacity: 1; }
#age-3:checked ~ .page .v-3 { display: block; }
#age-3:checked ~ .page .out-note { display: block; }
#age-3:checked ~ .page .chip-3 { color: var(--chalk); background: rgba(247,246,244,.18); }
#age-3:focus-visible ~ .page .chip-3 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-15:checked ~ .page .n-15 { opacity: 1; }
#age-15:checked ~ .page .v-15 { display: block; }
#age-15:checked ~ .page .out-note { display: block; }
#age-15:checked ~ .page .chip-15 { color: var(--chalk); background: rgba(247,246,244,.18); }
#age-15:focus-visible ~ .page .chip-15 { outline: 3px solid var(--chalk); outline-offset: 2px; }
#age-3:checked ~ .dock .dock-sms-off, #age-15:checked ~ .dock .dock-sms-off { display: flex; }
#age-3:checked ~ .page .yard-a { display: block; opacity: 1; } #age-3:checked ~ .page .yard-video-a[src] { opacity: 1; } #age-3:checked ~ .page .yard-video-b { opacity: 0; }
#age-4:checked ~ .page .yard-a { display: block; opacity: 1; } #age-4:checked ~ .page .yard-video-a[src] { opacity: 1; } #age-4:checked ~ .page .yard-video-b { opacity: 0; }
#age-5:checked ~ .page .yard-a { display: block; opacity: 1; } #age-5:checked ~ .page .yard-video-a[src] { opacity: 1; } #age-5:checked ~ .page .yard-video-b { opacity: 0; }
#age-6:checked ~ .page .yard-a { display: block; opacity: 1; } #age-6:checked ~ .page .yard-video-a[src] { opacity: 1; } #age-6:checked ~ .page .yard-video-b { opacity: 0; }
#age-7:checked ~ .page .yard-video-b[src] { opacity: 1; }
#age-8:checked ~ .page .yard-video-b[src] { opacity: 1; }
#age-9:checked ~ .page .yard-video-b[src] { opacity: 1; }
#age-10:checked ~ .page .yard-video-b[src] { opacity: 1; }
#age-11:checked ~ .page .yard-c { display: block; opacity: 1; } #age-11:checked ~ .page .yard-video-c[src] { opacity: 1; } #age-11:checked ~ .page .yard-video-b { opacity: 0; }
#age-12:checked ~ .page .yard-c { display: block; opacity: 1; } #age-12:checked ~ .page .yard-video-c[src] { opacity: 1; } #age-12:checked ~ .page .yard-video-b { opacity: 0; }
#age-13:checked ~ .page .yard-c { display: block; opacity: 1; } #age-13:checked ~ .page .yard-video-c[src] { opacity: 1; } #age-13:checked ~ .page .yard-video-b { opacity: 0; }
#age-14:checked ~ .page .yard-c { display: block; opacity: 1; } #age-14:checked ~ .page .yard-video-c[src] { opacity: 1; } #age-14:checked ~ .page .yard-video-b { opacity: 0; }
#age-15:checked ~ .page .yard-c { display: block; opacity: 1; } #age-15:checked ~ .page .yard-video-c[src] { opacity: 1; } #age-15:checked ~ .page .yard-video-b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .n { transition: opacity 120ms linear; }
  #age-3:checked ~ .page .n-3 { animation: press 160ms ease-out; } #age-3:checked ~ .page .chip-3 { animation: pop 260ms ease-out; }
  #age-4:checked ~ .page .n-4 { animation: press 160ms ease-out; } #age-4:checked ~ .page .chip-4 { animation: pop 260ms ease-out; }
  #age-5:checked ~ .page .n-5 { animation: press 160ms ease-out; } #age-5:checked ~ .page .chip-5 { animation: pop 260ms ease-out; }
  #age-6:checked ~ .page .n-6 { animation: press 160ms ease-out; } #age-6:checked ~ .page .chip-6 { animation: pop 260ms ease-out; }
  #age-7:checked ~ .page .n-7 { animation: press 160ms ease-out; } #age-7:checked ~ .page .chip-7 { animation: pop 260ms ease-out; }
  #age-8:checked ~ .page .n-8 { animation: press 160ms ease-out; } #age-8:checked ~ .page .chip-8 { animation: pop 260ms ease-out; }
  #age-9:checked ~ .page .n-9 { animation: press 160ms ease-out; } #age-9:checked ~ .page .chip-9 { animation: pop 260ms ease-out; }
  #age-10:checked ~ .page .n-10 { animation: press 160ms ease-out; } #age-10:checked ~ .page .chip-10 { animation: pop 260ms ease-out; }
  #age-11:checked ~ .page .n-11 { animation: press 160ms ease-out; } #age-11:checked ~ .page .chip-11 { animation: pop 260ms ease-out; }
  #age-12:checked ~ .page .n-12 { animation: press 160ms ease-out; } #age-12:checked ~ .page .chip-12 { animation: pop 260ms ease-out; }
  #age-13:checked ~ .page .n-13 { animation: press 160ms ease-out; } #age-13:checked ~ .page .chip-13 { animation: pop 260ms ease-out; }
  #age-14:checked ~ .page .n-14 { animation: press 160ms ease-out; } #age-14:checked ~ .page .chip-14 { animation: pop 260ms ease-out; }
  #age-15:checked ~ .page .n-15 { animation: press 160ms ease-out; } #age-15:checked ~ .page .chip-15 { animation: pop 260ms ease-out; }
}
@keyframes press { 0% { transform: translate(-50%,-50%) scale(1); } 45% { transform: translate(-50%,-50%) scale(.975); } 100% { transform: translate(-50%,-50%) scale(1); } }
/* age-band backgrounds A/C: fetched only when chosen */
.yard-a { background-image: image-set(url("../img/hero/band-a-v-960.avif") type("image/avif"), url("../img/hero/band-a-v-960.webp") type("image/webp")); }
.yard-c { background-image: image-set(url("../img/hero/band-c-v-960.avif") type("image/avif"), url("../img/hero/band-c-v-960.webp") type("image/webp")); }
@media (min-resolution: 2dppx) and (max-width: 899px) {
  .yard-a { background-image: image-set(url("../img/hero/band-a-v-1440.avif") type("image/avif"), url("../img/hero/band-a-v-1440.webp") type("image/webp")); }
  .yard-c { background-image: image-set(url("../img/hero/band-c-v-1440.avif") type("image/avif"), url("../img/hero/band-c-v-1440.webp") type("image/webp")); }
}
@media (min-width: 900px) {
  .yard-a { background-image: image-set(url("../img/hero/band-a-h-1440.avif") type("image/avif"), url("../img/hero/band-a-h-1440.webp") type("image/webp")); }
  .yard-c { background-image: image-set(url("../img/hero/band-c-h-1440.avif") type("image/avif"), url("../img/hero/band-c-h-1440.webp") type("image/webp")); }
}
@media (min-width: 900px) and (min-resolution: 1.5dppx) {
  .yard-a { background-image: image-set(url("../img/hero/band-a-h-2160.avif") type("image/avif"), url("../img/hero/band-a-h-2160.webp") type("image/webp")); }
  .yard-c { background-image: image-set(url("../img/hero/band-c-h-2160.avif") type("image/avif"), url("../img/hero/band-c-h-2160.webp") type("image/webp")); }
}
img.defer { background: rgba(0,0,0,.06); }
/* v5.1 */
.arch-t { font-size: 66px; letter-spacing: .08em; }
.arch { width: 64%; top: 29%; }
@media (max-width: 899px) { .cookie { top: calc(var(--mast-h) + 8px); bottom: auto; padding: 10px 10px 10px 14px; font-size: 13px; } }
@media (max-width: 899px) { .cookie { top: auto; bottom: calc(var(--dock-h) + 20px); } }
/* dust motes: positions in CSS so the CSP can stay style-src self */
.dust span:nth-child(1) { --x:8%; --y:88%; --s:3px; --d:14s; --dl:-2s; --dx:40px; }
.dust span:nth-child(2) { --x:18%; --y:72%; --s:2px; --d:11s; --dl:-6s; --dx:-30px; }
.dust span:nth-child(3) { --x:27%; --y:95%; --s:4px; --d:16s; --dl:-9s; --dx:60px; }
.dust span:nth-child(4) { --x:36%; --y:80%; --s:2px; --d:12s; --dl:-1s; --dx:-20px; }
.dust span:nth-child(5) { --x:44%; --y:90%; --s:3px; --d:13s; --dl:-7s; --dx:35px; }
.dust span:nth-child(6) { --x:53%; --y:70%; --s:2px; --d:10s; --dl:-4s; --dx:-45px; }
.dust span:nth-child(7) { --x:61%; --y:92%; --s:4px; --d:15s; --dl:-11s; --dx:25px; }
.dust span:nth-child(8) { --x:70%; --y:84%; --s:2px; --d:12s; --dl:-3s; --dx:-35px; }
.dust span:nth-child(9) { --x:78%; --y:96%; --s:3px; --d:14s; --dl:-8s; --dx:50px; }
.dust span:nth-child(10) { --x:86%; --y:76%; --s:2px; --d:11s; --dl:-5s; --dx:-25px; }
.dust span:nth-child(11) { --x:93%; --y:90%; --s:3px; --d:13s; --dl:-10s; --dx:30px; }
.dust span:nth-child(12) { --x:12%; --y:60%; --s:2px; --d:17s; --dl:-12s; --dx:-15px; }
.dust span:nth-child(13) { --x:49%; --y:60%; --s:2px; --d:15s; --dl:-0s; --dx:20px; }
.dust span:nth-child(14) { --x:88%; --y:58%; --s:2px; --d:16s; --dl:-6s; --dx:-40px; }