:root {
  --cw-max: min(1360px, 94vw);
  --k: min(calc(var(--cw-max) / 1320), 0.132vh);
  --cw: calc(1320 * var(--k));

  --bg: #fff;
  --surface: #e8edf4;
  --ink: #101010;
  --muted: #5f6b7a;
  --dim: #7b8695;
  --blue: #3c7bf6;
  --blue-dark: #2a66dd;
  --white: #fff;
  --radius: calc(28 * var(--k));

  --chrome-h: calc(126 * var(--k));
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
h1, p { margin: 0; }

.page {
  height: calc(100dvh - var(--chrome-h));
  width: var(--cw);
  margin: 0 auto;
  padding-bottom: calc(32 * var(--k));
  display: flex;
  flex-direction: column;
}

.topbar {
  width: var(--cw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: calc(34 * var(--k));
  height: calc(44 * var(--k));
}

.hc--hours { margin-right: auto; }

.hc {
  font-size: calc(14 * var(--k));
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  transition: color .18s ease;
}

a.hc:hover { color: var(--blue); }

.sep {
  display: inline-block;
  width: 1px;
  height: calc(11 * var(--k));
  margin-inline: calc(5 * var(--k));
  background: rgba(16, 20, 28, .22);
  vertical-align: calc(-1 * var(--k));
}

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  transition: box-shadow .25s ease;
}

.header__in {
  position: relative;
  z-index: 62;
  width: var(--cw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--k));
  height: calc(82 * var(--k));
}

.header.is-stuck {
  box-shadow:
    0 1px 0 rgba(16, 20, 28, .07),
    0 calc(10 * var(--k)) calc(26 * var(--k)) rgba(16, 20, 28, .05);
}

.sentinel { display: block; height: 1px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--k));
  flex-shrink: 0;
}

.brand__logo {
  height: calc(38 * var(--k));
  width: auto;
  display: block;
}

.brand__name {
  font-size: calc(25 * var(--k));
  font-weight: 800;
  letter-spacing: .005em;
  white-space: nowrap;
}

.nav {
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--k));
  background: var(--surface);
  border-radius: 999px;
  padding: calc(6 * var(--k));
}

.nav__link {
  padding: calc(13 * var(--k)) calc(20 * var(--k));
  border-radius: 999px;
  font-size: calc(15 * var(--k));
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}

.nav__link:hover { color: var(--blue); }

.nav__link.is-active {
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  padding-inline: calc(26 * var(--k));
}

.nav__link.is-active:hover { background: var(--blue-dark); color: var(--white); }

.tools {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--k));
}

.iconbtn {
  width: calc(50 * var(--k));
  height: calc(50 * var(--k));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  transition: background-color .18s ease, transform .18s ease;
}

.iconbtn:hover { background: var(--blue-dark); }
.iconbtn:active { transform: translateY(1px); }

.iconbtn svg {
  width: calc(21 * var(--k));
  height: calc(21 * var(--k));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  transition: background-color .18s ease, transform .18s ease;
}

.btn:hover { background: var(--blue-dark); }
.btn:active { transform: translateY(1px); }

.btn--cart {
  height: calc(50 * var(--k));
  padding-inline: calc(26 * var(--k));
  gap: calc(10 * var(--k));
  font-size: calc(15 * var(--k));
  white-space: nowrap;
}

.btn__icon {
  width: calc(20 * var(--k));
  height: calc(20 * var(--k));
  flex-shrink: 0;
}

.btn--cart { position: relative; }

.cart-count {
  min-width: calc(21 * var(--k));
  height: calc(21 * var(--k));
  margin-left: calc(-2 * var(--k));
  padding-inline: calc(6 * var(--k));
  display: none;
  place-items: center;
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-dark);
  font-size: calc(12 * var(--k));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cart-count.is-on { display: grid; }

