/* putchuzhaka.ru — landing v2 (11 блоков, статика).
   Дизайн-токены совпадают с infra/lavka/ — единый бренд-язык.
   Правило: короткое тире и запятая. Длинного тире (em dash) в тексте нет. */

/* Self-hosted шрифты. Cyrillic+Latin subset, только используемые начертания.
   font-display:swap — текст рисуется системным шрифтом сразу, реальный подменяет
   когда загрузится. Убирает FOIT (invisible text) и render-blocking пенальти. */
@font-face{font-family:'Onest';font-weight:300;font-style:normal;font-display:swap;
  src:url('fonts/onest-v9-cyrillic_latin-300.woff2') format('woff2')}
@font-face{font-family:'Onest';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/onest-v9-cyrillic_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Onest';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/onest-v9-cyrillic_latin-500.woff2') format('woff2')}
@font-face{font-family:'Onest';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/onest-v9-cyrillic_latin-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:normal;font-display:swap;
  src:url('fonts/cormorant-garamond-v21-cyrillic_latin-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/cormorant-garamond-v21-cyrillic_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/cormorant-garamond-v21-cyrillic_latin-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:italic;font-display:swap;
  src:url('fonts/cormorant-garamond-v21-cyrillic_latin-italic.woff2') format('woff2')}
/* 600-italic (не отдельный файл) — синтетический italic поверх 500-regular. Достаточно для UI. */
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/cormorant-garamond-v21-cyrillic_latin-500.woff2') format('woff2')}

:root{
  --noir:#0F1009;
  --noir-soft:#12130B;
  --noir-lift:#1A1815;       /* фон MediaPlaceholder, чуть светлее основного */
  --bone:#F5F1E8;
  --paper:#EAE3D3;
  --ember:#B8642E;
  --amber:#E7A66A;
  --moss:#4A5240;
  --bone-strong:rgba(245,241,232,.92);
  --bone-dim:rgba(245,241,232,.72);
  --bone-mid:rgba(245,241,232,.6);
  --bone-faint:rgba(245,241,232,.4);
  --line:rgba(245,241,232,.13);
  --ember-40:rgba(184,100,46,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  background:var(--noir);
  color:var(--bone);
  font-family:'Onest',sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ember);color:var(--bone)}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* section head — 01–06 нумерация, ember num + серая метка + линейка */
.shead{display:flex;align-items:center;gap:20px;margin-bottom:44px}
.shead .n{font-family:'Onest';font-weight:600;font-size:.8rem;letter-spacing:.1em;color:var(--ember)}
.shead .t{font-family:'Onest';font-weight:500;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim)}
.shead .rule{flex:1;height:1px;background:var(--line)}

/* ─── topbar ─── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.topbar.solid{background:rgba(15,16,9,.88);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 22px}
.mark{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.28rem;letter-spacing:.02em;display:flex;align-items:center;gap:9px;color:var(--bone);text-decoration:none;white-space:nowrap}
.mark .d{width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font-family:'Onest';font-weight:500;font-size:.78rem;letter-spacing:.03em;text-decoration:none;color:var(--bone);background:var(--ember);padding:9px 18px;border-radius:2px;transition:all .3s;white-space:nowrap}
.nav-cta svg{width:13px;height:13px;flex:none}
.nav-cta:hover{background:#a5561f;transform:translateY(-1px)}

/* ─── dot-nav (точечная навигация справа) ─── */
.dot-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.dot-nav a{display:flex;align-items:center;gap:10px;color:var(--bone-dim);text-decoration:none;font-family:'Onest';font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;transition:color .3s}
.dot-nav .dn-label{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap}
.dot-nav .dn-dot{width:6px;height:6px;border-radius:50%;background:var(--bone-faint);transition:background .3s,transform .3s;flex:none}
.dot-nav a:hover .dn-label{opacity:1;transform:none}
.dot-nav a:hover .dn-dot{background:var(--ember);transform:scale(1.3)}
.dot-nav a.active .dn-dot{background:var(--ember);transform:scale(1.35)}
.dot-nav a.active{color:var(--bone)}

