/*
 * Главная aat-media.ru — «Плакатная редакция» (макет C, утвержден владельцем 2026-09-15).
 * Стили только для главной: editorial.css, site-unified.css, tailwind-local.css и старый шрифтовой слой здесь не подключаются.
 * Шрифты раздаются со своего сервера (fonts/poster/, OFL): Sofia Sans Extra Condensed — заголовки и цифры, Onest — текст.
 * Файлы вариативные: один файл на набор символов покрывает все начертания.
 */
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:600 900;font-display:swap;src:url("/fonts/poster/sofia-sans-extra-condensed-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:600 900;font-display:swap;src:url("/fonts/poster/sofia-sans-extra-condensed-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:600 900;font-display:swap;src:url("/fonts/poster/sofia-sans-extra-condensed-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/poster/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/poster/onest-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/poster/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#F4F3EE;
  --sheet:#FCFCF9;
  --ink:#0E0F0C;
  --lime:#C4FF2E;
  --blue:#1B5BFF;
  --blue-deep:#0B3BD6;
  --muted:#55564F;
  --rule:rgba(14,15,12,.9);
  --on-ink:#F4F3EE;
  --on-ink-soft:rgba(244,243,238,.74);
  --display:"Sofia Sans Extra Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --text:"Onest","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --g:clamp(16px,3.34vw,48px);
  --sec:clamp(64px,7.6vw,112px);
  --header:76px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--text);font-feature-settings:"tnum" 0;overflow-x:hidden;caret-color:var(--blue)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
p{margin:0}
h1,h2,h3{margin:0;font-weight:900}
ul,ol{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.on-dark :focus-visible,.on-blue :focus-visible{outline-color:var(--lime)}
html{scrollbar-color:var(--ink) var(--paper)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{overflow-x:clip}
.wrap{padding-inline:var(--g);max-width:1536px;margin-inline:auto}
.num{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em}
.icon{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter}

/* ---------- buttons: «Стикер» ----------
   a 1px ink outline on a flat backing plate. The lime request button is the sticker: no outline, slightly tilted on its plate,
   it straightens and lifts on hover and is pressed into the plate on click. A surface sets --plate, --lime-plate and --ring */
.btn{--face:var(--sheet);--fg:var(--ink);--edge:var(--ink);--off:4px;--r:0deg;--pl:var(--plate,var(--ink));
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin:0;padding:12px 22px;border:0;border-radius:0;
  background:var(--face);color:var(--fg);font:700 16px/1.1 var(--text);text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  box-shadow:inset 0 0 0 1px var(--edge),var(--off) var(--off) 0 var(--pl);transform:translate(0,0) rotate(var(--r));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s,color .2s}
.btn--lime{--face:var(--lime);--edge:transparent;--r:-1.5deg;--pl:var(--lime-plate,var(--ink))}
/* the small one is 40px tall, its hit area reaches 46px */
.btn--sm{--off:3px;min-height:40px;padding:8px 14px;font-size:15px}
.btn--sm::after{content:"";position:absolute;inset:-3px -2px}
@media (hover:hover){
  .btn:hover{transform:translate(-2px,-2px) rotate(0deg);box-shadow:inset 0 0 0 1px var(--edge),6px 6px 0 var(--pl)}
}
.btn:active{transform:translate(var(--off),var(--off)) rotate(0deg);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 var(--pl);transition-duration:.08s}
.btn:focus-visible{outline:2px solid var(--ring,var(--blue));outline-offset:3px}
/* dark surfaces: the outlined button lies on lime, the lime one on paper; blue keeps ink plates; rings turn lime */
.on-dark,.nextcase,.mbar,.menu__foot{--plate:var(--lime);--lime-plate:var(--paper);--ring:var(--lime)}
.on-blue{--ring:var(--lime)}
/* the tilt is drawn for a button of about 190px: a wide one turns less, so its far corner rises the same 5px, not 10–14px
   (phones and tablets: see «wide lime buttons» at the end) */
.form .btn--lime{--r:-.55deg}
/* round icon button: the same outline and plate */
.ibtn{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--sheet);color:var(--ink);text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--plate,var(--ink));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s}
.ibtn .icon{font-size:22px}
@media (hover:hover){.ibtn:hover{transform:translate(-2px,-2px);box-shadow:inset 0 0 0 1px var(--ink),5px 5px 0 var(--plate,var(--ink))}}
.ibtn:active{transform:translate(3px,3px);background:var(--lime);box-shadow:inset 0 0 0 1px var(--ink),0 0 0 var(--plate,var(--ink));transition-duration:.08s}
.ibtn:focus-visible{outline:2px solid var(--ring,var(--blue));outline-offset:3px}
/* phone, Telegram and mail are drawn with one round line */
.icon--line{stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.link .icon{font-size:18px;transition:transform .2s}
.link:hover .icon{transform:translate(3px,0)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;height:var(--header);padding-inline:var(--g) var(--g);background:rgba(244,243,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;align-self:stretch;padding:0 22px 0 0}
.brand img{height:36px;width:auto}
/* the nav fills the bar's height, so every item (and the services panel) starts right at the ink rule */
.nav{display:flex;align-self:stretch;align-items:stretch;gap:clamp(16px,2vw,32px);font-weight:600;font-size:15px}
.nav > a,.dd__btn{display:flex;align-items:center;text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 64%/0 .5em no-repeat;transition:background-size .25s}
.nav > a:hover,.dd__btn:hover,.dd.is-open .dd__btn{background-size:100% .5em}
/* the open / closed mark: a drawn plus whose upright bar folds away into a minus */
.pm-mark{position:relative;flex:none;width:11px;height:11px;--pmt:2px}
.pm-mark::before,.pm-mark::after{content:"";position:absolute;background:currentColor}
.pm-mark::before{left:0;right:0;top:50%;height:var(--pmt);margin-top:calc(var(--pmt) / -2)}
.pm-mark::after{top:0;bottom:0;left:50%;width:var(--pmt);margin-left:calc(var(--pmt) / -2);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
[aria-expanded="true"] > .pm-mark::after{transform:scaleY(0)}

/* services: the button opens a sheet that hangs from the header rule, ink outline and a flat lime backing */
.dd{position:relative;display:flex}
/* the ring is drawn inside the button, so the button gets inner air on both sides (and gives it back with its margins):
   the ring never touches «У» or the plus, the lime underline stays under the word */
.dd__btn{gap:9px;margin:0 -10px;padding:0 10px;border:0;color:inherit;font:inherit;cursor:pointer;background-origin:content-box;background-clip:content-box}
.dd__btn:focus-visible{outline-offset:-3px}
.dd__panel{position:absolute;z-index:5;top:calc(100% + 2px);left:-26px;width:424px;padding:4px 24px 18px;background:var(--sheet);color:var(--ink);border:2px solid var(--ink);border-top:0;box-shadow:8px 8px 0 var(--lime);
  visibility:hidden;clip-path:inset(0 -12px 100% -12px);transition:clip-path .16s cubic-bezier(.5,0,.75,0),visibility 0s .16s}
.dd.is-open .dd__panel,.no-js .dd:hover .dd__panel,.no-js .dd:focus-within .dd__panel{visibility:visible;clip-path:inset(0 -12px -12px -12px);transition:clip-path .42s cubic-bezier(.16,1,.3,1),visibility 0s}
.dd__list li{border-bottom:1px solid var(--ink)}
/* the same for the service pages: 12px of inner air taken from the sheet's padding, the words stay where they were */
.dd__list a{display:flex;align-items:center;min-height:56px;margin-inline:-12px;padding:8px 12px 4px;font:800 31px/1 var(--display);text-transform:uppercase;letter-spacing:.004em;color:var(--ink);text-decoration:none}
.dd__list a span{position:relative;z-index:0;display:inline-block}
.dd__list a span::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.12em;top:.18em;bottom:-.04em;background:var(--lime);transform-origin:0 50%;transform:skewX(-9deg) rotate(-1.4deg) scaleX(0);transition:transform .3s cubic-bezier(.7,0,.2,1)}
.dd__list a:hover span::before,.dd__list a:focus-visible span::before{transform:skewX(-9deg) rotate(-1.4deg) scaleX(1)}
.dd__list a:focus-visible{outline-offset:-3px}
.dd__more{display:flex;flex-wrap:wrap;gap:2px 22px;padding-top:12px;font:600 15px/1.2 var(--text)}
.dd__more a{display:inline-flex;align-items:center;min-height:34px;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.26em;transition:text-decoration-thickness .15s}
.dd__more a:hover{text-decoration-thickness:4px}
/* the call is a round icon button on its plate, as tall as the request sticker beside it; the number itself is in the menu, the form and the footer */
.top__phone{width:48px;height:48px;margin-right:-10px}
.top__phone .icon{font-size:22px}
.top .btn{min-height:48px;padding:10px 22px;font-size:15px}

/* ---------- hero ---------- */
/* the left column is the title and the lede, nothing else: the free height of the screen is shared 2:3 between the air above the title
   and the air between the title and the lede, and the lede's last line stands level with the lower edge of the sticker */
.hero{position:relative;overflow-x:clip;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:". stage" "title stage" ". stage" "body stage";grid-template-rows:minmax(clamp(28px,4vh,44px),2fr) auto minmax(36px,3fr) auto;min-height:clamp(700px,calc(100svh - var(--header)),880px);padding-inline:var(--g);max-width:1536px;margin-inline:auto}
.hero__title{grid-area:title;position:relative;z-index:3;align-self:start;font:900 clamp(56px,10.4vw,160px)/.93 var(--display);text-transform:uppercase;letter-spacing:-.012em}
.hl{display:block;white-space:nowrap}
.marker{position:relative;display:inline-block;z-index:0}
.marker::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.12em;top:.2em;bottom:-.02em;background:var(--lime);transform-origin:0 50%;transform:skewX(-9deg) rotate(-1.4deg) scaleX(1)}
.hero__body{grid-area:body;position:relative;z-index:2;padding-bottom:clamp(40px,7vh,72px);max-width:540px}
.hero__lede{font-size:clamp(17px,1.42vw,22px);line-height:1.5}
.hero__lede b{font-weight:700}
.hero__stage{grid-area:stage;position:relative;margin-right:calc(var(--g) * -1);min-height:100%}
.hero__plane{position:absolute;inset:24% 0 0 0;background:var(--blue)}
/* the box of the portrait itself: the quote and the sticker are placed from the face in the photo
   (face ≈ 27–75% across, chin at 64% down), so neither ever lands on it at any width */
.hero__fig{position:absolute;bottom:0;right:8%;height:min(94%,800px);aspect-ratio:432/578}
.hero__portrait{position:absolute;z-index:1;right:0;bottom:0;height:100%;width:auto;max-width:none;filter:contrast(1.04) drop-shadow(12px 12px 0 var(--ink));translate:calc(var(--px,0) * 10px) calc(var(--py,0) * 6px);transition:translate .5s cubic-bezier(.16,1,.3,1)}
/* the bubble sits on the shoulder under the chin, its tail points up at Maxim */
.hero__quote{position:absolute;z-index:3;top:calc(64.4% + 30px);left:calc(51% - 36px);width:clamp(270px,21vw,330px);margin:0;padding:14px 18px;background:var(--sheet);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);font:600 15px/1.4 var(--text);rotate:1.2deg}
.hero__quote::after{content:"";position:absolute;left:26px;top:-11px;width:18px;height:18px;background:inherit;border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.hero__quote p::before{content:"«"}
.hero__quote p::after{content:"»"}
.hero__quote footer{margin-top:10px;padding-top:8px;border-top:2px solid var(--ink);font-size:12px;font-weight:500;color:var(--muted)}
.hero__quote footer b{display:block;font:800 21px/1 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em}

/* sticker */
.sticker{position:relative;display:block;background:var(--lime);color:var(--ink);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);text-decoration:none;transform:translate(0,0) rotate(var(--r,-4deg)) scale(1);transition:transform .34s cubic-bezier(.45,1.9,.55,1),box-shadow .34s cubic-bezier(.2,.8,.2,1),opacity .25s}
/* right edge stays left of the face: 72.7% of the portrait width from its right side, plus air for the tilt and the shadow */
.sticker--hero{position:absolute;z-index:4;right:calc(72.7% + 36px);bottom:clamp(40px,7vh,72px);width:clamp(280px,22vw,340px);padding:16px 22px 18px;--r:-4deg}
.sticker--hero:hover{transform:translate(-4px,-3px) rotate(-3.5deg) scale(1.01);box-shadow:12px 12px 0 var(--ink)}
.sticker__tag{font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.06em}
.sticker__num{display:flex;align-items:baseline;gap:10px;margin:6px 0 2px;font:900 clamp(72px,6vw,96px)/.86 var(--display)}
.sticker__num small{font-size:.42em;font-weight:800}
.sticker__num [data-count]{min-width:2.9ch;display:inline-block}
.sticker__cap{display:block;font:600 15px/1.3 var(--text)}
.sticker__go{display:inline-block;margin-top:12px;font:700 15px/1.2 var(--text);text-decoration:underline 2px;text-underline-offset:4px;transition:text-decoration-thickness .2s}
.sticker:hover .sticker__go,.sticker:focus-visible .sticker__go{text-decoration-thickness:3px}
.hit{position:absolute;left:-44px;top:-40px;width:56px;height:56px;pointer-events:none;overflow:visible}
.hit path{stroke:var(--ink);stroke-width:4;fill:none;stroke-linecap:round}
.hit--m{display:none}

/* hero animation (JS only, final state is the default) */
.js .hero .hl{clip-path:inset(-.35em -100vw 100% -.3em);transform:translateY(.28em)}
.js .hero.is-go .hl{clip-path:inset(-.35em -100vw -.35em -.3em);transform:none;transition:clip-path .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .hero.is-go .hl--2{transition-delay:.09s}
.js .hero.is-go .hl--3{transition-delay:.18s}
.js .hero .marker::before{transform:skewX(-9deg) rotate(-1.4deg) scaleX(0)}
.js .hero.is-go .marker::before{transform:skewX(-9deg) rotate(-1.4deg) scaleX(1);transition:transform .6s cubic-bezier(.7,0,.2,1) .72s}
.js .hero .hero__body,.js .hero .hero__quote{opacity:0;transform:translateY(14px)}
.js .hero.is-go .hero__body,.js .hero.is-go .hero__quote{opacity:1;transform:none;transition:opacity .6s ease-out .5s,transform .8s cubic-bezier(.16,1,.3,1) .5s}
.js .hero.is-go .hero__quote{transition-delay:1.1s}
.js .hero .hero__portrait{clip-path:inset(100% -80px -80px -80px)}
.js .hero.is-go .hero__portrait{clip-path:inset(-80px -80px -80px -80px);transition:clip-path 1s cubic-bezier(.16,1,.3,1) .15s,translate .5s cubic-bezier(.16,1,.3,1)}
/* the sticker slides up from the lower left, hangs lifted while the number counts, then slaps down in place:
   every step moves away from the face or stays beside it */
.js .hero:not(.is-go) .sticker--hero:not(.is-stuck){opacity:0;transform:translate(-56px,110px) rotate(-12deg) scale(.98)}
.js .hero .sticker--hero:not(.is-stuck){transform:translate(2px,18px) rotate(-6deg) scale(1.03);box-shadow:12px 18px 0 rgba(14,15,12,.22);transition:transform .8s cubic-bezier(.16,1,.3,1) .9s,box-shadow .8s ease .9s,opacity .3s ease .9s}
.hit path{stroke-dasharray:40;stroke-dashoffset:0}
.js .sticker:not(.is-stuck) .hit path{stroke-dashoffset:40}
.js .sticker.is-stuck .hit path{transition:stroke-dashoffset .28s cubic-bezier(.2,.8,.2,1) .12s}
.hero__stage.is-thud{animation:thud .22s cubic-bezier(.3,0,.3,1)}
@keyframes thud{40%{transform:translateY(3px)}}

/* ---------- section heads ---------- */
.h2{font:900 clamp(48px,6.8vw,106px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.008em;text-wrap:balance}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:52ch}

/* ---------- pains ---------- */
.pains{padding-block:var(--sec) calc(var(--sec) * .8)}
.pains__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(36px,4vw,64px)}
.pains__head .lead{padding-bottom:6px}
/* главная: синий мазок под «когда…», как на странице стоматологии (там .pains__stroke); привязан к слову, размеры в долях кегля */
.pains__when{position:relative;z-index:0;white-space:nowrap}
.pains__swash{position:absolute;z-index:-1;left:1.49em;top:.64em;width:2.19em;max-width:none;height:auto;pointer-events:none}
@media (max-width:980px){.pains__swash{left:1.44em;top:.73em;width:2.1em}}
.pains__list{border-bottom:2px solid var(--ink)}
.pain{display:grid;grid-template-columns:56px minmax(0,6.4fr) minmax(0,4.6fr);gap:clamp(18px,2.4vw,40px);align-items:start;padding:clamp(22px,2.4vw,34px) 0;border-top:2px solid var(--ink);cursor:pointer;transition:background-color .2s}
.pain:hover .pain__box{background:var(--lime)}
.pain__box{width:52px;height:52px;border:3px solid var(--ink);display:grid;place-items:center;margin-top:4px;background:var(--sheet);transition:background-color .2s}
.pain__box .icon{font-size:30px;stroke-width:3.4;opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s cubic-bezier(.4,1.8,.6,1)}
.pain input:checked ~ .pain__box{background:var(--ink);color:var(--lime)}
.pain input:checked ~ .pain__box .icon{opacity:1;transform:none}
.pain input:focus-visible ~ .pain__box{outline:3px solid var(--blue);outline-offset:3px}
.pain__title{font:800 clamp(34px,4.2vw,64px)/.9 var(--display);letter-spacing:-.004em}
.pain__title span{position:relative;z-index:0;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(var(--lime),var(--lime)) 0 88%/0% .62em no-repeat;transition:background-size .45s cubic-bezier(.7,0,.2,1)}
.pain input:checked ~ .pain__title span{background-size:100% .62em}
.pain__fix b{display:block;font:800 clamp(22px,1.9vw,28px)/1.05 var(--display);text-transform:uppercase;margin-bottom:8px;letter-spacing:.005em}
.pain__fix p{color:var(--muted);font-size:16px}
.pains__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-top:28px}
.pains__foot p{font-size:18px;max-width:56ch}
.pains__foot strong{font-weight:700}

