/* ==========================================================================
   GALAXY 2 · design system for glxyhockey.com (direction A, "Cinematic minimal")
   One file for every page. Read site/design/README.md before using it.
   Fonts (load in <head>):
   https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,100..151,300..800&family=Onest:wght@400..700&display=swap
   Both families ship full Cyrillic, so EN and RU pages render with the same faces.
   (Geist was dropped: no Cyrillic.)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* surfaces: night tinted toward brand violet */
  --ink:oklch(0.14 0.03 300);
  --ink-2:oklch(0.18 0.035 300);
  --ink-3:oklch(0.23 0.04 300);
  /* text */
  --snow:oklch(0.97 0.008 290);
  --mist:oklch(0.80 0.02 295);
  --dim:oklch(0.66 0.025 295);
  --line:oklch(0.97 0.008 290 / .12);
  --line-2:oklch(0.97 0.008 290 / .22);
  /* brand */
  --plum:#792583; --magenta:#A34BB7; --violet-deep:#4918A0; --violet:#965DD0;
  --ice:#34d3ee; --puck:#fb923c; --wa:#128C4B;
  /* type */
  --f-display:"Roboto Flex",system-ui,sans-serif;
  --f-body:Onest,system-ui,sans-serif;
  --t-hero:clamp(46px,10vw,164px);
  --t-h2:clamp(36px,5.6vw,84px);
  --t-h3:clamp(22px,2.6vw,36px);
  --t-lead:clamp(16px,1.3vw,19px);
  --t-body:17px;
  --t-small:14px;
  /* space (4pt) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --sec:clamp(80px,12vw,180px);          /* vertical rhythm between sections */
  --gut:clamp(16px,5vw,72px);            /* page side gutter */
  --max:1440px;
  --r:6px;                               /* photo radius: barely rounded, cinematic */
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--snow);font:400 var(--t-body)/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:4px;border-radius:4px}
.wrap{padding-inline:var(--gut);max-width:var(--max);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. Type ---------- */
.d{font-family:var(--f-display);font-stretch:151%;font-weight:700;letter-spacing:-.025em;line-height:.95}
.d em{font-style:normal;font-weight:300}
.h2{font-size:var(--t-h2)}
.k{display:block;font:500 12px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.lead{font-size:var(--t-lead);color:var(--mist);max-width:46ch}
.lead b{color:var(--snow);font-weight:500}
.prose p{color:var(--mist);max-width:62ch}
.prose p+p{margin-top:var(--s-4)}
.prose b{color:var(--snow);font-weight:500}
.ulink{color:var(--snow);border-bottom:1px solid var(--line-2);transition:border-color .3s}
.ulink:hover{border-color:var(--snow)}

/* ---------- 4. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 22px;border-radius:999px;border:0;background:var(--snow);color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer;transition:transform .4s var(--ease),background .3s,box-shadow .3s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);background:oklch(1 0 0)}
.btn-ghost{background:transparent;color:var(--snow);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--snow)}
.btn svg{width:18px;height:18px;fill:var(--wa)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.more{display:inline-flex;gap:8px;font-size:var(--t-small);color:var(--snow);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.more:hover{border-color:var(--snow)}

/* ---------- 5. Header + mobile menu ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:16px var(--gut);transition:background .5s var(--ease)}
.hdr.solid{background:oklch(0.14 0.03 300 / .8);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px)}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.brand img{height:36px;width:auto}
.brand span{font:700 13px/1 var(--f-display);font-stretch:151%;letter-spacing:.14em}
.nav{display:flex;gap:clamp(16px,2vw,30px);font-size:14px;color:var(--mist)}
.nav a:hover,.nav a:focus-visible{color:var(--snow)}
.hdr-r{display:flex;align-items:center;gap:var(--s-4)}
.lang{display:flex;gap:2px;font:500 12px/1 var(--f-body);letter-spacing:.1em}
.lang a{padding:8px 7px;color:var(--dim);border-radius:4px}
.lang a:hover{color:var(--snow)}
.lang a[aria-current]{color:var(--snow)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.burger i{display:block;width:16px;height:1.5px;background:var(--snow);box-shadow:0 5px 0 var(--snow),0 -5px 0 var(--snow)}
.mnav{position:fixed;inset:0;z-index:60;background:var(--ink);padding:88px var(--gut) 40px;display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.mnav.open{opacity:1;visibility:visible}
.mnav>a{font:600 26px/1.1 var(--f-display);font-stretch:130%;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)}
.mnav .lang{margin:var(--s-6) 0 var(--s-5);font-size:14px}
.mnav .btn{align-self:flex-start}
.mnav-x{position:absolute;top:16px;right:var(--gut);width:44px;height:44px;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);font-size:24px;line-height:1;cursor:pointer}
@media (max-width:1180px){.nav{display:none}.burger{display:grid}}
@media (max-width:640px){.hdr .lang,.hdr .btn{display:none}}

/* ---------- 6. Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.12);animation:settle 2.8s var(--ease) forwards;filter:saturate(.9)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,oklch(0.14 0.03 300 / .65) 0%,oklch(0.14 0.03 300 / .2) 26%,oklch(0.14 0.03 300 / .6) 58%,var(--ink) 98%),
  radial-gradient(120% 80% at 0% 100%,oklch(0.14 0.03 300 / .85),transparent 60%)}
@keyframes settle{to{transform:scale(1)}}
.hero>.wrap{width:100%;padding-top:128px;padding-bottom:clamp(40px,6vw,80px)}
.hero h1{font-size:var(--t-hero);max-width:12ch;margin-top:var(--s-5);overflow-wrap:break-word}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:var(--s-6) var(--s-8);align-items:end;margin-top:clamp(28px,4vw,48px)}
.hero-foot .btn-row{margin-top:var(--s-5)}
@media (max-width:900px){.hero-foot{grid-template-columns:1fr}}
.line-in>*{opacity:0;transform:translateY(28px);animation:up 1.2s var(--ease) forwards}
.line-in>*:nth-child(2){animation-delay:.12s}.line-in>*:nth-child(3){animation-delay:.24s}
@keyframes up{to{opacity:1;transform:none}}

/* ---------- 7. Lead form (.ql) · markup contract of /js/quick-lead.js, keep class names ---------- */
.ql{background:oklch(0.14 0.03 300 / .72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:14px;padding:22px}
.ql-h{font:700 19px/1.15 var(--f-display);font-stretch:130%;letter-spacing:-.01em;margin-bottom:16px}
.ql-l{display:block;font-size:13px;font-weight:500;color:var(--mist);margin-bottom:6px}
.ql-i{display:block;width:100%;min-height:48px;padding:12px 14px;margin-bottom:14px;border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--line-2);background:oklch(0.10 0.025 300 / .7);color:var(--snow);font-size:16px;line-height:1.3;transition:box-shadow .3s}
.ql-i::placeholder{color:var(--dim)}
.ql-i:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ice)}
.ql-i[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--puck)}
select.ql-i{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),linear-gradient(135deg,var(--mist) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
select.ql-i option{background:var(--ink-2)}
.ql-b{width:100%;min-height:52px;border:0;border-radius:999px;background:var(--snow);color:var(--ink);font:600 15px/1 var(--f-body);cursor:pointer;transition:transform .4s var(--ease)}
.ql-b:hover{transform:translateY(-1px)}
.ql-b:disabled{opacity:.6;cursor:default;transform:none}
.ql-f{font-size:13px;color:var(--dim);margin-top:10px;text-align:center}
.ql-msg{font-size:15px;font-weight:500;line-height:1.5;margin-top:12px;text-align:center;color:var(--ice)}
.ql-msg:empty{display:none}
.ql-msg.ql-bad{color:var(--puck)}
.ql-msg a{color:var(--snow);text-decoration:underline;text-underline-offset:3px}
.ql-done .ql-h,.ql-done .ql-l,.ql-done .ql-i,.ql-done .ql-b,.ql-done .ql-f{display:none}

/* ---------- 8. Sections ---------- */
.sec{padding-block:var(--sec)}
.sec-line{border-top:1px solid var(--line)}
.sec-alt{background:var(--ink-2)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-5);flex-wrap:wrap;margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{max-width:14ch}
.sec-head>p{max-width:40ch;color:var(--mist)}
.sec-head>p a{color:var(--snow);border-bottom:1px solid var(--line-2)}
.live{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--snow)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--puck);box-shadow:0 0 0 4px oklch(0.75 0.16 55 / .2)}

