/* --- шрифты: начало автоблока --- */
   Собрано tools/fonts.py — руками не править: следующий запуск
   скрипта перезапишет этот блок целиком.

   unicode-range оставлен от Google не для красоты: по нему браузер
   решает, какой файл вообще качать. У страницы на русском это
   кириллица, латиницу он возьмёт только под «Linkin Park» и подобное. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-400-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-400-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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-500-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-500-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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-600-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-600-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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-700-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;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-700-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: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/marck-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/marck-400-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;
}

@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/marck-400-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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/unbounded-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/unbounded-600-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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/unbounded-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/unbounded-800-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 {

  --ink:    #0A0809;
  --panel:  #1F0A11;
  --card:   #131013;
  --red:    #D71329;
  --red-text: #E8354A;   /* тот же красный, но проходит по контрасту в мелком тексте */
  --wine:   #780A16;
  --cream:  #F4EFEB;

  --line:      color-mix(in srgb, var(--cream) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--cream) 10%, transparent);
  --mute:      color-mix(in srgb, var(--cream) 72%, transparent);
  --mute-2:    color-mix(in srgb, var(--cream) 55%, transparent);
  --fill:      color-mix(in srgb, var(--cream) 6%, transparent);

  --inset: 24px;
  --r:     24px;
  --skew:  64px;
  --skew-lip: 88px;

  --seam: 24px;
  --overlap: calc(var(--skew) - var(--seam));
  --sticker: clamp(112px, 12vw, 152px);
  --media-lap: clamp(96px, 15vw, 250px);

  --w-wide: 1984px;
  --w-slim: 1024px;
  --w-mid:  1280px;

  --gap:     clamp(14px, 1.8vw, 24px);
  /* Один ритм «заголовок → текст» на весь сайт. До него зазор гулял от 18
     до 62 px: в одних разделах его задавал gap контейнера, в других —
     margin-top у подписи, нужный только на широком экране. */
  --gap-lead: 20px;
  --split-cols: minmax(0, 373fr) minmax(0, 431fr);
  --split-gap:  clamp(20px, 11.7vw, 168px);
  --pad-x:   clamp(20px, 4vw, 104px);
  --sec-y:   clamp(56px, 7vw, 128px);
  --panel-y: clamp(96px, 11vw, 176px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --display: Unbounded, "Arial Black", sans-serif;
  --script:  "Marck Script", "Segoe Script", cursive;
  --body:    Manrope, "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

@media (max-width: 700px) {
  :root { --inset: 12px; --r: 18px; --skew: 40px; --skew-lip: 56px; --seam: 16px; }
}

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

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 120px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -0.04em; text-wrap: balance; }
p  { margin: 0; text-wrap: pretty; }
a  { color: var(--cream); text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.wide { width: min(100% - (var(--inset) * 2), var(--w-wide)); margin-inline: auto; }
.slim { width: min(100% - (var(--pad-x) * 2), var(--w-slim)); margin-inline: auto; }
.mid  { width: min(100% - (var(--pad-x) * 2), var(--w-mid));  margin-inline: auto; }

.skew-bottom {
  border-radius: var(--r);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skew)), 0 100%);
}
.skew-top {
  border-radius: var(--r);
  clip-path: polygon(0 var(--skew), 100% 0, 100% 100%, 0 100%);
}

@supports (clip-path: shape(from 0% 0%, line to 100% 0%, close)) {
  .skew-bottom {
    clip-path: shape(
      from 0% 0%,
      line  to 100% 0%,
      line  to 100% calc(100% - var(--skew-lip)),
      curve to calc(100% - var(--r)) calc(100% - var(--skew)) with 100% calc(100% - var(--skew)),
      line  to var(--r) 100%,
      curve to 0% calc(100% - var(--r)) with 0% 100%,
      close);
  }
  .skew-top {
    clip-path: shape(
      from 0% var(--skew-lip),
      curve to var(--r) var(--skew) with 0% var(--skew),
      line  to calc(100% - var(--r)) 0%,
      curve to 100% var(--r) with 100% 0%,
      line  to 100% 100%,
      line  to 0% 100%,
      close);
  }
}

.alert {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  align-items: center; justify-content: center;
  padding: 9px var(--pad-x);
  background: var(--red);
  border-radius: 0 0 var(--r) var(--r);
  font-size: 13px; line-height: 1.4; text-align: center;
}
.alert b { font-weight: 700; }
.alert a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 96;
  padding-block: clamp(14px, 1.8vw, 24px);
}
.head__in {
  display: flex; align-items: center; gap: 16px;
  padding-inline: clamp(16px, 3vw, 48px);
}
.head__logo img { height: clamp(24px, 2.4vw, 34px); width: auto; object-fit: contain; }
.head__left  { flex: 1 1 0; display: flex; }
.head__right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.nav {
  display: flex; align-items: center;
  height: 62px; padding-inline: 32px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
}
.nav ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav a {
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--red); }
.nav__has-sub { position: relative; }
.nav__has-sub > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.nav .nav__sub {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  min-width: 260px; padding: 10px; margin-top: 14px;
  background: rgba(16, 13, 14, .97); backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft); border-radius: 18px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.nav .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav__sub a { display: block; padding: 10px 14px; border-radius: 10px; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--panel); color: var(--red); }

.head__phone {
  font-family: var(--display);
  font-weight: 600; font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: -0.02em; white-space: nowrap;
  transition: color .25s var(--ease);
}
.head__phone:hover { color: var(--red); }

