/* Делаем! — стили витрины на дизайн-системе «Делаем!» (артефакт, версия 6 «золотое сечение и π», 2026-09-18).
   Собрано tools/compose_site_css.py: fonts.css + tokens.css + bundle.css без строки @import.
   fonts.css  sha256 f26d7ec8fc99764c9270c4da51d3e225938dae5846facee7f26971d3564a36f9
   tokens.css sha256 fb09c77ab512c568a1757e3b36f5d2535411cadc73d4fccda6da2d2020f6b425
   bundle.css sha256 d1a704fe7e11f88965d21bc2464da5bbd2dd68887fdec007c2b9d24974f0bb9b
   Исходный снимок дизайн-системы. С 2026-10-08 site.css правится напрямую; синхронизация артефакта выполняется отдельно. */

/* Onest 2.001 (Google Fonts v11), variable wght 100–900, используется 400–800. OFL-1.1.
   Файлы — байт в байт из fonts.gstatic.com/s/onest/v11; sha256 — fonts/FONTS.md handoff-пакета. */
/* cyrillic-ext */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/onest/onest-v11-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/onest/onest-v11-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* latin-ext */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/onest/onest-v11-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}
/* latin */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/onest/onest-v11-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, [data-theme="light"] {
  --blue: #3a43ff;
  --blue-dark: #2a32d8;
  --blue-soft: #ecedff;
  --orange: #fe5c24;
  --orange-dark: #e8480f;
  --orange-text: #c93d0c;
  --ink: #15151a;
  --ink-soft: #3a3941;
  --muted: #5d5b63;
  --muted-2: #6e6c76;
  --paper: #ffffff;
  --soft: #f6f4f0;
  --soft-2: #ece9e2;
  --line: #dedbd4;
  --line-strong: #8a877f;
  --on-ink: var(--paper);
  --on-ink-muted: #b9b8c0;
  --on-ink-subtle: #8a8892;
  --on-ink-line: #414149;
  --on-blue: var(--paper);
  --on-blue-muted: #e4e6ff;
  --on-blue-line: #ffffff66;
  --on-blue-wash: #ffffff17;
  --on-orange: var(--ink);
  --success: #06563f;
  --success-soft: #dff5eb;
  --danger: #8f1c14;
  --danger-soft: #ffece9;
  --focus: var(--ink);
  --focus-on-dark: var(--paper);
  --veil: #fffffff0;
  --shadow-press: 3px 3px 0 #15151a;
  --shadow-lift: 5px 5px 0 #15151a;
  --shadow-tile: 5px 5px 0 #fe5c24;
  --shadow-card: 8px 8px 0 #3a43ff;
  --shadow-panel-orange: 13px 13px 0 #fe5c24;
  --shadow-panel-blue: 13px 13px 0 #3a43ff;
  --shadow-panel-orange-sm: 8px 8px 0 #fe5c24;
  --shadow-panel-blue-sm: 8px 8px 0 #3a43ff;
  --shadow-menu: 0 21px 34px -21px #15151a80;
  --focus-halo: 0 0 0 5px #3a43ff29;
  --accent-on-dark: #7378ff;
  --muted-3: #76747d;
}
:root {
  --fib-3: 3px;
  --fib-5: 5px;
  --fib-8: 8px;
  --fib-13: 13px;
  --fib-21: 21px;
  --fib-34: 34px;
  --fib-55: 55px;
  --fib-89: 89px;
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 21px;
  --r-pill: 999px;
  --r-round: 50%;
  --container: 1240px;
  --gutter: clamp(16px, 3vw, 44px);
  --section-y: clamp(55px, 6.18vw, 89px);
  --header-h: 74px;
  --measure: 62ch;
  --phi: 1.618;
  --phi-root: 1.272;
  --grid-golden: minmax(0, 1.618fr) minmax(0, 1fr);
  --grid-golden-rev: minmax(0, 1fr) minmax(0, 1.618fr);
  --grid-root: minmax(0, 1.272fr) minmax(0, 1fr);
  --grid-root-rev: minmax(0, 1fr) minmax(0, 1.272fr);
  --grid-footer: minmax(0, 1fr) minmax(0, 1.272fr) minmax(0, 1.618fr);
  --bp-wide: 1080px;
  --bp-tablet: 860px;
  --bp-phone: 600px;
  --bp-narrow: 380px;
  --stroke: 2px;
  --hairline: 1px;
  --focus-width: 3px;
  --accent-bar: 3px;
  --t-press: 79ms;
  --t1: 157ms;
  --t2: 314ms;
  --t3: 628ms;
  --t-reveal: 785ms;
  --t-enter: 942ms;
  --t-photo: 942ms;
  --t-drift: 9425ms;
  --stagger: 62ms;
  --autoplay: 8000ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.382,0,.618,1);
  --ease-lift: cubic-bezier(.3,1.3,.6,1);
  --z-call: 55;
  --z-menu: 59;
  --z-header: 60;
  --z-float: 70;
  --z-grain: 999;
  --z-skip: 1000;
  --fs-h1: clamp(40px,5vw,70px);
  --fs-h2: clamp(34px,4.2vw,55px);
  --fs-h3: 21px;
  --font-sans: "Onest", "Arial Nova", "Segoe UI Variable Text", "Segoe UI", Arial, Helvetica, sans-serif;
}
.t-display { font-family: var(--font-sans); font-size: 70px; line-height: 0.95; font-weight: 800; letter-spacing: -0.04em }
.t-h1 { font-family: var(--font-sans); font-size: 55px; line-height: 1.02; font-weight: 800; letter-spacing: -0.04em }
.t-h2 { font-family: var(--font-sans); font-size: 55px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em }
.t-h2-sm { font-family: var(--font-sans); font-size: 43px; line-height: 1.08; font-weight: 800; letter-spacing: -0.035em }
.t-h3 { font-family: var(--font-sans); font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em }
.t-title { font-family: var(--font-sans); font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em }
.t-question { font-family: var(--font-sans); font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em }
.t-tagline { font-family: var(--font-sans); font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em }
.t-lead { font-family: var(--font-sans); font-size: 21px; line-height: 1.5; font-weight: 400 }
.t-body { font-family: var(--font-sans); font-size: 17px; line-height: 1.618; font-weight: 400 }
.t-body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 400 }
.t-small { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; font-weight: 400 }
.t-button { font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: -0.01em }
.t-link { font-family: var(--font-sans); font-size: 15px; line-height: 1.3; font-weight: 700 }
.t-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 700 }
.t-nav { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.06em }
.t-kicker { font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: 0.13em }

