/* Oxy's Hair — стиль «Бутик»: модный дом, белое и чёрное, прописные буквы, латунный акцент */
:root{--bg:#FFFFFF;--fg:#0E0E0E;--mute:#77726C;--line:#E6E3DF;--soft:#F4F2EF;--acc:#9C7A4B;--dark-line:#2C2B29;--dark-mute:#9A958F;
  --disp:"Tenor Sans","Didot","Times New Roman",serif;--sans:"Jost",system-ui,sans-serif;--g:max(16px,4vw)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:300 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.06em;text-wrap:balance}
p,dl,dd,ol,ul{margin:0}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
section[id]{scroll-margin-top:70px}
.w{padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.cap{font-family:var(--disp);font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.acc{color:var(--acc)}
.mute{color:var(--mute)}
.btn{display:inline-block;padding:18px 44px;border:1px solid var(--fg);font-family:var(--disp);font-size:12px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;text-align:center;background:linear-gradient(var(--fg),var(--fg)) no-repeat 0 100%/100% 0;transition:background-size .5s cubic-bezier(.7,0,.2,1),color .5s}
.btn:hover{background-size:100% 100%;color:var(--bg)}
.btn.inv{border-color:var(--bg);background-image:linear-gradient(var(--bg),var(--bg))}
.btn.inv:hover{color:var(--fg)}
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* Шторка при входе (один раз за визит) */
.curtain{position:fixed;inset:0;z-index:100;background:var(--fg);display:grid;place-items:center;animation:lift 1.1s 1.2s cubic-bezier(.8,0,.2,1) forwards;pointer-events:none}
.curtain img{width:min(60vw,420px);animation:cfade 1s .15s both}
.seen .curtain{display:none}
@keyframes lift{to{transform:translateY(-100%)}}
@keyframes cfade{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Шапка */
.hdr{position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-block:calc(18px + env(safe-area-inset-top,0px)) 18px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr nav{display:flex;gap:26px}
.hdr nav a{text-decoration:none;position:relative}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .35s}
.hdr nav a:hover::after,.hdr nav a[aria-current]::after{transform:scaleX(1)}
.hdr .right{justify-content:flex-end}
.wordmark{display:block;line-height:0}
.wordmark img{height:28px;width:auto}
.lang{display:flex;gap:14px;margin-left:16px;padding-left:22px;border-left:1px solid var(--line)}
.menu-btn{display:none;background:none;border:0;padding:6px 0;color:var(--fg);cursor:pointer}
.mnav{display:none}

/* Первый экран */
.hero{padding-block:calc(100px + env(safe-area-inset-top,0px)) 0}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(12px,2vw,30px);align-items:end}
.hero-g figure{margin:0;min-width:0}
.hero-g .f{overflow:hidden}
.hero-g img{width:100%;object-fit:cover}
.hero-g figure:nth-child(1) img,.hero-g figure:nth-child(3) img{aspect-ratio:3/4}
.hero-g figure:nth-child(2) img{aspect-ratio:4/5;animation:zoom 2.4s 1.4s cubic-bezier(.2,.8,.2,1) both}
.seen .hero-g figure:nth-child(2) img{animation-delay:0s}
@keyframes zoom{from{transform:scale(1.15)}to{transform:none}}
.hero-g figcaption{padding-top:10px}
.hero h1{text-align:center;font-size:clamp(34px,5.4vw,92px);line-height:1.02;letter-spacing:.08em;margin-top:clamp(40px,5vw,70px)}
.hero .sub{text-align:center;max-width:56ch;margin:22px auto 0}
.hero .ctr{text-align:center;margin-top:34px}

/* Бегущая строка */
.mq{overflow:hidden;border-block:1px solid var(--fg);margin-top:clamp(70px,8vw,120px);padding-block:18px}
.mq div{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq span{font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(20px,2.4vw,34px);white-space:nowrap;padding-right:60px}
.mq span::after{content:"—";margin-left:60px;color:var(--acc)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Заголовки разделов */
.sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 20px;padding-block:clamp(80px,10vw,150px) 40px}
.sh h2{font-size:clamp(30px,4.4vw,72px);line-height:1}
.sec{padding-bottom:clamp(80px,10vw,150px)}

/* Две услуги */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,30px)}
.duo a{text-decoration:none;display:block;min-width:0}
.duo .f{overflow:hidden}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.duo a:hover img{transform:scale(1.05)}
.duo .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:16px 14px;border-bottom:1px solid var(--fg)}
.duo h3{font-size:clamp(17px,1.6vw,24px)}
.duo p{margin-top:12px}