.head.is-stuck {
  position: fixed;
  padding-block: 10px;
  background: rgba(10, 8, 9, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  animation: dropIn .45s var(--ease) both;
}
.head.is-stuck .nav { height: 52px; background: transparent; border-color: transparent; }
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.burger {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  gap: 5px; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 50%; cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 2px;
  background: var(--cream); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 95;
  display: none; flex-direction: column;
  gap: 6px; padding: 104px var(--pad-x) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(10, 8, 9, 0.97);
  backdrop-filter: blur(18px);
}
.drawer.is-open { display: flex; }

body.nav-open .head { position: fixed; top: 0; }
/* :not(.btn) обязателен. Без него это правило перебивало .btn по
   специфичности и обнуляло кнопке боковые отступы: padding становился
   «16px 0», текст в 316 px не влезал в кнопку шириной 305 px и вылезал
   за её края. Заодно кнопка получала кегль пункта меню и подчёркивание. */
.drawer a:not(.btn) {
  padding: 16px 0;
  font-family: var(--display);
  font-weight: 600; font-size: clamp(24px, 7vw, 34px); letter-spacing: -0.03em;
  border-bottom: 1px solid var(--line-soft);
}
.drawer a.drawer__sub {
  padding: 10px 0 10px 20px;
  font-family: inherit; font-weight: 500; font-size: clamp(17px, 4.6vw, 20px); letter-spacing: 0;
  color: rgba(244, 239, 235, .75);
}
.drawer .btn {
  margin-top: 24px; align-self: flex-start;
  padding: 17px 34px; font-size: 16px;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--red   { background: var(--red); color: #fff; box-shadow: 0 16px 40px rgba(215, 19, 41, .3); }
.btn--red:hover { background: var(--cream); color: var(--ink); }
.btn--ghost { border-color: rgba(244, 239, 235, .35); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(244, 239, 235, .07); }
.btn--sm { padding: 12px 22px; font-size: 14px; }

.hero-wrap { position: relative; margin-bottom: calc(var(--overlap) * -1); }

.hero {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 540px;
  overflow: hidden;
  background: var(--panel);
}

.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2400 / 1950;
  max-height: 88svh;
  overflow: hidden;
  margin-bottom: calc(var(--media-lap) * -1);
}

.hero__media picture { display: contents; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  will-change: transform;

  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 95%);
}

.hero__scrim {

  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 8, 9, .55) 0%,
    rgba(10, 8, 9, .05) 26%,
    rgba(10, 8, 9, .15) 65%,
    rgba(10, 8, 9, 0) 100%);
}

@media (min-width: 701px) and (max-height: 900px) {
  :root { --media-lap: clamp(130px, 18vw, 280px); }
}

.hero__in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  padding: 0 var(--pad-x)
           calc(var(--skew) + var(--sticker) / 2 + clamp(18px, 2.2vw, 32px));
  text-align: center;
}

.hero__title { display: flex; flex-direction: column; align-items: center;
  padding-bottom: clamp(14px, 2.2vw, 34px); }

.t-name {
  font-family: var(--body);
  font-size: 11px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(244, 239, 235, .72);
  margin-top: clamp(14px, 2vw, 22px);
}
.t-block {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(19px, 3.7vw, 47px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
}
.t-script {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(60px, 12vw, 156px);
  line-height: .76; letter-spacing: 0;
  margin-top: -0.06em;
  text-shadow: 0 10px 46px rgba(10, 8, 9, .75);
}
.hero__lead {
  max-width: 56ch;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.6; color: rgba(244, 239, 235, .88);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.sticker {
  position: absolute; z-index: 5;
  right: calc(var(--inset) + clamp(16px, 3vw, 64px));
  bottom: calc(var(--skew) - var(--seam) / 2 - var(--sticker) / 2);
  width: var(--sticker); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: var(--red); color: #fff;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 600; font-size: clamp(11px, 1vw, 13px);
  line-height: 1.25; letter-spacing: -0.01em; text-align: center;
  box-shadow: 0 18px 44px rgba(215, 19, 41, .34), 0 0 0 6px var(--ink);
  transition: transform .5s var(--ease);
}
.sticker:hover { transform: rotate(-6deg) scale(1.05); }

.panel {
  position: relative; z-index: 2;
  padding: calc(var(--panel-y) + var(--overlap)) 0 var(--sec-y);
  background: linear-gradient(180deg, #2A0C15 0%, var(--panel) 58%, #170A0E 100%);
}
.panel__head {
  display: grid; gap: clamp(24px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.panel__cards {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: clamp(36px, 5vw, 72px);
}

.sec--panel {
  position: relative; z-index: 2;
  padding: calc(var(--sec-y) + var(--overlap)) 0 var(--sec-y);
  background: linear-gradient(180deg, #2A0C15 0%, var(--panel) 62%, #170A0E 100%);
}
.sec--lap { margin-bottom: calc(var(--overlap) * -1); }

.sec { padding: var(--sec-y) 0; }
.sec--line { border-top: 1px solid var(--line-soft); }
.sec--wine { background: linear-gradient(180deg, rgba(120, 10, 22, .2), rgba(10, 8, 9, 0)); }

.split {
  display: grid; gap: clamp(28px, 4vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
}

.eyebrow {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase;
  /* Не var(--red): на чёрном он даёт 3,82:1, а мелкому тексту нужно 4,5:1.
     Этот оттенок даёт 4,79:1 и на глаз тот же красный. Кнопки и крупные
     акценты остаются на --red — там размер шрифта снимает требование. */
  color: var(--red-text);
}
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 60px); line-height: .98; letter-spacing: -0.04em; }

.script {
  font-family: var(--script); font-weight: 400;
  font-size: 1.5em; line-height: 1.35; letter-spacing: 0;
  color: var(--red);
}

/* «Почувствуй себя звездой» наезжало само на себя: у .h2 плотный
   line-height .98, а рукописное слово набрано в полтора раза крупнее и с
   выносными элементами. Мало поднять line-height скрипту — при трёх
   строках сталкивались уже обычные строки, поэтому заголовку с рукописным
   словом даём свой интервал. Замерено: 1.35 и 1.25 дают ноль наложения на
   ширинах блока от 340 до 1024 px. */
.h2:has(.script) { line-height: 1.25; }
.h3 { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.02em; }
.lead { max-width: 54ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; color: var(--mute); }
.lead--narrow { max-width: 42ch; }

/* Отступ нужен только там, где подпись стоит во второй колонке рядом с
   заголовком: он выравнивает их по вертикали. На телефоне колонки
   схлопываются в одну — там он снимается, см. медиазапрос ниже. */
.lead--with-h2 { margin-top: 38px; align-self: start; }
.lead--wide   { max-width: 62ch; }
.h2--tight { max-width: 20ch; }
.h2--sm    { font-size: clamp(24px, 3.2vw, 46px); }
.accent    { color: var(--red); }
.stack { display: flex; flex-direction: column; gap: var(--gap-lead); align-items: flex-start; }

.tile {

  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 20px; overflow: hidden;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.tile:hover { border-color: rgba(215, 19, 41, .65); transform: translateY(-4px); }
.tile__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tile__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  transition: transform .9s var(--ease);
}
.tile:hover .tile__media img { transform: scale(1.06); }
.tile__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2vw, 28px); flex: 1; }
.tile__body p { font-size: 15px; color: rgba(244, 239, 235, .66); }
.tile__more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--red-text); }

.pcard {
  position: relative;
  min-height: clamp(169px, 14.4vw, 207px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 8, 9, .10), rgba(10, 8, 9, .55));
  transition: border-color .3s var(--ease);
}
.pcard:hover { border-color: rgba(215, 19, 41, .65); }
.pcard p { font-size: 14px; color: rgba(244, 239, 235, .78); }
.pcard__more { font-size: 14px; font-weight: 600; margin-top: 4px; }
.pcard__more:hover { color: var(--red); }

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-text-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;
}