.iconbtn--find {
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.iconbtn--find[aria-expanded="true"] { background: var(--ink); }

.find__veil {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(16, 20, 28, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.find__veil.is-on { opacity: 1; pointer-events: auto; }

.find {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 61;
  padding-bottom: calc(16 * var(--s));
  opacity: 0;
  transform: translateY(calc(-10 * var(--s)));
  pointer-events: none;
  transition: opacity .26s ease, transform .44s var(--ease);
}

.find.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.find__in {
  width: var(--cw);
  margin-inline: auto;
  padding: calc(16 * var(--s)) calc(20 * var(--s)) calc(14 * var(--s));
  border-radius: var(--r);
  background: var(--white);
  box-shadow:
    0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(24, 34, 54, .06),
    0 calc(22 * var(--s)) calc(54 * var(--s)) rgba(24, 34, 54, .14);
}

.find__form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(12 * var(--s));
}

.find__glyph {
  width: calc(22 * var(--s));
  height: calc(22 * var(--s));
  color: var(--muted);
}

.find__input {
  height: calc(54 * var(--s));
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: calc(18 * var(--s));
  font-weight: 600;
  letter-spacing: -.01em;
}

.find__input::placeholder { color: var(--dim); font-weight: 500; }
.find__input:focus { outline: none; }
.find__input::-webkit-search-cancel-button { display: none; }

.find__clear {
  width: calc(34 * var(--s));
  height: calc(34 * var(--s));
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--band);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.find__clear svg { width: calc(15 * var(--s)); height: calc(15 * var(--s)); }
.find__clear:hover { background: #e2e8f2; color: var(--ink); }

.find__go {
  height: calc(48 * var(--s));
  padding-inline: calc(26 * var(--s));
  border: 0;
  font-family: inherit;
  font-size: calc(15 * var(--s));
  cursor: pointer;
}

.find__list {
  margin-top: calc(10 * var(--s));
  padding-top: calc(8 * var(--s));
  border-top: 1px solid var(--line);
}

.find__hint {
  margin: 0;
  padding: calc(14 * var(--s)) calc(6 * var(--s));
  font-size: calc(14 * var(--s));
  line-height: 1.5;
  color: var(--muted);
}

.find__hint a { color: var(--blue-dark); font-weight: 700; }

.find__more {
  margin: 0;
  padding: calc(10 * var(--s)) calc(6 * var(--s)) calc(2 * var(--s));
  font-size: calc(13 * var(--s));
  color: var(--dim);
}

.hit {
  display: grid;
  grid-template-columns: calc(52 * var(--s)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14 * var(--s));
  padding: calc(9 * var(--s)) calc(10 * var(--s));
  border-radius: calc(16 * var(--s));
  transition: background-color .2s ease;
}

.hit:hover,
.hit.is-on { background: var(--band); }

.hit__media {
  width: calc(52 * var(--s));
  height: calc(52 * var(--s));
  border-radius: calc(14 * var(--s));
  background: var(--band);
  overflow: hidden;
}

.hit__media img {
  width: 100%;
  height: 100%;
  padding: 12%;
  object-fit: contain;
}

.hit__body { min-width: 0; }

.hit__name {
  display: block;
  font-size: calc(15 * var(--s));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.hit__meta {
  display: block;
  margin-top: calc(4 * var(--s));
  font-size: calc(12.5 * var(--s));
  color: var(--dim);
}

.hit__price {
  text-align: right;
  font-size: calc(16 * var(--s));
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hit__eta {
  display: block;
  margin-top: calc(3 * var(--s));
  font-size: calc(13 * var(--s));
  font-weight: 800;
  letter-spacing: -.01em;
  /* тот же фирменный синий, что у срока поставки в каталоге: янтарный
     оставался здесь один на весь сайт и выпадал из палитры */
  color: var(--blue-dark);
}

.burger {
  display: none;
  width: calc(50 * var(--k));
  height: calc(50 * var(--k));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s ease, opacity .2s ease;
}

.burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  width: var(--cw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  padding: 4px 20px 8px;
  background: var(--surface);
  border-radius: calc(20 * var(--k));
}

.drawer[hidden] { display: none; }

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid rgba(16, 20, 28, .07);
  font-size: 16px;
  font-weight: 600;
}

.drawer__link:last-child { border-bottom: 0; }

.bento {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(18 * var(--k));
  padding-top: calc(22 * var(--k));
}

.tile {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
  box-shadow:
    0 calc(1 * var(--k)) calc(2 * var(--k)) rgba(24, 34, 54, .04),
    0 calc(12 * var(--k)) calc(32 * var(--k)) rgba(24, 34, 54, .06);
}

.tile--slider {
  position: relative;
  grid-row: 1 / span 2;
  padding: 0;
  background: #0d1119;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}

.slide.is-on { opacity: 1; visibility: visible; }

.slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
}

.slide.is-on .slide__img {
  transform: scale(1);
  transition: transform 5.4s ease-out;
}

.slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 14, 22, 0) 38%,
    rgba(10, 14, 22, .52) 68%,
    rgba(10, 14, 22, .86) 100%);
}

.slide__copy {
  position: absolute;
  left: calc(38 * var(--k));
  right: calc(152 * var(--k));
  bottom: calc(34 * var(--k));
  color: var(--white);
}

.slide__title {
  margin: 0;
  font-size: calc(30 * var(--k));
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.slide__sub {
  margin-top: calc(10 * var(--k));
  font-size: calc(16 * var(--k));
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.slide__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--k));
  margin-top: calc(18 * var(--k));
  height: calc(46 * var(--k));
  padding-inline: calc(22 * var(--k));
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: calc(15 * var(--k));
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.slide__cta svg { width: calc(15 * var(--k)); height: calc(15 * var(--k)); }
.slide__cta:hover { background: var(--blue); color: var(--white); }

.slider__nav {
  position: absolute;
  right: calc(38 * var(--k));
  bottom: calc(34 * var(--k));
  display: flex;
  gap: calc(10 * var(--k));
  z-index: 2;
}

.sq {
  width: calc(46 * var(--k));
  height: calc(46 * var(--k));
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.sq svg { width: calc(19 * var(--k)); height: calc(19 * var(--k)); }
.sq:hover { background: rgba(255, 255, 255, .34); }
.sq:active { transform: scale(.94); }

.slider__dots {
  position: absolute;
  right: calc(38 * var(--k));
  top: calc(30 * var(--k));
  display: flex;
  gap: calc(8 * var(--k));
  z-index: 2;
}

.dot {
  position: relative;
  width: calc(9 * var(--k));
  height: calc(9 * var(--k));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .35s ease, background-color .35s ease;
}

.dot.is-on {
  width: calc(26 * var(--k));
  background: var(--white);
}

.tile--copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(44 * var(--k));
}

.copy__title {
  font-size: calc(50 * var(--k));
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
}

.copy__line { display: block; white-space: nowrap; }

.accent { color: var(--blue); }

.copy__lead {
  margin-top: calc(26 * var(--k));
  font-size: calc(18 * var(--k));
  line-height: 1.6;
  color: var(--muted);
  white-space: nowrap;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18 * var(--k));
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--k));
  min-height: calc(112 * var(--k));
  padding-inline: calc(20 * var(--k));
  font-size: calc(21 * var(--k));
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease;
}

.cta:active { transform: translateY(1px); }

.cta--primary {
  background: var(--blue);
  color: var(--white);
}

.cta--primary:hover { background: var(--blue-dark); }