/* ---------- cases ---------- */
.on-dark{background:var(--ink);color:var(--on-ink)}
.on-blue{background:var(--blue);color:#fff}
.on-lime{background:var(--lime);color:var(--ink)}
.on-paper{background:var(--paper);color:var(--ink)}
.cases__intro{padding-block:var(--sec) clamp(40px,4.4vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}
.cases__intro .lead{color:var(--on-ink-soft)}
/* the niche switcher sticks under the header only while the reader is inside the case flow */
.cases__flow{position:relative}
.case-nav{position:sticky;top:var(--header);z-index:40;background:var(--paper);color:var(--ink);border-block:2px solid var(--ink);transition:opacity .16s ease,visibility .16s ease}
.case-nav.is-past{opacity:0;visibility:hidden;pointer-events:none}
.case-nav__row{position:relative;display:flex;max-width:1536px;margin-inline:auto;padding-inline:var(--g);scroll-padding-inline:var(--g);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.case-nav__row::-webkit-scrollbar{display:none}
.case-nav a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:56px;padding:2px 12px 0;border-left:2px solid var(--ink);font:800 19px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;text-decoration:none;transition:background-color .2s,color .2s}
.case-nav a:last-child{border-right:2px solid var(--ink)}
/* when the row is wider than its box, the side that still has niches fades out: the cut itself is the hint */
.case-nav__row.is-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.case-nav__row.is-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
.case-nav__row.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.case-nav a:hover{background:var(--lime)}
.case-nav a.is-active{background:var(--ink);color:var(--lime)}
.case-nav a:focus-visible{outline:3px solid var(--blue);outline-offset:-6px}
.case-nav a.is-active:focus-visible{outline-color:var(--lime)}
.poster{position:relative;overflow:hidden}
.poster[hidden]{display:none}
.poster.on-dark{--accent:var(--lime);--line:rgba(244,243,238,.28);--soft:var(--on-ink-soft)}
.poster.on-lime{--accent:var(--ink);--line:rgba(14,15,12,.34);--soft:#3B3C35}
.poster.on-blue{--accent:#fff;--line:rgba(255,255,255,.42);--soft:#fff}
.poster.on-blue .trio dt{opacity:1}
/* a paper sheet on the paper page still needs its lower edge */
.poster.on-paper{border-bottom:2px solid var(--ink)}
.poster.on-paper{--accent:var(--blue);--line:rgba(14,15,12,.24);--soft:var(--muted)}
/* switching cases: the sheet stays, its contents settle in */
.poster.is-in .poster__in > *{animation:case-in .55s cubic-bezier(.16,1,.3,1) both}
.poster.is-in .poster__in > :nth-child(2){animation-delay:.04s}
.poster.is-in .poster__in > :nth-child(3){animation-delay:.08s}
.poster.is-in .poster__in > :nth-child(n+4){animation-delay:.12s}
@keyframes case-in{from{opacity:0;transform:translateY(18px)}}
.cases__end{padding-block:clamp(48px,5vw,80px) 12px}
.poster__in{padding-block:clamp(56px,6.4vw,100px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.poster__meta{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-bottom:18px;border-bottom:2px solid currentColor;font:700 14px/1.3 var(--text);text-transform:uppercase;letter-spacing:.06em}
.giant{font:900 clamp(132px,23vw,372px)/.8 var(--display);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.trio{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);padding-top:26px;border-top:2px solid currentColor}
.trio dt{font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;opacity:.8}
.trio dd{margin:0;font-size:16px;line-height:1.5}
.trio dd b{display:block;font:800 clamp(22px,1.8vw,27px)/1.02 var(--display);margin-bottom:6px}

/* one poster for every case: meta, the giant result, the case's own figures, then task / what we did / result */
.pc .figure{grid-column:1/8;position:relative;padding-top:clamp(28px,3vw,44px)}
.pc .giant{color:var(--accent);display:flex;align-items:flex-end;gap:.06em}
.pc .giant small{font-size:.3em;line-height:.9;padding-bottom:.08em;word-spacing:.14em}
.pc .figure__cap{margin-top:14px;max-width:21ch;text-wrap:balance;font:800 clamp(28px,2.8vw,44px)/1 var(--display);text-transform:uppercase}
.tally{grid-column:9/13;align-self:end;margin:0;padding-top:clamp(28px,3vw,44px)}
.tally div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.tally div:last-child{border-bottom:0}
.tally dd{order:-1;margin:0;font:800 clamp(40px,3.8vw,60px)/.95 var(--display);font-variant-numeric:lining-nums;white-space:nowrap}
.tally dt{font-size:15px;line-height:1.3;color:var(--soft)}
.pc .trio{margin-top:clamp(40px,4vw,64px);border-color:currentColor}
.pc .trio dd > span{color:var(--soft)}
.sticker--flag{position:absolute;right:clamp(0px,1vw,20px);bottom:0;padding:12px 18px 13px;--r:-4deg;font:800 clamp(24px,2.2vw,32px)/.95 var(--display);text-transform:uppercase;box-shadow:8px 8px 0 var(--ink)}

/* dental */
.p-dental .poster__in{row-gap:0}
.p-dental .figure{grid-column:1/8;padding-top:clamp(28px,3vw,44px)}
.p-dental .giant{color:var(--lime);display:flex;align-items:flex-end;gap:.06em}
.p-dental .giant small{font-size:.3em;line-height:.9;padding-bottom:.08em;color:var(--on-ink);word-spacing:.14em}
.p-dental .figure__cap{margin-top:14px;font:800 clamp(28px,2.8vw,44px)/1 var(--display);text-transform:uppercase;color:var(--on-ink)}
.p-dental .figure__cap span{color:var(--lime)}
.funnel{grid-column:9/13;align-self:end;padding-top:clamp(28px,3vw,44px)}
.funnel__h{font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;color:var(--on-ink-soft);margin-bottom:6px}
.funnel li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid rgba(244,243,238,.28)}
.funnel li:last-child{border-bottom:0}
.funnel .num{font-size:clamp(40px,3.8vw,60px);font-weight:800;line-height:.95}
.funnel li span:last-child{font-size:15px;line-height:1.3;color:var(--on-ink-soft)}
.funnel li.is-key .num{color:var(--lime)}
.p-dental .trio{grid-column:1/8;margin-top:clamp(40px,4vw,64px);grid-template-columns:repeat(3,minmax(0,1fr));border-color:rgba(244,243,238,.9)}
.p-dental .trio dd{color:var(--on-ink-soft)}
.p-dental .trio dd b{color:var(--on-ink)}
/* quotes: one system for specialists and clients */
.say{position:relative;margin:0;display:flex;flex-direction:column;color:var(--ink)}
.say blockquote{margin:0;flex:1 1 auto}
.say mark{color:inherit;background:linear-gradient(var(--lime),var(--lime)) 0 90%/100% .66em no-repeat;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.qm{display:block;width:74px;height:58px;fill:var(--lime);stroke:var(--ink);stroke-width:5;stroke-linejoin:miter;paint-order:stroke;overflow:visible}
.say__who{display:flex;align-items:center;gap:14px;margin-top:20px}
.say__id{display:grid;gap:3px;min-width:0}
.say__id b{font:900 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.say__id span{font-size:13px;line-height:1.35;color:var(--muted)}
/* each photo is framed on its own face: --z is the photo width against the circle, --x/--y put the face in the middle */
.ava{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--lime) no-repeat;background-size:var(--z,cover);background-position:var(--x,50%) var(--y,50%);box-shadow:3px 3px 0 var(--ink);-webkit-touch-callout:none;user-select:none}
/* the sheet is tilted, the text stays level so long quotes read cleanly */
.say--case,.say--card{isolation:isolate;--bg:var(--sheet);--sh:var(--lime);--off:10px;padding:43px clamp(21px,1.8vw + 3px,29px) 25px}
.say--case::before,.say--card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);border:3px solid var(--ink);box-shadow:var(--off) var(--off) 0 var(--sh);transform:rotate(var(--r,0deg))}
.say--case .qm,.say--card .qm{position:absolute;left:-16px;top:-30px;transform:rotate(calc(var(--r,0deg) * -2))}
.say--case{grid-column:9/13;align-self:start;margin-top:clamp(64px,5.4vw,84px);--r:1.6deg}
.say--case .qm{width:112px;height:88px;left:-22px;top:-50px}
.say--case blockquote p{font:700 clamp(24px,2vw,30px)/1.06 var(--display);letter-spacing:.002em}
.say--case .ava{width:56px;height:56px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}

/* realty */
.p-realty .poster__meta{border-color:var(--ink)}
.receipt-wrap{grid-column:1/6;grid-row:2/4;padding-top:clamp(36px,4vw,56px);align-self:start}
.receipt{background:var(--sheet);padding:26px 26px 40px;transform:rotate(-1.6deg);--m:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/22px 100%;-webkit-mask:var(--m);mask:var(--m);filter:none}
.receipt__h{display:flex;justify-content:space-between;gap:12px;font:800 20px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding-bottom:14px;border-bottom:2px dashed var(--ink)}
.receipt__h span:last-child{font:600 13px/1.4 var(--text);text-transform:none;letter-spacing:0;color:var(--muted)}
.receipt dl{margin:0}
.receipt .row{display:flex;align-items:baseline;gap:10px;padding:12px 0 8px}
.receipt dt{font-size:16px;white-space:nowrap}
.receipt .row::after{content:"";order:2;flex:1;border-bottom:2px dotted rgba(14,15,12,.55);transform:translateY(-5px)}
.receipt dt{order:1}
.receipt dd{order:3;margin:0;font:800 clamp(30px,2.7vw,40px)/1 var(--display);white-space:nowrap}
.receipt dd em{font-style:normal;font:700 14px/1 var(--text);background:var(--lime);padding:3px 6px;margin-left:8px;vertical-align:middle;position:relative;top:-4px}
.receipt .row--total{border-top:2px dashed var(--ink);margin-top:10px;padding-top:16px}
.receipt .row--total dd{font-size:clamp(40px,3.6vw,54px)}
.receipt__note{margin-top:8px;font-size:13px;color:var(--muted)}
.p-realty .figure{grid-column:6/13;grid-row:2;text-align:right;padding-top:clamp(20px,2.4vw,40px)}
.p-realty .giant{letter-spacing:-.03em}
.p-realty .figure__cap{margin-top:8px;margin-left:auto;max-width:18ch;text-wrap:balance;font:800 clamp(28px,2.8vw,44px)/1 var(--display);text-transform:uppercase}
.p-realty .story{grid-column:7/13;grid-row:3;margin-top:clamp(28px,3vw,48px)}
.p-realty .trio{grid-template-columns:1fr;gap:18px;border-color:var(--ink)}
.p-realty .trio > div{display:grid;grid-template-columns:130px 1fr;gap:16px}
.p-realty .trio dt{margin:6px 0 0}

/* auto */
.p-auto .figure{grid-column:1/8;padding-top:clamp(28px,3vw,44px);position:relative}
.p-auto .giant{color:#fff}
.p-auto .figure__cap{margin-top:12px;font:800 clamp(28px,2.8vw,44px)/1 var(--display);text-transform:uppercase;max-width:14ch}
.sticker--romi{position:absolute;right:clamp(0px,1vw,20px);bottom:0;padding:14px 20px 16px;--r:6deg;box-shadow:10px 10px 0 var(--ink)}
.sticker--romi .num{display:block;font:900 clamp(64px,6vw,96px)/.85 var(--display)}
.sticker--romi span{font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.06em}
.chain{grid-column:8/13;align-self:end;padding-top:40px}
.chain__h{font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;color:#fff;margin-bottom:10px}
.chain ol{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.chain li{display:flex;align-items:flex-end;gap:10px}
.chain li .num{display:block;font-size:clamp(58px,5.6vw,88px);font-weight:900;line-height:.85}
.chain li small{display:block;font:600 14px/1.2 var(--text);margin-top:6px}
.chain li+li{padding-left:14px;border-left:2px solid rgba(255,255,255,.5)}
.chain__note{margin-top:22px;padding-top:14px;border-top:2px solid rgba(255,255,255,.5);font-size:16px}
.chain__note b{font:800 24px/1 var(--display)}
.p-auto .trio{margin-top:clamp(40px,4vw,64px);border-color:#fff}
.p-auto .trio dt{opacity:1}
.nextcase{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 32px;align-items:center;background:var(--ink);color:var(--paper);padding:clamp(24px,3vw,44px);box-shadow:12px 12px 0 var(--lime)}
.nextcase h3{font:900 clamp(40px,4.4vw,70px)/.88 var(--display);text-transform:uppercase}
.nextcase h3 span{color:var(--lime)}
.nextcase__act{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:flex-end}
.nextcase .link{color:var(--paper)}

/* ---------- open / transparency ---------- */
.open{padding-block:var(--sec)}
.open__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(44px,5vw,80px)}
.open__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,5vw,88px);align-items:center}
.report-zone{position:relative;padding:44px clamp(12px,2vw,36px) 96px 0}
.report{background:var(--sheet);border:2px solid var(--ink);box-shadow:14px 14px 0 var(--blue);padding:clamp(18px,2vw,28px)}
.report__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.report__top b{display:block;font:800 26px/1 var(--display);text-transform:uppercase}
.report__top span{font-size:13px;color:var(--muted)}
.report table{width:100%;border-collapse:collapse;margin-top:6px}
.report th,.report td{text-align:left;padding:12px 0;border-bottom:1px solid rgba(14,15,12,.22);font-size:15px;font-weight:500}
.report td{text-align:right;font:800 clamp(28px,2.5vw,36px)/1 var(--display);font-variant-numeric:tabular-nums}
.report tr:last-child th,.report tr:last-child td{border-bottom:0}
.report td mark{background:var(--lime);padding:0 4px}
.report__h{margin-top:18px;font:800 16px/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.report__txt{margin-top:8px;font-size:16px;line-height:1.5}
.sticker--fact{position:absolute;padding:12px 16px 13px;font:800 clamp(22px,2vw,30px)/.95 var(--display);text-transform:uppercase;box-shadow:7px 7px 0 var(--ink);max-width:14ch}
.sticker--kpi{top:0;right:0;--r:5deg}
.sticker--access{left:-12px;bottom:6px;--r:-4deg;background:var(--blue);color:#fff}
.sticker--live{right:14%;bottom:0;--r:3deg;background:var(--ink);color:var(--lime);box-shadow:7px 7px 0 var(--lime)}
.js .sticker[data-slap]:not(.is-stuck){opacity:0;transform:translate(24px,-36px) rotate(calc(var(--r) * 3)) scale(1.3);box-shadow:26px 30px 0 rgba(14,15,12,.15)}
.commit li{padding:22px 0;border-top:2px solid var(--ink)}
.commit li:last-child{border-bottom:2px solid var(--ink)}
.commit h3{font:800 clamp(32px,3vw,46px)/.95 var(--display);text-transform:uppercase;margin-bottom:8px}
.commit p{font-size:16px;color:var(--muted);max-width:54ch}
.commit p b{color:var(--ink);font-weight:700}
.commit li.is-loud{background:var(--ink);color:var(--paper);padding-inline:min(20px,var(--g));margin-inline:calc(min(20px,var(--g)) * -1);border-color:var(--ink)}
.commit li.is-loud p{color:var(--on-ink-soft)}
.commit li.is-loud p b{color:var(--lime)}

/* ---------- team ---------- */
.team{padding-block:var(--sec);overflow:hidden;overflow:clip}
.team__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px;align-items:end;margin-bottom:clamp(32px,3.4vw,56px)}
.team__head .lead b{font-weight:700;background:var(--ink);color:var(--lime);padding:0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* one frame: the list starts level with the portraits and ends level with the card */
.crew{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"stage list" "card list";column-gap:clamp(28px,3.4vw,64px);align-items:stretch}
/* portraits sink below the ink rule: the cropped shoulders never show, and no photo is drawn larger than 282px tall;
   the stage is only as tall as the visible part, so heads start at its top edge, level with the list */
.crew__stage{grid-area:stage;position:relative;cursor:pointer;height:clamp(158px,14.4vw,205px);margin-right:12px;border-bottom:6px solid var(--ink);overflow:visible;clip-path:inset(-60px -60px 0 -60px)}
.mate{position:absolute;bottom:0;left:calc(15.5% + var(--i) * 13.2%);height:calc(var(--hh) * 1.38);max-height:282px;aspect-ratio:var(--ar);translate:-50% var(--sink,22%);z-index:calc(6 - var(--i));background:no-repeat 50% 100%/contain;filter:grayscale(1) contrast(1.06) brightness(1.02);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .35s ease;pointer-events:none;-webkit-touch-callout:none;user-select:none}
.mate:nth-child(4),.mate:nth-child(5){z-index:4}
.mate.is-on{z-index:10;transform:scale(1.03);filter:grayscale(0) contrast(1.04) drop-shadow(9px 0 0 var(--ink))}
/* all panels share one cell, so the card keeps the height of the longest one; only the sheet is tilted */
.crew__card{grid-area:card;position:relative;z-index:12;isolation:isolate;display:grid;margin:-30px 12px 0 0;padding:clamp(23px,2vw + 3px,33px) clamp(23px,2.2vw + 3px,37px) clamp(25px,2vw + 3px,33px)}
.crew__card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sheet);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);transform:rotate(-.5deg)}
.crew__panel{grid-area:1/1;min-width:0;display:flex;flex-direction:column}
.crew__panel.is-off{visibility:hidden}
.crew__panel:focus-visible{outline:3px solid var(--blue);outline-offset:8px}
.crew__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid var(--ink);font-size:14px;color:var(--muted)}
.crew__head b{font:900 26px/1 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em}
.crew__lbl{font:800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.1em}
.crew__zone{margin-top:4px;font:900 clamp(40px,3.8vw,60px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.004em}
.crew__line{margin-top:14px;font:700 18px/1.3 var(--text)}
.crew__txt{margin:6px 0 18px;font-size:16px;color:var(--muted);max-width:58ch}
.crew__dl{margin:auto 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;padding-top:14px;border-top:2px solid var(--ink)}
.crew__dl dt{font:800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.crew__dl dd{margin:0;font:600 15px/1.35 var(--text)}
.js .crew__panel:not([hidden]):not(.is-off){animation:panel-in .4s cubic-bezier(.16,1,.3,1)}
@keyframes panel-in{from{opacity:.2;transform:translateY(8px)}}
.crew__list{grid-area:list;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));border-bottom:2px solid var(--ink)}
.crew__who{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;gap:2px 16px;width:100%;padding:12px 14px;margin:0;border:0;border-top:2px solid var(--ink);background:transparent;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.crew__who b{grid-column:1;font:900 clamp(26px,2.3vw,36px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
.crew__who span{grid-column:1;font-size:13px;line-height:1.3;color:var(--muted)}
.crew__who i{grid-column:2;grid-row:1/3;font:700 14px/1.2 var(--text);font-style:normal;white-space:nowrap;padding:7px 10px;border:2px solid var(--ink)}
.crew__who:hover{background:rgba(14,15,12,.07)}
.crew__who[aria-selected="true"]{background:var(--ink);color:var(--lime)}
.crew__who[aria-selected="true"] span{color:var(--on-ink-soft)}
.crew__who[aria-selected="true"] i{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.crew__who:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.crew-m{display:none}

/* ---------- sliders (mobile) ---------- */
.track{position:relative;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline:3px solid var(--blue);outline-offset:-4px}
.on-dark .track:focus-visible{outline-color:var(--lime)}

/* ---------- formats ---------- */
.formats{padding-block:var(--sec)}
.formats__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px;align-items:end;margin-bottom:clamp(40px,4vw,64px)}
.stairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);align-items:end}
.tier{display:flex;flex-direction:column;padding:clamp(22px,2.2vw,34px);border:2px solid var(--ink);background:var(--sheet)}
.tier:nth-child(2){background:var(--blue);color:#fff;border-color:var(--blue)}
.tier:nth-child(3){background:var(--ink);color:var(--paper)}
.tier__step{display:flex;gap:4px;margin-bottom:22px}
.tier__step span{width:22px;height:8px;border:2px solid currentColor}
.tier__step span.on{background:currentColor}
.tier:nth-child(3) .tier__step span.on{background:var(--lime);border-color:var(--lime)}
.tier h3{font:900 clamp(48px,4.6vw,76px)/.86 var(--display);text-transform:uppercase}
.tier:nth-child(3) h3{color:var(--lime)}
.tier__goal{margin-top:10px;font:700 18px/1.3 var(--text)}
.tier__fit{margin-top:14px;font-size:15px;opacity:.86}
.tier__list{margin-top:18px;padding-top:14px;border-top:2px solid currentColor}
.tier__list li{position:relative;padding:5px 0 5px 22px;font-size:15px;line-height:1.35}
.tier__list li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:10px;background:currentColor}
.tier:nth-child(3) .tier__list li::before{background:var(--lime)}
.tier__res{margin-top:18px;padding:12px 14px;background:var(--lime);color:var(--ink);font-size:15px;line-height:1.35}
.tier__res i{font-style:normal;display:block;font:800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.tier .btn{align-self:flex-start;margin-top:22px}
.tier:nth-child(1){min-height:0}
.tier:nth-child(2){--ring:var(--lime)}
.tier:nth-child(3){--plate:var(--lime);--ring:var(--lime)}
.stairs .tier:nth-child(2){padding-top:calc(clamp(22px,2.2vw,34px) + clamp(0px,5vw,80px))}
.stairs .tier:nth-child(3){padding-top:calc(clamp(22px,2.2vw,34px) + clamp(0px,10vw,160px))}
.formats__note{margin-top:22px;font-size:15px;color:var(--muted)}

/* ---------- reviews ---------- */
.reviews{padding-block:var(--sec)}
.reviews__head{margin-bottom:clamp(64px,6vw,96px);max-width:24ch}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(48px,4.4vw,72px);align-items:start}
.wall__more,.wall__track{display:contents}
.say--lead{grid-column:1/8;grid-row:1/3;color:var(--on-ink);padding-top:12px;padding-right:clamp(0px,2vw,32px)}
.say--lead .qm{width:clamp(96px,9vw,138px);height:auto;aspect-ratio:84/66;stroke:none;margin-bottom:22px}
.say--lead blockquote p{font:700 clamp(36px,3.6vw,58px)/1 var(--display);letter-spacing:-.004em}
.say--lead mark{background:var(--lime);color:var(--ink);padding:0 .08em}
.say--lead .say__who{margin-top:28px}
.say--lead .ava{width:48px;height:48px;border-color:var(--paper);box-shadow:4px 4px 0 var(--lime)}
.say--lead .say__id b{color:var(--paper);font-size:24px}
.say--lead .say__id span{color:var(--on-ink-soft);font-size:14px}
.say--card{--off:9px}
.say--card blockquote p{font-size:16px;line-height:1.5}
.say--card:nth-child(1){grid-column:8/13;grid-row:1;--r:1.8deg}
.say--card:nth-child(2){grid-column:8/13;grid-row:2;--r:-1.4deg;margin-left:-28px}
.say--card:nth-child(3){grid-column:2/7;grid-row:3;--r:-1deg}
.say--card:nth-child(4){grid-column:7/12;grid-row:3;--r:1.3deg;margin-top:44px}
.say--lime{--bg:var(--lime);--sh:var(--blue)}
.say--lime mark{background:var(--ink);color:var(--lime)}
.say--lime .qm{fill:var(--sheet)}
.say--lime .say__id span{color:#3B3C35}
.say--blue{--bg:var(--blue);color:#fff}
.say--blue mark{background:var(--lime);color:var(--ink)}
.say--blue .say__id span{color:rgba(255,255,255,.88)}

/* ---------- faq ---------- */
.faq{padding-block:var(--sec)}
.faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.faq__side{position:sticky;top:calc(var(--header) + 32px)}
.faq__side p{margin-top:22px;font-size:17px;max-width:34ch}
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;display:grid;grid-template-columns:1fr 44px;gap:20px;align-items:center;padding:22px 0;cursor:pointer;font:800 clamp(26px,2.3vw,34px)/1 var(--display);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .pm{background:var(--lime)}
.pm{width:44px;height:44px;border:2px solid var(--ink);display:grid;place-items:center;transition:background-color .2s}
.pm .icon{font-size:22px;stroke-width:2.6}
.pm .icon{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq details[open] .pm{background:var(--ink);color:var(--lime)}
.faq details[open] .pm .icon{transform:rotate(45deg)}
.faq details p{padding:0 64px 24px 0;font-size:17px;line-height:1.55;max-width:62ch}

/* ---------- brief ---------- */
.brief{padding-block:var(--sec)}
.brief__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center}
.brief h2{font:900 clamp(64px,9vw,148px)/.84 var(--display);text-transform:uppercase}
.brief h2 span{display:inline-block;background:var(--lime);color:var(--ink);padding:0 .08em;transform:rotate(-2deg);margin-top:.06em}
.brief__lead{margin-top:28px;font-size:clamp(18px,1.4vw,21px);line-height:1.5;max-width:44ch}
.contacts{margin-top:32px;display:grid;gap:10px;font-size:17px}
.contacts a{display:inline-flex;align-items:center;gap:12px;font-weight:700;text-decoration:none;width:max-content}
.contacts a:hover{text-decoration:underline}
.contacts .icon{font-size:22px}
.form{background:var(--sheet);color:var(--ink);border:3px solid var(--ink);box-shadow:16px 16px 0 var(--ink);padding:clamp(22px,3vw,44px)}
.form h3{font:900 clamp(34px,3vw,46px)/.9 var(--display);text-transform:uppercase}
.form__sub{margin-top:10px;font-size:15px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips:empty{display:none}
.chip{font:600 13px/1.2 var(--text);background:var(--lime);border:2px solid var(--ink);padding:6px 9px}
.field{display:block;margin-top:18px}
.field span{display:block;font:700 14px/1 var(--text);margin-bottom:8px}
.field input{width:100%;height:58px;padding:0 16px;border:2px solid var(--ink);background:#fff;font-size:17px;border-radius:0;transition:box-shadow .2s}
.field input::placeholder{color:#6A6B63}
.field input:focus{outline:none;box-shadow:6px 6px 0 var(--blue)}
.agree{display:grid;grid-template-columns:26px 1fr;gap:12px;margin-top:18px;font-size:14px;line-height:1.4;cursor:pointer}
.agree input{position:absolute;opacity:0;width:1px;height:1px}
.agree__box{width:26px;height:26px;border:2px solid var(--ink);display:grid;place-items:center;background:#fff}
.agree__box .icon{font-size:18px;stroke-width:3.4;opacity:0}
.agree input:checked + .agree__box{background:var(--ink);color:var(--lime)}
.agree input:checked + .agree__box .icon{opacity:1}
.agree input:focus-visible + .agree__box{outline:3px solid var(--blue);outline-offset:3px}
.form .btn{width:calc(100% - 4px);margin-top:24px;min-height:60px;font-size:18px}
.form__status{margin-top:14px;font-size:14px;min-height:1.4em}
.form__alt{margin-top:6px;font-size:14px;color:var(--muted)}

/* ---------- services (added on the real page: the four directions and links to the service pages) ---------- */
.services{padding-block:var(--sec)}
.services__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(36px,4vw,64px)}
.services__head .lead{color:var(--on-ink-soft);padding-bottom:6px}
.svc-list{border-bottom:2px solid var(--on-ink)}
.svc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(18px,2.4vw,40px);align-items:start;padding:clamp(24px,2.6vw,38px) 0;border-top:2px solid var(--on-ink)}
.svc__title{font:900 clamp(48px,5.4vw,88px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance;transition:color .2s}
.svc:hover .svc__title,.svc:focus-within .svc__title{color:var(--lime)}
.svc__goal{font:700 clamp(18px,1.45vw,21px)/1.35 var(--text);max-width:40ch}
.svc__works{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:15px;line-height:1.35;color:var(--on-ink-soft)}
.svc__works li{position:relative;padding-left:18px}
.svc__works li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;background:var(--lime)}
.svc__links{display:grid;justify-items:start;gap:12px;padding-top:4px}
.svc__links a{font:800 clamp(22px,1.9vw,28px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--lime);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;transition:text-decoration-thickness .15s}
.svc__links a:hover{text-decoration-thickness:4px}
.services__foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(18px,2.4vw,40px);align-items:start;padding-top:34px}
.sticker--start{position:relative;justify-self:start;max-width:calc(100% - 14px);margin-top:4px;--r:-3deg;box-shadow:7px 7px 0 var(--on-ink)}
.services__note{font-size:18px;line-height:1.45;max-width:40ch;color:var(--on-ink-soft)}
.services__routes{display:grid;justify-items:start;gap:8px;font-weight:700}
.services__routes a{text-decoration:underline;text-decoration-thickness:2px}
.services__routes a:hover{color:var(--lime)}

/* ---------- footer ---------- */
.foot{padding-block:clamp(48px,5vw,72px) 40px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--lime)}
.foot__grid{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,3fr) minmax(0,2.6fr) minmax(0,3fr);gap:32px;align-items:start}
.foot__brand img{height:40px;width:auto}
.foot__brand p{margin-top:14px;font-size:14px;color:var(--on-ink-soft)}
.foot__sections{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-size:15px;font-weight:600}
.foot__h{margin-bottom:14px;font:800 15px/1 var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--lime)}
.foot__col ul{display:grid;gap:9px;font-size:15px;line-height:1.3;font-weight:500}
.foot__c address{display:grid;gap:9px;justify-items:start;font-style:normal;font-size:15px;line-height:1.3;font-weight:700}
.foot__c address span{font-weight:500;color:var(--on-ink-soft)}
.foot__legal{margin-top:44px;padding-top:18px;border-top:1px solid rgba(244,243,238,.25);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;font-size:13px;line-height:1.45;color:var(--on-ink-soft)}
.foot__docs{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot__legal a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

/* ---------- page services: skip link, legacy anchors, case links, form states, shared widgets ---------- */
.skip{position:absolute;z-index:100;left:var(--g);top:-80px;padding:12px 16px;background:var(--ink);color:var(--lime);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
/* old addresses from other pages (/#quiz, /#tariffs, /#about, /#why-us, /#chto-delaem) land on the top of their sections */
.pains,.open,.team,.services,.formats,.brief{position:relative}
.anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.form{--err:#B42318;--ring:var(--blue)}
/* the paper form sits on the blue section: its links and controls keep the blue ring of paper surfaces */
.on-blue .form :focus-visible{outline-color:var(--blue)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.field input[aria-invalid="true"]:focus{box-shadow:6px 6px 0 var(--err)}
.agree input[aria-invalid="true"] + .agree__box{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.form__status.is-error{color:var(--err);font-weight:600}
.form__status a{font-weight:700;white-space:nowrap}
/* while sending, the request button stays pressed into its plate */
.form[aria-busy="true"] .btn{--face:var(--ink);--fg:var(--lime);cursor:progress;transform:translate(var(--off),var(--off)) rotate(0deg);box-shadow:0 0 0 var(--pl)}
html body .aat-cookie-notice{font-family:var(--text)}
@media (min-width:981px){
  .foot__legal{padding-right:max(0px,calc(104px - var(--g)))}
  /* on the first screen the chat button would sit on the portrait: it shows up once the hero is scrolled away */
  html body #contact-widget.aat-contact-widget{transition:opacity .25s ease,visibility .25s ease}
  html.hero-in-view body #contact-widget.aat-contact-widget{opacity:0;visibility:hidden}
  html body #contact-widget.aat-contact-widget #contact-fab{border:1px solid var(--ink)!important;box-shadow:3px 3px 0 var(--ink)!important}
  html body #contact-widget.aat-contact-widget #contact-fab:hover,html body #contact-widget.aat-contact-widget #contact-fab:focus-visible{box-shadow:5px 5px 0 var(--ink)!important}
}

/* ---------- mobile bar ---------- */
.mbar{display:none}

/* ================= responsive ================= */
@media (max-width:1180px){
  .nav{display:none}
  .top{grid-template-columns:auto 1fr auto auto}
}
/* laptops: all eleven niches share the row — the label size follows the free width (54.3em is the sum of the labels),
   and only below ~1100px the row scrolls, with the faded edge as the hint */
@media (min-width:981px) and (max-width:1439px){
  .case-nav{--tp:7px}
  .case-nav a{padding-inline:var(--tp);letter-spacing:0;font-size:clamp(15px,calc((100vw - 2 * var(--g) - 40px - 22 * var(--tp)) / 54.3),19px)}
}
@media (min-width:981px) and (max-width:1120px){.case-nav{--tp:5px}}
@media (min-width:1241px) and (max-width:1439px){
  /* narrower screens: the portrait moves right and the lede narrows, so the sticker keeps clear of both face and text */
  .hero__fig{right:3%}
  .hero__body{max-width:min(520px,37vw)}
  .hero__quote{left:calc(51% - 80px);width:clamp(270px,22vw,290px);font-size:14px}
  .hero__quote::after{left:70px}
}
@media (min-width:981px) and (max-width:1240px){
  .hero__fig{height:74%;right:2%}
  .hero__quote{display:none}
  .sticker--hero{right:calc(72.7% + 30px);width:clamp(230px,22vw,270px);padding:14px 16px 16px}
  .sticker--hero .sticker__tag{letter-spacing:.03em}
  .sticker--hero .sticker__num{font-size:clamp(60px,5.8vw,74px)}
  .hero__body{max-width:min(520px,39vw)}
  /* role and zone share the second line, so the list stays as tall as portraits plus card */
  .crew__who{grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:5px;padding:9px 12px}
  .crew__who b{grid-column:1/-1;font-size:26px}
  .crew__who span{grid-column:1;grid-row:2}
  .crew__who i{grid-column:2;grid-row:2;justify-self:start;padding:2px 7px;font-size:13px}
}
@media (max-width:980px){
  :root{--header:62px}
  /* only the logo and the burger: the call and the request live in the bottom bar and in the menu */
  .top{gap:10px;grid-template-columns:minmax(0,1fr) auto}
  .brand{justify-self:start}
  .brand img{height:32px}
  .top__phone,.top > .btn{display:none}

  /* one composition on paper: the stage slides up under the title, so Maxim's head rises right beside «в деньгах.»
     (the last, shortest line) and the face starts below it. The photo is cut square at both sides from 69% of its height,
     so the stage ends at 86% (the ink rule) and the sticker, standing on that rule, covers the rest of the left cut;
     --ph is the photo height, --pr how far it bleeds past the right edge */
  .hero{--hfs:clamp(46px,14.2vw,112px);--ph:min(99.5vw,560px);--pr:max(-16.7vw,-65px);grid-template-columns:1fr;grid-template-areas:"title" "stage" "body";grid-template-rows:auto auto auto;min-height:0}
  /* air between the header rule and the first line grows with the width: about 28px from the rule to the caps on a 390px phone, 26px on 360 */
  .hero__title{padding-top:clamp(18px,5.8vw,40px);font-size:var(--hfs);line-height:.95}
  .hl{white-space:normal}
  .hero__stage{margin:calc(var(--hfs) * -.87 - var(--ph) * .078) calc(var(--g) * -1) 0;height:calc(var(--ph) * .86);min-height:0;clip-path:inset(-100vh -100vw 0 -100vw)}
  .hero__stage::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;border-bottom:3px solid var(--ink)}
  .hero__plane{display:none}
  /* the portrait box dissolves: photo and sticker are placed on the stage itself */
  .hero__fig{display:contents}
  .hero__portrait{top:0;bottom:auto;height:var(--ph);right:var(--pr);filter:contrast(1.04) drop-shadow(10px 10px 0 var(--ink))}
  .hero__quote{display:none}
  .sticker--hero{right:auto;top:auto;left:30px;bottom:12px;width:min(48vw,230px);padding:12px 12px 14px;--r:3deg}
  .sticker--hero:hover{transform:rotate(var(--r))}
  .sticker__num{font-size:clamp(50px,14vw,76px);gap:8px;margin:4px 0 0}
  .sticker__cap{font-size:13px}
  .sticker__go{margin-top:8px;font-size:13px;text-underline-offset:3px}
  .sticker__tag{display:block;font-size:11px;letter-spacing:.04em}
  .sticker__sep{display:none}
  .sticker__place{display:block}
  /* the burst is drawn from the sticker's own outer corner (border included), so it turns with the sticker and never drifts */
  .hit--d{display:none}
  .hit--m{display:block;left:-43px;top:-43px;width:40px;height:40px}
  /* on the phone the sticker hangs just above its place, clear of the face */
  .js .hero .sticker--hero:not(.is-stuck){transform:translate(-6px,-6px) rotate(7deg) scale(1.03)}
  /* the lede closes the first screen: the section gap that follows is the same as between the other sections */
  .hero__body{padding-top:26px;padding-bottom:12px;max-width:62ch}
  .pains__foot .btn--lime,.nextcase__act .btn--lime{--r:-.8deg}

  .pains__head,.cases__intro,.open__head,.team__head,.formats__head{grid-template-columns:1fr;gap:18px}
  .pain{grid-template-columns:44px minmax(0,1fr);row-gap:12px}
  .pain__box{width:44px;height:44px;margin-top:0}
  .pain__box .icon{font-size:24px}
  .pain__title{font-size:clamp(34px,9.6vw,56px)}
  .pain__fix{grid-column:2}
  .pain__fix p{display:none}
  .pain__fix b{margin-bottom:0;font-size:21px}
  .trio dd{font-size:15px}
  .pains__foot .btn{width:calc(100% - 4px)}

  .poster__in{grid-template-columns:1fr}
  .poster__in > *{grid-column:1/-1 !important;grid-row:auto !important}
  .giant{font-size:clamp(120px,40vw,300px)}
  .trio,.p-dental .trio{grid-template-columns:1fr;gap:20px}
  .funnel{padding-top:36px}
  .say--case{margin:72px 10px 0 16px;--r:1deg}
  .say--case .qm{width:88px;height:69px;left:-16px;top:-42px}
  .p-dental .giant{font-size:clamp(120px,38vw,300px)}
  .p-realty .figure{text-align:left;order:1}
  .p-realty .figure__cap{margin-left:0}
  .receipt-wrap{order:2;padding-top:36px}
  .p-realty .story{order:3}
  .p-realty .trio > div{grid-template-columns:1fr;gap:6px}
  .sticker--romi{position:relative;right:auto;top:auto;display:inline-block;margin-top:24px}
  .chain{padding-top:36px}
  .case-nav a{flex:none;min-height:50px;padding-inline:14px}
  .tally{padding-top:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .tally div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0 6px;border-bottom:0;border-top:1px solid var(--line)}
  .tally dd{font-size:clamp(36px,10.6vw,54px)}
  .tally dt{font-size:14px}
  .pc .figure__cap{max-width:none}
  .sticker--flag{position:relative;right:auto;bottom:auto;display:inline-block;margin-top:22px}
  .nextcase{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--lime);margin-right:8px}
  .nextcase__act{justify-content:flex-start}
  .nextcase__act .btn{width:calc(100% - 4px)}

  .open__grid{grid-template-columns:1fr}
  .report-zone{padding:40px 6px 0 0;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-start}
  .report-zone .report{flex:1 1 100%;margin-bottom:10px}
  .report__top{padding-right:118px}
  .report__top span{display:block;line-height:1.35}
  .sticker--fact{position:relative;inset:auto;font-size:22px}
  .sticker--kpi{position:absolute;top:0;right:0}

  /* shared slider */
  .track{display:grid;grid-template-columns:none;grid-auto-flow:column;gap:16px;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--g) * -1);padding-inline:var(--g);scroll-padding-inline:var(--g);-webkit-overflow-scrolling:touch}
  .track > *{scroll-snap-align:start;scroll-snap-stop:always}

  .team{padding-block:var(--sec)}
  .crew{display:none}
  .crew-m{display:block}
  /* team deck: one poster per person, one size for everyone. The cut-out portrait stands straight on a white sheet
     inside a heavy ink frame, the head breaks out over the top of the frame onto the lime, the name in huge caps runs across the chest,
     «Отвечает за» is a lime sticker slapped over the lower edge, and only two small lines follow on the lime.
     Sizes follow the card width (cqw): --h and --t (the empty strip above the hair) level the heads, --k enlarges
     every photo alike; no photo is drawn larger than its source (432–488 px wide) */
  .crew-m__track{grid-auto-columns:min(76vw,300px);gap:20px;padding-block:60px 26px}
  .deck{--k:1.15;container-type:inline-size;position:relative;display:flex;flex-direction:column;min-width:0}
  .deck__frame{position:relative;height:122cqw;border:3px solid var(--ink);background:var(--sheet);box-shadow:8px 8px 0 var(--ink)}
  .deck__pic{position:absolute;inset:0;clip-path:inset(-60cqw 0 0 0)}
  .deck__photo{position:absolute;left:50%;top:calc(-15cqw - var(--t) * var(--k));height:calc(var(--h) * var(--k));aspect-ratio:var(--ar);translate:-50% 0;background:no-repeat 50% 0/100% auto;filter:contrast(1.04);-webkit-touch-callout:none;user-select:none}
  /* the name is set on ink strips, one per line: it reads the same over the white ground and over a dark jumper */
  .deck__name{position:absolute;z-index:1;left:8px;right:6px;bottom:40px;font:900 18.5cqw/.9 var(--display);text-transform:uppercase;letter-spacing:.004em;color:var(--paper)}
  .deck__name span{display:block;width:max-content;max-width:100%;padding:.06em .09em 0;line-height:.84;background:var(--ink)}
  .deck__zone{position:absolute;z-index:2;left:-9px;bottom:-24px;max-width:calc(100% + 4px);padding:6px 12px 8px;background:var(--lime);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);rotate:-3deg}
  .deck:nth-child(even) .deck__zone{rotate:2.5deg}
  .deck__zone span{display:block;font:700 11px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em}
  .deck__zone b{display:block;font:900 25px/1 var(--display);text-transform:uppercase;white-space:nowrap}
  .deck__role{margin-top:42px;font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em}
  .deck__dl{margin:8px 0 0;display:grid;gap:0}
  .deck__dl div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:baseline;padding-block:7px;border-top:2px solid var(--ink)}
  .deck__dl dt{font:800 12px/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
  .deck__dl dd{margin:0;font:500 13px/1.35 var(--text);color:#3B3C35}

  .stairs{grid-auto-columns:min(86%,380px);gap:14px;padding-block:4px 18px}
  .stairs .tier:nth-child(n){padding-top:24px;margin-left:0}
  .tier .tier__list{margin-bottom:auto}
  .tier .btn{margin-top:20px}

  .reviews__head{margin-bottom:56px}
  .wall{display:block}
  .wall__more{display:block;margin-top:64px}
  .say--lead{padding:0}
  .say--lead .qm{width:84px;margin-bottom:16px}
  .say--lead blockquote p{font-size:clamp(32px,8.6vw,48px);line-height:1.02}
  .wall__track{display:grid;grid-auto-columns:min(84%,340px);gap:20px;padding-block:34px 22px}
  .say--card:nth-child(n){grid-column:auto;grid-row:auto;margin:0;--r:0deg}
  .say--card:nth-child(odd){--r:-1deg}
  .say--card:nth-child(even){--r:1deg}

  .faq__grid{grid-template-columns:1fr}
  .faq__side{position:static}
  .faq details p{padding-right:0}

  .brief__grid{grid-template-columns:1fr}
  .form .btn--lime{--r:-1deg}
  .form{box-shadow:10px 10px 0 var(--ink);margin-right:10px}

  .foot__grid{grid-template-columns:1fr}
  .foot{padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom))}

  /* the request sticker on its paper plate, then the call and Telegram circles on lime plates */
  .mbar{display:grid;grid-template-columns:minmax(0,1fr) 48px 48px;align-items:center;gap:14px;position:fixed;z-index:60;left:0;right:0;bottom:0;padding:10px 18px calc(12px + env(safe-area-inset-bottom)) 14px;background:var(--ink);border-top:2px solid var(--lime);transition:transform .3s var(--ease)}
  .mbar.is-hidden{transform:translateY(110%)}
  .mbar .btn{min-height:50px;min-width:0;padding:10px 14px;--r:-1.2deg}
  .mbar__i{width:48px;height:48px}
}
/* tablets: the same composition scaled from the width — the title grows with the screen, the photo is 72% of the width tall
   and bleeds 2% past the right edge, so the face starts just past «в деньгах.»; the sticker stands on the shoulder,
   its right edge 40px past the photo's left cut (51.8vw = 100% − the cut) and still clear of the face */
@media (min-width:601px) and (max-width:980px){
  .hero{--hfs:min(14.2vw,140px);--ph:72vw;--pr:-2vw}
  .sticker--hero{left:auto;right:calc(51.8vw - 40px);width:clamp(240px,38vw,380px);padding:14px 18px 16px}
  .sticker--hero .sticker__num{font-size:clamp(60px,10.2vw,100px)}
  .sticker--hero .sticker__tag{font-size:clamp(12px,1.4vw,14px)}
  .sticker--hero .sticker__cap{font-size:clamp(14px,1.6vw,16px)}
  .sticker--hero .sticker__go{font-size:clamp(13px,1.5vw,15px)}
}
@media (max-width:420px){
  .tier__fit{display:none}
  /* a format card fits between the header and the bottom bar */
  .stairs .tier:nth-child(n){padding:20px 20px 22px}
  .tier__step{margin-bottom:16px}
  .tier__list{margin-top:14px;padding-top:10px}
  .tier__list li{padding-block:4px}
  .tier__res{margin-top:14px;padding:10px 12px}
  .tier .btn{margin-top:16px}
  .stairs{padding-block:4px 14px}
  .receipt{padding:22px 18px 38px}
  .receipt dt{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.hero__portrait{translate:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}

/* ---------- real page additions: phones and tablets ---------- */
@media (max-width:980px){
  .services__head{grid-template-columns:1fr;gap:18px}
  .svc{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .svc__title{font-size:clamp(40px,11vw,64px)}
  .svc__works{margin-top:10px;gap:4px 18px;font-size:14px}
  .svc__links{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:4px}
  .svc__links a{font-size:22px}
  .services__foot{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:30px}
  .services__note{font-size:16px}
  .services__routes{display:flex;flex-wrap:wrap;gap:8px 22px}

  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .foot__brand,.foot__c{grid-column:1/-1}
  .foot__legal{margin-top:36px}
  .foot__col ul,.foot__c address{gap:12px}

  /* the bar has its own call, request and Telegram buttons — the floating chat button is not needed here */
  html body #contact-widget.aat-contact-widget{display:none!important}
  /* while the cookie notice is shown, the bar stands above it instead of under it */
}

/* ---------- request popup: the request form on its own poster sheet over the dimmed page ----------
   The <dialog> itself is the dimmed page and the scroller, the sheet is the form: an ink outline on a flat lime plate.
   On a phone the sheet stands on the bottom edge and grows up to the full screen, the cross stays in reach while it scrolls */
.pop{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(20px,5vh,56px) var(--g);border:0;background:rgba(14,15,12,.74);color:var(--ink);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pop[open]{display:flex;flex-direction:column}
.pop:focus{outline:none}
.pop::backdrop{background:transparent}
.pop .pop__sheet{position:relative;flex:none;width:min(100%,600px);margin:auto;padding:clamp(28px,3.2vw,42px) clamp(22px,3vw,42px) clamp(22px,2.4vw,32px);border:3px solid var(--ink);box-shadow:14px 14px 0 var(--lime)}
.pop__x{position:absolute;z-index:2;top:14px;right:14px}
.pop__x::before,.pop__x::after{content:"";position:absolute;left:13px;top:21px;width:18px;height:2px;border-radius:1px;background:currentColor}
.pop__x::before{transform:rotate(45deg)}
.pop__x::after{transform:rotate(-45deg)}
/* two lines at every width: «Посчитаем» and the lime strip «ваш проект» under it, as in the final form */
.pop__title{padding-right:52px;font:900 clamp(64px,5.4vw,80px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.004em}
.pop__title span{display:table;margin-top:.06em;padding:0 .08em;background:var(--lime);transform:rotate(-2deg)}
.pop__lead{margin-top:16px;font-size:16px;line-height:1.45;color:var(--muted);max-width:46ch}
.pop__picked{margin-top:16px}
.pop__picked-h{font:800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.pop__picked .chips{margin-top:8px}
.pop__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.pop .field{margin-top:18px}
.pop .agree{margin-top:16px}
.pop .btn--lime{--r:-.6deg;margin-top:22px}
.pop[open]{animation:pop-dim .22s ease-out}
.pop[open] .pop__sheet{animation:pop-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes pop-dim{from{background-color:rgba(14,15,12,0)}}
@keyframes pop-in{from{opacity:0;transform:translateY(24px) rotate(-1.4deg) scale(.985)}}
@keyframes pop-up{from{transform:translateY(64px)}}
/* while it is open the page under it keeps its place and width, and the fixed helpers step aside */
html.dialog-is-open{scrollbar-gutter:stable}
html.dialog-is-open body{overflow:hidden}
html.dialog-is-open .mbar{visibility:hidden}
html.dialog-is-open body #contact-widget.aat-contact-widget{visibility:hidden!important}
@media (max-width:600px){
  .pop{padding:28px 0 0}
  .pop .pop__sheet{width:100%;margin:auto 0 0;padding:16px 16px calc(14px + env(safe-area-inset-bottom));border-width:3px 0 0;box-shadow:0 -8px 0 var(--lime)}
  .pop[open] .pop__sheet{animation-name:pop-up;animation-duration:.42s}
  /* while the sheet scrolls under it, a ring of paper keeps the text from touching the cross */
  .pop__x{position:sticky;top:10px;display:grid;margin:0 -2px -34px auto;box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--ink),0 0 0 6px var(--sheet)}
  .pop__title{margin-top:8px;font-size:clamp(46px,14vw,60px)}
  .pop__lead{margin-top:12px;font-size:15px}
  .pop__picked{margin-top:12px}
  .pop__row{grid-template-columns:minmax(0,1fr)}
  .pop .field{margin-top:12px}
  .pop .field span{margin-bottom:6px}
  .pop .field input{height:52px}
  .pop .agree{margin-top:14px;font-size:13px;line-height:1.35}
  .pop .btn--lime{min-height:54px;margin-top:16px;font-size:17px}
  .pop .form__status{margin-top:10px}
  .pop .form__alt{margin-top:2px}
}

/* ---------- phone and tablet menu (up to 1180px, where the header nav does not fit):
   the burger in the header opens one full-screen paper sheet with the page's sections ---------- */
.burger,.menu{display:none}
/* a section reached from the menu or the services sheet takes focus for the keyboard, without a ring around the whole section */
[data-menu-landing]:focus{outline:none}
@media (max-width:980px){
  .brand{padding-right:0}
}
/* tablets in landscape and small laptops: the full phone number and the request button stay, the burger follows them */
@media (min-width:981px) and (max-width:1180px){
  .top{gap:24px}
  .top__phone{justify-self:end}
}
@media (max-width:1180px){
  /* the burger is a round icon button like the call and Telegram ones: a 1px ink ring and three drawn lines that fold into a cross */
  .burger{position:relative;display:block;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .15s}
  .burger::before,.burger::after,.burger__bar{content:"";position:absolute;left:13px;width:18px;height:2px;border-radius:1px;background:currentColor;transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .2s}
  .burger::before{top:16px}
  .burger__bar{top:21px}
  .burger::after{top:26px}
  .burger[aria-expanded="true"]::before{transform:translateY(5px) rotate(45deg)}
  .burger[aria-expanded="true"]::after{transform:translateY(-5px) rotate(-45deg)}
  .burger[aria-expanded="true"] .burger__bar{opacity:0;transform:scaleX(0)}
  @media (hover:hover){.burger:hover{transform:translate(-1px,-1px);box-shadow:inset 0 0 0 1px var(--ink),2px 2px 0 var(--ink)}}
  .burger:active{transform:none;background:var(--lime);box-shadow:inset 0 0 0 1px var(--ink);transition-duration:.08s}
  .burger:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .no-js .burger{display:none}

  .menu{position:fixed;z-index:65;inset:var(--header) 0 0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding-inline:var(--g);background:var(--paper);color:var(--ink);-webkit-overflow-scrolling:touch;
    clip-path:inset(0 0 100% 0);transition:clip-path .22s cubic-bezier(.5,0,.75,0)}
  .menu[hidden]{display:none}
  .menu.is-open{clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.16,1,.3,1)}
  .menu:not(.is-open){pointer-events:none}
  /* the list takes the height the screen has: the word size follows both the width and the height */
  /* the word size is taken from the free height (screen minus header, contacts and air, shared by seven rows)
     and from the width (the longest word, «Прозрачность», is about 5.3em); the rows then share what is left evenly */
  .menu__nav{flex:1 0 auto;display:flex;flex-direction:column;padding-block:clamp(4px,1.2svh,14px) clamp(16px,2.6svh,32px)}
  .menu__list{--mfs:clamp(34px,min(16vw,calc((100svh - var(--header) - 290px) / 7 / .9 - 16px)),104px);flex:1 0 auto;display:flex;flex-direction:column}
  .menu__list > li{flex:1 0 auto;display:flex;border-bottom:1px solid var(--ink)}
  .menu__link{flex:1;display:flex;align-items:center;min-height:max(48px,calc(var(--mfs) * .9 + 14px));padding:.12em 0 .04em;font:900 var(--mfs)/.9 var(--display);text-transform:uppercase;letter-spacing:-.004em;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .menu__link span{position:relative;z-index:0;display:inline-block}
  /* the same lime marker as «в деньгах.» on the first screen: under the current section and under a finger */
  .menu__link span::before,.menu__sublist a span::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.12em;top:.2em;bottom:-.02em;background:var(--lime);transform-origin:0 50%;transform:skewX(-9deg) rotate(-1.4deg) scaleX(0);transition:transform .36s cubic-bezier(.7,0,.2,1)}
  .menu__link[aria-current] span::before,.menu__link.is-current span::before,.menu__link:active span::before,.menu__sublist a:active span::before{transform:skewX(-9deg) rotate(-1.4deg) scaleX(1)}
  .menu__link:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
  @media (hover:hover){.menu__link:hover span::before,.menu__sublist a:hover span::before{transform:skewX(-9deg) rotate(-1.4deg) scaleX(1)}}

  /* «Услуги» opens in place: the word stays as big as the other sections, the service pages follow a size smaller */
  .menu__list > .menu__group{flex-direction:column}
  .menu__link--group{flex:1 0 auto;width:100%;justify-content:space-between;gap:16px;margin:0;border:0;background:transparent;text-align:left;cursor:pointer}
  .menu__link--group .pm-mark{width:.36em;height:.36em;margin-right:2px;--pmt:max(3px,.07em)}
  .menu__sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .24s cubic-bezier(.5,0,.75,0),visibility 0s .24s}
  .menu__group.is-open .menu__sub{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .46s cubic-bezier(.16,1,.3,1),visibility 0s}
  .menu__subin{min-height:0;overflow:hidden;padding-left:clamp(18px,5.4vw,44px)}
  .menu__sublist{border-top:2px solid var(--ink)}
  .menu__sublist li + li{border-top:1px solid rgba(14,15,12,.22)}
  /* the focus ring is drawn inside the link: the link borrows inner air on the left from the indent (the words stay in place)
     and keeps its right edge inside the rolling box, which clips anything past it */
  .menu__sublist a{display:flex;align-items:center;min-height:max(46px,calc(var(--mfs) * .52 + 14px));margin-left:-12px;padding:.14em 12px .06em;font:800 clamp(24px,calc(var(--mfs) * .5),40px)/1 var(--display);text-transform:uppercase;letter-spacing:.004em;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .menu__sublist a span{position:relative;z-index:0;display:inline-block}
  .menu__sub2{display:flex;flex-wrap:wrap;gap:0 14px;padding:2px 0 12px;border-top:1px solid rgba(14,15,12,.22)}
  .menu__sub2 a{display:inline-flex;align-items:center;min-height:44px;margin-left:-8px;padding-inline:8px;font:600 15px/1.2 var(--text);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.26em}
  .menu__sublist a:focus-visible,.menu__sub2 a:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}

  .menu__foot{display:grid;gap:10px;margin-inline:calc(var(--g) * -1);padding:clamp(14px,2.4svh,28px) var(--g) calc(clamp(10px,1.8svh,22px) + env(safe-area-inset-bottom));background:var(--ink);color:var(--on-ink)}
  .menu__reach{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
  .menu__reach a{display:inline-flex;align-items:center;gap:10px;min-height:46px;font:800 clamp(30px,9vw,44px)/1 var(--display);letter-spacing:.01em;color:var(--on-ink);text-decoration:none;white-space:nowrap}
  .menu__reach .icon{font-size:.62em}
  .menu__reach .menu__tg{color:var(--lime)}
  .menu__cta{min-height:54px;margin:4px 4px 6px 0;font-size:17px;--r:-.8deg}
  .menu__more{display:flex;flex-wrap:wrap;gap:0 22px}
  .menu__more a{display:inline-flex;align-items:center;min-height:38px;font:600 14px/1.2 var(--text);color:var(--on-ink-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
  .menu__foot :focus-visible{outline:3px solid var(--lime);outline-offset:3px}

  /* opening: the sheet unrolls down from the header rule, then the words and the contacts come in one after another */
  .js .menu__list > li,.js .menu__foot{opacity:0;transform:translateY(14px);transition:opacity .12s ease-out,transform 0s .12s}
  .js .menu.is-open .menu__list > li,.js .menu.is-open .menu__foot{opacity:1;transform:none;transition:opacity .3s ease-out calc(80ms + var(--i) * 34ms),transform .55s cubic-bezier(.16,1,.3,1) calc(80ms + var(--i) * 34ms)}

  /* while the menu is open: the page under it does not scroll, the header keeps only the logo and the cross,
     the phone bar, the chat button and the cookie notice step aside */
  html.menu-is-open body{overflow:hidden}
  html.menu-is-open .top{z-index:70;background:var(--paper)}
  html.menu-is-open .top__phone,html.menu-is-open .top .btn{visibility:hidden;opacity:0}
  html.menu-is-open .mbar{visibility:hidden}
  html.menu-is-open body #contact-widget.aat-contact-widget{visibility:hidden!important}
}
@media (min-width:601px) and (max-width:1180px){
  .menu__cta{justify-self:start;min-width:340px}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu.is-open,.menu__list > li,.menu__foot,.menu__sub,.pm-mark::after,.dd__panel,.burger,.burger::before,.burger::after,.burger__bar{transition:none!important}
  /* buttons lie straight and move without easing */
  .btn{--r:0deg!important}
  .btn,.ibtn{transition:none!important}
}

/* wide lime buttons on phones and tablets (the pains and cases CTAs, the final form, the phone bar, the menu):
   the far corner of a tilted button rises about 5px and never more than 6px, as on a 190px desktop button,
   so the wider the button, the smaller the angle; up to 430px the angles set above already keep to it */
@media (min-width:431px) and (max-width:600px){
  .pains__foot .btn--lime,.nextcase__act .btn--lime,.audit__act .btn--lime,.menu__cta{--r:-.55deg}
  .brief .form .btn--lime{--r:-.6deg}
  .mbar .btn{--r:-.7deg}
}
@media (min-width:601px) and (max-width:980px){
  .pains__foot .btn--lime,.nextcase__act .btn--lime,.audit__act .btn--lime{--r:-.35deg}
  .brief .form .btn--lime{--r:-.38deg}
  .mbar .btn{--r:-.4deg}
}

/* ================= блоки 2026-09-16: вход в тест, «Не возьмемся, если…», статус кейса, аудит, проверяемые отзывы, квиз в попапе ================= */
/* ---------- вход в тест: стикер-кнопка в герое и в финальном блоке, тот же стикер плавает внизу ---------- */
.quizbtn,.quizfab{background:var(--lime);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(var(--r,-2deg));transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .25s ease,visibility 0s}
.quizbtn__k{display:block;font:700 11px/1.2 var(--text);text-transform:uppercase;letter-spacing:.08em}
.quizbtn__t{display:block;margin-top:4px;font:800 clamp(20px,1.6vw,24px)/1 var(--display);text-transform:uppercase}
.quizbtn{position:relative;display:inline-block;margin-top:30px;padding:13px 20px 14px 18px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.quizbtn .quizbtn__k{font-size:12px}
.quizbtn .quizbtn__t{margin-top:5px;font-size:clamp(24px,2vw,30px)}
@media (hover:hover){
  .quizbtn:hover{transform:rotate(0deg) translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}
}
.quizbtn:active{transform:rotate(0deg) translate(4px,4px);box-shadow:3px 3px 0 var(--ink);transition-duration:.08s}
.quizbtn:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.quizbtn--brief{margin-top:34px;--r:-1.5deg}
.on-blue .quizbtn--brief:focus-visible{outline-color:var(--lime)}

/* ---------- «Не возьмемся, если…»: лист-отказ сразу под списком болей ---------- */
.nogo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,56px);margin-top:clamp(40px,4.4vw,64px);padding:clamp(24px,2.8vw,40px) clamp(22px,2.6vw,40px) clamp(28px,3vw,44px);background:var(--ink);color:var(--paper);box-shadow:12px 12px 0 var(--lime)}
.nogo__title{font:900 clamp(40px,4.6vw,72px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.006em}
.nogo__title span{color:var(--lime)}
.nogo__head p{margin-top:16px;font-size:16px;line-height:1.5;color:var(--on-ink-soft);max-width:34ch}
.nogo__list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding:18px 0;border-top:1px solid rgba(244,243,238,.28)}
.nogo__list li:first-child{border-top:0;padding-top:0}
.nogo__list li:last-child{padding-bottom:0}
.nogo__box{grid-row:1/3;width:40px;height:40px;margin-top:2px;border:3px solid var(--lime);display:grid;place-items:center;color:var(--lime)}
.nogo__box .icon{font-size:22px;stroke-width:3.4}
.nogo__list b{display:block;font:800 clamp(22px,1.9vw,28px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em}
.nogo__list p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--on-ink-soft);max-width:60ch}

/* ---------- статус проекта в шапке кейса ---------- */
.poster__status{display:inline-flex;align-items:baseline;gap:10px;font:700 13px/1.3 var(--text);letter-spacing:.06em}
.poster__status i{font-style:normal;opacity:.7}
.poster.on-dark .poster__status,.poster.on-blue .poster__status{color:var(--accent)}
.poster.on-paper .poster__status,.poster.on-lime .poster__status{color:var(--ink)}

/* ---------- аудит: второй вход для тех, у кого реклама уже идет ---------- */
.audit{padding-block:var(--sec);position:relative}
.audit__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:start}
.audit__kicker{font:700 14px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.audit .h2{color:#fff}
.audit .lead{margin-top:22px;color:rgba(255,255,255,.88)}
.audit__act{position:relative;display:flex;align-items:center;gap:28px;margin-top:30px;--lime-plate:var(--ink)}
.sticker--free{position:relative;padding:10px 14px 11px;font:800 clamp(22px,2vw,28px)/.95 var(--display);text-transform:uppercase;--r:6deg;box-shadow:7px 7px 0 var(--ink)}
.audit__quiet{margin-top:26px;padding-top:18px;border-top:2px solid rgba(255,255,255,.42);font-size:15px;line-height:1.5;max-width:46ch;color:rgba(255,255,255,.88)}
.audit__quiet b{color:#fff;font-weight:700}
.audit__list{counter-reset:step;margin-top:6px}
.audit__list li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;padding:20px 0;border-top:2px solid rgba(255,255,255,.42)}
.audit__list li:last-child{border-bottom:2px solid rgba(255,255,255,.42)}
.audit__list li::before{content:"0" counter(step);grid-row:1/3;font:900 clamp(40px,3.6vw,56px)/.85 var(--display);color:var(--lime)}
.audit__list b{font:800 clamp(24px,2vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.audit__list span{font-size:15px;line-height:1.5;color:rgba(255,255,255,.88);max-width:52ch}
.audit__list em{font-style:normal;color:#fff;font-weight:700}

/* ---------- отзывы: строка о проверяемости ---------- */
.reviews__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 32px;align-items:end;margin-bottom:clamp(64px,6vw,96px)}
.reviews__top .reviews__head{margin-bottom:0}
.reviews__verify{font-size:16px;line-height:1.5;color:var(--on-ink-soft);max-width:38ch;padding-bottom:8px;justify-self:end}
.reviews__verify b{color:var(--lime);font-weight:700}

/* ---------- телефон и планшет ---------- */
@media (max-width:980px){
  .quizbtn{margin-top:24px;padding:11px 16px 12px 14px;--r:-1.5deg}
  .quizbtn .quizbtn__t{font-size:24px}
  .nogo{grid-template-columns:1fr;gap:22px;margin-top:36px;padding:22px 18px 26px;box-shadow:8px 8px 0 var(--lime)}
  .nogo__title{font-size:clamp(36px,9vw,52px)}
  .nogo__list li{grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:16px 0}
  .nogo__box{width:34px;height:34px}
  .nogo__box .icon{font-size:18px}
  .nogo__list b{font-size:21px}
  .poster__meta{gap:8px 16px}
  .poster__status{font-size:12px}
  .audit__grid{grid-template-columns:1fr;gap:32px}
  .audit__act{flex-wrap:wrap;gap:20px}
  .audit__act .btn{width:calc(100% - 4px)}
  .audit__list li::before{font-size:36px}
  .reviews__top{grid-template-columns:1fr;gap:20px;margin-bottom:56px}
  .reviews__verify{justify-self:start;padding-bottom:0}
}

/* ---------- стикер квиза: слева внизу, появляется, когда герой ушел с экрана ---------- */
.quizfab{position:fixed;z-index:58;left:var(--g);bottom:26px;display:flex;align-items:stretch}
.quizfab[hidden]{display:none}
.quizfab__body{display:block;padding:11px 18px 12px 16px;text-decoration:none}
.quizfab__x{position:relative;flex:none;width:38px;margin:0;padding:0;border:0;border-left:2px solid var(--ink);background:var(--sheet);color:var(--ink);cursor:pointer;transition:background-color .2s}
.quizfab__x::before,.quizfab__x::after{content:"";position:absolute;left:10px;top:50%;width:16px;height:2px;background:currentColor}
.quizfab__x::before{transform:rotate(45deg)}
.quizfab__x::after{transform:rotate(-45deg)}
.quizfab__x:hover{background:var(--ink);color:var(--lime)}
@media (hover:hover){.quizfab:hover{transform:rotate(0deg) translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}}
/* hidden while the hero, an inline sticker, the final form or the footer is on screen (home-quiz.js), under a popup or the menu,
   and under a cookie notice that could not lift the bottom bars */
html.hero-in-view .quizfab,.quizfab.is-away,html.dialog-is-open .quizfab,html.menu-is-open .quizfab,html.has-cookie-notice .quizfab{opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .25s ease,visibility 0s linear .25s}
/* the cookie notice lifts the sticker the same way it lifts the phone bar and the chat button */

/* ---------- квиз в попапе: слева вопрос, справа комментарий эксперта ---------- */
.quiz .pop__sheet{width:min(100%,1040px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:0;box-shadow:14px 14px 0 var(--lime)}
.quiz__main{display:flex;flex-direction:column;min-width:0;min-height:560px;padding:clamp(24px,3vw,40px) clamp(22px,3vw,40px) clamp(20px,2.4vw,30px)}
.quiz__bar{position:relative;height:8px;margin-right:52px;background:rgba(14,15,12,.12);border:2px solid var(--ink)}
.quiz__fill{position:absolute;inset:0;background:var(--lime);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .45s var(--ease)}
.quiz__count{display:flex;justify-content:space-between;gap:16px;margin:10px 52px 0 0;font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.quiz__q{min-width:0;margin:22px 0 0;padding:0;border:0}
.quiz__q[hidden]{display:none}
.quiz__legend{padding:0;font:900 clamp(30px,3vw,44px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance}
.quiz__hint{margin-top:8px;font-size:14px;color:var(--muted)}
.quiz__opts{display:grid;gap:10px;margin-top:18px}
.quiz__opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border:2px solid var(--ink);background:var(--sheet);cursor:pointer;font:600 16px/1.3 var(--text);transition:background-color .15s,box-shadow .2s,transform .2s}
.opt__box{width:28px;height:28px;border:2px solid var(--ink);display:grid;place-items:center;background:#fff;transition:background-color .15s}
.opt__box .icon{font-size:18px;stroke-width:3.4;opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s cubic-bezier(.4,1.8,.6,1)}
.opt:hover .opt__box{background:var(--lime)}
.opt input:checked ~ .opt__box{background:var(--ink);color:var(--lime)}
.opt input:checked ~ .opt__box .icon{opacity:1;transform:none}
.opt:has(input:checked){background:var(--lime);box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.opt input:focus-visible ~ .opt__box{outline:3px solid var(--blue);outline-offset:3px}
.quiz .field{margin-top:18px}
.quiz__contacts h3{padding-right:0}
.quiz__picked{margin-top:16px}
.quiz__picked[hidden]{display:none}
.quiz__picked .chips{margin-top:8px}
.quiz .pop__row{margin-top:0}
.quiz__nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:auto;padding-top:26px}
.quiz .quiz__nav .btn{width:auto;margin-top:0;min-height:52px;padding:12px 26px;font-size:16px}
.quiz .quiz__nav .btn--sm{min-height:44px;padding:10px 16px;font-size:15px}
.quiz .quiz__nav .btn[hidden]{display:none}
.quiz__enter{font-size:13px;color:var(--muted)}
.quiz .form__status{margin-top:10px}
.quiz__expert{display:flex;flex-direction:column;gap:16px;min-width:0;padding:clamp(24px,3vw,40px) clamp(22px,2.6vw,36px);background:var(--ink);color:var(--paper)}
.quiz__pic{width:84px;height:84px;border-radius:50%;border:3px solid var(--lime);background:var(--paper) url(/assets/home/maxim.webp) no-repeat 53% 8%/135%;box-shadow:5px 5px 0 var(--lime)}
.quiz__who{margin-top:4px;font-size:13px;line-height:1.4;color:var(--on-ink-soft)}
.quiz__who b{display:block;margin-bottom:4px;font:900 24px/1 var(--display);text-transform:uppercase;color:var(--paper);letter-spacing:.01em}
/* справа у реплики поле под лаймовую кавычку (она стоит поверх конца первой строки); на телефоне кавычки нет — и поля нет */
.quiz__say{position:relative;margin-top:6px;padding:18px 44px 0 0;border-top:1px solid rgba(244,243,238,.28);font-size:15px;line-height:1.55;color:var(--on-ink-soft)}
.quiz__say::before{content:"“";position:absolute;right:0;top:6px;font:900 72px/.6 var(--display);color:var(--lime);opacity:.9}
.quiz__expert::after{content:"";margin-top:auto;height:6px;background:repeating-linear-gradient(90deg,var(--lime) 0 14px,transparent 14px 22px)}

@media (max-width:980px){
  .quizfab{left:14px;right:auto;bottom:calc(88px + env(safe-area-inset-bottom));--r:-1.5deg;box-shadow:6px 6px 0 var(--ink)}
  .quizfab__body{padding:8px 14px 9px 12px}
  .quizfab .quizbtn__k{font-size:10px}
  .quizfab .quizbtn__t{font-size:18px;margin-top:3px}
  .quiz .pop__sheet{grid-template-columns:1fr;box-shadow:10px 10px 0 var(--lime)}
  .quiz__main{min-height:0;padding:22px 18px 20px}
  .quiz__legend{font-size:clamp(28px,8vw,36px)}
  .quiz__opts--2{grid-template-columns:1fr}
  .opt{padding:11px 12px;font-size:15px}
  .quiz__nav{padding-top:22px}
  .quiz .quiz__nav .btn--lime{flex:1 1 auto}
  .quiz__enter{display:none}
  .quiz__expert{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:16px 18px 18px}
  .quiz__pic{width:52px;height:52px;flex:none;box-shadow:3px 3px 0 var(--lime)}
  .quiz__who{margin-top:2px;flex:1 1 0;font-size:12px}
  .quiz__who b{font-size:19px}
  .quiz__say{flex-basis:100%;margin-top:0;padding:12px 0 0;font-size:14px}
  .quiz__say::before{display:none}
  .quiz__expert::after{display:none}
  .audit__act .btn--lime{--r:-.8deg}
}
@media (max-width:600px){
  .quiz .pop__sheet{box-shadow:0 -8px 0 var(--lime)}
  .quiz .pop__x{margin:14px 14px -58px auto}
  .quiz__expert{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
/* ---------- «Отрасли» (24.09.2026): второй выпадающий пункт шапки и колонка подвала, разметка — tools/service_pages/site_nav.py ----------
   the niche sheet holds nine pages in two columns (the services sheet keeps one); the footer gets a fifth column,
   from 981 to 1280px the logo line goes on top of the four link columns; the dental footer gets a fourth one */
.dd .dd__panel--ind{width:min(700px,calc(100vw - 80px))}
/* пункты идут строками: на разных страницах их 14 или 15, и при раскладке по колонкам
   лишние уезжали в неявную колонку — та сжимала соседние, и названия налезали друг на друга */
.dd__panel--ind .dd__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:26px}
/* узкий экран: нав еще виден, но три колонки уже не помещаются */
@media (max-width:1359px){
  .dd .dd__panel--ind{width:min(540px,calc(100vw - 80px))}
  .dd__panel--ind .dd__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1281px){
  .foot__grid--ind:not(.foot__grid--stom){grid-template-columns:minmax(0,3fr) minmax(0,2.5fr) minmax(0,2.9fr) minmax(0,2.3fr) minmax(0,2.6fr)}
}
@media (min-width:981px) and (max-width:1280px){
  .foot__grid--ind:not(.foot__grid--stom){grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot__grid--ind:not(.foot__grid--stom) > .foot__brand{grid-column:1/-1}
}
@media (max-width:980px){
  .foot__grid--ind:not(.foot__grid--stom) > .foot__c{grid-column:auto}
}
@media (min-width:981px){
  .foot__grid--stom.foot__grid--ind{grid-template-columns:minmax(0,3.2fr) minmax(0,2.6fr) minmax(0,2.8fr) minmax(0,3fr)}
}
/* ---------- /«Отрасли» ---------- */