/* До и после: ползунок между словами, как в макете «До и после» */
.ba-sec{padding-block:clamp(80px,10vw,150px);background:var(--soft);text-align:center}
.ba-eb{margin-bottom:clamp(30px,4vw,56px)}
.ba-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,50px);text-align:left}
.ba-word{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(44px,7vw,124px);line-height:.9}
.o{color:transparent;-webkit-text-stroke:1px var(--fg)}
.ba-side p{margin-top:18px;max-width:24ch}
.ba-side.r{text-align:right}.ba-side.r p{margin-left:auto}
.ba{position:relative;aspect-ratio:3/4.3;max-width:100%;overflow:hidden;border-radius:240px 240px 0 0;touch-action:pan-y;user-select:none;background:var(--line)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;transition:opacity .5s}
.ba .af{clip-path:inset(0 0 0 var(--x,50%))}
.ba.swap img{opacity:0}
.ba .k{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--bg);pointer-events:none}
.ba .k::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--bg);color:var(--fg);display:grid;place-items:center;font-size:20px;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
@media (hover:hover) and (pointer:fine){.ba,.ba input{cursor:col-resize}}
.ba input:focus-visible+.k,.ba:has(input:focus-visible) .k::after{outline:2px solid var(--acc)}
.ba-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(30px,4vw,50px)}
.ba-tabs button{background:none;border:1px solid var(--line);color:var(--mute);padding:14px 24px;cursor:pointer;transition:border-color .3s,color .3s}
.ba-tabs button span{color:var(--acc);margin-right:8px}
.ba-tabs button:hover,.ba-tabs button[aria-pressed="true"]{border-color:var(--fg);color:var(--fg)}

/* Наличие */
.stock{position:relative}
.stock img{width:100%;aspect-ratio:2.2/1;object-fit:cover}
.stock .lbl{position:absolute;left:max(var(--g),16px);bottom:24px;right:max(var(--g),16px);max-width:560px;background:var(--bg);padding:16px 22px}
.stock .lbl p{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(16px,2vw,28px);line-height:1.3;margin-top:6px}

/* Прайс и этапы */
.pl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(30px,6vw,100px);align-items:start}
.pl dl{border-top:1px solid var(--fg)}
.pl dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .4s}
.pl dl div:hover{padding-left:12px}
.pl dt{font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;font-size:15px}
.pl dd{text-align:right}
.pl dd small{display:block;color:var(--mute);font-size:13px}
.tech{background:var(--soft);padding:clamp(24px,3vw,44px)}
.tech ol{list-style:none;padding:0;margin-top:20px;counter-reset:s}
.tech li{counter-increment:s;padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:3em minmax(0,1fr)}
.tech li::before{content:"№ " counter(s);font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--acc);padding-top:3px}

/* Курс */
.course{background:var(--fg);color:var(--bg);padding-block:clamp(80px,10vw,150px)}
.course-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px)}
.course h2{font-size:clamp(32px,4.6vw,76px);line-height:1}
.course .mute{color:var(--dark-mute)}
.course ol{list-style:none;padding:0;columns:2;column-gap:30px;counter-reset:c;font-size:15px}
.course li{counter-increment:c;break-inside:avoid;padding:11px 0;border-top:1px solid var(--dark-line);display:grid;grid-template-columns:2.4em minmax(0,1fr)}
.course li::before{content:counter(c,decimal-leading-zero);font-family:var(--disp);color:var(--acc)}
.facts{display:flex;flex-wrap:wrap;gap:24px 50px;margin:36px 0}
.facts b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(26px,3vw,44px);letter-spacing:.04em}

