/* Layout: compact bento grid of rounded colour tiles (dark, blue, lime, white) with a floating glass nav, grain, cursor glow; real court photos sit behind the hero and contact tiles; the dome arch is the photo shape. */
:root {
  --bg: #eceef2;
  --surface: #ffffff;
  --ink: #0c1224;
  --ink-2: #55607a;
  --line: #d9dde8;
  --court: #1f44b8;
  --court-soft: #dfe6fa;
  --ball: #d8f23a;
  --ball-ink: #151c00;
  --night: #0b1020;
  --night-ink: #f1f4ff;
  --night-2: #9aa6c8;
  --racket: #f0552c;
  --glow: rgba(31, 68, 184, 0.1);
  --sand: #ead9ae;
  --wa: #148a44;
  --wa-ink: #ffffff;
  --grain: 0.06;
  --font-display: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070a14; --surface: #111730; --ink: #eef1fa; --ink-2: #9aa6c8; --line: #232b4a;
    --court: #2a52d6; --court-soft: #1a2750; --night: #0f1530; --glow: rgba(138, 165, 255, 0.14); --sand: #6b5a2c;
    --racket: #ff7a52; --wa: #2fc56b; --wa-ink: #05210f; --grain: 0.09;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #070a14; --surface: #111730; --ink: #eef1fa; --ink-2: #9aa6c8; --line: #232b4a;
  --court: #2a52d6; --court-soft: #1a2750; --night: #0f1530; --glow: rgba(138, 165, 255, 0.14); --sand: #6b5a2c;
  --racket: #ff7a52; --wa: #2fc56b; --wa-ink: #05210f; --grain: 0.09;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.45;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 30; }
body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.03em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--court); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1120px; margin-inline: auto; }
section { padding-block: 26px; scroll-margin-top: 84px; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--court); }
.sec-head { display: grid; gap: 8px; margin-bottom: 18px; }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; max-width: 22ch; }
.sec-head p { color: var(--ink-2); max-width: 54ch; }

