/* svetlo.design — светлая, тёплая, натуральная. Имя студии означает «свет»,
   поэтому и палитра светлая: это не оформление, а буквальное прочтение названия.
   Ни одной внешней загрузки: шрифты лежат рядом. */

:root {
  --bone:      #F2EEE8;
  --paper:     #FAF8F5;
  --sand:      #E6DCCC;
  --ink:       #191713;
  --ink-soft:  #6E675C;
  --line:      rgba(25, 23, 19, .14);
  --clay:      #9C7B57;

  --page:      clamp(20px, 5vw, 92px);
  --gap:       clamp(16px, 2.4vw, 34px);

  --display:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text:      "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero:    clamp(56px, 13vw, 210px);
  --t-h1:      clamp(34px, 6.4vw, 92px);
  --t-h2:      clamp(26px, 3.6vw, 54px);
  --t-lead:    clamp(17px, 1.55vw, 24px);
  --t-body:    clamp(14px, 1.02vw, 16px);
  --t-small:   12px;

  --ease:      cubic-bezier(.22, .61, .36, 1);
}

@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 500;
  font-display: swap; src: url(../fonts/cormorant-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 500;
  font-display: swap; src: url(../fonts/cormorant-lat.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url(../fonts/inter-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url(../fonts/inter-lat.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; margin: 0; }

/* ——— служебное ——— */
.wrap { padding-inline: var(--page); }
.eyebrow {
  font-size: var(--t-small); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.display { font-family: var(--display); font-weight: 300; line-height: .96; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 24em; }
.muted { color: var(--ink-soft); }

/* ——— шапка ——— */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px var(--page);
  mix-blend-mode: multiply;
  transition: background .4s var(--ease), padding .4s var(--ease);
}
.top.solid {
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: blur(9px); mix-blend-mode: normal; padding-block: 14px;
}
.brand { display: flex; align-items: baseline; gap: 14px; }
.brand__name {
  font-family: var(--display); font-size: 26px; letter-spacing: .26em;
  text-transform: uppercase;
}
/* Подпись у логотипа — из-за неё англоязычный читатель понимает имя.
   На узких экранах прячется, чтобы не ломать строку. */
.brand__gloss { font-size: var(--t-small); color: var(--ink-soft); font-style: italic; }
@media (max-width: 720px) { .brand__gloss { display: none; } }

.nav { display: flex; gap: clamp(14px, 2vw, 32px); align-items: baseline; font-size: var(--t-small);
       letter-spacing: .1em; text-transform: uppercase; }
.nav a { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav a:hover { border-color: var(--ink); }
.nav .lang { color: var(--ink-soft); }
.nav .lang b { font-weight: 500; color: var(--ink); }
@media (max-width: 860px) { .nav .hide-s { display: none; } }

/* ——— обложка ——— */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
        padding: 128px var(--page) clamp(78px, 8vw, 120px); position: relative; }
.hero__word {
  font-family: var(--display); font-weight: 300; font-size: var(--t-hero);
  line-height: .82; letter-spacing: .02em; text-transform: uppercase;
  margin-left: -.04em;
}
/* Свет, идущий по слову: смысл названия, показанный буквально, а не описанный. */
.hero__word span {
  background: linear-gradient(100deg, var(--ink) 0 38%, var(--clay) 50%, var(--ink) 62% 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 9s var(--ease) infinite;
}
@keyframes sweep { 0%, 12% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }

.hero__bottom { display: grid; grid-template-columns: 1fr auto; gap: var(--gap);
                align-items: end; margin-top: clamp(24px, 4vw, 60px); }
.hero__claim { font-size: var(--t-lead); line-height: 1.4; max-width: 20em; }
.hero__meta { text-align: right; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 720px) { .hero__bottom { grid-template-columns: 1fr; } .hero__meta { text-align: left; } }

.scroll-hint { position: absolute; left: var(--page); bottom: 18px; font-size: var(--t-small);
               letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 34px; margin-top: 10px;
                      background: linear-gradient(var(--ink-soft), transparent);
                      animation: drop 2.6s var(--ease) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ——— секции ——— */
.section { padding-block: clamp(70px, 11vw, 190px); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
                 gap: var(--gap); align-items: start; margin-bottom: clamp(30px, 5vw, 76px); }
@media (max-width: 860px) { .section__head { grid-template-columns: 1fr; } }
.section__title { font-family: var(--display); font-size: var(--t-h2); line-height: 1.02; font-weight: 300; }

/* ——— проекты ——— */
.projects { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 76px) var(--gap); }
.card { grid-column: span 6; }
.card--wide { grid-column: span 12; }
.card--third { grid-column: span 4; }
@media (max-width: 860px) { .card, .card--third { grid-column: span 12; } }

.card__frame { position: relative; overflow: hidden; background: var(--sand); }
.card__frame img { width: 100%; transition: transform 1.2s var(--ease); }
.card:hover .card__frame img { transform: scale(1.035); }
.card__meta { display: flex; justify-content: space-between; gap: 16px;
              margin-top: 14px; align-items: baseline; }
.card__name { font-family: var(--display); font-size: clamp(21px, 2.1vw, 32px); line-height: 1.08; }
.card__facts { font-size: var(--t-small); color: var(--ink-soft); text-align: right; white-space: nowrap; }

/* Появление кадра: раскрывается снизу вверх, как проявляется свет.
   ⚠️ Прячем ТОЛЬКО когда есть JS (класс .js вешает инлайн-скрипт в <head>).
   Иначе одна ошибка в скрипте — и сайт показывает пустые бежевые экраны:
   контент, который виден только после срабатывания наблюдателя, — это контент,
   которого может не быть вовсе. */
.js .reveal { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 1.15s var(--ease), opacity .8s var(--ease); }
.js .reveal.in { clip-path: inset(0 0 0 0); opacity: 1; }
.js .rise { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
.rise-d1 { transition-delay: .09s; } .rise-d2 { transition-delay: .18s; } .rise-d3 { transition-delay: .27s; }

/* ——— сцена «шкаф собирается» ——— */
.assembly { position: relative; height: 320svh; }
.assembly__sticky { position: sticky; top: 0; height: 100svh; display: grid;
                    grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gap);
                    padding-inline: var(--page); }
@media (max-width: 860px) { .assembly__sticky { grid-template-columns: 1fr; }
                            .assembly__text { order: 2; } }
.assembly__stage { display: flex; align-items: center; justify-content: center; height: 74svh; }
.assembly__stage svg { width: 100%; height: 100%; overflow: visible; }
.assembly__step { font-size: var(--t-small); letter-spacing: .14em; text-transform: uppercase;
                  color: var(--ink-soft); margin-bottom: 18px; }
.assembly__cap { font-family: var(--display); font-size: var(--t-h2); line-height: 1.05; font-weight: 300; }
.assembly__note { margin-top: 18px; max-width: 30em; color: var(--ink-soft); }

.part { transition: transform .12s linear, opacity .12s linear; }

/* ——— сцена «план → интерьер» ——— */
.morph { position: relative; height: 280svh; }
.morph__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.morph__layer { position: absolute; inset: 0; }
.morph__layer img { width: 100%; height: 100%; object-fit: cover; }
.morph__plan { background: var(--paper); display: grid; place-items: center; padding: 8vh var(--page); }
.morph__plan img { object-fit: contain; }
.morph__cap { position: absolute; left: var(--page); bottom: 8vh; max-width: 26em; }
.morph__cap h3 { font-family: var(--display); font-size: var(--t-h2); font-weight: 300; line-height: 1.04; }

/* ——— масштаб (клиники) ——— */
.scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap);
         border-top: 1px solid var(--line); }
.scale__cell { padding: clamp(20px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--line); }
.scale__num { font-family: var(--display); font-size: clamp(46px, 6vw, 92px); line-height: 1; font-weight: 300; }
.scale__lab { font-size: var(--t-small); color: var(--ink-soft); margin-top: 8px;
              letter-spacing: .08em; text-transform: uppercase; }

/* ——— этапы ——— */
.stages { border-top: 1px solid var(--line); }
.stage { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.35fr);
         gap: var(--gap); padding-block: clamp(24px, 3.4vw, 52px); border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .stage { grid-template-columns: 46px 1fr; }
                            .stage__body { grid-column: 2 / -1; } }
.stage__n { font-family: var(--display); font-size: clamp(28px, 3vw, 46px); line-height: 1; color: var(--clay); }
.stage__t { font-family: var(--display); font-size: clamp(22px, 2.4vw, 36px); line-height: 1.08; font-weight: 300; }
.stage__list { margin: 12px 0 0; padding: 0; list-style: none; column-gap: 40px; }
.stage__list li { position: relative; padding-left: 18px; color: var(--ink-soft); break-inside: avoid; }
.stage__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--clay); }