/* Вопросы */
.faq-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(30px,6vw,100px)}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--fg)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(14px,1.4vw,18px);line-height:1.4}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";transition:transform .4s;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:22px;color:var(--mute);max-width:64ch}

/* Запись */
.contact{text-align:center;padding-block:clamp(90px,12vw,180px);border-top:1px solid var(--fg)}
.contact h2{font-size:clamp(34px,6vw,110px);line-height:1;margin-top:20px}
.contact .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.contact dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;max-width:1100px;margin:70px auto 0}
.contact dt{margin-bottom:8px}
.contact dd a{text-decoration:none}
.contact .route{display:inline-block;margin-top:6px;font-size:14px;text-decoration:underline;text-underline-offset:4px;color:var(--acc)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
footer img{height:22px;width:auto}

/* Кнопки внизу на телефоне */
.mobile-cta{display:none}

@media (max-width:1000px){
  .hdr{grid-template-columns:auto 1fr auto}
  .hdr nav.left,.hdr .nl{display:none}
  .hdr nav.right{display:flex}
  .lang{margin:0;padding:0;border:0}
  .menu-btn{display:block}
  .mnav{position:fixed;z-index:29;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;background:var(--bg);padding-top:80px;transform:translateY(-100%);transition:transform .6s cubic-bezier(.8,0,.2,1)}
  .mnav.open{transform:none}
  .mnav a{font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;font-size:26px;text-decoration:none}
}
@media (max-width:900px){
  .hero-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-g figure:nth-child(2){grid-column:1/-1;order:-1}
  .duo,.pl,.course-g,.faq-g{grid-template-columns:minmax(0,1fr)}
  .ba-stage{grid-template-columns:minmax(0,1fr);gap:24px}
  .ba{width:100%;max-width:420px;justify-self:center}
  .ba-side.r{text-align:left}.ba-side.r p{margin-left:0}
  .stock img{aspect-ratio:4/5}
  .course ol{columns:1}
  .contact dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero{padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .btn{padding:17px 28px}
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;z-index:20;left:0;right:0;bottom:0;gap:8px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .past-hero .mobile-cta{transform:none}
  .mobile-cta a{display:flex;justify-content:center;padding:15px 8px;font-family:var(--disp);font-size:12px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;background:var(--fg);color:var(--bg)}
  .mobile-cta a+a{background:none;color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
  footer{padding-bottom:96px}
  .contact dl{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.curtain{display:none}html{scroll-behavior:auto}}

/* Первый экран на компьютере целиком помещается в окно при любой диагонали */
@media (min-width:901px){
  .hero{height:100vh;height:100svh;min-height:600px;display:flex;flex-direction:column;padding-block:calc(82px + env(safe-area-inset-top,0px)) clamp(20px,3.4vh,44px)}
  .hero-g{flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;gap:clamp(14px,2vw,30px)}
  .hero-g figure{display:flex;flex-direction:column;min-height:0;min-width:0;flex:0 1 31%}
  .hero-g figure:nth-child(2){flex-basis:38%}
  .hero-g figure:nth-child(1),.hero-g figure:nth-child(3){padding-top:clamp(30px,13vh,150px)}
  .hero-g .f{flex:1;min-height:0}
  .hero-g img,.hero-g figure:nth-child(n) img{width:100%;height:100%;aspect-ratio:auto}
  .hero-g figcaption{width:0;min-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero h1{font-size:clamp(28px,min(5vw,6.6vh),100px);margin-top:clamp(14px,3vh,44px)}
  .hero .sub{margin-top:clamp(10px,2vh,22px);font-size:clamp(15px,1.9vh,18px)}
  .hero .ctr{margin-top:clamp(14px,3vh,34px)}
}

/* Окно «Клуб Oxy's Hair»: подписка и согласие на cookies */
.club{position:fixed;z-index:60;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(760px,calc(100vw - 48px));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--bg);border:1px solid var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.18);transform:translateY(30px);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s}
.club.show{transform:none;opacity:1}
.club[hidden]{display:none}
.club-ph{overflow:hidden;background:var(--soft)}
.club-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.2,.8,.2,1)}
.club.show .club-ph img{transform:none}
.club-b{position:relative;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;min-width:0}
.club-b h2{font-size:clamp(26px,2.6vw,38px);line-height:1}
.club-b>p{font-size:15px}
.club-x{position:absolute;top:10px;right:12px;width:40px;height:40px;background:none;border:0;font-size:26px;line-height:1;color:var(--fg);cursor:pointer}
.club form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.club-row{display:flex;gap:0;border:1px solid var(--fg)}
.club-row input{flex:1;min-width:0;border:0;padding:14px 16px;font:300 16px var(--sans);color:var(--fg);background:var(--bg);outline:none}
.club-row input:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
.club-row .btn{border:0;border-left:1px solid var(--fg);padding:14px 22px;cursor:pointer;background-color:var(--fg);color:var(--bg);background-image:linear-gradient(var(--acc),var(--acc))}
.club-row .btn:hover{color:var(--bg)}
.club-msg{font-size:14px;min-height:1.2em;color:var(--acc)}
.club-msg.err{color:#A23B2E}
.club-ck{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--mute)}
.club-ck div{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.club-ck .btn{padding:12px 26px;cursor:pointer;background-color:var(--bg);color:var(--fg)}
.club-link{background:none;border:0;padding:6px 0;font:400 12px var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.club-link:hover{color:var(--fg)}
@media (max-width:760px){
  .club{left:0;right:0;bottom:0;width:auto;grid-template-columns:minmax(0,1fr);border:0;border-top:1px solid var(--fg);max-height:88vh;overflow:auto}
  .club-ph{display:none}
  .club-b{padding:26px max(16px,env(safe-area-inset-left,0px)) calc(22px + env(safe-area-inset-bottom,0px))}
  .club-row{flex-direction:column}.club-row .btn{border-left:0;border-top:1px solid var(--fg)}
  .club.show~.mobile-cta,.club.show+script{display:none}
}
@media (prefers-reduced-motion:reduce){.club,.club-ph img{transition:none}}

/* Языки (компьютер): вертикальная чёрточка в правом поле шапки, при наведении столбик RU / RO / EN выпадает вниз и не перекрывает меню */
.foot-lang{display:flex;gap:16px}
.foot-lang a{text-decoration:none;opacity:.7}
.foot-lang a[aria-current],.foot-lang a:hover{opacity:1;color:var(--fg)}
.tick-lang{display:none}
@media (min-width:1001px){
  .hdr .lang{display:none}
  .tick-lang{position:fixed;z-index:32;top:0;right:0;width:max(var(--g),44px);height:65px;display:flex;justify-content:center;align-items:center;cursor:pointer}
  .tick{display:block;width:1px;height:18px;background:var(--fg);transform:translateY(1.5px);transition:height .4s cubic-bezier(.2,.8,.2,1)}
  .tick-lang:hover .tick,.tick-lang:focus-within .tick{height:30px}
  .tick-menu{position:absolute;top:65px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 12px;background:var(--bg);border:1px solid var(--line);border-top:0;font-size:11px;letter-spacing:.22em;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.2,.8,.2,1)}
  .tick-menu a{text-decoration:none;padding:8px 14px 8px 18px;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
  .tick-menu a[aria-current]{color:var(--acc)}
  .tick-menu a:hover{text-decoration:underline;text-underline-offset:5px}
  .tick-lang:hover .tick-menu,.tick-lang:focus-within .tick-menu{clip-path:inset(0 0 0 0)}
  .tick-lang:hover .tick-menu a,.tick-lang:focus-within .tick-menu a{opacity:1;transform:none}
  .tick-menu a:nth-child(2){transition-delay:.07s}.tick-menu a:nth-child(3){transition-delay:.14s}
}
/* Оптическое выравнивание шапки: середина букв логотипа и меню ровно по середине полосы
   (хвост буквы «y» в логотипе визуально поднимал его вверх) */
.hdr .wordmark img{transform:translateY(12.5%)}
.hdr nav,.hdr .menu-btn{transform:translateY(1.5px)}
@media (max-width:1000px){.hdr nav,.hdr .menu-btn{transform:none}}
@media (max-width:1000px){.hdr .lang{transform:translateY(4.5px)}}

/* Подстраницы: уход и конфиденциальность */
.sub .hdr{position:sticky}
.doc{max-width:1100px;margin:0 auto;padding-block:clamp(60px,8vw,120px)}
.doc h1{font-size:clamp(32px,5vw,72px);line-height:1.02;margin-top:18px}
.doc-lead{margin-top:22px;max-width:60ch;font-size:18px}
.care{list-style:none;padding:0;margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,80px);counter-reset:c}
.care li{counter-increment:c;padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:4px 0}
.care li::before{content:"№ " counter(c);grid-row:span 2;font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--acc);padding-top:6px}
.care h2{font-size:clamp(17px,1.6vw,22px)}
.care p{color:var(--mute);max-width:52ch}
.doc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(40px,5vw,70px);padding:clamp(24px,3vw,40px);background:var(--soft)}
.doc-cta p{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(16px,1.8vw,22px)}
.policy{margin-top:clamp(36px,4vw,60px);max-width:760px}
.policy section{padding:24px 0;border-top:1px solid var(--line)}
.policy h2{font-size:clamp(16px,1.5vw,20px);margin-bottom:10px}
.policy p{color:var(--mute)}
.more{display:inline-block;margin-top:18px;font-family:var(--disp);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.foot-links{display:flex;gap:20px}
.foot-links a{text-decoration:none;opacity:.7}.foot-links a:hover{opacity:1;color:var(--bg)}
.club-ck p a{color:var(--fg);text-underline-offset:3px}
/* 404 */
.nf{min-height:100vh;display:grid;place-items:center}
.nf-in{text-align:center;padding-block:60px}
.nf-in .wordmark{display:inline-block}.nf-in .wordmark img{height:34px}
.nf-num{font-family:var(--disp);font-size:clamp(110px,22vw,280px);line-height:1;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px var(--fg);margin:20px 0 30px}
.nf-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 50px}
.nf-langs p{display:flex;flex-direction:column;gap:8px}
.nf-langs a{color:var(--acc);text-underline-offset:4px}
@media (max-width:760px){.care{grid-template-columns:minmax(0,1fr)}.sub footer{padding-bottom:24px}}