/* С 2026-10-08 (правки дизайнера) site.css правится напрямую; артефакт дизайн-системы синхронизировать отдельно. */
/* Делаем! v6 — стили компонентов витрины: золотое сечение и π.
   Подключается после tokens.css: цвета, кегли, отступы, радиусы, тени, тайминги — только токены.
   Пропорции: отступы и радиусы — числа Фибоначчи (3 · 5 · 8 · 13 · 21 · 34 · 55 · 89),
   две колонки — φ (61.8 / 38.2) или √φ (56 / 44), кегли 13 · 17 · 21 · 27 · 34 · 43 · 55 · 70 (шаг √φ).
   Время кратно π/4 × 100 мс: 79 · 157 · 314 · 628 · 785 · 942; шаг каскада — 100/φ ≈ 62 мс.
   На сайте Onest подключается локально (@font-face, woff2, font-display: swap):
   CSP сайта разрешает шрифты только со своего домена.
   0 база · 1 типографика · 2 действия · 3 шапка · 4 первый экран · 5 секции
   6 продукция · 7 услуги · 8 плитки ссылок · 9 галерея · 10 полоса идеи
   11 шаги · 12 FAQ · 13 заявка и форма · 14 footer · 15 связь
   16 страницы услуг · 17 политика и 404 · 18 движение · 19 адаптив          */

/* 0 — база -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--header-h) + var(--fib-21));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.618;font-kerning:normal;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::after{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--orange);color:var(--on-orange)}
a{color:inherit;text-decoration:none}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-weight:400;color:var(--ink);caret-color:var(--blue)}
/* Кольцо фокуса: ink на светлом и оранжевом, paper на ink и blue (--focus переопределяется контекстом). */
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--fib-3)}
:where(a,summary):focus-visible{border-radius:var(--fib-5)}
.services,.order,.hero-facts{--focus:var(--focus-on-dark)}
.lead-form{--focus:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--fib-13);top:var(--fib-13);z-index:var(--z-skip);padding:var(--fib-13) var(--fib-21);border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);font-weight:700;transform:translateY(-160%);transition:transform var(--t2) var(--ease)}
.skip-link:focus{transform:none}

/* 1 — типографика ------------------------------------------------------- */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;text-wrap:balance;text-rendering:optimizeLegibility}
p{text-wrap:pretty;hanging-punctuation:first allow-end}
em{font-style:normal;color:var(--blue)}
.hero h1{font-size:var(--fs-h1);line-height:.95;letter-spacing:-.04em}
/* H1 главной — ровно две строки: констатация и синяя em. */
.hero h1 em{display:block}
.section-head h2,.idea-band h2,.order h2,.service-order h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.035em}
.section-head h2 em,.idea-band h2 em,.order h2 em{display:block}
.service-hero h1,.legal-page h1,.not-found h1{font-size:clamp(34px,4.6vw,55px);line-height:1.02;letter-spacing:-.04em;overflow-wrap:break-word}
.kicker{display:block;margin:0 0 var(--fib-21);font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.page-eyebrow{margin:0 0 var(--fib-13);font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
/* Цифры телефонов и номеров — одной ширины. */
.header-contact strong,.direct .phone,.footer-contacts a,.mobile-call b,.desktop-contact-number input,.process-grid span{font-variant-numeric:tabular-nums}
.arrow-icon{display:block;flex:0 0 20px;width:20px;height:20px;overflow:visible}
.arrow-icon-compact{flex-basis:16px;width:16px;height:16px}
.arrow-icon-left{transform:rotate(180deg)}
/* Фраза переносится целиком, но делится внутри, если уже ширины своей колонки. */
.phrase{display:inline-block;inline-size:max-content;max-inline-size:100%;white-space:normal}
@media (max-width:359px){.phrase{display:inline;inline-size:auto;max-inline-size:none}}

/* 2 — действия ---------------------------------------------------------- */
.button{
  --bg:var(--paper);--fg:var(--ink);--edge:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fib-13);
  min-height:55px;padding:0 var(--fib-34);border:var(--stroke) solid var(--edge);border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--t2) var(--ease-lift),box-shadow var(--t2) var(--ease-lift),background-color var(--t2) var(--ease),color var(--t2) var(--ease)}
/* Геометрия кнопки при наведении постоянна: сдвиг у края вызывает цикл :hover и дрожание.
   Цвет и тень меняются только там, где есть наведение; на touch :hover «прилипает». */
@media (hover:hover){.js .button:hover{box-shadow:var(--shadow-lift)}}
/* Невидимое поле немного расширяет цель для указателя. */
.button::before,.service-links a::before,.desktop-contact-trigger::before{content:"";position:absolute;inset:-1px -3px -3px -1px}
.button:active{transform:translate(1px,1px);box-shadow:none;transition-duration:var(--t-press)}
.button:disabled{opacity:.618;cursor:not-allowed;transform:none;box-shadow:none}
.button.is-sending{opacity:1;cursor:progress}
.button-primary{--bg:var(--orange);--fg:var(--on-orange)}
.button-plain{--bg:transparent}
.button-dark{--bg:var(--ink);--fg:var(--on-ink)}
.button-block{width:100%}
.button-sm{min-height:44px;padding:0 var(--fib-21);gap:var(--fib-8);font-size:15px}
@media (hover:hover){
  .button-primary:hover{--bg:var(--orange-dark)}
  .button-plain:hover{--bg:var(--soft)}
  .button-dark:hover{--bg:var(--blue)}
}

/* Текстовая ссылка «Подробнее…»: серый текст, тонкое серое подчёркивание, без стрелки. Цвет при наведении не меняется. */
.more-link{
  display:inline-flex;align-items:center;min-height:40px;max-width:100%;
  color:var(--ink-soft);font-size:15px;line-height:1.3;font-weight:500;
  text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:5px;
  transition:text-decoration-color var(--t1) linear,text-underline-offset var(--t2) var(--ease)}
.services .more-link{color:var(--on-blue-muted);text-decoration-color:var(--on-blue-line)}
@media (hover:hover){.more-link:hover{text-decoration-color:currentColor;text-underline-offset:3px}}