/* ——— команда ——— */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
        background: var(--line); border: 1px solid var(--line); }
.team__cell { background: var(--bone); padding: clamp(22px, 2.6vw, 40px); }
.team__cell:nth-child(even) { background: var(--paper); }
.team__role { font-family: var(--display); font-size: clamp(20px, 2vw, 28px); line-height: 1.1; }
.team__what { margin-top: 10px; color: var(--ink-soft); }

/* ——— цитата с чертежа ——— */
.quote { padding-block: clamp(60px, 9vw, 150px); text-align: center; }
.quote__t { font-family: var(--display); font-size: var(--t-h1); line-height: 1.06; font-weight: 300;
            max-width: 15em; margin-inline: auto; }
.quote__src { margin-top: 22px; font-size: var(--t-small); letter-spacing: .12em;
              text-transform: uppercase; color: var(--ink-soft); }

/* ——— форма ——— */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 22px; }
.field span { display: block; font-size: var(--t-small); letter-spacing: .1em;
              text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; font: inherit; color: inherit; border-radius: 0;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 92px; }
.btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 15px 30px;
       border: 1px solid var(--ink); background: transparent; font: inherit; font-size: var(--t-small);
       letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
       transition: background .35s var(--ease), color .35s var(--ease); }
.btn:hover { background: var(--ink); color: var(--bone); }
.form-note { margin-top: 14px; font-size: var(--t-small); color: var(--ink-soft); }