/* motion: transform-only reveal so content is visible at rest */
.js .rv { transform: translateY(14px); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
.js .rv.in { transform: none; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; }
.tile { position: relative; overflow: hidden; border-radius: 32px; padding: 22px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 65%); }
.tile:hover::after { opacity: 1; }
.t-night { background: var(--night); color: var(--night-ink); border-color: transparent; --glow: rgba(255, 255, 255, 0.14); }
.t-blue { background: var(--court); color: #fff; border-color: transparent; --glow: rgba(255, 255, 255, 0.2); }
.t-lime { background: var(--ball); color: var(--ball-ink); border-color: transparent; --glow: rgba(255, 255, 255, 0.5); }
.t-soft { background: var(--court-soft); }
.lift:hover { transform: translateY(-5px); }
@media (max-width: 960px) { .s3 { grid-column: span 6; } .s4, .s5, .s6, .s7, .s8 { grid-column: span 12; } }
@media (max-width: 560px) { .tile { padding: 18px; border-radius: 28px; } .bento { gap: 10px; } section { padding-block: 18px; } }

/* floating glass nav + rolling progress ball */
.site-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 20; margin-top: 10px; }
.pill { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 7px 7px 18px; border-radius: 999px; background: var(--surface); background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; }
.brand svg { width: 32px; height: 32px; flex: none; }
nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500; }
nav a { text-decoration: none; color: var(--ink-2); }
nav a:hover { color: var(--ink); }
.track { position: absolute; left: 28px; right: 28px; bottom: 0; height: 0; pointer-events: none; }
.roll { position: absolute; left: calc(var(--p, 0) * (100% - 14px)); bottom: -1px; width: 14px; height: 14px; border-radius: 50%; background: var(--ball); border: 2px solid var(--ink); transform: translateY(50%) rotate(calc(var(--p, 0) * 2400deg)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 16px var(--font-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s, filter 0.2s, background 0.2s, color 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn-ball { background: var(--ball); color: var(--ball-ink); }
.btn-ball:hover { filter: brightness(0.94); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.t-night .btn-line:hover, .t-blue .btn-line:hover { background: #fff; color: var(--night); border-color: #fff; }
.btn-wa { background: var(--wa); color: var(--wa-ink); width: 100%; min-height: 54px; font-size: 17px; }
.btn-wa svg { width: 22px; height: 22px; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
@media (max-width: 860px) { nav { display: none; } }

/* hero */
.hero { padding-top: 12px; }
.t-hero { padding: 38px 36px 110px; min-height: 440px; align-content: center; gap: 16px; isolation: isolate; }
.t-hero > * { position: relative; z-index: 1; animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.t-hero > *:nth-child(3) { animation-delay: 0.08s; } .t-hero > *:nth-child(4) { animation-delay: 0.16s; } .t-hero > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes rise { from { transform: translateY(22px); } to { transform: none; } }
.t-hero h1 { font-size: clamp(30px, 4.3vw, 54px); font-weight: 800; }
.t-hero h1 mark { color: var(--ball-ink); padding: 0 8px; margin-inline: -4px; border-radius: 10px; background: var(--ball); box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: sweep 1.1s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; background-repeat: no-repeat; background-size: 100% 100%; }
@keyframes sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.t-hero .eyebrow { color: var(--ball); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.court-lines { position: absolute; right: -90px; top: -60px; height: 150%; width: auto; color: rgba(255, 255, 255, 0.1); pointer-events: none; }
.t-photo { padding: 0; background: none; border: 0; overflow: visible; min-height: 400px; }
.t-photo::after, .coach-photo::after { display: none; }
.arch { position: relative; width: 100%; height: 100%; min-height: inherit; border-radius: 999px 999px 26px 26px; overflow: hidden; background: var(--sand); }
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }


.badge { position: absolute; left: -10px; top: 20px; width: 118px; height: 118px; z-index: 2; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28)); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.t-photo:hover .badge { transform: rotate(-8deg) scale(1.05); }
.bounce { position: absolute; right: -6px; bottom: -22px; width: 80px; height: 108px; z-index: 2; }
.bounce .b { position: absolute; left: 0; top: 0; width: 80px; height: 80px; animation: bounce 2.2s infinite; transform-origin: 50% 50%; }
.bounce .sh { position: absolute; left: 12px; bottom: 0; width: 56px; height: 12px; border-radius: 50%; background: rgba(12, 18, 36, 0.3); animation: shadow 2.2s infinite; }
@keyframes bounce {
  0% { transform: translateY(26px) scale(1.12, 0.88); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  14% { transform: translateY(22px) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  50% { transform: translateY(-34px) rotate(180deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  100% { transform: translateY(26px) rotate(360deg) scale(1.12, 0.88); }
}
@keyframes shadow { 0%, 100% { transform: scale(1.1); opacity: 0.9; } 50% { transform: scale(0.55); opacity: 0.4; } }
@media (max-width: 960px) { .t-hero { padding: 28px 22px 84px; min-height: 0; } .t-photo { min-height: 330px; } .badge { left: 6px; top: 14px; width: 98px; height: 98px; } .bounce { right: 10px; } }

/* Kaliningrad motifs: brick-gothic skyline behind a tennis net, amber */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; color: rgba(255, 255, 255, 0.14); pointer-events: none; }
.t-hero > .skyline { position: absolute; animation: none; z-index: 0; }
.photo-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.photo-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-hero > .photo-bg { animation: none; z-index: -1; }
.t-hero .photo-bg img { opacity: 0.62; }
.t-hero .photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 32, 0.94) 0%, rgba(11, 16, 32, 0.74) 52%, rgba(11, 16, 32, 0.34) 100%); }
.t-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 75% at 84% 112%, rgba(242, 169, 59, 0.36), transparent 70%); }
.t-hero > .coord { position: absolute; top: 20px; right: 24px; animation: none; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-2); z-index: 1; }
.contact-info .skyline { color: rgba(255, 255, 255, 0.17); }
.contact-info.tile { padding-bottom: 118px; isolation: isolate; }
.contact-info .photo-bg { z-index: -1; }
.contact-info .photo-bg img { opacity: 0.42; mix-blend-mode: luminosity; }
.contact-info .photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 68, 184, 0.45), rgba(31, 68, 184, 0.88)); }
.amber { position: absolute; right: 26px; top: 22px; width: 64px; height: 64px; transform: rotate(14deg); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); filter: drop-shadow(0 8px 12px rgba(185, 101, 15, 0.35)); }
.coach-text:hover .amber { transform: rotate(-6deg) scale(1.1); }
@media (max-width: 560px) { .t-hero > .coord { display: none; } .amber { width: 48px; height: 48px; right: 18px; top: 18px; } .contact-info.tile { padding-bottom: 84px; } }