/* 3 — шапка ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--fib-21);padding:0 var(--gutter);
  background:var(--veil);-webkit-backdrop-filter:saturate(1.4) blur(13px);backdrop-filter:saturate(1.4) blur(13px);
  border-bottom:var(--stroke) solid transparent;
  transition:transform var(--t3) var(--ease),border-color var(--t2) linear}
.site-header.is-stuck{border-bottom-color:var(--ink)}
.site-header.is-away{transform:translateY(-102%)}
.site-header:focus-within{transform:none}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{width:116px;height:auto;transform-origin:left center;transition:transform var(--t2) var(--ease),scale var(--t3) var(--ease)}
@media (hover:hover){.brand:hover img{transform:scale(1.04)}}
/* Прилипшая шапка: знак чуть собирается, высота шапки не меняется. */
.site-header.is-stuck .brand img{scale:.92}
.site-header nav{display:flex;justify-content:center;gap:clamp(13px,2.4vw,34px)}
.site-header nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:13px;line-height:1.2;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform var(--t2) var(--ease)}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after,.site-header nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.header-contact{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:44px;line-height:1.2}
.header-contact span{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.header-contact strong{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;transition:color var(--t2) linear}
@media (hover:hover){.header-contact:hover strong{color:var(--blue)}}
.nav-toggle{display:none;place-items:center;width:44px;height:44px;padding:0;border:var(--stroke) solid var(--ink);border-radius:var(--r-pill);background:var(--paper);cursor:pointer}
.nav-toggle i{position:relative;display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:background-color var(--t-press) linear}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:transform var(--t2) var(--ease-lift)}
.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

/* 4 — первый экран ------------------------------------------------------ */
/* Текст и фото — √φ : 1 (56 / 44). */
.hero{
  position:relative;max-width:var(--container);margin:0 auto;
  padding:clamp(21px,3.4vw,55px) var(--gutter) var(--section-y);
  display:grid;grid-template-columns:var(--grid-root);gap:clamp(34px,4.6vw,55px);
  align-items:center;min-height:calc(100svh - var(--header-h))}
.hero-copy{min-width:0;container-type:inline-size}
.hero-lead{max-width:36ch;margin:var(--fib-21) 0 0;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--fib-13);margin-top:var(--fib-34)}

.hero-facts{
  list-style:none;margin:var(--fib-34) 0 0;padding:var(--fib-21);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--ink);color:var(--on-ink);border-radius:var(--r-md)}
.hero-facts li{min-width:0;display:flex;flex-direction:column;gap:var(--fib-5);padding:0 var(--fib-13)}
.hero-facts li:first-child{padding-left:0}
.hero-facts li:last-child{padding-right:0}
.hero-facts li+li{border-left:var(--hairline) solid var(--on-ink-line)}
.hero-facts strong{display:block;font-size:17px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.hero-facts li:nth-child(2) strong{white-space:nowrap}
.hero-facts .fact-route{display:grid}
.hero-facts .fact-caption{font-size:13px;line-height:1.4;color:var(--on-ink-muted)}
@container (max-width:520px){
  .hero-facts{grid-template-columns:1fr;padding:var(--fib-5) var(--fib-21)}
  .hero-facts li,.hero-facts li:first-child,.hero-facts li:last-child{display:grid;grid-template-columns:var(--grid-root);align-items:center;gap:var(--fib-13);padding:var(--fib-13) 0}
  .hero-facts li+li{border-left:0;border-top:var(--hairline) solid var(--on-ink-line)}
}

/* Фото — кадр 1 : √φ (≈ 4 : 5), наклон 0.618°. */
.hero-media{
  position:relative;margin:0;overflow:hidden;background:var(--soft-2);
  border:var(--stroke) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-panel-orange);transform:rotate(.618deg)}
.hero-media .carousel-viewport{position:relative;aspect-ratio:1/1.272}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity var(--t-photo) var(--ease-in-out)}
.carousel-slide.is-active{opacity:1;z-index:2}
.carousel-slide.is-previous{opacity:1;z-index:1}
/* Невидимая кнопка поверх фото: пауза автосмены без видимых стрелок (решение V02). */
.hero-autoplay-toggle{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:calc(var(--r-lg) - 2px);background:transparent;color:transparent;cursor:pointer}
.hero-autoplay-toggle:focus-visible{outline:var(--focus-width) solid var(--paper);outline-offset:-9px;box-shadow:inset 0 0 0 6px var(--ink)}
.hero-stamp{
  position:absolute;right:-8px;top:var(--fib-21);z-index:4;padding:var(--fib-13) var(--fib-21) var(--fib-13) var(--fib-13);border:var(--stroke) solid var(--ink);border-radius:var(--r-xs);
  background:var(--orange);color:var(--on-orange);font-size:13px;line-height:1.15;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;transform:rotate(5deg);pointer-events:none}
.hero-stamp-line{display:flex;align-items:center;gap:var(--fib-5);margin-top:2px}

/* 5 — секции ------------------------------------------------------------ */
.section{max-width:var(--container);margin:0 auto;padding:var(--section-y) var(--gutter)}
/* Заголовок и пояснение — φ : 1 (61.8 / 38.2). */
.section-head{display:grid;grid-template-columns:var(--grid-golden);gap:clamp(21px,4vw,55px);align-items:end;margin-bottom:clamp(34px,3.8vw,55px)}
.section-head p{max-width:44ch;margin:0;font-size:17px;line-height:1.618;color:var(--muted)}

/* 6 — продукция --------------------------------------------------------- */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fib-21)}
.product-card{
  position:relative;display:flex;flex-direction:column;min-width:0;background:var(--soft);
  border:var(--stroke) solid var(--ink);border-radius:var(--r-md);
  transition:transform var(--t2) var(--ease-lift),box-shadow var(--t2) var(--ease-lift),background-color var(--t2) linear}
@media (hover:hover){
  .product-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-card);background:var(--paper)}
  .product-card:hover .product-image img{transform:scale(1.05)}
}
.product-card::after{content:"";position:absolute;z-index:-1;inset:0 -4px -4px 0}
.product-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft-2);border-bottom:var(--stroke) solid var(--ink);border-radius:calc(var(--r-md) - var(--stroke)) calc(var(--r-md) - var(--stroke)) 0 0}
.product-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-photo) var(--ease-out)}
.product-image .carousel-slide{transition:opacity var(--t-photo) var(--ease-in-out),transform var(--t-photo) var(--ease-out)}
.product-image[data-carousel]{touch-action:pan-y}
.product-image[data-carousel]:focus-visible{outline:0}
.product-image[data-carousel]:focus-visible::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 6px var(--paper)}
.product-copy{display:flex;flex-direction:column;flex:1;padding:var(--fib-21)}
.product-copy h3,.service-list h3,.process-grid h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.03em}
.product-copy p{margin:var(--fib-8) 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.card-links{display:grid;justify-items:start;margin:var(--fib-5) 0 var(--fib-21)}
.product-copy>.button{align-self:flex-start;margin-top:auto}

/* 7 — услуги ------------------------------------------------------------ */
.services{
  max-width:none;padding-inline:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));
  background:var(--blue);color:var(--on-blue);border-block:var(--stroke) solid var(--ink)}