/* ——— подвал ——— */
.foot { padding: clamp(40px, 6vw, 90px) var(--page) 34px; border-top: 1px solid var(--line);
        display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); }
.foot__gloss { font-style: italic; color: var(--ink-soft); max-width: 26em; }
.foot__bottom { padding: 0 var(--page) 30px; font-size: var(--t-small); color: var(--ink-soft);
                display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ——— страница проекта ——— */
.p-hero { min-height: 52svh; display: grid; align-items: end; padding: 132px var(--page) 30px; }
.p-title { font-family: var(--display); font-size: var(--t-h1); font-weight: 300; line-height: 1; }
.p-facts { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 54px); margin-top: 26px;
           font-size: var(--t-small); color: var(--ink-soft); }
.p-facts b { display: block; font-weight: 400; color: var(--ink); font-size: var(--t-body); }
.p-slogan { font-family: var(--display); font-weight: 300; font-style: italic;
            font-size: clamp(20px, 2.4vw, 34px); line-height: 1.16; color: var(--clay);
            max-width: 18em; margin-top: 18px; }
.p-text { max-width: 34em; margin: clamp(40px, 6vw, 90px) 0; font-size: var(--t-lead); line-height: 1.5; }
.p-text + .p-text { margin-top: calc(clamp(40px, 6vw, 90px) * -.55); }
.shots { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.shots__sec { grid-column: span 12; display: flex; align-items: center; gap: 20px;
              margin-top: clamp(26px, 4vw, 66px); }
.shots__sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.shots__sec:first-child { margin-top: 0; }
.shot { grid-column: span 12; }
.shot--half { grid-column: span 6; }
@media (max-width: 860px) { .shot--half { grid-column: span 12; } }
.shot figcaption { margin-top: 10px; font-size: var(--t-small); color: var(--ink-soft); }

.pager { display: flex; justify-content: space-between; gap: 20px; padding: clamp(50px, 7vw, 110px) var(--page); }
.pager a { font-family: var(--display); font-size: clamp(22px, 2.6vw, 40px); font-weight: 300; }

/* ─────────────────────────────────────────────────────────────────────────
   v2, 14.08.2026 — заглавный кадр, рассказ о студии, флагманы, направления,
   портфолио с фильтром, форма обратного звонка.
   Тайминги и кривые взяты с разобранных сайтов (см. ПРИЁМЫ-КОНКУРЕНТОВ.md):
   базовая длительность 1.2 s, кривая cubic-bezier(.625,.05,0,1) —
   резкий старт и долгий выкат, микро-взаимодействия 0.3–0.6 s.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --ease:   cubic-bezier(.625, .05, 0, 1);
  --ease-s: cubic-bezier(.16, 1, .3, 1);
  /* Пять ступеней вертикального ритма. До этого отступы ставились «на глаз»,
     и воздух ломался на больших экранах: 432px сверху — это не щедрость,
     а то, из-за чего блок читается как отдельная сцена, а не как строка. */
  --s-tiny:  clamp(28px,  3vw,  68px);
  --s-small: clamp(48px,  6vw, 144px);
  --s-main:  clamp(64px,  8vw, 160px);
  --s-large: clamp(88px, 12vw, 232px);
  --s-huge:  clamp(144px, 20vw, 432px);
}
/* 14px основного текста читались дёшево — поднято до 15–17px. */
:root { --t-body: clamp(15px, 1.05vw, 17px); }

