/* Шаблон «Новоселье» от Webman. Направление «Страница как предмет»: папка документов переезда.
   Всё, что зависит от бренда (цвета, шрифты, имя), лежит в :root и в index.html: при превращении в шаблон меняется там. */

@font-face { font-family: "Oswald"; font-weight: 200 700; font-display: swap; src: url(fonts/oswald-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 200 700; font-display: swap; src: url(fonts/oswald-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(fonts/onest-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(fonts/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* палитра: фирменный синий, тёмный фон, крафт-картон, бумага */
  --navy: #061a44;
  --blue: #034fc0;
  --sky: #d5e3fa;
  --paper: #f5f7fb;
  --kraft: #cdaa7d;
  --ink: #0a1633;

  /* пять размеров шрифта */
  --t-small: 15px;
  --t-body: 18px;
  --t-lead: clamp(21px, 1vw + 12px, 26px);
  --t-head: clamp(44px, 5.6vw, 92px);
  --t-display: clamp(76px, 10.6vw, 172px);

  --m: clamp(16px, 2.2vw, 32px);       /* поле страницы */
  --gap: clamp(96px, 11vw, 176px);     /* расстояние между разделами */
  --cut: 14px;                         /* срез углов кнопок и вкладок */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (min-width: 1024px) { :root { --t-body: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { font: 400 var(--t-body)/1.55 var(--text); color: var(--ink); background: var(--paper); overflow-x: clip; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.skip { position: fixed; left: 8px; top: -64px; z-index: 50; padding: 12px 16px; background: var(--paper); color: var(--ink); }
.skip:focus { top: 8px; }

/* ---------- заголовки ---------- */
h1, h2, h3, .sheet__name, .label__room, .brand__name { text-wrap: balance; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.98; }
.head { font-size: var(--t-head); line-height: 0.94; }
.lead { font-size: var(--t-lead); line-height: 1.4; }

/* ---------- кнопки: одна форма, срезаны верхние углы, как у вкладки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font: 600 var(--t-body)/1.1 var(--text); text-align: center; text-decoration: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
  transition: transform 0.3s var(--ease), background-color 0.25s, color 0.25s;
}
.btn svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.btn:hover { transform: translateY(-3px); background: #0a63e6; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: -8px; background: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--light:focus-visible { outline-color: var(--blue); background: #fff; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #17295a; }
.btn--wide { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color 0.2s; }
.link svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.link:hover { color: var(--blue); }
.arrow { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; transition: transform 0.3s var(--ease); }
a:hover > .arrow, .link:hover .arrow { transform: translateX(5px); }

/* ---------- верхняя строка ---------- */
.top { position: absolute; z-index: 6; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 var(--m); color: #fff; }
.top__city { font-size: var(--t-small); }
.top__tel { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--t-small); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-height: 44px; }
.brand img { width: 44px; height: auto; }
.brand__name { font-size: var(--t-lead); line-height: 1; text-transform: none; font-weight: 600; letter-spacing: 0; }
.brand__name b { font-weight: 600; color: var(--sky); }

/* ---------- первый экран: стопка папок ---------- */
.hero { position: relative; background: var(--navy); color: #fff; padding-top: clamp(92px, 12vh, 118px); overflow: clip; }
.hero__title { font-size: var(--t-display); line-height: 0.92; text-align: center; padding: 0 var(--m); white-space: nowrap; }
.hero__title .w { display: inline-block; }
.hero__lead { max-width: 46ch; margin: clamp(30px, 4.4vh, 48px) auto 0; text-wrap: balance; padding: 0 var(--m); text-align: center; font-size: var(--t-lead); line-height: 1.4; color: var(--paper); }

.stack { --strip: 46px; --tabh: 34px; position: relative; margin-top: clamp(44px, 6.5vh, 76px); padding-top: calc(var(--strip) * 5); }
.folder {
  position: absolute; left: 7%; right: 7%; top: calc(var(--i) * var(--strip)); height: calc(var(--strip) + 260px);
  z-index: calc(var(--i) + 1); display: block; background: var(--c); text-decoration: none;
  transition: transform 0.35s var(--ease);
}
.folder:hover { transform: translateY(-5px); }
.tab {
  position: absolute; left: min(var(--tx), calc(100% - 9em)); bottom: 100%; display: inline-flex; align-items: center; height: var(--tabh); padding: 0 24px;
  background: var(--c); color: var(--tc, var(--ink)); font: 600 var(--t-small)/1 var(--text); white-space: nowrap;
  clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%);
}
.front { position: relative; z-index: 10; margin: 0 7%; background: var(--paper); color: var(--ink); }
.front .tab { --c: var(--paper); left: auto; right: clamp(16px, 3vw, 40px); }
.front__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--m); align-items: start; padding: clamp(20px, 2.4vw, 36px); }
.front__lead { font-size: var(--t-lead); line-height: 1.35; max-width: 30ch; }
.front__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.facts { margin-top: 28px; display: grid; gap: 6px; }
.facts li { padding-left: 22px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.front__pic { overflow: hidden; background: var(--navy); }
.front__pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%; }

/* ---------- введение к услугам ---------- */
.intro { background: var(--paper); padding: var(--gap) var(--m) clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 32px; align-items: end; }
.intro .head { grid-column: 1 / 8; }
.intro__p { grid-column: 9 / 13; max-width: 36ch; }
.intro__more { grid-column: 1 / 13; margin-top: 8px; }

/* ---------- услуги: листы, которые наезжают друг на друга ---------- */
.sheets { background: var(--paper); }
.sheet {
  --band: 64px;
  position: sticky; top: calc(var(--i) * var(--band)); min-height: calc(min(86svh, 800px) - var(--i) * var(--band));
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: var(--band) 1fr; column-gap: var(--m);
  padding: 0 0 0 var(--m); background: var(--bg); color: var(--fg);
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px);
  scroll-margin-top: calc(var(--i) * var(--band));
}
.sheet__name { grid-column: 1 / 8; grid-row: 1; display: flex; align-items: center; font-size: var(--t-lead); }
.sheet__body { grid-column: 1 / 7; grid-row: 2; align-self: start; display: grid; gap: 28px; align-content: start; padding: clamp(24px, 3vw, 44px) clamp(16px, 3vw, 48px) 32px 0; }
.sheet__body p { max-width: 36ch; font-weight: 500; }
.sheet__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; max-width: 520px; }
.sheet__list li { position: relative; padding-left: 20px; }
.sheet__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sheet__body .link { justify-self: start; }
.sheet__pic { grid-column: 7 / 13; grid-row: 2; overflow: hidden; background: var(--navy); }
.sheet__pic img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; will-change: transform; }

/* ---------- как проходит переезд: квитанция с зубчатым краем ---------- */
.how { background: var(--blue); color: #fff; padding: var(--gap) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 40px; align-items: start; }
.how__head { grid-column: 1 / 7; grid-row: 1; }
.how__head p { margin-top: 28px; max-width: 30ch; }
.how__frame { grid-column: 1 / 6; grid-row: 2; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); align-self: start; }
.how__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.24s ease-out; }
.how__frame img.on { opacity: 1; }
.slip {
  grid-column: 7 / 13; grid-row: 1 / 3; background: var(--paper); color: var(--ink); padding: 40px 36px 64px;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),97.727% 100%,95.455% calc(100% - 10px),93.182% 100%,90.909% calc(100% - 10px),88.636% 100%,86.364% calc(100% - 10px),84.091% 100%,81.818% calc(100% - 10px),79.545% 100%,77.273% calc(100% - 10px),75.000% 100%,72.727% calc(100% - 10px),70.455% 100%,68.182% calc(100% - 10px),65.909% 100%,63.636% calc(100% - 10px),61.364% 100%,59.091% calc(100% - 10px),56.818% 100%,54.545% calc(100% - 10px),52.273% 100%,50.000% calc(100% - 10px),47.727% 100%,45.455% calc(100% - 10px),43.182% 100%,40.909% calc(100% - 10px),38.636% 100%,36.364% calc(100% - 10px),34.091% 100%,31.818% calc(100% - 10px),29.545% 100%,27.273% calc(100% - 10px),25.000% 100%,22.727% calc(100% - 10px),20.455% 100%,18.182% calc(100% - 10px),15.909% 100%,13.636% calc(100% - 10px),11.364% 100%,9.091% calc(100% - 10px),6.818% 100%,4.545% calc(100% - 10px),2.273% 100%,0 calc(100% - 10px));
}
.slip__title { font: 700 var(--t-body)/1.2 var(--text); }
.slip h3 { margin-top: 28px; font: 700 var(--t-body)/1.3 var(--text); text-transform: none; letter-spacing: 0; }
.slip ol { margin-top: 6px; }
.row { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 8px 0; cursor: default; transition: opacity 0.24s; outline-offset: 2px; }
.row__what { flex: none; max-width: 60%; }
.row__dots { flex: 1; min-width: 16px; height: 4px; align-self: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4'%3E%3Ccircle cx='2' cy='2' r='2' fill='%230a1633'/%3E%3C/svg%3E") repeat-x left center; }
.row__who { flex: none; font-variant-numeric: tabular-nums; text-align: right; }
.row__img { display: none; }
.how[data-hover] .row:not(.is-hot) { opacity: 0.5; }
.row--final .row__what { max-width: none; white-space: nowrap; }
.row--final { margin: 28px -36px 0; padding: 0 36px; min-height: 48px; background: var(--ink); color: var(--paper); align-items: center; font-weight: 600; }
.row--final .row__dots { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='4'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23f5f7fb'/%3E%3C/svg%3E"); }

/* ---------- опись: то, что собирает посетитель ---------- */
.opis { background: var(--kraft); color: var(--ink); padding: var(--gap) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 48px; align-items: start; }
.opis__head { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: end; row-gap: 24px; }
.opis__head .head { grid-column: 1 / 8; }
.opis__head .lead { grid-column: 8 / 13; max-width: 34ch; }
.list { grid-column: 1 / 7; background: var(--paper); padding: clamp(24px, 3vw, 40px); display: grid; gap: 32px; clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px); }
.list fieldset { border: 0; padding: 0; min-width: 0; }
.list legend { padding: 0; margin-bottom: 12px; font-weight: 700; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.opt span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--sky); color: var(--ink); font-weight: 500; transition: background-color 0.2s, color 0.2s, transform 0.25s var(--ease); }
.opt:hover span { transform: translateY(-2px); }
.opt input:checked + span { background: var(--blue); color: #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.step { display: inline-flex; align-items: stretch; }
.step button { width: 56px; min-height: 52px; border: 0; background: var(--sky); font: 600 var(--t-lead)/1 var(--text); cursor: pointer; transition: background-color 0.2s, transform 0.2s var(--ease); }
.step button:hover { background: var(--blue); color: #fff; }
.step button:active { transform: scale(0.94); }
.step output { min-width: 72px; display: grid; place-items: center; background: var(--paper); font: 700 var(--t-lead)/1 var(--display); }
.hint { margin-top: 8px; font-size: var(--t-small); color: #33436b; }

.board { grid-column: 7 / 13; display: grid; gap: 40px; }
.labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; min-height: 120px; align-content: start; }
.label { position: relative; background: var(--paper); padding: 20px 20px 18px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transform-origin: 20% 80%; animation: stick 0.5s var(--ease) both; }
.label__room { display: block; color: var(--blue); font-size: var(--t-lead); }
.label__n { display: block; margin-top: 10px; font-weight: 500; }
.label__tag { display: inline-block; margin-top: 10px; padding: 2px 10px; background: var(--ink); color: var(--paper); font-size: var(--t-small); font-weight: 600; }
.label--rot-a { rotate: -1.2deg; } .label--rot-b { rotate: 1deg; }
@keyframes stick { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.labels__empty { grid-column: 1 / -1; padding: 28px; background: var(--paper); font-weight: 500; }
.sum { background: var(--navy); color: var(--paper); padding: clamp(24px, 3vw, 36px); display: grid; gap: 20px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.sum dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; }
.sum dt { font-size: var(--t-small); color: var(--sky); }
.sum dd { margin-top: 2px; font: 700 var(--t-lead)/1.1 var(--display); text-transform: none; font-variant-numeric: tabular-nums; }
.sum__price { font: 700 var(--t-head)/0.95 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sum__meta { margin-top: -12px; font-size: var(--t-small); color: var(--sky); }
.sum__meta:empty { display: none; }
.sum__note { font-size: var(--t-small); color: var(--sky); max-width: 44ch; }

/* ---------- отзывы ---------- */
.proof { background: var(--navy); color: var(--paper); padding-top: var(--gap); }
.proof__head { padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: end; row-gap: 20px; }
.proof__head .head { grid-column: 1 / 9; }
.proof__head p { grid-column: 9 / 13; max-width: 30ch; }
.band { margin-top: clamp(48px, 6vw, 88px); background: var(--kraft); color: var(--ink); height: 34svh; min-height: 220px; overflow: hidden; display: flex; align-items: center; }
.band__track { display: flex; flex: none; white-space: nowrap; animation: slide 70s linear infinite; will-change: transform; }
.band__track span { display: inline-flex; align-items: center; font: 600 8vw/1.1 var(--display); text-transform: none; letter-spacing: -0.01em; }
.band__track span::after { content: ""; flex: none; width: 0.3em; height: 0.3em; margin: 0 0.5em; border-radius: 50%; background: var(--blue); }
@keyframes slide { to { transform: translateX(-50%); } }
.shots { padding: clamp(48px, 6vw, 96px) var(--m) var(--gap); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 28px; align-items: start; }
.shot { background: var(--sky); transition: transform 0.4s var(--ease); }
.shot img { width: 100%; height: auto; }
.shot:hover { transform: translateY(-6px) rotate(-0.6deg); }
.shot--1 { grid-column: 1 / 7; }
.shot--2 { grid-column: 7 / 10; margin-top: 56px; }
.shot--3 { grid-column: 10 / 13; margin-top: 0; }
.shot--4 { grid-column: 1 / 6; margin-top: 24px; }
.shot--5 { grid-column: 6 / 13; margin-top: 88px; }

/* ---------- вопросы ---------- */
.faq { background: var(--sky); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); padding: 0 var(--m) 80px; }
.faq__text { grid-column: 1 / 6; padding: var(--gap) 0 0; }
.faq__facts { margin-top: 28px; display: grid; gap: 4px; }
.faq details { margin-top: 28px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font: 600 var(--t-body)/1.3 var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2.4; transition: transform 0.3s var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin-top: 10px; max-width: 46ch; color: #1c2b52; animation: fadein 0.35s ease-out both; }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__act { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.faq__media { grid-column: 7 / 13; position: relative; }
.faq__tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 62% 50%; }
.faq__sq { position: absolute; left: -40px; bottom: -40px; width: 34%; aspect-ratio: 1; object-fit: cover; object-position: 80% 70%; }

/* ---------- заявка: ответная карточка ---------- */
.cta { position: relative; background: var(--blue); color: #fff; min-height: 80svh; overflow: clip; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); padding: 0 var(--m); }
.cta__p { grid-column: 1 / 5; align-self: end; padding-bottom: 64px; font-size: var(--t-lead); line-height: 1.35; }
.cta__card { grid-column: 6 / 13; align-self: end; margin: 120px 0 -60px; padding: clamp(28px, 3.4vw, 48px); background: var(--paper); color: var(--ink); aspect-ratio: 7 / 5; display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; rotate: 2deg; transition: rotate 0.8s var(--ease); }
.cta__card h2 { font-size: var(--t-head); line-height: 0.95; }
.cta__card p { max-width: 36ch; }
.cta__card .btn { margin-top: 8px; }
.cta__tel { font-weight: 600; }

/* ---------- контакты: карточка на фотографии ---------- */
.contact { position: relative; min-height: 100svh; background: var(--navy); overflow: clip; }
.contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.visit { position: absolute; top: 60px; left: var(--m); width: min(380px, calc(100% - 2 * var(--m))); background: var(--paper); color: var(--ink); padding: 32px 32px 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.visit h2 { font-size: var(--t-lead); }
.visit address { font-style: normal; margin-top: 16px; }
.visit__hours { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.visit__hours dd { text-align: right; font-weight: 600; }
.visit__links { margin-top: 12px; display: grid; }
.visit .btn { margin: 24px -32px 0; width: calc(100% + 64px); min-height: 56px; clip-path: none; }
.credit { position: absolute; right: var(--m); bottom: 12px; font-size: var(--t-small); color: #fff; background: rgba(6, 26, 68, 0.78); padding: 4px 10px; }
.credit a { color: #fff; }

/* ---------- подвал: оборот карточки ---------- */
.foot { background: var(--navy); color: var(--ink); padding: 100px var(--m) 0; overflow: clip; }
.foot__card { position: relative; max-width: 1200px; margin: 0 auto; background: var(--paper); min-height: 420px; padding: 56px clamp(24px, 5vw, 72px) 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--m); align-content: start; }
.foot__card .scallop { position: absolute; left: 0; bottom: 100%; width: 100%; height: 44px; fill: var(--paper); }
.foot__card .scallop--s { display: none; }
.foot__sign { font-size: var(--t-lead); max-width: 16ch; }
.foot__msg { margin-top: 16px; max-width: 34ch; }
.foot__addr { display: grid; gap: 4px; justify-items: start; align-content: start; padding-right: 100px; }
.foot__addr a, .foot__addr span { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-body); }
.foot__addr a { text-underline-offset: 5px; }
.foot__stamp { position: absolute; top: 28px; right: clamp(24px, 5vw, 72px); width: 88px; padding: 6px; background: var(--kraft); }
.foot__stamp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.foot__imp { grid-column: 1 / -1; align-self: end; margin-top: 24px; text-align: center; font-size: var(--t-small); color: #33436b; }
.foot__word { font: 700 13.4vw/0.86 var(--display); text-transform: uppercase; color: var(--blue); white-space: nowrap; text-align: center; margin: 56px 0 -0.04em; user-select: none; }

/* ---------- движение ---------- */
.js [data-r] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-r].in { opacity: 1; transform: none; }
.js .hero__title .w, .js .hero__lead { opacity: 0; transform: translateY(0.3em); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); }
.js .hero__title .w:nth-child(2) { transition-delay: 90ms; } .js .hero__title .w:nth-child(3) { transition-delay: 180ms; }
.js .hero__lead { transition-delay: 300ms; transform: translateY(14px); }
.js .folder { translate: 0 70px; opacity: 0; transition: transform 0.35s var(--ease), translate 0.9s var(--ease), opacity 0.6s; transition-delay: 0s, calc(0.35s + var(--i) * 90ms), calc(0.35s + var(--i) * 90ms); }
.js .front { translate: 0 90px; opacity: 0; transition: translate 1s var(--ease) 0.85s, opacity 0.7s 0.85s; }
.js.ready .hero__title .w, .js.ready .hero__lead { opacity: 1; transform: none; }
.js.ready .folder, .js.ready .front { translate: 0 0; opacity: 1; }
.js .cta__card { rotate: 7deg; }
.js .cta.in .cta__card { rotate: 2deg; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-r], .js .hero__title .w, .js .hero__lead, .js .folder, .js .front { opacity: 1; transform: none; translate: none; transition: none; }
  .js .cta__card { rotate: 2deg; transition: none; }
  .band__track { animation: none; }
  .label { animation: none; }
  .btn, .folder, .opt span, .shot { transition: none; }
}

/* ---------- планшет и телефон ---------- */
@media (max-width: 1023.98px) {
  .front__in { grid-template-columns: 1fr; }
  .front__pic { order: -1; }
  .intro .head, .intro__p { grid-column: 1 / 13; }
  .how__head, .how__frame, .slip { grid-column: 1 / 13; grid-row: auto; }
  .how__frame { display: none; }
  .row__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 10px; }
  .row { flex-wrap: wrap; }
  .row__img-wrap { flex: 0 0 100%; }
  .opis__head .head, .opis__head .lead { grid-column: 1 / 13; }
  .list, .board { grid-column: 1 / 13; }
  .proof__head .head, .proof__head p { grid-column: 1 / 13; }
  .shot--1 { grid-column: 1 / 8; } .shot--2 { grid-column: 8 / 13; margin-top: 40px; } .shot--3 { grid-column: 1 / 8; }
  .shot--4 { grid-column: 8 / 13; margin-top: 24px; } .shot--5 { grid-column: 2 / 13; }
  .faq__text, .faq__media { grid-column: 1 / 13; }
  .faq__media { order: -1; margin: 0 calc(var(--m) * -1); padding-bottom: 40px; }
  .faq__tall { aspect-ratio: 4 / 5; }
  .faq__sq { left: auto; right: var(--m); bottom: 0; width: 38%; }
  .faq__text { padding-top: 56px; }
  .cta__p { grid-column: 1 / 13; align-self: start; padding: 72px 0 0; }
  .cta__card { grid-column: 1 / 13; justify-self: center; width: min(92%, 560px); aspect-ratio: auto; margin: 40px 0 -60px; rotate: 1deg; }
  .js .cta__card { rotate: 4deg; } .js .cta.in .cta__card { rotate: 1deg; }
  .foot__card { grid-template-columns: 1fr; }
  .foot__addr { padding-right: 0; }
}
@media (max-width: 767.98px) {
  .hero__title { line-height: 1.04; }
  .front__in { display: flex; flex-direction: column; gap: 20px; padding-bottom: 28px; }
  .front__text { display: contents; }
  .front__act { order: 1; margin-top: 0; }
  .front__pic { order: 2; }
  .front__lead { order: 3; max-width: none; }
  .facts { order: 4; margin-top: 0; }
  .row { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; }
  .row__what { max-width: none; }
  .row__dots { display: none; }
  .row__img { grid-column: 1 / -1; }
  .row--final { display: flex; justify-content: space-between; gap: 16px; }
  .row--final .row__what { white-space: normal; }
  .cta__card { margin: 40px 0 -24px; padding-bottom: 64px; }
  .foot__card .scallop--l { display: none; }
  .foot__card .scallop--s { display: block; }
  :root { --t-body: 17px; --t-head: clamp(40px, 12vw, 56px); --t-display: 18vw; --gap: 88px; }
  .hero__title { white-space: normal; }
  .hero__title .w { display: inline-block; }
  .stack { --strip: 40px; --tabh: 30px; }
  .folder { left: 3%; right: 3%; }
  .front { margin: 0 3%; }
  .tab { padding: 0 14px; }
  .tab--hide-s { display: none; }
  .top { grid-template-columns: auto 1fr; }
  .top__city { display: none; }
    .sheet { --band: 52px; grid-template-rows: var(--band) auto auto; min-height: 70svh; padding: 0 0 0 var(--m); }
  .sheet__name { grid-column: 1 / 13; }
  .sheet__pic { grid-column: 1 / 13; grid-row: 2; aspect-ratio: 4 / 3; margin-right: 0; }
  .sheet__body { grid-column: 1 / 13; grid-row: 3; padding: 24px var(--m) 28px 0; gap: 20px; }
  .sheet__list { grid-template-columns: 1fr; }
  .sum dl { grid-template-columns: 1fr 1fr; }
  .labels { grid-template-columns: 1fr 1fr; }
  .band__track span { font-size: 15vw; }
  .shot--1, .shot--2, .shot--3, .shot--4, .shot--5 { grid-column: 1 / 13; margin-top: 0; }
  .shot--2, .shot--4 { grid-column: 3 / 13; }
  .contact { min-height: 0; }
  .contact__bg { position: relative; height: 70svh; }
  .visit { position: relative; top: auto; left: auto; width: auto; margin: -80px var(--m) 0; }
  .credit { position: static; display: block; margin: 12px var(--m) 0; }
  .contact { padding-bottom: 24px; background: var(--navy); }
  .foot { padding-top: 72px; }
  .foot__card { padding-top: 48px; }
  .foot__stamp { width: 64px; top: 20px; }
  .foot__word { font-size: 14vw; }
}

/* картинки-плакаты квадратные: не должны растягивать лист, иначе нижние края листов расходятся */
.sheet__pic { position: relative; min-height: 0; }
.sheet__pic img { position: absolute; inset: 0; }
/* примерные отзывы вместо скриншотов (шаблон) */
.shot--chat { background: var(--paper); color: var(--ink); padding: 26px 28px 22px; border-radius: 22px 22px 22px 6px; }
.shot--chat p { font-size: var(--t-body); line-height: 1.45; }
.shot--chat small { display: block; margin-top: 14px; font-size: var(--t-small); color: #33436b; }
.shot--chat:hover { transform: translateY(-6px); }