.services .section-head h2 em{color:var(--on-blue)}
.services .section-head p{color:var(--on-blue-muted)}
.service-list{list-style:none;margin:0;padding:0;border-top:var(--hairline) solid var(--on-blue-line)}
/* Название и описание — 1 : φ (38.2 / 61.8). */
.service-list li{
  position:relative;isolation:isolate;display:grid;grid-template-columns:var(--grid-golden-rev);gap:clamp(21px,3.8vw,55px);align-items:baseline;
  padding:var(--fib-21) var(--fib-8) var(--fib-21) 0;border-bottom:var(--hairline) solid var(--on-blue-line)}
.service-list p{max-width:var(--measure);margin:0;font-size:15px;line-height:1.5;color:var(--on-blue-muted)}
.service-list .more-link{margin-top:var(--fib-5)}
.service-list li::before{content:"";position:absolute;inset:0 calc(-1 * var(--fib-13));z-index:-1;background:transparent;transition:background-color var(--t2) linear}
@media (hover:hover) and (pointer:fine){
  .service-list li:hover::before{background:var(--on-blue-wash)}
}

/* 8 — плитки ссылок ----------------------------------------------------- */
.service-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fib-13)}
.service-links a{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--fib-13);min-height:55px;padding:var(--fib-13) var(--fib-21);
  border:var(--stroke) solid var(--ink);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.25;font-weight:700;text-decoration:none;
  transition:transform var(--t2) var(--ease-lift),box-shadow var(--t2) var(--ease-lift)}
@media (hover:hover){.service-links a:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-tile)}}
.service-links .arrow-icon{flex-shrink:0}

/* 9 — галерея ----------------------------------------------------------- */
/* 21 колонка = 13 + 8 (Фибоначчи ≈ φ): в ряду золотой прямоугольник и квадрат, ритм меняется через ряд. */
.gallery{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:var(--fib-21)}
.gallery figure{position:relative;grid-column:span 13;margin:0;overflow:hidden;background:var(--soft);border:var(--stroke) solid var(--ink);border-radius:var(--r-md)}
.gallery figure:nth-child(4n+2),.gallery figure:nth-child(4n+3){grid-column:span 8;aspect-ratio:1}
/* Широкий кадр без соседа-квадрата в ряду сам держит золотую пропорцию. */
.gallery figure:nth-child(4n+1):last-child{aspect-ratio:1.618}
.gallery img{width:100%;height:0;min-height:100%;object-fit:cover;transition:transform var(--t-photo) var(--ease-out)}
.gallery figcaption{
  position:absolute;left:var(--fib-13);bottom:var(--fib-13);padding:var(--fib-8) var(--fib-13);border:var(--stroke) solid var(--ink);border-radius:var(--r-pill);
  background:var(--veil);font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:transform var(--t2) var(--ease-lift),background-color var(--t2) linear}
@media (hover:hover){
  .gallery figure:hover img{transform:scale(1.05)}
  .gallery figure:hover figcaption{transform:translateY(-3px);background:var(--orange)}
}

/* 10 — полоса идеи ------------------------------------------------------ */
/* Ширина совпадает с колонкой содержимого соседних секций; колонки — √φ : 1. */
.idea-band{
  width:min(calc(100% - 2 * var(--gutter)),calc(var(--container) - 2 * var(--gutter)));margin:0 auto;
  padding:clamp(34px,4.6vw,55px);display:grid;grid-template-columns:var(--grid-root);gap:clamp(21px,4vw,55px);align-items:end;
  background:var(--orange);color:var(--on-orange);border:var(--stroke) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-panel-blue)}
.idea-band h2 em{color:var(--paper)}
.idea-band .idea-text{max-width:40ch;margin:0;font-size:17px;line-height:1.618}
.idea-band .button{margin-top:var(--fib-21)}

/* 11 — шаги ------------------------------------------------------------- */
/* Ячейка шага — золотой прямоугольник φ : 1, на планшете — φ² : 1. */
.process-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:var(--stroke) solid var(--ink);border-radius:var(--r-md)}
.process-grid li{display:flex;flex-direction:column;gap:var(--fib-21);align-self:stretch;aspect-ratio:1.618;padding:var(--fib-21);background:var(--soft);border-right:var(--stroke) solid var(--ink);transition:background-color var(--t2) linear}
.process-grid li:nth-child(even){background:var(--paper)}
.process-grid li:last-child{border-right:0;background:var(--orange)}
@media (hover:hover){
  .process-grid li:hover{background:var(--blue-soft)}
  .process-grid li:last-child:hover{background:var(--orange-dark)}
}
.process-grid span{position:relative;display:grid;place-items:center;width:34px;height:34px;border:var(--stroke) solid var(--ink);border-radius:var(--r-round);font-size:14px;line-height:1;font-weight:800}

/* 12 — FAQ -------------------------------------------------------------- */
/* Заголовок и вопросы — 1 : φ. Строка вопроса — 55 px = 21 × φ². */
.faq{display:grid;grid-template-columns:var(--grid-golden-rev);gap:clamp(34px,5vw,55px)}
.faq .section-head{display:block;margin:0}
.faq-list{border-top:var(--stroke) solid var(--ink)}
.faq-list details{border-bottom:var(--stroke) solid var(--ink)}
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--fib-21);min-height:55px;padding:var(--fib-13) 0;list-style:none;
  font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.02em;cursor:pointer;transition:color var(--t2) linear}
.faq-list summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq-list summary:hover{color:var(--blue)}}
/* Знак рисуется двумя полосами: точный центр при любом шрифте. */
.faq-sign{position:relative;flex:0 0 34px;width:34px;height:34px;border:var(--stroke) solid var(--ink);border-radius:var(--r-round);font-size:0;color:var(--ink);transition:transform var(--t2) var(--ease-lift),background-color var(--t2) linear,border-color var(--t2) linear,color var(--t2) linear}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:currentColor}
.faq-sign::after{transform:rotate(90deg)}
.faq-list details[open] .faq-sign{transform:rotate(135deg);background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.faq-list details p{max-width:var(--measure);margin:0 0 var(--fib-21);padding-right:var(--fib-55);font-size:17px;line-height:1.618;color:var(--muted);animation:faq-open var(--t2) var(--ease) both}
@keyframes faq-open{from{opacity:0;transform:translateY(-8px)}}

/* 13 — заявка и форма --------------------------------------------------- */
/* Текст и форма — 1 : √φ (44 / 56). */
.order{
  display:grid;grid-template-columns:var(--grid-root-rev);gap:clamp(34px,4.4vw,55px);align-items:start;
  padding:var(--section-y) max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));
  background:var(--ink);color:var(--on-ink)}