/* ─── общие CTA кнопки ─── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Onest';font-weight:500;font-size:.92rem;letter-spacing:.03em;text-decoration:none;padding:16px 30px;border-radius:2px;transition:all .3s;cursor:pointer;border:1px solid transparent}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--ember);color:var(--bone)}
.btn-primary:hover{background:#a5561f;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(245,241,232,.5);color:var(--bone);background:transparent}
.btn-ghost:hover{border-color:var(--bone);background:rgba(245,241,232,.08)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ─── 01 · HERO ─── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--bone);overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;z-index:0}
.hero .hero-bg > *{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,9,.55) 0%,rgba(15,16,9,.15) 30%,rgba(15,16,9,.55) 65%,rgba(15,16,9,.94) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:96px;width:100%}
.hero .kicker{font-family:'Onest';font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--amber);opacity:0;animation:fade .9s ease .2s forwards}
.hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.8rem,9vw,5.6rem);line-height:1;letter-spacing:-.01em;margin:.24em 0 .34em;max-width:16ch;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) .32s forwards}
.hero .lede{max-width:44ch;font-size:1.06rem;color:var(--bone-strong);margin-bottom:32px;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) .5s forwards}
.hero .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) .66s forwards}
.hero-counter{position:absolute;bottom:22px;left:0;right:0;z-index:2;padding:0 22px;text-align:center;font-family:'Onest';font-weight:500;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-mid);opacity:0;animation:fade 1s ease 1s forwards}
.hero-counter .sep{color:var(--ember);margin:0 10px;opacity:.7}

/* ─── 02 · КТО Я ─── */
.about{padding:110px 0}
.about .grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start}
.about .pic{border-radius:4px;overflow:hidden;aspect-ratio:3/4;background:var(--paper)}
.about .pic img{width:100%;height:100%;object-fit:cover}
.about .text p{font-size:1.02rem;color:var(--bone-dim);margin-bottom:16px}
.about .text p:last-child{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.24rem;color:var(--bone);margin-top:24px}

/* ─── 03 · ЧТО Я ДЕЛАЮ ─── */
.projects{padding:60px 0 100px}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pcard{display:flex;flex-direction:column;background:var(--noir-soft);border-radius:4px;overflow:hidden;text-decoration:none;color:var(--bone);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pcard.pcard-link{cursor:pointer}
.pcard.pcard-link:hover{transform:translateY(-4px)}
.pcard-media{aspect-ratio:4/3;overflow:hidden;background:var(--noir-lift)}
.pcard-media > *{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard.pcard-link:hover .pcard-media img{transform:scale(1.04)}
/* Кадрирование карточки «Чужаки»: источник chuzhaki.webp = портрет 900×1600,
   в 4:3 default (50% 50%) обрезает голову. Смещаем видимую область к
   верху источника, чтобы голова + бутылка + чашки все попали в кадр. */
.pcard[href*="chuzhaki.team"] .pcard-media img{object-position:50% 20%}
.pcard-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.pcard-kicker{font-family:'Onest';font-weight:500;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.pcard-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.8rem,4vw,2.2rem);line-height:1.04;margin:.24em 0 .18em;color:var(--bone)}
.pcard-desc{font-size:.96rem;color:var(--bone-dim);flex:1}
.pcard-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:'Onest';font-weight:500;font-size:.82rem;letter-spacing:.05em;color:var(--bone);opacity:.92}
.pcard-link svg{width:14px;height:14px}
.pcard.pcard-link:hover .pcard-link{color:var(--amber)}
.pcard-note{margin-top:18px;font-family:'Onest';font-weight:500;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}

/* ─── 04 · РАБОТЫ ─── */
.works{padding:60px 0 100px}
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wcard{display:flex;flex-direction:column;text-decoration:none;color:var(--bone)}
.wcard-media{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--noir-lift);margin-bottom:16px}
.wcard-media > *{width:100%;height:100%;object-fit:cover}
.wcard-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.35rem;line-height:1.1;margin-bottom:6px;color:var(--bone)}
.wcard-loc{font-family:'Onest';font-weight:400;font-size:.82rem;letter-spacing:.02em;color:var(--amber);margin-bottom:8px}
.wcard-desc{font-size:.86rem;color:var(--bone-dim);line-height:1.5}
.works-next{margin-top:36px;display:inline-flex;align-items:center;gap:10px;font-family:'Onest';font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.works-next::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}

/* ─── 05 · ЦИФРЫ ─── */
.stats{padding:0;background:var(--noir-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stats-cell{padding:44px 26px;text-align:left;border-left:1px solid var(--line)}
.stats-cell:first-child{border-left:0}
.stats-value{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2rem,4.6vw,2.8rem);color:var(--bone);line-height:1;margin-bottom:12px}
.stats-label{font-family:'Onest';font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-mid);line-height:1.4}
.stats-asof{padding:0 22px 24px;font-family:'Onest';font-weight:400;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint)}
.stats-wrap{max-width:1160px;margin:0 auto}