/* Запись и подвал — чёрные, как блок курса */
.contact{background:var(--fg);color:var(--bg);border-top:0}
.contact .mute{color:var(--dark-mute)}
.contact .btn{border-color:var(--bg);background-image:linear-gradient(var(--bg),var(--bg))}
.contact .btn:hover{color:var(--fg)}
.contact dl div{border-top:1px solid var(--dark-line);padding-top:20px}
footer{background:var(--fg);color:var(--dark-mute);border-top:1px solid var(--dark-line)}
footer .foot-lang a[aria-current],footer .foot-lang a:hover{color:var(--bg)}

/* Шторка на фото при прокрутке */
.cur{position:relative;overflow:hidden}
.cur::after{content:"";position:absolute;inset:0;z-index:2;background:var(--bg);transform-origin:top;transition:transform 1.4s cubic-bezier(.77,0,.18,1);pointer-events:none}
.cur.open::after{transform:scaleY(0)}
.duo .f.cur img{transform:scale(1.14);transition:transform 2s cubic-bezier(.2,.8,.2,1)}
.duo .f.cur.open img{transform:none}
.duo a:hover .f.cur.open img{transform:scale(1.05)}
.ba.cur::after{background:var(--soft)}
.stock{overflow:hidden}

/* Фирменный курсор */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:difference}
.cursor.img{mix-blend-mode:normal}
.cursor.on{opacity:1}
.cursor span{position:absolute;left:0;top:0;display:grid;place-items:center;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;font:400 0px var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--fg);transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s,font-size .2s}
.cursor.link span{width:38px;height:38px;margin:-19px 0 0 -19px;background:transparent;border:1px solid #fff}
.cursor.hide{opacity:0}
.cursor.img span{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--bg);font-size:10px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input{cursor:text!important}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){.cur::after{display:none}.duo .f.cur img{transform:none}}