.order h2 em{color:var(--accent-on-dark)}
.order-intro{position:sticky;top:calc(var(--header-h) + var(--fib-34))}
.order-intro>p{max-width:34ch;margin:var(--fib-21) 0 0;font-size:17px;line-height:1.618;color:var(--on-ink-muted)}
.direct{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fib-5);margin-top:var(--fib-34);padding-top:var(--fib-21);border-top:var(--hairline) solid var(--on-ink-line)}
.direct .phone{font-size:clamp(21px,2.4vw,34px);line-height:1.15;font-weight:800;letter-spacing:-.03em;transition:color var(--t2) linear}
@media (hover:hover){.direct .phone:hover{color:var(--accent-on-dark)}}
.direct span{margin-bottom:var(--fib-13);font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-subtle)}
.direct .mail{font-size:16px;font-weight:700;color:var(--on-ink);text-decoration:none}
@media (hover:hover){.direct .mail:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}

.lead-form{padding:clamp(21px,3.8vw,55px);background:var(--paper);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-panel-blue)}
.form-note{margin:0 0 var(--fib-21);padding-bottom:var(--fib-13);border-bottom:var(--hairline) solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.lead-form label,.field{display:block;margin:0 0 var(--fib-21)}
.label-text{display:flex;align-items:baseline;gap:var(--fib-5);margin-bottom:var(--fib-8);font-size:14px;line-height:1.3;font-weight:700;color:var(--ink)}
.label-text b{font-weight:800;color:var(--orange-text)}
.field-hint,.lead-form small{display:block;margin-top:var(--fib-8);font-size:13px;line-height:1.45;color:var(--muted-2)}
.field-error{display:block;margin-top:var(--fib-8);font-size:13px;line-height:1.45;font-weight:500;color:var(--danger)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--fib-21)}
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;min-height:55px;padding:var(--fib-13) var(--fib-13);border:var(--stroke) solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);font-size:16px;line-height:1.4;
  transition:border-color var(--t1) linear,box-shadow var(--t1) var(--ease)}
::placeholder{color:var(--muted-2);opacity:1}
textarea{min-height:144px;resize:vertical}
@media (hover:hover){:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):hover{border-color:var(--muted-2)}}
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{outline:0;border-color:var(--blue);box-shadow:var(--focus-halo)}
:where(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger)}
select{appearance:none;padding-right:var(--fib-34);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2315151a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--fib-13) center}
.check,.lead-form .check{display:flex;align-items:flex-start;gap:var(--fib-13);margin:var(--fib-5) 0 var(--fib-21);font-size:15px;line-height:1.45;color:var(--muted)}
.check input{flex:0 0 21px;width:21px;height:21px;margin:0;accent-color:var(--blue);cursor:pointer}
.check input:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:2px}
.check a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fib-13) var(--fib-21)}
.form-footer .form-footnote{margin:0;font-size:13px;line-height:1.45;color:var(--muted-3)}
/* Спиннер — один оборот за 2π × 100 мс. */
.form-spinner{display:none;width:16px;height:16px;border:2px solid var(--line-strong);border-top-color:var(--ink);border-radius:var(--r-round);animation:spin var(--t3) linear infinite}
.is-sending .form-spinner{display:block}
.is-sending .arrow-icon{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.form-status{margin-top:var(--fib-13);border-radius:var(--r-sm);font-size:15px;line-height:1.45;font-weight:500}
.form-status:not(:empty){padding:var(--fib-13) var(--fib-21);animation:status-in var(--t2) var(--ease) both}
.form-status.success{background:var(--success-soft);color:var(--success)}
.form-status.error{background:var(--danger-soft);color:var(--danger)}
.form-status.pending{background:var(--blue-soft);color:var(--blue-dark)}
/* Успех — галочка дорисовывается; ошибка — короткое покачивание. Смысл всегда в тексте статуса. */
.form-status.success:not(:empty)::before{content:"";display:inline-block;width:6px;height:12px;margin:0 var(--fib-13) 0 2px;border:solid currentColor;border-width:0 2px 2px 0;vertical-align:.08em;transform:rotate(45deg)}
@keyframes status-in{from{opacity:0;transform:translateY(-5px)}}

/* 14 — footer ----------------------------------------------------------- */
/* Колонки — 1 : √φ : φ. */
.site-footer{
  max-width:var(--container);margin:0 auto;padding:var(--section-y) var(--gutter) var(--fib-34);
  display:grid;grid-template-columns:var(--grid-footer);gap:var(--fib-34) var(--fib-55);align-items:start}
.footer-brand img{width:132px;height:auto}
.footer-brand p{max-width:28ch}
.site-footer h2{margin:0 0 var(--fib-13);font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.site-footer p{margin:var(--fib-13) 0 0;font-size:15px;line-height:1.618;color:var(--muted)}
.footer-col{min-width:0}
.footer-col a{display:table;margin:var(--fib-5) 0;font-size:16px;line-height:1.5;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.footer-col a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}
.footer-legal p{max-width:46ch;margin-top:0}
.footer-legal .footer-policy{margin-top:var(--fib-13);font-size:15px}

/* 15 — связь ------------------------------------------------------------ */
.desktop-contact{position:fixed;right:var(--fib-21);bottom:var(--fib-21);z-index:var(--z-float);display:none}
.desktop-contact-trigger{
  position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--fib-21);
  border:var(--stroke) solid var(--ink);border-radius:var(--r-pill);background:var(--orange);color:var(--on-orange);
  box-shadow:var(--shadow-press);font-size:16px;font-weight:700;text-decoration:none;
  transition:transform var(--t2) var(--ease-lift),box-shadow var(--t2) var(--ease-lift),background-color var(--t2) linear}
@media (hover:hover){.desktop-contact-trigger:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lift);background:var(--orange-dark)}}
.desktop-contact-panel{
  position:absolute;right:0;bottom:calc(100% + var(--fib-13));width:min(377px,calc(100vw - 32px));max-height:calc(100dvh - 92px);
  overflow-y:auto;overscroll-behavior:contain;padding:var(--fib-21);border:var(--stroke) solid var(--ink);border-radius:var(--r-md);
  background:var(--paper);box-shadow:var(--shadow-panel-blue-sm);transform-origin:right bottom}
.desktop-contact-close{position:absolute;right:var(--fib-8);top:var(--fib-8);display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-round);background:transparent;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:background-color var(--t1) linear}
@media (hover:hover){.desktop-contact-close:hover{background:var(--soft)}}
.desktop-contact-title{margin:0 var(--fib-34) var(--fib-13) 0;font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.desktop-contact-number{display:grid;gap:var(--fib-5)}
.desktop-contact-number span{font-size:13px;font-weight:700;color:var(--muted)}
.desktop-contact-number input{min-height:44px;padding:var(--fib-8) var(--fib-13);font-size:17px;font-weight:700;user-select:all}
.desktop-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--fib-8);margin-top:var(--fib-8)}
.desktop-contact-actions a,.desktop-contact-actions button,.desktop-contact-order{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--fib-8);border:var(--stroke) solid var(--ink);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-size:14px;font-weight:700;text-align:center;
  text-decoration:none;cursor:pointer;transition:background-color var(--t1) linear,color var(--t1) linear}