.soloists { margin-top: clamp(24px, 3vw, 44px); overflow: hidden; }
.soloist {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px); align-items: end;
}
.soloist--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.soloist + .soloist { border-top: 1px solid var(--line-soft); padding-top: 44px; }
.soloist--reverse .soloist__photo { order: 2; }

.soloist__photo {
  position: relative; height: 520px;
  background: radial-gradient(ellipse 56% 15% at 50% 97%, rgba(215, 19, 41, .34) 0%, rgba(215, 19, 41, .10) 45%, rgba(10, 8, 9, 0) 100%);
}
.soloist__photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

.soloist__body { position: relative; padding-bottom: 88px; }
.soloist--reverse .soloist__body { padding-top: 48px; text-align: right; }
.soloist__inner { position: relative; display: flex; flex-direction: column; gap: 18px; }
.soloist--reverse .soloist__inner { align-items: flex-end; }
.soloist--reverse .soloist__meta { flex-direction: row-reverse; }
.soloist__meta { display: flex; align-items: center; gap: 14px; margin-bottom: -5px; }
.soloist__rule { width: 56px; height: 2px; background: var(--red); }
.soloist__role { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 239, 235, .6); }
.soloist__name {
  position: relative; z-index: 0;
  font-family: 'Golos Text', var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
/* контурное имя-призрак: живёт на одной строке с именем, поэтому основа букв всегда совпадает */
.soloist__name::before, .soloist__name::after {
  content: attr(data-name);
  position: relative; z-index: -1;
  display: inline-block; width: 0; white-space: nowrap; vertical-align: baseline;
  font-weight: 900; font-size: min(150px, calc(580px / (var(--n, 7) * .68)));
  line-height: 0; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 235, .13);
  pointer-events: none; user-select: none;
}
.soloist__name::before { left: -120px; }
.soloist__name::after { display: none; }
.soloist--reverse .soloist__name::before { display: none; }
.soloist--reverse .soloist__name::after { display: inline-block; direction: rtl; left: 100px; }
.soloist__text { max-width: 460px; font-size: 17px; line-height: 1.55; color: rgba(244, 239, 235, .72); }

@media (max-width: 1100px) {
  .soloist, .soloist--reverse { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 40px; }
  .soloist__photo { height: 420px; }
  .soloist__body, .soloist--reverse .soloist__body { padding: 0 0 8px; text-align: left; }
  .soloist--reverse .soloist__inner { align-items: flex-start; }
  .soloist__name::before, .soloist__name::after, .soloist--reverse .soloist__name::after { display: none; }
  .soloist--reverse .soloist__photo { order: 0; }
}
@media (max-width: 600px) {
  .soloist__photo { height: 340px; }
  .soloist__text { font-size: 16px; }
}

.reviews { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: clamp(26px, 3.4vw, 48px); }
.review {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line-soft); border-radius: 20px;
  transition: border-color .3s var(--ease);
}
.review:hover { border-color: rgba(215, 19, 41, .65); }
.review__stars { letter-spacing: 2px; }
.review__stars .star { color: var(--line); font-size: 15px; }
.review__stars .star--on { color: var(--red-text); }
.review__text { font-size: 14px; line-height: 1.6; color: rgba(244, 239, 235, .82); }
.review__who { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: rgba(244, 239, 235, .6); margin-top: auto; }
.review__who b { color: var(--cream); font-weight: 600; }

.clients { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: clamp(26px, 3.4vw, 48px); align-items: stretch; }
.client {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line-soft); border-radius: 20px;
  transition: border-color .3s var(--ease);
}
.client:hover { border-color: rgba(215, 19, 41, .65); }
.client__logo { display: flex; align-items: center; height: 48px; }
.client__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .85; }
.client__body { display: flex; flex-direction: column; gap: 6px; }
.client__body .h3 { font-size: 16px; line-height: 1.3; }
.client__body p { font-size: 14px; color: rgba(244, 239, 235, .72); }