/* ─── 06 · ДЛЯ БРЕНДОВ ─── */
.brands{padding:110px 0}
.brands-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.15rem,2.2vw,1.35rem);color:var(--bone-strong);max-width:56ch;margin-bottom:56px;line-height:1.5}
.brands-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:44px}
.bcard{display:flex;flex-direction:column;gap:20px}
.bcard-media{aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:var(--noir-lift);max-width:380px}
.bcard-media > *{width:100%;height:100%;object-fit:cover}
.bcard-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;line-height:1.05;color:var(--bone)}
.bcard-loc{font-family:'Onest';font-weight:400;font-size:.86rem;color:var(--amber);margin-top:4px;margin-bottom:12px}
.bcard-sub{font-size:.94rem;color:var(--bone-dim);margin-bottom:10px}
.bcard-result{font-size:.9rem;color:var(--bone-mid);line-height:1.5}
.brands-kit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brands-kit-note{font-family:'Onest';font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}

/* ─── 07 · ФИЛОСОФИЯ ─── */
.philosophy{padding:110px 0;background:var(--noir-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.philosophy .body{max-width:640px}
.philosophy .body p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.24rem,2.6vw,1.5rem);color:var(--bone);margin-bottom:18px;line-height:1.42}

/* ─── 08 · ГОСТИ ─── */
.quotes{padding:110px 0}
.quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.qcard{padding:32px 28px;background:var(--noir-soft);border-radius:4px;border:1px solid var(--line);display:flex;flex-direction:column;gap:20px;min-height:220px}
.qcard-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem;line-height:1.5;color:var(--bone)}
.qcard-attr{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.qcard-name{font-family:'Onest';font-weight:500;font-size:.94rem;color:var(--bone)}
.qcard-context{font-family:'Onest';font-weight:400;font-size:.78rem;letter-spacing:.06em;color:var(--bone-mid)}

/* ─── 09 · ЗАЯВКА ─── */
.lead{padding:110px 0}
.lead-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--bone);max-width:44ch;margin-bottom:44px;line-height:1.4}
.lead-form{max-width:560px;display:flex;flex-direction:column;gap:22px}
.lf-row{display:flex;flex-direction:column;gap:8px}
.lf-label{font-family:'Onest';font-weight:500;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mid)}
.lf-label .req{color:var(--ember);margin-left:4px}
.lf-input,.lf-select,.lf-textarea{
  font-family:'Onest';font-weight:300;font-size:1rem;color:var(--bone);
  background:transparent;border:0;border-bottom:1px solid var(--bone-faint);
  padding:12px 0 10px;transition:border-color .25s;
  outline:none;width:100%;
}
.lf-textarea{border:1px solid var(--bone-faint);border-radius:3px;padding:14px 16px;min-height:110px;resize:vertical;line-height:1.5;background:var(--noir-soft)}
.lf-select{
  appearance:none;-webkit-appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8642E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right center/16px 16px;
  padding-right:26px;cursor:pointer;
}
.lf-select option{background:var(--noir);color:var(--bone)}
.lf-input:focus,.lf-select:focus,.lf-textarea:focus{border-color:var(--ember)}
.lf-input:invalid:not(:placeholder-shown){border-color:#c0392b}
.lf-honeypot{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;opacity:0}
.lf-submit-row{margin-top:6px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lf-error{font-size:.86rem;color:#c96b58}
.lf-fallback{margin-top:22px;font-size:.88rem;color:var(--bone-mid)}
.lf-fallback a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--ember-40)}
.lf-fallback a:hover{border-bottom-color:var(--ember)}
.lf-success{display:none;padding:26px 28px;border:1px solid var(--ember);border-radius:3px;background:rgba(184,100,46,.08);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--bone)}
.lf-success.on{display:block}
.lead-form.done{display:none}

