@import url('../assets/fonts/Inter.css');
@import url('../assets/fonts/DM-Sans.css');
:root { --green:#5a9b38; --green-mid:#46792b; --green-accent:#64ad3e; --green-dark:#3b6424; --paper:#f2f2f2; --ink:#2e2e2f; --font-head:'Inter',sans-serif; --font-body:'DM Sans',sans-serif; --ease:cubic-bezier(.22,1,.36,1); }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--font-head); font-weight:600; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--green-mid); outline-offset:4px; }
.hp { position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.sr-only { position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page { position:relative; width:100%; overflow:hidden; }
.bg { display:none; pointer-events:none; }
.logo { display:block; }
.logo img { width:100%; height:auto; }
.artwork { height:auto; }
.phone { position:relative; aspect-ratio:375/812; background:#fff; box-shadow:0 1px 4px #0003; }
.phone img { width:100%; height:100%; object-fit:cover; }
.store { display:block; transition:translate .25s var(--ease); }
.store img { width:100%; height:100%; }
.store:hover { translate:0 -3px; }
.btn-play,.btn-send { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; cursor:pointer; transition:translate .25s var(--ease); }
.btn-play { background:#fff; color:var(--green-dark); border:3px solid #60a43c; border-radius:12px; }
.btn-send { border:1px solid #569335; border-radius:4px; background:var(--green-accent); color:#fff; }
.btn-play:hover,.btn-send:hover { translate:0 -2px; }
.btn-send:disabled { opacity:.65; cursor:wait; }
.field { position:relative; min-width:0; }
.field input,.field textarea,.field select { width:100%; font-family:var(--font-body); color:var(--green-mid); background:#fff; border:1px solid #569335; border-radius:6px; outline:none; transition:box-shadow .2s; }
.field input::placeholder,.field textarea::placeholder { color:var(--green-accent); font-style:italic; opacity:.78; }
.field input:focus,.field textarea:focus,.field select:focus { box-shadow:0 0 0 3px #64ad3e2e; }
.field--select select { appearance:none; color:var(--green-accent); font-style:italic; cursor:pointer; padding-right:40px; }
.field__chev { position:absolute; right:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--green); pointer-events:none; }
.form__note { color:var(--green-mid); text-align:center; font-weight:500; }
.form__hint { font-size:13px; line-height:1.6; color:#4a5545; }
.form__hint a { color:var(--green-dark); text-decoration:underline; text-underline-offset:3px; }
.consents { min-width:0; border:0; padding:0; display:grid; gap:14px; }
.consents legend { font-family:var(--font-head); font-size:15px; font-weight:600; margin-bottom:12px; }
.consent { display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.65; cursor:pointer; }
.consent input { flex:0 0 auto; width:19px; height:19px; margin-top:3px; accent-color:var(--green-mid); }
.consent--all { font-weight:600; }
.social { display:inline-flex; align-items:center; gap:10px; color:#0a1d00; font-weight:500; }
.social:hover span { text-decoration:underline; }
.social__ic { width:26px; height:26px; flex:none; }
.m-bolt { display:block; position:absolute; pointer-events:none; z-index:2; }
.m-bolt--silver { color:#e9eae7; }
.m-bolt--green { color:var(--green); }
.footer { position:relative; background:linear-gradient(90deg,#2d2d2d,#383838); color:#fff; padding:28px 22px; font-size:14px; text-align:center; line-height:1.6; }
.footer::before { content:''; position:absolute; left:0; right:0; top:-23px; height:24px; background:inherit; clip-path:polygon(0 40%,46% 40%,45% 0,100% 0,100% 100%,0 100%); }
.footer nav { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 28px; margin-bottom:12px; }
.footer a:hover { text-decoration:underline; }
.footer p { opacity:.75; }

/* One coordinate system for the supplied 1366px artwork and all desktop content.
   cqw follows the actual content width, including scrollbar changes. */
@media (min-width:1200px) {
  .page { container-type:inline-size; }
  main { position:relative; padding-top:201.83cqw; }
  .bg { display:block; position:absolute; inset:0; width:100%; height:auto; z-index:0; }
  .sec--hero,.sec--about,.sec--mission,.sec--roles,.stores,.mission__phones,.roles__list { display:contents; }
  .logo,.logo__rule,.hero__tagline,.artwork,.phone,.btn-play,.store,.about__h,.about__lead,.about__body,.mission__h,.mission__lead,.role-item { position:absolute; z-index:1; }
  .logo--hero { top:4.46cqw; left:31.77cqw; width:36.02cqw; }
  .logo__rule { top:12.01cqw; left:32.8cqw; width:34.04cqw; height:1px; background:#fff; }
  .hero__tagline { top:12.88cqw; width:100%; text-align:center; font-size:1.10cqw; font-weight:300; color:#fff; }
  .artwork--hero { top:15.52cqw; left:17.72cqw; width:26.79cqw; clip-path:polygon(0 0,100% 0,100% 84%,0 93%); }
  .btn-play { top:24.67cqw; left:39.24cqw; width:22.11cqw; height:4.25cqw; font-size:2.196cqw; border-width:.22cqw; border-radius:.88cqw; }
  .store { top:30.31cqw; width:10.91cqw; height:3.51cqw; }
  .store--gp { left:39.02cqw; } .store--as { left:51.98cqw; }
  .about__h { top:49.93cqw; left:26.10cqw; font-size:2.56cqw; color:var(--paper); }
  .about__lead { top:53.37cqw; left:26.17cqw; width:48.32cqw; font-size:1.61cqw; line-height:1.4; color:var(--paper); }
  .about__body { top:58.56cqw; left:26.17cqw; width:48.32cqw; }
  .about__body p { font-size:max(14px,1.098cqw); line-height:1.6; color:#fff; }
  .mission__h { top:79.14cqw; left:26.10cqw; font-size:2.56cqw; }
  .mission__lead { top:82.21cqw; left:26.17cqw; font-size:max(14px,1.098cqw); }
  .fan { width:13.98cqw; }
  .fan--1 { top:88.43cqw; left:7.48cqw; transform:rotate(-3deg); }
  .fan--2 { top:88.29cqw; left:27.38cqw; transform:rotate(-2deg); }
  .fan--3 { top:88.07cqw; left:44.44cqw; }
  .fan--4 { top:87.77cqw; left:60.83cqw; transform:rotate(2.6deg); }
  .fan--5 { top:87.41cqw; left:79.87cqw; transform:rotate(6deg); }
  .artwork--mission { top:102.27cqw; left:16.84cqw; width:53cqw; clip-path:polygon(0 0,100% 0,100% 76.8%,54.56% 83.85%,58% 88.4%,0 97.3%); }
  .logo--mid { top:140.41cqw; left:41.65cqw; width:16.70cqw; }
  /* Match the lower edge of the trainer stripe (design clip cp4).
     The 3px offset lets the source wrist reach that edge before clipping. */
  .artwork--role { top:146.85cqw; left:32.43cqw; width:46.12cqw; clip-path:polygon(0 0,100% 0,100% 95.49%,0 115.66%); }
  .role-item { left:26.10cqw; color:#fff; }
  .role-item--1 { top:157.25cqw; } .role-item--2 { top:172.62cqw; } .role-item--3 { top:186.16cqw; }
  .role-item h3 { font-size:2.56cqw; line-height:1.1; }
  .role-item p { font-size:max(14px,1.098cqw); line-height:1.5; margin-top:.51cqw; max-width:40cqw; }
  .sec--hero > .m-bolt,.sec--roles > .m-bolt { display:none; }
  .sec--contact,.sec--finder { position:relative; z-index:1; background:#fff; }
  .sec--contact { padding-bottom:7cqw; scroll-margin-top:2cqw; }
  .contact__h,.contact__sub,.form,.finder__h,.socials { margin-left:30.53cqw; }
  .contact__h,.finder__h { font-size:3.22cqw; color:var(--green-mid); letter-spacing:-.04cqw; }
  .contact__sub { margin-top:.58cqw; font-size:1.39cqw; color:var(--green-mid); font-weight:300; }
  .form { display:grid; width:40cqw; gap:.95cqw; margin-top:1.76cqw; }
  .field input,.field select { height:3.5cqw; padding:0 1.17cqw; font-size:max(14px,1.098cqw); border-radius:.44cqw; }
  .field textarea { min-height:11.7cqw; padding:.88cqw 1.17cqw; font-size:max(14px,1.098cqw); resize:vertical; border-radius:.44cqw; }
  .field__chev { width:1.46cqw; height:1.46cqw; right:1.17cqw; }
  .form__hint { font-size:max(13px,1.025cqw); }
  .consents { gap:1.025cqw; }
  .consents legend { font-size:max(14px,1.17cqw); margin-bottom:.88cqw; }
  .consent { font-size:max(14px,1.098cqw); gap:.8cqw; }
  .consent input { width:1.46cqw; height:1.46cqw; margin-top:.22cqw; }
  .form__note { min-height:1.46cqw; font-size:1.098cqw; }
  .btn-send { width:21.74cqw; min-height:4.39cqw; justify-self:center; font-size:1.90cqw; }
  .mb-contact { width:11.05cqw; left:11.86cqw; top:34cqw; }
  .sec--finder { padding:0 0 7cqw; }
  .socials { display:flex; flex-wrap:wrap; gap:2.64cqw; margin-top:1.32cqw; font-size:1.098cqw; }
  .social { gap:.73cqw; }
  .social__ic { width:1.98cqw; height:1.98cqw; }
  .mb-finder { width:12.08cqw; left:66.25cqw; top:-1.5cqw; }
  .footer { padding:2.05cqw; font-size:max(14px,1.098cqw); }
}
@media (max-width:1199px) {
  .sec { position:relative; padding:54px 24px; }
  .sec--hero { padding:32px 24px 70px; text-align:center; color:#fff; background:linear-gradient(120deg,#6cba43,#355a20); isolation:isolate; }
  .sec--hero::before { content:''; position:absolute; z-index:-1; inset:145px 0 0; background:url('../assets/design/court.webp') center 65% / cover; clip-path:polygon(0 14%,100% 0,100% 88%,0 100%); }
  .logo--hero { width:min(360px,82%); margin:0 auto; }
  .logo__rule { width:min(340px,78%); height:1px; background:#fff; margin:12px auto 0; }
  .hero__tagline { font-size:14px; line-height:1.5; margin:10px auto 0; max-width:360px; }
  .artwork--hero { width:320px; max-width:100%; margin:16px auto -60px; }
  .btn-play { position:relative; font-size:22px; padding:13px 20px; z-index:1; }
  .stores { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:16px; }
  .store { width:140px; height:45px; }
  .mb-hero { width:120px; right:-20px; bottom:4px; }
  .sec--about { background:#252525 url('../assets/design/dark-texture.webp') center / cover; color:#fff; clip-path:polygon(0 28px,100% 0,100% calc(100% - 28px),0 100%); margin-top:-28px; padding-top:65px; padding-bottom:76px; border-bottom:14px solid var(--green); }
  .about__h,.mission__h { font-size:30px; }
  .about__lead { font-size:20px; line-height:1.4; margin-top:10px; }
  .about__body { margin-top:14px; }
  .about__body p { font-size:16px; line-height:1.6; }
  .sec--mission { padding-top:32px; padding-bottom:0; }
  .mission__lead { font-size:16px; line-height:1.6; margin-top:8px; }
  .mission__phones { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:34px; padding:6px 2px 16px; }
  .mission__phones .phone { flex:0 0 172px; scroll-snap-align:center; }
  .artwork--mission { width:min(620px,100%); margin:4px auto 0; }
  .sec--roles { background:#151515 url('../assets/design/dark-texture.webp') center / cover; color:#fff; clip-path:polygon(0 28px,100% 0,100% calc(100% - 28px),0 100%); margin-top:-28px; padding-top:62px; padding-bottom:70px; }
  .logo--mid { width:230px; margin:0 auto; }
  .artwork--role { width:530px; max-width:100%; margin:22px auto 0; }
  .roles__list { display:grid; gap:18px; margin-top:-8px; }
  .role-item { position:relative; padding:24px; background:linear-gradient(110deg,#65a441,#335720); clip-path:polygon(0 10px,100% 0,100% calc(100% - 10px),0 100%); }
  .role-item h3 { font-size:27px; }
  .role-item p { font-size:16px; line-height:1.5; margin-top:7px; }
  .role-item p br { display:none; }
  .mb-roles { width:130px; top:120px; left:-28px; }
  .sec--contact { scroll-margin-top:20px; padding-top:35px; padding-bottom:80px; }
  .contact__h,.finder__h { font-size:clamp(28px,5vw,40px); color:var(--green-mid); line-height:1.15; text-align:center; }
  .contact__sub { font-size:16px; color:var(--green-mid); text-align:center; margin-top:10px; }
  .form { display:grid; max-width:600px; margin:24px auto 0; gap:14px; }
  .field input,.field select { height:48px; padding:0 15px; font-size:16px; }
  .field textarea { min-height:160px; padding:12px 15px; font-size:16px; resize:vertical; }
  .form__note { min-height:20px; font-size:15px; }
  .btn-send { width:min(100%,300px); min-height:54px; font-size:24px; justify-self:center; }
  .mb-contact { width:76px; left:5px; bottom:4px; }
  .sec--finder { padding-top:24px; padding-bottom:95px; }
  .socials { display:flex; flex-wrap:wrap; justify-content:center; gap:20px 30px; margin-top:22px; font-size:15px; }
  .mb-finder { width:85px; right:10px; bottom:24px; }
}
@media (min-width:700px) and (max-width:1199px) {
  .sec--about,.sec--mission,.sec--roles { padding-left:max(32px,calc((100% - 850px)/2)); padding-right:max(32px,calc((100% - 850px)/2)); }
  .sec--hero { min-height:650px; }
  .sec--hero::before { inset:160px 0 0; }
  .artwork--hero { width:380px; margin-left:calc(50% - 285px); margin-bottom:0; }
  .sec--hero .btn-play { position:absolute; top:340px; left:calc(50% + 15px); }
  .stores { position:absolute; top:406px; left:calc(50% + 15px); width:300px; justify-content:flex-start; }
  .mission__phones { justify-content:space-between; gap:18px; }
  .mission__phones .phone { flex:0 0 calc((100% - 72px)/5); }
  .artwork--role { width:530px; margin:10px 0 -110px auto; }
  .roles__list { position:relative; }
  .role-item { padding:30px; }
}
.reveal { opacity:0; translate:0 24px; transition:opacity .7s var(--ease),translate .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.is-visible { opacity:1; translate:0 0; }
.rule-draw { scale:0 1; transition:scale .7s var(--ease); }
.rule-draw.is-visible { scale:1 1; }
@media (prefers-reduced-motion:reduce) {
  * { transition:none!important; animation:none!important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1!important; translate:0!important; }
  .rule-draw { scale:1 1!important; }
}