/* До/после: без белого круга, только стрелки по бокам от линии */
.ba .k::after{content:"‹\2003›";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:#fff;font-size:46px;font-weight:300;line-height:1;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* Логотип крупнее; высота шапки остаётся 65 px */
.hdr .wordmark img{height:40px}
.hdr{padding-block:calc(12px + env(safe-area-inset-top,0px)) 12px}
@media (max-width:1000px){.hdr .wordmark img{height:34px}.hdr{padding-block:calc(15px + env(safe-area-inset-top,0px)) 15px}}

/* Язык: тонкий глобус сверху справа; при наведении (на телефоне — нажатии) список языков */
.globe-lang{display:none;cursor:pointer;outline:none}
.globe{width:19px;height:19px;fill:none;stroke:var(--fg);stroke-width:1;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.globe-lang:hover .globe,.globe-lang:focus-within .globe{transform:rotate(180deg)}
.g-dd{position:absolute;top:65px;right:12px;display:flex;flex-direction:column;min-width:150px;background:var(--bg);border:1px solid var(--line);padding:8px 0;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.2,.8,.2,1);z-index:40}
.g-dd a{text-decoration:none;padding:11px 20px 11px 35px;letter-spacing:.16em;display:flex;align-items:center;gap:10px;opacity:.6;font-size:11px}
.g-dd a[aria-current]{opacity:1;padding-left:20px}
.g-dd a[aria-current]::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc)}
.g-dd a:hover{opacity:1}
.globe-lang:hover .g-dd,.globe-lang:focus-within .g-dd{clip-path:inset(0 0 0 0)}
.hdr .lang{display:none!important}
@media (min-width:1001px){
  .globe-lang:not(.m){position:fixed;z-index:32;top:0;right:0;width:max(var(--g),56px);height:65px;display:flex;justify-content:center;align-items:center}
  .globe-lang:not(.m) .globe{transform-origin:center;margin-top:3px}
}
@media (max-width:1000px){
  .globe-lang.m{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:6px}
  .globe-lang.m .g-dd{top:52px;right:-60px}
  .hdr nav.right{align-items:center}
}
.hdr nav .g-dd a::after{display:none}
@media (max-width:1000px){.globe-lang.m .g-dd{position:fixed;top:65px;right:12px}}