@media (hover:hover){.desktop-contact-actions a:hover,.desktop-contact-actions button:hover{background:var(--soft)}}
.desktop-contact-order{width:100%;margin-top:var(--fib-8);background:var(--ink);color:var(--on-ink)}
@media (hover:hover){.desktop-contact-order:hover{background:var(--blue);color:var(--on-blue)}}
.desktop-contact-status{min-height:1.35em;margin:var(--fib-8) 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.callback-form{margin-top:var(--fib-13);padding-top:var(--fib-13);border-top:var(--hairline) solid var(--line)}
.callback-intro{margin:0 0 var(--fib-13);font-size:15px;line-height:1.4;font-weight:700}
.callback-phone{display:grid;gap:var(--fib-5);margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.callback-phone input{min-height:44px;padding:var(--fib-8) var(--fib-13)}
.callback-form .check{margin:var(--fib-13) 0;font-size:13px;line-height:1.4}
.callback-form .check input{flex-basis:20px;width:20px;height:20px}
.callback-submit{width:100%;min-height:46px}
.callback-result:not(:empty){padding:var(--fib-8) var(--fib-13);font-size:13px}
.mobile-call{display:none}

/* 16 — страницы услуг --------------------------------------------------- */
.service-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fib-8);padding-top:var(--fib-21);padding-bottom:0;font-size:14px;line-height:1.4;color:var(--muted)}
.service-breadcrumb a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;transition:color var(--t1) linear,text-decoration-color var(--t1) linear,text-underline-offset var(--t2) var(--ease)}
@media (hover:hover){.service-breadcrumb a:hover{text-decoration-color:currentColor;text-underline-offset:3px}}
/* Текст и изображение — φ : 1. */
.service-hero{display:grid;grid-template-columns:var(--grid-golden);align-items:center;gap:clamp(34px,5vw,55px);padding-top:var(--fib-34)}
.service-hero>div{min-width:0;container-type:inline-size}
.service-hero-text{grid-template-columns:minmax(0,900px)}
.service-hero .hero-facts{margin-top:var(--fib-34)}
.service-terms{margin:var(--fib-21) 0 0;font-size:15px;line-height:1.618;color:var(--ink-soft)}
.service-image{margin:0;overflow:hidden;aspect-ratio:1/1;background:var(--soft);border:var(--stroke) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-panel-orange)}
.service-image img{width:100%;height:100%;object-fit:cover}
.service-image-visualization{aspect-ratio:auto}
.service-image-visualization img{height:auto;aspect-ratio:3/2}
.service-image figcaption{padding:var(--fib-13) var(--fib-21);border-top:var(--stroke) solid var(--ink);background:var(--paper);font-size:13px;line-height:1.45;color:var(--muted-2)}
.service-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fib-55);padding-top:0}
.service-section{min-width:0;padding-top:var(--fib-21);border-top:var(--stroke) solid var(--ink)}
.service-section h2,.service-contact h2,.service-related h2{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.03em}
.service-section p,.service-section li,.service-contact p{font-size:17px;line-height:1.618;color:var(--muted)}
.service-section p{margin:var(--fib-13) 0 0}
.service-section ul{margin:var(--fib-13) 0 0;padding-left:var(--fib-21)}
.service-section li+li{margin-top:var(--fib-8)}
.service-section li::marker{color:var(--orange)}
.service-contact{padding-top:0}
.service-contact a{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.service-related h2{margin-bottom:var(--fib-21)}
.service-order{
  max-width:none;display:flex;align-items:center;justify-content:space-between;gap:var(--fib-34);
  padding-inline:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));
  background:var(--soft);border-block:var(--stroke) solid var(--ink)}
.service-order-text{max-width:58ch;margin:var(--fib-13) 0 0;font-size:17px;line-height:1.618;color:var(--muted)}
.service-order .button{flex-shrink:0}