.cta--secondary { color: var(--blue); }
.cta--secondary:hover { background: #dbe4f2; }

.cta__glyph {
  width: calc(26 * var(--k));
  height: calc(26 * var(--k));
  flex-shrink: 0;
}

.cta--secondary .cta__glyph {
  width: calc(31 * var(--k));
  height: calc(31 * var(--k));
}

@media (max-width: 1200px) {
  :root { --k: 1px; }

  body {
    height: auto;
    overflow: visible;
    overflow-x: hidden;
  }

  .page {
    height: auto;
    min-height: 0;
    width: auto;
    max-width: 1320px;
    padding-bottom: 40px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .topbar,
  .header__in,
  .find__in {
    width: auto;
    max-width: 1320px;
    margin-inline: auto;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .find__in {
    margin-inline: max(12px, env(safe-area-inset-left));
    padding: 14px;
  }

  .find__form { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .find__go { grid-column: 1 / -1; width: 100%; }
  .hit__price { font-size: 14px; }

  .topbar {
    height: auto;
    padding-block: 12px;
    flex-wrap: wrap;
    gap: 6px 22px;
  }

  .drawer {
    width: auto;
    margin: 0;
    padding: calc(10 * var(--k)) max(20px, env(safe-area-inset-left))
             max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    border-radius: 0;
    background: var(--bg);
  }

  .hc { font-size: clamp(12px, 3.2vw, 14px); }

  .header__in {
    height: auto;
    padding-block: 10px;
    flex-wrap: wrap;
    row-gap: 12px;
    gap: 12px;
  }

  .brand { margin-right: auto; }
  .brand__name { font-size: clamp(18px, 4.6vw, 25px); }

  .nav { display: none; }
  .burger { display: flex; width: 44px; height: 44px; }

  body.is-locked { overflow: hidden; }

  .tools { gap: 8px; margin-left: auto; }
  .iconbtn { width: 44px; height: 44px; }
  .iconbtn svg { width: 20px; height: 20px; }
  .btn--cart { height: 44px; padding-inline: 18px; font-size: 14px; }

  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 14px;
    padding-top: 16px;
  }

  .tile--slider { grid-row: auto; aspect-ratio: 4 / 3; }

  .tile--copy { padding: clamp(20px, 5.4vw, 40px); }
  .copy__title { font-size: clamp(28px, 6.6vw, 46px); line-height: 1.06; }
  .copy__line { white-space: normal; }
  .copy__lead { white-space: normal; font-size: clamp(15px, 4vw, 18px); }
  .copy__lead br { display: none; }

  .slide__copy {
    left: clamp(16px, 5vw, 32px);
    right: clamp(16px, 5vw, 32px);
    bottom: clamp(16px, 4.5vw, 30px);
  }

  .slide__title { font-size: clamp(20px, 5.4vw, 30px); }
  .slide__sub { font-size: clamp(13px, 3.6vw, 16px); }

  .slider__nav { display: none; }

  .slide__cta {
    height: 44px;
    margin-top: 14px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .slider__dots {
    top: clamp(14px, 4vw, 26px);
    right: clamp(16px, 5vw, 32px);
    gap: 10px;
  }

  .dot { width: 10px; height: 10px; }
  .dot::after {
    content: "";
    position: absolute;
    inset: -16px;
  }
  .dot.is-on { width: 26px; }

  .cta {
    min-height: 92px;
    font-size: clamp(16px, 4.4vw, 21px);
  }

  .cta__glyph { width: 24px; height: 24px; }
  .cta--secondary .cta__glyph { width: 28px; height: 28px; }
}

@media (max-width: 640px) {
  .actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cta { min-height: 74px; }
  .tile--slider { aspect-ratio: 3 / 2; }
}

@media (max-width: 1200px) and (max-height: 540px) and (orientation: landscape) {
  .tile--slider { aspect-ratio: 21 / 9; }
  .copy__title { font-size: clamp(24px, 4.6vw, 34px); }
  .cta { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide__img { transition: none; }
  .slide__img { transform: none; }
}

:root {
  --s: calc(var(--cw-max) / 1320);
  --r: calc(26 * var(--s));
  --band: #eef1f6;
  --line: rgba(16, 20, 28, .10);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --slide-dur: .78s;
  --slide-ease: cubic-bezier(.4, 0, .2, 1);
}

.wrap {
  width: var(--cw);
  margin-inline: auto;
}

.sec {
  padding-block: calc(118 * var(--s));
  scroll-margin-top: calc(var(--header-h, 82px) + calc(18 * var(--s)));
}

.sec__title {
  margin: 0;
  font-size: calc(54 * var(--s));
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.035em;
}

.sec__lead {
  margin: 0;
  max-width: calc(560 * var(--s));
  font-size: calc(17 * var(--s));
  line-height: 1.62;
  color: var(--muted);
}

.sec__lead--wide { max-width: calc(700 * var(--s)); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  height: calc(34 * var(--s));
  padding-inline: calc(16 * var(--s));
  border-radius: 999px;
  background: var(--surface);
  font-size: calc(13 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--muted);
}

.flow .tile { border-radius: var(--r); }

.tile__title {
  margin: 0;
  font-size: calc(22 * var(--s));
  font-weight: 700;
  letter-spacing: -.02em;
}

.js .reveal {
  opacity: 0;
  transform: translateY(calc(16 * var(--s)));
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s var(--ease) calc(var(--i, 0) * 90ms),
    transform .7s var(--ease) calc(var(--i, 0) * 90ms);
}

.sec--cats { padding-bottom: calc(8 * var(--s)); }
.sec--stock { padding-top: calc(59 * var(--s)); }

.cats__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto;
  align-items: start;
  column-gap: calc(46 * var(--s));
  padding-bottom: calc(40 * var(--s));
}

.cats__head .sec__lead { padding-top: calc(8 * var(--s)); }

.cats__nav {
  display: flex;
  gap: calc(12 * var(--s));
}

.round {
  width: calc(62 * var(--s));
  height: calc(62 * var(--s));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--band);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.round svg { width: calc(22 * var(--s)); height: calc(22 * var(--s)); }
.round:hover { background: var(--blue); color: var(--white); }
.round:active { transform: scale(.94); }

.round[disabled] {
  opacity: .22;
  cursor: default;
}

.cats__viewport {
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
}

.cats__track {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--s));
  padding-block: calc(26 * var(--s)) calc(78 * var(--s));
  transition: transform var(--slide-dur) var(--slide-ease);
  will-change: transform;
}

.cats__track.is-instant,
.cats__track.is-instant .cat,
.cats__track.is-instant .cat__img,
.cats__track.is-instant .cat__more { transition: none; }

.cat {
  position: relative;
  flex: 0 0 auto;
  width: calc(320 * var(--s));
  height: calc(372 * var(--s));
  padding: calc(46 * var(--s)) calc(30 * var(--s)) 0;
  border-radius: calc(88 * var(--s));
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition:
    height var(--slide-dur) var(--slide-ease),
    background-color .3s ease,
    box-shadow .5s ease;
}

.cat:hover { background: #e6eaf2; }

.cat.is-on {
  height: calc(544 * var(--s));
  box-shadow:
    0 calc(5 * var(--s)) calc(14 * var(--s)) rgba(24, 34, 54, .04),
    0 calc(20 * var(--s)) calc(52 * var(--s)) rgba(24, 34, 54, .09);
}

.cat__pill {
  display: inline-flex;
  align-items: center;
  height: calc(28 * var(--s));
  padding-inline: calc(15 * var(--s));
  border-radius: 999px;
  background: var(--white);
  font-size: calc(11.5 * var(--s));
  font-weight: 700;
  color: var(--muted);
  transition: color .3s ease;
}

.cat.is-on .cat__pill { color: var(--blue-dark); }

.cat__name {
  margin-top: calc(14 * var(--s));
  font-size: calc(19 * var(--s));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.cat__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--slide-dur) var(--slide-ease), opacity .3s ease;
}

.cat__more-in { display: block; overflow: hidden; }

.cat.is-on .cat__more {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0s, .16s;
}

.cat__desc {
  display: block;
  margin-top: calc(9 * var(--s));
  font-size: calc(12.5 * var(--s));
  line-height: 1.45;
  color: var(--muted);
}

.cat__count {
  display: block;
  margin-top: calc(10 * var(--s));
  font-size: calc(13 * var(--s));
  font-weight: 700;
  color: var(--blue-dark);
}

.cat__img {
  position: absolute;
  left: 50%;
  bottom: calc(36 * var(--s));
  height: calc(236 * var(--s));
  width: auto;
  max-width: 86%;
  object-fit: contain;
  object-position: bottom;
  transform: translateX(-50%) scale(.67);
  transform-origin: bottom center;
  transition: transform var(--slide-dur) var(--slide-ease);
}

.cat.is-on .cat__img { transform: translateX(-50%) scale(1); }

.sec--stock .sec__title { margin-bottom: calc(20 * var(--s)); }

.stock__grid {
  margin-top: calc(48 * var(--s));
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: calc(24 * var(--s));
  align-items: start;
}

.stage {
  position: relative;
  min-height: calc(524 * var(--s));
  padding: calc(38 * var(--s));
  overflow: hidden;
}

.pane {
  position: absolute;
  inset: calc(38 * var(--s));
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(calc(14 * var(--s)));
  pointer-events: none;
  transition: opacity .4s ease, transform .6s var(--ease);
}

.pane.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pane__label {
  font-size: calc(13 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--muted);
}

.pane__note {
  margin: auto 0 0;
  padding-top: calc(18 * var(--s));
  font-size: calc(13.5 * var(--s));
  line-height: 1.55;
  color: var(--muted);
}

.stat__figure {
  margin-top: calc(16 * var(--s));
  font-size: calc(21 * var(--s));
  font-weight: 600;
  letter-spacing: -.02em;
}

.stat__figure b {
  display: block;
  font-size: calc(92 * var(--s));
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--blue);
}

.bar {
  margin-top: calc(26 * var(--s));
  height: calc(14 * var(--s));
  border-radius: 999px;
  background: #d7dfeb;
  overflow: hidden;
}

.bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .2s;
}

.stage.is-in .bar__fill { transform: scaleX(.7); }

.bar__legend {
  display: grid;
  grid-template-columns: 70% 30%;
  margin-top: calc(11 * var(--s));
  font-size: calc(13 * var(--s));
  font-weight: 600;
  color: var(--muted);
}

.facts-list {
  margin: calc(30 * var(--s)) 0 0;
  border-top: 1px solid var(--line);
}

.facts-list__row {
  display: grid;
  grid-template-columns: calc(120 * var(--s)) minmax(0, 1fr);
  gap: calc(16 * var(--s));
  padding-block: calc(15 * var(--s));
  border-bottom: 1px solid var(--line);
}

.facts-list dt {
  font-size: calc(15 * var(--s));
  font-weight: 700;
}

.facts-list dd {
  margin: 0;
  font-size: calc(15 * var(--s));
  color: var(--muted);
}

.map {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  margin-top: calc(18 * var(--s));
  min-height: calc(210 * var(--s));
  border-radius: calc(18 * var(--s));
  overflow: hidden;
  background: #dde3ec;
}

.map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.15) brightness(1.03) contrast(1.03);
}

.map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a4bcd;
  mix-blend-mode: color;
  opacity: .34;
  pointer-events: none;
}

.map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(14, 26, 50, .18) 100%);
  pointer-events: none;
}

.rows { margin-top: calc(20 * var(--s)); }

.rows__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(16 * var(--s));
  row-gap: calc(3 * var(--s));
  padding-block: calc(13 * var(--s));
  border-bottom: 1px solid var(--line);
}

.rows__row:first-child { border-top: 1px solid var(--line); }

.rows__row b {
  flex: 1 1 auto;
  font-size: calc(15.5 * var(--s));
  font-weight: 700;
}

.rows__row em {
  order: 3;
  margin-left: auto;
  font-style: normal;
  font-size: calc(16 * var(--s));
  font-weight: 700;
  white-space: nowrap;
}

.rows__row span {
  order: 4;
  flex: 1 0 100%;
  font-size: calc(13 * var(--s));
  color: var(--muted);
}

.rows__row.is-free em { color: var(--blue-dark); }

.rows--calc .rows__row { padding-block: calc(15 * var(--s)); }

.steps {
  margin: calc(20 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding: calc(13 * var(--s)) 0 calc(13 * var(--s)) calc(44 * var(--s));
  border-bottom: 1px solid var(--line);
  font-size: calc(13.5 * var(--s));
  line-height: 1.5;
  color: var(--muted);
}

.steps li:first-child { border-top: 1px solid var(--line); }

.steps li b {
  display: block;
  margin-bottom: calc(3 * var(--s));
  font-size: calc(15.5 * var(--s));
  color: var(--ink);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: calc(13 * var(--s));
  width: calc(28 * var(--s));
  height: calc(28 * var(--s));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  font-size: calc(12.5 * var(--s));
  font-weight: 700;
  color: var(--blue-dark);
}

.facts {
  display: flex;
  flex-direction: column;
}

.fact {
  border-top: 1px solid var(--line);
  border-radius: 0;
  transition: background-color .45s var(--ease), border-radius .45s var(--ease);
}

.fact:last-child { border-bottom: 1px solid var(--line); }

.fact__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--s));
  padding: calc(24 * var(--s)) 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: calc(26 * var(--s));
  font-weight: 700;
  letter-spacing: -.025em;
  text-align: left;
  color: var(--dim);
  transition: color .25s ease, padding .45s var(--ease);
}

.fact__head:hover { color: var(--ink); }

.fact__chev {
  width: calc(21 * var(--s));
  height: calc(21 * var(--s));
  flex-shrink: 0;
  transition: transform .45s var(--ease);
}

.fact.is-open {
  background: var(--surface);
  border-top-color: transparent;
  border-radius: var(--r);
}

.fact.is-open .fact__head { color: var(--ink); padding-inline: calc(28 * var(--s)); }

.fact.is-open + .fact { border-top-color: transparent; }
.fact.is-open:last-child { border-bottom-color: transparent; }
.fact.is-open .fact__chev { transform: rotate(180deg); }

.fact__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

.fact.is-open .fact__body { grid-template-rows: 1fr; }

.fact__inner { overflow: hidden; }

.fact__inner p {
  margin: 0;
  padding: 0 calc(28 * var(--s)) calc(26 * var(--s));
  max-width: calc(440 * var(--s));
  font-size: calc(15.5 * var(--s));
  line-height: 1.6;
  color: var(--muted);
  opacity: 0;
  transform: translateY(calc(-6 * var(--s)));
  transition: opacity .3s ease, transform .45s var(--ease);
}

.fact.is-open .fact__inner p {
  opacity: 1;
  transform: none;
  transition-delay: .14s;
}

.serv__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  align-items: start;
  gap: calc(46 * var(--s));
}

.serv__claim .accent { color: var(--blue-dark); }

.serv__claim {
  margin: 0;
  margin-left: auto;
  max-width: calc(404 * var(--s));
  padding-top: calc(11 * var(--s));
  text-align: right;
  font-size: calc(21 * var(--s));
  line-height: 1.5;
  letter-spacing: -.01em;
}

.serv__grid {
  margin-top: calc(54 * var(--s));
  display: grid;
  grid-template-columns: minmax(0, .78fr) repeat(3, minmax(0, 1fr));
  gap: calc(22 * var(--s));
}

.serv__note {
  display: flex;
  flex-direction: column;
}

.hl { color: var(--blue-dark); font-weight: 700; }

.serv__note p {
  margin: 0;
  font-size: calc(15 * var(--s));
  line-height: 1.66;
  color: var(--muted);
}

.bigcta {
  margin-top: auto;
  padding-top: calc(30 * var(--s));
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--s));
  font-size: calc(21 * var(--s));
  font-weight: 700;
  letter-spacing: -.02em;
}

.bigcta__round {
  width: calc(46 * var(--s));
  height: calc(46 * var(--s));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  transition: background-color .2s ease, transform .3s var(--ease);
}

.bigcta__round svg { width: calc(20 * var(--s)); height: calc(20 * var(--s)); }
.bigcta:hover .bigcta__round { background: var(--blue-dark); transform: translateX(3px); }

.photo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease);
}

.photo:hover img { transform: scale(1.05); }

.plate {
  position: absolute;
  left: calc(14 * var(--s));
  right: calc(14 * var(--s));
  bottom: calc(14 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  padding: calc(13 * var(--s)) calc(16 * var(--s));
  border-radius: calc(17 * var(--s));
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.plate__text {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--s));
  font-size: calc(12.5 * var(--s));
  line-height: 1.35;
  color: var(--muted);
}

.plate__text b {
  font-size: calc(16 * var(--s));
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}

.plate__arrow {
  width: calc(19 * var(--s));
  height: calc(19 * var(--s));
  margin-left: auto;
  flex-shrink: 0;
  color: var(--blue);
  transition: transform .3s ease;
}

.photo:hover .plate__arrow { transform: translate(2px, 2px); }

.trust__head .sec__lead {
  margin-left: auto;
  text-align: right;
}

.trust__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  align-items: end;
  gap: calc(46 * var(--s));
}

.trust__grid {
  margin-top: calc(48 * var(--s));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(22 * var(--s));
}

.docs {
  grid-column: span 7;
  padding: calc(40 * var(--s));
}

.docs__list { margin-top: calc(20 * var(--s)); }

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(18 * var(--s));
  padding-block: calc(17 * var(--s));
  border-bottom: 1px solid var(--line);
}

.doc:first-child { border-top: 1px solid var(--line); }

.doc__name {
  font-size: calc(16 * var(--s));
  font-weight: 600;
  transition: color .2s ease;
}

.doc__meta {
  font-size: calc(13 * var(--s));
  color: var(--muted);
  white-space: nowrap;
}

.doc__icon {
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
  color: var(--blue);
  transition: transform .25s ease;
}

/* Отклик на наведение привязан к ссылке, а не к классу. Пока реальных
   файлов нет, строка документа — это <span>, и обещать нажатие ей
   нечем; когда заказчик передаст PDF и <span> снова станет <a>,
   поведение вернётся само. */
a.doc { cursor: pointer; }
a.doc:hover .doc__name { color: var(--blue-dark); }
a.doc:hover .doc__icon { transform: translateY(2px); }

/* стрелка загрузки на нессылке только сбивала бы с толку */
span.doc .doc__icon { opacity: .35; }

.shot {
  position: relative;
  grid-column: span 4;
  margin: 0;
  min-height: calc(220 * var(--s));
  overflow: hidden;
}

.shot--hall { grid-column: span 5; }

.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot figcaption {
  position: absolute;
  left: calc(16 * var(--s));
  bottom: calc(16 * var(--s));
  padding: calc(8 * var(--s)) calc(14 * var(--s));
  border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: calc(12.5 * var(--s));
  font-weight: 600;
}

.years {
  background: var(--blue-dark);
  color: var(--white);
  grid-column: span 3;
  padding: calc(34 * var(--s));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.years__num {
  font-size: calc(78 * var(--s));
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
}

.years__label {
  margin-top: calc(12 * var(--s));
  font-size: calc(15 * var(--s));
  color: var(--white);
}

.service {
  grid-column: span 5;
  padding: calc(34 * var(--s));
}

.service p {
  margin: calc(14 * var(--s)) 0 0;
  font-size: calc(15 * var(--s));
  line-height: 1.6;
  color: var(--muted);
}

.sec--cta { padding-top: calc(26 * var(--s)); }

.callout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: calc(46 * var(--s));
  padding: calc(56 * var(--s));
  border-radius: calc(38 * var(--s));
  background: var(--surface);
}

.callout__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.callout__title {
  margin: 0;
  font-size: calc(58 * var(--s));
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.04em;
}

.callout__phone {
  display: inline-flex;
  align-items: center;
  gap: calc(13 * var(--s));
  margin-top: calc(38 * var(--s));
  font-size: calc(20 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
}

.callout__phone-icon {
  width: calc(46 * var(--s));
  height: calc(46 * var(--s));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  transition: transform .2s ease;
}

.callout__phone-icon svg { width: calc(21 * var(--s)); height: calc(21 * var(--s)); }
.callout__phone:hover .callout__phone-icon { transform: translateY(-2px); }

.lead {
  display: flex;
  flex-direction: column;
  gap: calc(13 * var(--s));
}

.lead__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(13 * var(--s));
}

.field {
  position: relative;
  display: block;
}

.field__input {
  width: 100%;
  height: calc(60 * var(--s));
  padding-inline: calc(22 * var(--s));
  border: 1px solid transparent;
  border-radius: calc(16 * var(--s));
  background: rgba(255, 255, 255, .84);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(16 * var(--s));
  transition: border-color .2s ease, background-color .2s ease;
}

.field__input::placeholder { color: var(--muted); }

.field__input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--white);
}

.field__input--area {
  height: auto;
  min-height: calc(118 * var(--s));
  padding-block: calc(18 * var(--s));
  line-height: 1.5;
  resize: vertical;
}

.field.is-bad .field__input { border-color: #c8402f; background: #fff; }

.field__error {
  display: none;
  margin-top: calc(6 * var(--s));
  padding-left: calc(4 * var(--s));
  font-size: calc(12.5 * var(--s));
  color: #a8321f;
}

.field.is-bad .field__error { display: block; }

.lead__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(26 * var(--s));
  margin-top: calc(6 * var(--s));
}

.consent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(11 * var(--s));
  align-items: start;
  cursor: pointer;
}

.consent__box {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consent__mark {
  width: calc(21 * var(--s));
  height: calc(21 * var(--s));
  margin-top: calc(1 * var(--s));
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 20, 28, .2);
  border-radius: calc(7 * var(--s));
  background: var(--white);
  color: var(--white);
  transition: background-color .2s ease, border-color .2s ease;
}

.consent__mark svg {
  width: calc(13 * var(--s));
  height: calc(13 * var(--s));
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s ease, transform .2s var(--ease);
}