/* ── обложка с кадром ──────────────────────────────────────────────────── */
.hero--img { position: relative; overflow: clip; color: #F6F1E9; }
.hero__shot { position: absolute; inset: 0; z-index: 0; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); animation: heroIn 2.4s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.14); } to { transform: scale(1.06); } }
/* Вуаль, а не затемнение целиком: кадр остаётся кадром, но имя читается. */
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,17,13,.46) 0%, rgba(20,17,13,.10) 34%, rgba(20,17,13,.66) 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(20,17,13,.30) 100%); }
.hero--img .hero__word, .hero--img .hero__bottom, .hero--img .scroll-hint { position: relative; z-index: 2; }
.hero--img .hero__word span { background: none; -webkit-text-fill-color: currentColor; color: #F6F1E9;
  text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.hero--img .hero__claim { color: #F6F1E9; max-width: 34ch; text-shadow: 0 1px 24px rgba(0,0,0,.45); }
.hero--img .hero__meta { color: rgba(246,241,233,.78); }
.hero--img .scroll-hint { color: rgba(246,241,233,.72); }

/* ── рассказ о студии ──────────────────────────────────────────────────── */
.about { padding-top: var(--s-main); padding-bottom: var(--s-main); }
.about__p { font-family: var(--display); font-weight: 300;
  font-size: clamp(21px, 2.3vw, 34px); line-height: 1.34; max-width: 30ch; margin: 0 0 .7em; }
.about__p:first-child { max-width: 26ch; }
/* Второй и третий абзацы — тише первого: это уточнения, а не заявление. */
.about__p:not(:first-child) { font-family: var(--sans, inherit); font-size: var(--t-lead);
  line-height: 1.5; max-width: 56ch; color: var(--ink-soft); }

/* ── три флагмана ──────────────────────────────────────────────────────── */
.flags { padding-bottom: var(--s-large); }
.flag { margin-top: var(--s-large); }
.flag:first-of-type { margin-top: var(--s-main); }
.flag__shot { display: block; }
.flag__frame { overflow: clip; background: rgba(25,23,19,.05); }
.flag__frame img { width: 100%; height: auto; display: block;
  transition: transform 1.2s var(--ease); }
.flag__shot:hover .flag__frame img { transform: scale(1.03); }
.flag__body { display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(16px, 2vw, 34px);
  margin-top: clamp(20px, 2.4vw, 38px); align-items: start; }
.flag__n { font-family: var(--display); font-size: clamp(30px, 3.4vw, 54px); line-height: .9;
  color: var(--clay); font-weight: 300; }
.flag__name { font-family: var(--display); font-weight: 300; line-height: 1.02;
  font-size: clamp(28px, 3.4vw, 52px); margin: 0; letter-spacing: -.01em; }
.flag__slogan { font-style: italic; color: var(--clay); margin: .45em 0 0; font-size: var(--t-lead); }
.flag__lead { margin: 1.1em 0 0; font-size: var(--t-lead); line-height: 1.5; max-width: 52ch; }
.flag__facts { margin-top: 1.2em; font-size: var(--t-small); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); }
.flag__more { display: inline-block; margin-top: 1.6em; font-size: var(--t-small);
  letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--line);
  padding-bottom: 4px; transition: border-color .3s var(--ease-s); }
.flag__more:hover { border-color: var(--ink); }
@media (min-width: 900px) {
  .flag--split { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
}

/* ── направления ───────────────────────────────────────────────────────── */
.svcs { padding-top: var(--s-main); padding-bottom: var(--s-main); }
.svc__grid { display: grid; gap: clamp(18px, 2vw, 34px); margin-top: var(--s-small);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.svc { display: block; }
.svc__frame { overflow: clip; aspect-ratio: 3 / 4; background: rgba(25,23,19,.05); }
.svc__frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease); }
.svc:hover .svc__frame img { transform: scale(1.05); }
.svc__meta { margin-top: 14px; }
.svc__name { font-family: var(--display); font-size: clamp(19px, 1.6vw, 26px); font-weight: 300; }
.svc__note { margin-top: 7px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }
.svc__count { margin-top: 9px; font-size: var(--t-small); letter-spacing: .14em;
  text-transform: uppercase; color: var(--clay); }