/* 17 — политика и 404 --------------------------------------------------- */
.legal-page,.not-found{background:var(--soft)}
.legal-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--fib-21);padding:0 var(--gutter);background:var(--paper);border-bottom:var(--stroke) solid var(--ink)}
.legal-header img{width:116px;height:auto}
.legal-header>a:last-child{display:inline-flex;align-items:center;gap:var(--fib-8);min-height:44px;font-size:15px;font-weight:700}
.legal-page main,.not-found main{max-width:760px;margin:0 auto;padding:var(--section-y) var(--gutter)}
.legal-page h1{margin-bottom:var(--fib-34)}
.legal-page h2{margin:var(--fib-34) 0 var(--fib-8);font-size:21px;line-height:1.15;letter-spacing:-.03em}
.legal-page p{font-size:17px;line-height:1.618;color:var(--ink-soft)}
.legal-page main a{text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.not-found{min-height:100svh;display:grid;place-items:center}
.not-found main{text-align:center}
.not-found main img{width:144px;margin:0 auto var(--fib-34)}
.not-found h1{margin-bottom:var(--fib-21)}
.not-found p{font-size:21px;line-height:1.5;color:var(--muted)}
.not-found .button{margin-top:var(--fib-21)}

/* 18 — движение --------------------------------------------------------- */
/* Всё движение — только при prefers-reduced-motion: no-preference. Появление использует независимые
   translate / scale / rotate, поэтому не спорит с transform наведения и наклона. Движутся только
   transform, opacity и тени: раскладка не сдвигается (CLS 0). */
@property --ring{syntax:"<angle>";inherits:false;initial-value:360deg}
@media (prefers-reduced-motion:no-preference){
  /* Кольцо фокуса «защёлкивается»: смещение 8 → 3 px. */
  :focus-visible{animation:focus-snap var(--t1) var(--ease-out)}

  /* Вход первого экрана: строки поднимаются каскадом с шагом 100/φ. */
  .js .hero-copy>*,.js .service-hero>div>*,.js .service-breadcrumb{animation:rise var(--t-enter) var(--ease-out) both}
  .js .hero h1,.js .service-hero h1{animation-delay:var(--stagger)}
  .js .hero h1 em{animation:rise var(--t-enter) var(--ease-out) both;animation-delay:calc(2 * var(--stagger))}
  .js .hero-lead{animation-delay:calc(3 * var(--stagger))}
  .js .service-hero .hero-lead{animation-delay:calc(2 * var(--stagger))}
  .js .hero-actions{animation-delay:calc(4 * var(--stagger))}
  .js .service-hero .hero-actions{animation-delay:calc(3 * var(--stagger))}
  .js .hero-facts,.js .service-terms{animation-delay:calc(5 * var(--stagger))}
  /* Фото ложится, его тень выезжает из-под кадра, штамп прилипает сверху. */
  .js .hero-media,.js .service-image{animation:rise-media var(--t-enter) var(--ease-out) calc(2 * var(--stagger)) both,shadow-land var(--t3) var(--ease-out) calc(var(--t-enter) * .5) both}
  .js .hero-stamp{animation:stamp var(--t3) var(--ease-lift) calc(var(--t-enter) * .75) both}
  /* Активное фото первого экрана медленно приближается (30π ≈ 9.4 s); уходящее фото продолжает движение под новым. */
  .js .hero-media .carousel-slide.is-active,.js .hero-media .carousel-slide.is-previous{animation:drift var(--t-drift) linear both}
  .js .desktop-contact-trigger{animation:fade var(--t3) var(--ease) var(--t3) both}
  .js .desktop-contact-panel:not([hidden]){animation:panel-in var(--t2) var(--ease-out) both}
  .legal-page main>:nth-child(-n+3),.not-found main>*{animation:rise var(--t-enter) var(--ease-out) both}
  .legal-page main>:nth-child(2),.not-found main>:nth-child(2){animation-delay:var(--stagger)}
  .legal-page main>:nth-child(3),.not-found main>:nth-child(3){animation-delay:calc(2 * var(--stagger))}
  .not-found main>:nth-child(4){animation-delay:calc(3 * var(--stagger))}
  .not-found main>:nth-child(5){animation-delay:calc(4 * var(--stagger))}

  /* Появление при прокрутке: подъём на fib-21 и проявление, каскад --i × stagger. */
  .js .reveal{opacity:0;translate:0 var(--fib-21);transition:opacity var(--t-reveal) var(--ease-out),translate var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
  .js .reveal.is-in{opacity:1;translate:none}
  /* Вторая строка заголовка секции догоняет первую. */
  .js .section-head.reveal h2 em{transition:opacity var(--t-reveal) var(--ease-out) var(--stagger),translate var(--t-reveal) var(--ease-out) var(--stagger)}
  .js .section-head.reveal:not(.is-in) h2 em{opacity:0;translate:0 var(--fib-13)}
  /* Карточки: каскад появления, но наведение без задержки. Фото «оседает» 108 → 100 %. */
  .js .product-card.reveal{transition-property:opacity,translate,transform,box-shadow,background-color;transition-duration:var(--t-reveal),var(--t-reveal),var(--t2),var(--t2),var(--t2);transition-timing-function:var(--ease-out),var(--ease-out),var(--ease-lift),var(--ease-lift),linear;transition-delay:calc(var(--i,0) * var(--stagger)),calc(var(--i,0) * var(--stagger)),0s,0s,0s}
  .js .product-card.reveal .product-image img,.js .gallery figure.reveal img{transition:opacity var(--t-photo) var(--ease-in-out),transform var(--t-photo) var(--ease-out),scale var(--t-enter) var(--ease-out) calc(var(--i,0) * var(--stagger))}
  .js .product-card.reveal:not(.is-in) .product-image img,.js .gallery figure.reveal:not(.is-in) img{scale:1.08}
  /* Полоса идеи ложится на свою тень. */
  .js .idea-band.reveal{transition:opacity var(--t-reveal) var(--ease-out),translate var(--t-reveal) var(--ease-out),box-shadow var(--t3) var(--ease-out) var(--t2)}
  .js .idea-band.reveal:not(.is-in){box-shadow:0 0 0 var(--blue)}
  /* Кольца номеров шагов прорисовываются по окружности — 2πr. */
  .js .process-grid li.reveal span{border-color:transparent}
  .js .process-grid li.reveal span::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(currentColor var(--ring,360deg),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));transition:--ring var(--t3) var(--ease-out) calc(var(--i,0) * var(--stagger) + var(--t2))}
  .js .process-grid li.reveal:not(.is-in) span::before{--ring:0deg}

  /* Плавное раскрытие FAQ по высоте там, где браузер умеет анимировать auto. */
  @supports (interpolate-size:allow-keywords){
    .faq-list details{interpolate-size:allow-keywords}
    .faq-list details::details-content{block-size:0;overflow-y:clip;transition:block-size var(--t2) var(--ease),content-visibility var(--t2) allow-discrete}
    .faq-list details[open]::details-content{block-size:auto}
  }

  /* Статусы формы: ошибка коротко покачивается, галочка успеха дорисовывается. */
  .form-status.error:not(:empty){animation:status-in var(--t2) var(--ease) both,shake var(--t2) var(--ease-in-out) var(--t1)}
  .form-status.success:not(:empty)::before{animation:tick var(--t3) var(--ease-out) var(--t1) both}
}
@keyframes rise{from{opacity:0;translate:0 var(--fib-21)}}
@keyframes rise-media{from{opacity:0;translate:0 var(--fib-34);scale:.97}}
@keyframes shadow-land{from{box-shadow:0 0 0 var(--orange)}}
@keyframes stamp{from{opacity:0;scale:1.618;rotate:13deg}}
@keyframes drift{from{scale:1}to{scale:1.05}}
@keyframes fade{from{opacity:0}}
@keyframes panel-in{from{opacity:0;scale:.985}}
@keyframes focus-snap{from{outline-offset:8px}}
@keyframes shake{20%{translate:-3px 0}40%{translate:3px 0}60%{translate:-2px 0}80%{translate:2px 0}}
@keyframes tick{from{clip-path:inset(100% 100% 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-autoplay-toggle{display:none}
}

/* 19 — адаптив: bp-wide 1080 · bp-tablet 860 · bp-phone 600 · bp-narrow 380 */
@media (max-width:1080px){
  .site-header nav{gap:var(--fib-13)}
  .site-header nav a{font-size:12px}
  .hero{grid-template-columns:minmax(0,1.618fr) minmax(300px,1fr);gap:var(--fib-34)}
  .product-grid,.service-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery figure,.gallery figure:nth-child(n){grid-column:auto;aspect-ratio:1.272}
  .faq{grid-template-columns:1fr;gap:var(--fib-34)}
}
@media (min-width:1081px){
  .desktop-contact{display:block}
}
@media (max-width:860px){
  :root{--header-h:66px}
  .nav-toggle{display:grid;order:3}
  .header-contact{order:2}
  .site-header nav{
    position:absolute;left:0;right:0;top:100%;z-index:var(--z-menu);flex-direction:column;gap:0;
    padding:var(--fib-5) var(--gutter) var(--fib-21);background:var(--paper);border-bottom:var(--stroke) solid var(--ink);box-shadow:var(--shadow-menu);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),visibility var(--t2) linear}
  .site-header nav a{min-height:55px;font-size:21px;letter-spacing:-.01em;text-transform:none;border-bottom:var(--hairline) solid var(--line)}
  .site-header nav a::after{display:none}
  .site-header nav a:last-child{border-bottom:0}
  .site-header.nav-open nav{visibility:visible;opacity:1;transform:none}
  /* Фото встаёт сразу под кнопки: display: contents меняет порядок без дублирования разметки. */
  .hero{min-height:0;grid-template-columns:1fr;gap:0;padding-top:var(--fib-34)}
  .hero-copy{display:contents}
  .hero .kicker{order:1}
  .hero h1{order:2}
  .hero-lead{order:3}
  .hero-actions{order:4}
  .hero-media{order:5;max-width:600px;margin-top:var(--fib-34);transform:rotate(.5deg)}
  .hero-facts{order:6;margin-top:var(--fib-34)}
  .hero-media .carousel-viewport{aspect-ratio:1.272}
  .section-head{grid-template-columns:1fr;gap:var(--fib-21);align-items:start}
  .section-head p{max-width:56ch}
  .service-list li{grid-template-columns:1fr;gap:var(--fib-8);padding:var(--fib-21) 0}
  .idea-band{grid-template-columns:1fr;align-items:start}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid li{aspect-ratio:2.618}
  .process-grid li:nth-child(2n){border-right:0}
  .process-grid li:nth-child(-n+2){border-bottom:var(--stroke) solid var(--ink)}
  .order{grid-template-columns:1fr;gap:var(--fib-34)}
  .order-intro{position:static}
  .order-intro>p{max-width:46ch}
  .site-footer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .service-hero{grid-template-columns:1fr}
  .service-image{width:100%;max-width:560px}
  .service-order{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  :root{--header-h:62px}
  body{padding-bottom:76px}
  .site-header{gap:var(--fib-8)}
  .brand img{width:96px}
  .header-contact span{display:none}
  .header-contact strong{font-size:15px}
  .hero h1{line-height:.98}
  .hero-lead{max-width:none}
  .hero-actions{display:grid;gap:var(--fib-8);margin-top:var(--fib-21)}
  .hero-actions .button{width:100%}
  .hero-media{transform:none;border-radius:var(--r-md);box-shadow:var(--shadow-panel-orange-sm)}
  .hero-autoplay-toggle{border-radius:calc(var(--r-md) - 2px)}
  .hero-media .carousel-viewport{aspect-ratio:1/1.272}
  .hero-stamp{right:-6px;top:var(--fib-13);padding:var(--fib-8) var(--fib-13);font-size:12px}
  .hero-facts{grid-template-columns:1fr;margin-top:var(--fib-34);padding:var(--fib-5) var(--fib-21)}
  .hero-facts li,.hero-facts li:first-child,.hero-facts li:last-child{display:grid;grid-template-columns:var(--grid-root);align-items:center;gap:var(--fib-13);padding:var(--fib-13) 0}
  .hero-facts li+li{border-left:0;border-top:var(--hairline) solid var(--on-ink-line)}
  .section{padding-block:var(--fib-55)}
  /* Заголовок секции и на телефоне — две смысловые части: чёрная, затем цветная с новой строки. */
  :root{--fs-h1:clamp(36px,10.5vw,48px);--fs-h2:clamp(27px,7.8vw,32px)}
  .section-head h2,.idea-band h2,.order h2,.service-order h2{line-height:1.06}
  .product-grid{grid-template-columns:1fr;gap:var(--fib-21)}
  .service-links{grid-template-columns:1fr}
  .service-links a{padding:var(--fib-13) var(--fib-21)}
  .gallery{grid-template-columns:1fr;gap:var(--fib-21)}
  .idea-band{padding:var(--fib-34) var(--fib-21);border-radius:var(--r-md);box-shadow:var(--shadow-panel-blue-sm)}
  .process-grid{grid-template-columns:1fr}
  .process-grid li,.process-grid li:nth-child(-n+2){aspect-ratio:auto;border-right:0;border-bottom:var(--stroke) solid var(--ink)}
  .process-grid li:last-child{border-bottom:0}
  .faq-list summary{gap:var(--fib-13);font-size:17px}
  .faq-list details p{padding-right:0}
  .order{padding-block:var(--fib-55)}
  .lead-form{padding:var(--fib-21);border-radius:var(--r-md);box-shadow:var(--shadow-panel-blue-sm)}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fib-13)}
  .form-footer .button{width:100%}
  .site-footer{grid-template-columns:1fr;gap:var(--fib-34);padding-block:var(--fib-55) var(--fib-34)}
  .footer-brand{grid-column:auto}
  .mobile-call{
    position:fixed;left:var(--fib-8);right:var(--fib-8);bottom:calc(var(--fib-8) + env(safe-area-inset-bottom,0px));z-index:var(--z-call);
    display:flex;align-items:center;justify-content:space-between;gap:var(--fib-13);height:55px;padding:0 var(--fib-8) 0 var(--fib-21);
    border:var(--stroke) solid var(--ink);border-radius:var(--r-pill);background:var(--orange);color:var(--on-orange);
    box-shadow:var(--shadow-press);font-size:16px;font-weight:700;letter-spacing:-.01em;
    transition:transform var(--t3) var(--ease),opacity var(--t2) linear,visibility 0s linear}
  .mobile-call b{font-weight:700}
  .mobile-call span{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-round);background:var(--ink);color:var(--on-ink)}
  .mobile-call svg{width:17px;height:17px}
  /* Уезжает вниз целиком и только потом скрывается. */
  .mobile-call.is-away{transform:translateY(calc(100% + var(--fib-21)));opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--t3) var(--ease),opacity var(--t2) linear,visibility 0s linear var(--t3)}
  .service-hero{padding-top:var(--fib-21)}
  .service-content{grid-template-columns:1fr;gap:var(--fib-34)}
  .service-image{border-radius:var(--r-md);box-shadow:var(--shadow-panel-orange-sm)}
  .service-page .hero-actions .button{width:100%}
  .legal-header{height:auto;min-height:var(--header-h);padding:var(--fib-8) var(--gutter)}
  .legal-header img{width:96px}
  .legal-page p{font-size:16px}
  .not-found main img{width:120px}
}
/* На главной site.js прячет кнопку звонка над первым экраном и формой. Со скриптами она скрыта
   до первой проверки — без вспышки на загрузке; на страницах услуг видна сразу. */
@media (max-width:600px) and (scripting:enabled){
  body:has(.hero):has(#order) .mobile-call:not([aria-hidden="false"]){transform:translateY(calc(100% + var(--fib-21)));opacity:0;visibility:hidden;pointer-events:none}
}
@media (max-width:380px){
  .hero-actions .button{padding-inline:var(--fib-13);font-size:15px}
  .mobile-call{padding-left:var(--fib-13);font-size:15px}
}