/* season strip: one quiet row under the hero */
.band{border-block:1px solid var(--line)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;padding-block:var(--s-6)}
.band p{color:var(--mist);max-width:60ch}
.band p b{color:var(--snow);font-weight:500}

/* statement: words light up on scroll (JS splits #stmt into .w spans) */
.statement p.d{font-size:clamp(30px,5.2vw,76px);max-width:17ch;font-stretch:125%;font-weight:600;line-height:1.04;margin-top:28px}
/* progressive: words are bright by default; dimming applies only after JS adds .scrub */
#stmt.scrub .w{color:oklch(0.97 0.008 290 / .16);transition:color .5s}
#stmt.scrub .w.on{color:var(--snow)}

/* facts row: numbers without boxes */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(64px,9vw,120px)}
.facts div{padding:28px 24px 0 0}
.facts b{display:block;font:700 clamp(30px,3.6vw,52px)/1 var(--f-display);font-stretch:151%;letter-spacing:-.03em}
.facts span{display:block;margin-top:10px;color:var(--dim);font-size:var(--t-small);max-width:22ch}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr;row-gap:32px}}

/* ---------- 9. Index list + sticky photo stage ---------- */
.plist{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.plist ol{list-style:none}
.plist li a{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);transition:padding .6s var(--ease),color .3s;color:var(--mist)}
.plist li:first-child a{border-top:1px solid var(--line)}
.plist li a:hover,.plist li a:focus-visible,.plist li a.act{color:var(--snow);padding-left:12px}
.plist .n{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.plist h3{font:600 var(--t-h3)/1.1 var(--f-display);font-stretch:135%;letter-spacing:-.02em}
.plist small{display:block;margin-top:6px;font-size:var(--t-small);color:var(--dim)}
.plist .age{font-size:13px;letter-spacing:.08em;color:var(--dim);text-align:right}
.stage{position:sticky;top:100px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.stage img.on{opacity:1;transform:none}
.stage figcaption{position:absolute;left:20px;bottom:18px;font-size:13px;color:var(--snow);text-shadow:0 1px 12px oklch(0 0 0 / .6)}
@media (max-width:860px){.plist{grid-template-columns:1fr}.stage{position:relative;top:0;order:-1;aspect-ratio:4/3}.plist .age{display:none}.plist li a{grid-template-columns:36px 1fr}}

/* ---------- 10. Video story cards ---------- */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.vcard{display:grid;grid-template-columns:minmax(0,.85fr) 1fr;gap:28px;align-items:end}
.vcard .vid{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--ink-2);cursor:pointer}
.vcard video{width:100%;height:100%;object-fit:cover}
.vcard .play{position:absolute;inset:auto 14px 14px auto;width:52px;height:52px;border-radius:50%;background:oklch(0.97 0.008 290 / .92);display:grid;place-items:center;transition:transform .4s var(--ease),opacity .3s}
.vcard .vid:hover .play{transform:scale(1.08)}
.vcard .play svg{width:16px;margin-left:3px;fill:var(--ink)}
.vcard.playing .play{opacity:0}
.vcard q{display:block;font:600 clamp(22px,2.2vw,32px)/1.12 var(--f-display);font-stretch:125%;letter-spacing:-.02em;quotes:none}
.vcard p{color:var(--mist);margin-top:14px;font-size:15px;max-width:34ch}
.vcard .k{margin-bottom:16px}
.vcard .links{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-5)}
@media (max-width:960px){.vgrid{grid-template-columns:1fr;gap:64px}}
@media (max-width:520px){.vcard{grid-template-columns:1fr}.vcard .vid{max-width:300px}}