.disc {
  position: relative;
  width: min(420px, 86vw); max-width: 100%; aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line);
  background: none; padding: 0; cursor: pointer;
}
.disc picture { display: contents; }
.disc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 1s var(--ease); }
.disc:hover img { transform: scale(1.07); }
/* Пластинка — подложка под круглым превью: видео лежит на ней этикеткой.

   Рисуется градиентами, без единой картинки и без SVG-контуров: дорожки —
   repeating-radial-gradient, задиры от шлифовки — conic-gradient. Так вышло
   и легче (0 КБ разметки), и ближе к настоящему винилу, чем нарисованные
   вручную окружности.

   Вращается только слой с задирами: концентрические дорожки при повороте
   неотличимы сами от себя, вращение по ним не видно вообще. Блик неподвижен —
   это отражение лампы, оно не крутится вместе с диском. */
.disc-stage {
  position: relative;
  /* max-width обязателен: в колонке .split на 900 px подложка вылезала бы
     за край и давала горизонтальную прокрутку — ровно как круг на 768 px. */
  width: min(460px, 88vw); max-width: 100%;
  aspect-ratio: 1;
  display: grid; place-items: center;
  justify-self: center;
}
.disc-stage .disc { width: 66%; justify-self: auto; z-index: 1; }

/* Этикетка чуть больше кадра — вылезает из-под него кольцом, как бумажная
   наклейка на настоящей пластинке.

   Цвет оранжевый, а не акцентный красный: рядом красная кнопка «play», и
   два одинаковых красных пятна сливались в одно. Тёплый оранжевый читается
   отдельным элементом и совпадает с референсом. Меняется одной строкой. */
.vinyl__label {
  --label: #C85A22;
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: var(--label);
  box-shadow: inset 0 0 0 1px rgba(10, 8, 9, .45), 0 2px 10px rgba(10, 8, 9, .5);
}

/* Кнопка привязана к диаметру круга, а не к абсолютным пикселям: при
   уменьшении этикетки прежние 76 px занимали почти половину кадра.
   Нижняя граница 52 px — меньше уже неудобно попадать пальцем. */
.disc-stage .play { width: clamp(52px, 27%, 76px); height: clamp(52px, 27%, 76px); }
.disc-stage .play::after { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }

.disc__vinyl {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 50%,
      #232025 0 36%, #161316 42%, #0E0C0E 66%, #171417 89%, #262227 97%, #0B090B 100%);
  box-shadow:
    inset 0 0 0 1px rgba(244, 239, 235, .14),
    inset 0 0 26px rgba(0, 0, 0, .9);
}

/* Дорожки неподвижны: концентрические окружности при повороте неотличимы
   сами от себя, вращать их — впустую тратить кадры. Период 5 px и мягкие
   переходы: на 3 px с резкими границами шёл муар. */
.vinyl__grooves {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(244, 239, 235, .055) 0 0.5px,
    rgba(0, 0, 0, .16) 1.6px,
    rgba(244, 239, 235, .055) 5px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 35%, #000 41%, #000 95%, transparent 99%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 35%, #000 41%, #000 95%, transparent 99%);
}

/* Задиры от шлифовки — единственное, что вращается. Секторы узкие и с
   мягкими краями: широкие с резкой границей давали не винил, а нарезанный
   пирог. */
.vinyl__spin {
  position: absolute; inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: vinylSpin 9s linear infinite;

  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(244, 239, 235, .10) 3deg, transparent 8deg,
    transparent 26deg, rgba(244, 239, 235, .06) 29deg, transparent 33deg,
    transparent 58deg, rgba(244, 239, 235, .12) 62deg, transparent 68deg,
    transparent 94deg, rgba(244, 239, 235, .05) 97deg, transparent 101deg,
    transparent 129deg, rgba(244, 239, 235, .11) 133deg, transparent 139deg,
    transparent 167deg, rgba(244, 239, 235, .07) 170deg, transparent 175deg,
    transparent 199deg, rgba(244, 239, 235, .12) 203deg, transparent 209deg,
    transparent 236deg, rgba(244, 239, 235, .06) 239deg, transparent 244deg,
    transparent 271deg, rgba(244, 239, 235, .10) 275deg, transparent 281deg,
    transparent 308deg, rgba(244, 239, 235, .07) 311deg, transparent 316deg,
    transparent 338deg, rgba(244, 239, 235, .09) 342deg, transparent 348deg,
    transparent 360deg);

  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 37%, #000 48%, #000 92%, transparent 99%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 37%, #000 48%, #000 92%, transparent 99%);
}

/* Неподвижный блик — отражение окна, оно не крутится вместе с диском. */
.vinyl__gloss {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(118deg,
      transparent 22%, rgba(244, 239, 235, .09) 34%, rgba(244, 239, 235, .02) 43%, transparent 50%),
    linear-gradient(118deg,
      transparent 60%, rgba(244, 239, 235, .05) 69%, transparent 77%);
}

@keyframes vinylSpin { to { transform: rotate(360deg); } }

.disc__veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(62% 62% at 50% 50%, rgba(10, 8, 9, .08), rgba(10, 8, 9, .5));
}
.play {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease);
}
.play::after {
  content: ""; margin-left: 6px;
  border-left: 19px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.disc:hover .play { transform: scale(1.1); }
.disc--static { cursor: auto; }

.band {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16 / 9;
  margin-top: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; padding: 0; background: none; cursor: pointer;
}
.band img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  transition: transform 1s var(--ease);
}
.band:hover img { transform: scale(1.04); }
.band__veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(10, 8, 9, .12), rgba(10, 8, 9, .58));
}
.band__cap {
  position: absolute;
  left: clamp(18px, 2vw, 28px); bottom: clamp(16px, 1.8vw, 24px);
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(244, 239, 235, .8);
}

.disc-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.disc-cap { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-2); }