.allwork { display: inline-block; margin-top: var(--s-small); font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 40px); font-weight: 300;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
  transition: border-color .4s var(--ease-s), letter-spacing .4s var(--ease-s); }
.allwork:hover { border-color: var(--ink); letter-spacing: .01em; }

/* ── страница портфолио ────────────────────────────────────────────────── */
.pfolio { padding-top: var(--s-small); padding-bottom: var(--s-huge); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-small);
  padding-bottom: var(--s-tiny); border-bottom: 1px solid var(--line); }
.tab { font: inherit; font-size: var(--t-small); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 17px; cursor: pointer;
  transition: color .3s var(--ease-s), border-color .3s var(--ease-s), background .3s var(--ease-s); }
.tab:hover { color: var(--ink); border-color: var(--ink); }
.tab.is-on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pgrid { display: grid; gap: clamp(24px, 3vw, 56px) clamp(18px, 2vw, 34px); margin-top: var(--s-main);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pcard { display: block; }
.pcard[hidden] { display: none; }
.pcard__frame { overflow: clip; aspect-ratio: 4 / 3; background: rgba(25,23,19,.05); }
.pcard__frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease); }
.pcard:hover .pcard__frame img { transform: scale(1.045); }
.pcard__meta { margin-top: 15px; }
.pcard__name { font-family: var(--display); font-size: clamp(20px, 1.7vw, 28px); font-weight: 300; line-height: 1.1; }
.pcard__slogan { margin-top: 6px; font-style: italic; color: var(--clay); font-size: var(--t-small); }
.pcard__facts { margin-top: 9px; font-size: var(--t-small); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.pempty { margin-top: var(--s-main); color: var(--ink-soft); font-size: var(--t-lead); }

/* ── выбор канала связи в форме ────────────────────────────────────────── */
.field--pick { border: 0; padding: 0; margin: 0; }
.field--pick legend { font-size: var(--t-small); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0; margin-bottom: 10px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; font-size: var(--t-small); letter-spacing: .1em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 17px; cursor: pointer;
  transition: color .3s var(--ease-s), border-color .3s var(--ease-s), background .3s var(--ease-s); }
.pick input:checked + span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
/* Клавиатурная навигация: без этого выбор канала не виден при табе. */
.pick input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 3px; }

/* ── раскрытие кадра: «объектив открылся» ──────────────────────────────── */
/* Кадр стартует щелью и одновременно отъезжает — приём Telha Clarke.
   Работает только при JS: класс .js вешается инлайн-скриптом в <head>,
   иначе кадр виден сразу и ничего не прячется. */
.js .reveal-wide .flag__frame img { clip-path: inset(28% 22%); transform: scale(1.14);
  transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); }
.js .reveal-wide.in .flag__frame img { clip-path: inset(0%); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__shot img { animation: none; transform: none; }
  .js .reveal-wide .flag__frame img,
  .js .reveal-wide.in .flag__frame img { clip-path: none; transform: none; transition: none; }
  .flag__frame img, .svc__frame img, .pcard__frame img { transition: none; }
}
.tab__n { opacity: .55; margin-left: 2px; }

/* ── залипающая сцена: кадр держит три экрана, тезисы сменяются ──────────── */
.vision { position: relative; height: 300vh; }
.vision__sticky { position: sticky; top: 0; height: 100vh; overflow: clip;
  display: flex; align-items: flex-end; }
.vision__shot { position: absolute; inset: 0; z-index: 0; }
.vision__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 50% 50%; }
.vision__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,.30) 0%, rgba(20,17,13,.05) 40%, rgba(20,17,13,.78) 100%); }
.vision__text { position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 8vh, 120px); color: #F6F1E9; }
.vision__eyebrow { color: rgba(246,241,233,.72); }
/* Тезисы лежат стопкой в одной точке: слой сменяет слой, блок не прыгает. */
.vision__steps { position: relative; margin-top: 18px; min-height: 4.6em; }
.vision__step { position: absolute; inset: 0; opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease-s), transform .6s var(--ease-s); }
.vision__step span { font-family: var(--display); font-weight: 300;
  font-size: clamp(23px, 3vw, 46px); line-height: 1.18; max-width: 22ch; display: block;
  text-shadow: 0 1px 30px rgba(0,0,0,.5); }
