/* PIN COURT — site styles
   Brand: forest #103F2E · deep #0A2A1F · lime #D7EE36 · cream #FFF8E8 */

/* Self-hosted fonts (SIL Open Font Licence): no Google dependency, faster on mobile */
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }

:root {
  --forest: #103F2E;
  --deep: #0A2A1F;
  --lime: #D7EE36;
  --cream: #FFF8E8;
  --paper: #FFFDF6;
  --ink: #0A2A1F;
  --muted: #4E6B5F;
  --line: #D9D3C2;
  --error: #B42318;
  --radius: 14px;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  padding: 22px 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header .brand img { height: 46px; width: auto; }
.nav { display: flex; gap: 6px; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: 15px;
  color: var(--cream); padding: 9px 14px; border-radius: 999px;
  border: 1px solid transparent; transition: border-color .2s, background .2s;
}
.nav a:hover { border-color: rgba(255,248,232,.35); }
.nav a[aria-current="page"] { background: rgba(255,248,232,.1); border-color: rgba(255,248,232,.25); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, #15523C 0%, var(--forest) 45%, var(--deep) 100%);
  color: var(--cream);
  padding: 150px 0 110px;
}
.hero .court {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%) rotate(-8deg);
  width: 640px; max-width: none; opacity: .16; pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-inner > div { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lime);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--lime); }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; margin: 0; letter-spacing: -.01em; word-spacing: .12em; }