.rows { margin-top: clamp(26px, 3.4vw, 48px); border-top: 1px solid var(--line); }
.row {

  display: grid;
  grid-template-columns: var(--split-cols);
  column-gap: var(--split-gap);
  align-items: start;
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.row:hover { background: rgba(215, 19, 41, .09); }
.row h3 {
  font-size: clamp(20px, 2.8vw, 40px);
  line-height: 1.06; font-weight: 600; letter-spacing: -0.03em;
}
.row p { padding-top: 10px; font-size: 15px; line-height: 1.6; color: rgba(244, 239, 235, .66); }

.marks { display: flex; flex-direction: column; gap: 14px; max-width: 54ch; }
.marks p { padding-left: 18px; border-left: 2px solid var(--red); font-size: clamp(15px, 1.4vw, 18px); color: rgba(244, 239, 235, .78); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 9px 15px; font-size: 13px; font-weight: 500; border: 1px solid rgba(244, 239, 235, .2); border-radius: 999px; }

.gal-head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: 18px;
}

/* Шапка с текстом справа должна стоять в тех же колонках, что и ряды под
   ней. На flex со space-between ширины считались по содержимому, и правый
   столбец гулял относительно рядов: +79px на 1100 и −31px на 820. */
@media (min-width: 701px) {
  .gal-head:has(.lead) {
    display: grid;
    grid-template-columns: var(--split-cols);
    column-gap: var(--split-gap);
    align-items: end;
  }
  .gal-head:has(.lead) .lead { max-width: none; }
}
.gal-nav { display: flex; gap: 10px; }
.gal-btn {
  width: 50px; height: 50px; font-size: 17px;
  background: transparent; border: 1px solid rgba(244, 239, 235, .3);
  border-radius: 50%; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.gal-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

.gal {
  --card-w: clamp(195px, 29vw, 421px);
  --gal-gap: clamp(16px, 4.5vw, 65px);
  display: flex; gap: var(--gal-gap);
  margin-top: clamp(24px, 3vw, 40px);
  padding: 4px clamp(20px, 2vw, 30px);
  scroll-padding-inline: clamp(20px, 2vw, 30px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gal::-webkit-scrollbar { display: none; }
.gal:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.gal__slide {
  position: relative; margin: 0;
  flex: 0 0 var(--card-w);
  aspect-ratio: 421 / 800;
  border-radius: 20px; overflow: hidden;
  scroll-snap-align: start;
}
.gal__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  transition: transform .9s var(--ease);
}
.gal__slide:hover img { transform: scale(1.04); }

@media (max-width: 860px) {

  .gal {
    padding-inline: calc((100% - var(--card-w)) / 2);
    scroll-padding-inline: calc((100% - var(--card-w)) / 2);
  }
  .gal__slide { scroll-snap-align: center; }
}

.figs { display: grid; gap: clamp(18px, 2.4vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.fig { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(244, 239, 235, .2); }
.fig b { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 58px); line-height: .9; letter-spacing: -0.04em; }
.fig span { font-size: 14px; color: rgba(244, 239, 235, .62); }

.faq { margin-top: clamp(24px, 3vw, 44px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; gap: 16px;
  padding: clamp(18px, 2.2vw, 26px) clamp(4px, 1vw, 14px);
  cursor: pointer; list-style: none;
  transition: background .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(215, 19, 41, .08); }
.faq summary h3 { flex: 1; font-size: clamp(17px, 1.9vw, 24px); }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; color: var(--red); }
.faq details[open] summary::after { content: "−"; }
.faq p {
  max-width: 76ch;
  padding: 0 clamp(4px, 1vw, 14px) clamp(18px, 2.2vw, 26px);
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--mute);
  animation: fade .4s both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.apply {
  position: relative;
  padding: clamp(64px, 9vw, 130px) 0 clamp(84px, 10vw, 150px);
  border-top: 1px solid var(--line-soft);
  background: radial-gradient(110% 100% at 50% 0%, rgba(120, 10, 22, .55), rgba(10, 8, 9, 0) 72%);
  text-align: center;
}
.apply .slim { display: flex; flex-direction: column; align-items: center; gap: var(--gap-lead); }
.apply h2 { font-size: clamp(32px, 5.4vw, 86px); line-height: .92; }
.form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; margin-top: 14px; width: 100%; }
.form input, .form select {
  flex: 0 1 300px; max-width: 300px;
  padding: 17px 22px;
  font-family: inherit; font-size: 16px; color: var(--cream);
  background: var(--fill);
  border: 1px solid rgba(244, 239, 235, .2); border-radius: 999px;
  outline: none; color-scheme: dark;
  transition: border-color .25s var(--ease);
}
.form input:focus, .form select:focus { border-color: var(--red); }
.form select {
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23D71329' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
.form button {
  position: absolute; z-index: 4;
  left: 50%; bottom: 0; transform: translate(-50%, 50%);
  padding: 19px 44px;
  font-family: var(--display); font-weight: 600;
  box-shadow: 0 18px 44px rgba(215, 19, 41, .34), 0 0 0 8px var(--ink);
}
.form button:hover { transform: translate(-50%, calc(50% - 2px)); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fineprint { font-size: 12px; color: rgba(244, 239, 235, .42); }
.consent {
  display: inline-flex; align-items: flex-start; gap: 9px;
  max-width: 540px; text-align: left; cursor: pointer;
  transition: color .3s var(--ease);
}
.consent:hover { color: rgba(244, 239, 235, .68); }
.consent input {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0;
  accent-color: var(--red); cursor: pointer;
}
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: var(--red); }
.consent--error { color: var(--red); }

.form__err {
  margin: 14px 0 0;
  font-size: 14px; line-height: 1.45;
  color: var(--red);
}

.done {
  max-width: 540px; margin-top: 14px; padding: 28px;
  border: 1px solid var(--red); border-radius: 20px;
  background: rgba(215, 19, 41, .13);
  animation: fade .5s both;
}
.done b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em; }
.done span { display: block; margin-top: 10px; color: var(--mute); }

footer {
  border-top: 1px solid var(--line-soft);
  background: #0D0B0C;
}
.foot {
  display: grid; gap: clamp(24px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  padding: clamp(40px, 5vw, 80px) 0;
}
.foot img { width: min(220px, 70%); object-fit: contain; }

.foot__lockup { display: flex; align-items: baseline; gap: .3em; }
.foot__lockup span {
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: -0.01em; text-transform: uppercase;
}
.foot__lockup em {
  font-family: var(--script); font-style: normal;
  font-size: 30px; line-height: .7; color: var(--red);
}

/* .5, а не .45: при .45 контраст 3,71:1, а мелкому тексту нужно 4,5.
   Полупрозрачный белый на #0D0B0C даёт 4,80:1 — разницы на глаз нет. */
.foot__label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 239, 235, .5); }
.foot__hours { font-size: 14px; color: rgba(244, 239, 235, .6); }
.foot__phone { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2.2vw, 28px); letter-spacing: -0.02em; }
.foot__col { display: flex; flex-direction: column; gap: 10px; }