/* ---------- 11. Split: photo + text (coach, nation, any feature) ---------- */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.split.rev>figure{order:2}
.split figure{border-radius:var(--r);overflow:hidden;background:var(--ink-3)}
.split figure img{width:100%;height:100%;object-fit:cover}
.split blockquote,.split h2{font:600 clamp(28px,4vw,58px)/1.06 var(--f-display);font-stretch:130%;letter-spacing:-.02em;max-width:18ch;margin-block:var(--s-5)}
.split blockquote span{color:var(--violet)}
.split .btn-row{margin-top:var(--s-6)}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev>figure{order:0}.split figure{max-height:70vh}}

/* ---------- 12. Full-bleed photo band (desert / degrees to the ice) ---------- */
.bleed{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--sec)}
.bleed>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:saturate(.85)}
.bleed::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 0%,oklch(0.14 0.03 300 / .85) 45%,oklch(0.14 0.03 300 / .45) 100%)}
.bleed h2{font-size:var(--t-h2);max-width:12ch;margin-top:var(--s-5)}
.bleed .prose{margin-top:var(--s-5)}
.temp{margin-top:clamp(40px,6vw,72px);max-width:760px}
.temp-sub{color:var(--mist);font-size:15px;display:flex;align-items:center;gap:10px}
.temp-dot{width:8px;height:8px;border-radius:50%;background:var(--ice);flex:none}
.temp-dot.is-live{box-shadow:0 0 0 4px oklch(0.8 0.13 210 / .2)}
.temp-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);margin-top:var(--s-4)}
.temp-n{padding:22px 16px 0 0}
.temp-n-num{display:block;font:700 clamp(30px,4.6vw,64px)/1 var(--f-display);font-stretch:151%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.temp-n-hero .temp-n-num{color:var(--ice)}
.temp-n-lbl{display:block;margin-top:10px;font-size:13px;color:var(--dim);max-width:18ch}
.bleed .btn-row{margin-top:clamp(32px,5vw,56px)}

/* ---------- 13. Horizontal reel (renders, galleries) ---------- */
.reel{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 8px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel figure{flex:0 0 min(78vw,1040px);scroll-snap-align:start}
.reel img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.reel figcaption{padding-top:12px;font-size:13px;color:var(--dim)}
.reel-ctl{display:flex;gap:8px;justify-content:flex-end;padding:20px var(--gut) 0;max-width:var(--max);margin-inline:auto}
.reel-ctl button{width:48px;height:48px;border-radius:50%;border:0;background:transparent;color:var(--snow);box-shadow:inset 0 0 0 1px var(--line-2);font-size:18px;cursor:pointer;transition:box-shadow .3s}
.reel-ctl button:hover{box-shadow:inset 0 0 0 1px var(--snow)}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(48px,7vw,96px)}
.specs .big{font:700 clamp(56px,7.4vw,120px)/.9 var(--f-display);font-stretch:151%;letter-spacing:-.04em}
.specs .big sup{font-size:.32em;vertical-align:top;margin-left:6px;letter-spacing:0}
.specs p{color:var(--mist);max-width:34ch;margin-top:16px;font-size:15px}
.specs .k{margin-bottom:18px}
.specs .say{margin-top:0;color:var(--snow);font:600 clamp(22px,2.2vw,30px)/1.15 var(--f-display);font-stretch:125%}
@media (max-width:860px){.specs{grid-template-columns:1fr}.reel figure{flex-basis:86vw}.reel img{aspect-ratio:4/3}}

/* ---------- 14. Cinematic photo + fixtures row ---------- */
.wide-photo{position:relative;aspect-ratio:21/9;overflow:hidden}
.wide-photo img{width:100%;height:115%;object-fit:cover;object-position:50% 40%;will-change:transform}
.wide-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,oklch(0.14 0.03 300 / .88))}
.wide-photo .cap{position:absolute;z-index:1;left:var(--gut);right:var(--gut);bottom:clamp(20px,4vw,48px);display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.wide-photo h3{font-size:clamp(32px,5vw,76px)}
.fixtures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.fixtures a{padding:32px 32px 40px 0;display:flex;flex-direction:column;gap:12px;color:var(--mist);transition:color .3s}
.fixtures a+a{padding-left:32px;border-left:1px solid var(--line)}
.fixtures a:hover{color:var(--snow)}
.fixtures b{font:600 22px/1.15 var(--f-display);font-stretch:125%;color:var(--snow)}
.fixtures .arrow{margin-top:auto;font-size:var(--t-small);color:var(--snow)}
.strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.strip figure{border-radius:var(--r);overflow:hidden}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{padding-top:10px;font-size:13px;color:var(--dim)}
@media (max-width:860px){.wide-photo{aspect-ratio:4/5}.fixtures{grid-template-columns:1fr}.fixtures a+a{padding-left:0;border-left:0;border-top:1px solid var(--line)}.strip{grid-template-columns:1fr 1fr}.strip figure:first-child{grid-column:1/-1}}

/* ---------- 15. Trust row ---------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6);border-top:1px solid var(--line);padding-top:var(--s-6);margin-top:clamp(48px,7vw,96px)}
.trust div{display:flex;flex-direction:column;gap:6px}
.trust b{font-weight:500}
.trust span{color:var(--dim);font-size:var(--t-small)}
@media (max-width:960px){.trust{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trust{grid-template-columns:1fr}}

/* ---------- 16. Offer row (rewards etc.) ---------- */
.offer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6) var(--s-8);align-items:end}
.offer h2{font-size:clamp(32px,4.6vw,68px);max-width:16ch;margin-top:var(--s-5)}
.offer .prose{margin-top:var(--s-5)}
.offer .num{font:700 clamp(56px,8vw,128px)/.9 var(--f-display);font-stretch:151%;letter-spacing:-.04em}
.offer .num small{display:block;font:500 12px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-top:12px}
@media (max-width:860px){.offer{grid-template-columns:1fr}}