.vision__step.on { opacity: 1; transform: none; }
/* Без JS сцена схлопывается в один экран и показывает первый тезис — иначе
   посетитель получил бы три пустых экрана подряд. */
html:not(.js) .vision { height: 100vh; }
html:not(.js) .vision__step:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vision { height: 100vh; }
  .vision__shot img { transform: none !important; }
  .vision__step { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Правки по итогам проверки глазами (14.08). Каждая — по конкретной находке.
   ───────────────────────────────────────────────────────────────────────── */

/* 🔴 С телефона до контактов надо было прокрутить 22 000 px: всё меню было
   спрятано классом hide-s. Первый и последний пункт остаются видимы всегда. */
.nav__key { display: inline; }
@media (max-width: 480px) { .nav { gap: 12px; } .nav__key { font-size: 11px; } }

/* 🔴 «Листайте» на мобильном ложилось поверх строки «Ведущие дизайнеры…».
   Обложка на узком экране отдаёт подсказке отдельное место внизу. */
@media (max-width: 720px) {
  .hero__bottom { padding-bottom: 58px; }
  .scroll-hint::after { height: 22px; margin-top: 6px; }
}
/* На десктопе подсказка была сдвинута вправо относительно абзаца и висела
   случайным словом — выравниваем по левому краю колонки. */
.scroll-hint { left: var(--page); }

/* 🔴 Подписи морф-сцены лежали тёмно-серым прямо на фото: слово «этаж»
   пропадало целиком. Даём тень и светлый цвет, как в остальных сценах поверх кадра. */
.morph__cap { color: #F6F1E9; text-shadow: 0 1px 26px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.35); }
.morph__cap .eyebrow { color: rgba(246,241,233,.8); }
.morph__sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(20,17,13,.62) 100%); z-index: 1; }
.morph__cap { position: relative; z-index: 2; }

/* 🔴 Нижняя строка карточек направлений была рваной: у карточек с описанием
   в три строки счётчик уезжал на 18 px ниже. Карточка становится колонкой,
   счётчик прижимается к низу — ряд выравнивается независимо от длины текста. */
.svc { display: flex; flex-direction: column; height: 100%; }
.svc__meta { display: flex; flex-direction: column; flex: 1; }
.svc__count { margin-top: auto; padding-top: 9px; }

/* 🔴 Лейбл «Коротко о задаче» прилипал к пилюлям выбора канала и читался как
   подпись к ним. Даём полю после набора пилюль такой же отбив, как у прочих. */
.field--pick { margin-bottom: 14px; }
.field--pick + .field { margin-top: 12px; }

/* ⚠️ Слоган в шапке и мета-блок обложки тонули на светлых участках кадра.
   Пока шапка стоит поверх кадра — светлый цвет и тень; на прокрученной
   (плотной) шапке возвращается обычный. */
.hero--img ~ * .brand__gloss, .top:not(.solid) .brand__gloss { color: rgba(246,241,233,.85);
  text-shadow: 0 1px 16px rgba(0,0,0,.6); }
.top.solid .brand__gloss { color: var(--ink-soft); text-shadow: none; }
.hero--img .hero__meta { color: #F6F1E9; text-shadow: 0 1px 18px rgba(0,0,0,.7); }
.hero--img .scroll-hint { text-shadow: 0 1px 16px rgba(0,0,0,.7); }

/* ⚠️ Панорама 2.5:1 в высоком sticky-контейнере на телефоне превращалась
   в случайный увеличенный фрагмент плана. На узком экране сцена становится
   короче и кадр показывается целиком, а текст уходит под него. */
@media (max-width: 720px) {
  .vision { height: 180vh; }
  .vision__sticky { align-items: stretch; }
  .vision__shot { inset: 0 0 auto; height: 46vh; }
  .vision__shot img { object-fit: contain; background: #17140F; }
  .vision__veil { background: linear-gradient(180deg, transparent 0 40%, rgba(20,17,13,.9) 62% 100%); }
  .vision__text { align-self: flex-end; }
  .vision__step span { font-size: clamp(20px, 5.6vw, 28px); }
}

/* ⚠️ В блоке «Команда» на широком экране колонка сжималась до 159 px, и текст
   ломался по два слова. Ограничиваем число колонок — лучше две строки карточек,
   чем шесть щелей. */
.team { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }