/* ==========================================================================
Автостудия 36 — детейлинг-студия, Воронеж
Подложки: только белый, графит (чёрный) и серый. Шалфей #879784 — только акцент.
Фирменные: графит #25272B · светлый серый #E8E8E6 · шалфей #879784 · светлый графит #B8BDC2
Трекинг из брендбука: название бренда 280, слоган 150
========================================================================== */
/* --- 1. Токены --------------------------------------------------------- */
:root{
/* фирменные */
--graphite:#25272B;
--grey-light:#F1F1F0; /* серая подложка секций */
--white-warm:#FFFFFF; /* белый: фон страницы и текст на тёмном */
--sage:#879784;
--graphite-light:#B8BDC2;
/* производные */
--graphite-deep:#1B1D20;
--graphite-soft:#33363B;
--sage-deep:#6C7A69;
--sage-panel:#5A6857; /* насыщенный фирменный зелёный под белый текст */
--sage-pale:#DDE3DB;
--card:#F7F7F6;
--card-2:#FFFFFF;
/* текст и линии */
--ink:var(--graphite);
--ink-70:rgba(37,39,43,.72);
--ink-50:rgba(37,39,43,.54);
--ink-40:rgba(37,39,43,.40);
--line:rgba(37,39,43,.10);
--line-soft:rgba(37,39,43,.06);
--on-dark:rgba(255,255,255,.74);
--line-dark:rgba(255,255,255,.14);
/* типографика */
--font:'Manrope','Avenir Next Cyr','Helvetica Neue',Arial,sans-serif;
--tr-brand:.28em;
--tr-slogan:.15em;
/* форма */
--r-lg:11px;
--r:8px;
--r-sm:5px;
--pill:999px;
--r-button:5px;
--font-display:'Manrope','Helvetica Neue',Arial,sans-serif;
/* тени */
--sh-1:0 1px 2px rgba(26,28,31,.04), 0 8px 20px -14px rgba(26,28,31,.22);
--sh-2:0 2px 4px rgba(26,28,31,.04), 0 24px 48px -28px rgba(26,28,31,.30);
--sh-3:0 36px 80px -40px rgba(26,28,31,.45);
/* сетка */
--pad:clamp(18px,4.4vw,64px);
--maxw:1340px;
--gap:clamp(16px,1.8vw,26px);
--sec:clamp(72px,8.5vw,128px);
--head-h:76px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* --- 2. Сброс ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--white-warm);color:var(--ink);
font-family:var(--font);font-size:17px;font-weight:500;line-height:1.62;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
b,strong{font-weight:600}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px;border-radius:4px}
::selection{background:var(--sage);color:#fff}
/* --- 3. Типографика ---------------------------------------------------- */
.display{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:400;line-height:1.02;letter-spacing:-.038em}
.h1{font-size:clamp(2.2rem,4.7vw,3.8rem);font-weight:500;line-height:1.05;letter-spacing:-.034em}
.h2{font-size:clamp(1.85rem,3.4vw,3rem);font-weight:400;line-height:1.12;letter-spacing:-.032em}
.h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:500;line-height:1.24;letter-spacing:-.02em}
.h4{font-size:1.0625rem;font-weight:500;line-height:1.35;letter-spacing:-.012em}
.lead{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.6;color:var(--ink-70)}
.small{font-size:.875rem;line-height:1.55}
.muted{color:var(--ink-50)}
.eyebrow{
display:inline-flex;align-items:center;gap:9px;
font-size:.6875rem;font-weight:600;line-height:1;
text-transform:uppercase;letter-spacing:var(--tr-brand);color:var(--sage-deep);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--sage);flex:none}
.eyebrow--light{color:var(--sage)}
/* --- 4. Раскладка ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(52px,6vw,86px)}
.section--alt{background:var(--grey-light)}
.section--flush-top{padding-top:0}
.section--dark{background:var(--graphite);color:var(--white-warm)}
.sec-head{max-width:60ch;margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head p{margin-top:18px}
.sec-head--wide{max-width:74ch}
.sec-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:var(--gap);align-items:end}
.sec-head--split p{margin-top:0;padding-bottom:6px}
:is(.section--dark,.pagehead,.footer,.panel-dark,.promo:not(.promo--light)) .sec-head p,
:is(.section--dark,.pagehead,.footer,.panel-dark,.promo:not(.promo--light)) .lead{color:var(--on-dark)}
/* --- 5. Кнопки --------------------------------------------------------- */
.btn{
--bg:var(--graphite);--fg:var(--white-warm);--bd:var(--graphite);--sh:var(--sh-1);
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:54px;padding:0 30px;border:1px solid var(--bd);border-radius:var(--r-button);
background:var(--bg);color:var(--fg);box-shadow:var(--sh);
font-size:.9375rem;font-weight:600;letter-spacing:.005em;cursor:pointer;white-space:nowrap;
transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),
transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{--bg:var(--sage);--bd:var(--sage);--fg:#fff;transform:translateY(-2px);--sh:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--graphite);--bd:rgba(37,39,43,.16);--sh:none}
.btn--ghost:hover{--bg:var(--graphite);--fg:var(--white-warm);--bd:var(--graphite)}
.btn--light{--bg:var(--white-warm);--fg:var(--graphite);--bd:var(--white-warm)}
.btn--light:hover{--bg:var(--sage);--fg:#fff;--bd:var(--sage)}
.btn--outline-light{--bg:transparent;--fg:var(--white-warm);--bd:rgba(255,255,255,.32);--sh:none}
.btn--outline-light:hover{--bg:var(--white-warm);--fg:var(--graphite);--bd:var(--white-warm)}
.btn--sm{min-height:44px;padding:0 22px;font-size:.875rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{
display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.9375rem;
color:var(--ink);transition:color .28s var(--ease),gap .28s var(--ease);
}
.link svg{width:15px;height:15px;flex:none;transition:transform .28s var(--ease)}
.link:hover{color:var(--sage-deep);gap:14px}
:is(.section--dark,.pagehead,.footer,.panel-dark,.promo:not(.promo--light)) .link{color:var(--white-warm)}
:is(.section--dark,.pagehead,.footer,.panel-dark,.promo:not(.promo--light)) .link:hover{color:var(--sage)}
/* --- 6. Шапка ---------------------------------------------------------- */
.header{
position:fixed;inset:12px 0 auto;z-index:80;color:var(--white-warm);
transition:color .35s var(--ease);
}
.header__bar{
border-radius:var(--r);
padding-inline:clamp(14px,1.6vw,24px);
background:transparent;box-shadow:none;
transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,2vw,32px);min-height:var(--head-h)}
.header.is-solid,.header.is-open{color:var(--graphite)}
.header.is-solid .header__bar,.header.is-open .header__bar{
background:rgba(255,255,255,.52);backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
box-shadow:0 1px 0 rgba(37,39,43,.07), 0 14px 34px -30px rgba(26,28,31,.4);
}
body.page--light .header{color:var(--graphite)}
.logo{display:inline-flex;align-items:center;gap:15px;flex:none;color:inherit}
.logo__mark{width:auto;height:37px;color:currentColor}
.logo__word{width:auto;height:16px;color:currentColor;position:relative;top:-.7px}
.footer .logo{gap:18px}
.footer .logo__mark{height:48px}
.footer .logo__word{height:20px}
.nav{display:flex;align-items:center;gap:8px}
.nav__item{position:relative}
.nav__item::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px}
.nav__link{
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:10px 8px;border-radius:var(--r-button);
font-size:1rem;font-weight:500;letter-spacing:-.01em;color:inherit;
transition:background .25s var(--ease),color .25s var(--ease);
}
.nav__link:hover{background:rgba(135,151,132,.18)}
.nav__item.is-active>.nav__link{background:rgba(135,151,132,.24)}
.header.is-solid .nav__item.is-active>.nav__link{color:var(--sage-deep)}
.nav__link svg{width:9px;height:9px;opacity:.55;transition:transform .3s var(--ease)}
.nav__item:hover .nav__link svg,.nav__item:focus-within .nav__link svg{transform:rotate(180deg)}
.nav__drop{
position:absolute;top:calc(100% + 12px);left:-18px;width:440px;padding:0;
background:var(--card-2);border:1px solid rgba(37,39,43,.12);border-radius:7px;box-shadow:0 24px 54px rgba(27,29,32,.18);
opacity:0;visibility:hidden;transform:translateY(10px);color:var(--graphite);overflow:hidden;
transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop-head{display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.nav__drop-head span{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.nav__drop-grid{display:grid;grid-template-columns:1fr 1fr;padding:8px}
.nav__drop-grid>a{
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:68px;
padding:12px;border-radius:4px;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--line-soft);
transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease);
}
.nav__drop-grid>a:nth-last-child(-n+2){border-bottom:0}
.nav__drop-grid>a:hover{background:var(--sage-pale);color:var(--sage-deep);padding-left:16px}
.nav__drop-grid>a span{font-size:.875rem;font-weight:500;line-height:1.35;color:var(--ink-50)}
.nav__drop-all{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;background:var(--graphite);color:var(--white-warm);font-size:.82rem;font-weight:500;transition:background .25s var(--ease)}
.nav__drop-all svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.nav__drop-all:hover{background:var(--graphite-soft)}
.nav__drop-all:hover svg{transform:translateX(4px)}
.nav__drop--about{left:auto;right:-30px}
.header__side{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex:none}
.header .btn--head{min-height:48px;padding:0 34px;font-size:.9rem}
.header:not(.is-solid):not(.is-open) .btn--head{--bg:rgba(37,39,43,.34);--fg:var(--white-warm);--bd:rgba(255,255,255,.7);--sh:none}
.header:not(.is-solid):not(.is-open) .btn--head:hover{--bg:var(--white-warm);--fg:var(--graphite);--bd:var(--white-warm)}
body.page--light .header:not(.is-solid) .btn--head{--bg:var(--graphite);--fg:var(--white-warm);--bd:var(--graphite)}
.burger{
display:none;width:46px;height:46px;padding:0;border:1px solid currentColor;
border-radius:var(--r-button);background:transparent;cursor:pointer;
align-items:center;justify-content:center;opacity:.9;
}
.burger span{display:block;position:relative;width:17px;height:1.6px;background:currentColor;border-radius:2px;transition:background .2s}
.burger span::before,.burger span::after{
content:"";position:absolute;left:0;width:17px;height:1.6px;border-radius:2px;background:currentColor;
transition:transform .3s var(--ease),top .3s var(--ease);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.header.is-open .burger span{background:transparent}
.header.is-open .burger span::before{top:0;transform:rotate(45deg)}
.header.is-open .burger span::after{top:0;transform:rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--line);max-height:calc(100dvh - 120px);overflow-y:auto;padding:14px 0 24px}
.header.is-open .drawer{display:block}
.drawer a{display:block;padding:12px 4px;font-size:1.0625rem;font-weight:600;border-bottom:1px solid var(--line-soft)}
.drawer .drawer__sub a{padding-left:16px;font-size:.9375rem;font-weight:600;color:var(--ink-70)}
.drawer__label{padding:16px 4px 6px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tr-brand);color:var(--sage-deep)}
.drawer__cta{display:grid;gap:10px;margin-top:22px}
/* --- 7. Хиро ----------------------------------------------------------- */
.hero{position:relative;background:var(--graphite-deep);color:var(--white-warm);isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero__scrim{
position:absolute;inset:0;z-index:-1;
background:rgba(19,23,26,.52);
}
.hero__inner{
display:flex;align-items:center;
min-height:100vh; /* запасной вариант для старых браузеров */
min-height:100svh; /* весь экран на любом устройстве */
/* равные отступы сверху и снизу — блок ровно по центру экрана */
padding-block:calc(var(--head-h) + 16px);
}
.hero__body{max-width:960px}
.hero .display{font-family:var(--font-display);font-size:clamp(2.6rem,4.9vw,4.7rem);font-weight:300;line-height:1.08;letter-spacing:-.045em;text-shadow:0 2px 26px rgba(12,15,17,.5)}
.hero .display{text-wrap:balance}
.hero .display span{display:block;font:inherit;letter-spacing:inherit;color:inherit;margin-top:.02em}
.hero__kicker{color:rgba(255,255,255,.88);margin:0 0 1.1rem;text-shadow:0 1px 12px rgba(12,15,17,.55)}
.hero__kicker::before{background:currentColor}
.hero__sub{margin-top:clamp(40px,4.6vw,64px);max-width:46ch;font-size:clamp(1.05rem,1.4vw,1.3rem);font-weight:400;line-height:1.7;color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(12,15,17,.55)}
.hero .btn-row{margin-top:clamp(44px,4.8vw,68px);gap:18px}
.hero .btn{min-width:252px;min-height:70px;padding-inline:34px;font-size:1.0625rem;font-weight:600}
.hero .btn--outline-light{--bg:rgba(27,29,32,.22);--bd:rgba(255,255,255,.65);backdrop-filter:blur(8px)}
.hero .btn--outline-light:hover{--bg:var(--white-warm);--bd:var(--white-warm)}
.hero :focus-visible{outline-color:var(--white-warm)}
/* --- 8. Плашки результатов --------------------------------------------- */
.stats-band{background:var(--graphite);color:var(--white-warm)}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{
position:relative;padding:clamp(36px,3.8vw,54px) clamp(24px,2.6vw,42px);
display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
/* тонкая линия сверху прочерчивается по очереди */
.stat::after{
content:"";position:absolute;left:clamp(24px,2.6vw,42px);right:clamp(24px,2.6vw,42px);top:0;height:1px;
background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:left center;
transition:transform 0.99s cubic-bezier(.19,.72,.24,1);
}
.stats.is-in .stat::after{transform:scaleX(1)}
.stats.is-in .stat:nth-child(2)::after{transition-delay:0.126s}
.stats.is-in .stat:nth-child(3)::after{transition-delay:0.252s}
.stats.is-in .stat:nth-child(4)::after{transition-delay:0.378s}
.stat+.stat{box-shadow:inset 1px 0 0 rgba(255,255,255,.13)}
.stat__num{
display:block;font-size:clamp(2.6rem,4.1vw,3.9rem);font-weight:300;line-height:1;
letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--white-warm);
}
.stat__plus{display:inline;font-size:.4em;font-weight:300;vertical-align:super;margin-left:.05em;color:inherit}
.stat__label{
/* две строки у всех колонок — низ подписей выстраивается по одной линии */
display:block;width:100%;max-width:17ch;min-height:2.9em;
font-size:.6875rem;font-weight:600;line-height:1.45;
text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.48);
}
/* карточка рейтинга */
.rating{
margin-top:var(--gap);background:var(--graphite);color:var(--white-warm);
border-radius:var(--r);padding:clamp(24px,2.6vw,36px);
display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,2.6vw,40px);align-items:center;
box-shadow:var(--sh-2);
}
.rating__score{display:flex;align-items:center;gap:16px}
.rating__val{font-size:clamp(2.6rem,4vw,3.6rem);font-weight:600;line-height:1;letter-spacing:-.05em}
.rating__stars{display:flex;gap:4px;color:var(--sage);margin-bottom:7px}
.rating__stars svg{width:16px;height:16px}
.rating__meta{font-size:.8125rem;font-weight:600;color:var(--on-dark)}
.rating__badges{display:flex;flex-wrap:wrap;gap:9px}
.badge{
display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--pill);
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
font-size:.8125rem;font-weight:600;color:var(--white-warm);
}
.badge i{width:6px;height:6px;border-radius:var(--pill);background:var(--sage);flex:none}
.badge--light{background:var(--sage-pale);border-color:transparent;color:var(--sage-deep)}
.badge--light i{background:var(--sage-deep)}
/* --- 9. Шапка внутренней страницы -------------------------------------- */
.pagehead{
background:var(--graphite);color:var(--white-warm);
padding-top:calc(var(--head-h) + clamp(52px,7vw,92px));
padding-bottom:clamp(52px,6vw,86px);
}
.pagehead__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);gap:var(--gap);align-items:end}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.75rem;font-weight:600;color:var(--on-dark);margin-bottom:28px}
.crumbs a:hover{color:var(--sage)}
.crumbs span{opacity:.4}
.pagehead h1{margin-top:18px;text-wrap:balance}
.pagehead p{padding-bottom:8px}
.pagehead .eyebrow{color:var(--sage)}
.pagehead .eyebrow::before{background:var(--sage)}
/* --- 10. Карточки-плашки ----------------------------------------------- */
.tile{
background:var(--card);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);
box-shadow:0 0 0 1px var(--line-soft);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-2),0 0 0 1px var(--line-soft)}
.tile__icon{
width:52px;height:52px;border-radius:6px;background:var(--sage-pale);color:var(--sage-deep);
display:grid;place-items:center;margin-bottom:22px;
}
.tile__icon svg{width:26px;height:26px}
.tile h3{margin-bottom:11px}
.tile p{font-size:.9375rem;color:var(--ink-70)}
.usp{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.usp--4{grid-template-columns:repeat(4,1fr)}
/* совместимость: старая разметка преимуществ */
.usp__item{
background:var(--card);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);
box-shadow:0 0 0 1px var(--line-soft);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.usp__item:hover{transform:translateY(-4px);box-shadow:var(--sh-2),0 0 0 1px var(--line-soft)}
.usp__item h3{margin-bottom:11px}
.usp__item p{font-size:.9375rem;color:var(--ink-70)}
.usp__icon{
width:58px;height:58px;padding:13px;border-radius:6px;
background:var(--sage-pale);color:var(--graphite);margin-bottom:22px;overflow:visible;
}
:is(.section--dark,.panel-dark) .usp__item{background:rgba(255,255,255,.06);box-shadow:none}
:is(.section--dark,.panel-dark) .usp__item p{color:var(--on-dark)}
:is(.section--dark,.panel-dark) .usp__icon{background:rgba(255,255,255,.09);color:var(--white-warm)}
/* --- 11. Карточки услуг ------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{
display:flex;flex-direction:column;background:var(--card-2);border-radius:var(--r);
overflow:hidden;box-shadow:0 0 0 1px var(--line-soft);
transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3),0 0 0 1px var(--line-soft)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--graphite)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__tag{
position:absolute;left:16px;top:16px;padding:7px 15px;border-radius:var(--pill);
background:rgba(20,22,24,.62);backdrop-filter:blur(8px);color:#fff;
font-size:.75rem;font-weight:600;letter-spacing:.02em;
}
.card__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,30px)}
.card__body h3{margin-bottom:10px}
.card__body p{font-size:.9375rem;color:var(--ink-70);margin-bottom:22px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.card__price{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.card__price span{font-size:.75rem;font-weight:600;color:var(--ink-40);margin-right:6px;letter-spacing:0}
.card--wide{grid-column:span 2;flex-direction:row}
.card--wide .card__media{aspect-ratio:auto;flex:1 1 52%}
.card--wide .card__body{flex:1 1 48%;justify-content:center;padding:clamp(26px,3vw,44px)}
.card--flat{background:var(--card)}
.card--cta{background:var(--graphite);color:var(--white-warm);box-shadow:var(--sh-2)}
.card--cta .card__body{justify-content:center;gap:0}
.card--cta .eyebrow{margin-bottom:16px}
.card--cta h3{margin-bottom:12px}
.card--cta p{color:var(--on-dark);margin-bottom:26px}
.card--cta .btn-row{gap:10px}
.card--cta:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
/* --- 12. Тёмная скруглённая панель ------------------------------------- */
.panel-dark{
background:var(--graphite);color:var(--white-warm);border-radius:var(--r-lg);
padding:clamp(30px,4vw,68px);box-shadow:var(--sh-2);
}
.panel-light{
background:var(--card-2);border-radius:var(--r-lg);
padding:clamp(26px,3.4vw,54px);box-shadow:0 0 0 1px var(--line-soft);
}
/* --- 13. Шторка «до / после» ------------------------------------------- */
.reveal{
position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);
background:var(--graphite-deep);cursor:ew-resize;user-select:none;touch-action:none;
box-shadow:var(--sh-2);
}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.reveal__top{clip-path:inset(0 0 0 var(--pos,50%))}
.reveal__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:rgba(255,255,255,.9);transform:translateX(-1px);pointer-events:none}
.reveal__knob{
position:absolute;top:50%;left:50%;translate:-50% -50%;
width:54px;height:54px;border-radius:var(--pill);background:var(--white-warm);color:var(--graphite);
display:grid;place-items:center;box-shadow:0 10px 28px -8px rgba(20,22,24,.7);
}
.reveal__knob svg{width:20px;height:20px}
.reveal__tag{
position:absolute;top:16px;padding:8px 16px;border-radius:var(--pill);
background:rgba(20,22,24,.62);backdrop-filter:blur(8px);color:#fff;
font-size:.6875rem;font-weight:600;letter-spacing:var(--tr-slogan);text-transform:uppercase;
}
.reveal__tag--l{left:16px}
.reveal__tag--r{right:16px}
.reveal__hint{margin-top:16px;font-size:.8125rem;font-weight:600;color:var(--ink-50)}
:is(.section--dark,.panel-dark) .reveal__hint{color:var(--on-dark)}
.rating .link{color:var(--white-warm)}
.rating .link:hover{color:var(--sage)}
.reveal-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.reveal--result{border-radius:7px;box-shadow:none}
.reveal--result .reveal__tag{border-radius:4px;background:rgba(20,22,24,.78);backdrop-filter:none}
.reveal--result .reveal__handle{width:1px;background:rgba(255,255,255,.9)}
.reveal--result .reveal__knob{width:48px;height:48px;border-radius:6px;box-shadow:0 8px 22px rgba(20,22,24,.32)}
/* --- 14. Процесс ------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.step{
background:var(--card);border-radius:var(--r);padding:clamp(22px,2.2vw,30px);
box-shadow:0 0 0 1px var(--line-soft);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2),0 0 0 1px var(--line-soft)}
.step__num{
display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:28px;padding:0 12px;
border-radius:var(--pill);background:var(--sage-pale);color:var(--sage-deep);
font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;
}
.step h3{font-size:1.0625rem;margin-bottom:9px}
.step p{font-size:.875rem;color:var(--ink-70)}
:is(.section--dark,.panel-dark) .step{background:rgba(255,255,255,.06);box-shadow:none}
:is(.section--dark,.panel-dark) .step p{color:var(--on-dark)}
:is(.section--dark,.panel-dark) .step__num{background:rgba(135,151,132,.28);color:var(--sage)}
.steps--flow{position:relative;gap:0}
/* рамка: верхняя и нижняя линии прочерчиваются слева направо */
.steps--flow::before,.steps--flow::after{
content:"";position:absolute;left:0;right:0;height:1px;background:rgba(37,39,43,.18);
transform:scaleX(0);transform-origin:left center;
transition:transform 1.296s cubic-bezier(.19,.72,.24,1);
}
.steps--flow::before{top:0}
.steps--flow::after{bottom:0;transition-delay:0.945s}
.steps--flow.is-in::before,.steps--flow.is-in::after{transform:scaleX(1)}
/* вертикальные разделители — по левому краю каждой карточки и справа от последней */
.steps--flow .step{
position:relative;overflow:hidden;border-left:0;border-radius:0;
background:transparent;box-shadow:none;min-height:0;
padding:clamp(30px,3.2vw,42px) clamp(20px,2.2vw,32px) clamp(52px,5vw,74px);
opacity:0;transform:translateY(24px);
transition:opacity 0.99s var(--ease),transform 0.99s cubic-bezier(.19,.72,.24,1),background 0.27s var(--ease);
}
.steps--flow .step::before,
.steps--flow .step:last-child::after{
content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(37,39,43,.18);
transform:scaleY(0);transform-origin:top center;
transition:transform 0.945s cubic-bezier(.19,.72,.24,1);
}
.steps--flow .step::before{left:0}
.steps--flow .step:last-child::after{right:0}
.steps--flow.is-in .step::before,
.steps--flow.is-in .step:last-child::after{transform:scaleY(1)}
.steps--flow.is-in .step{opacity:1;transform:none}
.steps--flow .step:hover{transform:none;background:rgba(37,39,43,.035);box-shadow:none}
/* очерёдность: линии, затем карточки, затем цифры */
.steps--flow.is-in .step:nth-child(1)::before{transition-delay:0.054s}
.steps--flow.is-in .step:nth-child(2)::before{transition-delay:0.306s}
.steps--flow.is-in .step:nth-child(3)::before{transition-delay:0.576s}
.steps--flow.is-in .step:nth-child(4)::before{transition-delay:0.846s}
.steps--flow.is-in .step:nth-child(5)::before{transition-delay:1.116s}
.steps--flow.is-in .step:last-child::after{transition-delay:1.395s}
.steps--flow.is-in .step:nth-child(1){transition-delay:0.468s}
.steps--flow.is-in .step:nth-child(2){transition-delay:0.666s}
.steps--flow.is-in .step:nth-child(3){transition-delay:0.864s}
.steps--flow.is-in .step:nth-child(4){transition-delay:1.062s}
.steps--flow.is-in .step:nth-child(5){transition-delay:1.26s}
.steps--flow .step__num{padding:0;background:transparent;border-radius:0;justify-content:flex-start;color:var(--ink-50)}
/* --- 15. Прайс --------------------------------------------------------- */
.price-note{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.price-note span{
display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:var(--pill);
background:var(--card);box-shadow:0 0 0 1px var(--line-soft);font-size:.8125rem;color:var(--ink-70);
}
.price-note b{color:var(--ink);font-weight:600}
.price-anchor{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(36px,4.4vw,60px)}
.chip{
display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:var(--r-button);
background:var(--card-2);box-shadow:0 0 0 1px var(--line-soft);font-size:.875rem;font-weight:600;
transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.chip:hover,.chip.is-active{background:var(--graphite);color:var(--white-warm);box-shadow:var(--sh-1)}
.chip:hover span,.chip.is-active span{color:var(--graphite-light)!important}
.ptable-wrap{
background:var(--card-2);border-radius:var(--r);padding:clamp(18px,2.2vw,30px);
box-shadow:0 0 0 1px var(--line-soft);margin-bottom:var(--gap);
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;min-width:660px;border-collapse:collapse;font-size:.9375rem}
.ptable caption{text-align:left;padding:6px 0 20px;font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.022em}
.ptable thead th{
padding:0 16px 14px 0;text-align:right;vertical-align:bottom;
font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-40);border-bottom:1px solid var(--line);
}
.ptable thead th:first-child{text-align:left;padding-right:24px;width:44%}
.ptable thead th em{display:block;font-style:normal;font-size:.6875rem;font-weight:500;letter-spacing:.02em;text-transform:none;white-space:nowrap;color:var(--ink-40);margin-top:6px}
.ptable tbody td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap;font-weight:600}
.ptable tbody td:first-child{text-align:left;padding-right:24px;white-space:normal;font-weight:600;color:var(--ink)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover td{background:rgba(135,151,132,.07)}
.ptable .row-accent td{background:var(--grey-light)}
.ptable .row-accent td:first-child{font-weight:600}
.ptable td em{display:block;font-style:normal;font-size:.8125rem;color:var(--ink-50);font-weight:500;margin-top:4px}
.ptable tbody tr:hover td:first-child em{color:var(--ink-50)}
/* --- 16. Акции --------------------------------------------------------- */
.promo{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
background:var(--graphite);color:var(--white-warm);border-radius:var(--r-lg);
overflow:hidden;box-shadow:var(--sh-2);
}
.promo__media{position:relative;min-height:340px}
.promo__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo__body{padding:clamp(28px,3.6vw,58px);display:flex;flex-direction:column;justify-content:center}
.promo__body .eyebrow{color:var(--sage)}
.promo__body .eyebrow::before{background:var(--sage)}
.promo__body h3{margin:18px 0 14px;font-size:clamp(1.5rem,2.4vw,2.15rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.promo__body p{font-size:.9375rem;color:var(--on-dark)}
.promo__price{display:flex;align-items:baseline;gap:14px;margin:26px 0 6px}
.promo__price b{font-size:clamp(2rem,3.2vw,2.8rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.promo__price s{color:var(--graphite-light);font-size:1.0625rem;font-weight:600}
.promo__list{display:grid;gap:10px;margin:22px 0 0}
.promo__list li{position:relative;padding-left:26px;font-size:.9375rem;color:var(--on-dark)}
.promo__list li{padding-left:38px;font-size:1rem;min-height:24px;display:flex;align-items:flex-start}
.promo__list li::before{
content:"";position:absolute;left:0;top:.08em;width:23px;height:23px;border-radius:var(--pill);
border:1px solid rgba(255,255,255,.34);
}
.promo__list li::after{
content:"";position:absolute;left:0;top:.08em;width:23px;height:23px;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:center;
}
.promo--light .promo__list li::before{border-color:rgba(37,39,43,.22)}
.promo--light .promo__list li::after{
background-image:url('data:image/svg+xml;utf8,');
}
.promo--light{background:var(--card-2);color:var(--ink);box-shadow:var(--sh-2),0 0 0 1px var(--line-soft)}
.promo--light .promo__body p,.promo--light .promo__list li{color:var(--ink-70)}
.promo--light .promo__price s{color:var(--ink-40)}
.promo--light .eyebrow{color:var(--sage-deep)}
.promo--rev .promo__media{order:2}
/* --- 17. Отзывы -------------------------------------------------------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.review{
display:flex;flex-direction:column;gap:20px;padding:clamp(24px,2.4vw,32px);
background:var(--card-2);border-radius:var(--r);box-shadow:0 0 0 1px var(--line-soft);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.review:hover{transform:translateY(-4px);box-shadow:var(--sh-2),0 0 0 1px var(--line-soft)}
.review__head{display:flex;align-items:center;gap:14px}
.review__ava{
width:46px;height:46px;border-radius:var(--pill);flex:none;display:grid;place-items:center;
background:var(--sage);color:#fff;font-size:1.0625rem;font-weight:600;
}
.review__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.review__who b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.review__who span{font-size:.75rem;color:var(--ink-40);font-weight:600}
.review__stars{display:flex;gap:3px;color:var(--sage);margin-left:auto;flex:none}
.review__stars svg{width:14px;height:14px}
.review__text{font-size:.9375rem;line-height:1.65;color:var(--ink-70)}
.review__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft)}
.review__src{
display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--pill);
background:var(--sage-pale);color:var(--sage-deep);
font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.review__src i{width:6px;height:6px;border-radius:var(--pill);background:currentColor;flex:none}
.review__date{font-size:.75rem;color:var(--ink-40);font-weight:600}
:is(.section--dark,.panel-dark) .review{background:rgba(255,255,255,.06);box-shadow:none}
:is(.section--dark,.panel-dark) .review__text{color:var(--on-dark)}
:is(.section--dark,.panel-dark) .review__foot{border-top-color:var(--line-dark)}
:is(.section--dark,.panel-dark) .review__ava{background:var(--sage);color:#fff}
:is(.section--dark,.panel-dark) .review__src{background:rgba(135,151,132,.24);color:var(--sage)}
:is(.section--dark,.panel-dark) .review__who span,
:is(.section--dark,.panel-dark) .review__date{color:var(--graphite-light)}
.reviews-section{background:var(--card-2)}
.reviews--home{grid-template-columns:repeat(2,1fr);gap:12px}
.reviews--home .review{position:relative;border-radius:6px;box-shadow:none;border:1px solid rgba(37,39,43,.12);padding:30px;overflow:hidden}
.reviews--home .review:first-child{grid-column:span 2;background:var(--graphite);color:var(--white-warm);border-color:var(--graphite)}
.reviews--home .review::before{content:"“";position:absolute;right:20px;bottom:-26px;font-size:8rem;font-weight:300;line-height:1;color:rgba(135,151,132,.15)}
.reviews--home .review:hover{transform:translateY(-3px);box-shadow:var(--sh-1)}
.reviews--home .review__ava{border-radius:5px;background:var(--sage-deep)}
.reviews--home .review__src{border-radius:4px;padding:6px 10px}
.reviews--home .review:first-child .review__text{color:var(--on-dark)}
.reviews--home .review:first-child .review__foot{border-top-color:var(--line-dark)}
.reviews--home .review:first-child .review__who span,
.reviews--home .review:first-child .review__date{color:var(--graphite-light)}
.training-section{background:var(--grey-light)}
.training-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;background:var(--card-2);border:1px solid rgba(37,39,43,.12);border-radius:8px;overflow:hidden}
.training-layout__media{height:100%;border-radius:0;overflow:hidden;box-shadow:none}
.training-layout__media img{height:100%;min-height:640px;aspect-ratio:auto;object-fit:cover}
.training-layout__content{padding:clamp(36px,5vw,74px);display:flex;flex-direction:column;justify-content:center}
.training-layout__content .sec-head{margin-bottom:30px}
.training-layout__content .facts{grid-template-columns:1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:0}
.training-layout__content .fact{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;padding:17px 0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid var(--line-soft)}
.training-layout__content .fact:last-child{border-bottom:0}
.training-layout__content .fact b{font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.training-layout__content .fact span{margin-top:0;font-size:.82rem}
.ywidget{border-radius:var(--r);overflow:hidden;background:var(--card-2);box-shadow:var(--sh-2),0 0 0 1px var(--line-soft);max-width:620px}
.ywidget iframe{width:100%;height:700px;border:0}
/* --- 18. Галерея ------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.gallery figure{margin:0;display:flex;border-radius:var(--r);overflow:hidden;background:var(--graphite);position:relative;box-shadow:var(--sh-1)}
.gallery img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{
position:absolute;left:14px;right:14px;bottom:14px;padding:12px 14px;
background:rgba(20,22,24,.82);border:1px solid rgba(255,255,255,.14);
color:#fff;font-size:.8125rem;font-weight:500;
}
.gallery--wide figure:first-child{grid-column:span 2}
/* --- 19. Аккордеон ----------------------------------------------------- */
.acc{display:grid;gap:12px}
.acc__item{
background:var(--card-2);border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line-soft);
transition:box-shadow .3s var(--ease);
}
.acc__item.is-open{box-shadow:var(--sh-1),0 0 0 1px var(--line-soft)}
.acc__btn{
display:flex;align-items:flex-start;justify-content:space-between;gap:24px;width:100%;
padding:22px clamp(20px,2.2vw,28px);background:none;border:0;text-align:left;cursor:pointer;
font-size:clamp(1rem,1.3vw,1.15rem);font-weight:600;letter-spacing:-.016em;line-height:1.35;
transition:color .25s var(--ease);
}
.acc__btn:hover,.acc__item.is-open .acc__btn{color:var(--sage-deep)}
.acc__sign{
position:relative;flex:none;width:30px;height:30px;border-radius:var(--pill);
background:var(--sage-pale);color:var(--sage-deep);margin-top:-2px;
}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.acc__sign::before{top:14px;left:8px;width:14px;height:1.8px}
.acc__sign::after{left:14px;top:8px;width:1.8px;height:14px}
.acc__item.is-open .acc__sign::after{transform:scaleY(0);opacity:0}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .62s cubic-bezier(.19,.72,.24,1)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__inner>div{padding:0 clamp(20px,2.2vw,28px) 26px;max-width:80ch;color:var(--ink-70);font-size:.9375rem}
.acc__inner p+p{margin-top:12px}
.acc__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);max-width:none}
.acc__cols h4{margin-bottom:12px;color:var(--ink)}
.acc__cols li{position:relative;padding-left:20px;margin-bottom:8px}
.acc__cols li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;border-radius:2px;background:var(--sage)}
/* --- 20. Формы и модалка ----------------------------------------------- */
.form{display:grid;gap:14px}
.field{display:grid;gap:8px}
.field label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.field input,.field textarea{
width:100%;min-height:54px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--card-2);font-size:1rem;font-weight:600;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{font-weight:500;color:var(--ink-40)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(135,151,132,.2);outline:none}
.field--row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.75rem;line-height:1.5;color:var(--ink-50);margin-top:4px}
.consent input{width:18px;height:18px;min-height:0;margin-top:1px;flex:none;accent-color:var(--sage-deep)}
.consent a{text-decoration:underline;text-underline-offset:2px}
.form__ok{display:none;padding:14px 18px;border-radius:var(--r-sm);background:var(--sage-pale);color:var(--sage-deep);font-size:.9375rem;font-weight:600}
.form.is-sent .form__ok{display:block}
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center}
.cta__panel{padding:clamp(24px,2.8vw,38px);background:var(--card-2);border-radius:var(--r);box-shadow:var(--sh-2)}
:is(.section--dark,.panel-dark) .cta__panel{background:rgba(255,255,255,.07);box-shadow:none}
:is(.section--dark,.panel-dark) .field input,
:is(.section--dark,.panel-dark) .field select,
:is(.section--dark,.panel-dark) .field textarea{background:rgba(255,255,255,.08);border-color:var(--line-dark);color:var(--white-warm)}
:is(.section--dark,.panel-dark) .field input::placeholder,
:is(.section--dark,.panel-dark) .field textarea::placeholder{color:rgba(255,255,255,.42)}
:is(.section--dark,.panel-dark) .field label{color:var(--graphite-light)}
:is(.section--dark,.panel-dark) .consent{color:var(--graphite-light)}
:is(.section--dark,.panel-dark) .form__ok{background:rgba(135,151,132,.24);color:var(--sage)}
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal.is-open{display:flex}
.modal__back{position:absolute;inset:0;background:rgba(20,22,24,.62);backdrop-filter:blur(5px)}
.modal__box{
position:relative;width:min(540px,100%);max-height:92dvh;overflow-y:auto;
padding:clamp(26px,3.4vw,42px);background:var(--white-warm);border-radius:var(--r-lg);
box-shadow:var(--sh-3);animation:pop .34s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal__close{
position:absolute;top:16px;right:16px;width:40px;height:40px;display:grid;place-items:center;
border:0;border-radius:var(--r-button);background:var(--grey-light);cursor:pointer;
transition:background .25s var(--ease),color .25s var(--ease);
}
.modal__close:hover{background:var(--graphite);color:var(--white-warm)}
.modal__close svg{width:15px;height:15px}
.modal h3{margin-bottom:8px}
.modal__box>p{margin-bottom:22px;font-size:.9375rem;color:var(--ink-70)}
.modal__alt{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.modal__alt span{width:100%;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);margin-bottom:4px}
body.is-locked{overflow:hidden}
/* --- 21. Контакты ------------------------------------------------------ */
.contacts{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,48px);align-items:start}
.cinfo{display:grid;gap:12px}
.cinfo__row{
display:grid;grid-template-columns:minmax(110px,.38fr) minmax(0,1fr);gap:18px;
padding:20px clamp(20px,2vw,26px);background:var(--card-2);border-radius:var(--r-sm);
box-shadow:0 0 0 1px var(--line-soft);
}
.cinfo__row dt{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.cinfo__row dd{font-size:1rem;font-weight:600}
.cinfo__row dd a:hover{color:var(--sage-deep)}
.cinfo__row dd em{display:block;font-style:normal;font-size:.8125rem;font-weight:500;color:var(--ink-50);margin-top:5px}
:is(.section--dark,.panel-dark) .cinfo__row{background:rgba(255,255,255,.07);box-shadow:none}
:is(.section--dark,.panel-dark) .cinfo__row dt{color:var(--graphite-light)}
:is(.section--dark,.panel-dark) .cinfo__row dd em{color:var(--on-dark)}
:is(.section--dark,.panel-dark) .cinfo__row dd a:hover{color:var(--sage)}
:is(.section--dark,.panel-dark) .socials a{background:rgba(255,255,255,.09);box-shadow:none;color:var(--white-warm)}
:is(.section--dark,.panel-dark) .socials a:hover{background:var(--white-warm);color:var(--graphite)}
:is(.section--dark,.panel-dark) .chip{background:rgba(255,255,255,.09);box-shadow:none;color:var(--white-warm)}
:is(.section--dark,.panel-dark) .price-note span{background:rgba(255,255,255,.09);box-shadow:none;color:var(--on-dark)}
:is(.section--dark,.panel-dark) .acc__item{background:rgba(255,255,255,.07);box-shadow:none}
:is(.section--dark,.panel-dark) .acc__inner>div{color:var(--on-dark)}
:is(.section--dark,.panel-dark) .acc__cols h4{color:var(--white-warm)}
:is(.section--dark,.panel-dark) .prose ul li,:is(.section--dark,.panel-dark) .prose ol li{color:var(--on-dark)}
:is(.section--dark,.panel-dark) .muted{color:var(--graphite-light)}
.map{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2),0 0 0 1px var(--line-soft);background:var(--grey-light)}
.map iframe,.map img{width:100%;height:100%;min-height:460px;border:0;object-fit:cover}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.socials a{
display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-radius:var(--r-button);
background:var(--card-2);box-shadow:0 0 0 1px var(--line-soft);font-size:.875rem;font-weight:600;
transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.socials a:hover{background:var(--graphite);color:var(--white-warm);transform:translateY(-2px)}
/* --- 22. Подвал -------------------------------------------------------- */
.footer{
background:var(--graphite);color:var(--white-warm);
padding-block:clamp(52px,6vw,84px) 28px;
border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);margin-top:0;
}
.footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,48px);padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--line-dark)}
.footer__about p{margin-top:22px;font-size:.875rem;color:var(--on-dark);max-width:36ch}
.footer h4{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tr-brand);color:var(--sage);margin-bottom:20px}
.footer li{margin-bottom:11px}
.footer li a{font-size:.9375rem;color:var(--on-dark);transition:color .25s var(--ease)}
.footer li a:hover{color:var(--white-warm)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-top:24px;font-size:.75rem;color:var(--graphite-light)}
.footer__bottom a:hover{color:var(--white-warm)}
.footer__bottom .sep{margin-left:auto}
/* --- 23. Прочее -------------------------------------------------------- */
.prose{max-width:74ch}
.prose p+p{margin-top:18px}
.prose h3{margin:34px 0 14px}
.prose ul{margin:18px 0;display:grid;gap:12px}
.prose ul li{position:relative;padding-left:36px;color:var(--ink-70)}
.prose ul li::before{
content:"";position:absolute;left:0;top:.16em;width:22px;height:22px;border-radius:var(--pill);
border:1px solid rgba(37,39,43,.22);
}
.prose ul li::after{
content:"";position:absolute;left:0;top:.16em;width:22px;height:22px;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:center;
}
:is(.section--dark,.panel-dark) .prose ul li::before{border-color:rgba(255,255,255,.32)}
:is(.section--dark,.panel-dark) .prose ul li::after{
background-image:url('data:image/svg+xml;utf8,');
}
.prose ol{margin:18px 0;display:grid;gap:12px;counter-reset:n}
.prose ol li{position:relative;padding-left:38px;color:var(--ink-70);counter-increment:n}
.prose ol li::before{
content:counter(n);position:absolute;left:0;top:.12em;width:24px;height:24px;border-radius:var(--pill);
background:var(--sage-pale);color:var(--sage-deep);display:grid;place-items:center;
font-size:.75rem;font-weight:600;
}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.2vw,72px);align-items:center}
.split--rev>*:first-child{order:2}
.split__media{border-radius:var(--r);overflow:hidden;background:var(--graphite);box-shadow:var(--sh-2)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__media--tall img{aspect-ratio:3/4}
.studio-principles{background:var(--card-2)}
.studio-principles .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(46px,7vw,108px);align-items:stretch}
.studio-principles__body{position:relative}
.studio-principles .sec-head{margin-bottom:28px}
.studio-principles .prose{color:var(--ink-70)}
.studio-principles .prose p+p{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.studio-principles__links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.studio-principles__links .btn{width:100%;padding-inline:16px}
.studio-principles .split__media{border-radius:7px;box-shadow:none;border:0}
.studio-principles .split__media{height:100%}
.studio-principles .split__media img{height:100%;aspect-ratio:auto;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(26px,3vw,40px)}
.fact{background:var(--card);border-radius:var(--r-sm);padding:20px 22px;box-shadow:0 0 0 1px var(--line-soft)}
.fact b{display:block;font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.fact span{display:block;margin-top:9px;font-size:.8125rem;color:var(--ink-50)}
:is(.section--dark,.panel-dark) .fact{background:rgba(255,255,255,.07);box-shadow:none}
:is(.section--dark,.panel-dark) .fact span{color:var(--on-dark)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--pill);
background:var(--card);box-shadow:0 0 0 1px var(--line-soft);font-size:.8125rem;font-weight:600;color:var(--ink-70);
}
:is(.section--dark,.panel-dark) .tag{background:rgba(255,255,255,.09);box-shadow:none;color:var(--on-dark)}
.notice{
padding:clamp(20px,2.4vw,28px);border-radius:var(--r-sm);
background:var(--sage-pale);color:var(--ink);font-size:.9375rem;
}
.notice b{font-weight:600}
:is(.section--dark,.panel-dark) .notice{background:rgba(135,151,132,.2);color:var(--white-warm)}
/* --- Быстрые контакты и возврат наверх -------------------------------- */
.float-tools,.back-top{position:fixed;z-index:65;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.float-tools{right:18px;bottom:22px;display:grid;justify-items:end;gap:8px;transform:translateX(18px)}
.back-top{left:18px;bottom:22px;display:flex;align-items:center;transform:translateY(18px);border:0;background:transparent;color:var(--sage-deep);cursor:pointer}
.float-tools.is-visible,.back-top.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.float-tools.is-visible{transform:none}
.back-top.is-visible{transform:none}
.float-tool{
width:max-content;height:46px;display:flex;flex-direction:row-reverse;align-items:center;
justify-content:flex-start;background:var(--card-2);color:var(--sage-deep);
border:1px solid rgba(108,122,105,.5);border-radius:6px;overflow:hidden;box-shadow:var(--sh-1);
transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.float-tool:hover,.float-tool:focus-visible{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep)}
.float-tool svg{width:46px;height:46px;padding:12px;flex:none}
.float-tool span{display:grid;place-items:center;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:.82rem;font-weight:500;transition:max-width .35s var(--ease),opacity .25s var(--ease),padding .35s var(--ease)}
.float-tool:hover span,.float-tool:focus-visible span{max-width:130px;opacity:1;padding:0 16px}
.back-top svg{width:46px;height:46px;padding:12px;border:1px solid rgba(108,122,105,.5);border-radius:6px;background:var(--card-2);transition:background .25s var(--ease),color .25s var(--ease)}
.back-top:hover svg{background:var(--sage-deep);color:#fff}
/* --- 24. Появление при скролле ----------------------------------------- */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity 0.63s var(--ease),transform 0.63s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}
.rise-d1{transition-delay:0.063s}.rise-d2{transition-delay:0.126s}.rise-d3{transition-delay:0.189s}.rise-d4{transition-delay:0.252s}
.hero__body>*{opacity:0;transform:translateY(20px);animation:heroIn 0.855s var(--ease) forwards}
.hero__body>*:nth-child(1){animation-delay:0.09s}
.hero__body>*:nth-child(2){animation-delay:0.18s}
.hero__body>*:nth-child(3){animation-delay:0.27s}
.hero__body>*:nth-child(4){animation-delay:0.36s}
@keyframes heroIn{to{opacity:1;transform:none}}
/* --- 25. Адаптив ------------------------------------------------------- */
@media (max-width:1240px){
.nav__link{padding:10px 6px;font-size:.9rem}
.header .btn--head{padding-inline:18px}
}
@media (max-width:1100px){
.nav{display:none}
.header__inner{justify-content:flex-start}
.header__side{margin-left:auto}
.burger{display:inline-flex}
.cards{grid-template-columns:repeat(2,1fr)}
.card--wide{grid-column:span 2}
.reviews{grid-template-columns:repeat(2,1fr)}
.steps,.steps--4{grid-template-columns:repeat(2,1fr)}
.steps--flow{grid-template-columns:repeat(5,1fr)}
.usp--4{grid-template-columns:repeat(2,1fr)}
.footer__top{grid-template-columns:repeat(2,1fr)}
.rating{grid-template-columns:1fr;gap:22px}
}
@media (max-width:900px){
:root{--head-h:66px}
.logo__mark{height:28px}
.pagehead__inner,.sec-head--split,.split,.cta,.contacts,.reveal-grid{grid-template-columns:1fr}
.split--rev>*:first-child{order:0}
.promo{grid-template-columns:1fr}
.promo--rev .promo__media{order:0}
.promo__media{min-height:250px}
.usp{grid-template-columns:1fr}
.studio-principles__links{grid-template-columns:1fr}
.acc__cols{grid-template-columns:1fr}
.gallery{grid-template-columns:repeat(2,1fr)}
.hero__inner{min-height:100vh;min-height:100svh;padding-block:calc(var(--head-h) + 16px)}
.hero__media img{object-position:62% center}
.hero__body{max-width:640px}
.hero .display{font-size:clamp(2.7rem,6.1vw,3.6rem)}
.stats{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(2n+1){box-shadow:none}
.stat:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.stat:nth-child(4){box-shadow:inset 1px 0 0 rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.13)}
.split__media--tall img{aspect-ratio:4/3}
.map iframe,.map img{min-height:340px}
.training-layout{grid-template-columns:1fr}
.training-layout__media img{min-height:420px;max-height:540px}
}
@media (max-width:640px){
body{font-size:16px}
:root{--r-lg:10px;--r:7px;--r-sm:5px}
.cards,.reviews,.steps,.steps--4,.steps--3,.gallery,.facts{grid-template-columns:1fr}
.gallery--wide figure:first-child,.card--wide{grid-column:auto}
.card--wide{flex-direction:column}
.card--wide .card__media{aspect-ratio:4/3}
.field--row{grid-template-columns:1fr}
.btn{width:100%}
.btn-row{flex-direction:column;align-items:stretch}
.header .btn,.socials a,.chip,.tag,.badge,.price-note span{width:auto}
.header .btn--head{display:none}
.logo__mark{height:28px}
.logo__word{height:12px}
.logo{gap:11px}
.footer__top{grid-template-columns:1fr}
.footer__bottom .sep{margin-left:0}
.cinfo__row{grid-template-columns:1fr;gap:6px}
.hero__inner{min-height:100vh;min-height:100svh;padding-block:calc(var(--head-h) + 16px);align-items:center}
.hero__media img{object-position:64% center}
.hero__scrim{background:rgba(19,23,26,.56)}
.hero .display{font-size:clamp(2rem,7.8vw,3.1rem);line-height:1.26;letter-spacing:-.04em}
.hero__sub{margin-top:22px;max-width:34ch;font-size:1rem;line-height:1.7}
.hero .btn-row{margin-top:28px;gap:14px}
.hero .btn{min-width:0;min-height:60px}
.stats{grid-template-columns:1fr 1fr}
.stat{padding:28px 20px;gap:12px}
.stat:nth-child(odd){border-left:0}
.stat::before{left:16px;width:32px}
.stat__num{font-size:2rem}
.stat__label{font-size:.75rem;max-width:18ch}
.studio-principles .split{gap:38px}
.studio-principles__body{padding-left:0}
.studio-principles__links{flex-direction:column}
.steps--flow{display:grid;grid-template-columns:1fr;padding:0 0 0 26px;overflow:visible}
.steps--flow::before,.steps--flow::after{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:center top}
.steps--flow::after{transform:scaleY(0)}
.steps--flow.is-in::after{transform:scaleY(1)}
.steps--flow .step{min-height:0;padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
.steps--flow .step::before{left:-25px;top:31px}
.reviews--home .review:first-child{grid-column:auto}
.training-layout__content{padding:30px 22px}
.training-layout__content .fact{grid-template-columns:100px 1fr}
.float-tools{right:10px;top:auto;bottom:18px;transform:translateX(12px)}
.float-tools.is-visible{transform:none}
.float-tool{height:44px}
.float-tool svg{width:44px;height:44px;padding:12px}
.back-top{left:10px;bottom:18px}
.back-top span{display:none}
}
@media (max-width:360px){
.header .btn--head{display:none}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.js .rise,.hero__body>*{opacity:1;transform:none}
}
@media print{
.header,.footer,.modal,.btn,.burger,.float-tools,.back-top{display:none!important}
body{background:#fff;color:#000}
}
/* ==========================================================================
26. Переработка секций главной
========================================================================== */
/* --- шапка секции с пояснением над заголовком -------------------------- */
.sec-head--stack{max-width:74ch}
.sec-head--stack .eyebrow{margin-bottom:16px}
.sec-head__note{
margin:0 0 22px;padding-left:18px;border-left:2px solid var(--sage);
max-width:62ch;font-size:.9375rem;line-height:1.6;color:var(--ink-50);
}
.sec-head--stack h2{margin:0}
:is(.section--dark,.panel-dark) .sec-head__note{color:var(--on-dark)}
/* --- парные кнопки одной ширины и центрирование ------------------------ */
.btn-row--pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.btn-row--pair .btn{width:100%;min-width:0}
.btn-row--center{justify-content:center;margin-top:clamp(32px,3.6vw,48px)}
.btn-row--pair.btn-row--center{max-width:660px;margin-inline:auto}
/* --- плитки преимуществ ------------------------------------------------- */
.usp__item{position:relative;padding:clamp(28px,3vw,40px);overflow:hidden;display:flex;flex-direction:column}
.usp__item{transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.usp__icon{width:56px;height:56px;padding:14px;border-radius:var(--r-sm);margin-bottom:26px}
.usp__item h3{margin:0 0 16px}
/* --- карточка «Подберём услугу» ---------------------------------------- */
.card--cta .card__body{align-items:center;text-align:center;justify-content:center;gap:0;padding:clamp(28px,3vw,40px)}
.card--cta .eyebrow{margin-bottom:20px}
.card--cta h3{margin:0 0 18px;padding-bottom:20px;border-bottom:1px solid var(--line-dark);width:100%}
.card--cta p{margin:0 0 24px;color:var(--on-dark)}
.card--cta__actions{
display:grid;grid-template-columns:1fr;gap:10px;width:100%;
padding-top:24px;border-top:1px solid var(--line-dark);
}
.card--cta__actions .btn{width:100%}
/* --- «до / после»: высота по текстовой колонке -------------------------- */
.reveal-grid{align-items:stretch}
.reveal-grid>*{display:flex;flex-direction:column;justify-content:center}
.reveal--result{aspect-ratio:auto;height:100%;min-height:clamp(320px,34vw,470px)}
.reveal--result .reveal__tag{display:none}
/* --- акция: воздух и разделители ---------------------------------------- */
.promo__list{padding-top:24px;margin-top:24px;border-top:1px solid var(--line-dark)}
.promo--light .promo__list{border-top-color:var(--line)}
.promo__price{
display:flex;flex-direction:column;gap:10px;align-items:flex-start;
margin:30px 0 34px;padding-top:26px;border-top:1px solid var(--line-dark);
}
.promo--light .promo__price{border-top-color:var(--line)}
.promo__price-label{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-light)}
.promo--light .promo__price-label{color:var(--ink-40)}
.promo__price-val{display:flex;align-items:baseline;gap:14px}
.promo__body .btn-row--pair{max-width:520px}
/* --- обучение: характеристики курса ------------------------------------ */
.specs{display:grid;margin:32px 0 34px;border-top:1px solid var(--line)}
.specs__row{
display:grid;grid-template-columns:minmax(110px,.36fr) minmax(0,1fr);gap:20px;align-items:baseline;
padding:18px 0;border-bottom:1px solid var(--line);
}
.specs__row:last-child{border-bottom:0}
.specs__row dt{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.specs__row dd{font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.specs__row dd em{display:block;font-style:normal;font-size:.8125rem;font-weight:500;letter-spacing:0;color:var(--ink-50);margin-top:7px}
.training-layout__content .btn-row--pair{max-width:560px}
/* --- отзывы бегущей лентой ---------------------------------------------- */
.marquee{
position:relative;overflow:hidden;
margin-inline:calc(var(--pad) * -1);padding:6px var(--pad) 10px;
}
.marquee__track{display:flex;gap:var(--gap);width:max-content;animation:marquee 70s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee .review{
width:clamp(290px,25vw,390px);flex:none;border-radius:var(--r-sm);
background:var(--card-2);box-shadow:0 0 0 1px var(--line);
}
.marquee .review:hover{transform:none;box-shadow:0 0 0 1px var(--sage)}
.marquee .review{align-self:stretch}
.marquee .review__text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(var(--marquee-shift,-50%))}}
/* --- контакты ----------------------------------------------------------- */
.contacts{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
.contacts__info{display:flex;flex-direction:column;gap:12px}
.cinfo{display:grid;gap:12px;flex:1}
.cinfo__row{
display:flex;flex-direction:column;gap:9px;justify-content:center;
padding:20px clamp(18px,1.8vw,26px);min-height:104px;
background:var(--card-2);border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);
}
.cinfo__row dt{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.cinfo__row dd{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.35}
.cinfo__row dd em{display:block;font-style:normal;font-size:.8125rem;font-weight:500;color:var(--ink-50);margin-top:6px}
.socials--grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:0}
.socials--grid a{justify-content:center;padding:0 6px;font-size:.8125rem;min-height:50px}
.map{height:100%}
.map iframe{height:100%;min-height:100%}
/* --- адаптив переработанных блоков -------------------------------------- */
@media (max-width:900px){
.reveal--result{min-height:300px}
.specs__row{grid-template-columns:1fr;gap:6px}
.socials--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.map iframe{min-height:340px}
}
@media (max-width:640px){
.btn-row--pair{grid-template-columns:1fr}
.marquee .review{width:min(84vw,330px)}
.marquee__track{animation-duration:52s}
.sec-head__note{padding-left:14px}
}
@media (prefers-reduced-motion:reduce){
.marquee{overflow-x:auto}
.marquee__track{animation:none;transform:none}
}
/* --- 27. Уведомление о файлах cookie ------------------------------------ */
.cookie{
position:fixed;left:0;right:0;bottom:0;z-index:110;
padding:0 var(--pad) clamp(14px,1.8vw,22px);pointer-events:none;
}
.cookie__box{
width:100%;max-width:780px;margin-inline:auto;pointer-events:auto;
padding:16px 20px;
/* матовое стекло, как у шапки при скролле, только графитовое */
background:rgba(24,26,29,.72);
backdrop-filter:blur(22px) saturate(150%);
-webkit-backdrop-filter:blur(22px) saturate(150%);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r);color:var(--white-warm);
box-shadow:0 18px 44px -26px rgba(10,12,14,.75);
opacity:0;transform:translateY(14px);
transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.cookie.is-in .cookie__box{opacity:1;transform:none}
.cookie__main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.cookie__text b{display:block;font-size:.875rem;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.cookie__text p{font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.66);max-width:46ch}
.cookie__text a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.32)}
.cookie__text a:hover{color:var(--sage)}
.cookie__actions{display:flex;align-items:center;gap:8px;flex:none}
.cookie__actions .btn{min-height:38px;padding:0 16px;font-size:.8125rem;font-weight:600;box-shadow:none}
.cookie__actions .btn--sm{--bg:var(--white-warm);--fg:var(--graphite);--bd:var(--white-warm)}
.cookie__actions .btn--sm:hover{--bg:var(--sage);--fg:#fff;--bd:var(--sage)}
.cookie__actions .btn--ghost{--bg:transparent;--fg:rgba(255,255,255,.86);--bd:rgba(255,255,255,.24)}
.cookie__actions .btn--ghost:hover{--bg:rgba(255,255,255,.12);--fg:#fff;--bd:rgba(255,255,255,.4)}
.cookie__toggle{
background:none;border:0;padding:0 4px;cursor:pointer;flex:none;
color:rgba(255,255,255,.55);font-size:.8125rem;font-weight:500;
text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.22);
transition:color .25s var(--ease);
}
.cookie__toggle:hover{color:var(--sage)}
.footer__cookie-link{text-decoration:underline;text-underline-offset:2px}
@media (max-width:820px){
.cookie__box{max-width:none}
.cookie__main{grid-template-columns:1fr;gap:14px}
.cookie__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cookie__actions .btn{width:100%}
.cookie__toggle{grid-column:1 / -1;justify-self:start;padding-top:2px}
}
/* --- 28. Подвал --------------------------------------------------------- */
.footer{padding-block:clamp(58px,6.5vw,92px) 0}
.footer__lead{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);
align-items:start;padding-bottom:clamp(38px,4.4vw,56px);border-bottom:1px solid var(--line-dark);
}
.footer__brand p{margin-top:24px;font-size:.9375rem;line-height:1.6;color:var(--on-dark);max-width:44ch}
.footer__quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.footer__phone{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);transition:background .25s var(--ease)}
.footer__phone:hover{background:rgba(255,255,255,.11)}
.footer__phone span{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-light)}
.footer__phone b{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.footer__quick .btn{grid-column:1 / -1;width:100%}
.footer__cols{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
padding-block:clamp(38px,4.4vw,56px);border-bottom:1px solid var(--line-dark);
}
.footer__col{padding-inline:clamp(18px,2.4vw,38px)}
.footer__col:first-child{padding-left:0}
.footer__col:last-child{padding-right:0}
.footer__col + .footer__col{border-left:1px solid var(--line-dark)}
.footer h4{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:var(--tr-brand);color:var(--sage);margin-bottom:22px}
.footer li{margin-bottom:13px;font-size:.9375rem;color:var(--on-dark);line-height:1.45}
.footer li a{font-size:inherit;color:inherit;transition:color .25s var(--ease)}
.footer li a:hover{color:var(--white-warm)}
.footer__bottom{
display:flex;flex-wrap:wrap;gap:12px clamp(20px,3vw,44px);align-items:center;
padding-block:26px 30px;font-size:.8125rem;color:var(--graphite-light);
}
.footer__bottom .sep{margin-left:0}
.footer__bottom a:hover{color:var(--white-warm)}
@media (max-width:1100px){
.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
.footer__col:nth-child(2n+1){padding-left:0;border-left:0}
.footer__col:nth-child(2n){padding-right:0}
}
@media (max-width:760px){
.footer__lead{grid-template-columns:1fr}
.footer__cols{grid-template-columns:1fr;gap:0}
.footer__col{padding-inline:0;padding-block:24px;border-left:0!important}
.footer__col + .footer__col{border-top:1px solid var(--line-dark)}
}
/* --- 29. Блок записи ----------------------------------------------------- */
.cta__aside{margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-dark)}
.cta__aside-label{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-light);margin-bottom:14px}
.cta__messengers{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-dark)}
.cta__messengers span{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-light);width:100%}
.cta__messengers a{font-size:.9375rem;font-weight:600;color:var(--white-warm);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3);transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.cta__messengers a:hover{color:var(--sage);text-decoration-color:var(--sage)}
/* ==========================================================================
30. Доводка: контакты, запись, процесс
========================================================================== */
/* --- иконки в карточках контактов --------------------------------------- */
.cinfo__row{position:relative;padding-right:74px}
.cinfo__icon{
position:absolute;right:clamp(18px,1.8vw,26px);top:50%;translate:0 -50%;
width:42px;height:42px;display:grid;place-items:center;flex:none;
border-radius:var(--r-sm);background:var(--grey-light);color:var(--graphite);
transition:background .25s var(--ease),color .25s var(--ease);
}
.cinfo__icon svg{width:21px;height:21px}
.cinfo__row:hover .cinfo__icon{background:var(--graphite);color:var(--white-warm)}
/* --- блок записи: панель по высоте текста -------------------------------- */
.cta{align-items:stretch}
.cta > *{display:flex;flex-direction:column;justify-content:center}
.cta__panel{justify-content:center;padding:clamp(28px,3.2vw,44px)}
.cta__panel .form{gap:20px}
.cta__panel .field--row{gap:18px}
.cta__panel .consent{align-items:center;margin-top:6px}
.cta__panel .btn{margin-top:4px}
/* --- «Как мы работаем»: отделено цветом ---------------------------------- */
.section--process{background:var(--grey-light)}
.section--process .steps--flow::before{background:rgba(37,39,43,.16)}
.section--process .step{background:transparent}
.section--process .steps--flow .step:hover{background:rgba(37,39,43,.04)}
.steps--flow .step__num{
display:inline-flex;opacity:0;transform:translateY(-6px);
transition:opacity 0.45s var(--ease),transform 0.45s var(--ease);
}
.steps--flow.is-in .step__num{opacity:1;transform:none}
.steps--flow.is-in .step:nth-child(1) .step__num{transition-delay:0.27s}
.steps--flow.is-in .step:nth-child(2) .step__num{transition-delay:0.486s}
.steps--flow.is-in .step:nth-child(3) .step__num{transition-delay:0.702s}
.steps--flow.is-in .step:nth-child(4) .step__num{transition-delay:0.918s}
.steps--flow.is-in .step:nth-child(5) .step__num{transition-delay:1.134s}
/* ==========================================================================
31. Шапка раздела с фотографией
========================================================================== */
.pagehead--photo{position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(64px,7vw,104px)}
.pagehead__media{position:absolute;inset:0;z-index:-2}
.pagehead__media img{width:100%;height:100%;object-fit:cover}
.pagehead--photo::before{
content:"";position:absolute;inset:0;z-index:-1;
background:rgba(19,23,26,.7);
}
.pagehead--photo .pagehead__inner{align-items:end}
/* --- 32. «Как мы работаем»: крупный призрачный номер --------------------- */
.steps--flow .step{overflow:hidden}
.steps--flow .step__ghost{
position:absolute;right:-13px;bottom:-.10em;z-index:0;pointer-events:none;
font-size:clamp(7.5rem,11vw,13.5rem);font-weight:800;line-height:.78;letter-spacing:-.07em;
color:rgba(37,39,43,.042);
opacity:0;transform:translateY(22px) scale(.94);transform-origin:100% 100%;
transition:opacity 1.35s var(--ease),transform 1.35s cubic-bezier(.19,.72,.24,1),color 0.27s var(--ease);
}
.steps--flow.is-in .step__ghost{opacity:1;transform:translateY(0) scale(1)}
.steps--flow.is-in .step:nth-child(1) .step__ghost{transition-delay:1.08s}
.steps--flow.is-in .step:nth-child(2) .step__ghost{transition-delay:1.278s}
.steps--flow.is-in .step:nth-child(3) .step__ghost{transition-delay:1.476s}
.steps--flow.is-in .step:nth-child(4) .step__ghost{transition-delay:1.674s}
.steps--flow.is-in .step:nth-child(5) .step__ghost{transition-delay:1.872s}
.steps--flow .step > *:not(.step__ghost){position:relative;z-index:1}
.steps--flow .step:hover .step__ghost{color:rgba(37,39,43,.075)}
/* --- 33. Курс: плотная раскладка ---------------------------------------- */
.training-layout__media img{min-height:560px}
.training-layout__content{justify-content:space-between;gap:0}
.training-layout__content .sec-head{margin-bottom:0}
.training-layout__content .specs{margin:clamp(22px,2.8vw,36px) 0;border-top:1px solid var(--line)}
.training-layout__content .specs__row{
grid-template-columns:minmax(96px,130px) minmax(0,1fr);gap:24px;align-items:center;padding:15px 0;
}
.training-layout__content .specs__row dd{font-size:1.25rem;font-weight:500}
.training-layout__content .specs__row dd em{margin-top:4px;font-size:.8125rem}
/* --- 34. Запись: форма заполняет панель --------------------------------- */
.cta__panel .form{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,1.8vw,24px)}
.cta__panel .field input,.cta__panel .field select{min-height:58px}
.cta__panel .btn{min-height:60px}
@media (max-width:900px){
.cta__panel .form{height:auto;gap:18px}
.training-layout__media img{min-height:380px}
}
/* --- 35. Настройки cookie ------------------------------------------------ */
.cookie__box{display:block}
.cookie__main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,2.4vw,40px);align-items:center}
.cookie__toggle{
background:none;border:0;padding:0 6px;color:var(--white-warm);cursor:pointer;
font-size:.875rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;
text-decoration-color:rgba(255,255,255,.35);transition:color .25s var(--ease);
}
.cookie__toggle:hover{color:var(--sage)}
.cookie__settings{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:10px}
.cookie__settings[hidden]{display:none}
.cookie__opt{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
padding:12px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);
}
.cookie__opt b{display:block;font-size:.8125rem;font-weight:600;margin-bottom:3px}
.cookie__opt span{font-size:.75rem;line-height:1.45;color:rgba(255,255,255,.6)}
.cookie__settings .btn{justify-self:start;min-height:38px;padding:0 18px;font-size:.8125rem}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;flex:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__track{
position:relative;width:38px;height:21px;border-radius:var(--pill);flex:none;
background:rgba(255,255,255,.2);transition:background .25s var(--ease);
}
.switch__track::after{
content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:var(--pill);
background:#fff;transition:transform .25s var(--ease);
}
.switch input:checked + .switch__track{background:var(--sage)}
.switch input:checked + .switch__track::after{transform:translateX(17px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--sage);outline-offset:3px}
.switch__label{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.switch.is-locked{cursor:default;opacity:.65}
@media (max-width:820px){
.cookie__opt{grid-template-columns:1fr;gap:12px}
}
/* --- 36. Страница 404 ---------------------------------------------------- */
.error-head{position:relative;overflow:hidden}
.error-head__code{
position:absolute;right:clamp(-30px,-2vw,-6px);bottom:clamp(-56px,-5vw,-26px);z-index:-1;
font-size:clamp(10rem,30vw,28rem);font-weight:800;line-height:.74;letter-spacing:-.07em;
color:rgba(255,255,255,.05);pointer-events:none;user-select:none;
}
.error-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(30px,4.4vw,80px);align-items:start}
.error-links{display:grid;border-top:1px solid var(--line)}
.error-links a{
position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:center;gap:10px 20px;padding:20px 6px;border-bottom:1px solid var(--line);
transition:padding-left .3s var(--ease),color .25s var(--ease);
}
.error-links a::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--graphite);
transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);
}
.error-links a:hover{padding-left:16px}
.error-links a:hover::after{transform:scaleX(1)}
.error-links__name{grid-column:1;grid-row:1;font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-.02em}
.error-links__note{grid-column:1;grid-row:2;font-size:.8125rem;color:var(--ink-50)}
.error-links svg{grid-column:2;grid-row:1 / span 2;justify-self:end;width:17px;height:17px;color:var(--ink-40);transition:color .25s var(--ease),transform .3s var(--ease)}
.error-links a:hover svg{color:var(--sage-deep);transform:translateX(4px)}
@media (max-width:900px){
.error-head__code{font-size:clamp(7rem,36vw,15rem);bottom:-30px}
.error-grid{grid-template-columns:1fr}
}
/* --- 44. Преимущества: иконка и заголовок в строку ------------------------ */
.section--fade{background:var(--graphite)}
.usp__head{
display:flex;align-items:center;gap:clamp(14px,1.4vw,20px);
padding-bottom:clamp(16px,1.8vw,22px);margin-bottom:clamp(16px,1.8vw,22px);
border-bottom:1px solid rgba(255,255,255,.16);
}
.usp__head .usp__icon{
width:clamp(38px,3vw,46px);height:clamp(38px,3vw,46px);
padding:0;margin:0;background:none;border-radius:0;flex:none;color:var(--sage);
}
.usp__head h3{margin:0;padding:0;border-bottom:0;letter-spacing:-.022em}
.section--fade .usp__item{
background:rgba(255,255,255,.045);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.section--fade .usp__item:hover{
background:rgba(255,255,255,.075);
box-shadow:inset 0 0 0 1px rgba(135,151,132,.55);
}
.section--fade .usp__item p{color:var(--on-dark)}
/* --- 38. Правовые документы --------------------------------------------- */
.legal{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.legal__nav{position:sticky;top:calc(var(--head-h) + 26px)}
.legal__nav .eyebrow{margin-bottom:18px}
.legal__nav ol{counter-reset:ln;display:grid;gap:2px}
.legal__nav li{counter-increment:ln}
.legal__nav a{
display:flex;gap:12px;padding:9px 12px;border-radius:var(--r-sm);
font-size:.875rem;line-height:1.4;color:var(--ink-70);
transition:background .22s var(--ease),color .22s var(--ease);
}
.legal__nav a::before{
content:counter(ln,decimal-leading-zero);flex:none;
font-size:.6875rem;font-weight:700;letter-spacing:.06em;color:var(--ink-40);padding-top:2px;
}
.legal__nav a:hover{background:var(--card-2);color:var(--ink)}
.legal__nav a:hover::before{color:var(--sage-deep)}
.legal__body{display:grid;gap:14px}
.legal__part{
position:relative;padding:clamp(26px,2.8vw,38px) clamp(22px,2.6vw,40px);
background:var(--card-2);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);
scroll-margin-top:calc(var(--head-h) + 24px);
}
.legal__num{
display:block;font-size:.6875rem;font-weight:700;letter-spacing:.16em;
color:var(--sage-deep);margin-bottom:12px;
}
.legal__part h2{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.legal__part .prose{max-width:none}
.legal__part .prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line)}
.legal__part .prose a:hover{color:var(--sage-deep)}
@media (max-width:900px){
.legal{grid-template-columns:1fr}
.legal__nav{position:static}
.legal__nav ol{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
}
@media (max-width:560px){
.legal__nav ol{grid-template-columns:1fr}
}
/* --- 39. Курс: зелёная панель ------------------------------------------- */
/* правило .split идёт ниже по файлу и перебивало колонки — задаём их здесь */
.training-layout{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;
border:0;box-shadow:var(--sh-2);overflow:hidden;border-radius:var(--r);
}
.training-layout__media img{filter:saturate(.85) brightness(.94)}
.training-layout__content{
background:var(--sage-panel);color:#fff;
padding:clamp(34px,4.2vw,64px);
}
.training-layout__content .eyebrow{color:rgba(255,255,255,.72)}
.training-layout__content .eyebrow::before{background:rgba(255,255,255,.62)}
.training-layout__content .h2{color:#fff}
.training-layout__content .lead{color:rgba(255,255,255,.82)}
.training-layout__content .specs{border-top:1px solid rgba(255,255,255,.22)}
.training-layout__content .specs__row{border-bottom:1px solid rgba(255,255,255,.22)}
.training-layout__content .specs__row dt{color:rgba(255,255,255,.6)}
.training-layout__content .specs__row dd{color:#fff}
.training-layout__content .specs__row dd em{color:rgba(255,255,255,.74)}
.training-layout__content .btn--light{--bg:#fff;--fg:var(--graphite);--bd:#fff}
.training-layout__content .btn--light:hover{--bg:var(--graphite);--fg:#fff;--bd:var(--graphite)}
.training-layout__content .btn--outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5)}
.training-layout__content .btn--outline-light:hover{--bg:#fff;--fg:var(--sage-panel);--bd:#fff}
.training-layout__content :focus-visible{outline-color:#fff}
/* --- 40. Плашки с крупной иконкой на фоне -------------------------------- */
.steps--icons .step{padding-bottom:clamp(64px,6vw,88px)}
.steps--icons .step__ghost{
right:-14px;bottom:-14px;font-size:0;line-height:0;
color:rgba(37,39,43,.055);
}
.steps--icons .step__ghost svg{
width:clamp(104px,11vw,158px);height:auto;color:inherit;
}
.steps--icons .step:hover .step__ghost{color:rgba(37,39,43,.085)}
/* --- 41. Контакты: зелёные акценты --------------------------------------- */
.cinfo__icon{background:var(--sage-pale);color:var(--sage-panel)}
.cinfo__row:hover .cinfo__icon{background:var(--sage-panel);color:#fff}
.cinfo__row{transition:box-shadow .25s var(--ease)}
.cinfo__row:hover{box-shadow:0 0 0 1px var(--sage)}
.socials--grid a:hover{background:var(--sage-panel);border-color:var(--sage-panel);color:#fff;box-shadow:0 0 0 1px var(--sage-panel)}
/* --- 42. Блок заявки: наполнение левой колонки -------------------------- */
.cta__facts{display:grid;gap:0;margin:0;border-top:1px solid var(--line-dark)}
.cta__facts > div{
display:grid;grid-template-columns:minmax(110px,.34fr) minmax(0,1fr);gap:20px;align-items:baseline;
padding:15px 0;border-bottom:1px solid var(--line-dark);
}
.cta__facts dt{font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--graphite-light)}
.cta__facts dd{margin:0;font-size:1.0625rem;font-weight:500;color:var(--white-warm)}
.cta__facts dd a:hover{color:var(--sage)}
.cta__msg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px}
.cta__msg span{
width:100%;font-size:.6875rem;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--graphite-light);margin-bottom:2px;
}
.cta__msg a{
font-size:.9375rem;font-weight:600;color:var(--white-warm);
padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.28);
transition:color .25s var(--ease),border-color .25s var(--ease);
}
.cta__msg a:hover{color:var(--sage);border-color:var(--sage)}
@media (max-width:640px){
.cta__facts > div{grid-template-columns:1fr;gap:5px;padding:13px 0}
}
/* --- 43. Модальное окно записи ------------------------------------------ */
.modal__back{background:rgba(14,16,18,.7);backdrop-filter:blur(6px)}
.modal__box{
width:min(560px,100%);
padding:clamp(30px,3.4vw,44px);
background:var(--graphite);color:var(--white-warm);
border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);
box-shadow:0 40px 90px -40px rgba(8,10,12,.85);
}
.modal__box .eyebrow{color:var(--sage);margin-bottom:14px}
.modal__box .eyebrow::before{background:var(--sage)}
.modal__box h3{margin-bottom:10px;color:var(--white-warm)}
.modal__box > p{margin-bottom:26px;font-size:.9375rem;line-height:1.6;color:var(--on-dark)}
.modal__box .form{gap:16px}
.modal__box .field label{color:var(--graphite-light)}
.modal__box .field input,
.modal__box .field select{
min-height:56px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--white-warm);
}
.modal__box .field input::placeholder{color:rgba(255,255,255,.4)}
.modal__box .field input:focus,
.modal__box .field select:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(135,151,132,.22);background:rgba(255,255,255,.1)}
.modal__box .consent{color:var(--graphite-light);align-items:center}
.modal__box .consent a{color:var(--white-warm)}
.modal__box .btn--light{--bg:#fff;--fg:var(--graphite);--bd:#fff;min-height:58px}
.modal__box .btn--light:hover{--bg:var(--sage);--fg:#fff;--bd:var(--sage)}
.modal__box .form__ok{background:rgba(135,151,132,.24);color:var(--sage)}
.modal__close{background:rgba(255,255,255,.09);color:var(--white-warm)}
.modal__close:hover{background:#fff;color:var(--graphite)}
.modal__alt{
display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
}
.modal__alt span{
width:100%;font-size:.6875rem;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--graphite-light);margin-bottom:2px;
}
.modal__alt a{
font-size:.9375rem;font-weight:600;color:var(--white-warm);
padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.28);
transition:color .25s var(--ease),border-color .25s var(--ease);
}
.modal__alt a:hover{color:var(--sage);border-color:var(--sage)}
/* --- 45. Медленное дыхание фона в хиро ----------------------------------- */
@keyframes heroZoom{
0% {transform:scale(1)}
50% {transform:scale(1.085)}
100% {transform:scale(1)}
}
.hero__media img{
transform-origin:58% 55%;
animation:heroZoom 30s cubic-bezier(.42,0,.58,1) infinite;
will-change:transform;
}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none}}
/* --- 46. Курс: характеристики в ряд -------------------------------------- */
.course-stats{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
margin:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px);
border-top:1px solid rgba(255,255,255,.24);
border-bottom:1px solid rgba(255,255,255,.24);
}
.course-stats > div{
display:flex;flex-direction:column;gap:9px;
padding:clamp(20px,2.2vw,28px) clamp(14px,1.6vw,24px) clamp(20px,2.2vw,28px) 0;
}
.course-stats > div + div{
padding-left:clamp(14px,1.6vw,24px);
box-shadow:inset 1px 0 0 rgba(255,255,255,.24);
}
.course-stats dt{
font-size:.625rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.6);
}
.course-stats dd{margin:0;font-size:clamp(1.15rem,1.55vw,1.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.05;white-space:nowrap;color:#fff}
.course-stats em{font-style:normal;font-size:.75rem;line-height:1.4;min-height:2.8em;color:rgba(255,255,255,.72)}
@media (max-width:1100px){
.course-stats{grid-template-columns:1fr;border-bottom:0}
.course-stats > div{padding:16px 0;box-shadow:none!important;border-bottom:1px solid rgba(255,255,255,.24)}
.course-stats > div + div{padding-left:0}
}
/* --- 47. Реквизиты в правовых документах --------------------------------- */
.legal__req{display:grid;gap:0;margin:4px 0 20px;border-top:1px solid var(--line)}
.legal__req > div{
display:grid;grid-template-columns:minmax(140px,.4fr) minmax(0,1fr);gap:18px;
padding:13px 0;border-bottom:1px solid var(--line);
}
.legal__req dt{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.legal__req dd{margin:0;font-size:.9375rem;font-weight:600}
.legal__req dd a{text-decoration:underline;text-underline-offset:2px}
.legal__req > div:last-child{border-bottom:0}
.legal__date{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-50)}
@media (max-width:600px){.legal__req > div{grid-template-columns:1fr;gap:5px}}
/* --- 48. Реквизиты на странице контактов --------------------------------- */
.cinfo--req{grid-template-columns:repeat(2,minmax(0,1fr))}
.cinfo--req .cinfo__row{padding-right:clamp(18px,1.8vw,26px);min-height:0}
.cinfo--req .cinfo__row:hover{box-shadow:0 0 0 1px var(--line)}
.cinfo--req .cinfo__icon{display:none}
@media (max-width:760px){.cinfo--req{grid-template-columns:1fr}}
/* поле выбора: место под стрелку справа */
.field select{
width:100%;min-height:54px;padding:14px 46px 14px 18px;
border:1px solid var(--line);border-radius:var(--r-sm);
background-color:var(--card-2);font-size:1rem;font-weight:600;
appearance:none;-webkit-appearance:none;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 18px center;background-size:12px;
transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field select:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(135,151,132,.2);outline:none}
:is(.section--dark,.panel-dark) .field select,
.modal__box .field select{
background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--white-warm);
background-image:url('data:image/svg+xml;utf8,');
/* сокращённое свойство background выше сбрасывает позицию — задаём заново */
background-repeat:no-repeat;background-position:right 18px center;background-size:12px;
}
/* --- 49. Плитки преимуществ --------------------------------------------- */
.section--fade .usp{gap:clamp(14px,1.6vw,22px)}
.section--fade .usp__item{
padding:clamp(30px,3.2vw,44px);
background:rgba(135,151,132,.28);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.section--fade .usp__item:hover{
background:rgba(135,151,132,.38);
box-shadow:inset 0 0 0 1px rgba(135,151,132,.5);
}
/* иконка и заголовок в одну строку, без разделителя */
.usp__head{
display:flex;align-items:center;gap:clamp(14px,1.4vw,18px);
padding:0;margin:0 0 clamp(16px,1.8vw,22px);border-bottom:0;min-height:46px;
}
.usp__head .usp__icon{width:46px;height:46px;padding:0;margin:0;background:none;border-radius:0;flex:none;color:var(--sage-deep)}
:is(.section--dark,.panel-dark,.section--fade) .usp__head .usp__icon{color:var(--sage)}
.usp__head h3{margin:0;padding:0;border-bottom:0;letter-spacing:-.022em;line-height:1.2}
.section--fade .usp__item p{margin:0;color:var(--on-dark)}
@media (max-width:520px){
.usp__head{gap:12px}
.usp__head .usp__icon{width:38px;height:38px}
}
/* ==========================================================================
50. Журнал и единая система внутренних страниц
========================================================================== */
/* Внутренние страницы продолжают строгую геометрию главной: тонкие линии,
прямые углы и зелёные служебные метки, как разметка в рабочей зоне студии. */
.page--interior .pagehead:not(.article-hero){
position:relative;padding-block:clamp(112px,12vw,176px) clamp(58px,7vw,96px);
background:var(--graphite);color:var(--white-warm);overflow:hidden;
}
.page--interior .pagehead:not(.article-hero)::after{
content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:24px;
max-width:calc(var(--maxw) - var(--pad)*2);height:1px;margin:auto;background:rgba(255,255,255,.16);
}
.page--interior .pagehead:not(.article-hero) .pagehead__inner{align-items:start}
.page--interior .pagehead:not(.article-hero) .h1{max-width:15ch;font-weight:400;letter-spacing:-.045em}
.page--interior .pagehead:not(.article-hero) .lead{max-width:48ch;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.page--interior .pagehead--photo .pagehead__media{opacity:.22}
.page--interior .pagehead--photo::before{background:rgba(27,29,32,.5)}
.page--interior .pagehead .crumbs{color:rgba(255,255,255,.58)}
.page--interior .pagehead .crumbs a:hover{color:#fff}
.page--interior .pagehead .eyebrow{color:var(--sage)}
.page--interior :is(.card,.review,.step,.usp__item,.fact,.promo,.gallery figure,.acc__item,.notice,.panel-dark,.split__media){border-radius:3px}
.page--interior :is(.card,.review,.step,.usp__item,.fact){box-shadow:0 0 0 1px var(--line)}
.page--interior .section--alt{background:#f3f3f2}
.page--interior .sec-head .h2{max-width:20ch}
.page--interior .steps:not(.steps--flow){gap:1px;background:var(--line)}
.page--interior .steps:not(.steps--flow) .step{border-radius:0;box-shadow:none;background:#fff}
.page--interior .usp{gap:1px;background:var(--line)}
.page--interior .usp__item{border-radius:0;box-shadow:none;background:#fff}
.page--interior .gallery{gap:8px}
.page--interior .gallery figure{border-radius:2px;box-shadow:none}
.page--interior .acc{gap:1px;background:var(--line)}
.page--interior .acc__item{border-radius:0;box-shadow:none}
.page--interior .acc__sign{border-radius:3px}
/* Блог на главной */
.home-journal{background:#fff}
.home-journal .sec-head--split>div:last-child{display:grid;justify-items:start;gap:18px}
.text-link,.story-link{
display:inline-flex;align-items:center;gap:12px;padding-bottom:5px;border-bottom:1px solid currentColor;
font-size:.8125rem;font-weight:600;letter-spacing:.04em;transition:color .25s var(--ease),gap .25s var(--ease);
}
.text-link:hover,.story-card:hover .story-link,.feature-story:hover .story-link{color:var(--sage-deep);gap:18px}
.blog-grid{display:grid;gap:1px;background:var(--line)}
.story-card{display:flex;flex-direction:column;min-width:0;background:#fff;overflow:hidden}
.story-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphite)}
.story-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease),opacity .35s var(--ease)}
.story-card__media>span{
position:absolute;top:14px;right:14px;display:grid;place-items:center;min-width:42px;height:42px;padding:0 11px;
background:rgba(27,29,32,.86);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.08em;
}
.story-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.5vw,34px)}
.story-meta{font-size:.65rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sage-deep)}
.story-card h2,.story-card h3{margin:15px 0 12px;font-size:clamp(1.18rem,1.55vw,1.48rem);font-weight:500;line-height:1.24;letter-spacing:-.028em;text-wrap:balance}
.story-card p{margin-bottom:24px;font-size:.875rem;line-height:1.6;color:var(--ink-70)}
.story-card .story-link{margin-top:auto}
.story-card:hover .story-card__media img{transform:scale(1.035);opacity:.9}
/* Каталог блога */
.pagehead--journal{padding-bottom:38px!important}
.journal-index{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(54px,7vw,88px);border-top:1px solid rgba(255,255,255,.18)}
.journal-index span{padding:16px 28px 0 0;margin-right:28px;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.feature-story{display:grid;grid-template-columns:1.35fr .8fr;min-height:520px;background:var(--graphite);color:#fff;overflow:hidden}
.feature-story__media{overflow:hidden}
.feature-story__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.feature-story__body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(34px,5vw,72px)}
.feature-story h2{margin:18px 0;font-size:clamp(2rem,3.3vw,3.3rem);font-weight:400;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.feature-story p{margin-bottom:34px;color:var(--on-dark);font-size:1rem}
.feature-story .story-meta{color:var(--sage)}
.feature-story:hover img{transform:scale(1.025)}
.journal-cta{display:flex;justify-content:space-between;align-items:end;gap:40px}
.journal-cta>div{max-width:720px}
.journal-cta .h2{margin:16px 0}
.journal-cta p{color:var(--on-dark)}
.journal-cta .btn{flex:none}
/* Статья */
.article-hero{padding:calc(var(--head-h) + clamp(44px,5vw,76px)) 0 clamp(46px,6vw,80px);background:var(--graphite);color:#fff}
.article-hero .crumbs{margin-bottom:clamp(38px,5vw,64px);color:rgba(255,255,255,.55)}
.article-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,.72fr);gap:clamp(34px,6vw,92px);align-items:center}
.article-hero__copy h1{margin:20px 0 24px;max-width:16ch;font-size:clamp(2.25rem,4.5vw,4.5rem);font-weight:400;line-height:1.02;letter-spacing:-.052em;text-wrap:balance}
.article-hero__copy .lead{max-width:62ch;color:rgba(255,255,255,.72)}
.article-hero__media{height:min(56vw,610px);min-height:430px;overflow:hidden}
.article-hero__media img{width:100%;height:100%;object-fit:cover}
.article-byline{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.article-byline span+span,.article-byline time{position:relative;padding-left:22px}
.article-byline span+span::before,.article-byline time::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;background:var(--sage)}
.article-section{padding-top:clamp(62px,7vw,104px)}
.article-layout{display:grid;grid-template-columns:220px minmax(0,780px);justify-content:center;gap:clamp(50px,7vw,108px);align-items:start}
.article-toc{position:sticky;top:calc(var(--head-h) + 28px);display:grid;border-top:1px solid var(--ink)}
.article-toc>span{padding:15px 0 13px;font-size:.63rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.article-toc a{padding:12px 0;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-70);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.article-toc a:hover{padding-left:8px;color:var(--sage-deep)}
.article-content{min-width:0}
.article-intro{font-size:clamp(1.2rem,1.8vw,1.52rem);font-weight:400;line-height:1.55;letter-spacing:-.018em;color:var(--ink)}
.article-content section{padding-top:clamp(66px,8vw,104px);scroll-margin-top:110px}
.article-kicker{display:block;margin-bottom:18px;font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--sage-deep)}
.article-content h2{margin-bottom:25px;font-size:clamp(2rem,3.2vw,3.05rem);font-weight:400;line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.article-content h3{margin:34px 0 10px;font-size:clamp(1.15rem,1.55vw,1.42rem);font-weight:500;line-height:1.3;letter-spacing:-.022em}
.article-content p{font-size:1rem;line-height:1.78;color:var(--ink-70)}
.article-content p+p{margin-top:18px}
.article-content section>ul:not([class]){display:grid;gap:9px;margin:20px 0 24px}
.article-content section>ul:not([class]) li{position:relative;padding-left:22px;color:var(--ink-70);font-size:.9375rem}
.article-content section>ul:not([class]) li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--sage)}
.article-note{margin:34px 0;padding:22px 25px;border-left:3px solid var(--sage);background:var(--grey-light);font-size:.9375rem;line-height:1.7;color:var(--ink-70)}
.article-note b{color:var(--ink)}
.article-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:32px 0;background:var(--line)}
.article-columns--three{grid-template-columns:repeat(3,1fr)}
.article-columns>div{padding:clamp(24px,3vw,36px);background:var(--grey-light)}
.article-columns h3{margin:0 0 14px}
.article-columns small{display:block;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:.72rem;color:var(--sage-deep)}
.article-checklist{display:grid;gap:1px;margin:30px 0;background:var(--line)}
.article-checklist li{display:grid;grid-template-columns:minmax(170px,.42fr) 1fr;gap:24px;padding:20px 22px;background:#fff}
.article-checklist b{font-size:.9rem;font-weight:500}
.article-checklist span{font-size:.875rem;line-height:1.6;color:var(--ink-70)}
.article-checklist li::before{content:"✓";grid-row:1;display:none}
.article-steps{display:grid;margin:30px 0;border-top:1px solid var(--line)}
.article-steps li{display:grid;grid-template-columns:62px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.article-steps li>span{display:grid;place-items:center;width:46px;height:46px;background:var(--graphite);color:#fff;font-size:.67rem;letter-spacing:.08em}
.article-steps h3{margin:0 0 8px}
.article-steps--compact li{padding:18px 0}
.article-service{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-top:clamp(72px,9vw,120px);padding:clamp(30px,4.5vw,54px);background:var(--graphite);color:#fff}
.article-service h2{margin:14px 0 12px;font-size:clamp(1.7rem,2.5vw,2.45rem)}
.article-service p{color:var(--on-dark)}
.article-service .btn-row{flex-wrap:nowrap}
/* Инфографика: у каждой статьи собственный способ объяснения */
.wash-risk{display:grid;grid-template-columns:1fr 52px 1fr;align-items:stretch;margin:34px 0;background:var(--graphite);color:#fff}
.wash-risk>div:not(.wash-risk__arrow){display:flex;flex-direction:column;padding:26px}
.wash-risk span{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-light)}
.wash-risk b{margin:14px 0 10px;font-size:1.05rem;font-weight:500}
.wash-risk small{line-height:1.55;color:var(--on-dark)}
.wash-risk__good{border-top:3px solid var(--sage)}
.wash-risk__bad{border-top:3px solid rgba(255,255,255,.28)}
.wash-risk__arrow{display:grid;place-items:center;border-inline:1px solid rgba(255,255,255,.12);color:var(--sage)}
.defect-map{margin:34px 0;border-top:1px solid var(--ink);font-size:.875rem}
.defect-map>div{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.defect-map__head{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40)}
.level{display:inline-flex;align-items:center;gap:8px;color:var(--sage-deep)}
.level::before{content:"";width:26px;height:5px;background:currentColor}
.level--mid{opacity:.75}.level--low{opacity:.5}.level--none{color:var(--ink-40)}
.paint-stack{display:grid;gap:4px;margin:34px 0;padding:30px;background:var(--grey-light)}
.paint-stack>div{display:flex;justify-content:space-between;gap:22px;width:var(--w);padding:13px 16px;background:var(--graphite);color:#fff}
.paint-stack>div:first-child{background:var(--sage-panel)}
.paint-stack b,.paint-stack span{font-size:.82rem;font-weight:500}.paint-stack em{font-size:.72rem;font-style:normal;color:rgba(255,255,255,.62)}
.ceramic-layers{display:grid;gap:4px;margin:34px 0;padding:30px;background:var(--graphite);color:#fff;text-align:center}
.ceramic-layers>div{padding:18px 24px}
.ceramic-layers b,.ceramic-layers span{display:block;font-size:.9rem;font-weight:500}.ceramic-layers em{display:block;margin-top:5px;font-size:.7rem;font-style:normal;color:rgba(255,255,255,.6)}
.ceramic-layers__water{display:flex!important;justify-content:center;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.16)}
.ceramic-layers__water i{width:17px;height:17px;border:2px solid var(--sage);border-radius:50% 50% 52% 48%}
.ceramic-layers__water span{font-size:.75rem!important;color:var(--graphite-light)}
.ceramic-layers__coat{background:var(--sage-panel)}.ceramic-layers__clear{background:#45494d}.ceramic-layers__paint{background:#151719}
.lifetime-scale{display:grid;gap:18px;margin:34px 0;padding:28px;background:var(--grey-light)}
.lifetime-scale>div{display:grid;grid-template-columns:170px 1fr 128px;gap:16px;align-items:center}
.lifetime-scale span{font-size:.78rem}.lifetime-scale b{height:7px;background:var(--line);position:relative}.lifetime-scale b::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--score);background:var(--sage)}.lifetime-scale em{font-size:.67rem;font-style:normal;color:var(--ink-40)}
.care-calendar{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:32px 0;background:var(--line)}
.care-calendar>div{padding:26px;background:#fff}
.care-calendar time{display:block;font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sage-deep)}
.care-calendar b{display:block;margin:12px 0 8px;font-size:1.08rem;font-weight:500}
.care-calendar p{font-size:.82rem}
.cleaning-spectrum{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:1px;margin:34px 0;background:var(--line)}
.cleaning-spectrum>div{display:flex;flex-direction:column;padding:25px;background:var(--grey-light)}
.cleaning-spectrum span{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sage-deep)}
.cleaning-spectrum b{margin:16px 0 8px;font-size:1rem;font-weight:500}.cleaning-spectrum em{font-size:.72rem;font-style:normal;color:var(--ink-50)}
.cabin-map{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:32px 0;background:var(--line)}
.cabin-map__cell{padding:27px;background:#fff}.cabin-map__cell>span{font-size:.65rem;color:var(--sage-deep)}.cabin-map__cell h3{margin:14px 0 8px}.cabin-map__cell p{font-size:.85rem}
.odor-path{display:grid;grid-template-columns:repeat(7,auto);align-items:center;gap:12px;margin:32px 0;padding:26px;background:var(--graphite);color:#fff}
.odor-path>div{display:grid;gap:5px}.odor-path b{font-size:.85rem}.odor-path span{font-size:.68rem;color:var(--graphite-light)}.odor-path i{width:28px;height:1px;background:var(--sage)}
.film-compare{margin:34px 0;border-top:1px solid var(--ink)}
.film-compare>div{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.film-compare__labels{font-size:.62rem!important;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-40)}
.film-compare b{font-weight:500}.meter{color:var(--sage-deep)}.meter--2{opacity:.5}.meter--3{opacity:.7}
.protection-zones{margin:34px 0;padding:30px;background:var(--graphite);color:#fff}
.protection-zones__scale{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;color:var(--graphite-light)}
.protection-zones__scale i{flex:1;height:3px;background:var(--sage)}
.protection-zones__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12)}
.zone{display:flex;justify-content:space-between;gap:20px;padding:17px;background:var(--graphite-deep)}
.zone b{font-size:.82rem;font-weight:500}.zone span{font-size:.7rem;color:var(--graphite-light);text-align:right}.zone--critical{box-shadow:inset 4px 0 var(--sage)}.zone--high{box-shadow:inset 4px 0 rgba(135,151,132,.68)}.zone--medium{box-shadow:inset 4px 0 rgba(135,151,132,.35)}
/* Прайс: навигация и таблицы как единый технический лист */
.page--ceny .section:first-of-type{background:#f5f5f4}
.page--ceny .price-note{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:0;background:var(--line)}
.page--ceny .price-note span{display:block;padding:22px;border-radius:0;background:#fff;box-shadow:none;font-size:.82rem}
.page--ceny .price-note b{display:block;margin-bottom:5px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep)}
.page--ceny .price-anchor{position:sticky;top:var(--head-h);z-index:20;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:24px 0 74px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 28px -26px rgba(27,29,32,.6)}
.page--ceny .price-anchor .chip{justify-content:center;min-height:58px;padding:10px 14px;border-radius:0;background:#fff;box-shadow:none;border-right:1px solid var(--line);font-size:.78rem;text-align:center}
.page--ceny .price-anchor .chip:last-child{border-right:0}
.page--ceny .price-anchor .chip:hover,.page--ceny .price-anchor .chip.is-active{background:var(--graphite);color:#fff}
.page--ceny [data-price-group]{display:grid;grid-template-columns:minmax(190px,.3fr) minmax(0,1fr);column-gap:clamp(36px,5vw,72px);padding:54px 0;border-top:1px solid var(--line);scroll-margin-top:145px!important}
.page--ceny [data-price-group]>.sec-head{grid-column:1;grid-row:1 / span 12;position:sticky;top:calc(var(--head-h) + 88px);align-self:start;margin:0}
.page--ceny [data-price-group]>.sec-head .h2{font-size:clamp(1.8rem,2.7vw,2.65rem)}
.page--ceny [data-price-group]>.sec-head p{font-size:.82rem;line-height:1.65}
.page--ceny [data-price-group]>*:not(.sec-head){grid-column:2}
.page--ceny .ptable-wrap,.page--ceny [data-price-group]>.table-scroll{margin:0 0 18px;padding:0;border-radius:0;background:#fff;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.page--ceny .ptable{font-size:.86rem}
.page--ceny .ptable caption{padding:22px 24px 18px;font-size:1.08rem;font-weight:500;border-bottom:1px solid var(--line)}
.page--ceny .ptable thead th{padding:14px 18px;background:var(--graphite);color:rgba(255,255,255,.58);border:0}
.page--ceny .ptable thead th:first-child{padding-left:24px}
.page--ceny .ptable thead th em{color:rgba(255,255,255,.46)}
.page--ceny .ptable tbody td{padding:16px 18px;border-color:var(--line);font-weight:500}
.page--ceny .ptable tbody td:first-child{padding-left:24px;font-weight:500}
.page--ceny .ptable .row-accent td{background:rgba(135,151,132,.1)}
.page--ceny [data-price-group]>.btn-row{margin:4px 0 0!important;padding-top:12px}
.page--ceny .notice{grid-column:1 / -1;margin-top:30px;border-left:3px solid var(--sage);border-radius:0}
/* Отдельные страницы: спокойные вариации одной сетки */
.page--akcii .promo{border-radius:2px;box-shadow:none;border:1px solid var(--line)}
.page--akcii .promo+.promo{margin-top:6px}
.page--obuchenie .split:first-child{gap:1px;background:var(--line)}
.page--obuchenie .split:first-child>*{background:#fff}
.page--obuchenie .facts{gap:1px;background:var(--line)}
.page--otzyvy .reviews{gap:1px;background:var(--line)}
.page--otzyvy .review{border-radius:0;box-shadow:none}
.page--galereya .gallery figcaption{left:0;right:0;bottom:0;border:0;border-top:1px solid rgba(255,255,255,.18);background:rgba(27,29,32,.88)}
.page--faq .acc{max-width:1080px;margin-inline:auto}
@media (max-width:1100px){
.feature-story{grid-template-columns:1fr}
.feature-story__media{height:440px}
.article-hero__grid{grid-template-columns:1fr}.article-hero__copy h1{max-width:18ch}.article-hero__media{height:55vw;min-height:380px}
.article-layout{grid-template-columns:190px minmax(0,720px);gap:48px}
.article-service{grid-template-columns:1fr}.article-service .btn-row{justify-content:flex-start}
}
@media (max-width:900px){
.article-layout{grid-template-columns:1fr}.article-toc{position:static;display:none}
.page--ceny .price-anchor{position:static;grid-template-columns:repeat(2,1fr)}
.page--ceny .price-anchor .chip{border-bottom:1px solid var(--line)}
.page--ceny [data-price-group]{grid-template-columns:1fr;padding:46px 0}
.page--ceny [data-price-group]>.sec-head{grid-column:1;grid-row:auto;position:static;margin-bottom:28px}
.page--ceny [data-price-group]>*:not(.sec-head){grid-column:1}
.article-columns--three{grid-template-columns:1fr}
.odor-path{grid-template-columns:1fr}.odor-path i{width:1px;height:20px}
}
@media (max-width:700px){
.page--interior .pagehead:not(.article-hero){padding-top:calc(var(--head-h) + 44px)}
.page--interior .pagehead:not(.article-hero) .lead{margin-top:24px}
.feature-story__media{height:300px}
.journal-cta{align-items:stretch;flex-direction:column}.journal-cta .btn{width:100%}
.article-hero__copy h1{font-size:clamp(1.85rem,8.4vw,2.7rem);hyphens:auto;overflow-wrap:break-word}
.article-hero__media{height:68vw;min-height:280px}
.article-byline{display:grid;gap:8px}.article-byline span+span,.article-byline time{padding-left:0}.article-byline span+span::before,.article-byline time::before{display:none}
.article-columns,.care-calendar,.cabin-map{grid-template-columns:1fr}
.article-checklist li{grid-template-columns:1fr;gap:6px}
.article-steps li{grid-template-columns:44px 1fr;gap:14px}.article-steps li>span{width:38px;height:38px}
.article-service .btn-row{flex-direction:column}.article-service .btn{width:100%}
.wash-risk{grid-template-columns:1fr}.wash-risk__arrow{height:42px;border:0;border-block:1px solid rgba(255,255,255,.12);transform:rotate(90deg)}
.defect-map>div,.film-compare>div{grid-template-columns:1.15fr .85fr}.defect-map>div>*:last-child,.film-compare>div>*:last-child{display:none}
.paint-stack>div{width:100%;flex-direction:column;gap:4px}
.ceramic-layers__water{flex-wrap:wrap}
.lifetime-scale>div{grid-template-columns:1fr}.lifetime-scale em{display:none}
.cleaning-spectrum{grid-template-columns:1fr}
.protection-zones__grid{grid-template-columns:1fr}.zone{flex-direction:column;gap:5px}.zone span{text-align:left}
.page--ceny .price-note{grid-template-columns:1fr}
.page--ceny .price-anchor{display:flex;overflow-x:auto;border-inline:0;margin-inline:calc(var(--pad)*-1);padding-left:var(--pad)}
.page--ceny .price-anchor .chip{min-width:160px}
}
@media (max-width:520px){
.header .btn--head{display:none}
.cookie{padding-inline:10px}
.cookie__box{padding:16px}
.cookie__main{grid-template-columns:minmax(0,1fr);gap:14px}
.cookie__actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
.cookie__actions .btn{width:100%;min-width:0}
.cookie__toggle{grid-column:auto;justify-self:start}
}
/* ==========================================================================
51. Финальная дизайн-система внутренних страниц и блога
========================================================================== */
/* Фотошапки: одна композиция для всех содержательных внутренних страниц. */
.page--interior .pagehead.pagehead--photo{
min-height:clamp(500px,49vw,650px);display:flex;align-items:flex-end;
padding-block:calc(var(--head-h) + clamp(72px,8vw,118px)) clamp(62px,7vw,94px);
background:var(--graphite);isolation:isolate;
}
.page--interior .pagehead.pagehead--photo::before{background:rgba(20,22,24,.70)}
.page--interior .pagehead.pagehead--photo::after{display:none}
.page--interior .pagehead.pagehead--photo .pagehead__media{opacity:1}
.page--interior .pagehead.pagehead--photo .pagehead__media img{filter:saturate(.72) contrast(1.05);transform:scale(1.01)}
.page--interior .pagehead.pagehead--photo .pagehead__inner{align-items:end;gap:clamp(34px,7vw,112px)}
.page--interior .pagehead.pagehead--photo .h1{max-width:18ch;font-size:clamp(2.6rem,5.2vw,5rem);line-height:1;letter-spacing:-.052em}
.page--interior .pagehead.pagehead--photo .lead{max-width:48ch;margin:0;padding:0;border:0;color:rgba(255,255,255,.78)}
.page--interior .pagehead.pagehead--photo .crumbs{margin-bottom:clamp(42px,6vw,74px)}
/* Единый радиус: скругляется внешний контур, внутренние стыки остаются ровными. */
.page--interior :is(.card,.review,.step,.usp__item,.fact,.promo,.gallery figure,.acc__item,.notice,.panel-dark,.split__media,.ptable-wrap){border-radius:var(--r)}
.page--interior :is(.cards,.usp,.steps:not(.steps--flow),.reviews,.acc){background:transparent;gap:var(--gap)}
.page--interior :is(.cards,.usp,.steps:not(.steps--flow),.reviews) > :is(.card,.usp__item,.step,.review){box-shadow:0 0 0 1px var(--line);overflow:hidden}
/* Стык фотографии и текста в курсе на главной. */
.page--index .training-layout{background:var(--sage-panel);border-radius:var(--r);overflow:hidden;isolation:isolate}
.page--index .training-layout__media{
min-width:0;height:100%;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden;
}
.page--index .training-layout__media img{
display:block;width:100%;height:100%;min-height:560px;object-fit:cover;border:0!important;border-radius:0!important;
}
.page--index .training-layout__content{border-radius:0!important}
/* Главная: тёмный Pinterest-блок, затем серые отзывы, белые контакты и серая запись. */
.page--index .home-journal{background:var(--graphite);color:#fff}
.page--index .home-journal .sec-head .h2{color:#fff}
.page--index .home-journal :is(.lead,.story-card p){color:var(--on-dark)}
.page--index .home-journal .text-link{color:#fff}
.page--index .home-journal .eyebrow{color:var(--sage)}
.page--index .reviews-section{background:var(--grey-light)}
.page--index .reviews-section .review{background:#fff}
.page--index .home-contacts{background:#fff}
.page--index .home-booking{background:#fff}/* Страница блога: все пять материалов входят в одну цельную композицию. */
/* Шапка статьи: фотография занимает фон, текст собран в одну сильную колонку. */
.page--article .article-hero{
position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(650px,72vh,820px);
padding:calc(var(--head-h) + 54px) 0 clamp(64px,8vw,108px);overflow:hidden;background:var(--graphite);
}
.page--article .article-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(18,20,22,.72)}
.page--article .article-hero__grid{display:block}
.page--article .article-hero__copy{position:relative;z-index:1;max-width:1050px}
.page--article .article-hero__copy h1{max-width:17ch;font-size:clamp(3rem,6.3vw,6.6rem);line-height:.98;letter-spacing:-.06em}
.page--article .article-hero__copy .lead{max-width:70ch;font-size:clamp(1.05rem,1.45vw,1.3rem)}
.page--article .article-hero__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;min-height:0}
.page--article .article-hero__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.08)}
.page--article .article-byline{max-width:780px}/* Услуги: ритм карточек и тот же анимированный сценарий визита, что на главной. */
.page--uslugi .steps--flow{gap:0;background:transparent}
.page--uslugi .steps--flow .step{border-radius:0;box-shadow:none;overflow:hidden}
.page--uslugi .steps--flow .step:first-child{border-radius:var(--r) 0 0 var(--r)}
.page--uslugi .steps--flow .step:last-child{border-radius:0 var(--r) var(--r) 0}
/* Прайс: спокойная правая зона и навигация с точным вертикальным центром. */
.page--ceny .price-anchor{
top:calc(var(--head-h) + 24px);min-height:66px;border-radius:var(--r);overflow:hidden;
box-shadow:0 18px 40px -34px rgba(27,29,32,.75);border-color:rgba(37,39,43,.13);
}
.page--ceny .price-anchor .chip{
min-height:66px;padding:0 16px;align-items:center;justify-content:center;line-height:1.2;border-radius:0;
}
.page--ceny .price-anchor .chip>span{position:relative;top:1px}
.page--ceny [data-price-group]{border-top:0;padding:48px 0 68px}
.page--ceny [data-price-group]+[data-price-group]{border-top:1px solid var(--line)}
.page--ceny [data-price-group]>.sec-head{top:calc(var(--head-h) + 118px)}
.page--ceny .ptable-wrap,.page--ceny [data-price-group]>.table-scroll{
border-radius:var(--r);box-shadow:none;border:1px solid rgba(37,39,43,.12);background:#fff;
}
.page--ceny .ptable caption{padding:24px 26px;background:#fff;border-bottom:1px solid var(--line);font-size:1.18rem}
.page--ceny .ptable thead th{padding-block:16px;background:var(--grey-light);color:var(--ink-50);text-align:center}
.page--ceny .ptable thead th:first-child{text-align:left}
.page--ceny .ptable thead th em{color:var(--ink-40)}
.page--ceny .ptable tbody td{text-align:center;vertical-align:middle}
.page--ceny .ptable tbody td:first-child{text-align:left}
.page--ceny .ptable .row-accent td{background:var(--sage-pale)}
.page--ceny .notice{border-radius:var(--r);border-left:0;box-shadow:inset 3px 0 var(--sage)}
/* Акции, обучение и студия: крупные цельные блоки вместо случайных квадратов. */
.promos-stack{display:grid;gap:16px}
.page--akcii .promo{border-radius:var(--r);border:1px solid rgba(37,39,43,.12);box-shadow:none}
.page--akcii .promo__media{min-height:460px}
.page--akcii .promo__body{padding:clamp(38px,5vw,72px)}
.page--obuchenie .course-intro{
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0;background:var(--sage-panel);
border-radius:var(--r);overflow:hidden;align-items:stretch;box-shadow:0 22px 48px -38px rgba(27,29,32,.6);
}
.page--obuchenie .course-intro .split__media{height:100%;border-radius:0;box-shadow:none}
.page--obuchenie .course-intro .split__media img{height:100%;min-height:600px;aspect-ratio:auto}
.page--obuchenie .course-intro>div:last-child{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,5vw,72px);background:var(--sage-panel);color:#fff}
.page--obuchenie .course-intro .lead,.page--obuchenie .course-intro .fact span{color:rgba(255,255,255,.76)}
.page--obuchenie .course-intro .eyebrow{color:rgba(255,255,255,.75)}
.page--obuchenie .course-intro .facts{grid-template-columns:1fr;gap:0;margin-top:28px!important;background:transparent;border-block:1px solid rgba(255,255,255,.22)}
.page--obuchenie .course-intro .fact{display:grid;grid-template-columns:120px 1fr;padding:15px 0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.17)}
.page--obuchenie .course-intro .fact:last-child{border-bottom:0}
.page--obuchenie .course-intro .fact b{font-size:1.05rem;color:#fff}
.page--obuchenie .course-intro .btn-row{display:grid;grid-template-columns:repeat(2,1fr)}
.page--obuchenie .course-intro .btn{width:100%}
.page--obuchenie .usp{grid-template-columns:repeat(3,1fr);gap:var(--gap);background:transparent}
.page--obuchenie .usp__item{border-radius:var(--r);box-shadow:0 0 0 1px var(--line);background:#fff}
@media (max-width:1100px){
.page--obuchenie .course-intro{grid-template-columns:1fr}
.page--obuchenie .course-intro .split__media img{min-height:420px;max-height:520px}
.page--obuchenie .usp{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.page--interior .pagehead.pagehead--photo{min-height:560px}
.page--interior .pagehead.pagehead--photo .pagehead__inner{grid-template-columns:1fr}
.page--ceny .price-anchor{top:auto}
.page--ceny [data-price-group]>.sec-head{top:auto}
}
@media (max-width:700px){
.page--interior .pagehead.pagehead--photo{min-height:500px;padding-block:calc(var(--head-h) + 62px) 58px}
.page--interior .pagehead.pagehead--photo .h1{font-size:clamp(2.25rem,11vw,3.4rem)}
.page--article .article-hero{min-height:700px;padding-bottom:54px}
.page--article .article-hero__copy h1{font-size:clamp(2.25rem,10.2vw,3.7rem)}
.page--index .training-layout__media img{min-height:360px;max-height:460px}
.page--uslugi .steps--flow .step:first-child,.page--uslugi .steps--flow .step:last-child{border-radius:0}
.page--obuchenie .usp{grid-template-columns:1fr}
.page--obuchenie .course-intro>div:last-child{padding:30px 22px}
.page--ceny .price-anchor{border-radius:0}
}
/* ==========================================================================
52. Выверенный ритм карточек и компактные внутренние страницы
========================================================================== */
/* Компактная фотошапка: контент остаётся в первом экране и не проваливается вниз. */
.page--interior .pagehead.pagehead--photo{
min-height:clamp(410px,40vw,520px);
padding-block:calc(var(--head-h) + clamp(30px,4vw,52px)) clamp(38px,4.5vw,54px);
}
.page--interior .pagehead.pagehead--photo .crumbs{margin-bottom:clamp(24px,3.5vw,38px)}
.page--interior .pagehead.pagehead--photo .pagehead__inner{gap:clamp(24px,5vw,76px)}
.page--interior .pagehead.pagehead--photo .h1{font-size:clamp(2.35rem,4.3vw,4.15rem);max-width:17ch}
.page--obuchenie .pagehead .h1{max-width:13ch;font-size:clamp(2.4rem,4.5vw,4.35rem)}
.page--blog .pagehead .h1{max-width:12ch}
/* Главная: разноразмерная сетка статей, склеенная белыми линиями.
Скругление — только по внешнему контуру группы. */
.page--index .home-journal .sec-head{align-items:end}
.page--index .home-journal .sec-head>div:last-child{display:block}/* низкие карточки — горизонтальные: фото слева, текст справа *//* горизонтальные карточки: текст по центру, ссылка сразу под ним */
.journal-all{display:flex;justify-content:center;margin-top:clamp(28px,3vw,40px)}
.journal-all .btn{min-width:min(100%,320px)}/* Каталог блога: один крупный материал и спокойная сетка остальных. */
.blog-catalog__head{
display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,80px);
align-items:end;margin-bottom:clamp(30px,3.4vw,46px);padding-bottom:clamp(22px,2.4vw,32px);
border-bottom:1px solid var(--line);
}
.blog-catalog__head .eyebrow{grid-column:1 / -1;margin:0 0 14px}
.blog-catalog__head .h2{margin:0;max-width:15ch}
.blog-catalog__head p{margin:0;max-width:54ch;color:var(--ink-70)}/* Услуги: пять направлений и карточка подбора занимают одинаковые ячейки. */
.service-extra-actions{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;margin:clamp(30px,3.4vw,44px) auto 0;
}
.service-extra-actions .btn{width:100%}
/* Обучение: ровная вводная карточка, перелистываемые преимущества и ясная программа. */
.page--obuchenie .course-intro{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.page--obuchenie .course-intro>div:last-child{padding:clamp(36px,4.5vw,64px)}
.page--obuchenie .course-intro .facts{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0;
margin-top:26px!important;border:1px solid rgba(255,255,255,.23);border-radius:var(--r);overflow:hidden;
}
.page--obuchenie .course-intro .fact{
display:flex!important;flex-direction:column;justify-content:flex-start;gap:8px;min-height:132px;
padding:20px 18px;border:0;border-right:1px solid rgba(255,255,255,.18);border-radius:0!important;
}
.page--obuchenie .course-intro .fact:last-child{border-right:0}
.page--obuchenie .course-intro .fact b{min-height:2.3em;display:flex;align-items:flex-start;font-size:1.05rem;line-height:1.15}
.page--obuchenie .course-intro .fact span{line-height:1.45}
.page--obuchenie .course-intro .btn:first-child{background:var(--graphite);color:#fff}
.page--obuchenie .course-intro .btn:last-child{background:#fff;color:var(--ink);border-color:#fff}
.course-benefits{padding-bottom:clamp(80px,10vw,150px)}
.course-outcomes .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:outcome;background:transparent}
.course-outcomes .step{
counter-increment:outcome;position:relative;min-height:270px;padding:clamp(34px,4vw,52px);border-radius:var(--r)!important;
background:#fff;box-shadow:0 0 0 1px var(--line)!important;overflow:hidden;
}
.course-outcomes .step::after{
content:"0" counter(outcome);position:absolute;right:24px;bottom:-18px;font-size:clamp(5rem,10vw,9rem);
font-weight:300;line-height:1;color:rgba(135,151,132,.14);letter-spacing:-.08em;
}
.course-outcomes .step>*{position:relative;z-index:1}.course-outcomes .step .h3{max-width:18ch}
.course-program{background:var(--graphite)!important;color:#fff}
.course-program .sec-head .h2{color:#fff}.course-program .sec-head .lead{color:var(--on-dark)}
.course-program .acc{display:grid;gap:10px;background:transparent;counter-reset:program-day}
.course-program .acc__item{
counter-increment:program-day;border:1px solid rgba(255,255,255,.2);border-radius:var(--r)!important;
background:#fff;color:var(--ink);overflow:hidden;
}
.course-program .acc__btn{min-height:78px;padding:20px clamp(20px,3vw,34px);gap:18px}
.course-program .acc__btn>span:first-child{display:flex;align-items:center;gap:18px}
.course-program .acc__btn>span:first-child::before{
content:"0" counter(program-day);color:var(--sage-deep);font-size:.72rem;letter-spacing:.1em;
}
.course-program .acc__item.is-open{box-shadow:inset 4px 0 var(--sage)}
.course-teacher .split{align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.course-teacher .split>div:first-child{padding:clamp(36px,5vw,66px)}
.course-teacher .split__media{border-radius:0!important;min-height:680px}
.course-teacher .split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.course-teacher .prose ul{display:grid;gap:0;margin-top:18px;border-top:1px solid var(--line)}
.course-teacher .prose li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line)}
.course-reviews .reviews{align-items:stretch}.course-reviews .review{background:#fff}
.course-reviews__all{justify-content:center;margin-top:32px}.course-reviews__all .btn{min-width:min(100%,300px)}
.course-booking .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-dark)}
.course-booking .fact{display:flex;min-height:120px;flex-direction:column;justify-content:flex-start;gap:9px;padding:20px 16px;border-radius:0;background:rgba(255,255,255,.06)}
.course-booking .fact b{font-size:1rem;line-height:1.2;color:#fff}.course-booking .fact span{line-height:1.45;color:var(--on-dark)}/* Страница студии и клиентские преимущества используют тот же ритм, что дополнительные услуги. */
@media (max-width:1100px){
.page--obuchenie .course-intro{grid-template-columns:1fr}
}
@media (max-width:900px){
.page--interior .pagehead.pagehead--photo{min-height:460px}
.blog-catalog__head{grid-template-columns:1fr}
.course-teacher .split{grid-template-columns:1fr}.course-teacher .split__media{min-height:440px;order:-1}
}
@media (max-width:700px){
.page--interior .pagehead.pagehead--photo{min-height:430px;padding-block:calc(var(--head-h) + 34px) 38px}
.page--interior .pagehead.pagehead--photo .crumbs{margin-bottom:22px}
.service-extra-actions{grid-template-columns:1fr;max-width:none}
.page--obuchenie .course-intro .facts{grid-template-columns:1fr!important}
.page--obuchenie .course-intro .fact{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
.page--obuchenie .course-intro .fact:last-child{border-bottom:0}
.page--obuchenie .course-intro .fact b{min-height:0}
.course-booking .facts{grid-template-columns:1fr}
.course-booking .fact{min-height:0}
}
/* ── Скругления в статьях: блоки сгруппированы, углы только по внешнему контуру ── */
.page--article :is(.article-columns,.article-checklist,.care-calendar,.cabin-map,.film-compare,.paint-stack){
border-radius:var(--r);overflow:hidden;
}
.page--article .article-note{border-radius:var(--r);overflow:hidden}
.page--article .article-service{border-radius:var(--r)}
.page--article .paint-stack>div{border-radius:var(--r-sm)}
.page--article .article-faq h3{margin-top:26px}
.page--article .article-hero .eyebrow{color:#fff;opacity:.9}
/* ==========================================================================
40. Компактные шапки внутренних страниц
========================================================================== */
.page--interior .pagehead.pagehead--photo{
min-height:clamp(340px,32vw,430px);
padding-block:calc(var(--head-h) + clamp(30px,3.4vw,48px)) clamp(34px,3.6vw,50px);
}
.page--interior .pagehead.pagehead--photo::before{background:rgba(20,22,24,.66)}
.page--interior .pagehead.pagehead--photo .crumbs{margin-bottom:clamp(20px,2.4vw,30px)}
.page--interior .pagehead.pagehead--photo .pagehead__inner{
align-items:end;gap:clamp(26px,4vw,64px);
}
.page--interior .pagehead.pagehead--photo .h1{
max-width:16ch;font-size:clamp(2.3rem,4.1vw,3.9rem);line-height:1.02;
}
.page--interior .pagehead.pagehead--photo h1{margin-top:12px}
.page--interior .pagehead.pagehead--photo .lead{max-width:46ch;padding-bottom:6px}
.page--article .article-hero{
min-height:clamp(400px,38vw,520px);
padding-block:calc(var(--head-h) + clamp(30px,3.4vw,48px)) clamp(36px,4vw,56px);
}
.page--article .article-hero .crumbs{margin-bottom:clamp(20px,2.4vw,30px)}
.page--article .article-hero__copy h1{font-size:clamp(2.2rem,4.4vw,4.2rem);margin:14px 0 18px}
@media (max-width:700px){
.page--interior .pagehead.pagehead--photo{min-height:300px;padding-block:calc(var(--head-h) + 26px) 32px}
.page--article .article-hero{min-height:360px}
}
/* ==========================================================================
41. Плитки преимуществ: матовая плёнка с приглушёнными зелёными бликами
========================================================================== */
.section--fade .usp__item{
position:relative;isolation:isolate;overflow:hidden;
background:#22252a;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.section--fade .usp__item::before{
content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(58% 62% at 18% 12%, rgba(135,151,132,.30) 0%, rgba(135,151,132,0) 68%),
radial-gradient(52% 58% at 88% 86%, rgba(108,122,105,.24) 0%, rgba(108,122,105,0) 70%);
transition:opacity .45s var(--ease);
}
.section--fade .usp__item:nth-child(2)::before{
background:
radial-gradient(56% 60% at 86% 16%, rgba(135,151,132,.28) 0%, rgba(135,151,132,0) 70%),
radial-gradient(46% 54% at 12% 84%, rgba(108,122,105,.20) 0%, rgba(108,122,105,0) 72%);
}
.section--fade .usp__item:nth-child(3)::before{
background:
radial-gradient(60% 64% at 50% 108%, rgba(135,151,132,.30) 0%, rgba(135,151,132,0) 66%),
radial-gradient(40% 46% at 8% 18%, rgba(108,122,105,.19) 0%, rgba(108,122,105,0) 74%);
}
.section--fade .usp__item:nth-child(4)::before{
background:
radial-gradient(58% 60% at 92% 52%, rgba(135,151,132,.27) 0%, rgba(135,151,132,0) 68%),
radial-gradient(44% 50% at 24% 6%, rgba(108,122,105,.19) 0%, rgba(108,122,105,0) 72%);
}
/* матовая плёнка поверх бликов */
.section--fade .usp__item::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(34,37,42,.16) 0%,rgba(34,37,42,.34) 100%);
backdrop-filter:blur(3px);
}
.section--fade .usp__item:hover{box-shadow:inset 0 0 0 1px rgba(135,151,132,.34)}
.section--fade .usp__item:hover::before{opacity:1.15}
/* тонкая линия между заголовком и описанием */
.section--fade .usp__item p{
margin:0;padding-top:clamp(16px,1.8vw,22px);
border-top:1px solid rgba(255,255,255,.13);color:var(--on-dark);
}
.section--fade .usp__head{margin-bottom:clamp(16px,1.8vw,22px)}
/* ==========================================================================
42. Сетка статей: ритм широких и узких карточек
========================================================================== */
.blog-grid--rhythm{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:clamp(14px,1.4vw,20px);background:transparent;
}
.blog-grid--rhythm .story-card{
display:flex;flex-direction:column;min-width:0;
border-radius:var(--r);overflow:hidden;background:#fff;color:var(--ink);
box-shadow:0 0 0 1px var(--line);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.blog-grid--rhythm .story-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.blog-grid--rhythm .story-card:nth-child(1){
grid-column:span 7;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);min-height:404px;
}
.blog-grid--rhythm .story-card:nth-child(2){grid-column:span 5;min-height:404px}
.blog-grid--rhythm .story-card:nth-child(n+3){grid-column:span 4;min-height:472px}
.blog-grid--rhythm .story-card__media{aspect-ratio:auto;min-height:0;height:auto;flex:none}
.blog-grid--rhythm .story-card:nth-child(1) .story-card__media{height:100%}
.blog-grid--rhythm .story-card:nth-child(2) .story-card__media{height:54%}
.blog-grid--rhythm .story-card:nth-child(n+3) .story-card__media{height:46%}
.blog-grid--rhythm .story-card__body{
display:flex;flex:1;flex-direction:column;align-items:flex-start;min-height:0;
padding:clamp(22px,2.2vw,32px);
}
.blog-grid--rhythm .story-card:nth-child(1) .story-card__body{justify-content:center}
.blog-grid--rhythm .story-card:nth-child(1) .story-link{margin-top:clamp(16px,1.6vw,22px)}
.blog-grid--rhythm .story-card :is(h2,h3){
margin:12px 0 10px;font-size:clamp(1.12rem,1.35vw,1.34rem);font-weight:500;line-height:1.26;letter-spacing:-.026em;
}
.blog-grid--rhythm .story-card:nth-child(1) :is(h2,h3){font-size:clamp(1.4rem,1.95vw,1.9rem)}
.blog-grid--rhythm .story-card p{margin-bottom:20px;font-size:.875rem;line-height:1.62;color:var(--ink-70)}
.blog-grid--rhythm .story-card .story-link{margin-top:auto}
.blog-grid--rhythm .story-card .story-meta{color:var(--sage-deep)}
/* на тёмной секции главной карточки остаются белыми, окантовка светлая */
.page--index .home-journal .blog-grid--rhythm .story-card{box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.page--index .home-journal .blog-grid--rhythm .story-card p{color:var(--ink-70)}
@media (max-width:1100px){
.blog-grid--rhythm{grid-template-columns:repeat(6,minmax(0,1fr))}
.blog-grid--rhythm .story-card:nth-child(1){grid-column:span 6;min-height:340px}
.blog-grid--rhythm .story-card:nth-child(2){grid-column:span 6;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.blog-grid--rhythm .story-card:nth-child(2) .story-card__media{height:100%}
.blog-grid--rhythm .story-card:nth-child(n+3){grid-column:span 3;min-height:440px}
}
@media (max-width:760px){
.blog-grid--rhythm .story-card:nth-child(n){
grid-column:1 / -1;display:flex;flex-direction:column;min-height:0;
}
.blog-grid--rhythm .story-card__media{height:auto!important;aspect-ratio:16/10}
.blog-grid--rhythm .story-card:nth-child(1) :is(h2,h3){font-size:1.35rem}
}
/* Страница блога — светлая: тёмным остаётся только подвал. */
.page--blog .blog-catalog{background:#fff}
.page--blog .journal-cta{align-items:center}
.page--blog .journal-cta p{color:var(--ink-70)}
.page--blog .journal-cta .h2{margin:14px 0 10px}
/* ==========================================================================
43. Услуги: сетка направлений и плашки отдельных работ
========================================================================== */
.srv-grid{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.4vw,20px);
}
.srv-card{
display:flex;flex-direction:column;min-width:0;background:#fff;color:var(--ink);
border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line);
transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.srv-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),var(--sh-3)}
.srv-card:nth-child(1){grid-column:span 7;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
.srv-card:nth-child(2){grid-column:span 5}
.srv-card:nth-child(n+3){grid-column:span 4}
.srv-card__media{position:relative;overflow:hidden;background:var(--graphite);aspect-ratio:16/11}
.srv-card:nth-child(1) .srv-card__media{aspect-ratio:auto;height:100%;min-height:420px}
.srv-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.srv-card:hover .srv-card__media img{transform:scale(1.045)}
.srv-card__index{
position:absolute;left:14px;top:14px;display:grid;place-items:center;min-width:38px;height:30px;
padding:0 10px;border-radius:var(--r-sm);background:rgba(20,22,24,.66);backdrop-filter:blur(6px);
color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.08em;
}
.srv-card__body{display:flex;flex:1;flex-direction:column;padding:clamp(22px,2.2vw,32px)}
.srv-card:nth-child(1) .srv-card__body{justify-content:center}
.srv-card__body h3{margin:0 0 12px}
.srv-card__body>p{margin:0 0 18px;font-size:.9rem;line-height:1.62;color:var(--ink-70)}
.srv-card__list{display:grid;gap:9px;margin:0 0 22px;padding:0;list-style:none}
.srv-card__list li{
position:relative;padding-left:20px;font-size:.82rem;line-height:1.5;color:var(--ink-70);
}
.srv-card__list li::before{
content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:2px;
background:var(--sage);opacity:.85;
}
.srv-card__foot{
display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:auto;
padding-top:16px;border-top:1px solid var(--line);
}
.srv-card__price{display:flex;align-items:baseline;gap:7px;font-size:1.16rem;font-weight:500;letter-spacing:-.02em}
.srv-card__price>span{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.srv-card .link svg{width:16px;height:16px}
.srv-cta{
grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
gap:clamp(24px,3vw,54px);align-items:center;padding:clamp(28px,3.4vw,48px);
border-radius:var(--r);color:#fff;
background:var(--graphite);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.srv-cta .h3{margin:14px 0 12px;font-size:clamp(1.4rem,2vw,2rem);font-weight:400;letter-spacing:-.03em}
.srv-cta p{margin:0;max-width:58ch;color:rgba(255,255,255,.8)}
.srv-cta .btn-row{display:grid;grid-template-columns:1fr;gap:12px}
.srv-cta .btn{width:100%}
/* отдельные работы */
.extras-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.4vw,20px)}
.extra{
display:flex;flex-direction:column;padding:clamp(26px,2.6vw,38px);
background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);
transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.extra:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.extra__tag{
align-self:flex-start;margin-bottom:18px;padding:6px 13px;border-radius:var(--pill);
background:rgba(135,151,132,.16);color:var(--sage-deep);
font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.extra h3{margin:0 0 12px}
.extra p{margin:0 0 26px;font-size:.9rem;line-height:1.62;color:var(--ink-70)}
.extra__foot{
display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-top:auto;
padding-top:18px;border-top:1px solid var(--line);
}
.extra__price{display:flex;align-items:baseline;gap:7px;font-size:1.32rem;font-weight:500;letter-spacing:-.022em}
.extra__price>span{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.extra__note{font-size:.78rem;line-height:1.4;text-align:right;color:var(--ink-40)}
.service-extra-actions{margin-top:clamp(24px,2.6vw,36px)}
.service-extra-actions .btn{min-width:min(100%,260px)}
@media (max-width:1100px){
.srv-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.srv-card:nth-child(1){grid-column:span 6;min-height:0}
.srv-card:nth-child(1) .srv-card__media{min-height:340px}
.srv-card:nth-child(2){grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.srv-card:nth-child(2) .srv-card__media{aspect-ratio:auto;height:100%}
.srv-card:nth-child(n+3){grid-column:span 3}
.srv-cta{grid-template-columns:1fr}
}
@media (max-width:760px){
.srv-card:nth-child(n){grid-column:1 / -1;display:flex;flex-direction:column}
.srv-card:nth-child(n) .srv-card__media{aspect-ratio:16/10;height:auto;min-height:0}
.extras-grid{grid-template-columns:1fr}
.srv-cta .btn-row{grid-template-columns:1fr}
.extra__foot{flex-direction:column;align-items:flex-start;gap:6px}
.extra__note{text-align:left}
}
/* ==========================================================================
44. Прайс: единая логика выделения строк
========================================================================== */
.ptable tbody td,.ptable thead th{vertical-align:middle}
.ptable thead th{vertical-align:middle}
.row-name{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px}
.row-badge{
display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:var(--pill);
border:1px solid rgba(135,151,132,.55);color:var(--sage-deep);background:transparent;
font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.row-badge--package{border-color:transparent;background:var(--sage-deep);color:#fff}
.ptable .row-package td{background:rgba(135,151,132,.14)}
.ptable .row-package td:first-child{font-weight:600}
.ptable .row-hit td{background:transparent}
.price-legend{
display:flex;align-items:center;flex-wrap:wrap;gap:10px;
margin:0 0 clamp(34px,4vw,54px);font-size:.82rem;color:var(--ink-50);
}
.page--ceny .ptable .row-package td{background:rgba(135,151,132,.14)}
.page--ceny .ptable .row-hit td{background:transparent}
/* Прайс: карточки групп и легенда в общей геометрии страницы */
.page--ceny .price-note{
grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,16px);
background:transparent;margin-bottom:clamp(16px,1.6vw,22px);
}
.page--ceny .price-note span{
padding:20px 24px;border-radius:var(--r);background:#fff;
box-shadow:0 0 0 1px var(--line);
}
.page--ceny .price-anchor{
margin:0 0 clamp(16px,1.8vw,24px);border-radius:var(--r);overflow:hidden;
}
.page--ceny .price-legend{margin:0 0 clamp(40px,4.4vw,64px);padding-left:2px}
/* ==========================================================================
45. Акции: заметные метки и крупные номера в карточках
========================================================================== */
.promo__flag{
position:absolute;left:clamp(16px,1.6vw,22px);top:clamp(16px,1.6vw,22px);z-index:2;
display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:var(--pill);
background:var(--sage-deep);color:#fff;
font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
box-shadow:0 10px 24px -14px rgba(20,22,24,.9);
}
.promo__flag--soft{background:rgba(20,22,24,.72);backdrop-filter:blur(8px)}
.promo__save{
display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--pill);
background:rgba(135,151,132,.22);color:var(--sage);
font-size:.74rem;font-weight:600;letter-spacing:.02em;
}
.promo--light .promo__save{background:rgba(135,151,132,.18);color:var(--sage-deep)}
/* крупные номера, слегка обрезанные краем карточки */
.steps--ghosted .step{position:relative;overflow:hidden}
.steps--ghosted .step>*:not(.step__ghost){position:relative;z-index:1}
.steps--ghosted .step__ghost{
position:absolute;right:-12px;bottom:-.16em;z-index:0;pointer-events:none;
font-size:clamp(5.4rem,7.6vw,8.6rem);font-weight:800;line-height:.78;letter-spacing:-.07em;
color:rgba(37,39,43,.06);
opacity:0;transform:translateY(18px) scale(.95);transform-origin:100% 100%;
transition:opacity 1.1s var(--ease),transform 1.1s cubic-bezier(.19,.72,.24,1),color .3s var(--ease);
}
.steps--ghosted.is-in .step__ghost{opacity:1;transform:translateY(0) scale(1)}
.steps--ghosted.is-in .step:nth-child(1) .step__ghost{transition-delay:.16s}
.steps--ghosted.is-in .step:nth-child(2) .step__ghost{transition-delay:.30s}
.steps--ghosted.is-in .step:nth-child(3) .step__ghost{transition-delay:.44s}
.steps--ghosted.is-in .step:nth-child(4) .step__ghost{transition-delay:.58s}
.steps--ghosted.is-in .step:nth-child(5) .step__ghost{transition-delay:.72s}
.steps--ghosted.is-in .step:nth-child(6) .step__ghost{transition-delay:.86s}
.steps--ghosted .step:hover .step__ghost{color:rgba(108,122,105,.14)}
:is(.section--dark,.panel-dark) .steps--ghosted .step__ghost{color:rgba(255,255,255,.07)}
/* ==========================================================================
46. Обучение: номера в плитках, программа курса, преподаватель
========================================================================== */
.usp--ghosted .usp__item{position:relative;overflow:hidden}
.usp--ghosted .usp__item>*:not(.step__ghost){position:relative;z-index:1}
.usp--ghosted .usp__item .step__ghost{
position:absolute;right:-12px;bottom:-.18em;z-index:0;pointer-events:none;
font-size:clamp(5rem,7vw,8rem);font-weight:800;line-height:.78;letter-spacing:-.07em;
color:rgba(37,39,43,.06);
opacity:0;transform:translateY(18px) scale(.95);transform-origin:100% 100%;
transition:opacity 1.1s var(--ease),transform 1.1s cubic-bezier(.19,.72,.24,1),color .3s var(--ease);
}
.usp--ghosted.is-in .usp__item .step__ghost{opacity:1;transform:translateY(0) scale(1)}
.usp--ghosted.is-in .usp__item:nth-child(1) .step__ghost{transition-delay:.14s}
.usp--ghosted.is-in .usp__item:nth-child(2) .step__ghost{transition-delay:.26s}
.usp--ghosted.is-in .usp__item:nth-child(3) .step__ghost{transition-delay:.38s}
.usp--ghosted.is-in .usp__item:nth-child(4) .step__ghost{transition-delay:.50s}
.usp--ghosted.is-in .usp__item:nth-child(5) .step__ghost{transition-delay:.62s}
.usp--ghosted.is-in .usp__item:nth-child(6) .step__ghost{transition-delay:.74s}
.usp--ghosted .usp__item:hover .step__ghost{color:rgba(108,122,105,.15)}
/* программа курса: карточки дней со строгой сеткой внутри */
.acc--program{gap:10px}
.acc--program .acc__btn{
align-items:center;gap:clamp(16px,2vw,28px);
padding:clamp(18px,1.9vw,24px) clamp(18px,2.4vw,32px);
}
.course-program .acc__btn>span:first-child::before{content:none}
.acc--program .acc__label{
display:grid;grid-template-columns:minmax(86px,104px) minmax(0,1fr);
gap:clamp(14px,2vw,28px);align-items:center;width:100%;
}
.acc--program .acc__day{
display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;
border-radius:var(--pill);background:rgba(135,151,132,.16);color:var(--sage-deep);
font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.acc--program .acc__item.is-open .acc__day{background:var(--sage-deep);color:#fff}
.acc--program .acc__title{font-size:clamp(1rem,1.28vw,1.16rem);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.acc--program .acc__inner>div{padding:0 clamp(18px,2.4vw,32px) 28px clamp(118px,12vw,152px)}
.acc--program .acc__cols{gap:clamp(22px,3vw,56px)}
.acc--program .acc__cols>div+div{padding-left:clamp(22px,3vw,44px);border-left:1px solid var(--line)}
.acc--program .acc__cols h4{
margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);
font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);
}
@media (max-width:760px){
.acc--program .acc__label{grid-template-columns:1fr;gap:10px}
.acc--program .acc__inner>div{padding-left:clamp(16px,1.8vw,24px)}
.acc--program .acc__cols{grid-template-columns:1fr}
.acc--program .acc__cols>div+div{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid var(--line)}
}/* Обучение: номера жирнее и слегка уходят за край карточки */
.course-outcomes .step::after{
right:-12px;bottom:-.18em;
font-size:clamp(5.4rem,9vw,9rem);font-weight:800;letter-spacing:-.075em;
color:rgba(37,39,43,.07);
}
.course-outcomes .step:hover::after{color:rgba(108,122,105,.16)}
/* Обучение: карточка преподавателя в один экран */
.teacher{
display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(18px,2vw,28px);align-items:stretch;
}
.teacher__media{border-radius:var(--r);overflow:hidden;background:var(--graphite)}
.teacher__media img{width:100%;height:100%;min-height:0;object-fit:cover}
.teacher__body{
display:flex;flex-direction:column;justify-content:center;
padding:clamp(28px,3vw,44px);border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);
}
.teacher__body .h2{margin:12px 0 12px;font-size:clamp(1.8rem,2.6vw,2.6rem)}
.teacher__body .lead{margin:0;max-width:60ch;font-size:.95rem}
.teacher__facts{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
margin:clamp(20px,2.2vw,28px) 0;padding:clamp(16px,1.6vw,20px) 0;
border-block:1px solid var(--line);
}
.teacher__facts b{display:block;font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:600;letter-spacing:-.02em}
.teacher__facts span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)}
.teacher__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.teacher__cols>div+div{padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
.teacher__cols h3{
margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);
font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);
}
.teacher__cols ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.teacher__cols li{position:relative;padding-left:16px;font-size:.82rem;line-height:1.5;color:var(--ink-70)}
.teacher__cols li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;border-radius:2px;background:var(--sage)}
@media (max-width:1000px){
.teacher{grid-template-columns:1fr}
.teacher__media{min-height:340px}
}
@media (max-width:640px){
.teacher__facts{grid-template-columns:1fr;gap:10px}
.teacher__cols{grid-template-columns:1fr}
.teacher__cols>div+div{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid var(--line)}
}
/* ==========================================================================
47. Карточки статей: внутренняя структура и мягкое появление
========================================================================== */
.blog-grid--rhythm .story-card__body{gap:0}
.blog-grid--rhythm .story-card .story-meta{
display:inline-flex;align-items:center;gap:8px;
color:var(--sage-panel);font-size:.66rem;font-weight:700;letter-spacing:.14em;
}
.blog-grid--rhythm .story-card .story-meta::before{
content:"";width:16px;height:1px;background:var(--sage);flex:none;
}
.blog-grid--rhythm .story-card :is(h2,h3){
margin:14px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line);width:100%;
}
.blog-grid--rhythm .story-card p{margin:14px 0 20px}
.blog-grid--rhythm .story-card .story-link{
display:flex;align-items:center;justify-content:space-between;width:100%;
margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
font-size:.82rem;font-weight:600;letter-spacing:.01em;
}
.blog-grid--rhythm .story-card:hover .story-link{gap:0;color:var(--sage-deep)}
.blog-grid--rhythm .story-card:nth-child(1) .story-link{margin-top:clamp(18px,1.8vw,26px)}
/* плавное, растянутое появление вместо резкого скачка */
.js .blog-grid--rhythm .story-card{
opacity:0;transform:translateY(38px) scale(.986);
transition:opacity 1.05s cubic-bezier(.19,.72,.24,1),transform 1.15s cubic-bezier(.19,.72,.24,1);
}
.js .blog-grid--rhythm .story-card.is-in{opacity:1;transform:none}
.blog-grid--rhythm .story-card:nth-child(2){transition-delay:.09s}
.blog-grid--rhythm .story-card:nth-child(3){transition-delay:.04s}
.blog-grid--rhythm .story-card:nth-child(4){transition-delay:.13s}
.blog-grid--rhythm .story-card:nth-child(5){transition-delay:.22s}
@media (prefers-reduced-motion:reduce){
.js .blog-grid--rhythm .story-card{opacity:1;transform:none}
}
/* ==========================================================================
48. Обучение: стопка преимуществ с диагональным «снятием плёнки»
========================================================================== */
.course-stack{position:relative}
.course-stack__viewport{
position:relative;display:grid;gap:clamp(14px,1.6vw,20px);
}
.course-card{
position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
min-height:clamp(360px,44vw,520px);overflow:hidden;border-radius:var(--r);
background:var(--graphite);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.course-card__media{position:relative;overflow:hidden;background:#15171a}
.course-card__media img{width:100%;height:100%;object-fit:cover}
.course-card__body{
position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
padding:clamp(30px,4vw,64px);
}
.course-card__tag{
align-self:flex-start;margin-bottom:clamp(16px,1.8vw,22px);padding:6px 13px;border-radius:var(--pill);
background:rgba(135,151,132,.2);color:var(--sage);
font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.course-card__body .h3{
margin:0 0 clamp(16px,1.8vw,22px);padding-bottom:clamp(16px,1.8vw,22px);
border-bottom:1px solid rgba(255,255,255,.14);
font-size:clamp(1.55rem,2.8vw,2.7rem);font-weight:400;letter-spacing:-.035em;line-height:1.08;
}
.course-card__body p{margin:0;max-width:46ch;color:var(--on-dark);font-size:1rem;line-height:1.7}
.course-card__num{
position:absolute;right:-2.2%;bottom:-14%;z-index:1;pointer-events:none;
font-size:clamp(11rem,26vw,26rem);font-weight:800;line-height:.72;letter-spacing:-.08em;
color:rgba(255,255,255,.045);
}
/* режим стопки — только при включённом JS */
.js .course-stack[data-course-stack]{--card-h:min(72vh,560px)}
.js .course-stack__viewport{
position:sticky;top:calc(var(--head-h) + clamp(18px,2.4vw,34px));
display:block;height:var(--card-h);
}
.js .course-stack__viewport .course-card{
position:absolute;inset:0;min-height:0;height:100%;
/* линия «снятия плёнки» по диагонали */
background-image:linear-gradient(135deg,
rgba(135,151,132,0) calc(var(--edge, 0%) - 2.2%),
rgba(190,205,186,.55) var(--edge, 0%),
rgba(135,151,132,0) calc(var(--edge, 0%) + 1.6%));
background-repeat:no-repeat;
}
.js .course-stack__viewport .course-card:first-child{background-image:none}
.course-stack__progress{
position:relative;height:2px;margin-top:clamp(26px,3vw,38px);background:rgba(37,39,43,.1);border-radius:var(--pill);
}
.course-stack__progress span{
position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:var(--pill);
background:var(--sage-deep);transition:width .12s linear;
}
@media (max-width:900px){
.course-card{grid-template-columns:1fr;min-height:0}
.course-card__media{min-height:230px}
.js .course-stack[data-course-stack]{--card-h:min(78vh,620px)}
}
@media (prefers-reduced-motion:reduce){
.js .course-stack__viewport{position:relative;height:auto;display:grid;gap:16px}
.js .course-stack__viewport .course-card{position:relative;inset:auto;height:auto;min-height:360px;clip-path:none!important;background-image:none}
.course-stack__progress{display:none}
}
/* ==========================================================================
49. Программа курса: спокойное раскрытие и читаемая внутренняя сетка
========================================================================== */
.acc--program .acc__inner>div{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s}
.acc--program .acc__item.is-open .acc__inner>div{opacity:1;transform:none}
.acc--program .acc__btn{transition:background .3s var(--ease),color .25s var(--ease)}
.acc--program .acc__item:hover .acc__btn{background:rgba(135,151,132,.06)}
.acc--program .acc__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.acc--program .acc__cols>div{counter-reset:acc-line}
.acc--program .acc__cols>div+div{padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--line)}
.acc--program .acc__cols h4{
display:flex;align-items:center;gap:10px;
margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--ink);
font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.acc--program .acc__cols h4::before{content:"";width:18px;height:1px;background:var(--sage-deep)}
.acc--program .acc__cols ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.acc--program .acc__cols li{
counter-increment:acc-line;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;
gap:12px;margin:0;padding:11px 0;border-bottom:1px solid var(--line);
font-size:.9rem;line-height:1.5;color:var(--ink-70);
}
.acc--program .acc__cols li::before{
content:counter(acc-line,decimal-leading-zero);
position:static;width:auto;height:auto;border-radius:0;background:none;
font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--sage-deep);
}
.acc--program .acc__cols li:last-child{border-bottom:0}
.acc--program .acc__item.is-open{background:#fff}
.acc--program .acc__item.is-open .acc__title{color:var(--ink)}
.acc--program .acc__inner>div{max-width:none;width:100%}
.acc--program .acc__cols{max-width:none}
/* Преподаватель: фото и текст — один цельный блок */
.teacher{
gap:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line);
}
.teacher__media{border-radius:0;box-shadow:none}
.teacher__body{border-radius:0;box-shadow:none;background:#fff}
.teacher__cols>div+div{padding-left:clamp(20px,2.4vw,34px);border-left:1px solid var(--line)}
.teacher__cols ul{gap:0}
.teacher__cols li{
display:grid;grid-template-columns:minmax(66px,86px) minmax(0,1fr);align-items:baseline;gap:14px;
padding:10px 0;border-bottom:1px solid var(--line);
}
.teacher__cols li:last-child{border-bottom:0}
.teacher__cols li::before{display:none}
.teacher__cols li b{font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--sage-deep)}
.teacher__cols li span{font-size:.84rem;line-height:1.5;color:var(--ink-70)}
@media (max-width:640px){
.teacher__cols li{grid-template-columns:1fr;gap:2px}
}
/* ==========================================================================
50. Парный блок «фото + текст» и страница о студии
========================================================================== */
.duo{
display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:0;
border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line);
}
.duo--rev{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.duo--rev .duo__media{order:2}
.duo__media{position:relative;min-height:clamp(320px,34vw,470px);background:var(--graphite)}
.duo__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo__body{
display:flex;flex-direction:column;justify-content:center;
padding:clamp(28px,3.2vw,52px);
}
.duo__body p{margin:0 0 14px;font-size:.95rem;line-height:1.7;color:var(--ink-70)}
.duo__body p:last-of-type{margin-bottom:0}
.duo__lead{font-size:1.05rem!important;color:var(--ink)!important}
.duo__facts{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
margin:clamp(22px,2.4vw,30px) 0 0;padding:clamp(16px,1.8vw,22px) 0 0;border-top:1px solid var(--line);
}
.duo__facts--top{margin:0 0 clamp(22px,2.4vw,30px);padding:0 0 clamp(16px,1.8vw,22px);border-top:0;border-bottom:1px solid var(--line)}
.duo__facts dt{font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.022em}
.duo__facts dd{margin:4px 0 0;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-40)}
.duo__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.duo__cols>div+div{padding-left:clamp(20px,2.4vw,34px);border-left:1px solid var(--line)}
.duo__cols h3{
margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line);
font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);
}
.duo__cols ul,.duo__list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.duo__cols li,.duo__list li{
display:grid;grid-template-columns:minmax(74px,96px) minmax(0,1fr);align-items:baseline;gap:14px;
padding:10px 0;border-bottom:1px solid var(--line);
}
.duo__cols li:last-child,.duo__list li:last-child{border-bottom:0}
.duo__cols li b,.duo__list li b{font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--sage-deep)}
.duo__cols li span,.duo__list li span{font-size:.85rem;line-height:1.5;color:var(--ink-70)}
.duo__list li{grid-template-columns:minmax(160px,.5fr) minmax(0,1fr)}
.duo__list li b{font-size:.95rem;font-weight:500;letter-spacing:0;color:var(--ink)}
.duo__actions{margin-top:clamp(22px,2.4vw,30px)}
.duo__actions .btn{flex:1 1 200px}
.extras-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.page--o-nas .about-principles .usp{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:about-principle}
.page--o-nas .about-principles .usp__item{
position:relative;min-height:240px;padding:clamp(28px,3vw,42px);overflow:hidden;
border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);
}
.page--o-nas .about-principles .usp__item .h3{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.page--o-nas .about-principles .usp__item p{margin:0;color:var(--ink-70)}
@media (max-width:1000px){
.duo,.duo--rev{grid-template-columns:1fr}
.duo--rev .duo__media{order:0}
.duo__media{min-height:300px}
.extras-grid--3{grid-template-columns:1fr}
}
@media (max-width:640px){
.duo__facts{grid-template-columns:1fr;gap:12px}
.duo__cols{grid-template-columns:1fr}
.duo__cols>div+div{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid var(--line)}
.duo__cols li,.duo__list li{grid-template-columns:1fr;gap:2px}
.page--o-nas .about-principles .usp{grid-template-columns:1fr}
}
.page--o-nas .about-principles .usp__item{counter-increment:about-principle}
.page--o-nas .about-principles .usp__item::after{
content:"0" counter(about-principle);position:absolute;right:-12px;bottom:-.18em;z-index:0;
font-size:clamp(5.4rem,9vw,9rem);font-weight:800;line-height:.72;letter-spacing:-.075em;
color:rgba(37,39,43,.07);pointer-events:none;
}
.page--o-nas .about-principles .usp__item:hover::after{color:rgba(108,122,105,.16)}
.page--o-nas .about-principles .usp__item>*{position:relative;z-index:1}
@media (max-width:860px){
.page--ceny .price-note{grid-template-columns:1fr}
}
/* Инфографика: сколько грязи снимает каждый этап мойки */
.wash-scale{
margin:34px 0;padding:clamp(20px,2.4vw,30px);
border-radius:var(--r);background:var(--grey-light);
}
.wash-scale__head{
display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.4fr) 62px;gap:14px;margin-bottom:12px;
font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);
}
.wash-scale__head>span:last-child{grid-column:2 / -1;text-align:right}
.wash-scale>div:not(.wash-scale__head){
display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.4fr) 62px;
align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line);
}
.wash-scale b{font-size:.85rem;font-weight:500}
.wash-scale i{position:relative;display:block;height:8px;border-radius:var(--pill);background:rgba(37,39,43,.08)}
.wash-scale i::after{
content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:var(--pill);
background:var(--sage-deep);
}
.wash-scale span{font-size:.78rem;text-align:right;color:var(--ink-50)}
.wash-scale__note{
display:block;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
font-size:.82rem;line-height:1.6;color:var(--ink-70);
}
@media (max-width:640px){
.wash-scale>div:not(.wash-scale__head){grid-template-columns:minmax(0,1fr) 54px;gap:8px 12px}
.wash-scale i{grid-column:1 / -1}
}
/* ==========================================================================
51. Каталог услуг: страницы разделов и услуг
========================================================================== */
/* меню услуг: 11 разделов в три колонки */
.nav__drop--services{width:660px}
.nav__drop--services .nav__drop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.nav__drop--services .nav__drop-grid>a{min-height:58px;padding:10px 12px;font-size:.86rem}
.nav__drop--services .nav__drop-grid>a span{font-size:.78rem}
.nav__drop--services .nav__drop-grid>a:nth-last-child(-n+2){border-bottom:1px solid var(--line-soft)}
.nav__drop--services .nav__drop-grid>a:nth-last-child(-n+3){border-bottom:0}
/* цена по размерам */
.svc-price-section{padding-bottom:0}
.svc-price{
display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:0;
border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line);
}
.svc-price__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-price__grid--one{grid-template-columns:1fr}
.svc-price__tile,.svc-price__one{
display:flex;flex-direction:column;justify-content:center;gap:8px;
padding:clamp(22px,2.4vw,32px);border-right:1px solid var(--line);
}
.svc-price__tile span,.svc-price__one span{
font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);
}
.svc-price__tile b{font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.svc-price__one b{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;letter-spacing:-.035em}
.svc-price__tile em,.svc-price__one em{font-style:normal;font-size:.8rem;color:var(--ink-40)}
.svc-price__side{
display:flex;flex-direction:column;justify-content:space-between;gap:20px;
padding:clamp(22px,2.4vw,32px);background:var(--grey-light);
}
.svc-price__facts{display:grid;gap:0;margin:0}
.svc-price__facts>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.svc-price__facts>div:last-child{border-bottom:0}
.svc-price__facts dt{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40)}
.svc-price__facts dd{margin:0;font-size:.9rem;font-weight:500}
.svc-price__facts dd a{color:var(--sage-deep);border-bottom:1px solid rgba(108,122,105,.35)}
.svc-price__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-price__actions .btn{width:100%}
.svc-price__hint{margin:14px 0 0;font-size:.82rem;color:var(--ink-50)}
.svc-price__hint a{color:var(--sage-deep);border-bottom:1px solid rgba(108,122,105,.35)}
/* об услуге + инфографика */
.svc-about__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:start}
.svc-about__text .h2{margin:12px 0 20px}
.svc-about__text .prose p{margin:0 0 14px;color:var(--ink-70);line-height:1.75}
.svc-when{margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line)}
.svc-when h3{margin:0 0 12px;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.svc-when ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.svc-when li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--line);font-size:.95rem}
.svc-when li:last-child{border-bottom:0}
.svc-when li::before{content:"";position:absolute;left:0;top:1.05em;width:14px;height:1px;background:var(--sage-deep)}
.svc-about__viz{position:sticky;top:calc(var(--head-h) + 30px)}
.cat-intro__actions{margin-top:clamp(22px,2.6vw,32px)}
.cat-intro__actions .btn{flex:1 1 200px}
.viz{
margin:0;padding:clamp(20px,2.4vw,30px);border-radius:var(--r);background:var(--grey-light);
box-shadow:inset 0 0 0 1px var(--line);
}
.viz__cap{
display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);
font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);
}
.viz__cap::before{content:"";width:18px;height:1px;background:var(--sage-deep)}
.viz__body{display:flex;justify-content:center}
.viz__legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.viz__legend li{
display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:var(--pill);
background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.78rem;color:var(--ink-70);
}
.viz__legend li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--sage-deep)}
.viz__note{margin:14px 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-50)}
.carmap{width:min(100%,240px);height:auto;overflow:visible}
.cabinmap{width:min(100%,250px);height:auto}
.carmap .z,.cabinmap .z{fill:#fff;stroke:rgba(37,39,43,.24);stroke-width:1.2;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.carmap [data-zone="wheels"]{fill:#3a3d42;stroke:none}
.carmap [data-zone="windshield"],.carmap [data-zone="rear_glass"],
.carmap [data-zone="glass_fs"],.carmap [data-zone="glass_rs"]{fill:#dfe3e6}
.carmap [data-zone="headlights"],.carmap [data-zone="fog"]{fill:#eef1f3}
.carmap .z.is-on,.cabinmap .z.is-on{fill:var(--sage);stroke:var(--sage-deep)}
.carmap [data-zone="wheels"].is-on{fill:var(--sage-deep)}
.cabinmap rect:first-child{fill:#e9ebe7;stroke:rgba(37,39,43,.18)}
.cabinmap .cabin__ceiling{fill:none;stroke-dasharray:5 4;stroke:rgba(37,39,43,.28)}
.cabinmap .cabin__ceiling.is-on{fill:rgba(135,151,132,.28);stroke:var(--sage-deep);stroke-dasharray:none}
.layers{display:grid;gap:5px;width:100%}
.layers__row{
position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;
width:var(--w);padding:13px 16px;border-radius:var(--r-sm);background:var(--graphite);color:#fff;overflow:hidden;
}
.layers__row:first-child{background:#52605a}
.layers__row>i{position:absolute;inset:0 auto 0 0;width:var(--cut);background:var(--sage);opacity:.9}
.layers__row b,.layers__row span{position:relative;z-index:1}
.layers__row b{font-size:.84rem;font-weight:500}
.layers__row span{font-size:.72rem;color:rgba(255,255,255,.66)}
.dura{display:grid;gap:0;width:100%}
.dura__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 12px;border-bottom:1px solid var(--line);border-radius:var(--r-sm)}
.dura__row:last-child{border-bottom:0}
.dura__row b{font-size:.9rem;font-weight:500}
.dura__dots{display:flex;gap:5px}
.dura__dots i{width:22px;height:8px;border-radius:var(--pill);background:rgba(37,39,43,.1)}
.dura__dots i.f{background:rgba(108,122,105,.55)}
.dura__row.is-on{background:#fff;box-shadow:0 0 0 1px var(--sage)}
.dura__row.is-on .dura__dots i.f{background:var(--sage-deep)}
.stagelist{display:grid;gap:0;width:100%;margin:0;padding:0;list-style:none}
.stagelist li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.stagelist li:last-child{border-bottom:0}
.stagelist li span{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--pill);font-size:.72rem;font-weight:700}
.stagelist .is-on span{background:var(--sage-deep);color:#fff}
.stagelist .is-off{color:var(--ink-40)}
.stagelist .is-off span{background:rgba(37,39,43,.07);color:var(--ink-40)}
.ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:10px;width:100%;height:260px}
.ladder__step{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:100%}
.ladder__step i{display:block;height:var(--h);border-radius:var(--r-sm) var(--r-sm) 0 0;background:rgba(37,39,43,.12)}
.ladder__step b{font-size:.78rem;font-weight:600;line-height:1.3}
.ladder__step span{font-size:.72rem;color:var(--ink-50)}
.ladder__step.is-on i{background:var(--sage-deep)}
.ladder:not(:has(.is-on)) .ladder__step i{background:rgba(108,122,105,.5)}
.checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:0;padding:0;list-style:none}
.checkgrid li{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.92rem}
.checkgrid span{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--sage-deep)}
.legalnote{
display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin-top:22px;
padding:18px 20px;border-radius:var(--r);background:var(--grey-light);box-shadow:inset 3px 0 var(--sage-deep);
}
.legalnote b{font-size:2rem;font-weight:600;letter-spacing:-.04em;color:var(--sage-deep)}
.legalnote p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-70)}
/* процесс */
.svc-steps{display:grid;gap:clamp(12px,1.4vw,18px);background:transparent}
.svc-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.svc-steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.svc-steps .step{min-height:230px;padding:clamp(22px,2.2vw,30px);border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.svc-steps .step .h3{margin:12px 0 10px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:1.08rem}
.svc-steps .step p{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink-70)}
/* результат */
.svc-result__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:start}
.svc-result__grid .h2{margin-top:12px}
.svc-result__list{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.svc-result__list li{
display:grid;grid-template-columns:54px minmax(0,1fr);align-items:baseline;gap:16px;
padding:18px 0;border-bottom:1px solid var(--line);font-size:clamp(1.02rem,1.4vw,1.25rem);letter-spacing:-.015em;
}
.svc-result__list span{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--sage-deep)}
/* размеры */
.size-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(16px,1.8vw,24px)}
.size-legend>div{display:grid;gap:6px;padding:18px 20px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line)}
.size-legend b{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--sage-deep)}
.size-legend span{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-50)}
.size-legend em{font-style:normal;font-size:.84rem;line-height:1.5;color:var(--ink-70)}
.svc-sizes .sec-head{margin-bottom:clamp(20px,2.4vw,30px)}
/* карточки-ссылки услуг */
a.extra--link{color:inherit}
a.extra--link .extra__note{display:inline-flex;align-items:center;gap:6px;color:var(--ink-70);font-weight:600}
a.extra--link .extra__note svg{width:15px;height:15px;transition:transform .3s var(--ease)}
a.extra--link:hover .extra__note{color:var(--sage-deep)}
a.extra--link:hover .extra__note svg{transform:translateX(4px)}
.extra__tag--package{background:var(--sage-deep);color:#fff}
.extra__tag--hit{background:transparent;box-shadow:inset 0 0 0 1px rgba(108,122,105,.55)}
.extra__price{white-space:nowrap}
/* другие разделы */
.cat-chips{display:flex;flex-wrap:wrap;gap:10px}
.cat-chip{
display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px;border-radius:var(--r-button);
background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.9rem;font-weight:500;
transition:box-shadow .25s var(--ease),color .25s var(--ease);
}
.cat-chip span{font-size:.78rem;color:var(--ink-40)}
.cat-chip:hover{color:var(--sage-deep);box-shadow:0 0 0 1px var(--sage)}
/* таблица цен по размерам */
.ptable--sizes{min-width:720px}
.ptable--sizes thead th:first-child{width:40%}
.ptable--sizes .row-name a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.ptable--sizes .row-name a:hover{color:var(--sage-deep);border-color:rgba(108,122,105,.45)}
.ptable--sizes td em{display:block;margin-top:3px}
.ptable__ask{text-align:center!important;color:var(--ink-50);font-weight:500!important}
/* хаб: 11 разделов */
.srv-grid--hub .srv-card__list li.srv-card__more{color:var(--ink-40)}
.srv-grid--hub .srv-card__list li.srv-card__more::before{background:rgba(37,39,43,.18)}
.srv-grid--hub .srv-card__body>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* прайс: все 11 разделов в одну строку */
.page--ceny .price-anchor--wide{grid-template-columns:repeat(11,minmax(0,1fr))}
.page--ceny .price-anchor--wide .chip{padding:0 6px;font-size:.74rem;min-height:56px}
.page--ceny [data-price-group]>.sec-head .text-link{margin-top:14px;font-size:.84rem}
@media (max-width:1100px){
.svc-price{grid-template-columns:1fr}
.svc-steps--4,.svc-steps--5{grid-template-columns:repeat(2,minmax(0,1fr))}
.page--ceny .price-anchor--wide{display:flex;overflow-x:auto}
.page--ceny .price-anchor--wide .chip{flex:0 0 auto;padding:0 16px}
}
@media (max-width:900px){
.svc-about__grid,.svc-result__grid{grid-template-columns:1fr}
.svc-about__viz{position:static}
.size-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-steps--3{grid-template-columns:1fr}
.nav__drop--services{width:520px}
.nav__drop--services .nav__drop-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.svc-price__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-price__tile{border-bottom:1px solid var(--line)}
.svc-price__actions{grid-template-columns:1fr}
.svc-steps--4,.svc-steps--5{grid-template-columns:1fr}
.size-legend,.checkgrid{grid-template-columns:1fr}
.ladder{height:220px;gap:6px}
.ladder__step b{font-size:.7rem}
}
.text-link svg{width:16px;height:16px;flex:none}
.svc-related .sec-head .lead{display:flex;justify-content:flex-start}
.svc-related .text-link{display:inline-flex;align-items:center;gap:10px}
/* ==========================================================================
52. Шапки внутренних страниц без пустого зазора под меню
========================================================================== */
.page--interior .pagehead.pagehead--photo{
min-height:0;display:block;
padding-block:calc(var(--head-h) + clamp(34px,3vw,46px)) clamp(36px,3.4vw,50px);
}
.page--interior .pagehead.pagehead--photo .crumbs{margin-bottom:clamp(16px,1.8vw,22px)}
.page--interior .pagehead.pagehead--photo h1{margin-top:10px}
.page--interior .pagehead.pagehead--photo .pagehead__inner{align-items:end}
@media (max-width:700px){
.page--interior .pagehead.pagehead--photo{min-height:0;padding-block:calc(var(--head-h) + 26px) 32px}
}
.page--kontakty .pagehead.pagehead--photo{
padding-block:calc(var(--head-h) + clamp(34px,3vw,46px)) clamp(36px,3.4vw,50px);
}
.page--kontakty .pagehead.pagehead--photo .crumbs{margin-bottom:clamp(16px,1.8vw,22px)}
.page--kontakty .pagehead.pagehead--photo h1{margin-top:10px}
@media (max-width:700px){
.page--kontakty .pagehead.pagehead--photo{padding-block:calc(var(--head-h) + 26px) 32px}
}
/* Первая карточка статей: текст опускается вниз, на одну линию с соседней */
.blog-grid--rhythm .story-card:nth-child(1) .story-card__body{justify-content:flex-end}
.blog-grid--rhythm .story-card:nth-child(1) .story-link{margin-top:0}
.blog-grid--rhythm .story-card:nth-child(1) p{margin-bottom:20px}
@media (max-width:760px){
.blog-grid--rhythm .story-card:nth-child(1) .story-card__body{justify-content:flex-start}
}
/* первый ряд статей ниже: фото второй карточки фиксированной высоты */
.blog-grid--rhythm .story-card:nth-child(1),.blog-grid--rhythm .story-card:nth-child(2){min-height:0}
.blog-grid--rhythm .story-card:nth-child(2) .story-card__media{height:clamp(200px,17vw,240px)}
.blog-grid--rhythm .story-card:nth-child(n+3) .story-card__media{height:clamp(190px,15vw,220px)}
.blog-grid--rhythm .story-card:nth-child(n+3){min-height:0}
@media (max-width:1100px){
.blog-grid--rhythm .story-card:nth-child(2) .story-card__media{height:100%}
}
/* ==========================================================================
53. Уникальная инфографика статей
========================================================================== */
.art-timeline{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:32px 0;padding:0;list-style:none}
.art-timeline li{
grid-column:span var(--span);position:relative;display:grid;gap:6px;align-content:start;
padding:20px 20px 22px;border-radius:var(--r);background:var(--grey-light);
}
.art-timeline li::before{content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--sage-deep)}
.art-timeline span{font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--sage-deep)}
.art-timeline b{font-size:1.05rem;font-weight:500}
.art-timeline em{font-style:normal;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)}
.art-timeline p{margin:6px 0 0;font-size:.86rem;line-height:1.6;color:var(--ink-70)}
.art-timeline a{color:var(--sage-deep);border-bottom:1px solid rgba(108,122,105,.35)}
.art-dura{margin:32px 0;padding:10px 22px;border-radius:var(--r);background:var(--grey-light)}
.art-dura>div{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,.9fr) 96px;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.art-dura>div:last-child{border-bottom:0}
.art-dura__head{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.art-dura a{font-size:.92rem;font-weight:500;color:var(--ink);border-bottom:1px solid transparent}
.art-dura a:hover{color:var(--sage-deep);border-color:rgba(108,122,105,.4)}
.art-dura__dots{display:flex;gap:4px}
.art-dura__dots i{width:20px;height:8px;border-radius:var(--pill);background:rgba(37,39,43,.1)}
.art-dura__dots i.f{background:var(--sage-deep)}
.art-dura>div>span:not(.art-dura__dots){font-size:.82rem;color:var(--ink-50)}
.art-dura b{font-size:.86rem;font-weight:600;text-align:right;white-space:nowrap}
.art-matrix{margin:32px 0;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.art-matrix>div{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));align-items:center;border-bottom:1px solid var(--line)}
.art-matrix>div:last-child{border-bottom:0}
.art-matrix>div>*{padding:14px 16px}
.art-matrix__head{background:var(--graphite);color:rgba(255,255,255,.7);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.art-matrix__head a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.art-matrix b{font-size:.88rem;font-weight:500}
.art-matrix i{font-style:normal;font-size:.78rem;font-weight:600;text-align:center}
.art-matrix i::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;vertical-align:1px}
.art-matrix .yes{color:var(--sage-deep)}.art-matrix .yes::before{background:var(--sage-deep)}
.art-matrix .part{color:var(--ink-70)}.art-matrix .part::before{background:rgba(108,122,105,.4)}
.art-matrix .fix{color:var(--ink)}.art-matrix .fix::before{background:var(--graphite)}
.art-matrix .no{color:var(--ink-40)}.art-matrix .no::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(37,39,43,.25)}
.art-factors{display:grid;gap:0;margin:32px 0;padding:8px 22px;border-radius:var(--r);background:var(--grey-light)}
.art-factors>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(90px,.7fr);align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.art-factors>div:last-child{border-bottom:0}
.art-factors b{font-size:.9rem;font-weight:500}
.art-factors span{font-size:.82rem;color:var(--ink-50)}
.art-factors span a{color:var(--sage-deep);border-bottom:1px solid rgba(108,122,105,.35)}
.art-factors i{position:relative;display:block;height:8px;border-radius:var(--pill);background:rgba(37,39,43,.08)}
.art-factors i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--l);border-radius:var(--pill);background:var(--sage-deep)}
@media (max-width:760px){
.art-timeline{grid-template-columns:1fr}.art-timeline li{grid-column:auto}
.art-dura>div{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
.art-dura>div>span:not(.art-dura__dots),.art-dura__head span:nth-child(3){display:none}
.art-dura__head span:nth-child(4){display:none}
.art-dura b{grid-column:1 / -1;text-align:left}
.art-matrix>div{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.8fr))}
.art-matrix>div>*{padding:12px 8px}
.art-matrix i::before{display:block;margin:0 auto 4px}
.art-factors>div{grid-template-columns:1fr;gap:6px}
}
.cabinmap .z.cabin__ceiling{fill:none;stroke-dasharray:5 4;stroke:rgba(37,39,43,.3)}
.cabinmap .z.cabin__ceiling.is-on{fill:rgba(135,151,132,.26);stroke:var(--sage-deep);stroke-dasharray:none}
.promo__price-note{display:block;margin-top:8px;font-size:.8rem;font-style:normal;color:var(--on-dark)}
/* ==========================================================================
54. Шаги процесса: анимация быстрее, затемнение при наведении — сразу
========================================================================== */
.steps--flow::before,.steps--flow::after{transition-duration:.8s}
.steps--flow::after{transition-delay:.52s}
.steps--flow .step{
transition:opacity .6s var(--ease),transform .62s cubic-bezier(.19,.72,.24,1),background .16s var(--ease);
}
.steps--flow .step::before,.steps--flow .step:last-child::after{transition-duration:.6s}
.steps--flow.is-in .step:nth-child(1)::before{transition-delay:.03s}
.steps--flow.is-in .step:nth-child(2)::before{transition-delay:.16s}
.steps--flow.is-in .step:nth-child(3)::before{transition-delay:.29s}
.steps--flow.is-in .step:nth-child(4)::before{transition-delay:.42s}
.steps--flow.is-in .step:nth-child(5)::before{transition-delay:.55s}
.steps--flow.is-in .step:last-child::after{transition-delay:.68s}
/* задержка только для появления, фон при наведении меняется без задержки */
.steps--flow.is-in .step:nth-child(1){transition-delay:.2s,.2s,0s}
.steps--flow.is-in .step:nth-child(2){transition-delay:.3s,.3s,0s}
.steps--flow.is-in .step:nth-child(3){transition-delay:.4s,.4s,0s}
.steps--flow.is-in .step:nth-child(4){transition-delay:.5s,.5s,0s}
.steps--flow.is-in .step:nth-child(5){transition-delay:.6s,.6s,0s}
.steps--flow .step__num{transition-duration:.35s}
.steps--flow.is-in .step:nth-child(1) .step__num{transition-delay:.14s}
.steps--flow.is-in .step:nth-child(2) .step__num{transition-delay:.24s}
.steps--flow.is-in .step:nth-child(3) .step__num{transition-delay:.34s}
.steps--flow.is-in .step:nth-child(4) .step__num{transition-delay:.44s}
.steps--flow.is-in .step:nth-child(5) .step__num{transition-delay:.54s}
.steps--flow .step__ghost{
transition:opacity .8s var(--ease),transform .8s cubic-bezier(.19,.72,.24,1),color .16s var(--ease);
}
.steps--flow.is-in .step:nth-child(1) .step__ghost{transition-delay:.45s,.45s,0s}
.steps--flow.is-in .step:nth-child(2) .step__ghost{transition-delay:.55s,.55s,0s}
.steps--flow.is-in .step:nth-child(3) .step__ghost{transition-delay:.65s,.65s,0s}
.steps--flow.is-in .step:nth-child(4) .step__ghost{transition-delay:.75s,.75s,0s}
.steps--flow.is-in .step:nth-child(5) .step__ghost{transition-delay:.85s,.85s,0s}
.steps--flow .step:hover,.section--process .steps--flow .step:hover{background:rgba(37,39,43,.06)}
.steps--flow .step:hover .step__ghost{color:rgba(37,39,43,.09)}
/* Хаб услуг: текст первой (широкой) карточки — на одном уровне с соседней */
.srv-grid--hub .srv-card:nth-child(1) .srv-card__body{justify-content:flex-end}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__foot{margin-top:0}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__list{margin-bottom:22px}
/* Контакты: «Что есть в студии» — типографические плашки без иконок */
.amenities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.amenity{
display:flex;flex-direction:column;padding:clamp(22px,2.2vw,30px);
border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);
transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.amenity:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.amenity__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.amenity__index{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--sage-deep)}
.amenity__tag{
display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--pill);
background:rgba(135,151,132,.16);color:var(--sage-deep);
font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.amenity .h3{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:1.12rem}
.amenity p{margin:0 0 22px;font-size:.88rem;line-height:1.62;color:var(--ink-70)}
.amenity__fact{display:grid;gap:3px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.amenity__fact b{font-size:clamp(1.3rem,1.8vw,1.65rem);font-weight:500;letter-spacing:-.03em;color:var(--sage-deep)}
.amenity__fact span{font-size:.76rem;color:var(--ink-40)}
@media (max-width:1000px){.amenities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.amenities{grid-template-columns:1fr}}
/* ==========================================================================
55. Курс: перелистывание шагов, как страниц книги
========================================================================== */
.js .course-stack__viewport .course-card{background-image:none}
.course-stack.is-live .course-card__body,
.course-stack.is-live .course-card__num{
opacity:var(--text,1);transform:translateY(var(--lift,0px));will-change:opacity,transform;
}
.course-stack.is-live .course-card__media img{transform:scale(var(--zoom,1));transform-origin:65% 70%;will-change:transform}
.course-card__matte,.course-card__fold,.course-card__shade{position:absolute;inset:0;pointer-events:none}
/* матовая плёнка: уходящий шаг мутнеет, появляющийся — проясняется */
.course-card__matte{
z-index:5;opacity:var(--matte,0);
background:linear-gradient(160deg,rgba(40,44,48,.44),rgba(28,31,35,.56));
-webkit-backdrop-filter:blur(14px) saturate(.7);backdrop-filter:blur(14px) saturate(.7);
}
/* кромка листа: светлая линия ровно по линии среза */
.course-card__fold{
z-index:6;opacity:var(--fold-o,0);
background:linear-gradient(to bottom right,
rgba(255,255,255,0) calc(var(--fold,100%) - .4%),
rgba(226,233,223,.8) var(--fold,100%),
rgba(226,233,223,.18) calc(var(--fold,100%) + 1.4%),
rgba(255,255,255,0) calc(var(--fold,100%) + 8%));
}
/* тень, которую поднятый лист отбрасывает на предыдущий шаг */
.course-card__shade{
z-index:6;opacity:var(--shade-o,0);
background:linear-gradient(to bottom right,
rgba(8,10,12,0) calc(var(--shade,100%) - 22%),
rgba(8,10,12,.5) calc(var(--shade,100%) - .3%),
rgba(8,10,12,0) var(--shade,100%));
}
@media (prefers-reduced-motion:reduce){
.course-card__matte,.course-card__fold,.course-card__shade{display:none}
}
/* Хаб услуг, широкая карточка «Мойка»: заголовок сверху, описание по центру, цена внизу */
.srv-grid--hub .srv-card:nth-child(1) .srv-card__body{justify-content:flex-start}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__body h3{
margin:0;padding-bottom:clamp(16px,1.6vw,20px);border-bottom:1px solid var(--line);
font-size:clamp(1.5rem,2vw,1.9rem);letter-spacing:-.03em;
}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__body>p{margin-top:auto;padding-top:24px;font-size:.95rem}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__list{margin-bottom:24px}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__foot{margin-top:auto}
.srv-grid--hub .srv-card:nth-child(1) .srv-card__body>p{display:block;-webkit-line-clamp:unset;overflow:visible}
/* ==========================================================================
56. Крупные номера в плашках: единая подача
========================================================================== */
/* контакты: метка сверху, номер — в правом нижнем углу */
.amenity{position:relative;overflow:hidden}
.amenity>*:not(.amenity__ghost){position:relative;z-index:1}
.amenity .amenity__tag{align-self:flex-start;margin-bottom:22px}
.amenity__ghost{
position:absolute;right:-8px;bottom:-.06em;z-index:0;pointer-events:none;
font-size:clamp(6.4rem,9vw,10rem);font-weight:800;line-height:.72;letter-spacing:-.075em;
color:rgba(37,39,43,.045);transition:color .3s var(--ease);
}
.amenity:hover .amenity__ghost{color:rgba(108,122,105,.12)}
/* акции и услуги: номера крупнее, прозрачнее и чуть выше — выходят за край меньше */
.steps--ghosted .step__ghost{
right:-8px;bottom:-.05em;font-size:clamp(6.6rem,9.6vw,10.6rem);color:rgba(37,39,43,.042);
}
.steps--ghosted .step:hover .step__ghost{color:rgba(108,122,105,.12)}
/* о студии и обучение: те же параметры */
.page--o-nas .about-principles .usp__item::after,
.course-outcomes .step::after{
right:-8px;bottom:-.05em;font-size:clamp(6.8rem,10vw,11rem);line-height:.72;color:rgba(37,39,43,.042);
}
/* обучение: заголовок шапки спокойнее */
.page--obuchenie .pagehead.pagehead--photo .h1,
.page--obuchenie .pagehead .h1{max-width:19ch;font-size:clamp(2.05rem,3.3vw,3.2rem);line-height:1.06}
/* Призыв с контактами: текст слева, контакты справа — без пустой половины */
.cta-contact{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.cta-contact__main .h2{margin:14px 0 14px}
.cta-contact__main p{max-width:52ch;margin:0 0 clamp(22px,2.4vw,30px);color:var(--on-dark)}
.cta-contact__main .btn-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px}
.cta-contact__main .btn{width:100%}
.cta-contact__side{padding:clamp(22px,2.6vw,34px);border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cta-contact__side .cta__msg{margin-top:22px}
@media (max-width:900px){.cta-contact{grid-template-columns:1fr}}
@media (max-width:560px){.cta-contact__main .btn-row{grid-template-columns:1fr}}
/* ==========================================================================
57. Галерея: аккуратные подписи, «Показать ещё», просмотр с листанием
========================================================================== */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gal-item{margin:0;display:flex;flex-direction:column;gap:12px}
.gal-item[hidden]{display:none!important}
.gal-item__open{
display:block;width:100%;padding:0;border:0;cursor:zoom-in;overflow:hidden;
border-radius:var(--r);background:var(--graphite);box-shadow:0 0 0 1px var(--line);
}
.gal-item__open img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s var(--ease),opacity .3s var(--ease)}
.gal-item__open:hover img{transform:scale(1.04)}
.gal-item__open:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
.gal-item figcaption{
display:flex;align-items:baseline;gap:12px;padding:0 2px 12px;border-bottom:1px solid var(--line);
font-size:.92rem;font-weight:500;color:var(--ink);
}
.gal-item figcaption span{font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--sage-deep)}
.gal-more,.gal-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.gal-more{margin-top:clamp(28px,3vw,40px)}
.gal-more[hidden]{display:none}
.gal-more .btn{min-width:min(100%,260px)}
.gal-links{margin-top:clamp(18px,2vw,24px)}
.gal-links .btn{min-width:min(100%,260px)}
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;opacity:0;transition:opacity .26s var(--ease)}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__back{position:absolute;inset:0;background:rgba(14,16,18,.9);backdrop-filter:blur(6px)}
.lightbox__stage{position:relative;z-index:1;margin:0;display:grid;gap:14px;width:min(1200px,calc(100vw - 160px))}
.lightbox__img{width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r);transition:opacity .14s var(--ease),transform .26s var(--ease)}
.lightbox.is-switching .lightbox__img{opacity:0;transform:scale(.985)}
.lightbox__cap{display:flex;align-items:baseline;gap:14px;color:#fff}
.lightbox__count{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--sage)}
.lightbox__title{font-size:1rem;font-weight:500}
.lightbox__nav,.lightbox__close{
position:absolute;z-index:2;display:grid;place-items:center;width:52px;height:52px;border:0;cursor:pointer;
border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s var(--ease);
}
.lightbox__nav:hover,.lightbox__close:hover{background:rgba(135,151,132,.35)}
.lightbox__nav svg{width:22px;height:22px}.lightbox__close svg{width:16px;height:16px}
.lightbox__nav--prev{left:clamp(12px,2vw,32px);top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:clamp(12px,2vw,32px);top:50%;transform:translateY(-50%)}
.lightbox__close{top:clamp(12px,2vw,28px);right:clamp(12px,2vw,32px)}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
.gal{grid-template-columns:1fr}
.lightbox__stage{width:calc(100vw - 24px)}
.lightbox__nav{top:auto;bottom:18px;transform:none}
}
/* Курс: мягче затемнение, без линии прогресса, цифры во всю высоту */
.course-stack__progress{display:none!important}
.course-card__matte{
background:linear-gradient(160deg,rgba(58,63,67,.26),rgba(40,44,48,.34));
-webkit-backdrop-filter:blur(12px) saturate(.8);backdrop-filter:blur(12px) saturate(.8);
}
.course-card__shade{
background:linear-gradient(to bottom right,
rgba(8,10,12,0) calc(var(--shade,100%) - 14%),
rgba(8,10,12,.26) calc(var(--shade,100%) - .3%),
rgba(8,10,12,0) var(--shade,100%));
}
.course-card__fold{
background:linear-gradient(to bottom right,
rgba(255,255,255,0) calc(var(--fold,100%) - .35%),
rgba(232,236,230,.62) var(--fold,100%),
rgba(232,236,230,.12) calc(var(--fold,100%) + 1.2%),
rgba(255,255,255,0) calc(var(--fold,100%) + 6%));
}
.course-card__num{
top:50%;bottom:auto;right:-5%;
font-size:calc(var(--card-h,520px) * 1.62);line-height:.8;letter-spacing:-.085em;
color:rgba(255,255,255,.032);
}
.course-stack.is-live .course-card__num{transform:translateY(calc(-50% + var(--lift,0px)))}
.course-stack:not(.is-live) .course-card__num{transform:translateY(-50%)}
@media (max-width:900px){
.course-card__num{font-size:calc(var(--card-h,520px) * .78);right:-8%;top:auto;bottom:-6%}
.course-stack.is-live .course-card__num,.course-stack:not(.is-live) .course-card__num{transform:translateY(var(--lift,0px))}
}
/* Программа курса: воздух между заголовком дня и содержимым */
.acc--program .acc__inner>div{padding-top:clamp(20px,2.2vw,28px)}
.acc--program .acc__item.is-open .acc__btn{box-shadow:inset 0 -1px 0 var(--line)}
.acc--program .acc__item.is-open .acc__inner>div{padding-bottom:clamp(26px,2.8vw,36px)}
.acc--program .acc__item:hover .acc__btn{background:transparent}
.acc--program .acc__item:not(.is-open):hover{background:rgba(135,151,132,.06)}
.acc--program .acc__btn{min-height:76px}
.acc--program .acc__sign{flex:none;margin:0 0 0 12px}
/* колонки «Теория / Практика» начинаются ровно под названием дня */
.acc--program{--acc-pl:clamp(18px,2.4vw,32px);--acc-day:104px;--acc-g:clamp(16px,2vw,28px)}
.acc--program .acc__btn{padding-left:var(--acc-pl);padding-right:var(--acc-pl)}
.acc--program .acc__label{grid-template-columns:var(--acc-day) minmax(0,1fr);gap:var(--acc-g)}
.acc--program .acc__day{width:var(--acc-day)}
.acc--program .acc__inner>div{padding-left:calc(var(--acc-pl) + var(--acc-day) + var(--acc-g));padding-right:var(--acc-pl)}
@media (max-width:760px){
.acc--program .acc__label{grid-template-columns:1fr}
.acc--program .acc__day{width:auto;justify-self:start}
.acc--program .acc__inner>div{padding-left:var(--acc-pl)}
}
.course-program .acc--program .acc__btn>.acc__label{display:grid;gap:var(--acc-g)}
/* акции: плашки выше, чтобы крупный номер помещался почти целиком */
.client-benefits .step{min-height:clamp(230px,20vw,280px)}
.client-benefits .step p{max-width:34ch}
/* контакты: номер не спорит с крупным фактом */
.amenity__ghost{font-size:clamp(5.6rem,7.6vw,8.4rem);bottom:auto;top:clamp(14px,1.6vw,22px);right:-6px;line-height:.74}
.amenity .amenity__tag{margin-bottom:26px}
.amenity__ghost{top:auto;bottom:-.04em;right:-6px;font-size:clamp(5.8rem,8vw,8.8rem);color:rgba(37,39,43,.05)}
.steps--ghosted .step__ghost{color:rgba(37,39,43,.05)}
/* программа курса: при наведении карточка остаётся светлой, меняется едва заметно */
.course-program .acc--program .acc__item:not(.is-open):hover{background:#f5f6f4}
.course-program .acc--program .acc__item{transition:background .25s var(--ease)}
/* Прайс: подсветка строки с отступом от края текста, скруглённые углы */
.ptable--sizes thead th:first-child,.ptable--sizes tbody td:first-child{padding-left:18px}
.ptable--sizes thead th:last-child,.ptable--sizes tbody td:last-child{padding-right:18px}
.ptable--sizes tbody tr td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.ptable--sizes tbody tr td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.page--ceny .ptable--sizes thead th:first-child,.page--ceny .ptable--sizes tbody td:first-child{padding-left:24px}
.page--ceny .ptable--sizes thead th:last-child,.page--ceny .ptable--sizes tbody td:last-child{padding-right:24px}
/* --- SEO-текст разделов и услуг ------------------------------------- */
.seo-text__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.seo-text__head{position:sticky;top:calc(var(--head-h) + 30px)}
.seo-text__head .h2{margin:12px 0 18px}
.seo-text__head .lead{color:var(--ink-70)}
.seo-text__body{max-width:70ch}
.seo-text__body p{color:var(--ink-70);line-height:1.75}
.seo-text__body h3{color:var(--ink)}
.seo-text__body h3:first-child{margin-top:0}
.seo-text__body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sage);text-decoration-thickness:1px;transition:color .2s}
.seo-text__body a:hover{color:var(--sage-deep)}
@media (max-width:900px){
.seo-text__grid{grid-template-columns:1fr}
.seo-text__head{position:static}
}
/* Курс: закреплённая область занимает весь экран — под карточкой ничего не едет */
.js .course-stack__viewport{
height:calc(100vh - var(--head-h) - clamp(18px,2.4vw,34px) - 16px);
height:calc(100svh - var(--head-h) - clamp(18px,2.4vw,34px) - 16px);
}
.js .course-stack__viewport .course-card{
inset:auto 0;top:50%;height:var(--card-h);transform:translateY(-50%);
}
/* ==========================================================================
58. Курс: слайдер шагов без растянутой прокрутки
========================================================================== */
.js .course-stack[data-course-stack]{height:auto!important}
.js .course-stack__viewport{position:relative;top:auto;display:block;height:var(--card-h)}
.js .course-stack__viewport .course-card{inset:0;top:0;height:100%;transform:none}
.course-nav{
display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(18px,2vw,26px);
}
.course-nav__dots{display:flex;align-items:center;gap:8px}
.course-nav__dot{
width:8px;height:8px;padding:0;border:0;border-radius:var(--pill);cursor:pointer;
background:rgba(37,39,43,.18);transition:width .35s var(--ease),background .35s var(--ease);
}
.course-nav__dot:hover{background:rgba(37,39,43,.35)}
.course-nav__dot.is-on{width:28px;background:var(--sage-deep)}
.course-nav__count{min-width:64px;font-size:.78rem;letter-spacing:.08em;color:var(--ink-40);text-align:center}
.course-nav__count b{font-weight:700;color:var(--ink)}
.course-nav__arrow{
display:grid;place-items:center;width:42px;height:42px;padding:0;cursor:pointer;
border:0;border-radius:var(--r-sm);background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line);
transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.course-nav__arrow svg{width:18px;height:18px}
.course-nav__arrow:hover:not(:disabled){background:var(--graphite);color:#fff}
.course-nav__arrow:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){
.js .course-stack__viewport{height:var(--card-h)}
}
@media (prefers-reduced-motion:reduce){
.js .course-stack__viewport{display:block;position:relative}
.js .course-stack__viewport .course-card{position:absolute;inset:0;height:100%;min-height:0}
}
/* ==========================================================================
59. Онлайн-запись во всплывающем окне (форма CRM с поддомена zapis)
========================================================================== */
.booking-open,.booking-open body{overflow:hidden}
.booking-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.booking-modal.is-open{display:flex}
.booking-modal__back{position:absolute;inset:0;background:rgba(14,16,18,.7);backdrop-filter:blur(6px)}
.booking-modal__box{
position:relative;width:min(980px,100%);height:min(860px,100%);
background:#f8f8f7;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.booking-modal__frame{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .3s var(--ease)}
.booking-modal.is-loaded .booking-modal__frame{opacity:1}
.booking-modal__load{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-40);font-size:.9375rem}
.booking-modal.is-loaded .booking-modal__load{display:none}
.booking-modal__close{
position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;
border:0;border-radius:var(--pill);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(0,0,0,.08);
transition:background .2s var(--ease),color .2s var(--ease);
}
.booking-modal__close:hover{background:var(--graphite);color:#fff}
.booking-modal__close svg{width:18px;height:18px}
@media (max-width:640px){
.booking-modal{padding:0}
.booking-modal__box{width:100%;height:100%;border-radius:0}
.booking-modal__close{top:8px;right:8px}
}