.consent__box:checked + .consent__mark { background: var(--blue); border-color: var(--blue); }
.consent__box:checked + .consent__mark svg { opacity: 1; transform: none; }
.consent__box:focus-visible + .consent__mark { outline: 2px solid var(--blue); outline-offset: 2px; }
.consent.is-bad .consent__mark { border-color: #c8402f; }

.consent__text {
  font-size: calc(12.5 * var(--s));
  line-height: 1.5;
  color: var(--muted);
}

.consent__text a { text-decoration: underline; text-underline-offset: 2px; }

/* Ловушка для роботов: поле «company» человек не видит и не заполняет,
   а скрипт, который набивает всё подряд, — заполняет. Спрятано сдвигом
   за экран, а не display:none — так примитивный бот не отличит его от
   настоящего поля. Из потока выпадает, сетку форм не трогает. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn--send {
  height: calc(62 * var(--s));
  padding-inline: calc(36 * var(--s));
  border: 0;
  font-family: inherit;
  font-size: calc(17 * var(--s));
  cursor: pointer;
  white-space: nowrap;
}

.btn--send[disabled] { opacity: .65; pointer-events: none; }

.lead__status {
  margin: 0;
  font-size: calc(14 * var(--s));
  font-weight: 600;
  color: var(--blue-dark);
}

.lead__status.is-bad { color: #a8321f; }

.lead.is-sent .lead__row,
.lead.is-sent > .field,
.lead.is-sent .lead__foot { display: none; }

.lead.is-sent .lead__status {
  font-size: calc(19 * var(--s));
  line-height: 1.5;
  color: var(--ink);
  animation: riseIn .4s var(--ease);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(calc(-4 * var(--s))); }
}

.foot {
  background: #0d1119;
  color: rgba(255, 255, 255, .74);
  padding-block: calc(70 * var(--s)) calc(48 * var(--s));
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--s));
}

.brand--foot .brand__logo {
  height: calc(34 * var(--s));
  filter: brightness(0) invert(1);
  opacity: .9;
}
.brand--foot .brand__name { font-size: calc(21 * var(--s)); color: var(--white); }

.foot__about {
  margin: calc(22 * var(--s)) 0 0;
  max-width: calc(330 * var(--s));
  font-size: calc(14.5 * var(--s));
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

.foot__phone {
  display: inline-block;
  margin-top: calc(20 * var(--s));
  font-size: calc(22 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white);
}

.foot__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(11 * var(--s));
  font-size: calc(15 * var(--s));
}

.foot__title {
  margin: 0 0 calc(8 * var(--s));
  font-size: calc(13 * var(--s));
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .45);
}

.foot__col a { color: rgba(255, 255, 255, .74); transition: color .18s ease; }
.foot__col a:hover { color: var(--white); }

.foot__addr {
  margin: 0;
  font-size: calc(15 * var(--s));
  line-height: 1.5;
  color: var(--white);
}

.foot__addr span { color: rgba(255, 255, 255, .5); font-size: calc(13.5 * var(--s)); }

.foot__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(24 * var(--s));
  margin-top: calc(54 * var(--s));
  padding-top: calc(24 * var(--s));
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: calc(13 * var(--s));
  color: rgba(255, 255, 255, .55);
}

.foot .sep { background: rgba(255, 255, 255, .3); }

.foot__policy {
  color: rgba(255, 255, 255, .55);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.foot__policy:hover { color: var(--white); }

/* три документа в строку; на узком экране переносятся по одному */
.foot__docs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(6 * var(--s)) calc(22 * var(--s));
}

@media (max-width: 1200px) {
  .foot__docs { justify-content: flex-start; column-gap: 20px; row-gap: 0; }
}

@media (max-width: 1200px) {
  :root { --s: 1px; --r: 20px; }

  .wrap {
    width: auto;
    max-width: 1320px;
    margin-inline: auto;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .sec { padding-block: clamp(46px, 8.5vw, 88px); }
  .sec__title { font-size: clamp(27px, 6.2vw, 44px); }
  .sec__lead, .sec__lead--wide { max-width: 62ch; font-size: clamp(15px, 3.9vw, 17px); }

  .cats__head { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
  .cats__head .sec__lead { padding-top: 0; }
  .cats__nav { display: none; }

  .cats__viewport {
    overflow: visible;
    margin-inline: calc(-1 * max(18px, env(safe-area-inset-left)));
  }

  /* overflow-x: auto делает контейнер прокручиваемым и по вертикали
     тоже, то есть он обрезает тень по своей границе. Отступы сверху
     и снизу — это и есть место, в котором тень помещается целиком. */
  .cats__track {
    transform: none !important;
    gap: 14px;
    /* тень уходит на 24px вверх и на 56px вниз от карточки: смещение
       16px плюс размытие 40px. Отступы должны быть не меньше, иначе
       прокручиваемый контейнер срежет её по своей границе. */
    padding: 30px max(18px, env(safe-area-inset-left)) 64px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cats__track::-webkit-scrollbar { display: none; }

  /* every card is open here — there is no focused one in a swipe list.
     Раз выбранной карточки нет, то и тень принадлежит всем: раньше
     она висела на .is-on, поэтому доставалась только первой. */
  .cat,
  .cat.is-on {
    width: min(74vw, 292px);
    height: min(118vw, 442px);
    box-shadow:
      0 4px 12px rgba(24, 34, 54, .05),
      0 16px 40px rgba(24, 34, 54, .10);
    padding: 30px 22px 0;
    border-radius: clamp(52px, 21vw, 82px);
    scroll-snap-align: center;
    transform: none !important;
  }

  .cat[aria-hidden="true"] { display: none; }

  .cat__more,
  .cat.is-on .cat__more { grid-template-rows: 1fr; opacity: 1; }

  .cat__name { font-size: 17px; }
  .cat__pill { color: var(--blue-dark); }

  .cat__img,
  .cat.is-on .cat__img {
    height: min(41vw, 156px);
    bottom: 24px;
    transform: translateX(-50%) scale(1);
  }

  .stock__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 30px; }
  .stage { order: 2; }
  .map { min-height: 210px; }
  .stage { padding: clamp(20px, 5vw, 34px); min-height: clamp(500px, 134vw, 570px); }
  .pane { inset: clamp(20px, 5vw, 34px); }
  .stat__figure b { font-size: clamp(56px, 15vw, 92px); }
  .fact__head { font-size: clamp(19px, 4.8vw, 26px); padding-block: 18px; }
  .fact.is-open .fact__head { padding-inline: clamp(16px, 4.4vw, 24px); }
  .fact__inner p { padding-inline: clamp(16px, 4.4vw, 24px); max-width: none; }

  .serv__head, .trust__head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }

  .serv__claim,
  .trust__head .sec__lead {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .serv__claim { font-size: clamp(16px, 4.2vw, 21px); }

  .serv__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
  }

  .serv__note { grid-column: 1 / -1; }
  .bigcta { padding-top: 22px; min-height: 44px; font-size: clamp(18px, 4.6vw, 21px); }

  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
  .docs, .service { grid-column: span 2; padding: clamp(22px, 5.4vw, 40px); }
  .shot, .shot--hall { grid-column: span 1; aspect-ratio: 4 / 3; min-height: 0; }
  .years { grid-column: span 2; padding: clamp(22px, 5.4vw, 34px); }
  .years__num { font-size: clamp(52px, 13vw, 78px); }

  .callout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: clamp(24px, 5.6vw, 48px);
    border-radius: clamp(22px, 5vw, 34px);
  }

  .callout__title { font-size: clamp(30px, 7.4vw, 52px); }
  .callout__title br { display: none; }
  .callout__phone { margin-top: 22px; font-size: clamp(17px, 4.4vw, 20px); }
  .callout__phone-icon { width: 42px; height: 42px; }

  .field__input { height: 52px; font-size: 16px; border-radius: 14px; }
  .field__input--area { min-height: 104px; }
  .btn--send { height: 52px; width: 100%; font-size: 16px; }

  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .foot__brand { grid-column: 1 / -1; }
  .brand--foot .brand__name { font-size: 20px; }
  .foot__about { max-width: 46ch; }
  .foot__col a { min-height: 34px; }
  .foot__phone, .foot__policy { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 36px; }
}