/* regalia strip */
.regs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; border-radius: 40px; background: var(--surface); border: 1px solid var(--line); }
.rg { display: grid; gap: 3px; align-content: start; padding: 16px 24px; border-left: 1px solid var(--line); }
.rg:first-child { border-left: 0; }
.rg .ic { width: 38px; height: 38px; color: var(--court); }
.rg .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.05em; color: var(--court); }
.rg .big sup { font-size: 15px; letter-spacing: 0; vertical-align: top; position: relative; top: 3px; margin-left: 2px; }
.rg .big sup.pre { margin: 0 3px 0 0; }
.rg .ttl { font-weight: 600; font-size: 15.5px; line-height: 1.25; margin-top: 4px; }
.rg .sm { color: var(--ink-2); font-size: 14px; }
.rg:hover .ic { animation: wob 0.6s; }
@keyframes wob { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
@media (max-width: 960px) { .regs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 32px; } .rg:nth-child(odd) { border-left: 0; } .rg:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* coach */
.coach-photo { padding: 0; background: none; border: 0; overflow: visible; min-height: 340px; align-content: stretch; }
.coach-photo .arch { height: auto; min-height: 0; }
.polaroid { position: absolute; right: -8px; bottom: 6px; width: 120px; padding: 7px 7px 18px; background: #fff; border-radius: 6px; transform: rotate(7deg); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.5); transition: transform 0.4s; z-index: 2; }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 28%; }
.polaroid:hover { transform: rotate(-2deg) scale(1.06); }
.coach-text { padding: 12px 8px 12px 32px; align-content: center; gap: 12px; background: none; border: 0; }
.coach-text h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; }
.coach-text p { color: var(--ink-2); max-width: 52ch; }
@media (max-width: 960px) { .coach-photo { min-height: 300px; } }

/* gallery: video + photos in one row; on small screens a swipeable strip */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 330px; gap: 12px; margin-top: 12px; }
.g { position: relative; margin: 0; overflow: hidden; border-radius: 32px; background: var(--night); border: 1px solid var(--line); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.g:hover { transform: translateY(-5px); }
.g img, .g video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g-vid { grid-column: span 3; border-radius: 999px 999px 32px 32px; } .g-kids { grid-column: span 3; } .g-group { grid-column: span 6; }
.g figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 11px; border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(11, 16, 32, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.g-group .b { opacity: 0; animation: xfade 10s ease-in-out infinite; }
@keyframes xfade { 0%, 38% { opacity: 0; } 48%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
.vbtn { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ball-ink); background: var(--ball); transition: transform 0.2s; }
.vbtn:hover { transform: scale(1.08); }
.vbtn svg { width: 20px; height: 20px; fill: currentColor; }
.vbtn .ico-play { display: none; }
.vbtn.paused .ico-play { display: block; } .vbtn.paused .ico-pause { display: none; }
@media (max-width: 960px) {
  .gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .gallery::-webkit-scrollbar { display: none; }
  .g { flex: 0 0 66%; max-width: 270px; height: 340px; scroll-snap-align: start; }
  .g-group { flex-basis: 84%; max-width: 440px; }
}

/* hero facts */
.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.facts li { padding: 7px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--night-ink); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.facts b { font-family: var(--font-mono); color: var(--ball); font-weight: 700; margin-right: 2px; }
@media (max-width: 560px) { .facts li { font-size: 13.5px; padding: 6px 11px; } }

/* career list */
.cv { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.cv li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.cv b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--court); }
.cv span { font-weight: 600; }
@media (max-width: 560px) { .cv li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* session pill + camps banner */
.mid { display: grid; gap: 12px; margin-top: 12px; }
.flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; padding: 14px 24px; border-radius: 999px; background: var(--ball); color: var(--ball-ink); font-weight: 600; font-size: 15px; text-align: center; }
.flow b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.flow i { font-style: normal; opacity: 0.55; }
.camp { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; gap: 10px 22px; padding: 22px 30px; border-radius: 44px; scroll-margin-top: 90px; }
.camp .ic { width: 44px; height: 44px; color: var(--ball); }
.camp h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; }
.camp p { color: var(--night-2); margin-top: 2px; }
@media (max-width: 700px) { .camp { grid-template-columns: minmax(0, 1fr); justify-items: start; border-radius: 32px; padding: 22px; } .flow { border-radius: 26px; } }

/* faq: no cards */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 40px; align-items: start; }
.faq-wrap .sec-head { margin: 0; }
details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
summary { position: relative; cursor: pointer; list-style: none; padding: 15px 36px 15px 0; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 700 22px var(--font-mono); color: var(--court); transition: transform 0.25s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--ink-2); padding: 0 0 15px; max-width: 60ch; font-size: 15.5px; }
@media (max-width: 960px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } }

/* prices */
.prices-box { border-radius: 44px; padding: 26px; display: grid; gap: 16px; }
.prices-box .sec-head { margin: 0; }
.prices-box .eyebrow { color: var(--ball); }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.price { border-radius: 20px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); display: grid; gap: 2px; align-content: start; transition: transform 0.3s; }
.price:hover { transform: translateY(-5px); }
.price h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--night-2); }
.price .amt { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
.price small { font-family: var(--font-mono); font-size: 12px; color: var(--night-2); }
.price.hot { background: var(--ball); color: var(--ball-ink); border-color: var(--ball); }
.price.hot h3, .price.hot small { color: var(--ball-ink); opacity: 0.8; }
.fine { font-size: 13.5px; color: var(--night-2); }
@media (max-width: 560px) { .prices-box { padding: 20px; border-radius: 32px; } .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* application */
.contact-info { padding: 26px; gap: 10px; align-content: start; }
.contact-info h2 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; }
.contact-info .lead { opacity: 0.85; max-width: 38ch; }
.contact-info .eyebrow { color: var(--ball); }
.info { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.info li { display: grid; gap: 2px; }
.info b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.info span, .info a { overflow-wrap: anywhere; }
.numrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.numrow .n { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; user-select: all; }
form.tile { padding: 24px; gap: 12px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
label { display: grid; gap: 5px; font-weight: 600; font-size: 14.5px; }
input, select { font: 400 16px var(--font-body); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 14px; width: 100%; min-width: 0; }
.err { color: var(--racket); font-size: 14px; min-height: 1.1em; }
.hint { font-size: 13.5px; color: var(--ink-2); }
footer { padding-block: 18px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--ink-2); font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { transform: none; }
}

/* Added for the hosted build. A rally runs through the page: a served ball lands in the hero, the level picker plays on a court drawn to real proportions. */
:root { color-scheme: light; --lb-bg: rgba(7, 10, 20, 0.92); --lb-ink: #f1f4ff; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* hero: court lines draw themselves, the served ball lands by the photo */
.court-lines { color: rgba(255, 255, 255, 0.16); }
.court-lines rect, .court-lines path { stroke-dasharray: 1; animation: draw 1.8s 0.2s cubic-bezier(0.5, 0, 0.2, 1) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.t-hero { gap: 20px; }
.t-hero h1 { font-size: clamp(34px, 5vw, 62px); }
.serve { position: fixed; left: 0; top: 0; width: 80px; height: 80px; z-index: 25; pointer-events: none; }
.bounce.waiting { visibility: hidden; }

/* photos drift slightly with the scroll where the browser supports it */
@supports (animation-timeline: view()) {
  .arch img { animation: drift linear both; animation-timeline: view(); }
  @keyframes drift { from { transform: scale(1.09) translateY(-3%); } to { transform: scale(1.09) translateY(3%); } }
}

/* level picker */
.rally-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 28px; align-items: stretch; }
.rally-grid > * { min-width: 0; }
.lv { display: grid; align-content: stretch; border-top: 1px solid var(--line); }
.lvl { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; color: inherit; font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.25s; }
.lvl:hover { background: var(--surface); }
.lvl[aria-pressed="true"] { background: var(--surface); box-shadow: inset 4px 0 0 var(--ball); }
.lvl .score { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.lvl-t { display: grid; gap: 2px; min-width: 0; }
.lvl-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.lvl-text { font-size: 14.5px; color: var(--ink-2); }
.balls { display: flex; gap: 4px; align-items: center; }
.balls i { width: 15px; height: 15px; border-radius: 50%; background: var(--ball); border: 2px solid #0c1224; display: block; }
.balls i.empty { background: transparent; border: 2px dashed currentColor; opacity: 0.6; }
.lvl:hover .balls i { animation: hop 0.6s ease-out; }
.lvl:hover .balls i:nth-child(2) { animation-delay: 0.1s; }
.lvl:hover .balls i:nth-child(3) { animation-delay: 0.2s; }
@keyframes hop { 40% { transform: translateY(-9px); } }

.court-tile { padding: 18px; gap: 14px; align-content: space-between; }
.court { display: block; width: 100%; height: auto; overflow: visible; }
.c-floor { fill: rgba(255, 255, 255, 0.07); }
.c-line { fill: none; stroke: #fff; stroke-width: 3; opacity: 0.85; }
.c-net { stroke: #fff; stroke-width: 4; stroke-dasharray: 2 5; }
.c-post { fill: #fff; }
.c-you circle { fill: none; stroke: #fff; stroke-width: 3; }
.c-you text { fill: #fff; font: 700 17px var(--font-mono); }
.c-trail { fill: none; stroke: var(--ball); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0.85; }
.c-ring { fill: rgba(216, 242, 58, 0.2); stroke: var(--ball); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.c-ring.hit { animation: ring 0.6s ease-out; }
@keyframes ring { from { transform: scale(0.2); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } to { transform: scale(1); } }
.c-score { fill: var(--ball); font: 800 26px var(--font-display); }
.c-shadow { fill: rgba(5, 10, 30, 0.45); }
.court-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.court-now { display: grid; gap: 1px; min-width: 0; }
.court-now b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ball); }
.court-now span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
@media (max-width: 960px) {
  .rally-grid { grid-template-columns: minmax(0, 1fr); }
  .court-tile { order: -1; }
}
@media (max-width: 560px) {
  .court-tile { padding: 12px; }
  .court-foot { padding: 0 6px 6px; }
  .lvl { grid-template-columns: 60px minmax(0, 1fr) auto; padding: 12px 8px; }
  .lvl .score { font-size: 34px; }
}

/* nav: current section */
nav a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ball); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* gallery lightbox */
.g-open { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; border-radius: inherit; }
.lb { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 56px 16px 60px; color: var(--lb-ink); background: var(--lb-bg); border: 0; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: transparent; }
.lb img { max-width: min(100%, 1280px); max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); border-radius: 18px; object-fit: contain; }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: 20px; text-align: center; font-size: 15px; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; font: 700 22px var(--font-body); color: var(--ball-ink); background: var(--ball); cursor: pointer; }
.lb-x { top: 8px; right: 12px; }
.lb-prev { left: 12px; top: calc(50% - 24px); }
.lb-next { right: 12px; top: calc(50% - 24px); }

/* phones: booking bar */
.mcta { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 22; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; color: var(--night-ink); font-size: 15px; font-weight: 600; text-decoration: none; background: var(--night); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mcta b { color: var(--ball); font-family: var(--font-mono); }
.mcta-go { padding: 9px 16px; border-radius: 999px; color: var(--ball-ink); background: var(--ball); white-space: nowrap; }
.mcta.away { transform: translateY(calc(100% + 30px)); }
@media (max-width: 860px) {
  .mcta { display: flex; }
  footer { padding-bottom: 86px; }
}

/* narrow phones: keep the booking button inside the nav pill */
@media (max-width: 480px) {
  .pill { padding-left: 10px; gap: 8px; }
  .brand { gap: 7px; font-size: 13px; }
  .brand svg { width: 28px; height: 28px; }
  .site-head .btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
}

/* blue text needs a lighter tone on the dark theme */
:root { --court-ink: var(--court); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --court-ink: #93aaff; } }
:root[data-theme="dark"] { --court-ink: #93aaff; }
.eyebrow, .cv b, .rg .ic, .rg .big { color: var(--court-ink); }
.t-hero .eyebrow, .prices-box .eyebrow, .contact-info .eyebrow { color: var(--ball); }
summary::after { color: var(--court-ink); }

/* several messengers in the booking form */
.send { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.send > * { min-width: 0; }
.btn-tg { --wa: #1a73a8; --wa-ink: #ffffff; }
.btn-max { --wa: var(--court); --wa-ink: #ffffff; }
#sent:empty { display: none; }

.ig { justify-self: start; max-width: 100%; height: auto; min-height: 40px; padding-block: 8px; overflow-wrap: anywhere; }

/* Instagram links */
.ig-ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; margin-right: 6px; }
.ig { gap: 8px; }
.ig .ig-ic { margin-right: 0; }
.info a, footer a { overflow-wrap: anywhere; }



/* cathedral photo behind the hero: kept to the right of the text */
.t-hero .photo-bg img { opacity: 0.86; object-position: 0% 42%; }
.t-hero .photo-bg::after { background: linear-gradient(90deg, rgba(11, 16, 32, 0.95) 0%, rgba(11, 16, 32, 0.72) 48%, rgba(11, 16, 32, 0.12) 100%); }
@media (max-width: 960px) {
  .t-hero .photo-bg img { object-position: 42% 30%; opacity: 0.8; }
  .t-hero .photo-bg::after { background: linear-gradient(180deg, rgba(11, 16, 32, 0.86) 0%, rgba(11, 16, 32, 0.62) 60%, rgba(11, 16, 32, 0.5) 100%); }
}
.credits { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* AG ball in the coach block: a link to Instagram */
.coach-badge { position: absolute; right: 26px; top: 14px; z-index: 2; display: block; width: 72px; height: 72px; border-radius: 50%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.22)); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.coach-badge > svg { display: block; width: 100%; height: 100%; }
.coach-badge:hover { transform: rotate(-12deg) scale(1.08); }
.coach-badge-ig { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--night-ink); background: var(--night); border: 2px solid var(--bg); }
.coach-badge-ig svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .coach-badge { width: 48px; height: 48px; right: 10px; top: 0; } .coach-badge-ig { width: 22px; height: 22px; right: -5px; bottom: -4px; } .coach-badge-ig svg { width: 14px; height: 14px; } }

/* tennis net stretched across the bottom of the hero */
.t-hero > .hero-net { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; z-index: 0; animation: none; pointer-events: none; }
@media (max-width: 960px) { .t-hero > .hero-net { height: 74px; } }
@media (min-width: 961px) { .t-hero { padding-bottom: 132px; } .t-hero > .hero-net { height: 90px; } }

.t-hero > .hero-net { height: 118px; filter: drop-shadow(0 -2px 5px rgba(0, 0, 0, 0.35)); }
@media (min-width: 961px) { .t-hero { padding-bottom: 160px; } .t-hero > .hero-net { height: 118px; } }
@media (max-width: 960px) { .t-hero { padding-bottom: 104px; } .t-hero > .hero-net { height: 88px; } }

/* racket shadow photo behind the camps banner */
.camp.tile { isolation: isolate; padding-block: 58px; }
.camp > .photo-bg { z-index: -1; }
.camp > .photo-bg img { object-position: 50% 54%; opacity: 0.9; }
.camp > .photo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 32, 0.9) 0%, rgba(11, 16, 32, 0.62) 55%, rgba(11, 16, 32, 0.25) 100%); }
@media (max-width: 700px) {
  .camp.tile { padding-block: 34px; }
  .camp > .photo-bg::after { background: linear-gradient(180deg, rgba(11, 16, 32, 0.8), rgba(11, 16, 32, 0.6)); }
}

/* livelier brand in the header */
.brand { font-size: 17px; font-weight: 800; color: var(--ink); gap: 9px; }
.brand svg { width: 38px; height: 38px; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.brand:hover svg { transform: rotate(-200deg); }
.brand-mark { margin-left: 2px; padding: 3px 8px; border-radius: 8px; color: var(--ball-ink); background: var(--ball); }
@media (max-width: 480px) {
  .brand { font-size: 13px; gap: 6px; letter-spacing: -0.03em; }
  .brand svg { width: 30px; height: 30px; }
  .brand-mark { margin-left: 0; padding: 3px 5px; border-radius: 7px; }
  .pill { padding-left: 8px; }
  .site-head .btn-sm { padding: 0 11px; font-size: 13.5px; }
}

.ig .ig-color { width: 24px; height: 24px; vertical-align: middle; }