/* «До и после»: прямоугольник с прямыми углами вместо арки */
.ba{border-radius:0}

/* Первый экран */
.hero-txt{display:contents}
@media (max-width:760px){
  /* Телефон: обложка — одно фото на весь экран, текст и кнопка поверх */
  .hero{display:grid;padding:calc(65px + env(safe-area-inset-top,0px)) 0 0}
  .hero-g{grid-area:1/1;display:block}
  .hero-g figure:not(:nth-child(2)){display:none}
  .hero-g figure:nth-child(2) .f{height:calc(100svh - 65px - env(safe-area-inset-top,0px))}
  .hero-g figure:nth-child(2) img{height:100%;aspect-ratio:auto;object-position:50% 30%}
  .hero-g figcaption{display:none}
  .hero-txt{grid-area:1/1;align-self:end;display:block;position:relative;z-index:2;padding:120px 20px 30px;background:linear-gradient(rgba(14,14,14,0),rgba(14,14,14,.72));text-align:left}
  .hero h1{text-align:left;margin:0;font-size:38px;color:#fff}
  .hero .sub{text-align:left;margin:14px 0 0;color:rgba(255,255,255,.85)}
  .hero .ctr{text-align:left;margin-top:22px}
  .hero .btn{border-color:#fff;color:#fff;background-image:linear-gradient(#fff,#fff)}
  .hero .btn:hover{color:var(--fg)}
  .mq{margin-top:0}
  /* «Вопросы»: без пустого поля между ссылкой на уход и вопросами */
  .faq-g{gap:26px}
  .faq-g .more{margin-top:12px}
}

/* Подвал: логотип, ссылки, год */
.foot-c{opacity:.6}
@media (max-width:760px){footer{flex-direction:column;align-items:flex-start;gap:16px}.foot-links{flex-wrap:wrap;gap:12px 20px}}

/* Темы курса по группам, вместо цифр — латунные чёрточки */
.co-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px;align-content:start}
.co-groups ul{list-style:none;padding:0;margin:14px 0 0}
.co-groups li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--dark-line);font-size:15px;color:#D8D3CC}
.co-groups li::before{content:"";flex:none;width:14px;height:1px;background:var(--acc);margin-top:.78em}
@media (max-width:760px){.co-groups{grid-template-columns:minmax(0,1fr);gap:26px}}