/* ---------- 17. Final CTA ---------- */
.cta{position:relative;padding-block:clamp(120px,18vw,240px);text-align:center;overflow:hidden;isolation:isolate}
.cta>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.35;filter:saturate(.8)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 50% 55%,oklch(0.42 0.18 300 / .5),transparent 70%),linear-gradient(180deg,var(--ink),oklch(0.14 0.03 300 / .55) 30%,oklch(0.14 0.03 300 / .55) 70%,var(--ink))}
.cta h2{font-size:clamp(44px,8vw,128px);max-width:11ch;margin:var(--s-5) auto 0}
.cta p{color:var(--mist);margin:28px auto 40px;max-width:44ch}
.cta .btn-row{justify-content:center}
.cta .tel{display:block;margin-top:28px;color:var(--dim);font-size:var(--t-small)}
.cta .tel a{color:var(--snow);border-bottom:1px solid var(--line-2)}

/* ---------- 18. Footer ---------- */
.ftr{border-top:1px solid var(--line);padding:64px 0 40px;font-size:var(--t-small);color:var(--dim)}
.fgrid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:40px}
.fgrid h3{font:500 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:18px}
.fgrid a{display:block;padding:5px 0}
.fgrid a:hover{color:var(--snow)}
.fgrid address{font-style:normal;margin-top:20px;max-width:32ch;line-height:1.6}
.fgrid address a{display:inline;color:var(--snow)}
.social{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px}
.social a{display:inline;color:var(--mist)}
.fbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.fbase nav{display:flex;gap:18px;flex-wrap:wrap}
.fbase a:hover{color:var(--snow)}
@media (max-width:1100px){.fgrid{grid-template-columns:1fr 1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
@media (max-width:620px){.fgrid{grid-template-columns:1fr 1fr}}

/* ---------- 19. Reveal + motion safety ---------- */
/* hidden start state only when JS runs (html.js set inline in <head>) */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv,.line-in>*{opacity:1;transform:none}.hero-img{transform:none}.statement .w{color:var(--snow)}}

/* ---------- 20. Additions for the homepage ---------- */
.skip{position:absolute;left:var(--gut);top:-80px;z-index:100;background:var(--snow);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:12px}
h1,h2,h3{text-wrap:balance}
.lead+.btn-row{margin-top:var(--s-5)}
.hero .ql{width:100%}
/* two-up text links (figure skating, curling) under the program list */
.fixtures.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(48px,7vw,88px)}
.pair-k{margin-top:clamp(56px,8vw,96px)}
.pair-k+.fixtures.two{margin-top:var(--s-5)}
/* partner logo inside the trust row */
.trust .logo{height:26px;width:auto;margin-bottom:6px;opacity:.92}
/* band: CTA cluster */
.band .btn-row{align-items:center}
.band .more{margin-left:var(--s-2)}
/* video card secondary links */
.vcard .links .more{font-size:13px}
@media (max-width:860px){.fixtures.two{grid-template-columns:1fr}.fixtures.two a+a{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:640px){.hero h1{max-width:none}.btn-row .btn{flex:1 1 auto}}
.quote{font:600 clamp(28px,4.4vw,64px)/1.06 var(--f-display);font-stretch:130%;letter-spacing:-.02em;max-width:20ch;margin-block:var(--s-5) var(--s-6);quotes:none}
.quote span{color:var(--violet)}
.trust .logo{align-self:flex-start}
.fgrid .brand{display:inline-flex}
/* renders ship with "design concept" side panels: crop them out of frame */
.reel.crop figure>div{border-radius:var(--r);overflow:hidden}
.reel.crop img{border-radius:0;transform:scale(1.45)}
/* phone: the form pushes the copy up into the busy part of the photo, so darken more */
@media (max-width:900px){.hero::after{background:linear-gradient(180deg,oklch(0.14 0.03 300 / .55) 0%,oklch(0.14 0.03 300 / .72) 22%,oklch(0.14 0.03 300 / .9) 45%,var(--ink) 75%)}.hero-img{object-position:50% 0}}
.hero h1.h1-ru{font-size:clamp(30px,8.3vw,124px);max-width:none}

/* ---------- 21. Additions for program pages (kids, adults), 08.10.2026 ---------- */
/* nav: current page */
.nav a[aria-current]{color:var(--snow)}
/* .tt: hairline rows (timetable, medals, league facts). Label column + 1-2 value columns; stacks on phones */
.tt{border-top:1px solid var(--line-2)}
.tt>div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-5);padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tt.two>div{grid-template-columns:minmax(0,.6fr) minmax(0,1fr)}
.tt b{font:600 clamp(20px,2vw,28px)/1.1 var(--f-display);font-stretch:130%;letter-spacing:-.02em}
.tt span{color:var(--mist)}
.tt span strong{display:block;color:var(--snow);font-weight:500;font-size:clamp(17px,1.4vw,20px);font-variant-numeric:tabular-nums}
.tt-head{padding-block:0 12px!important;border-bottom:1px solid var(--line-2)!important}
.tt-head span{font:500 12px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.tt-note{margin-top:var(--s-5);color:var(--dim);font-size:var(--t-small);max-width:62ch}
.tt-note a,.prose a,.cols a{color:var(--snow);border-bottom:1px solid var(--line-2)}
@media (max-width:760px){.tt>div,.tt.two>div{grid-template-columns:1fr;gap:6px}.tt-head{display:none!important}.tt-head+div{border-top:0}}
/* .fees: season prices, numbers without boxes; last column is the full season */
.fees{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.fees>div{padding:28px 24px 0 0;display:flex;flex-direction:column;gap:10px}
.fees>div+div{padding-left:24px;border-left:1px solid var(--line)}
.fees .big{font:700 clamp(40px,4.6vw,72px)/.95 var(--f-display);font-stretch:151%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fees .big small{display:block;font:500 12px/1.3 var(--f-body);letter-spacing:.18em;color:var(--mist);margin-top:10px}
.fees p{color:var(--dim);font-size:var(--t-small);max-width:24ch}
.fees .full .k{color:var(--snow)}
.fees .full .big{color:var(--snow)}
.fees .save{align-self:flex-start;font-size:12px;letter-spacing:.08em;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--violet);color:var(--snow)}
@media (max-width:900px){.fees{grid-template-columns:1fr 1fr;row-gap:36px}.fees>div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:520px){.fees{grid-template-columns:1fr}.fees>div,.fees>div+div{padding-left:0;border-left:0}.fees>div+div{border-top:1px solid var(--line);padding-top:24px}}
/* .people: coaching staff as text, no avatars */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 var(--s-6);border-top:1px solid var(--line-2);margin-top:clamp(48px,7vw,88px)}
.people>div{padding:26px 0;border-bottom:1px solid var(--line)}
.people h3{font:600 clamp(20px,1.8vw,26px)/1.1 var(--f-display);font-stretch:130%;letter-spacing:-.02em}
.people .k{margin-top:10px}
.people p{color:var(--mist);font-size:15px;margin-top:12px;max-width:34ch}
.people .new{color:var(--violet)}
/* .cols: 3-4 short text blocks with hairline tops (facilities, adult formats) */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-6)}
.cols>div{border-top:1px solid var(--line-2);padding-top:22px}
.cols h3{font:600 clamp(20px,1.8vw,26px)/1.1 var(--f-display);font-stretch:130%;letter-spacing:-.02em}
.cols p{color:var(--mist);font-size:15px;margin-top:12px;max-width:36ch}
/* .faq: native details, no JS */
.faq{border-top:1px solid var(--line-2);max-width:980px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-5);padding:24px 0;font:600 clamp(18px,1.6vw,22px)/1.25 var(--f-display);font-stretch:120%;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 28px/1 var(--f-body);color:var(--mist);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mist);max-width:68ch;padding-bottom:26px}
.faq details p a{color:var(--snow);border-bottom:1px solid var(--line-2)}
/* .idx: plain link index (age groups, neighbourhoods), CSS columns, not a card grid */
.idx{columns:3 240px;column-gap:var(--s-6);border-top:1px solid var(--line);padding-top:var(--s-4)}
.idx a{display:block;break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--line);color:var(--mist);transition:color .3s,padding .5s var(--ease)}
.idx a:hover,.idx a:focus-visible{color:var(--snow);padding-left:8px}
.idx-k{margin:clamp(48px,7vw,80px) 0 var(--s-4)}
.sec-head+.idx-k{margin-top:0}
/* .ql as a second, in-page form (no #ql-form id: that one belongs to quick-lead.js) */
.ql textarea.ql-i{min-height:88px;resize:vertical}
.form-side .prose{margin-top:var(--s-5)}
.form-side .contact{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);margin-top:var(--s-6)}
@media (min-width:861px){.split.form-split{grid-template-columns:minmax(0,1fr) minmax(320px,440px)}}
.ql textarea.ql-i{font:inherit;font-size:16px;line-height:1.4}