/* ─── 10 · TELEGRAM BAR ─── */
.tg-bar{padding:36px 0;background:var(--noir-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tg-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.tg-bar .txt{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.3rem);color:var(--bone);max-width:44ch}
.tg-bar .btn{padding:12px 24px;font-size:.86rem}

/* ─── 11 · КОНТАКТЫ ─── */
.contacts{padding:80px 0 40px;background:#0A0B06;border-top:1px solid var(--line)}
.contacts .grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
.contacts .col-left{display:flex;flex-direction:column;gap:16px}
.contacts .col-left .mark{color:var(--bone)}
.contacts .col-left .sig{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--amber)}
.contacts .links{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.contacts .links a{font-family:'Onest';font-weight:400;font-size:.94rem;color:var(--bone-dim);text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.contacts .links a:hover{color:var(--amber)}
.contacts .links svg{width:16px;height:16px}
.projects-line{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:22px;flex-wrap:wrap;font-family:'Onest';font-weight:400;font-size:.86rem}
.projects-line a{color:var(--bone-mid);text-decoration:none;border-bottom:1px solid var(--ember-40);padding-bottom:1px}
.projects-line a:hover{color:var(--amber);border-bottom-color:var(--ember)}
.foot-line{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--bone-faint)}

/* ─── MediaPlaceholder ───
   HTML-компонент через data-атрибуты:
     <div class="media-placeholder"
          data-media-type="video|photo"
          data-media-ratio="16:9|4:3|4:5|9:16|1:1"
          data-media-description="...">
     </div>
   main.js гидрирует по data-media-src (если есть) — заменяет на <img>/<video>. */
.media-placeholder{
  background:var(--noir-lift);
  border:1px dashed var(--ember-40);
  border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;gap:14px;text-align:center;
  width:100%;height:100%;
}
.media-placeholder[data-media-ratio="16:9"]{aspect-ratio:16/9}
.media-placeholder[data-media-ratio="4:3"]{aspect-ratio:4/3}
.media-placeholder[data-media-ratio="4:5"]{aspect-ratio:4/5}
.media-placeholder[data-media-ratio="9:16"]{aspect-ratio:9/16}
.media-placeholder[data-media-ratio="1:1"]{aspect-ratio:1/1}
.mp-type{font-family:'Onest';font-weight:500;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-strong)}
.mp-desc{font-family:'Onest';font-weight:300;font-size:.88rem;color:var(--bone-mid);max-width:34ch;line-height:1.5}
.mp-ratio{font-family:'Onest';font-weight:400;font-size:.66rem;letter-spacing:.2em;color:var(--bone-faint)}
/* В hero placeholder не показываем — main.js использует poster-image как фон,
   а видео-описание из content/hero.js остаётся как заметка для тех, кто
   будет снимать видео. Правило нужно только на случай, если placeholder
   всё же окажется внутри .hero-bg (защита от регрессии). */
.hero .media-placeholder{display:none}

/* QuotePlaceholder — визуальный близнец MediaPlaceholder внутри qcard */
.quote-placeholder{
  background:var(--noir-lift);
  border:1px dashed var(--ember-40);
  border-radius:3px;
  padding:24px 22px;
  min-height:220px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
}
.qp-type{font-family:'Onest';font-weight:500;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-strong)}
.qp-desc{font-family:'Onest';font-weight:300;font-size:.86rem;color:var(--bone-mid);max-width:26ch;line-height:1.5}

/* animations */
@keyframes fade{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* .reveal скрывает контент только при включённом JS (html.js добавляется
   inline-скриптом в <head>). Без JS содержимое видно сразу — критично
   для доступности и no-JS-читателей (поисковые превью, скринридеры). */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ─── mobile ─── */
@media (max-width:820px){
  html{scroll-padding-top:60px}
  .topbar .wrap{gap:12px}
  .dot-nav{display:none}
  .about .grid{grid-template-columns:1fr;gap:32px}
  .about .pic{aspect-ratio:4/5;max-width:520px;order:-1}
  .projects-grid{grid-template-columns:1fr;gap:14px}
  /* 04 Работы: горизонтальный скролл, карточки фикс. ширины */
  .works-grid{
    display:flex;flex-direction:row;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding-bottom:12px;
    margin:0 -22px;padding-left:22px;padding-right:22px;
  }
  .works-grid::-webkit-scrollbar{height:3px}
  .works-grid::-webkit-scrollbar-thumb{background:var(--ember-40);border-radius:3px}
  .wcard{flex:0 0 78vw;max-width:320px;scroll-snap-align:start}
  .wcard-media{aspect-ratio:4/5}
  .stats-band{grid-template-columns:1fr}
  .stats-cell{padding:32px 20px;border-left:0;border-top:1px solid var(--line)}
  .stats-cell:first-child{border-top:0}
  .brands-grid{grid-template-columns:1fr;gap:36px}
  .quotes-grid{grid-template-columns:1fr;gap:14px}
  .contacts .grid{flex-direction:column}
  .contacts .links{align-items:flex-start}
  .contacts .col-left .mark{font-size:1.4rem}
  .hero .wrap{padding-bottom:96px}
  .hero-counter{font-size:.6rem;letter-spacing:.16em}
  .tg-bar .wrap{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:520px){
  .hero-counter .sep{margin:0 6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}