/* Телефон: шапка-«гамбургер»; на главной прозрачная поверх обложки, белеет при прокрутке */
@media (max-width:1000px){
  .menu-btn{font-size:0;letter-spacing:0;width:40px;height:40px;position:relative;color:inherit}
  .menu-btn::before{content:"";position:absolute;left:9px;right:9px;top:15px;height:1px;background:currentColor;box-shadow:0 8px 0 currentColor;transition:transform .3s}
  .menu-btn[aria-expanded="true"]::before{top:19px;box-shadow:none;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"]::after{content:"";position:absolute;left:9px;right:9px;top:19px;height:1px;background:currentColor;transform:rotate(-45deg)}
  .hdr{color:var(--fg)}
  body:not(.sub) .hdr{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .4s,border-color .4s,color .4s;color:#fff}
  body:not(.sub) .hdr .wordmark img{filter:invert(1);transition:filter .4s}
  body:not(.sub) .hdr .globe{stroke:#fff}
  body:not(.sub).sc .hdr,body:not(.sub):has(.mnav.open) .hdr{background:rgba(255,255,255,.94);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--fg)}
  body:not(.sub).sc .hdr .wordmark img,body:not(.sub):has(.mnav.open) .hdr .wordmark img{filter:none}
  body:not(.sub).sc .hdr .globe,body:not(.sub):has(.mnav.open) .hdr .globe{stroke:var(--fg)}
}
@media (max-width:760px){
  .hero{padding-top:0;position:relative}
  .hero-g figure:nth-child(2) .f{height:100svh}
  .hero::before{content:"";position:absolute;inset:0 0 auto;height:150px;z-index:1;background:linear-gradient(rgba(14,14,14,.45),rgba(14,14,14,0));pointer-events:none}
}

/* Сенсорные экраны: без «залипающей» заливки кнопок после касания */
@media (hover:none){
  .btn:hover,.btn:active{background-size:100% 0;color:inherit}
  .hero .btn:hover,.hero .btn:active{color:#fff}
  .contact .btn:hover,.course .btn:hover{color:var(--bg)}
  .club-row .btn:hover{color:var(--bg)}
}