/* ---------- 22. Additions for event pages (tournaments, camp), 08.10.2026 ---------- */
/* .next: "next on the calendar" panel in the hero, same glass as .ql, for pages without a lead form */
.next{background:oklch(0.14 0.03 300 / .72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px}
.next h2{font:700 clamp(26px,2.4vw,34px)/1.05 var(--f-display);font-stretch:140%;letter-spacing:-.02em}
.next p{color:var(--mist);font-size:15px}
.next .more{align-self:flex-start;margin-top:6px}
/* .fees.two: two prices side by side (camp) */
.fees.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
@media (max-width:520px){.fees.two{grid-template-columns:1fr}}
/* .powered: quiet "powered by" partner line */
.powered{display:flex;align-items:center;gap:14px;margin-top:var(--s-6);color:var(--dim);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.powered img{height:24px;width:auto;opacity:.92}
/* .split figure.crop: arena renders ship with side panels, zoom them out of frame */
.split figure.crop{aspect-ratio:5/4}
.split figure.crop img{object-position:66.7% 50%;transform:scale(1.6);transform-origin:50% 60%}
/* .strip photos keep their 4:3 frame even when the img carries width/height attributes */
.strip img{height:auto}
/* .wall: trophy wall, hairline grid of results; whole cell may be a link (no links inside) */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.wall>*{background:var(--ink);padding:28px 24px 32px;display:flex;flex-direction:column;gap:10px;color:var(--mist);transition:background .4s var(--ease)}
.wall .m{font:700 clamp(30px,3vw,44px)/1 var(--f-display);font-stretch:151%;letter-spacing:-.03em;color:var(--dim)}
.wall .gold .m{color:var(--snow)}
.wall h3{font:600 20px/1.2 var(--f-display);font-stretch:125%;letter-spacing:-.01em;color:var(--snow)}
.wall p{font-size:15px;max-width:40ch}
.wall .arrow{margin-top:auto;padding-top:8px;font-size:var(--t-small);color:var(--snow)}
.wall a:hover,.wall a:focus-visible{background:var(--ink-2)}
@media (max-width:640px){.wall{grid-template-columns:1fr}.wall>*{padding:24px 0 28px}}
/* .vids: two 16:9 video embeds */
.vids{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.vids iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);background:var(--ink-3)}
@media (max-width:760px){.vids{grid-template-columns:1fr}}
/* .tt cell link */
.tt .more{margin-top:6px}
.tt span .note{display:block;color:var(--dim);font-size:var(--t-small);margin-top:4px}