/* Колонки равные и контейнер по центру, но текст последней колонки короткий,
   и справа оставалась пустота — подвал читался сдвинутым влево. Прижимаем
   её содержимое к правому краю контейнера. */
@media (min-width: 701px) {
  /* Средняя колонка по центру: её центр совпадает с центром страницы, и
     телефон встаёт ровно под кнопкой «Отправить», которая сидит на стыке
     секции заявки и подвала. Последняя прижата вправо, иначе справа
     оставалась пустота и подвал читался сдвинутым влево. */
  .foot__col:nth-child(2) { align-items: center; text-align: center; }
  .foot__col:last-child   { align-items: flex-end; text-align: right; }
}
.foot__col a:not(.foot__phone):not(.pillbtn) { font-size: 15px; color: rgba(244, 239, 235, .75); }
.foot__socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pillbtn { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px; border: 1px solid rgba(244, 239, 235, .22); border-radius: 999px; transition: border-color .3s var(--ease); }
.pillbtn:hover { border-color: var(--red); }

.album {
  display: none;
  position: fixed; inset: 0; z-index: 100; margin: auto;
  width: min(var(--w-mid), 80vw); height: 80svh;
  max-width: 80vw; max-height: 80svh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 40px 120px rgba(6, 5, 6, .72);
}
.album[open] { display: block; }
.album::backdrop { background: rgba(6, 5, 6, .82); backdrop-filter: blur(10px); }

.album__box {
  height: 100%;
  display: flex; flex-direction: column;
  width: 100%;
  padding-inline: clamp(18px, 2.6vw, 44px);
}
.album__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 2.4vw, 30px) 0 clamp(12px, 1.5vw, 20px);
}
.album__title {
  margin: 0; line-height: 1.1;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.03em;
}
.album__count { font-size: 13px; color: var(--mute-2); margin-left: 12px; }
.album__close {
  flex: 0 0 auto;
  width: 50px; height: 50px; font-size: 17px;
  background: transparent; border: 1px solid rgba(244, 239, 235, .3);
  border-radius: 50%; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.album__close:hover { background: var(--red); border-color: var(--red); color: #fff; }

.album__grid {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  grid-auto-rows: max-content;

  align-content: start;
  padding-bottom: clamp(24px, 4vw, 56px);
}
.album__item {
  margin: 0; position: relative;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--card);
  cursor: zoom-in;
  transition: border-color .3s var(--ease), transform .5s var(--ease);
}
.album__item:hover { border-color: var(--red); }
.album__item:hover img { transform: scale(1.05); }
.album__item:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.album__item picture { display: contents; }
.album__item img,
.album__item video {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 35%;
  transition: transform .8s var(--ease);
}
.album__item video { background: #000; pointer-events: none; }

.album__item:has(video) { grid-column: span 2; }
.album__item video { aspect-ratio: 16 / 9; }

/* Вертикальные ролики: снятое на телефон в плитке 16:9 режется по головам,
   поэтому такие идут в тех же пропорциях, что и фотографии. */
.album__item--tall:has(video) { grid-column: auto; }
.album__item--tall video { aspect-ratio: 4 / 5; }
.album__item:has(video)::after {
  content: "▶";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  font-size: 17px; padding-left: 3px;
  color: #fff; background: rgba(215, 19, 41, .9);
  border-radius: 50%;
  transition: transform .4s var(--ease);
}
.album__item:has(video):hover::after { transform: translate(-50%, -50%) scale(1.08); }
.album__empty { color: var(--mute); font-size: 15px; padding: 20px 0; }

@media (max-width: 700px) {
  .album { width: 94vw; max-width: 94vw; height: 88svh; max-height: 88svh; }
  .album__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .album__item:has(video) { grid-column: 1 / -1; }
  .album__item--tall:has(video) { grid-column: auto; }
  .album__item:has(video)::after { width: 46px; height: 46px; font-size: 13px; }
}

.cookie {
  position: fixed; z-index: 94;
  left: var(--inset); bottom: var(--inset);
  width: min(420px, calc(100% - var(--inset) * 2));
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(6, 5, 6, .6);
  animation: cookieIn .5s var(--ease) both;
}
.cookie[hidden] { display: none; }
.cookie__text { font-size: 13px; line-height: 1.55; color: var(--mute); }
.cookie__text a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie__text a:hover { color: var(--red); }
.cookie__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie__acts .btn { padding: 11px 20px; font-size: 13px; }
.cookie__acts .btn:hover { transform: none; }

@keyframes cookieIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  /* Компактнее, чем на большом экране, и это не косметика: в прежнем виде
     плашка была 173 px высотой и накрывала нижние 16 px кнопки «Оставить
     заявку» на экране 390x844 — от главной кнопки оставалась красная
     полоска. Здесь она укладывается примерно в 120 px и кнопку не трогает. */
  .cookie {
    left: var(--inset); right: var(--inset); width: auto;
    gap: 10px; padding: 13px 15px; border-radius: 15px;
  }
  .cookie__text { font-size: 12px; line-height: 1.45; }
  .cookie__acts { flex-wrap: nowrap; gap: 8px; }
  .cookie__acts .btn {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 10px 8px; font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl__spin { animation: none; }

  .cookie { animation: none; }
}

.lb {
  display: none;
  position: fixed; inset: 0; z-index: 110; margin: auto;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  padding: clamp(56px, 6vw, 76px) clamp(16px, 7vw, 96px);
  border: none; background: transparent;
}
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(6, 5, 6, .93); backdrop-filter: blur(14px); }

.lb__stage {
  margin: 0; display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}
.lb__stage img[hidden],
.lb__stage video[hidden] { display: none; }
.lb__stage img,
.lb__stage video {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 78svh;
  border-radius: 18px; background: #000;
  box-shadow: 0 30px 90px rgba(6, 5, 6, .6);
}
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 30px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 14px; color: var(--mute-2); padding: 0 20px; text-align: center;
}
.lb__count { flex: 0 0 auto; color: var(--mute-2); }
.lb__close,
.lb__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  color: var(--cream); background: rgba(19, 16, 19, .78);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lb__close:hover,
.lb__nav:hover { background: var(--red); border-color: var(--red); }
.lb__close { right: clamp(14px, 2.4vw, 30px); top: clamp(14px, 2.4vw, 30px); width: 50px; height: 50px; font-size: 17px; }
.lb__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 26px; padding-bottom: 4px; }
.lb__nav--prev { left: clamp(10px, 2vw, 26px); }
.lb__nav--next { right: clamp(10px, 2vw, 26px); }
.lb__nav[hidden] { display: none; }