@media (max-width: 700px) {
  .serv__grid { grid-template-columns: minmax(0, 1fr); }
  .photo { aspect-ratio: 4 / 3; }
  .lead__row { grid-template-columns: minmax(0, 1fr); }
  .lead__foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .facts-list__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .trust__grid { grid-template-columns: minmax(0, 1fr); }
  .docs, .service, .years, .shot, .shot--hall { grid-column: span 1; }
  .doc { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .doc__name { grid-area: 1 / 1; }
  .doc__meta { grid-area: 2 / 1; font-size: 12.5px; }
  .doc__icon { grid-area: 1 / 2 / span 2 / 2; align-self: center; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal,
  .js .reveal.is-in { opacity: 1; transform: none; transition: none; }

  .cats__track,
  .cat,
  .photo img,
  .doc__icon,
  .plate__arrow,
  .callout__phone-icon { transition: none; }

  .bar__fill { transform: scaleX(.7); transition: none; }
  .lead.is-sent .lead__status { animation: none; }
  .pane, .fact__body, .fact__inner p, .cat, .cat__img, .cat__more { transition: none; }
}

.backlink {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding-inline: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(16, 20, 28, .12);
  box-shadow: 0 6px 20px rgba(16, 20, 28, .10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  color: #12161d;
}

.backlink svg { width: 11px; height: 11px; }
.backlink:hover { border-color: rgba(16, 20, 28, .3); }

@media (min-width: 901px) and (max-width: 1200px) {
  .bento {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 16px;
    padding-top: 18px;
  }

  .tile--slider {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
    min-height: clamp(400px, 54vh, 540px);
  }

  .tile--copy { padding: clamp(28px, 3.4vw, 40px); }
  .copy__title { font-size: clamp(32px, 3.9vw, 44px); }
  .copy__lead { font-size: clamp(15px, 1.6vw, 17px); }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cta {
    min-height: 96px;
    padding-inline: 16px;
    font-size: clamp(15px, 1.6vw, 18px);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .cta__glyph { width: 22px; height: 22px; flex: 0 0 auto; }

  .cats__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 24px;
  }

  .stock__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .stage { order: 0; min-height: 480px; }

  .serv__head,
  .trust__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
  .serv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .docs { grid-column: span 2; }
  .service { grid-column: span 2; }
  .shot, .shot--hall { grid-column: span 2; }
  .years { grid-column: span 2; }

  .callout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
  .callout__title { font-size: clamp(34px, 4.2vw, 46px); }

  .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .foot__brand { grid-column: span 1; }
  .foot__bar { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 1041px) and (max-width: 1200px) {
  .nav { display: flex; gap: 2px; padding: 5px; }
  .nav__link { padding: 11px 15px; font-size: 14px; }
  .burger { display: none; }
  .header__in { flex-wrap: nowrap; row-gap: 0; }
  .topbar { flex-wrap: nowrap; }
  .brand { margin-right: 0; }
}

@media (max-width: 900px) {
  .tap-pad { position: relative; }

  a.hc { position: relative; }
  a.hc::after {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }

  .find__clear { position: relative; }
  .find__clear::after {
    content: "";
    position: absolute;
    inset: -5px;
  }

  .dot::after { inset: -17px; }

  .foot__col a,
  .foot__phone,
  .foot__policy {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .brand--foot { min-height: 44px; }

  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .brand { min-height: 44px; }

}

@media (hover: none) {
  a, button, summary, [role="button"], label {
    -webkit-tap-highlight-color: transparent;
  }

  a.hc:hover { color: var(--muted); }

  .cats__track,
  .sorts,
  .gallery__thumbs,
  .rel__tabs {
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }

  .cats__track,
  .slider { -webkit-user-select: none; user-select: none; }

  .slider { touch-action: pan-y pinch-zoom; }
}

.drawer,
.find { overscroll-behavior: contain; }

/* Полоса жестов iOS может залезть на низ страницы. Здесь нужен был
   больший из двух отступов — собственного и безопасной зоны, — а
   написано было max(0px, ...), что просто обнуляло нижний отступ
   подвала на любом устройстве без выреза. */
@supports (padding: max(0px)) {
  .foot { padding-bottom: max(calc(48 * var(--s)), env(safe-area-inset-bottom)); }
}

/* ============================================================
   ОДНОРЯДНАЯ ШАПКА — 1040px и ниже

   Раньше строка шапки переносилась: логотип занимал всю ширину,
   а кнопки уезжали на второй ряд, и шапка съедала 120px первого
   экрана. Логотип и подпись ужимаются, у корзины остаётся значок
   со счётчиком, и всё встаёт в одну строку.
   ============================================================ */

@media (max-width: 1040px) {
  .header__in {
    flex-wrap: nowrap;
    row-gap: 0;
    gap: 10px;
    padding-block: 8px;
  }

  .brand {
    margin-right: auto;
    min-width: 0;
    min-height: 44px;
    gap: 8px;
  }

  .brand__logo { height: 30px; }

  .brand__name {
    font-size: clamp(15px, 4.1vw, 19px);
    white-space: nowrap;
    letter-spacing: -.02em;
  }

  .tools { gap: 8px; margin-left: 0; flex: 0 0 auto; }

  /* корзина сжимается до значка: подпись дублирует иконку, а место
     на строке стоит дороже. Ссылка держит aria-label, так что для
     скринридера она осталась «Корзина» */
  .btn--cart {
    width: 44px;
    height: 44px;
    padding-inline: 0;
    justify-content: center;
    border-radius: 50%;
    position: relative;
  }

  .btn--cart .btn__label { display: none; }
  .btn--cart .btn__icon { margin: 0; }

  /* счётчик переезжает на угол значка */
  .btn--cart .cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid var(--bg);
    background: var(--ink);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
}

/* самые узкие телефоны: подпись бренда уступает место кнопкам,
   знак носорога и так читается как логотип */
@media (max-width: 360px) {
  .brand__name { display: none; }
  .brand__logo { height: 32px; }
}

/* ============================================================
   ШТОРКА БУРГЕРА

   Шторка живёт внутри залипшей шапки, а на время её открытия body
   заблокирован — значит всё, что не поместилось в экран, становится
   недостижимым. Телефон в ландшафте отрезал последний пункт.
   ============================================================ */

.drawer {
  /* Шторка занимает весь экран под шапкой. Верхнюю границу ставит
     скрипт: он меряет, где на самом деле кончается шапка, и кладёт
     значение в --drawer-top. Так крестик остаётся на виду и меню
     всегда закрывается тем же местом, которым открылось. */
  position: fixed;
  left: 0;
  right: 0;
  top: var(--drawer-top, 104px);
  bottom: 0;
  z-index: 58;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* в ландшафте высоты нет вовсе — пять ссылок ложатся в две колонки
   и занимают три ряда вместо пяти */
@media (max-height: 480px) and (orientation: landscape) {
  .drawer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    max-height: calc(100dvh - 76px);
  }

  /* в сетке last-child больше не значит «последний в колонке» */
  .drawer__link { border-bottom: 1px solid rgba(16, 20, 28, .07); }
  .drawer__link:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ============================================================
   КОНТАКТЫ В БУРГЕРЕ

   На первом экране телефона строка контактов должна нести только
   то, по чему звонят и едут. Часы работы уходят в бургер, туда же
   продублированы адреса и номер — чтобы всё это лежало в одном
   месте, а не было размазано по верху экрана.
   ============================================================ */

@media (max-width: 1040px) {
  .topbar .hc--hours { display: none; }

  /* Часов больше нет, строка осталась из телефона и адресов — адрес
     уходит вправо. Перенос оставлен: на 320px обе строки в одну не
     влезают, и запрет переноса вызывал горизонтальную прокрутку.
     При переносе адрес просто встаёт на свою строку, по-прежнему
     прижатый к правому краю. */
  .topbar { flex-wrap: wrap; gap: 4px 12px; }

  .topbar .hc:last-child {
    margin-left: auto;
    min-width: 0;
    text-align: right;
  }
}

.drawer__meta {
  margin-top: calc(12 * var(--k));
  padding-top: calc(14 * var(--k));
  border-top: 1px solid rgba(16, 20, 28, .1);
}

/* последняя ссылка отдаёт свою черту блоку контактов, иначе линий
   было бы две подряд */
.drawer__link:last-of-type { border-bottom: 0; }

.drawer__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: calc(19 * var(--k));
  font-weight: 800;
  letter-spacing: -.02em;
}

.drawer__row {
  margin: 0;
  padding-block: calc(3 * var(--k));
  font-size: calc(14 * var(--k));
  line-height: 1.5;
  color: var(--muted);
}

/* В ландшафте шторка идёт в две колонки. Пять ссылок плюс блок
   контактов — ровно шесть ячеек, то есть три ряда: если растянуть
   контакты на всю ширину, добавится четвёртый ряд и низ уедет за
   экран. Поэтому блок садится в шестую ячейку. */
@media (max-height: 480px) and (orientation: landscape) {
  /* высоту теперь задают top и bottom — прежний потолок только мешал
     шторке дотянуться до низа экрана */
  .drawer { max-height: none; }
  .drawer__link:nth-last-of-type(-n+2) { border-bottom: 0; }

  .drawer__meta {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    align-self: center;
  }

  .drawer__tel { min-height: 34px; font-size: calc(17 * var(--k)); }
  .drawer__row { padding-block: 0; font-size: calc(13 * var(--k)); }
}

/* ============================================================
   МЯГКОЕ ПОЯВЛЕНИЕ БЕНТО ДОКУМЕНТОВ

   Общая кривая появления — cubic-bezier(.16, 1, .3, 1): она
   проходит почти весь путь за первую четверть времени. На мелком
   элементе это незаметно, а на плитке во всю ширину телефона ход
   в 16px превращается в рывок. Здесь ход длиннее, время больше,
   кривая ровнее, и шаг между карточками заметнее.
   ============================================================ */

@media (max-width: 900px) {
  .js .trust__grid > .reveal,
  .js .docs__grid > .reveal {
    transform: translateY(34px) scale(.98);
  }

  .js .trust__grid > .reveal.is-in,
  .js .docs__grid > .reveal.is-in {
    transform: none;
    transition:
      opacity .95s cubic-bezier(.25, .46, .45, .94) calc(var(--i, 0) * 120ms),
      transform 1.05s cubic-bezier(.25, .46, .45, .94) calc(var(--i, 0) * 120ms);
  }
}

/* ============================================================
   СКЛАД НА УЗКОМ ЭКРАНЕ

   Скрипт переносит каждую панель внутрь её пункта, и здесь она
   перестаёт быть абсолютной подложкой витрины: становится обычным
   блоком в потоке раскрывающейся области. Класс is-inline ставит
   тот же скрипт — без него разметка остаётся прежней, и страница
   без JS ведёт себя как раньше.
   ============================================================ */

@media (max-width: 1200px) {
  .stock__grid.is-inline .stage {
    min-height: 0;
    padding: clamp(20px, 5vw, 34px);
  }

  .stock__grid.is-inline .stage .pane,
  .stock__grid.is-inline .fact__inner .pane {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  /* поля панели повторяют поля абзаца рядом, чтобы графика встала
     по той же левой границе, что и текст над ней */
  .stock__grid.is-inline .fact__inner .pane {
    padding: 0 clamp(16px, 4.4vw, 24px) clamp(20px, 5vw, 26px);
  }

  /* .pane__note — это <p>, и правило .fact__inner p давало ему свои
     поля поверх полей панели: текст уезжал вправо вдвое дальше
     остальных строк */
  .stock__grid.is-inline .fact__inner .pane p {
    padding-inline: 0;
    padding-bottom: 0;
    max-width: none;
  }

  .stock__grid.is-inline .fact__inner .pane__label {
    margin-bottom: 10px;
    display: block;
  }

  /* внутри пункта витринных отбивок сверху уже не нужно */
  .stock__grid.is-inline .fact__inner .pane > :first-child { margin-top: 0; }
}

/* ============================================================
   ШТОРКА НА ВЕСЬ ЭКРАН

   Раньше она была плиткой под шапкой и занимала ровно столько,
   сколько нужно ссылкам. На весь экран пунктам можно дать нормальный
   размер, а контактам — встать внизу, где их удобно достать большим
   пальцем.
   ============================================================ */

.drawer {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__link {
  min-height: calc(58 * var(--k));
  font-size: calc(19 * var(--k));
  letter-spacing: -.02em;
}

/* контакты садятся на дно экрана, ссылки остаются наверху */
.drawer__meta { margin-top: auto; }

/* В ландшафте высоты нет: шаг компактнее, а ссылки возвращаются в две
   колонки. Правило про две колонки стоит в файле выше, чем базовый
   display: flex этого блока, и проигрывало ему по порядку — поэтому
   сетка переобъявлена здесь. */
@media (max-height: 480px) and (orientation: landscape) {
  .drawer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 18px;
  }

  .drawer__link { min-height: calc(46 * var(--k)); font-size: calc(16 * var(--k)); }
  .drawer__meta { margin-top: 0; }
}

/* Переход между страницами.

   В статичной версии сетку подменял скрипт и успевал её подкрасить. На
   Битриксе раздел — обычная перезагрузка страницы, и анимации взяться
   неоткуда. Эта строка просит браузер самого сделать кросс-фейд между
   старой и новой страницей: он снимает кадр текущей, дожидается новой и
   разводит их. Работает в Chrome, Edge и Safari; Firefox правило
   игнорирует и просто перезагружает страницу, как раньше. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}