@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/cormorant-500-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/cormorant-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/cormorant-500i-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/cormorant-500i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/greatvibes-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/greatvibes-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#14233a;--navy:#0f2f66;--navy-deep:#0a1e40;--sky:#1569b9;--forest:#0b2a14;--umber:#120c0a;--cream:#fff;--gold:#ffffff;--gold-lt:#ffffff;--gold-ink:#0f2f66;--paper:#fff;--serif:"Cormorant Garamond",Georgia,serif;--hand:"Great Vibes",cursive;--ico:48px;--cta-h:52px;--px:clamp(1rem,5vw,5rem)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:4.4rem}
@media(max-width:820px){html{scroll-padding-top:4rem}}
body{font:500 1.15rem/1.55 var(--serif);color:var(--ink);background:var(--paper);overflow-x:hidden}
h1,h2,h3,.logo{font-family:var(--serif);font-weight:500}
h2{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.1;margin-bottom:1rem;font-weight:600}
h3{font-size:1.8rem;font-weight:600}
.script{font:400 clamp(1.7rem,3.4vw,2.4rem)/1.2 var(--hand)}
.btn{display:inline-block;padding:.8rem 1.8rem;border-radius:99px;background:#fff;color:var(--ink);text-decoration:none;font:600 1.1rem var(--serif);border:1px solid transparent;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0002}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.btn.sm{padding:.45rem 1.4rem}
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,5vw,5rem);color:#fff;background:linear-gradient(#0a1e4066,transparent)}
.nav.solid{background:#0f2f66e6;backdrop-filter:blur(8px)}
.logo{font-size:2rem;font-weight:600;color:inherit;text-decoration:none;line-height:1.1}
.nav nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.2rem)}
.nav nav a{color:inherit;text-decoration:none;font-size:1.25rem;font-weight:600}
.nav nav a.on:not(.btn){border-bottom:1px solid currentColor}
.burger{display:none;cursor:pointer;width:32px;height:32px;position:relative;background:none;border:0;padding:0;color:inherit}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:4px;right:4px;height:2px;background:#fff;top:15px}
.burger span::before{top:-8px;left:0;right:0}.burger span::after{top:8px;left:0;right:0}
.hero{position:relative;display:flex;flex-direction:column;color:#fff;background-color:var(--sky)}
.hero-text{position:relative}
h1{font-size:2.5rem;line-height:1.02;margin-bottom:.7rem;font-weight:500}
.sub{font-size:1.25rem;line-height:1.35;font-weight:500;margin-bottom:.5rem}
.hero .script{opacity:.95;text-shadow:0 1px 10px #0a1e4099}
.hero-cta .btn{background:var(--cream);color:var(--ink)}
.hero-icons{display:flex;gap:.8rem}
.hero-icons a{width:var(--ico);height:var(--ico);border:1px solid #fffc;border-radius:50%;display:grid;place-items:center;color:#fff;transition:.2s}
.hero-icons a:hover{background:#ffffff26;transform:translateY(-2px)}
.hero-icons svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.7}.hero-icons .tg{fill:currentColor;stroke:none}
.wrap{padding:clamp(3.5rem,8vw,7rem) clamp(1rem,5vw,5rem)}
.wrap>*{max-width:1100px;margin-inline:auto}
.wrap p{font-size:1.2rem;line-height:1.55}
.center{text-align:center}
.row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.center .btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;padding:.9rem 2.1rem;letter-spacing:.03em}
.center .btn:not(.ghost){background:var(--navy);color:#fff}
.center .btn.ghost{color:var(--navy);border-color:#0f2f6699}
.center .btn.ghost:hover{border-color:var(--navy)}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn .tg{fill:currentColor}.btn .ig{fill:none;stroke:currentColor;stroke-width:1.8}
.faq{max-width:760px;margin-inline:auto}.faq details{border-bottom:1px solid #14233a22;padding:1rem 0}.faq summary{cursor:pointer;font-size:1.5rem;font-weight:600;line-height:1.25;list-style:none;min-height:56px;align-items:center;display:flex;justify-content:space-between;gap:1rem}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--gold-ink);flex:none;font-size:1.5rem;line-height:1}.faq details[open] summary::after{content:"–"}.faq details p{margin-top:.6rem}.faq a{color:var(--gold-ink)}
.tel{font-size:1.15rem;margin-top:1.8rem}.tel a{color:var(--gold-ink);text-decoration:none;white-space:nowrap;font-size:1.15rem}
.tel svg,.telf svg{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.35rem;fill:none;stroke:currentColor;stroke-width:1.8}
footer{position:relative;color:#fff;text-align:center;padding:5rem clamp(1rem,5vw,5rem) 2.5rem;background:linear-gradient(#0f2f6622,#0a1e4066),url(img/footer_background.webp) center 85%/cover}
.foot{max-width:800px;margin:auto;display:grid;gap:.8rem;justify-items:center;font-size:1.2rem}
footer a{color:inherit}
footer p a{white-space:nowrap}
footer .ab-script{align-self:auto}
footer small{opacity:.8;font-size:1rem;line-height:1.5;margin-top:1rem}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.rv.in{opacity:1;transform:none}
.dock{display:none}
@media(max-width:820px){
.burger{display:block}
.nav{background:#0f2f66cc}
.nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:1.5rem;background:var(--navy);gap:1.2rem}
.burger[aria-expanded=true]~nav{display:flex}
.row .btn{width:100%;text-align:center}
.logo{font-size:1.8rem}
/* первый экран: текст, фото-кадр целиком, под кадром тёмно-зелёная зона с кнопкой и иконками */
.hero{--zone:calc(9.6rem + env(safe-area-inset-bottom));--fh:91vw;--pb:calc(100% - var(--zone) - 34px);min-height:max(100svh,600px);padding:5.4rem 1rem 0;background-color:#474b0e;background-repeat:no-repeat;background-image:linear-gradient(#0e4590 0,var(--sky) calc(var(--pb) - var(--fh)),#1569b900 calc(var(--pb) - var(--fh) + 60px)),url(img/hero-m.webp?v=2);background-size:100% 100%,125vw auto;background-position:0 0,-10vw var(--pb)}
.hero-text{flex:1;display:flex;flex-direction:column;justify-content:center;margin-bottom:calc(81vw - 36px)}
.hero h1{font-size:clamp(2.3rem,10.4vw,3.1rem);margin-bottom:1rem}
.hero .sub{font-size:clamp(1.2rem,5.2vw,1.5rem);margin-bottom:1rem;text-wrap:balance}
.hero .script{font-size:clamp(2rem,8.6vw,2.6rem)}
.hero-cta .btn{padding:.75rem 1.4rem;font-size:1.1rem;white-space:nowrap}
footer{padding-bottom:5.5rem;background-position:0 0,center bottom;background-size:100% 100%,auto 260%}
.dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:.5rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:#0f2f66f2;backdrop-filter:blur(8px);transform:translateY(110%);visibility:hidden;transition:transform .3s,visibility 0s .3s}.dock.show{transform:none;visibility:visible;transition:transform .3s}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:.6rem .3rem;border:1px solid #ffffff55;border-radius:99px;white-space:nowrap}.dock a:first-child{background:#fff;color:var(--navy);border-color:#fff}
.dock svg{width:1.15em;height:1.15em;flex:none}.dock .tg{fill:currentColor}.dock .ig{fill:none;stroke:currentColor;stroke-width:1.8}
}
/* планшеты: кадр ниже текста с запасом, иначе иконки уходят за низ первого экрана */
@media(min-width:701px) and (max-width:820px){.hero-text{margin-bottom:calc(81vw - 156px)}}
@media(max-width:820px) and (max-height:820px){.hero .sub{margin-bottom:.4rem}}
/* малые высоты (320×568, 360×640, 375×667): без 600px-пола, компактная зона кнопки */
@media(max-width:820px) and (max-height:699px){.hero{--fh:72.8vw;background-size:100% 100%,100vw auto;background-position:0 0,0 var(--pb);--zone:calc(8.2rem + env(safe-area-inset-bottom));min-height:100svh;padding-top:4.1rem}.hero-text{margin-bottom:calc(65.5vw - 36px)}.hero h1{font-size:clamp(1.75rem,8.4vw,2.6rem);margin-bottom:.4rem;line-height:1.05}.hero-cta .btn{font-size:1rem;padding:.65rem 1.1rem}}
@media(max-width:820px) and (min-height:700px){.hero h1{font-size:clamp(2.2rem,11vw,3.3rem);margin-bottom:.8rem}.hero .sub{font-size:clamp(1.15rem,5vw,1.5rem)}.hero .script{font-size:clamp(1.9rem,8.2vw,2.6rem)}}
@media(max-width:820px) and (min-height:700px) and (max-height:820px){.hero h1{font-size:clamp(2.1rem,10vw,3rem)}}
@media(max-width:820px) and (min-height:821px){.hero h1::before{content:"";display:block;width:2.5rem;height:2px;background:var(--gold);margin-bottom:.6rem;border-radius:2px}}
@media(max-width:820px) and (min-height:760px){.hero h1{line-height:1.04}.hero .sub{line-height:1.3}}
@media(max-width:340px){.hero-cta .btn{font-size:.8rem;padding:.5rem .75rem;letter-spacing:0}.dock a{font-size:.9rem}}
@media(min-width:821px){
.hero{justify-content:flex-end;align-items:flex-start;min-height:100svh;padding:7rem 5vw clamp(2rem,6vh,4rem) 21.5vw;background-image:linear-gradient(90deg,#0a1e4055,#0a1e4000 55%),url(img/hero.webp?v=2);background-size:100% 100%,cover;background-position:0 0,50% 50%;background-repeat:no-repeat}
.hero-text{max-width:min(60vw,1000px)}
.hero h1{font-size:min(4.2vw,8.1svh,5.2rem);line-height:1;max-width:9em}
.hero .sub{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.25;max-width:min(22em,44vw)}
.hero .script{font-size:clamp(2.4rem,3.6vw,3.3rem);margin:.3rem 0 1.6rem}
.hero-cta .btn{font-size:1.4rem;padding:.8rem 2.2rem}
.hero-icons{gap:.9rem;margin:1.6rem 0 0 -5vw}
}
@media(min-width:821px) and (max-aspect-ratio:3/2){.hero{background-position:0 0,62% 50%}}
@media(min-width:821px) and (min-aspect-ratio:2/1){.hero{padding-left:23vw}.hero h1{font-size:min(4.4vw,6.9svh,5.2rem)}}
@media(min-width:821px) and (min-aspect-ratio:9/4){.hero{padding-left:24vw}.hero-icons{margin-left:-8vw}}
@media(min-width:821px) and (max-height:600px){.hero{padding-bottom:max(1.3rem,env(safe-area-inset-bottom))}}
/* страница «Art» */
.ah{position:relative;min-height:100svh;display:flex;flex-direction:column;color:var(--cream);background:var(--umber);padding:5.2rem clamp(1rem,5vw,5rem) max(1.2rem,2.5vh)}
.ah::before{content:"";position:absolute;top:0;bottom:0;right:0;width:auto;aspect-ratio:1100/1467;background:url(img/art/art-hero-tall.webp) 0 0/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%);mask-image:linear-gradient(90deg,transparent 0,#000 25%)}
.ah::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,12,10,.92) 0,rgba(18,12,10,.78) 38%,rgba(18,12,10,.25) 62%,transparent 80%),linear-gradient(#120c0a80,#120c0a00 18%)}
.ah-in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;width:100%}
.ah-text{max-width:min(34em,45vw);font-size:clamp(14px,min(1.25vw,2.15vh),20px);text-shadow:0 1px 10px #120c0acc,0 0 2px #120c0a99}
.ah h1,.ah h2{font-size:clamp(70px,min(8vw,14vh),120px);line-height:.95;font-weight:500;margin-bottom:.05em}
.ah-sub{font:italic 500 clamp(24px,min(2.4vw,4.4vh),36px)/1.1 var(--serif);margin-bottom:.6em;color:#fff}
.ah-text p:not(.ah-sub){font-size:1em;line-height:1.42;margin-bottom:.6em;font-weight:500}
.ah-cta{margin-top:auto;padding-top:1rem;display:flex;justify-content:space-between;align-items:center}
.ah-cta .btn{font-size:1.35rem;padding:.7rem 2.2rem}
.ah .hero-icons{margin:0}
.ah .hero-icons a{background:#120c0a80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gal{background:var(--cream);padding-top:clamp(56px,7vw,96px)}
.gal h2{text-align:center;font-size:clamp(2.4rem,5vw,4rem);margin-bottom:clamp(2.5rem,6vw,5rem)}
.work{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1200px;margin:0 auto clamp(3.5rem,8vw,7rem)}
.work:nth-of-type(even) .pic{order:2}
.work:last-of-type{margin-bottom:0}
.pic a{display:block;width:fit-content;max-width:100%;margin-inline:auto;padding:clamp(.4rem,.8vw,.8rem);background:#fff;border:1px solid #0f2f6633;box-shadow:0 20px 50px #120c0a30;cursor:zoom-in}
.pic img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 9rem);margin-inline:auto}
.work h3{font-size:clamp(34px,3.2vw,48px);line-height:1.05;font-weight:600;color:var(--ink);margin-bottom:.5rem}
.work .meta{font-size:.95rem;color:var(--gold-ink);font-weight:600;margin:.1rem 0 1rem;padding:.5rem 0;border-block:1px solid #0f2f6633;letter-spacing:.04em;font-variant-numeric:lining-nums}
.work p{margin-bottom:.7rem}
.work .cost{margin-top:1rem;font-size:1.2rem;text-transform:uppercase;letter-spacing:.08em;font-variant-numeric:lining-nums}.work .cost b{color:var(--gold-ink);font-weight:600;white-space:nowrap}
.work .row{justify-content:flex-start;margin-top:0}
.work .ask{margin:1.2rem 0 .5rem;font-weight:600;color:var(--ink);font-size:1.2rem}
.work .row .long{display:none}
.work .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-size:1.05rem;padding:.6rem 1.4rem}
.work .btn:not(.ghost){background:var(--navy);color:#fff;font-weight:600}.work .btn.ghost{color:var(--navy);border-color:#0f2f6699;font-weight:500}
.lb{position:fixed;inset:0;z-index:50;background:#120c0af2;display:flex;align-items:center;justify-content:center;padding:2vmin;cursor:zoom-out}
.lb-f{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:min(92vw,1100px)}
.lb img{max-width:100%;max-height:calc(100svh - 10rem);width:auto;height:auto;object-fit:contain;box-shadow:0 10px 60px #000a;cursor:default}
.lb figcaption{text-align:center;color:var(--cream);cursor:default}
.lb-t{font:600 1.7rem/1.1 var(--serif)}
.lb-m{font:600 .95rem/1.3 var(--serif);color:var(--gold-lt);letter-spacing:.04em;font-variant-numeric:lining-nums;margin-top:.2rem}
.lb button{position:absolute;width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;background:#120c0acc;color:var(--cream);font:400 1.7rem/1 var(--serif);cursor:pointer;transition:background .2s}
.lb button:hover{background:#ffffff40}
.lb-x{top:max(.6rem,env(safe-area-inset-top));right:.8rem;font-size:2rem!important}
.lb-p,.lb-n{top:50%;margin-top:-24px}
.lb-p{left:.8rem}.lb-n{right:.8rem}
.lb-c{position:absolute;top:max(1.1rem,calc(env(safe-area-inset-top) + .5rem));left:1.2rem;color:var(--gold-lt);font:600 1.05rem var(--serif);letter-spacing:.08em;font-variant-numeric:lining-nums tabular-nums;pointer-events:none}
@media(max-width:820px){.lb img{max-height:calc(100svh - 13rem)}.lb-p,.lb-n{top:auto;bottom:max(1rem,env(safe-area-inset-bottom));margin:0}.lb-p{left:1rem}.lb-n{right:1rem}.lb-t{font-size:1.4rem}}
@media(max-width:820px){
.ah{padding:calc(4.7rem + 78vw + 1.5rem) clamp(1rem,5vw,5rem) 0}
.ah::before{top:4.7rem;width:100%;height:133.4vw;bottom:auto;background:url(img/art/art-hero-tall.webp) center top/100% auto no-repeat;-webkit-mask-image:none;mask-image:none}
.ah::after{background:linear-gradient(#120c0a00 0,#120c0a00 calc(4.7rem + 50vw),var(--umber) calc(4.7rem + 112vw))}
.ah-text{max-width:none;font-size:1.12rem}
.ah h1,.ah h2{font-size:clamp(5rem,26vw,7rem)}
.ah-sub{font-size:clamp(1.7rem,7.4vw,2.2rem)}
.ah-text p:not(.ah-sub){line-height:1.4}
.ah-cta{gap:.6rem;margin-inline:calc(-1*clamp(1rem,5vw,5rem));padding:1rem 16px calc(14px + env(safe-area-inset-bottom));background:var(--umber);justify-content:flex-start}
.ah-cta .btn{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;padding:.4rem .8rem}
.ah-cta .hero-icons{gap:.5rem;flex:none}.ah-cta .hero-icons a{width:44px;height:44px}
.gal{padding-bottom:4.5rem}
.work{grid-template-columns:minmax(0,1fr)}
.work:nth-of-type(even) .pic{order:0}
.work .meta{font-size:.9rem}
.pic a{width:100%}
.pic img{width:100%;max-height:none}
.work .row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.work .row .btn{width:100%;min-height:48px;padding:.5rem .6rem}
}
@media(max-width:340px){.ah-cta .btn{font-size:.95rem}}
/* единство: иконки, кнопки, trainings на телефонах, мелочи */
/* единство: кнопки, мелочи */
.hero-cta .btn{min-height:var(--cta-h);display:inline-flex;align-items:center;justify-content:center}
@media(max-width:820px){.ah-cta .btn{white-space:nowrap}}
@media(max-width:820px) and (max-height:760px){.ah-cta .hero-icons a{width:44px;height:44px}}
@media(max-width:380px){.ah-cta{gap:.4rem}.ah-cta .hero-icons{gap:.3rem}.ah-cta .btn{font-size:.94rem;padding:.4rem .5rem}}
@media(max-width:340px){.ah-cta .btn{min-width:0;font-size:.94rem;padding:.4rem .3rem}}

/* раздел «Тренировки» на главной (по макету img/trening.jpg) */
.tr{position:relative;color:#fff;padding:clamp(3.2rem,7vw,6.5rem) var(--px) clamp(2.4rem,5vw,4rem);background:var(--navy) url(img/trening-bg.webp) center/cover no-repeat;overflow:hidden}
.tr::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0a1e4073 0,#0a1e4000 45%)}
.tr>*{position:relative;z-index:1;max-width:1400px}
.tr h2{font-size:clamp(3rem,7.5vw,8rem);line-height:1;font-weight:500;margin:0 0 .12em;text-shadow:0 2px 16px #0a1e4040}
.tr h2,.tr .lead,.tr .perks{text-shadow:0 1px 12px #0a1e4099}
.tr .lead{font-size:clamp(1.15rem,1.72vw,1.7rem);line-height:1.3;font-weight:500;max-width:min(700px,100%);margin:0;text-shadow:0 1px 10px #0a1e4055}
.tr .lead2{margin-top:.6em}
.tr .perks{font-size:clamp(1rem,1.5vw,1.45rem);line-height:1.3;font-weight:600;margin:.9em 0 1.3em;text-shadow:0 1px 10px #0a1e4055}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem)}
.step{border:1px solid #ffffffb3;border-radius:28px;background:#ffffff14;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:clamp(1rem,1.6vw,1.6rem);text-shadow:0 1px 8px #0a1e4099}
.step .badge{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.step .badge b{font-weight:600;font-size:1.1rem;border:1px solid #fffd;border-radius:99px;padding:.1rem .95rem;line-height:1.5}
.step .badge::after{content:"";width:2rem;height:1px;background:#fff}
.step h3{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.1;margin-bottom:.45rem;font-weight:500;color:#fff}
.step p{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.25;font-weight:500}
.tr-cta{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(1.1rem,1.8vw,1.6rem)}
.tr-cta .btn{background:var(--cream);color:var(--ink);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.3rem);min-height:46px;padding:.5rem 2.2rem;display:inline-flex;align-items:center;justify-content:center}
.tr .hero-icons{margin:0}
@media(min-width:821px){.tr::before{background:linear-gradient(180deg,#0a1e4099 0,#0a1e4066 40%,#0a1e4000 75%)}.tr .hero-icons a{width:40px;height:40px}.tr{padding-top:5.5rem;padding-bottom:2rem}.tr-cta{margin-top:1.2rem}}
@media(max-width:820px){.steps{grid-template-columns:minmax(0,1fr);gap:.8rem}.tr-cta{flex-direction:column;align-items:flex-start;gap:1rem}.tr-cta .btn{min-height:var(--cta-h)}.tr .lead{font-size:1.15rem}.tr .perks{font-size:1.05rem}}

/* зона кнопки первого экрана; ниже .ah-cta по порядку источника: .hero-cta перекрывает его padding/gap/margin-top на телефонах (как и раньше) */
@media(max-width:820px){.hero-cta{margin-top:0;position:relative;height:var(--zone);padding:1.2rem 0 calc(.8rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-start;gap:1rem}.hero-cta .btn{align-self:flex-start}}
@media(max-width:820px) and (max-height:699px){.hero-cta{padding-top:.9rem;gap:.7rem}}
@media(min-width:821px){.ah-text{max-width:min(34em,40vw);font-size:clamp(14px,min(1.32vw,2.3vh),20px)}.ah-cta{margin-top:clamp(1rem,3vh,2rem);padding-top:0}.ah .hero-icons a{background:#120c0acc;border-color:#fffffff2}}
/* Art: .hero-cta выше обнулил отступы .ah-cta; возвращаем ряд с боковым отступом */
/* Art внутри главной: без отступа под шапку, якорь учитывает fixed-nav */
@media(max-width:820px){#art.ah{padding-top:calc(78vw + 1.5rem)}#art.ah::before{top:0}#art.ah::after{background:linear-gradient(#120c0a00 0,#120c0a00 50vw,var(--umber) 112vw)}}
@media(max-width:820px){.ah-cta{flex-direction:row;align-items:center;height:auto;gap:.6rem;padding:1rem 16px calc(14px + env(safe-area-inset-bottom))}}
@media(max-width:380px){.ah-cta{gap:.4rem}}
@media(max-width:340px){.ah-cta{padding-inline:12px}}
/* ===== Обо мне ===== */
.ab{color:#fff;padding:clamp(4.5rem,9vh,6.5rem) clamp(1rem,5vw,5rem) clamp(2.5rem,6vh,4rem)}
.ab-in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
.ab-title{font-size:clamp(3rem,min(13vw,12vh),6rem);line-height:1;font-weight:500;margin:0;text-shadow:0 2px 18px #0a1e4080}
.ab-panel{border:1px solid #ffffff70;border-radius:22px;background:#0a1e40a6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.1rem 1.15rem 1.2rem}
.ab-panel p{font-size:1.125rem;font-weight:500;line-height:1.5;text-wrap:pretty}
.ab-panel p+p{margin-top:.75rem}
.ab-script{font:400 clamp(2.3rem,9.5vw,3.4rem)/1.2 var(--hand);text-align:center;text-shadow:0 2px 14px #0a1e40cc}
@media(min-width:821px){.ab-in{max-width:880px;row-gap:1rem}.ab-panel{padding:1.6rem 2rem 1.7rem}.ab-panel p{font-size:1.2rem;line-height:1.45}.ab-panel p+p{margin-top:.6rem}}
@media(min-width:821px){.ab-title{text-shadow:0 2px 18px #0a1e4099,0 0 2px #0a1e4066}}
@media(max-width:820px){}
/* ===== /Обо мне ===== */
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.nav a:focus-visible,.nav button:focus-visible,.hero a:focus-visible,.tr a:focus-visible,.ah a:focus-visible,.ab a:focus-visible,#faq a:focus-visible,#faq summary:focus-visible,.end a:focus-visible,.dock a:focus-visible,footer a:focus-visible,.tm button:focus-visible,.tr button:focus-visible,.lb button:focus-visible{outline-color:var(--gold-lt)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* === Медиа тренировки: общий лайтбокс === */
.tm-open{font:600 clamp(1.1rem,1.5vw,1.35rem)/1.2 var(--serif);color:#fff;background:none;border:0;padding:.35rem 0;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;text-shadow:0 1px 8px #000a,0 0 2px #0006}
.tm-open i{width:2.1em;height:2.1em;border:1px solid var(--gold-lt);border-radius:50%;display:grid;place-items:center;transition:.2s}
.tm-open i::before{content:"";border-left:.55em solid currentColor;border-top:.34em solid transparent;border-bottom:.34em solid transparent;margin-left:.15em}
.tm-open span{border-bottom:1px solid #ffffff99;padding-bottom:1px}
.tm-open:hover i{background:#ffffff26;transform:scale(1.06)}
.tm{border:0;padding:0;margin:0;inset:0;width:100%;height:100svh;height:100dvh;max-width:none;max-height:none;background:var(--navy-deep);color:var(--cream);overflow:hidden}
.tm::backdrop{background:var(--navy-deep)}
.tm-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding:clamp(1rem,3vh,2rem) clamp(1.2rem,4vw,4rem);outline:0}
.tm-cap{justify-self:end;text-align:right;margin:0;font:500 clamp(1.6rem,2.4vw,2.6rem)/1.15 var(--serif);color:var(--gold-lt);letter-spacing:.02em}
.tm-stage,.tm-th{list-style:none;margin:0;padding:0}
.tm-stage{height:min(88svh,calc((100vw - 28rem)*16/9));aspect-ratio:9/16;border:1px solid #ffffff66;border-radius:3px;overflow:hidden;background:#000}
.tm-stage li{position:relative;width:100%;height:100%}
.tm-stage video,.tm-stage img{width:100%;height:100%;object-fit:contain;display:block}
.tm-stage img{object-fit:cover}
.tm-v::after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:2px solid var(--gold-lt);border-radius:50%;background:#0a1e40b3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/52% no-repeat;pointer-events:none}
.tm-v.p::after{display:none}
.tm-th{justify-self:start;display:grid;gap:.8rem}
.tm-th button{position:relative;display:block;width:clamp(64px,6vw,96px);aspect-ratio:9/16;padding:0;border:1px solid var(--gold-lt);border-radius:3px;overflow:hidden;background:none;cursor:pointer;opacity:.8;transition:opacity .2s}
.tm-th button:hover{opacity:1}
.tm-th img{width:100%;height:100%;object-fit:cover;display:block}
.tm-th i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#0a1e40b3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/70% no-repeat}
.tm-x{position:absolute;top:clamp(.8rem,2vh,1.4rem);right:clamp(.8rem,2vw,1.6rem);width:52px;height:52px;border-radius:50%;border:1px solid var(--gold-lt);background:transparent;color:var(--cream);font:500 2rem/1 var(--serif);cursor:pointer;z-index:2}
.tm-x:hover{background:#ffffff26}
@media(max-width:820px){
 .tm-in{grid-template-columns:1fr;grid-template-rows:minmax(3.2rem,auto) minmax(0,1fr) auto;justify-items:center;gap:.7rem;padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom))}
 .tm-cap{justify-self:start;text-align:left;font-size:1.15rem;margin-right:3.5rem;align-self:center}
 .tm-stage{height:100%;max-width:100%}
 .tm-th{grid-auto-flow:column;gap:.7rem;justify-self:center}
 .tm-th button{width:56px}
 .tm-x{width:48px;height:48px;top:.5rem;right:.6rem}
}
.tr-watch{margin-top:clamp(.9rem,1.6vw,1.3rem)}
@media(min-width:821px) and (max-height:900px){.tr-watch{margin-top:.5rem}.tm-open{padding:0}.tr-cta{margin-top:.5rem}}
@media(min-width:821px) and (max-height:760px){.tr{padding-top:4.8rem;padding-bottom:1.2rem}.tr .perks{margin:.5em 0 .8em}.step{padding:.8rem 1.2rem}.step .badge{margin-bottom:.3rem}}
html:has(dialog[open]),html:has(.lb),html:has(.burger[aria-expanded=true]){overflow:hidden}
/* Ноутбуки: «Тренировки» и «Обо мне» ровно в экран; постраничный скролл (proximity, без stop) */
@media(min-width:1024px) and (max-height:800px){
.tr,.ab{min-height:100svh}
.tr{padding-top:4.6rem;padding-bottom:1rem;display:flex;flex-direction:column;justify-content:center}
.tr h2{font-size:clamp(3rem,min(7.5vw,11vh),8rem);margin-bottom:.05em}
.tr .lead{font-size:clamp(1.05rem,min(1.5vw,2.4vh),1.5rem);line-height:1.25;max-width:min(980px,100%)}
.tr .lead2{margin-top:.4em}
.tr .perks{font-size:clamp(1rem,min(1.3vw,2.2vh),1.3rem);margin:.4em 0 .7em}
.steps{gap:1rem}
.step{padding:.7rem 1.1rem}
.step .badge{margin-bottom:.2rem}
.step h3{font-size:clamp(1.3rem,min(1.9vw,3vh),1.8rem);margin-bottom:.25rem}
.step p{font-size:clamp(1rem,min(1.2vw,2.2vh),1.2rem);line-height:1.22}
.tr-watch{margin-top:.2rem}
.tr-cta{margin-top:.3rem}
.ab{padding-top:4.4rem;padding-bottom:.7rem;display:flex;flex-direction:column;justify-content:center}
.ab-in{row-gap:.5rem;width:100%}
.ab-title{font-size:clamp(2.6rem,min(6vw,8vh),4.4rem)}
.ab-panel{padding:.85rem 1.4rem .95rem}
.ab-panel p{font-size:1.05rem;line-height:1.38}
.ab-panel p+p{margin-top:.4rem}
.ab-script{font-size:clamp(1.8rem,5vh,2.6rem);line-height:1.1}
}
/* FAQ: тёмно-синий, плавно переходит в блок с травой (блок .end начинается с тёмного тона) */
#faq{max-width:none;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:5.6rem;color:#fff}
#faq>*{width:100%;max-width:760px}
#faq h2{color:#fff}
#faq details{border-bottom:1px solid var(--gold)}
#faq summary::after{color:var(--gold)}
#faq details p,#faq a{color:var(--cream)}
#faq a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
/* «Записаться» + футер — один экран на фоне травы (главная и Art) */
.end{color:#fff}
.end h2,.end #contacts p{color:#fff}
.end .tel a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.end .center .btn:not(.ghost){background:var(--cream);color:var(--ink);font-weight:600}
.end .center .btn.ghost{color:#fff;border-color:#ffffffd9;background:#0b2a1466;font-weight:600}
.end .center .btn.ghost:hover{border-color:#fff;background:#ffffff26}
.end footer{background:none}
.end .proof{max-width:34rem;margin:1.1rem auto 0;padding:.9rem 0 0;border-top:1px solid var(--gold)}
.end #contacts .proof p{font:italic 500 clamp(1.25rem,4.6vw,1.6rem)/1.3 var(--serif);color:#fff;text-wrap:balance}
.end .proof span{display:block;margin-top:.35rem;font-weight:600;font-size:1rem;letter-spacing:.08em;color:var(--gold-lt)}
.end #contacts .row{margin-top:1.4rem}
@media(max-width:820px){.end footer{padding-top:2.5rem}.end small{opacity:.92}}
@media(min-width:821px){.end{min-height:100svh;display:flex;flex-direction:column}.end #contacts{flex:1;display:flex;flex-direction:column;justify-content:center}.end footer{padding-top:1.5rem;padding-bottom:1.5rem}}
@media(min-width:1024px) and (max-height:1000px){.end #contacts{padding-top:5rem;padding-bottom:1rem}.end .foot{gap:.5rem;font-size:1.1rem}.end small{margin-top:.4rem;font-size:.9rem}.end #contacts .row{margin-top:1rem}.end .tel{margin-top:1rem}}
@media(min-width:1024px) and (min-height:700px) and (hover:hover) and (prefers-reduced-motion:no-preference){html{scroll-snap-type:y proximity}.hero,.tr,.ah,.ab,.gl,.end{scroll-snap-align:start;scroll-margin-top:-4.4rem}.end #contacts{scroll-margin-top:-4.4rem}}
@media(min-width:1024px) and (max-height:1000px){.end .proof{margin-top:.8rem;padding-top:.7rem}.end #contacts .proof p{font-size:1.45rem}.end #contacts .row{margin-top:1rem}}
@media(min-width:1024px) and (min-height:801px){.ab{min-height:100svh}}
/* Ноутбуки: Art целиком в окне под шапкой (колонка + кнопка + иконки), только отступы и размеры */
@media(min-width:1024px) and (max-height:800px){.ah{padding-top:4.8rem;padding-bottom:.8rem}.ah h1,.ah h2{font-size:clamp(70px,min(8vw,12.5vh),120px)}.ah-text{font-size:clamp(14px,min(1.32vw,2.2vh),20px)}.ah-sub{margin-bottom:.4em}.ah-text p:not(.ah-sub){line-height:1.4;margin-bottom:.5em}.ah-cta{margin-top:.6rem}}
/* 801-1000px по высоте (1920x960): «Тренировки» с кнопками и иконками в экран */
@media(min-width:1024px) and (min-height:801px) and (max-height:1000px){.tr{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:4.8rem;padding-bottom:5.6rem}.tr h2{font-size:clamp(3rem,min(7.5vw,10vh),8rem)}.tr .perks{margin:.5em 0 .8em}.step{padding:.8rem 1.2rem}.step .badge{margin-bottom:.3rem}.tr-watch{margin-top:.3rem}.tr-cta{margin-top:.6rem}}
/* 320x568: h1 не вплотную к шапке, низ иконок не обрезан */
@media(max-width:340px) and (max-height:600px){.hero{padding-top:4.3rem}.hero h1{font-size:1.6rem;line-height:1.02;margin-bottom:.25rem}.hero .sub{margin-bottom:.4rem}.hero-cta{padding:.4rem 0 .5rem;gap:.4rem}}
@media(min-width:1024px) and (min-height:1001px){.tr{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-bottom:5.6rem}}
#faq{min-height:100svh}

/* Панель под текстом на фото (как «Обо мне») */
.pnl{border:1px solid #ffffff70;border-radius:22px;background:#0a1e40a6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.4rem 1.5rem 1.5rem}
#faq .pnl h2{margin-top:0}
@media(min-width:1024px) and (max-height:1000px){.end .pnl{padding:.9rem 1.2rem 1rem}.end #contacts h2{margin-bottom:.5rem}.end #contacts>.pnl>p{margin:.2rem 0}}


/* Футер на фото: подложка как у панелей, чтобы мелкий текст читался на ярком поле */
.end .foot{width:fit-content;max-width:min(100%,58rem);margin-inline:auto;padding:.9rem 1.4rem 1rem;border:1px solid #ffffff55;border-radius:18px;background:#0a1e40b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 6px #0a1e40cc}
.end footer{padding-top:1rem;padding-bottom:1rem}
.ab-title{text-shadow:0 2px 14px #0a1e40e6,0 0 3px #0a1e40b3}
.ab-script{text-shadow:0 2px 14px #0a1e40e6,0 0 3px #0a1e40b3}
/* ===== Премиум-правки 2026-10-11 ===== */
/* вход hero: только CSS; без анимации (reduce) финал виден сразу */
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:no-preference){
.hero h1,.hero .sub,.hero .script,.hero-cta{animation:heroIn .6s cubic-bezier(.2,.7,.2,1) backwards}
.hero .sub{animation-delay:.08s}.hero .script{animation-delay:.16s}.hero-cta{animation-delay:.28s}
}
/* кнопки */
.btn{letter-spacing:.02em}
.btn span{display:inline-block;margin-left:.45em;transition:transform .2s}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
@media(max-width:340px){.btn span{margin-left:.3em}}
/* золотая полоска меню: мышь (hover) и касание (active/focus), текущий пункт золотом */
.nav nav a:not(.btn):is(:hover,:active,:focus-visible){text-decoration:underline;text-decoration-color:var(--gold-lt);text-decoration-thickness:1px;text-underline-offset:.35em}
.nav nav a.on:not(.btn){border-bottom-color:var(--gold-lt)}
/* hover только для устройств с мышью */
@media(hover:hover){
.btn:hover span{transform:translateX(4px)}
.hero-cta .btn:hover{border-color:var(--gold)}
.step{transition:transform .25s ease}
.step:hover{transform:translateY(-4px)}
.pic a{overflow:hidden}
.pic img{transition:transform .6s ease}
.pic a:hover img{transform:scale(1.025)}
}
.tm-open span{text-wrap:balance}
/* шов Art / Обо мне */
.ab{position:relative}
.gl::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;z-index:0;background:linear-gradient(var(--umber),#120c0a00);pointer-events:none}
@media(max-width:820px){
#art.ah::after{background:linear-gradient(#2a1f12 0,#120c0a00 56px),linear-gradient(#120c0a00 0,#120c0a00 50vw,var(--umber) 112vw);pointer-events:none}
.gl::before{height:48px}
}
/* Обо мне: первый абзац */
.ab-panel p:first-child{font-size:1.35rem;font-weight:600;line-height:1.35;padding-bottom:.8rem;border-bottom:1px solid #ffffffcc}
.ab-panel p:first-child+p{margin-top:.9rem}
/* ===== Пакет 2026-10-11 (б): общий фон, ось панелей, микротипографика ===== */
/* один фиксированный фон вместо background-attachment:fixed (работает и на iOS) */
.bgfix{position:fixed;inset:0;z-index:-1;background:var(--sky) url(img/trening-bg.webp) center/cover no-repeat;pointer-events:none}
/* ось 760px на ноутбуках: FAQ, «Записаться», футер; футер без стекла, тонкая золотая линия */
@media(min-width:821px){
#faq{min-height:0;padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:2rem}
/* ≥1024: переход к #faq даёт чистый экран (экран минус шапка), кромка следующей карточки не видна */
@media(min-width:1024px){#faq{min-height:calc(100svh - 4.4rem)}}
.end .pnl{width:100%;max-width:760px}
.end .foot{width:100%;max-width:760px;padding:1.1rem 0 0;border:0;border-top:1px solid var(--gold);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 2px #0a1e40f2,0 0 12px #0a1e40d9}
.end small{opacity:1}
/* скрим под футером: мелкий текст ≥4.5:1 на ярких пучках травы; под панелью, без событий */
.end{position:relative;isolation:isolate}
.end::before{content:"";position:absolute;left:0;right:0;bottom:0;height:min(42%,24rem);z-index:-1;pointer-events:none;background:linear-gradient(#0a1e4000,#0a1e4033 45%,#0a1e4059)}
}
/* микротипографика */
h1,h2,h3,.faq summary,.step h3{text-wrap:balance}
.wrap p,.step p,.lead,.ah-text p,.work p{text-wrap:pretty}
.tel,.tel a,.telf,.step .badge b,.faq summary,.faq a[href^=tel],.foot p{font-variant-numeric:lining-nums tabular-nums}
::selection{background:var(--gold-lt);color:var(--forest)}
.end small{max-width:46rem;text-wrap:balance;letter-spacing:.02em}
/* тонкие линии: золото только там, где линия «оформляет» (решение владельца, premium-designer) */
.end .center .btn.ghost,.end .center .btn.ghost:hover{border-color:var(--gold-lt)}
.step .badge b{border-color:var(--gold-lt)}
.step .badge::after{background:var(--gold-lt)}
.center .btn.ghost:hover,.work .btn.ghost:hover{border-color:var(--gold)}
.ah .hero-icons a{border-color:#ffffff99}
.nav nav a.on:not(.btn):is(:hover,:active,:focus-visible){text-decoration:none}
/* Art на ≥821px: иконки связи внизу блока справа, как в «Тренировках» */
@media(min-width:821px){.ah .ah-cta{position:static}.ah .ah-cta .hero-icons{position:absolute;right:0;bottom:0}}
/* «Записаться»: Telegram в одном стиле с WhatsApp и Instagram (контур золотом) */
.end .center .btn:not(.ghost){background:#0b2a1466;color:#fff;border:1px solid var(--gold-lt)}
.end .center .btn:not(.ghost):hover{background:#ffffff26}
/* иконки связи везде в золотом контуре (решение владельца) */
.hero-icons a,.ah .hero-icons a,.tr .hero-icons a{border-color:#ffffffcc}
/* подчёркивания как в меню (золото, 1px) */
.foot a,.end .tel a,.end a:not(.btn):not(.logo),footer a:not(.logo),#faq a,.ab-panel a{text-decoration-line:underline;text-decoration-color:var(--gold-lt);text-decoration-thickness:1px;text-underline-offset:.35em}
/* якорь «Контакты»: .end ровно в экран и на устройствах без hover (планшеты) */
@media(min-width:1024px) and (min-height:700px){.end #contacts{scroll-margin-top:-4.4rem}}
/* нижняя панель на телефоне: все три кнопки в одном стиле, золотой контур, без белой заливки */
.dock a,.dock a:first-child{background:transparent;color:#fff;border-color:var(--gold-lt)}
/* окно тренировки на телефоне: встроенная кнопка ▶ браузера скрыта, остаётся одна золотая */
.tm-stage video::-webkit-media-controls-overlay-play-button{display:none}
/* крестик закрытия: рисуем линиями, ровно по центру кружка (глиф × в шрифте смещён) */
.tm-x,.lb-x{font-size:0!important}
.tm-x::before,.tm-x::after,.lb-x::before,.lb-x::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1.5px;margin:0;background:currentColor;border-radius:1px;transform:translate(-50%,-50%) rotate(45deg)}
.tm-x::after,.lb-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* стрелки лайтбокса Art: рисуем уголком, ровно по центру кружка */
.lb-p,.lb-n{font-size:0!important}
.lb-p::before,.lb-n::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-30%,-50%) rotate(45deg)}
.lb-n::before{transform:translate(-70%,-50%) rotate(-135deg)}
/* золотая ▶ сама принимает касание (на телефоне тап по <video controls> не доходил до обработчика) */
.tm-v::after{pointer-events:auto;cursor:pointer}
/* пока видео играет, поверх него прозрачный слой: тап ставит на паузу (полоса управления снизу остаётся доступной) */
.tm-v.p::before{content:"";position:absolute;inset:0 0 56px 0;z-index:1;cursor:pointer}
/* Галерея на главной: два альбома (Golf слева, Art справа) на общем фоне .bgfix */
.gl{position:relative;color:#fff;padding:4.4rem clamp(1rem,5vw,5rem) clamp(2.5rem,6vh,4rem)}
.gl-in{max-width:1100px;margin:0 auto;display:grid;gap:1.2rem}
.gl .ab-title{text-shadow:0 2px 14px #0a1e40e6,0 0 3px #0a1e40b3}
.gl-albums{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
.gl-album h3{font-size:2.2rem;font-weight:500;line-height:1.1;margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--gold)}
.gl-soon{font-size:1.15rem;font-weight:500;color:var(--cream)}
.gl-list{list-style:none;margin:0 0 1rem;padding:0}
.gl-list li+li{border-top:1px solid #ffffff2e}
.gl-list a{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.7rem 0;color:#fff;text-decoration:none}
.gl-list img{width:84px;height:84px;object-fit:cover;border-radius:10px}
.gl-t{display:grid;gap:.15rem;min-width:0}
.gl-t b{font-size:1.25rem;font-weight:600;line-height:1.15}
.gl-t span{font-size:1rem;font-weight:500;line-height:1.3;color:var(--cream)}
.gl-t small{font-size:.95rem;color:var(--gold-lt)}
.gl-c{font-size:1.1rem;font-weight:600;color:var(--gold-lt);white-space:nowrap;align-self:start;padding-top:.15rem}
@media(max-width:520px){.gl-list a{grid-template-columns:72px minmax(0,1fr);}.gl-list img{width:72px;height:72px}.gl-list img{grid-row:1/3;align-self:start}.gl-t{grid-column:2}.gl-c{grid-column:2;padding-top:0}}
@media(min-width:821px){.gl-albums{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1.6rem}}
/* цифры везде как в телефоне футера: ровные, на линии (font: сбрасывал наследование) */
*,*::before,*::after{font-variant-numeric:lining-nums tabular-nums!important}/* перебивает сокращение font: */
/* ссылки /art#id из «Галереи»: карточка работы встаёт под шапкой с воздухом (html уже даёт scroll-padding-top под шапку) */
.work{scroll-margin-top:1.5rem}
.work.rv{transform:none}/* появление картин только по opacity: сдвиг 24px съедал scroll-margin при переходе по /art#id */
/* логотип-силуэт (белый, деликатно): шапка/футер, под слоганом hero, справа от Art, между блоками */
.mk{display:inline-block;width:auto;opacity:.95;pointer-events:none}
.logo .mk{height:1.3em;margin:-.4em 0 -.4em .35em;vertical-align:-.15em}
.ah h2 .mk{height:.75em;margin-left:.3em;vertical-align:-.05em;opacity:.85}
.nav .logo{white-space:nowrap}
@media(min-width:821px) and (max-width:1199px){.nav .logo .mk{display:none}}
@media(min-width:821px) and (max-width:1199px){.nav{padding-left:1rem;padding-right:1rem}.nav .logo{font-size:1.55rem}.nav nav{gap:.75rem}.nav nav a{font-size:.95rem;white-space:nowrap}.nav nav a.btn{padding-left:.9rem;padding-right:.9rem}}

/* Галерея: две «папки» Golf / Art, одинаковые плитки, без цен; открытие по клику */
.gl-grid{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem}
.gl-grid li{margin:0;aspect-ratio:1;position:relative}
.gl-grid a,.gl-grid button{display:block;position:relative;width:100%;height:100%;padding:0;border:1px solid #ffffff59;border-radius:10px;overflow:hidden;background:#ffffff1f;cursor:pointer;color:#fff}
.gl-grid img{width:100%;height:100%;object-fit:cover;display:block}
.gl-grid b{position:absolute;left:0;right:0;bottom:0;padding:.35rem .4rem;font:600 .9rem/1.15 var(--serif);text-align:left;background:#ffffff29;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 3px #0a1e40cc}
.gl-grid i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid #fff;background:#ffffff33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/60% no-repeat}
.gl-album h3{border-bottom-color:#ffffff59}
a.tm-open{text-decoration:none}
/* логотип-силуэт: чуть меньше и на линии строки */
.logo .mk{height:1.05em;margin:0 0 0 .3em;vertical-align:-.12em}
.ah h2 .mk{height:.6em;margin-left:.25em;vertical-align:baseline}
/* «Начать играть в гольф» крупнее на телефонах (просьба Кати) */
@media(max-width:820px) and (min-height:700px){.hero h1{font-size:clamp(2.6rem,13vw,3.6rem);line-height:1.02}}
/* плитки галереи: подпись на тёмном градиенте (контраст), Golf — 3 в ряд, колонки равные */
.gl-grid b{background:linear-gradient(#0a1e4000,#0a1e40e6 75%);-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:1.1rem}
.gl-album:first-child .gl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:821px){.gl-albums{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gl-album:last-child .gl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* «Галерея» ровно в экран на десктопе: переход по якорю не показывает «Вопросы и ответы» снизу */
@media(min-width:821px){.gl{min-height:100svh;display:flex;align-items:center;box-sizing:border-box}.gl-in{width:100%}}

/* ===== Правки Кати 2026-10-13 (в) ===== */
/* прозрачно-белое стекло вместо тёмно-синих подложек (как «Тренировки» и «Галерея») */
.ab-panel,.pnl{background:#ffffff26;border:1px solid #ffffffb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-shadow:0 1px 8px #0a1e4099}
.end .foot{background:#ffffff26;border:1px solid #ffffffb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.end .center .btn.ghost,.end .center .btn:not(.ghost){background:#ffffff26}
/* «Галерея» по макету: вводный текст и две стеклянные карточки */
.gl-intro{text-shadow:0 1px 10px #0a1e40aa}
.gl-intro p{font-size:1.2rem;font-weight:500;line-height:1.35;margin:0 0 .5rem;max-width:44rem}
.gl-album{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.3rem 1.2rem 1.4rem}
.gl-album h3{font-size:2.6rem;font-weight:500;line-height:1.1;margin:0;padding-bottom:.5rem;border-bottom:1px solid #ffffffb3;width:100%}
.gl-album p{font-size:1.25rem;margin:0;font-weight:500}
.gl-album .btn.ghost{color:#fff;border-color:#ffffffd9;background:#ffffff1a;font:600 1.1rem var(--serif);cursor:pointer;margin-top:.3rem}
.gl-albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media(max-width:520px){.gl-album{padding:1rem .85rem 1.1rem}.gl-album h3{font-size:2.2rem}.gl-album p{font-size:1.1rem}}
@media(min-width:821px){.gl-albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}.gl-in{max-width:960px}}
/* слоган «Сыграем в гольф красиво?»: тонко, воздух между буквами, без тяжёлой тени */
.script,.ab-script{letter-spacing:.045em;text-shadow:0 0 8px #0a1e4066!important}
/* главное фото: широкий кадр Кати, флагшток и клюшка целиком (телефон: во всю ширину без увеличения) */
@media(max-width:820px){.hero{--fh:90vw;background-size:100% 100%,100vw auto;background-position:0 0,0 var(--pb)}.hero-text{margin-bottom:calc(80vw - 36px)}}
@media(min-width:701px) and (max-width:820px){.hero-text{margin-bottom:calc(80vw - 156px)}}
@media(max-width:820px) and (max-height:699px){.hero-text{margin-bottom:calc(65.5vw - 36px)}}
/* ноутбук, широкий экран (≥3:2): фото Кати на всю ширину; текст справа вверху в небе, кнопка слева внизу */
@media(min-width:821px) and (min-aspect-ratio:3/2){
.hero{justify-content:flex-start;align-items:stretch;padding:5.2rem 5vw 0;background-image:url(img/hero-wide.webp?v=2);background-size:cover;background-position:center bottom;background-repeat:no-repeat}
.hero-text{margin-left:auto;width:min(44vw,720px);max-width:none}
.hero h1{font-size:min(3.6vw,6.2svh);line-height:1.05;max-width:none;margin-bottom:.4rem}
.hero .sub{font-size:min(2vw,3.6svh);max-width:none;margin-bottom:.4rem}
.hero .script{font-size:min(3.2vw,5.2svh);margin:.2rem 0 0}
.hero-cta{position:absolute;left:5vw;bottom:clamp(1.2rem,5vh,3rem);margin:0}
.hero-cta .btn{font-size:clamp(1.05rem,1.3vw,1.3rem);padding:.65rem 1.6rem}
.hero-icons{margin:1rem 0 0}
}
/* ноутбук, «квадратный» экран (<3:2): как на телефоне, кадр на всю ширину, текст над небом */
@media(min-width:821px) and (max-aspect-ratio:3/2){
.hero{background-color:#474b0e;--fh:56.25vw;--zone:9rem;--pb:calc(100% - var(--zone) - 34px);padding:5.4rem 5vw 0;justify-content:flex-start;background-image:linear-gradient(#0e4590 0,var(--sky) calc(var(--pb) - var(--fh)),#1569b900 calc(var(--pb) - var(--fh) + 60px)),url(img/hero-wide.webp?v=2);background-size:100% 100%,100vw auto;background-position:0 0,0 var(--pb)}
.hero-text{max-width:min(90vw,40rem);margin-bottom:0;flex:1}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem);margin-bottom:.5rem}
.hero .script{margin:.2rem 0 0;font-size:clamp(1.9rem,3.2vw,2.6rem)}
.hero .sub{font-size:clamp(1.2rem,2.2vw,1.5rem)}
.hero-cta{margin-top:0}
.hero-icons{margin-left:0}
}
}
@media(max-width:820px){.script,.ab-script{letter-spacing:.02em}}
@media(max-width:820px) and (max-height:699px){.hero .script{font-size:clamp(1.6rem,7vw,2.1rem)}.hero-text{margin-bottom:calc(60vw - 36px)}}
/* читаемость на светлом небе: стекло с лёгкой дымкой, белая рамка и подписи */
.ab-panel,.pnl,.end .foot{background:#ffffff26}
.gl-album .btn.ghost{white-space:nowrap;padding:.5rem .9rem;font-size:1rem}
.gl-album .btn.ghost span{margin-left:.3em}
@media(max-width:380px){.gl-album .btn.ghost{padding:.45rem .6rem;font-size:.95rem}}

/* читаемость: плашка под вводным текстом «Галереи», кнопки контактов на стекле */
.gl-intro{background:#ffffff26;border:1px solid #ffffffb3;border-radius:22px;padding:1rem 1.15rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gl-intro p:last-child{margin-bottom:0}
.end .center .btn.ghost,.end .center .btn:not(.ghost){background:#ffffff26}

.gl-intro{background:#ffffff26}
.gl-album h3{text-shadow:0 1px 8px #0a1e40cc}
.ab-title{text-shadow:0 2px 14px #0a1e40cc,0 0 3px #0a1e40b3}
.end .pnl .tel,.end .pnl .tel a,.end .pnl>p{text-shadow:0 1px 8px #0a1e40cc}
.end .pnl{background:#ffffff26}

/* читаемость на светлых холмах (1366): плашки плотнее; запас от девиза до флага на «квадратных» экранах */
.gl-intro,.gl-album.ab-panel{background:#ffffff26}
.end .pnl{background:#ffffff26}
@media(min-width:821px) and (max-aspect-ratio:3/2){.hero-text{padding-bottom:1.2rem}.hero h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}.hero .script{font-size:clamp(1.7rem,2.9vw,2.4rem)}}
@media(min-width:821px) and (max-aspect-ratio:3/2) and (max-height:800px){.hero{padding-top:4.4rem}.hero h1{font-size:clamp(2rem,3.8vw,3.2rem);margin-bottom:.3rem}.hero .sub{font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:.4rem}.hero .script{margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem)}}
/* ноутбук ≥3:2: небо побольше на очень широких экранах, кнопка левее древка */
@media(min-width:821px) and (min-aspect-ratio:3/2){
.hero{background-position:center 30%}
.hero-cta{left:3vw}
.hero-cta .btn{font-size:clamp(1rem,1.15vw,1.2rem);padding:.6rem 1.2rem}
}
/* «квадратные» ноутбуки низкие (1024×768): кадр ниже, зазор девиз→флаг ≥24 px */
@media(min-width:821px) and (max-aspect-ratio:3/2) and (max-height:800px){.hero{--zone:7.2rem}}

/* ноутбук ≥3:2: раскладка ровно по макету Кати (2026-10-14): текст слева сверху, флаг правее текста, кнопка и иконки слева внизу */
@media(min-width:821px) and (min-aspect-ratio:3/2){
.hero{background-size:128% auto;background-position:0 60%;padding:4.9rem 4vw 0}
.hero-text{margin-left:0;width:min(46vw,820px)}
.hero h1{font-size:min(5.8vw,10.5svh);line-height:.95;max-width:7.4em;margin-bottom:1.1rem}
.hero .sub{font-size:min(1.8vw,3.2svh);max-width:16.5em;line-height:1.25;margin-bottom:.8rem}
.hero .script{font-size:min(3vw,5.4svh);margin:0}
.hero-cta{left:4vw;bottom:5.5vh}
.hero-icons{margin:6.5vh 0 0}
}

/* стекло прозрачное (просьба Кати): читаемость держит плотная тень текста */
.ab-panel,.pnl,.end .foot,.gl-intro,.gl-album,#faq,#faq summary,#faq p,.end .pnl .tel,.end .pnl .tel a,.end .pnl>p,.end .center .btn,.gl-album .btn.ghost{text-shadow:0 1px 10px #0a1e4099}

/* Галерея: описание без подложки (просьба Кати) */
.gl-intro{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* первый экран → «Тренировки»: газон без тёмной полосы, мягкий переход к блоку */
@media(max-width:820px){#art.ah::after{background:linear-gradient(#2a1f12 0,#120c0a00 56px),linear-gradient(#120c0a00 0,#120c0a00 50vw,var(--umber) 112vw)}}

/* газон под кадром без «полосы» (просьбы Кати id 33 и Phil id 316): нижний ряд фото продолжается вниз как газон, затем мягко в синее «Тренировок» */
@media(max-width:820px),(min-width:821px) and (max-aspect-ratio:3/2){
.hero{padding-bottom:70px}
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--zone) + 36px);background:url(img/hero-m-lawn.webp) 0 0/100% auto repeat-y;pointer-events:none}
.hero-cta{z-index:1}
.hero-text{position:relative;z-index:1}
}
/* конец «Обо мне»: плавно в коричневый, начало Art без цветной полосы (порядок разделов по просьбе Кати, id 305) */
.ab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:0;background:linear-gradient(#2a1f1200 0,#2a1f1214 20%,#2a1f1255 45%,#2a1f12aa 72%,#2a1f12 100%);pointer-events:none}

/* кнопка «Открыть» у Art без подчёркивания (просьба Кати, id 276, 280) */
.gl-album a.btn.ghost,.gl-album a.btn.ghost:hover,.gl-album a.btn.ghost:focus{text-decoration:none}

/* стекло во всех разделах как у карточек «Тренировок» (просьба Кати, id 284): прозрачность 8%, лёгкое размытие 3px */
.ab-panel,.pnl,.end .foot,.gl-album,.end .center .btn.ghost,.end .center .btn:not(.ghost){background:#ffffff14;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gl-album.ab-panel,.end .pnl{background:#ffffff14}

/* как в «Тренировках» (id 289): без дополнительного затемнения низа страницы */
.end::before{background:none}

/* «Галерея» по макету Кати (id 304): две стеклянные плитки Golf → и Art →, без описаний и кнопок */
.gl-albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.gl-tile{display:flex;align-items:center;justify-content:space-between;gap:.6rem;box-sizing:border-box;min-height:4.2rem;padding:.7rem 1.1rem;color:#fff;text-decoration:none;font:500 2.4rem/1.1 var(--serif);border:1px solid #ffffffb3;border-radius:22px;background:#ffffff14;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-shadow:0 1px 10px #0a1e4099;cursor:pointer}
.gl-tile span+span{font-size:2rem}
@media(max-width:520px){.gl-tile{padding:.6rem .9rem;font-size:2.1rem}.gl-tile span+span{font-size:1.8rem}}

/* стык «Тренировки» → «Обо мне»: газон плавно в небо фона, без ровной линии (просьба Кати о плавных переходах, id 33, 36, порядок id 305) */
.tr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;background:linear-gradient(#1d83e500 0,#1d83e51f 25%,#1d83e566 55%,#1d83e5bb 80%,#1d83e5 100%);pointer-events:none}

/* ноутбук: «Тренировки» на том же общем фоне, что и остальные разделы, без стыка и полосы внизу */
@media(min-width:821px){.tr{background:transparent}.tr::after{display:none}}

/* девиз в конце «Обо мне» лежит над коричневым переходом и не бледнеет */
.ab .ab-script{position:relative;z-index:1}

/* Golf в «Галерее» по изображению Кати (id 331): тёмно-синий фон, сверху видео с ▶, ниже два фото рядом */
.tm{background:#06225c;overflow:auto}
.tm::backdrop{background:#06225c}
.tm-in{display:block;height:auto;min-height:100%;max-width:760px;margin:0 auto;padding:4.4rem 1rem calc(2rem + env(safe-area-inset-bottom))}
.tm-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;height:auto;aspect-ratio:auto;border:0;border-radius:0;overflow:visible;background:none}
.tm-stage li{height:auto;border:1px solid #ffffff40;border-radius:14px;overflow:hidden;background:#0a2a6c}
.tm-v{grid-column:1/-1;aspect-ratio:16/9;position:relative}
.tm-stage video{object-fit:cover;object-position:50% 30%}
.tm-stage li:not(.tm-v) img{aspect-ratio:1/1;object-fit:cover}
.tm-v.p{aspect-ratio:9/16;max-height:78svh;width:min(100%,calc(78svh*9/16));margin-inline:auto}
.tm-v.p video{object-fit:contain}
.tm-x{position:fixed}
/* видео в «Golf» без полосы управления, пока не запущено (как на изображении Кати) */
.tm-v:not(.p) video::-webkit-media-controls{opacity:0;pointer-events:none}
/* фото и видео в окне Golf ярче (просьба Кати, id 336) */
.tm-stage video,.tm-stage li:not(.tm-v) img{filter:brightness(1.22) saturate(1.15) contrast(1.04)}

/* фото в окне Golf раскрываются по нажатию на весь экран окна (замечание Phil, id 340) */
.tm-stage li:not(.tm-v) img{cursor:zoom-in}
.tm-big{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:4.2rem 1rem 1.2rem;background:#06225cf5;cursor:zoom-out}
.tm-big[hidden]{display:none}
.tm-big img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;filter:brightness(1.22) saturate(1.15) contrast(1.04)}
.tm-x{z-index:6}

/* «Галерея» на телефоне: во весь экран, FAQ не виден под плитками; тёмный переход сверху остаётся за кадром при переходе по меню (замечание Phil, id 340, 342) */
.gl::before{height:44px}
@media(max-width:1023px){.gl{min-height:calc(100svh + 44px);box-sizing:border-box}#gallery{scroll-margin-top:-44px}}

/* ===== Правки Phil 2026-10-15 (id 40–47) ===== */
/* слоган чуть ниже; на телефоне кнопка и иконки чуть ниже от лунки */
@media(max-width:820px) and (min-height:700px){.hero .script{position:relative;top:.7rem}}
@media(max-width:820px),(min-width:821px) and (max-aspect-ratio:3/2){.hero-cta{position:relative;top:16px}}
/* мягкие стыки: ширина размытия как у «Галереи» (48px телефон, 64px ноутбук) */
@media(max-width:820px),(min-width:821px) and (max-aspect-ratio:3/2){
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;z-index:0;pointer-events:none;background:linear-gradient(#0c509600,#0c5096)}
.tr::after{height:48px}
}
@media(min-width:821px) and (min-aspect-ratio:3/2){
.hero{padding-bottom:calc(clamp(2rem,6vh,4rem) + 1.5rem);-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
}
/* «Галерея» на телефоне: без пустого экрана под плитками, расстояния между разделами ровные */
@media(max-width:1023px){.gl{min-height:0;padding-bottom:3rem}#gallery{scroll-margin-top:0}#faq{padding-top:3rem}}
/* «Назад →» внизу галерей */
.gal-back{text-align:center;margin:clamp(2rem,5vw,3.5rem) 0 0}
.gal-back a,.tm-back{display:inline-flex;align-items:center;gap:.6rem;font:600 1.25rem/1 var(--serif);color:var(--navy);text-decoration:none;border:1px solid #0f2f6699;border-radius:999px;padding:.85rem 2rem;background:none;cursor:pointer}
.gal-back a:hover{border-color:var(--navy)}
/* окно Golf: синяя строка с логотипом сверху, «Назад →» снизу */
.tm-bar{position:absolute;top:0;left:0;right:0;height:4.4rem;z-index:1;display:flex;align-items:center;padding:0 clamp(1rem,5vw,5rem);background:#0f2f66;pointer-events:none}
.tm-bar .logo{font-size:1.8rem;color:#fff;white-space:nowrap}
.tm-back{display:flex;width:fit-content;grid-column:1/-1;justify-self:center;margin:.6rem auto 0;color:#fff;border-color:#ffffffcc;padding:.7rem 1.8rem}
.tm-in{padding-top:5.6rem;padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));grid-template-rows:auto auto;align-content:center;overflow-y:auto}
.tm-stage{align-self:center;justify-self:center;width:100%;max-width:min(100%,calc((100dvh - 15.5rem)*1.1))}
@media(max-width:820px){.tm-in{align-content:start}}
.tm-x{top:.7rem;right:clamp(.8rem,3vw,2rem);z-index:7}
/* логотип в «Контактах» на одной строке с названием */
footer .logo{white-space:nowrap}footer .logo .mk{height:1.05em}
@media(min-width:821px) and (max-aspect-ratio:3/2){.hero .script{font-size:clamp(1.5rem,2.5vw,2.2rem)}}
/* ===== Одинаковые плавные стыки разделов (Phil, 2026-10-19, id 59) ===== */
/* все разделы главной лежат на общем фоне .bgfix; на каждом стыке цветной раздел (первый экран, Art) мягко растворяется в этот фон на одну и ту же высоту --seam, без цветных полос и ровных линий */
:root{--seam:72px;--fade-in:linear-gradient(transparent,#00000014 calc(var(--seam)*.3),#0000004d calc(var(--seam)*.55),#000000b3 calc(var(--seam)*.8),#000 var(--seam));--fade-out:linear-gradient(0deg,transparent,#00000014 calc(var(--seam)*.3),#0000004d calc(var(--seam)*.55),#000000b3 calc(var(--seam)*.8),#000 var(--seam))}
@media(min-width:821px){:root{--seam:110px}}
.hero{-webkit-mask-image:var(--fade-out);mask-image:var(--fade-out)}
.hero::after,.tr::after,.ab::after,.gl::before{display:none}
.tr{background:transparent}
#art.ah{padding-bottom:calc(max(1.2rem,2.5vh) + var(--seam));-webkit-mask-image:var(--fade-in),var(--fade-out);mask-image:var(--fade-in),var(--fade-out);-webkit-mask-composite:source-in;mask-composite:intersect}
/* низ Art: тёмное в светлое поле контрастнее, поэтому растворение вдвое длиннее, чтобы на глаз было так же мягко, как сверху (Катя, id 492) */
#art.ah{--fade-out:linear-gradient(0deg,transparent,#00000014 calc(var(--seam)*.6),#0000004d calc(var(--seam)*1.1),#000000b3 calc(var(--seam)*1.6),#000 calc(var(--seam)*2));padding-bottom:calc(max(1.2rem,2.5vh) + var(--seam)*2)}
@media(max-width:820px){#art.ah{padding-bottom:calc(var(--seam)*2)}#art.ah::after{background:linear-gradient(#120c0a00 0,#120c0a00 50vw,var(--umber) 112vw)}}
/* окно Golf (Phil, 2026-10-19, id 62): пока окно открыто, страница под ним скрыта и фон синий, как строка окна; на iPhone за адресной строкой больше не просвечивает текст раздела Art */
body:has(.tm[open]){background:#0f2f66;overflow:hidden}
body:has(.tm[open])>:not(.tm){visibility:hidden}

/* окно Golf светлое, как «Галерея работ» на странице Art: синяя полоса с логотипом, ниже заголовок, видео и фото (Катя, id 495) */
.tm,.tm::backdrop{background:#fff;color:var(--ink)}
.tm-h{grid-column:1/-1;text-align:center;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.1;color:var(--ink);margin:0 0 clamp(1rem,2.5vh,1.8rem)}
.tm-in{grid-template-rows:auto auto auto}
.tm-stage{max-width:min(100%,calc((100dvh - 20rem)*1.1))}
.tm-stage li{border-color:#0f2f6633;background:#f3f1ec}
.tm-back{color:var(--navy);border-color:#0f2f6699}
.tm-big{background:#fffffff5}
/* site-tester 2026-10-20: на странице Art сдвинутая вниз полоса с кнопкой вылезала коричневым под шапку при /art#gallery (Катя, id 494); на ноутбуке окно Golf с заголовком не помещалось в экран */
.ah:not(#art) .ah-cta{margin-bottom:16px}
@media(min-width:821px){.tm-stage{max-width:min(100%,calc((100dvh - 25rem)*1.1))}}
/* стык «первый экран → Тренировки»: затемнение под заголовком начиналось резкой линией по верху раздела; теперь нарастает с нуля на высоту стыка (Катя, id 520) */
.tr::before{background:linear-gradient(180deg,#0a1e4000 0,#0a1e4073 var(--seam),#0a1e4000 45%)}
/* ноутбуки: небо в «Тренировках» без затемнения, тот же оттенок, что в «Обо мне» и других разделах (Phil, id 107) */
@media(min-width:821px){.tr::before{display:none}}
/* на телефонах «Галерея» занимает весь экран под шапкой: «Вопросы и ответы» начинаются только после прокрутки (Phil, id 514) */
@media(max-width:1023px){.gl{min-height:calc(100svh - 4rem)}}
/* Golf: отдельная страница /golf как Art, с обычной шапкой сайта; фото с полей и турниров перенесены из «Обо мне» (Катя, 2026-10-21) */
.gf-page{padding-top:clamp(6.5rem,10vw,9rem)}
.gf-page h1,.gf-page h2{text-align:center}
.gf-page h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:clamp(1.5rem,4vw,3rem)}
.gf-page h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-block:clamp(2rem,5vw,3.5rem) clamp(1rem,2.5vw,1.6rem)}
.gf-page h1+h2{margin-top:0}
.gf-page .gal-back{margin-inline:auto}
/* одна сетка: плитки 3:4 одного размера, 2 в ряд на телефоне и 4 на ноутбуке, неполный ряд по центру */
.gf{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.gf li{flex:0 0 calc((100% - .8rem)/2);aspect-ratio:3/4;border:1px solid #0f2f6633;border-radius:14px;overflow:hidden;background:#f3f1ec}
@media(min-width:821px){.gf{gap:1rem}.gf li{flex-basis:calc((100% - 3rem)/4)}}
.gf button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gf button:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
.gf img,.gf video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;background:#000}
.gf-lt{filter:brightness(1.22) saturate(1.15) contrast(1.04)}
/* планшеты: «Тренировки» по пункту меню на весь экран под шапкой, без полоски «Обо мне» снизу (site-tester 2026-10-21, 768×1024) */
@media(min-width:600px) and (max-width:1023px){.tr,.ab{min-height:calc(100svh - 4rem)}}
/* низкие телефоны (320×568): плитки Golf/Art «Галереи» выше панели связи внизу экрана */
@media(max-width:1023px) and (max-height:600px){.gl{padding-top:1.5rem}}
/* телефоны: одинаковое расстояние ~120 px между разделами (Катя, id 609); «Галерея» по содержимому, Art на ~120 px ниже «Обо мне» */
@media(max-width:820px){#art{margin-top:56px}.gl{min-height:0;padding-top:15px;padding-bottom:0}#faq{padding-top:6rem}#gallery{scroll-margin-top:40px}}
/* ноутбуки: стеклянные кнопки с белым текстом на светлом небе и траве не читались; белая заливка и синий текст (Phil, id 106); телефоны без изменений */
@media(min-width:821px){.end .center .btn:not(.z){background:#fff;color:var(--navy);border-color:#fff;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.end .center .btn:not(.z):hover{background:#ffffffe6}}