@media (max-width: 700px) {
  .lb { padding: 64px 12px 78px; }
  .lb__stage img, .lb__stage video { max-height: 66svh; }
  .lb__nav { width: 44px; height: 44px; font-size: 21px; }
}

.modal {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 5, 6, .92); backdrop-filter: blur(12px);
  border: none;
}
.modal[open] { display: flex; }
.modal::backdrop { background: rgba(6, 5, 6, .92); }
.modal__box { position: relative; width: min(520px, 94vw); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.modal__box video { width: 100%; max-height: 70svh; object-fit: cover; background: #000; }
.modal__cap { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.modal__cap b { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.modal__close {
  position: absolute; right: 14px; top: 14px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: rgba(10, 8, 9, .7);
  border: 1px solid rgba(244, 239, 235, .2); border-radius: 50%; cursor: pointer;
}

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .head__center { display: none; }
  .burger { display: flex; }
  .head__left { flex: 0 0 auto; }
  .head__right { flex: 1 1 auto; }
  .head__phone { display: none; }
}

@media (max-width: 700px) {
  .head__right .btn { display: none; }

  .hero__media { aspect-ratio: 1080 / 1350; max-height: 62svh; }

  /* Подпись под лозунгом стояла почти вплотную к рукописному «разнос». */
  .t-name { margin-top: 22px; }

  /* Один зазор «заголовок → текст» во всех разделах. margin-top у подписи
     нужен только двухколоночной раскладке; здесь колонки схлопнуты, и он
     превращался в лишний воздух: 62 px в «Коротко», 56 px в «Составе»
     против 20 px в остальных разделах. */
  .lead--with-h2 { margin-top: 0; }
  .panel__head, .gal-head { row-gap: var(--gap-lead); }

  /* Ряды «заголовок | описание» — в одну колонку. В две они не помещались:
     под заголовок оставалось 141 px, а слово «Акустический» шире — оно
     вылезало в разрыв между колонками и наезжало на «Для welcome-зоны». */
  .row { grid-template-columns: 1fr; row-gap: var(--gap-lead); }
  .row p { padding-top: 0; }

  /* Кнопка «Отправить» наполовину свисает за нижний край секции заявки —
     так задумано. Но подвал начинается сразу под ней, и до логотипа
     оставалось 9 px. 76px = половина кнопки (32) плюс нормальный отступ. */
  .foot { padding-top: 76px; }

  .btn--optional { display: none; }

  .hero__cta { flex-direction: column; align-self: stretch; }
  .hero__cta .btn { justify-content: center; }

  .gal img { width: 68vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__media img, .hero__media video { transform: none; }
}

.doc { padding: clamp(48px, 7vw, 110px) 0 clamp(64px, 8vw, 130px); }
.doc__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: clamp(24px, 3vw, 40px); }
.doc__body { color: var(--mute); font-size: 16px; line-height: 1.75; }
.doc__body > * + * { margin-top: 1em; }
.doc__body h1,
.doc__body h2,
.doc__body h3,
.doc__body h4 { line-height: 1.25; color: var(--cream); }
.doc__body h1,
.doc__body h2 {
  margin-top: clamp(32px, 4vw, 56px);
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.03em;
}
.doc__body h3,
.doc__body h4 { margin-top: clamp(24px, 3vw, 36px); font-size: clamp(17px, 1.8vw, 21px); }
.doc__body > h1:first-child,
.doc__body > h2:first-child { margin-top: 0; }
.doc__body ul, .doc__body ol { margin: 1em 0; padding-left: 22px; }
.doc__body li + li { margin-top: .5em; }
.doc__body a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.doc__body a:hover { color: var(--red); }
.doc__body strong { color: var(--cream); font-weight: 600; }
.doc__body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.doc__body th, .doc__body td { padding: 10px 12px; border: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.doc__body th { color: var(--cream); font-weight: 600; }
.doc__back { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Страницы поводов (template-povod.php) ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 3vw, 36px); font-size: 14px; color: var(--mute); }
.crumbs a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--cream); }
.crumbs [aria-current] { color: var(--cream); }
.povod-hero { padding-top: clamp(28px, 4vw, 56px); }
.povod-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.povod-hero__in--solo { grid-template-columns: minmax(0, 1fr); }
.povod-hero__in .lead { max-width: 52ch; }
.povod-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.povod-hero__media { border-radius: 24px; overflow: hidden; border: 1px solid var(--line-soft); aspect-ratio: 4 / 3; }
.povod-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Текст повода: заголовок раздела слева, текст справа, как в райдере.
   Вступление и галерея — на всю ширину, ход вечера — сет-листом. */
.povod__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.povod__text > * { grid-column: 2; max-width: 62ch; }
.povod__text > p:first-child {
  grid-column: 1 / -1; max-width: 38ch; margin-top: 0;
  font-family: var(--display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(18px, 2vw, 25px); line-height: 1.4; color: var(--cream);
}
.povod__text > h2 {
  grid-column: 1;
  margin-top: clamp(40px, 5vw, 72px); padding-top: 22px;
  border-top: 1px solid var(--red);
  font-size: clamp(18px, 1.7vw, 22px);
}
.povod__text > h2 + * {
  margin-top: clamp(40px, 5vw, 72px); padding-top: 22px;
  border-top: 1px solid var(--line);
}
.povod__text > h2:has(+ .povod-steps) { grid-column: 1 / -1; }
.povod__text > h2 + .povod-steps { border-top: 0; }

.povod__text > .povod-steps {
  grid-column: 1 / -1; max-width: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(28px, 4vw, 48px) 0 0; padding: 0;
  list-style: none; counter-reset: step;
}
.povod__text .povod-steps li {
  position: relative; margin: 0;
  padding-top: clamp(68px, 6vw, 84px);
  counter-increment: step;
  font-size: 15px; line-height: 1.6;
}
.povod-steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 8px;
  font-family: var(--script); font-size: clamp(58px, 5.4vw, 74px); line-height: 1;
  color: var(--red); transform: rotate(-8deg); transform-origin: left bottom;
}
.povod-steps li::after {
  content: ""; position: absolute;
  top: clamp(32px, 2.9vw, 40px); left: clamp(44px, 4vw, 54px); right: calc(-1 * clamp(20px, 3vw, 40px) + 12px);
  height: 1px; background: var(--line);
}
.povod-steps li:last-child::after { right: 25%; background: linear-gradient(90deg, var(--line), transparent); }
.povod-steps strong {
  display: block; margin-bottom: 8px;
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.25;
}

/* Карточки разделов. Если карточек без брони нечётное число, первая
   встаёт на всю ширину, чтобы в сетке не оставалась дыра. */
.povod__text > .povod-cards {
  grid-column: 1 / -1; max-width: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(40px, 5vw, 72px);
}
.povod-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line-soft); border-radius: 20px;
  background: linear-gradient(160deg, var(--panel) 0%, #120709 100%);
}
.povod-card > h2 {
  position: relative; margin: 0; padding-top: 22px;
  font-size: clamp(18px, 1.6vw, 21px);
}
.povod-card > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 32px; height: 2px; background: var(--red);
}
.povod-card > p { margin: 0; max-width: 60ch; }
.povod-card > p + p { margin-top: .4em; }