.hero h1 {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(44px, 7.2vw, 88px); margin: 18px 0 22px;
}
.hero h1 em { font-style: normal; color: var(--lime); }
.hero p.lede { font-size: clamp(17px, 1.6vw, 20px); max-width: 33ch; color: rgba(255,248,232,.86); margin: 0 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-mark { justify-self: center; width: min(300px, 70%); filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.hero-mark img { width: 100%; animation: drop 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

.hero-wide .hero-inner { grid-template-columns: 1fr; }
.hero-wide .hero-mark { display: none; }
.hero-wide .lede { max-width: 46ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  padding: 16px 26px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-lime { background: var(--lime); color: var(--deep); box-shadow: 0 8px 24px rgba(215,238,54,.25); }
.btn-lime:hover { background: #E2F55C; }
.btn-ghost { border-color: rgba(255,248,232,.4); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); }
.btn-forest { background: var(--forest); color: var(--cream); width: 100%; }
.btn-forest:hover { background: var(--deep); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Strip (three points) ---------- */
.points { padding: 72px 0 24px; }
.points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.point { padding: 26px 24px; border-top: 3px solid var(--forest); }
.point .num { font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--muted); letter-spacing: .1em; }
.point h3 { font-size: 24px; margin: 10px 0 8px; text-transform: uppercase; font-weight: 900; }
.point p { margin: 0; color: var(--muted); }

/* ---------- Form section ---------- */
.form-section { padding: 56px 0 96px; }
.form-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.form-intro h2 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 900; text-transform: uppercase; margin: 14px 0 18px; }
.form-intro .eyebrow { color: var(--forest); }
.form-intro .eyebrow::before { background: var(--forest); }
.form-intro p { color: var(--muted); max-width: 36ch; }
.pin-card {
  margin-top: 28px; display: inline-block; background: var(--forest); color: var(--lime);
  font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: .12em;
  padding: 18px 26px; border-radius: var(--radius); transform: rotate(-3deg);
  box-shadow: 0 14px 30px rgba(16,63,46,.25);
}
.pin-card small { display: block; font-size: 11px; letter-spacing: .2em; color: rgba(255,248,232,.7); margin-bottom: 4px; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 34px; box-shadow: 0 1px 0 rgba(10,42,31,.04), 0 20px 50px -20px rgba(10,42,31,.18);
}

.field { margin-bottom: 20px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label, .label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.opt { font-weight: 500; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 13px 14px; transition: border-color .15s, box-shadow .15s; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23103F2E' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(16,63,46,.12); }
.prefix { display: flex; }
.prefix span {
  display: flex; align-items: center; padding: 0 12px; font-weight: 700; color: var(--muted);
  background: #F3EEDF; border: 1.5px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px;
}
.prefix input { border-radius: 0 10px 10px 0; }
.pin-input { font-family: var(--display) !important; font-weight: 800; letter-spacing: .3em; font-size: 20px !important; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hint.warn { color: #8A5A00; }

/* chips (radio / checkbox) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span {
  display: inline-block; padding: 10px 15px; border-radius: 999px; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--line); background: #fff; transition: all .15s; user-select: none;
}
.chip input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(16,63,46,.18); }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); font-weight: 500; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--forest); flex: none; }

.guardian { display: none; padding: 18px; border-radius: 12px; background: #F6F1E2; margin-bottom: 20px; }
.guardian.show { display: block; }
.guardian .field:last-child { margin-bottom: 0; }

.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.field.invalid .chip span { border-color: var(--error); }
.err { display: none; color: var(--error); font-size: 13px; margin-top: 6px; font-weight: 600; }
.field.invalid .err { display: block; }

.hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

.form-msg { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.form-msg.error { display: block; background: #FDECEA; color: var(--error); }

.success { display: none; text-align: center; padding: 26px 10px; }
.success.show { display: block; }
.success img { width: 72px; margin: 0 auto 18px; }
.success h3 { font-size: 32px; text-transform: uppercase; font-weight: 900; margin-bottom: 10px; }
.success p { color: var(--muted); max-width: 38ch; margin: 0 auto 8px; }
.success .big-pin { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: .14em; color: var(--forest); margin: 12px 0; }

/* ---------- Sponsor tiers ---------- */
.tiers { padding: 72px 0 8px; }
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.tier { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tier .tag { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tier h3 { font-size: 22px; font-weight: 900; text-transform: uppercase; margin: 8px 0; }
.tier p { margin: 0; color: var(--muted); font-size: 15px; }
.section-head h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; text-transform: uppercase; margin-top: 12px; }
.section-head .eyebrow { color: var(--forest); }
.section-head .eyebrow::before { background: var(--forest); }

.stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 8px; }
.stat b { display: block; font-family: var(--display); font-weight: 900; font-size: 40px; color: var(--lime); line-height: 1; }
.stat span { font-size: 14px; color: rgba(255,248,232,.75); }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: rgba(255,248,232,.7); padding: 44px 0; font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer img { height: 34px; width: auto; }
.site-footer a { color: var(--cream); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--lime); }
.foot-links { display: flex; gap: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { padding: 120px 0 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-mark { display: none; }
  .hero .court { width: 520px; right: -220px; opacity: .12; }
  .points-grid, .tiers-grid { grid-template-columns: 1fr; }
  .form-layout { grid-template-columns: 1fr; gap: 28px; }
  .pin-card { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .site-header { padding: 16px 0; }
  .site-header .brand img { height: 30px; }
  .nav a { padding: 8px 11px; font-size: 14px; }
  .card { padding: 22px 18px; border-radius: 18px; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .hero-actions .btn { flex: 1 1 100%; }
  .stats { gap: 24px; }
  .hero-wide h1 { font-size: 8.4vw; }
  .hero h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =========================================================
   v2 sections: format, courts, placements, timeline, tiers
   ========================================================= */
.section { padding: 88px 0; }
.section.dark { background: var(--forest); color: var(--cream); }
.section.dark .eyebrow { color: var(--lime); }
.section.dark .eyebrow::before { background: var(--lime); }
.section.dark .muted { color: rgba(255,248,232,.75); }
.section.paper { background: var(--paper); border-block: 1px solid var(--line); }
.section h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 900; text-transform: uppercase; margin: 12px 0 0; text-wrap: balance; }
.section .intro { max-width: 60ch; margin: 18px 0 0; color: var(--muted); font-size: 18px; }
.section.dark .intro { color: rgba(255,248,232,.8); }
.section-body { margin-top: 44px; }

/* stat band */
.band { background: var(--deep); color: var(--cream); padding: 30px 0; }
.band-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.band-item b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
.band-item span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: rgba(255,248,232,.75); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.step .num { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .12em; color: var(--forest); background: var(--lime); display: inline-block; padding: 4px 10px; border-radius: 6px; }
.step h3 { font-size: 22px; text-transform: uppercase; font-weight: 900; margin: 16px 0 10px; }
.step p { margin: 0; color: var(--muted); }
.step p + p { margin-top: 10px; }
.callout { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 18px 22px; border-radius: var(--radius); background: var(--cream); border: 1px dashed var(--forest); font-weight: 600; }
.callout b { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }

/* format */
.format { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.cats { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cats li { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 12px; background: rgba(255,248,232,.06); border: 1px solid rgba(255,248,232,.14); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 17px; }
.cats li i { font-style: normal; font-family: var(--body); font-weight: 700; font-size: 12px; color: var(--deep); background: var(--lime); border-radius: 999px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rule { margin-top: 22px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 18px; color: var(--lime); }
.bracket { display: grid; gap: 0; justify-items: start; }
.bracket .stage { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 20px; letter-spacing: .03em; padding: 18px 22px; border-radius: 10px; background: var(--deep); color: var(--cream); }
.bracket .stage:nth-of-type(1) { width: 100%; } .bracket .stage:nth-of-type(2) { width: 86%; } .bracket .stage:nth-of-type(3) { width: 72%; } .bracket .stage:nth-of-type(4) { width: 58%; }
.bracket .stage.final { background: var(--lime); color: var(--deep); }
.bracket .link { width: 3px; height: 26px; background: var(--lime); margin-left: 40px; }
.prize { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.prize div { border: 1px solid rgba(255,248,232,.2); border-radius: 12px; padding: 16px 18px; }
.prize b { display: block; font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--lime); line-height: 1; }
.prize span { display: block; margin-top: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: rgba(255,248,232,.75); }

/* seven courts */
.courts { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.court-cell { text-align: center; }
.court-cell svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.court-cell .n { font-family: var(--display); font-weight: 900; font-size: 22px; margin-top: 8px; }
.court-cell.show svg { background: #EEF5B4; } .court-cell.fair svg { background: var(--forest); }
.court-legend { display: grid; grid-template-columns: 2fr 4fr 1fr; gap: 14px; margin-top: 8px; }
.court-legend > div { border-top: 3px solid var(--line); padding-top: 14px; }
.court-legend .show { border-color: var(--lime); } .court-legend .comp { border-color: var(--forest); } .court-legend .fair { border-color: var(--deep); }
.court-legend h3 { font-size: 16px; text-transform: uppercase; font-weight: 900; margin: 0 0 6px; }
.court-legend p { margin: 0; color: var(--muted); font-size: 15px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; margin-right: 6px; vertical-align: 1px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* who can play + faq */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.checks li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%230A2A1F' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; margin-top: 1px; }
.checks b { display: block; }
.checks span { color: var(--muted); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; font-weight: 700; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--forest); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--muted); }
.faq summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px; }

/* sponsors: why, placements, timeline, tiers, plan */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why div { background: var(--deep); border-radius: var(--radius); padding: 24px; }
.why h3 { font-size: 22px; text-transform: uppercase; font-weight: 900; margin: 0 0 8px; color: var(--cream); }
.why p { margin: 0; color: rgba(255,248,232,.78); }
.placements { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 32px 48px; align-items: center; }
.placements ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; }
.placements li b { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 21px; margin-bottom: 4px; }
.placements li span { color: var(--muted); }
.placements li small { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .1em; background: var(--forest); color: var(--cream); padding: 3px 8px; border-radius: 5px; display: inline-block; margin-bottom: 8px; }
.placements ol:first-child li:first-child small { background: var(--lime); color: var(--deep); }
.placements .court-art svg { width: 100%; height: auto; display: block; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--lime); opacity: .9; }
.timeline li { position: relative; padding: 38px 18px 0 0; }
.timeline li::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: var(--lime); border-radius: 4px; }
.timeline b { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 19px; color: var(--cream); }
.timeline span { display: block; margin-top: 6px; color: rgba(255,248,232,.78); font-size: 15px; }
.tier-table { width: 100%; border-collapse: collapse; }
.tier-table th { text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 18px 12px; font-weight: 700; }
.tier-table td { padding: 20px 18px; border-top: 1px solid var(--line); vertical-align: middle; }
.tier-table tr.top td { background: var(--lime); border-color: var(--lime); }
.tier-table td.name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 19px; white-space: nowrap; }
.tier-table td.slots { font-family: var(--display); font-weight: 900; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.tier-table th.slots { text-align: center; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.vik { margin-top: 22px; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; color: var(--forest); }
.plan { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.plan > div { padding: 30px 32px; }
.plan > div:first-child { background: var(--paper); } .plan > div:last-child { background: var(--lime); }
.plan h3 { font-size: 22px; text-transform: uppercase; font-weight: 900; margin: 0 0 14px; }
.plan ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }

@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .band-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .steps, .why, .split, .format, .plan { grid-template-columns: 1fr; }
  .format, .split { gap: 40px; }
  .placements { grid-template-columns: 1fr; }
  .placements .court-art { display: none; }
  .timeline { grid-template-columns: 1fr; gap: 26px; }
  .timeline::before { left: 11px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .timeline li { padding: 0 0 0 44px; }
  .court-legend { grid-template-columns: 1fr; }
  .courts { gap: 6px; }
  .court-cell .n { font-size: 16px; }
}
@media (max-width: 560px) {
  .band-grid { grid-template-columns: repeat(2, 1fr); }
  .prize b { font-size: 24px; }
  .cats li { font-size: 15px; padding: 13px 14px; }
  .tier-table td, .tier-table th { padding-left: 12px; padding-right: 12px; }
  .tier-table td.name { font-size: 16px; white-space: normal; }
  .plan > div { padding: 24px 20px; }
}
.section:not(.dark) .eyebrow, .faq .eyebrow { color: var(--forest); }
.section:not(.dark) .eyebrow::before, .faq .eyebrow::before { background: var(--forest); }
.court-cell svg, .court-art svg { aspect-ratio: 117.7 / 245.7; }
.placements .court-art { max-width: 220px; justify-self: center; width: 100%; }

/* v3: prize pool, footnotes, fun fair */
sup { font-size: .55em; vertical-align: super; line-height: 0; }
.footnote { margin: 14px 0 0; font-size: 13px; line-height: 1.5; opacity: .8; max-width: 60ch; }
.pool { margin-top: 22px; width: 100%; border: 1px solid rgba(255,248,232,.22); border-radius: 14px; padding: 20px 22px; background: rgba(215,238,54,.06); }
.pool span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(255,248,232,.75); }
.pool b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.4vw, 42px); color: var(--lime); line-height: 1; }
.pool p { margin: 10px 0 0; color: rgba(255,248,232,.8); font-size: 15px; }
.section.lime { background: var(--lime); color: var(--deep); }
.section.lime .eyebrow { color: var(--deep); }
.section.lime .eyebrow::before { background: var(--deep); }
.section.lime .intro { color: rgba(10,42,31,.78); }
.fair-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fair-card { background: var(--cream); border-radius: var(--radius); padding: 22px 20px; border: 1px solid rgba(10,42,31,.12); }
.fair-card.big { grid-column: span 2; grid-row: span 2; background: var(--deep); color: var(--cream); display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; background-image: url("court.svg"); background-repeat: no-repeat; background-size: 120%; background-position: 40% 20%; }
.fair-card .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); background: rgba(16,63,46,.08); padding: 4px 9px; border-radius: 5px; }
.fair-card.big .tag { background: var(--lime); color: var(--deep); align-self: flex-start; }
.fair-card h3 { font-size: 20px; font-weight: 900; text-transform: uppercase; margin: 12px 0 6px; }
.fair-card.big h3 { font-size: clamp(28px, 3vw, 40px); color: var(--lime); }
.fair-card p { margin: 0; color: var(--muted); font-size: 15px; }
.fair-card.big p { color: rgba(255,248,232,.85); font-size: 17px; max-width: 34ch; }
.fair-grid.four .fair-card { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .fair-grid { grid-template-columns: 1fr 1fr; }
  .fair-card.big { grid-row: auto; min-height: 220px; }
}
@media (max-width: 560px) {
  .fair-grid { grid-template-columns: 1fr; }
  .fair-card.big { grid-column: auto; }
}
.fair-card.big { background-image: linear-gradient(to top, var(--deep) 42%, rgba(10,42,31,.55) 100%), url("court.svg"); }
.fair-card .tag { align-self: flex-start; }
.cats sup, .band-item sup { font-size: .75em; color: var(--lime); margin-left: 2px; }

/* =========================================================
   v5: playful motion layer (fx.js). All motion is transform/opacity,
   and everything is switched off for prefers-reduced-motion.
   ========================================================= */
@media (pointer: fine) {
  html.fx-cursor, html.fx-cursor body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2211.5%22%20fill%3D%22%23D7EE36%22%20stroke%3D%22%230A2A1F%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M5.2%207.5c4.2%202%204.2%2011%200%2013M22.8%207.5c-4.2%202-4.2%2011%200%2013%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 14 14, auto; }
  html.fx-cursor a, html.fx-cursor button, html.fx-cursor summary, html.fx-cursor label.chip, html.fx-cursor .chip input,
  html.fx-cursor select, html.fx-cursor input[type=checkbox], html.fx-cursor [role=button] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%28-35%2016%2016%29%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2210%22%20rx%3D%227.5%22%20ry%3D%229%22%20fill%3D%22%23FFF8E8%22%20fill-opacity%3D%22.35%22%20stroke%3D%22%230A2A1F%22%20stroke-width%3D%222.4%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2210%22%20rx%3D%227.5%22%20ry%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23D7EE36%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M12%203.5v13M16%201.5v17M20%203.5v13M9.2%206h13.6M8.6%2010h14.8M9.2%2014h13.6%22%20stroke%3D%22%230A2A1F%22%20stroke-width%3D%22.7%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M14.2%2018.6l1.8%203.2%201.8-3.2%22%20fill%3D%22none%22%20stroke%3D%22%230A2A1F%22%20stroke-width%3D%221.6%22/%3E%3Crect%20x%3D%2214.6%22%20y%3D%2221.4%22%20width%3D%222.8%22%20height%3D%229.6%22%20rx%3D%221.2%22%20fill%3D%22%23103F2E%22%20stroke%3D%22%230A2A1F%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3C/svg%3E") 10 6, pointer; }
  html.fx-cursor input[type=text], html.fx-cursor input[type=email], html.fx-cursor input[type=tel], html.fx-cursor textarea { cursor: text; }
}

/* hero rally: a ball bouncing across the court drawing */
.rally { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rally .track { position: absolute; left: 0; bottom: 18%; width: 100%; height: 0; animation: rally-x 7s linear infinite; }
.rally .hop { position: absolute; left: 0; bottom: 0; animation: rally-y 7s infinite; }
.rally .ball { display: block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1FF8A, var(--lime) 55%, #A9BE1A); box-shadow: inset -2px -3px 0 rgba(0,0,0,.12); position: relative; animation: spin .7s linear infinite; }
.rally .ball::before, .rally .ball::after { content: ""; position: absolute; top: 2px; bottom: 2px; width: 10px; border: 1.6px solid rgba(255,255,255,.9); border-radius: 50%; }
.rally .ball::before { left: -6px; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.rally .ball::after { right: -6px; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.rally .shadow { position: absolute; left: 0; bottom: -8px; width: 24px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); animation: rally-shadow 7s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rally-x { 0% { transform: translateX(-60px); } 70%, 100% { transform: translateX(calc(100vw + 60px)); } }
@keyframes rally-y {
  0% { transform: translateY(-260px); animation-timing-function: cubic-bezier(.5,0,1,.5); }
  16% { transform: translateY(0); animation-timing-function: cubic-bezier(0,.5,.5,1); }
  32% { transform: translateY(-170px); animation-timing-function: cubic-bezier(.5,0,1,.5); }
  46% { transform: translateY(0); animation-timing-function: cubic-bezier(0,.5,.5,1); }
  58% { transform: translateY(-90px); animation-timing-function: cubic-bezier(.5,0,1,.5); }
  70%, 100% { transform: translateY(0); }
}
@keyframes rally-shadow {
  0% { transform: scale(.3); opacity: 0; } 16% { transform: scale(1); opacity: 1; } 32% { transform: scale(.45); opacity: .4; }
  46% { transform: scale(1); opacity: 1; } 58% { transform: scale(.6); opacity: .6; } 70% { transform: scale(1); opacity: 1; } 71%, 100% { opacity: 0; }
}
.hero .wrap { position: relative; z-index: 1; }

/* hero pin: gentle float, tap to make it bounce */
.hero-mark img { animation: drop 1s cubic-bezier(.2,.8,.2,1) both, float 5s ease-in-out 1s infinite; cursor: inherit; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg); } }
.hero-mark.boing img { animation: boing .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes boing { 0% { transform: scale(1,1); } 30% { transform: scale(1.12,.86) translateY(10px); } 60% { transform: scale(.92,1.1) translateY(-26px); } 100% { transform: none; } }

/* click: a ball-mark ripple where you click */
.hit { position: fixed; z-index: 9999; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--lime); animation: hit .55s ease-out forwards; }
.hit.dark { border-color: var(--forest); }
@keyframes hit { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }

/* scroll reveal (only once fx.js has loaded; never left hidden) */
html.fx .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
html.fx .reveal.in { opacity: 1; transform: none; }

/* buttons: the ball rolls in on hover */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); right: -16px; top: 50%; margin-top: -6px; transition: transform .45s cubic-bezier(.2,.8,.2,1); box-shadow: inset -1px -2px 0 rgba(0,0,0,.15); }
.btn-lime::after { background: var(--forest); }
.btn:hover::after { transform: translateX(-26px) rotate(-200deg); }
.btn:hover { padding-right: 40px; }
.btn { transition: transform .15s, background .2s, color .2s, box-shadow .2s, padding .3s; }

/* bracket: a ball drops through the rounds to the final */
.bracket { position: relative; }
.bracket .runner { position: absolute; left: 33px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(215,238,54,.18); opacity: 0; }
.bracket.in .runner { animation: run-down 2.6s cubic-bezier(.5,0,.3,1) .4s forwards; }
@keyframes run-down { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 85% { opacity: 1; transform: translateY(var(--h, 300px)); } 100% { opacity: 0; transform: translateY(var(--h, 300px)) scale(2.2); } }
.bracket.in .stage.final { animation: champ .6s ease 2.7s both; }
@keyframes champ { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(215,238,54,.25); } }

/* fun fair: a ball keeps bouncing on the One-Point Shootout card */
.fair-card.big { position: relative; overflow: hidden; }
.fair-card.big .mini { position: absolute; right: 34px; top: 34px; width: 34px; height: 34px; }
.fair-card.big .mini i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1FF8A, var(--lime) 55%, #A9BE1A); animation: mini-bounce 1.1s cubic-bezier(.5,0,.5,1) infinite alternate; }
.fair-card.big .mini b { position: absolute; left: 4px; right: 4px; bottom: -64px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(2px); animation: mini-shadow 1.1s cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes mini-bounce { from { transform: translateY(0); } to { transform: translateY(60px) scale(1.08,.92); } }
@keyframes mini-shadow { from { transform: scale(.5); opacity: .3; } to { transform: scale(1.1); opacity: .9; } }
.fair-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.fair-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 30px -18px rgba(10,42,31,.5); }

/* pincode card: last three digits flicker through real Mumbai codes */
.pin-card .roll { display: inline-block; min-width: 3.3ch; }

@media (max-width: 900px) { .rally .ball { width: 16px; height: 16px; } .rally .track { bottom: 8%; } }
@media (prefers-reduced-motion: reduce) {
  .rally, .fair-card.big .mini, .bracket .runner { display: none; }
  html.fx .reveal { opacity: 1; transform: none; }
}
.rally { left: 50%; }
@keyframes rally-x { 0% { transform: translateX(-40px); } 70%, 100% { transform: translateX(calc(50vw + 60px)); } }
.cats li sup { margin-left: -12px; }
@media (max-width: 900px) { .rally { display: none; } }

/* =========================================================
   v6: live ball cursor with wake + shadow, pin standing on the court
   ========================================================= */
html.fx-live, html.fx-live * { cursor: none !important; }
html.fx-live input[type=text], html.fx-live input[type=email], html.fx-live input[type=tel], html.fx-live textarea { cursor: text !important; }
.cur, .cur-shadow, .cur-trail { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10000; will-change: transform; }
.cur { width: 26px; height: 26px; margin: -13px 0 0 -13px; transition: opacity .2s; }
.cur .b { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1FF8A, #D7EE36 55%, #A9BE1A); border: 2px solid #0A2A1F; box-shadow: 0 0 0 2px rgba(255,248,232,.9); transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .15s, background .2s; }
.cur .b::before, .cur .b::after { content: ""; position: absolute; top: 2px; bottom: 2px; width: 9px; border: 1.6px solid #fff; border-radius: 50%; }
.cur .b::before { left: -5px; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.cur .b::after { right: -5px; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.cur .r { position: absolute; left: -6px; top: -8px; width: 40px; height: 40px; opacity: 0; transform: rotate(-30deg) scale(.6); transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .15s; filter: drop-shadow(0 0 1.5px rgba(255,248,232,.95)); }
.cur.on-link .b { transform: scale(.55) translate(16px, 16px); }
.cur.on-link .r { opacity: 1; transform: rotate(-20deg) scale(1); }
.cur.down .b { transform: scale(.8, .7); }
.cur.down.on-link .r { transform: rotate(10deg) scale(1.05); }
.cur.on-lime .b { background: radial-gradient(circle at 35% 30%, #FFFFFF, #FFF8E8 55%, #E9E1CB); border-color: #0A2A1F; }
.cur.on-lime .b::before, .cur.on-lime .b::after { border-color: #103F2E; }
.cur.on-lime .b::before { border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.cur.on-lime .b::after { border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.cur.hide, .cur-shadow.hide, .cur-trail.hide { opacity: 0 !important; }
.cur-shadow { width: 24px; height: 8px; margin: -4px 0 0 -12px; border-radius: 50%; background: rgba(5,20,14,.45); filter: blur(2.5px); transition: opacity .2s; }
.cur-trail { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #D7EE36; border: 1.5px solid #0A2A1F; }
.cur-trail.on-lime { background: #FFF8E8; }

/* hero: the pin is dropped onto a court lying flat beneath it */
@media (min-width: 901px) {
  .hero .court { right: 2%; left: auto; top: auto; bottom: 6%; width: 620px; opacity: .3; transform: perspective(900px) rotateX(64deg) rotateZ(-14deg); transform-origin: 50% 70%; }
  .hero-mark { position: relative; align-self: end; margin-bottom: 40px; }
  .hero-mark::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 46%; height: 22px; margin-left: -23%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(6px); animation: pin-shadow 5s ease-in-out 1s infinite; }
  .hero-mark img { filter: none; }
  @keyframes pin-shadow { 50% { transform: scale(.82); opacity: .7; } }
  .hero-mark { filter: none; }
  .rally { left: 52%; }
  .rally .track { bottom: 14%; }
}
.band-note { margin: 14px 0 0; font-size: 12px; color: rgba(255,248,232,.6); }
.section .note { margin: 22px 0 0; font-size: 13px; opacity: .75; }
@media (min-width: 901px) {
  .hero { padding-bottom: 130px; }
  .hero .court { bottom: 9%; width: 560px; right: 3%; }
  .hero-mark { margin-bottom: 70px; width: min(270px, 64%); }
}
.cur .r { width: 52px; height: 52px; left: -12px; top: -16px; }

/* =========================================================
   phones: tap-to-drop balls, scroll ball, sticky call-to-action
   ========================================================= */
.drop { position: fixed; z-index: 9998; pointer-events: none; width: 0; height: 0; }
.drop i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1FF8A, #D7EE36 55%, #A9BE1A); border: 1.5px solid #0A2A1F; animation: drop-y 1.3s forwards; }
.drop b { position: absolute; left: -12px; top: 128px; width: 24px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(2px); animation: drop-sh 1.3s forwards; }
@keyframes drop-y {
  0% { transform: translateY(0) scale(.6); animation-timing-function: cubic-bezier(.5,0,1,.5); }
  30% { transform: translateY(130px) scale(1.1,.85); animation-timing-function: cubic-bezier(0,.5,.5,1); }
  55% { transform: translateY(70px) scale(1); animation-timing-function: cubic-bezier(.5,0,1,.5); }
  75% { transform: translateY(130px) scale(1.06,.9); animation-timing-function: cubic-bezier(0,.5,.5,1); }
  88% { transform: translateY(108px); opacity: 1; animation-timing-function: cubic-bezier(.5,0,1,.5); }
  100% { transform: translateY(130px); opacity: 0; }
}
@keyframes drop-sh { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 55% { transform: scale(.6); opacity: .5; } 75% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }

.scroll-ball { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; padding-top: env(safe-area-inset-top, 0px); }
.scroll-ball .bar { height: 3px; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }
.scroll-ball .b { position: absolute; top: calc(env(safe-area-inset-top, 0px) - 4px); left: 0; width: 11px; height: 11px; margin-left: -6px; border-radius: 50%; background: var(--lime); border: 1.5px solid var(--deep); }

.sticky-cta { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(10,42,31,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1); border-top: 1px solid rgba(215,238,54,.25); }
.sticky-cta.show { transform: none; }
.sticky-cta img { width: 26px; height: auto; animation: float 2.6s ease-in-out infinite; }
.sticky-cta span { flex: 1; color: var(--cream); font-size: 14px; font-weight: 600; line-height: 1.25; }
.sticky-cta .btn { padding: 12px 18px; font-size: 14px; flex: none; }
@media (min-width: 901px) { .sticky-cta { display: none; } }
@media (max-width: 900px) {
  .pin-card { display: inline-block; font-size: 30px; padding: 14px 20px; margin-top: 18px; }
  body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .drop, .scroll-ball .b { display: none; } }

/* =========================================================
   v8: tentative date/venue line, contact, footer with Momentum Sports
   ========================================================= */
.when { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 28px; }
.when span { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); border: 1px solid rgba(215,238,54,.45); border-radius: 999px; padding: 8px 14px; }
.when sup { color: var(--lime); }
.contact-card { margin-top: 28px; display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--radius); background: var(--forest); color: var(--cream); max-width: 340px; }
.contact-card a { color: var(--cream); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-card a:hover, .contact-card a.wa { color: var(--lime); }
.foot-label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,248,232,.55); margin-bottom: 4px; }
.site-footer { padding: 52px 0 28px; }
.site-footer .wrap.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 32px; align-items: start; }
.foot-brand img { height: 40px; width: auto; }
.foot-contact { display: grid; gap: 6px; }
.foot-contact a { font-weight: 600; }
.foot-contact a.wa { color: var(--lime); margin-left: 6px; }
.foot-managed { display: grid; justify-items: start; }
.foot-managed img { height: 82px; width: auto; opacity: .9; }
.site-footer .wrap.foot-bottom { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,248,232,.12); font-size: 13px; }
.checks-block .consent { line-height: 1.45; }
@media (max-width: 900px) {
  .site-footer .wrap.foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .when { margin-top: -8px; }
  .when span { font-size: 12px; padding: 7px 12px; }
  .site-footer { padding-bottom: 96px; }
}
.phone-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.foot-contact a.wa { margin-left: 0; }

/* =========================================================
   v7: hero court scene (perspective court, raised net, pin on the net)
   ========================================================= */
.hero-scene { position: relative; width: 100%; max-width: 580px; justify-self: end; }
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.scene .sur { fill: rgba(0,0,0,.16); }
.scene .surf { fill: #1A5A3F; }
.scene .ln { stroke: rgba(255,248,232,.85); stroke-width: 1.6; stroke-linecap: round; }
.scene .netbody { fill: rgba(10,42,31,.38); }
.scene .mesh { stroke: rgba(255,248,232,.22); stroke-width: .6; }
.scene .tape { fill: none; stroke: #FFF8E8; stroke-width: 3; stroke-linejoin: round; }
.scene .post { stroke: #0A2A1F; stroke-width: 5; stroke-linecap: round; }
.scene .strap { stroke: #FFF8E8; stroke-width: 2; opacity: .8; }
.scene .scene-pin { cursor: pointer; }
.scene .scene-pin image { transform-box: fill-box; transform-origin: 50% 100%; animation: pin-bob 3.2s ease-in-out infinite; }
.scene .pin-shadow { fill: rgba(0,0,0,.35); filter: blur(2px); transform-box: fill-box; transform-origin: center; animation: pin-shade 3.2s ease-in-out infinite; }
@keyframes pin-bob { 50% { transform: translateY(-7px); } }
@keyframes pin-shade { 50% { transform: scale(.82); opacity: .7; } }
.scene .scene-pin.boing image { animation: pin-boing .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes pin-boing { 0% { transform: scale(1,1); } 25% { transform: scale(1.12,.84); } 55% { transform: translateY(-34px) scale(.94,1.08); } 100% { transform: none; } }
.scene .sball circle { fill: url(#ballg); stroke: rgba(10,42,31,.5); stroke-width: .6; }
.scene .sshadow { fill: rgba(0,0,0,.45); }
.scene .mark { fill: none; stroke: #FFF8E8; stroke-width: 1.2; opacity: 0; animation: mark 1.4s ease-out forwards; }
@keyframes mark { 0% { opacity: .9; } 100% { opacity: 0; } }
.scene-hint { margin: 6px 0 0; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,248,232,.45); }
.hero.hero-has-scene .hero-inner { align-items: center; }
@media (min-width: 901px) {
  .hero.hero-has-scene { padding-bottom: 90px; }
  .hero.hero-has-scene .hero-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  .hero.hero-has-scene { padding-bottom: 40px; }
  .hero-scene { justify-self: center; max-width: 520px; margin-top: 4px; }
  .scene-hint { margin-top: 2px; }
}


.hero-scene::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 8%; height: 30%; background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.35), transparent 70%); filter: blur(10px); pointer-events: none; }
.scene { position: relative; }
@media (max-width: 900px) {
  .hero.hero-has-scene { padding-top: 92px; }
  .hero.hero-has-scene .hero-scene { order: -1; max-width: 460px; margin: 0 auto -6px; }
  .hero.hero-has-scene .scene-hint { display: none; }
}