.povod-card:first-child:nth-last-child(2n) {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(28px, 4vw, 64px); align-items: start;
}
.povod-card:first-child:nth-last-child(2n) > p { grid-column: 2; }

.povod-card--cta {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 4vw, 64px); align-items: center;
  background: var(--red); border-color: var(--red);
  color: rgba(255, 255, 255, .88);
}
.povod-card--cta > h2 { grid-column: 1; color: #fff; }
.povod-card--cta > h2::before { background: var(--cream); }
.povod-card--cta > p { grid-column: 1; }
.povod-card--cta .povod-card__btn {
  grid-column: 2; grid-row: 1 / span 3;
  background: var(--cream); color: var(--ink); text-decoration: none;
  box-shadow: 0 16px 40px rgba(10, 8, 9, .25);
}
.povod-card--cta .povod-card__btn:hover { background: var(--ink); color: var(--cream); }

@media (max-width: 860px) {
  .povod__text { display: block; }
  .povod__text > p:first-child { max-width: none; font-family: var(--body); font-weight: 500; font-size: 19px; letter-spacing: 0; line-height: 1.55; }
  .povod__text > h2 + * { border-top: 0; padding-top: 0; margin-top: 1em; }
  .povod__text > h2 { padding-top: 18px; }
  .povod__text > .povod-steps { grid-auto-flow: row; gap: 0; }
  .povod__text .povod-steps li { padding: 0 0 26px 64px; min-height: 64px; }
  .povod__text > .povod-cards { grid-template-columns: minmax(0, 1fr); }
  .povod-card:first-child:nth-last-child(2n),
  .povod-card--cta { display: flex; align-items: stretch; }
  .povod-card--cta .povod-card__btn { align-self: flex-start; margin-top: 8px; }
  .povod-steps li::before { font-size: 56px; top: -6px; left: 4px; }
  .povod-steps li::after { top: 58px; bottom: 6px; left: 22px; right: auto; width: 1px; height: auto; }
  .povod-steps li:last-child::after { display: none; }
}
.povod__text > .wp-block-gallery { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(24px, 3vw, 40px) 0; padding: 0; }
/* !important — перебиваем стили галереи из ядра WordPress (flex и ширины колонок) */
.povod__text > .wp-block-gallery { display: grid !important; }
.povod__text .wp-block-gallery figure.wp-block-image { width: auto !important; margin: 0 !important; flex: none !important; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.povod__text .wp-block-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 700px) { .povod__text > .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.povod-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.6vw, 32px); }
@media (max-width: 860px) {
  .povod-hero__in { grid-template-columns: minmax(0, 1fr); }
  .povod-hero__media { order: -1; aspect-ratio: 4 / 3; }
}

/* Внутренние страницы: та же шапка, что на главной, только в потоке
   страницы, а не поверх героя. При прокрутке прилипает так же. */
.head--static { position: relative; }
.head--static.is-stuck { position: fixed; }