/**
 * Студия театра и кино «Компот» - единый стиль публичного сайта
 * Цвета: #C41E3A, #9a1830. Шрифт: Onest. Адаптивность и анимации.
 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --kompot-red: #c41e3a;
  --kompot-red-dark: #9a1830;
  --kompot-red-light: #e02545;
  --kompot-red-soft: rgba(196, 30, 58, 0.08);
  --kompot-green: #2e7d32;
  --kompot-white: #fff;
  --kompot-bg: #fafafa;
  --kompot-bg-alt: #f0f0f0;
  --kompot-dark: #1a1a1a;
  --kompot-gray: #555;
  --kompot-gray-light: #888;
  --kompot-border: rgba(0, 0, 0, 0.08);
  --font-sans: "Onest", "Segoe UI", system-ui, sans-serif;
  --container: min(1200px, 100% - 2rem);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 32px rgba(196, 30, 58, 0.12);
  --shadow-btn: 0 6px 20px rgba(196, 30, 58, 0.35);
  --glow-red: 0 0 20px rgba(196, 30, 58, 0.4), 0 0 40px rgba(196, 30, 58, 0.2);
  --glow-red-strong: 0 0 24px rgba(196, 30, 58, 0.5),
    0 0 48px rgba(196, 30, 58, 0.25);
  --transition: 0.25s ease;
  --transition-fast: 0.2s ease;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0.01s;
    --transition-fast: 0.01s;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Якоря: скролл с учётом фиксированного хедера */
#about,
#achievements,
#films,
#projects,
#reviews,
#team,
#contacts {
  scroll-margin-top: 5.5rem;
}

body {
  font-family: var(--font-sans);
  color: var(--kompot-dark);
  background: var(--kompot-white);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-wrap {
  position: relative;
  flex: 1 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .page-wrap > main {
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
}

/* Плавное вращение иконок (ease-in-out) */
@keyframes fa-spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.fa-spin-slow {
  animation: fa-spin-slow 6s ease-in-out infinite;
}

/* Фоновые кино-иконки по секциям: серая секция → белые иконки, белая → серые (не чёрные). Без вращения, с наклоном -25…+25° */
.section,
.hero {
  position: relative;
}
/* Фоновые иконки — только фон, не перекрывают контент и не перехватывают клики */
.section-deco {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.section > .wrap,
.news-page-main > .wrap,
.blog-page-main > .wrap,
.hot-page-main > .wrap,
.media-page-main > .wrap,
.post-page-main > .wrap {
  position: relative;
  z-index: 1;
}
.error-page > *:not(.section-deco) {
  position: relative;
  z-index: 1;
}
body.privacy-page main > .wrap {
  position: relative;
  z-index: 1;
}
.section-deco .bg-cinema-icon {
  position: absolute;
  font-size: 2.35rem;
}
.section-deco--light .bg-cinema-icon {
  color: #fff;
  opacity: 0.83;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.section-deco--dark .bg-cinema-icon {
  color: rgba(0, 0, 0, 0.07);
  opacity: 1;
}
.bg-rot--25 {
  transform: rotate(-25deg);
}
.bg-rot--20 {
  transform: rotate(-20deg);
}
.bg-rot--15 {
  transform: rotate(-15deg);
}
.bg-rot--10 {
  transform: rotate(-10deg);
}
.bg-rot--5 {
  transform: rotate(-5deg);
}
.bg-rot-0 {
  transform: rotate(0deg);
}
.bg-rot-5 {
  transform: rotate(5deg);
}
.bg-rot-10 {
  transform: rotate(10deg);
}
.bg-rot-15 {
  transform: rotate(15deg);
}
.bg-rot-20 {
  transform: rotate(20deg);
}
.bg-rot-25 {
  transform: rotate(25deg);
}
@media (max-width: 768px) {
  .section-deco .bg-cinema-icon {
    font-size: 1.8rem;
  }
  .section-deco--light .bg-cinema-icon {
    opacity: 0.75;
  }
}
@media print {
  .section-deco {
    display: none !important;
  }
  .section-alt::after,
  .section--dark::after {
    display: none !important;
  }
}
.news-page-main,
.blog-page-main,
.hot-page-main,
.media-page-main,
.post-page-main {
  position: relative;
}
body.privacy-page main,
main.error-page {
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
ul {
  list-style: none;
}

/* ========== Header ========== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: box-shadow var(--transition), padding-top 0.28s ease;
}
.site-header.scrolled {
  padding-top: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 4px 24px rgba(0, 0, 0, 0.07);
}

.site-header-subpage {
  background: #f5e4fb;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none;
  height: 118px;
  padding: 0;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  overflow: hidden;
}

.site-header-subpage.scrolled {
  height: 128px;
}

.header-inner-subpage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 118px;
  padding: 0 1rem;
}

.site-header-subpage .header-brand-group {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  justify-self: start;
}

.site-header-subpage .nav-desktop {
  position: static;
  left: auto;
  transform: none;
  justify-self: center;
  align-items: center;
  align-self: center;
  gap: 20px;
}

.site-header-subpage .logo-link {
  padding: 0;
}

.site-header-subpage .site-logo {
  height: 76px;
  margin-top: 0;
  margin-bottom: 0;
}

.site-header-subpage .nav-desktop a {
  font-family: "Montserrat", "Onest", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
  color: #494949;
  padding: 0;
  border-radius: 0;
}
.site-header-subpage .nav-desktop a:hover {
  color: var(--kompot-red);
}
.site-header-subpage .nav-desktop a.nav-current {
  font-weight: 700;
  color: #181818;
}

.site-header-subpage .header-side-meta {
  align-items: center;
  align-self: center;
  justify-self: end;
}

.site-header-subpage .header-phone {
  margin-top: 0;
}

.header-side-meta {
  display: flex;
  align-items: flex-start;
  gap: 19px;
  flex-shrink: 0;
}

.header-award-badge {
  width: 136.74px;
  height: 61.07px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.header-award-badge-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.header-side-meta .header-cta-outline {
  margin-top: 0;
  margin-left: 0.1rem;
}

@media (max-width: 1200px) {
  .header-award-badge {
    width: 120px;
    height: auto;
  }
}
@media (max-width: 1024px) {
  .header-award-badge {
    width: 104px;
    height: auto;
  }
}
@media (max-width: 1210px) {
  .header-award-badge {
    width: 80px;
    height: 36px;
  }
}

.header-phone {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 171px;
  height: 16px;
  flex-shrink: 0;
  margin: 15px 0 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  color: #494949;
  font-family: "Montserrat", "Onest", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  background: transparent;
}
.header-phone:hover {
  color: #494949;
  opacity: 0.82;
}
.header-phone:focus-visible {
  outline: 2px solid #60b34a;
  outline-offset: 2px;
}
.site-header-subpage .header-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 188px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin-top: 0;
  border: none;
  border-radius: 10px;
  background: #eb2026;
  color: #ffffff !important;
  font-family: "Montserrat", "Onest", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  box-shadow: none;
}
.site-header-subpage .header-cta-outline:hover {
  background: #60b34a;
  color: #ffffff !important;
}
.site-header-subpage .header-cta-outline:focus-visible {
  outline: 2px solid #60b34a;
  outline-offset: 2px;
}

.header-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 5px;
}

.site-logo {
  height: 64px;
  width: 96px;
  object-fit: contain;
}

.nav-desktop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding-top: 15px;
  box-sizing: border-box;
}
.nav-desktop a {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 1rem;
  color: var(--kompot-gray);
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.nav-desktop a:hover {
  color: var(--kompot-red);
}
.nav-desktop a.nav-current {
  color: var(--kompot-dark);
  font-weight: 600;
}
.nav-desktop a:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.header-cta-outline {
  padding: 0.5rem 1.15rem;
  background: transparent;
  color: var(--kompot-red) !important;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid var(--kompot-red);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-cta-outline:hover {
  background: var(--kompot-red-soft);
}
.header-cta-outline:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}
.header-cta {
  padding: 0.5rem 1.15rem;
  background: var(--kompot-red);
  color: var(--kompot-white) !important;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
}
.header-cta:hover {
  background: var(--kompot-red-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn), var(--glow-red);
}
.header-cta:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: #eb2026;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background var(--transition-fast);
}
.menu-toggle:hover {
  background: #d01c21;
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}
.menu-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform var(--transition);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Мобильное меню — «верхнее меню моб» */
html:has(nav.nav-mobile.active),
body:has(nav.nav-mobile.active),
html.nav-mobile-open,
body.nav-mobile-open {
  overflow: hidden;
  height: 100%;
}
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background: #e2eaf0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  box-sizing: border-box;
  animation: navMobileIn 0.3s var(--ease-out);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  touch-action: pan-y;
}
@keyframes navMobileIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.nav-mobile.active {
  display: flex;
}
.nav-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 20px 0;
  box-sizing: border-box;
  gap: 12px;
}
.nav-mobile-brand {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.nav-mobile-logo-link {
  display: flex;
  line-height: 0;
  flex: 0 0 auto;
}
.nav-mobile-logo-img {
  height: 40px;
  width: auto;
  max-width: 58px;
  object-fit: contain;
  display: block;
}
/* отступ от лого 7px */
.nav-mobile-award {
  flex: 0 0 auto;
  display: block;
  width: 80px;
  height: 36px;
  margin: 0 0 0 7px;
  object-fit: contain;
  object-position: left center;
}
.nav-mobile-close {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #eb2026;
  background-image: url("/imgs/close-button.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: background-color var(--transition-fast);
  z-index: 1;
}
.nav-mobile-close:hover {
  background-color: var(--kompot-red-dark);
  background-image: url("/imgs/close-button.png");
}
.nav-mobile-close:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* От низа строки лого до первого пункта — 56px (макет 745:1084) */
  padding: 56px 20px 16px;
  gap: 27px;
  flex: 1 1 auto;
  min-height: 0;
}
.nav-mobile-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  font-family: Montserrat, var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: #494949;
  text-align: center;
  text-decoration: none;
}
.nav-mobile-links a:hover {
  color: var(--kompot-red);
}
.nav-mobile-links a.nav-current {
  font-weight: 600;
  color: #1a1a1a;
}
.nav-mobile-footer {
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px max(20px, env(safe-area-inset-bottom, 0));
  gap: 18px;
  box-sizing: border-box;
}
.nav-mobile-phone {
  display: block;
  font-family: Montserrat, var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: 0;
  color: #494949;
  text-align: center;
  text-decoration: none;
  max-width: 100%;
}
.nav-mobile-phone:hover {
  color: var(--kompot-red);
}
.nav-mobile-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  min-height: 44px;
  padding: 0 18px;
  box-sizing: border-box;
  background-color: #eb2026;
  background-image: none;
  color: #fff !important;
  font-family: Montserrat, var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.22;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.nav-mobile-cta-primary:hover,
.nav-mobile-cta-primary:focus-visible {
  background-color: #60b34a !important;
  background-image: none !important;
  color: #fff !important;
}
/* Старые классы — встречаются в кэше / старых HTML */
.nav-mobile-cta-outline {
  margin-top: 1rem;
  background: transparent !important;
  color: var(--kompot-red) !important;
  border: 2px solid var(--kompot-red) !important;
  border-radius: var(--radius-sm);
}
.nav-mobile-cta-outline:hover {
  background: var(--kompot-red-soft) !important;
  color: var(--kompot-red) !important;
}
.nav-mobile-cta {
  margin-top: 0.75rem;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--kompot-red);
  color: var(--kompot-white) !important;
  border-radius: var(--radius-sm);
  border: none;
}
.nav-mobile-cta:hover {
  background: var(--kompot-red-dark);
  color: var(--kompot-white) !important;
}

@media (max-width: 1210px) {
  .site-logo {
    height: 51px;
  }
  .nav-desktop {
    display: none;
  }
  .header-buttons,
  .site-header .header-side-meta {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  /* Главная: бургер справа (ниже по файлу flex-start на .header-inner иначе перебивает без .site-header) */
  body.page-home .site-header .header-inner {
    justify-content: space-between;
    align-items: center;
  }
  body.page-home .site-header .menu-toggle {
    margin-left: auto;
    flex-shrink: 0;
  }
  /* Чтобы .nav-mobile position:fixed считался относительно viewport, не создаём containing block у хедера */
  .site-header {
    backdrop-filter: none;
  }
  /* Глобальный .site-header.scrolled { padding-top: 10px } иначе даёт 69+10=79px при height:69 */
  .site-header.scrolled {
    padding-top: 0;
  }
  .header-inner {
    z-index: 0;
    position: relative;
  }
  /* Оверлей меню должен быть ВЫШЕ хедера — иначе menu-toggle (крестик) перекрывает .nav-mobile-close */
  body:has(nav.nav-mobile.active) .site-header,
  body.nav-mobile-open .site-header {
    z-index: 998;
  }
  /* В открытом меню — общий фон как у оверлея, без header-mobile.png */
  body:has(nav.nav-mobile.active) .site-header-subpage,
  body.nav-mobile-open .site-header-subpage {
    background-image: none !important;
    background-color: #e2eaf0 !important;
  }
  .nav-mobile {
    display: none;
    z-index: 1100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .nav-mobile.active {
    display: flex;
    z-index: 1100;
  }

  .site-header-subpage {
    background-color: #f5e4fb;
    background-image: url("/imgs/header-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 0;
    height: 69px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .site-header-subpage.scrolled {
    height: 69px;
    padding-top: 0;
  }
  .site-header-subpage .header-inner-subpage {
    border-radius: 0;
    padding: 0 0.58rem;
    column-gap: 10px;
    min-height: 69px;
    /* нав и .header-side-meta скрыты — в ряду только бренд и бургер */
    grid-template-columns: 1fr auto;
    align-items: center;
    background: transparent;
  }
  .site-header-subpage .header-brand-group {
    gap: 7px;
    justify-self: start;
  }
  .site-header-subpage .logo-link {
    padding: 2px 3px;
  }
  .site-header-subpage .site-logo {
    height: 42px;
  }
  .site-header-subpage .menu-toggle {
    justify-self: end;
  }
  .site-header-subpage .header-award-badge {
    width: 80px;
    height: 36px;
  }

  /* Главная ≤1210: шапка как на подстраницах (лавандовая + header-mobile.png) */
  body.page-home .site-header {
    background-color: #f5e4fb;
    background-image: url("/imgs/header-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    height: 69px;
    padding: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  body.page-home .site-header.scrolled {
    height: 69px;
    padding-top: 0;
    box-shadow: none;
    background-color: #f5e4fb;
    background-image: url("/imgs/header-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-bottom: none;
    backdrop-filter: none;
  }
  body.page-home:has(nav.nav-mobile.active) .site-header,
  body.page-home.nav-mobile-open .site-header {
    background-image: none !important;
    background-color: #e2eaf0 !important;
  }
  body.page-home .site-header .header-inner {
    min-height: 69px;
    padding-left: 0.58rem;
    padding-right: 0.58rem;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  body.page-home .site-header.scrolled .header-inner {
    min-height: 69px;
  }
  body.page-home .header-inner .logo-link {
    padding: 2px 3px;
  }
  body.page-home .header-inner .site-logo {
    height: 42px;
    width: auto;
  }
  body.page-home .header-brand-group {
    gap: 7px;
  }
  body.page-home .header-award-badge {
    width: 80px;
    height: 36px;
  }
  body.page-home .site-header:not(.scrolled) .header-inner {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Главная ≤1210: баннер без фото — фон #E2EAF0, скругление снизу 20px (важно: десктоп задаёт фон в @media min-width 1211px) */
  body.page-home .home-top-banner {
    background-color: #e2eaf0 !important;
    background-image: none !important;
    height: auto;
    min-height: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  body.page-home .hero {
    align-items: center;
    text-align: center;
    color: #494949;
    min-height: 0 !important;
    height: auto;
    padding: calc(69px + 22px + env(safe-area-inset-top, 0px)) 1rem 25px;
  }
  body.page-home .hero .hero-grain,
  body.page-home .hero .hero-vignette {
    display: none;
  }
  body.page-home .hero::after {
    display: none;
  }
  body.page-home .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: none;
    padding: 0 0.75rem;
    box-sizing: border-box;
  }
  body.page-home .hero .hero-title-home {
    margin: 0 0 16px;
    max-width: none;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    color: #494949;
  }
  body.page-home .hero .hero-lead-home {
    margin: 0 0 25px;
    max-width: none;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }
  body.page-home .hero-cta-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
  }
  body.page-home .hero-awards-img {
    display: none !important;
  }
  body.page-home .hero .btn-hero-cta--home {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    padding: 0 14px;
    margin: 0;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: #fff !important;
    background: #eb2026;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
    white-space: nowrap;
  }
  body.page-home .hero .btn-hero-cta--home:hover {
    background: #60b34a;
    color: #fff !important;
    transform: none;
    box-shadow: none;
  }
}

/* Маленькие телефоны (iPhone SE и уже) — компактнее шапка меню */
@media (max-width: 400px) {
  .nav-mobile-top {
    padding-left: 14px;
    padding-right: 14px;
  }
  .nav-mobile-links {
    padding-left: 14px;
    padding-right: 14px;
    gap: 27px;
  }
  .nav-mobile-links a {
    font-size: 18px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    line-height: 28px;
  }
  .nav-mobile-phone {
    font-size: 18px;
  }
  .nav-mobile-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Главная десктоп (≥1211): баннер с фото, прозрачная шапка, крупный герой. ≤1210 — отдельный блок выше. */
@media (min-width: 1211px) {
  /* ========== Главная: баннер + шапка без фона до скролла  ========== */
  body.page-home .home-top-banner {
    position: relative;
    height: 550px;
    box-sizing: border-box;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background: url("/imgs/banner-main-desktop.png") center / cover no-repeat
      #2a1218;
    overflow: hidden;
  }

  body.page-home .site-header {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    transition: background 0.28s ease, box-shadow 0.28s ease,
      border-bottom-color 0.28s ease, backdrop-filter 0.28s ease,
      padding-top 0.28s ease;
  }

  body.page-home .site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 4px 24px rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(12px);
  }

  /* Шапка — flex (нав 39px правее бейджа), та же ширина и отступы, что у .hero-content */
  body.page-home .header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    max-width: 1128px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 64.07px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  body.page-home .site-header:not(.scrolled) .header-inner {
    padding-top: 24px;
    padding-bottom: 0;
  }

  body.page-home .header-brand-group {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  body.page-home .header-inner .logo-link {
    padding-left: 0;
  }

  body.page-home .header-award-badge {
    width: 136.74px;
    height: 61px;
    max-width: none;
    object-fit: contain;
  }

  /* Десктопная строка меню + телефон/CTA */
  body.page-home .nav-desktop {
    position: static;
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0 0 0 39px;
    gap: 20px;
    line-height: 14px;
  }

  body.page-home .nav-desktop a {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0;
    color: #494949;
    padding: 0;
    margin: 0;
    min-height: 0;
    height: auto;
    border-radius: 0;
  }

  body.page-home .nav-desktop a:hover {
    color: var(--kompot-red);
  }

  body.page-home .nav-desktop a.nav-current {
    font-weight: 700;
    color: #181818;
  }

  body.page-home .header-side-meta {
    display: flex;
    align-items: center;
    gap: 19px;
    flex-shrink: 0;
    margin-left: auto;
  }

  body.page-home .header-side-meta .header-phone {
    margin-top: 0;
  }

  body.page-home .site-header:not(.scrolled) .header-side-meta .header-phone {
    color: #fff;
    transition: color 0.28s ease, opacity 0.2s ease;
  }

  body.page-home
    .site-header:not(.scrolled)
    .header-side-meta
    .header-phone:hover {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
  }

  body.page-home .site-header.scrolled .header-side-meta .header-phone {
    color: #494949;
  }

  body.page-home .site-header.scrolled .header-side-meta .header-phone:hover {
    color: #494949;
    opacity: 0.82;
  }

  body.page-home .header-side-meta .header-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 188px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 10px;
    background: #eb2026;
    color: #fff !important;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    box-shadow: none;
    transition: background var(--transition-fast), color var(--transition-fast),
      transform var(--transition-fast);
  }

  body.page-home .header-side-meta .header-cta-outline:hover {
    background: #60b34a;
    color: #fff !important;
  }

  body.page-home .header-side-meta .header-cta-outline:focus-visible {
    outline: 2px solid #60b34a;
    outline-offset: 2px;
  }

  body.page-home .hero {
    background: none;
    animation: none;
    box-sizing: border-box;
    height: 100%;
    min-height: 0 !important;
    padding: 162px 0 82px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    color: #494949;
  }

  body.page-home .hero::before {
    display: none;
  }

  body.page-home .hero::after {
    background: radial-gradient(
      ellipse 90% 80% at 50% 45%,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.5) 100%
    );
  }

  body.page-home .hero .hero-grain {
    opacity: 0.22;
  }

  body.page-home .hero .hero-vignette {
    opacity: 0.85;
  }

  /* Герой главной: макет (Montserrat, #494949, CTA + awards.png) */
  body.page-home .hero-content {
    max-width: 1128px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  body.page-home .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 0.6s var(--ease-out) 0.36s forwards;
  }

  body.page-home .hero-awards-img {
    display: block;
    width: 392px;
    height: 74.9px;
    margin: 0 0 0 58px;
    object-fit: contain;
    flex-shrink: 0;
  }

  body.page-home .hero .btn-hero-cta--home {
    box-sizing: border-box;
    width: 292px;
    height: 44px;
    min-height: 44px;
    padding: 0 14px !important;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    color: #fff !important;
    background: #eb2026;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    transition: background var(--transition), transform var(--transition),
      box-shadow var(--transition);
    white-space: nowrap;
  }

  body.page-home .hero .btn-hero-cta--home:hover {
    background: #60b34a;
    transform: translateY(-1px);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #fff !important;
  }

  body.page-home .hero .btn-hero-cta--home:focus-visible {
    outline: 2px solid var(--kompot-red);
    outline-offset: 3px;
  }

  body.page-home .hero .hero-title-home {
    margin: 0 0 20px;
    max-width: 555px;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 52px;
    line-height: 64px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #494949;
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 0.6s var(--ease-out) 0.1s forwards;
  }

  body.page-home .hero .hero-lead-home {
    margin: 0 0 26px;
    max-width: 28rem;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
    color: #494949;
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 0.6s var(--ease-out) 0.22s forwards;
  }

  body.page-home .hero .hero-cta-row .btn-hero-cta--home {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Фоновые иллюстрации секций (desktop / mobile из макета) */
body.page-home #about.section-alt {
  background-image: url("/imgs/studio-desktop-main.png");
  /* 403×409 — декоративная иллюстрация, не full-bleed */
  background-size: min(403px, 52vw) auto;
  background-position: right 4% center;
  background-repeat: no-repeat;
  background-color: var(--section-alt-bg);
}

body.page-home #about.section-alt::before {
  opacity: 0.12;
}

body.page-home #about .section-deco--light {
  opacity: 0.32;
}

/* Короткая форма записи: как на новостях/медиа, с вертикальными отступами секции */
body.page-home .hot-cta.section.section-alt {
  padding: 3.5rem 1.5rem;
  box-sizing: border-box;
}

/* Панель формы — та же ширина контента, что у проектов/команды (1130), не 1200 из .wrap */
body.page-home #contacts > .wrap {
  max-width: 1130px;
}

@media (max-width: 768px) {
  body.page-home #contacts.hot-cta.section.section-alt {
    padding-top: 32px;
  }

  body.page-home #about.section-alt {
    background-image: url("/imgs/studio-mobile-main.png");
    /* 167×169 */
    background-size: min(167px, 46vw) auto;
    background-position: right 2% 88%;
  }
}

/* ========== Hero + entrance animation (кинематографичный блок) ========== */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: heroGradientShift 12s ease-in-out infinite;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}
@keyframes heroGradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
/* Спотлайт по центру */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 55%
  );
  pointer-events: none;
  z-index: 0;
}
/* Волнистые линии под углом 35° */
.hero::before {
  content: "";
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M-15,15 Q15,0 50,15 T115,15' stroke='rgba(255,255,255,0.12)' stroke-width='2' fill='none'/%3E%3Cpath d='M-15,40 Q15,25 50,40 T115,40' stroke='rgba(255,255,255,0.12)' stroke-width='2' fill='none'/%3E%3Cpath d='M-15,65 Q15,50 50,65 T115,65' stroke='rgba(255,255,255,0.12)' stroke-width='2' fill='none'/%3E%3Cpath d='M-15,90 Q15,75 50,90 T115,90' stroke='rgba(255,255,255,0.12)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 100px 100px;
  transform: rotate(35deg);
  pointer-events: none;
  z-index: 0;
}
/* Зерно плёнки поверх hero */
.hero .hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}
/* Виньетка по краям */
.hero .hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 560px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--kompot-white);
}
.hero-badge-icon {
  display: inline-block;
  font-size: 1.35rem;
  margin-right: 0.35rem;
}
@keyframes hero-badge-sway {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
.hero-badge-sway {
  animation: hero-badge-sway 2.8s ease-in-out infinite;
  vertical-align: middle;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge-sway {
    animation: none;
  }
}

.hero-logo {
  width: 250px;
  max-width: 250px;
  height: 160px;
  margin: 0 auto 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.6s var(--ease-out) 0.1s forwards;
}
.hero h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.6s var(--ease-out) 0.2s forwards;
}
.hero p {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.6s var(--ease-out) forwards;
  animation-fill-mode: forwards;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}
.hero .hero-badge {
  margin-bottom: 1rem;
  animation-delay: 0.15s;
}
.hero .hero-sub {
  animation-delay: 0.35s;
}
.hero .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.6s var(--ease-out) 0.4s forwards;
  display: inline-block;
  padding: 0.9rem 2rem;
  background: var(--kompot-white);
  color: var(--kompot-red);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 44px;
  border: none;
  cursor: pointer;
  font: inherit;
}
.hero .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 28px rgba(255, 255, 255, 0.25);
}
.hero .btn:focus-visible {
  outline: 2px solid var(--kompot-white);
  outline-offset: 4px;
}
.hero-sub {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.hero-trust {
  font-size: 0.9rem;
  opacity: 0.92;
  margin: -0.5rem 0 1.25rem 0;
  font-weight: 500;
}
.btn-hero-cta {
  font-size: 1.1rem !important;
  padding: 1.05rem 2.1rem !important;
}

/* CTA-полоска после секций (сбор заявок) */
.cta-strip {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(
    135deg,
    var(--kompot-red-soft) 0%,
    rgba(196, 30, 58, 0.08) 100%
  );
  border: 2px solid var(--kompot-red);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 4px 20px rgba(196, 30, 58, 0.1);
}
.cta-strip-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kompot-dark);
  margin: 0 0 1rem 0;
}
.btn-cta-strip {
  display: inline-block;
  padding: 0.95rem 2.15rem;
  background: var(--kompot-red);
  color: var(--kompot-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-cta-strip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn), var(--glow-red);
  color: var(--kompot-white);
}
.footer-cta {
  font-weight: 600;
  color: var(--kompot-red) !important;
}
.footer-cta:hover {
  text-decoration: underline;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero {
    background-size: 100% 100%;
    animation: none;
  }
  .hero-logo,
  .hero h1,
  .hero p,
  .hero .btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
  body.page-home .hero .hero-title-home,
  body.page-home .hero .hero-lead-home,
  body.page-home .hero-cta-row {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ========== Sections + scroll reveal ========== */
/* Фон секции всегда виден; анимация появления только у контента (карточки и т.д.) */
.section {
  padding: 4rem 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .card,
  .achievement-card,
  .cinema-film-card,
  .home-project-card,
  .home-review-card,
  .home-team-card,
  .team-card,
  .news-card-link,
  .media-article-card,
  .media-clip-card,
  .hot-card,
  .post-other-card,
  .hot-hero,
  .post-article,
  .post-cta,
  .hot-cta,
  .error-page h1,
  .error-page p,
  .error-page .btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card.reveal,
  .achievement-card.reveal,
  .cinema-film-card.reveal,
  .home-project-card.reveal,
  .home-review-card.reveal,
  .home-team-card.reveal,
  .team-card.reveal,
  .news-card-link.reveal,
  .media-article-card.reveal,
  .media-clip-card.reveal,
  .hot-card.reveal,
  .post-other-card.reveal {
    transform: none;
  }
}
/* Цвета переходов между секциями (для градиентов) */
:root {
  --section-alt-bg: #fafafa;
  --section-dark-start: #2d2d2d;
  --section-dark-mid: #363636;
  --section-dark-end: #2f2f2f;
  --section-gradient-height: 19px;
}

.section-alt {
  background: var(--section-alt-bg);
  position: relative;
}
.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: 0.5;
}
/* Градиентный переход: светлая секция вливается в тёмную */
.section-alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--section-gradient-height);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(45, 45, 45, 0.04) 25%,
    rgba(45, 45, 45, 0.12) 50%,
    rgba(45, 45, 45, 0.35) 75%,
    var(--section-dark-start) 100%
  );
}
/* Перед футером градиент не показываем */
main > section.section-alt:last-child::after,
.news-page-main.section-alt::after,
.blog-page-main.section-alt::after,
.media-page-main.section-alt::after,
.hot-page-main.section-alt::after,
.post-page-main.section-alt::after {
  display: none;
}
.section-alt > .wrap {
  position: relative;
  z-index: 1;
}

/* Тёмные кинозалы: премиум-оформление секций */
.section--dark {
  background: linear-gradient(
    180deg,
    var(--section-dark-start) 0%,
    var(--section-dark-mid) 50%,
    var(--section-dark-end) 100%
  );
  color: var(--kompot-white);
  position: relative;
}
/* Градиентный переход: тёмная секция вливается в светлую */
.section--dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--section-gradient-height);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(250, 250, 250, 0.03) 20%,
    rgba(250, 250, 250, 0.1) 45%,
    rgba(250, 250, 250, 0.35) 70%,
    var(--section-alt-bg) 100%
  );
}
.section--dark .section-title {
  color: var(--kompot-white);
  text-shadow: 0 0 30px rgba(196, 30, 58, 0.35);
}
.section--dark .section-title-cinema::after {
  box-shadow: 0 0 12px rgba(196, 30, 58, 0.6);
}
.section--dark .section-title-fa-icon {
  color: var(--kompot-red-light);
  filter: drop-shadow(0 0 8px rgba(196, 30, 58, 0.5));
}
.section--dark .section-desc {
  color: rgba(255, 255, 255, 0.8);
}
/* Красное пятно-свечение сзади контента — мягкие круги */
.section--dark .section-deco::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
      circle at 40% 30%,
      rgba(196, 30, 58, 0.06) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 65% 65%,
      rgba(196, 30, 58, 0.04) 0%,
      transparent 32%
    ),
    radial-gradient(
      circle at 25% 70%,
      rgba(196, 30, 58, 0.03) 0%,
      transparent 30%
    );
  pointer-events: none;
  filter: blur(60px);
}
.section--dark .section-deco--dark .bg-cinema-icon {
  color: rgba(255, 255, 255, 0.06);
}
.section--dark .card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.section--dark .card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(196, 30, 58, 0.35);
  box-shadow: var(--glow-red), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.section--dark .card-body h3 {
  color: var(--kompot-white);
}
.section--dark .card-body p {
  color: rgba(255, 255, 255, 0.75);
}
.section--dark .card-body .btn-link {
  color: var(--kompot-red-light);
}
.section--dark .team-card h4 {
  color: var(--kompot-white);
}
.section--dark .team-card p {
  color: rgba(255, 255, 255, 0.75);
}
.section--dark .team-card .avatar {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.section--dark .team-card:hover .avatar {
  border-color: rgba(196, 30, 58, 0.5);
  box-shadow: var(--glow-red);
}

/* Адаптивная высота градиентных переходов */
@media (max-width: 768px) {
  :root {
    --section-gradient-height: 24px;
  }
}
@media (max-width: 480px) {
  :root {
    --section-gradient-height: 18px;
  }
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
}

.section-title {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--kompot-dark);
  letter-spacing: -0.02em;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.section-title span {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.35rem;
  width: 3rem;
  height: 4px;
  background: var(--kompot-red);
  border-radius: 2px;
}
/* Линия центрирована относительно иконки и текста */
.section-title-cinema {
  position: relative;
}
.section-title-cinema::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.35rem;
  width: 5rem;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kompot-red), var(--kompot-red-dark));
}
.section-title.section-title--clean::after {
  content: none;
  display: none;
}
.section-title-fa-icon {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
  font-size: 1.4rem;
  color: var(--kompot-red);
}
/* Лёгкое покачивание иконки у «Камера, мотор, начали!» */
@keyframes section-title-icon-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
.section-title-icon-sway {
  animation: section-title-icon-sway 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-title-icon-sway {
    animation: none;
  }
}
.page-title-icon {
  display: inline-block;
  margin-right: 0.85rem;
  vertical-align: middle;
  font-size: 1.7rem;
  color: var(--kompot-red);
}
.page-title-icon-sway {
  animation: hero-badge-sway 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-title-icon-sway {
    animation: none;
  }
}
.section-desc {
  color: var(--kompot-gray);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Разное оформление секций  */
/* Достижения (главная) */
.achievements-section {
  background: #fff;
  color: var(--kompot-dark);
  position: relative;
  padding-top: 73px;
  padding-bottom: 60px;
}

.achievements-head-text {
  flex: 1 1 240px;
  min-width: 0;
}

@media (max-width: 1210px) {
  .achievements-section {
    padding: 22px 20px 11px;
  }
  .achievements-subtitle {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 22px;
    color: #494949;
  }
  .achievements-head-text {
    flex: unset;
  }
}

/* Свой max-width только для «Достижений», без правки глобального .wrap */
.wrap.achievements-wrap {
  max-width: 1130px;
  box-sizing: border-box;
}

.achievements-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 147px;
  margin-bottom: 63px;
}

.achievements-badge {
  flex: 0 0 auto;
  margin: 0;
  align-self: center;
  padding-right: 28px;
}

.achievements-badge-img {
  display: block;
  width: 209px;
  height: 94px;
}

@media (max-width: 1210px) {
  body.page-home .achievements-badge-img--home {
    width: 144px;
    height: 64px;
    max-width: 144px;
    object-fit: contain;
  }
}

.achievements-head-text .achievements-title {
  margin-bottom: 8px;
  justify-content: flex-start;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: 0;
  color: #494949;
}

.achievements-subtitle {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: 36rem;
  text-align: left;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #494949;
}

.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.achievement-card {
  box-sizing: border-box;
  /* 1130px wrap − 4×268 − 3×20 = −2px: фиксированный basis даёт 3+1; делим ширину ряда */
  flex: 0 1 calc((100% - 3 * 20px) / 4);
  max-width: 268px;
  width: auto;
  min-width: 0;
  align-self: stretch;
  min-height: 419px;
  height: auto;
  margin: 0;
  padding: 1rem 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #750000;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
    box-shadow var(--transition);
}

.achievement-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.achievement-card-visual {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  background: #d4a253;
  margin-top: 40px;
}

.achievement-card-img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.achievement-card-title {
  margin: 0;
  padding: 0 0.35rem;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

body.page-home #achievements .more-cards-wrap--blog,
body.page-home #films .more-cards-wrap--blog,
body.page-home #reviews .more-cards-wrap--blog {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1210px) {
  body.page-home #achievements .more-cards-wrap--blog {
    margin-top: 32px;
    margin-bottom: 0;
  }
  body.page-home #films .more-cards-wrap--blog {
    margin-top: 30px;
    margin-bottom: 25px;
  }
}

body.page-home #achievements .more-cards-wrap--blog .btn-more-cards,
body.page-home #films .more-cards-wrap--blog .btn-more-cards,
body.page-home #reviews .more-cards-wrap--blog .btn-more-cards {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 22px;
  height: auto;
  padding: 0.35rem 0.5rem;
  background: transparent;
  color: #494949;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: Montserrat, var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

body.page-home #achievements .more-cards-wrap--blog .btn-more-cards-label,
body.page-home #films .more-cards-wrap--blog .btn-more-cards-label,
body.page-home #reviews .more-cards-wrap--blog .btn-more-cards-label,
body.page-home #team .more-cards-wrap--blog .btn-more-cards-label {
  line-height: 17px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-home #achievements .more-cards-wrap--blog .btn-more-cards:hover,
body.page-home #films .more-cards-wrap--blog .btn-more-cards:hover,
body.page-home #reviews .more-cards-wrap--blog .btn-more-cards:hover,
body.page-home #team .more-cards-wrap--blog .btn-more-cards:hover {
  color: #494949;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.page-home
  #achievements
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label,
body.page-home
  #films
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label,
body.page-home
  #reviews
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label,
body.page-home
  #team
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label {
  text-decoration: none;
}

body.page-home
  #achievements
  .more-cards-wrap--blog
  .btn-more-cards:focus-visible,
body.page-home #films .more-cards-wrap--blog .btn-more-cards:focus-visible,
body.page-home #reviews .more-cards-wrap--blog .btn-more-cards:focus-visible,
body.page-home #team .more-cards-wrap--blog .btn-more-cards:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 1180px) and (min-width: 769px) {
  .achievement-card {
    flex: 0 1 calc((100% - 1 * 20px) / 2);
    max-width: 268px;
  }
}

/* Шапка и бейдж как на телефоне — до 877px  */
@media (max-width: 877px) {
  .achievements-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    margin-bottom: 22px;
  }

  .achievements-badge {
    order: -1;
    padding-right: 0;
    align-self: center;
  }

  .achievements-badge-img {
    max-width: min(180px, 70vw);
  }

  .achievements-head-text .achievements-title {
    justify-content: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 6px;
  }

  .achievements-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .achievements-grid {
    gap: 12px;
  }

  .achievement-card {
    flex: 0 1 134px;
    max-width: min(134px, calc(50% - 6px));
    height: 255px;
    min-height: 255px;
    padding: 0.5rem 0.35rem 0.65rem;
  }

  .achievement-card-visual {
    width: 88px;
    height: 88px;
    margin-bottom: 0.4rem;
  }

  .achievement-card-title {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
  }
}

/* Проекты (главная): секция #projects, данные из админки projects; медиа 366×300 / 300×200 */
.home-projects-section {
  background: #fff;
  color: var(--kompot-dark);
  position: relative;
  padding-top: 69px;
  padding-bottom: 49px;
}

.wrap.home-projects-wrap {
  max-width: 1130px;
  box-sizing: border-box;
}

.home-projects-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-projects-head-text {
  min-width: 0;
}

.home-projects-head-text .home-projects-title {
  margin-bottom: 18px;
  justify-content: flex-start;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: 0;
  color: #494949;
}

.home-projects-subtitle {
  margin-bottom: 59px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #494949;
}

/* Декор под карточками: как .home-cinema-feature / .home-cinema-illus */
.home-projects-feature {
  position: relative;
  padding-bottom: 49px;
}

.home-projects-illus {
  margin: 0;
}

.home-projects-illus img {
  display: block;
  width: 351px;
  height: 278px;
}

.home-projects-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

@media (min-width: 800px) {
  .home-projects-illus {
    position: absolute;
    right: 0;
    top: -233px;
    z-index: 0;
    pointer-events: none;
  }
}

.home-project-card {
  width: 363px;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #acafaf;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
    box-shadow var(--transition);
}

.home-project-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.home-project-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.home-project-media {
  position: relative;
  width: 366px;
  max-width: 100%;
  height: 300px;
  margin: 0 auto;
  background: #f5f5f5;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.home-project-media iframe,
.home-project-media video,
.home-project-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.home-project-media iframe {
  object-fit: contain;
  background: #0a0a0a;
}

.home-project-video {
  object-fit: contain;
  background: #000;
}

.home-project-card-body {
  padding-top: 33px;
  padding-left: 25px;
  padding-right: 15px;
  padding-bottom: 49px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
}

.home-project-card-title {
  margin: 0 0 16px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  color: #494949;
}

.home-project-card-desc {
  margin: 0;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  color: #494949;
}

.home-project-card-more {
  margin: 8px 0 0;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--primary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
}

.home-project-card-more::after {
  content: "➜";
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  transform: translateY(-1px);
}

.home-project-card {
  cursor: pointer;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 16px;
}

.project-modal.active {
  opacity: 1;
  visibility: visible;
}

.project-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.project-modal-content {
  position: relative;
  background: var(--kompot-white);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 0 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.project-modal-image {
  width: calc(100% - 48px);
  max-width: none;
  margin: 3px 24px 28px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  position: relative;
  clip-path: polygon(
    0 0,
    calc(100% - 46px) 0,
    calc(100% - 46px) 36px,
    calc(100% - 44px) 39px,
    calc(100% - 41px) 42px,
    calc(100% - 38px) 44px,
    calc(100% - 33px) 46px,
    100% 46px,
    100% 100%,
    0 100%
  );
  /* соотношение сторон ~16:9, излишки обрезаются */
  padding-top: 56.25%;
  overflow: hidden;
}

.project-modal-image--video {
  padding-top: 0;
  margin: 18px 24px 28px;
  background: transparent;
  clip-path: polygon(
    0 0,
    calc(100% - 46px) 0,
    calc(100% - 46px) 36px,
    calc(100% - 44px) 39px,
    calc(100% - 41px) 42px,
    calc(100% - 38px) 44px,
    calc(100% - 33px) 46px,
    100% 46px,
    100% 100%,
    0 100%
  );
}

.project-modal-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.project-modal-image-placeholder-box {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  background: #e1e4e7;
  color: #9aa0a6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", var(--font-sans);
  font-size: 14px;
}

.project-modal-video {
  width: 100%;
  max-width: 760px;
  max-height: 360px;
  border-radius: 16px;
  display: block;
  object-fit: cover;
}

.project-modal-title {
  margin: 0 24px 12px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  color: #222;
}

.project-modal-description {
  margin: 0 24px 16px;
  font-family: "Montserrat", var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.project-modal-description p {
  margin: 0;
}

.project-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #444;
  font-size: 18px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 4;
}

.project-modal-close:hover {
  background: var(--primary);
  color: #222;
  transform: rotate(90deg);
}

@media (max-width: 767px) {
  .project-modal-content {
    border-radius: 20px;
    max-height: 95vh;
  }

  .project-modal-image {
    width: calc(100% - 32px);
    margin: -6px 16px 18px;
    border-radius: 14px;
    clip-path: polygon(
      0 0,
      calc(100% - 38px) 0,
      calc(100% - 38px) 30px,
      calc(100% - 36px) 33px,
      calc(100% - 33px) 35px,
      calc(100% - 30px) 37px,
      calc(100% - 27px) 38px,
      100% 38px,
      100% 100%,
      0 100%
    );
  }

  .project-modal-image--video {
    margin: 8px 16px 18px;
    border-radius: 14px;
    clip-path: polygon(
      0 0,
      calc(100% - 38px) 0,
      calc(100% - 38px) 30px,
      calc(100% - 36px) 33px,
      calc(100% - 33px) 35px,
      calc(100% - 30px) 37px,
      calc(100% - 27px) 38px,
      100% 38px,
      100% 100%,
      0 100%
    );
  }

  .project-modal-title {
    margin: 20px 16px 10px;
    font-size: 18px;
  }

  .project-modal-description {
    margin: 0 16px 16px;
    font-size: 14px;
  }

  .project-modal-close {
    width: 36px;
    height: 36px;
    top: 10px;
    right: 10px;
  }
}

.home-projects-cta {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
}

.home-projects-cta-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 380px;
  padding: 0.55rem 1.65rem;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #fff !important;
  text-decoration: none;
  background: #eb2026;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: background var(--transition), transform var(--transition),
    box-shadow var(--transition);
}

.home-projects-cta-btn:hover {
  background: #c9161c;
  color: #fff !important;
  transform: translateY(-1px);
}

.home-projects-cta-btn:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 3px;
}

@media (max-width: 799px) {
  .wrap.home-projects-wrap {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .home-project-card-desc {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
  }

  .home-project-card-body {
    padding-top: 25px;
    padding-left: 22px;
    padding-right: 20px;
    padding-bottom: 26px;
  }

  .home-project-card-title {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
    vertical-align: bottom;
    margin-bottom: 6px;
  }

  .home-projects-feature {
    display: contents;
    padding-bottom: 0;
  }

  .home-projects-illus {
    position: static;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 0;
  }

  .home-projects-illus img {
    width: 147px;
    height: 116px;
    max-width: 147px;
    object-fit: contain;
  }

  .home-projects-head {
    grid-row: 2;
    text-align: center;
    margin-bottom: 0;
  }

  .home-projects-grid {
    grid-row: 3;
    min-width: 0;
    width: 100%;
  }

  .home-projects-cta {
    grid-row: 4;
    min-width: 0;
    width: 100%;
  }

  .home-projects-head-text .home-projects-title {
    justify-content: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 3px;
  }

  .home-projects-subtitle {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    margin: 0 auto 29px;
    color: #494949;
  }

  .home-project-card {
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-project-media {
    width: 100%;
    max-width: 280px;
    height: 200px;
  }

  .home-projects-cta-btn {
    min-width: 0;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    margin-top: 40px;
  }
}

/* «Камера, мотор» (главная): #films, данные films; медиа 366×300 / 300×200 */
.home-cinema-section {
  background: transparent;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  /* Сброс бокового padding от .section — фон на всю ширину main */
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
}

/* Фон и скругление на всю ширину секции; контент — max 1130px внутри .home-cinema-wrap */
.home-cinema-bleed {
  width: 100%;
  box-sizing: border-box;
  background: #f5e4fb;
  border-radius: clamp(24px, 4vw, 50px);
}

@media (max-width: 1210px) {
  /* «Камера, мотор»: лавандовый фон на всю ширину экрана; отступы контента — в .wrap */
  body.page-home #films.home-cinema-section {
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  body.page-home #films .home-cinema-bleed {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }
  body.page-home #films .wrap.home-cinema-wrap {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  body.page-home #films .home-cinema-subtitle {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 29px;
    color: #494949;
  }
}

.home-cinema-wrap {
  padding-top: 0;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.home-cinema-head {
  margin-bottom: 59px;
}

.home-cinema-head-text {
  min-width: 0;
  padding-top: 78px;
}

.home-cinema-head-text .home-cinema-title {
  margin-bottom: 12px;
  justify-content: flex-start;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: 0;
  color: #494949;
}

.home-cinema-subtitle {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #494949;
}

/* Декор под блоком с роликами: ниже заголовка, на десктопе — сзади/под правым краем сетки */
.home-cinema-feature {
  position: relative;
  padding-bottom: 59px;
}

.home-cinema-illus {
  margin: 0;
}

.home-cinema-illus img {
  display: block;
  width: 362px;
  max-width: min(362px, 42vw);
  height: auto;
}

.cinema-films-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 27px 17px;
}

@media (min-width: 1000px) {
  .home-cinema-illus {
    position: absolute;
    right: 0;
    top: -248px;
    z-index: 0;
    pointer-events: none;
  }
}

@media (max-width: 1200px) and (min-width: 1000px) {
  .cinema-film-card {
    flex: 0 1 calc((100% - 1 * 17px) / 2);
    max-width: 366px;
  }
}

/* Кнопка «Показать ещё» поверх декора, если он заходит вниз */
.home-cinema-feature .more-cards-wrap {
  position: relative;
  z-index: 2;
}

.cinema-film-card {
  display: flex;
  flex-direction: column;
  /* как у достижений: 1130px − 3×366 − 2×17 = −2px */
  flex: 0 1 calc((100% - 2 * 17px) / 3);
  width: auto;
  max-width: 366px;
  min-width: 0;
  align-self: stretch;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out),
    box-shadow var(--transition);
}

.cinema-film-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.cinema-film-card:hover {
  box-shadow: 0 8px 28px rgba(74, 44, 85, 0.14);
}

.cinema-film-media {
  position: relative;
  width: 366px;
  max-width: 100%;
  height: 300px;
  margin: 0 auto;
  background: #2a1f30;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.cinema-film-media iframe,
.cinema-film-media video,
.cinema-film-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.cinema-film-media iframe {
  object-fit: contain;
  background: #0a0a0a;
}

.cinema-film-video {
  object-fit: contain;
  background: #000;
}

.cinema-film-media--poster .cinema-film-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 3.25rem;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.cinema-film-card-body {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 29px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 29px;
  text-align: center;
  background: #f5e4fb;
}

.cinema-film-card-title {
  margin: 0 0 11px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  color: #494949;
}

.cinema-film-card-desc {
  margin: 0;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  color: #494949;
}

@media (max-width: 999px) {
  .wrap.home-cinema-wrap {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cinema-film-card-body {
    padding-top: 16px;
    padding-bottom: 0;
  }

  .cinema-film-card-title {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 5px;
  }

  .cinema-film-card-desc {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
  }

  .home-cinema-head-text {
    padding-top: 0;
  }

  .home-cinema-feature {
    display: contents;
  }

  .home-cinema-illus {
    position: static;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 9px;
    padding-top: 15px;
  }

  .home-cinema-illus img {
    width: 146px;
    height: 123px;
  }

  .home-cinema-head {
    grid-row: 2;
    text-align: center;
    margin-bottom: 0;
  }

  .home-cinema-head-text .home-cinema-title {
    justify-content: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 4px;
  }

  .home-cinema-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .cinema-films-grid {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    gap: 27px;
  }

  /* Сброс align-self: stretch с десктопа — иначе при max-width карточка прилипает влево */
  .cinema-film-card {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    max-width: 280px;
  }

  .wrap.home-cinema-wrap > .more-cards-wrap {
    grid-column: 1;
    justify-self: center;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .cinema-film-media {
    width: 280px;
    height: 207px;
  }
}

/* Планшет / широкий телефон: две карточки в ряд (иначе только 3 на десктопе или 1 в колонке) */
@media (max-width: 999px) and (min-width: 500px) {
  .cinema-films-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 27px 17px;
    padding-bottom: 30px;
  }

  .cinema-film-card {
    flex: 0 1 calc((100% - 17px) / 2);
    max-width: 280px;
    width: auto;
    align-self: stretch;
  }

  .cinema-film-media {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 280 / 207;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Отзывы (главная): фон #E2EAF0 на всю ширину main; контент max 1130px в .home-reviews-wrap */
.home-reviews-section {
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
}

.home-reviews-bleed {
  width: 100%;
  box-sizing: border-box;
  background: #e2eaf0;
  border-radius: clamp(16px, 3vw, 24px);
}

@media (max-width: 1210px) {
  body.page-home #reviews.home-reviews-section {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  body.page-home #reviews .home-reviews-bleed {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }
  body.page-home #reviews .wrap.home-reviews-wrap {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

.wrap.home-reviews-wrap {
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 69px;
  padding-bottom: 95px;
  box-sizing: border-box;
}

.home-reviews-head {
  margin-bottom: 59px;
}

.home-reviews-head-text {
  min-width: 0;
}

.home-reviews-head-text .home-reviews-title {
  margin-bottom: 6px;
  justify-content: flex-start;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: 0;
  color: #494949;
}

.home-reviews-subtitle {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #494949;
}

/* Декор под карточками отзывов: как .home-cinema-feature / .home-projects-feature */
.home-reviews-feature {
  position: relative;
  padding-bottom: 0;
}

.home-reviews-illus {
  margin: 0;
}

.home-reviews-illus img {
  display: block;
  width: 355px;
  height: 218px;
}

.home-reviews-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
  max-width: 1130px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .home-reviews-illus {
    position: absolute;
    right: 0;
    top: -199px;
    z-index: 0;
    pointer-events: none;
  }
}

.home-reviews-feature .more-cards-wrap {
  position: relative;
  z-index: 2;
}

.home-review-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 25px 29px 19px 18px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out),
    box-shadow var(--transition);
}

.home-review-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.home-review-card:hover {
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.12);
}

.home-review-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 23px;
}

.home-review-avatar-wrap {
  flex-shrink: 0;
}

.home-review-avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.home-review-main {
  flex: 1 1 auto;
  min-width: 0;
}

.home-review-name {
  margin: 0 0 8px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  color: #494949;
}

.home-review-text {
  margin: 0;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  color: #494949;
}

@media (max-width: 799px) {
  .wrap.home-reviews-wrap {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .home-reviews-feature {
    display: contents;
    padding-bottom: 0;
  }

  .home-reviews-illus {
    position: static;
    grid-row: 1;
    justify-self: center;
    padding-top: 18px;
    margin-bottom: 5px;
    box-sizing: border-box;
  }

  .home-reviews-illus img {
    width: 184px;
    height: 113px;
    max-width: 184px;
    object-fit: contain;
  }

  .home-reviews-head {
    grid-row: 2;
    text-align: center;
    margin-bottom: 0;
  }

  .home-review-avatar {
    width: 48px;
    height: 48px;
  }

  .home-review-card-inner {
    gap: 12px;
  }

  .home-review-name {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    margin-bottom: 4px;
  }

  .home-review-text {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
  }

  .home-review-card {
    padding-top: 12px;
    padding-left: 9px;
    padding-right: 19px;
    padding-bottom: 12px;
    border-radius: 10px;
  }

  .home-reviews-grid {
    grid-row: 3;
    grid-template-columns: 1fr;
    max-width: 400px;
    width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 25px;
  }

  .home-reviews-feature .more-cards-wrap {
    grid-row: 4;
    min-width: 0;
    width: 100%;
  }

  .home-reviews-head-text .home-reviews-title {
    justify-content: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 7px;
  }

  .home-reviews-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 24px;
  }
}

/* Команда (главная): белый фон секции, контент max 1130px; сетка 6 / 3 / 2 колонки */
.home-team-section {
  background: var(--kompot-white);
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: 0;
}

.wrap.home-team-wrap {
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 74px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.home-team-head {
  margin-bottom: 70px;
}

.home-team-head-text .home-team-title {
  margin-bottom: 6px;
  justify-content: flex-start;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: 0;
  color: #494949;
}

.home-team-subtitle {
  margin: 0;
  text-align: left;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #494949;
}

.home-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.home-team-card {
  flex: 0 1 calc((100% - 5 * 20px) / 6);
  max-width: calc((100% - 5 * 20px) / 6);
  min-width: 0;
  box-sizing: border-box;
  align-self: stretch;
  text-align: center;
  padding-bottom: 32px;
  border: none;
  box-shadow: none;
  background: transparent;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.home-team-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.home-team-avatar-wrap {
  width: 126.85px;
  height: 126.85px;
  margin: 0 auto 30px;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
}

.home-team-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.home-team-name {
  margin: 0 0 11px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  color: #494949;
}

.home-team-role {
  margin: 0;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  text-align: center;
  color: #494949;
}

@media (max-width: 1100px) {
  .home-team-card {
    flex: 0 1 calc((100% - 2 * 20px) / 3);
    max-width: calc((100% - 2 * 20px) / 3);
  }
}

@media (max-width: 768px) {
  .home-team-head-text .home-team-title {
    justify-content: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 4px;
  }

  .wrap.home-team-wrap {
    padding-top: 0;
    padding-bottom: 0;
  }

  .home-team-head {
    margin-bottom: 0;
  }

  .home-team-subtitle {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    margin: 0 auto 40px;
    color: #494949;
  }

  .home-team-grid {
    gap: 9px;
  }

  .home-team-card {
    flex: 0 1 calc((100% - 9px) / 2);
    max-width: calc((100% - 9px) / 2);
    padding-bottom: 21px;
  }

  .home-team-avatar-wrap {
    width: 98px;
    height: 98px;
    aspect-ratio: 1;
    max-width: 126.85px;
    margin-bottom: 15px;
  }

  .home-team-name {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 4px;
  }

  .home-team-role {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
  }
}

/* ========== About ========== */
/* Блок «О студии и направлениях» (главная) */
.home-about-directions.section {
  padding: 0;
}

.home-about-directions {
  margin: 0;
  background: var(--kompot-white);
}

.home-about-hero {
  padding: clamp(2rem, 4vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--kompot-white);
}

.home-about-step-text {
  max-width: 110px;
}

.home-about-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 4.5rem);
}

.home-about-copy {
  padding-top: 37px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 747px;
}

.home-about-title {
  margin: 0 0 6px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: 50px;
  line-height: 56px;
  color: #494949;
}

.home-about-lead {
  margin: 0 0 62px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.66;
  color: #494949;
}

.home-about-lead--mobile {
  display: none;
}

/* Десктоп: 4 колонки в один ряд, круг сверху, подпись снизу, вертикальные линии между */
.home-about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  align-items: stretch;
}

.home-about-step {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.25rem);
  padding-left: 36px;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.05vw, 1rem);
  line-height: 1.35;
  color: #181818;
}

/* Колонка «круг + текст»: левый край текста = левому краю круга; блок центрируется в ячейке сетки */
.home-about-step-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  max-width: 100%;
  gap: 0.75rem;
}

/* Разделитель у 2–4-й колонки: привязка к левому краю круга, линия на 44px левее */
@media (min-width: 769px) {
  .home-about-step:not(:first-child) .home-about-step-body::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 105px;
    background: #acafaf;
    left: -44px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
  }
}

.home-about-step-num {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #60b34a;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 45px;
  text-align: center;
}

.home-about-step-text {
  display: block;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.home-about-illus {
  flex: 0 0 auto;
  align-self: center;
}

.home-about-illus-pic img {
  display: block;
  width: 382px;
  height: 388px;
  max-width: 100%;
}

.home-about-gallery {
  background: #e6f5e4;
  border-radius: 50px;
  padding: 80px 1rem;
  margin-top: 0;
  box-sizing: border-box;
}

@media (max-width: 1210px) {
  .home-about-hero {
    padding-top: 15px;
    padding-bottom: 46px;
  }
  .home-about-title {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    margin: 0 0 6px;
  }
  .home-about-illus-pic img {
    width: 146px;
    height: 149px;
    max-width: 100%;
    object-fit: contain;
  }
  .home-about-gallery {
    border-radius: 20px;
    padding: 39px 20px 36px;
  }
}

.home-about-gallery .wrap {
  max-width: 1128px;
  margin: 0 auto;
  box-sizing: border-box;
}

.home-about-dg {
  display: grid;
  gap: clamp(10px, 1.8vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  grid-template-areas:
    "d0 d1"
    "d2 d3"
    "vid vid"
    "d4 d5"
    "d6 d7"
    "d8 d8";
}

.slot-d0 {
  grid-area: d0;
}
.slot-d1 {
  grid-area: d1;
}
.slot-d2 {
  grid-area: d2;
}
.slot-d3 {
  grid-area: d3;
}
.slot-d4 {
  grid-area: d4;
}
.slot-d5 {
  grid-area: d5;
}
.slot-d6 {
  grid-area: d6;
}
.slot-d7 {
  grid-area: d7;
}
.slot-d8 {
  grid-area: d8;
}
.slot-video {
  grid-area: vid;
}

.home-about-slot--img {
  border-radius: 14px;
  overflow: hidden;
  background: #c5e8d8;
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.home-about-slot--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-about-slot--video {
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
}

.video-wrap--about-gallery {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a1a;
}

.video-wrap--about-gallery iframe,
.video-wrap--about-gallery .video-placeholder,
.video-wrap--about-gallery .video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-wrap--about-gallery .video-player {
  object-fit: contain;
  background: #1a1a1a;
}

/* Нет URL видео: без иконки «play», понятная подпись */
.video-wrap--about-gallery-empty {
  background: #e8ebe8;
}

.video-wrap--about-gallery-empty .video-placeholder--about-empty {
  background: #e8ebe8;
  color: #5c6360;
  cursor: default;
}

.video-wrap--about-gallery-empty
  .video-placeholder--about-empty
  .video-placeholder-text {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (min-width: 1211px) {
  /* Макет: ячейка 267×180; 2×2 + зазоры = 554×381 для d4 и видео (≤1210 — базовая сетка выше) */
  .home-about-gallery .wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home-about-dg {
    grid-template-columns: repeat(4, 267px);
    grid-auto-rows: 180px;
    gap: 21px 20px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas:
      "d0 d1 d4 d4"
      "d2 d3 d4 d4"
      "vid vid d5 d6"
      "vid vid d7 d8";
  }

  .home-about-slot--img {
    border-radius: 16px;
    aspect-ratio: unset;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .home-about-slot--video {
    border-radius: 16px;
    min-height: 0;
    height: 100%;
  }

  .video-wrap--about-gallery {
    border-radius: 16px;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
  }

  .video-wrap--about-gallery-empty {
    height: 100%;
    min-height: 381px;
  }
}

@media (max-width: 768px) {
  .home-about-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .home-about-copy {
    max-width: 100%;
    order: 1;
    padding-top: 0;
  }

  .home-about-illus {
    order: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .home-about-lead--desktop {
    display: none;
  }

  .home-about-lead--mobile {
    display: block;
    margin-bottom: 29px;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-about-steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-about-step {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 0;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0;
  }

  .home-about-step-body {
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.85rem;
  }

  .home-about-step:first-child {
    padding-top: 0;
  }

  .home-about-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .home-about-step-num {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }
}

.about-text {
  margin-bottom: 2rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.about-text p {
  margin-bottom: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--kompot-gray);
  text-align: center;
}
.about-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
.about-photo-block,
.about-video-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.about-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--kompot-bg);
  transition: box-shadow var(--transition), transform var(--transition);
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.about-photo:hover {
  box-shadow: var(--shadow-hover);
  transform: scale(1.02);
}
.about-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.about-photo:hover img {
  transform: scale(1.05);
}
.about-photo-caption,
.about-video-block .video-caption {
  margin: 0;
  font-size: 0.9rem;
  color: var(--kompot-gray);
  line-height: 1.4;
  text-align: center;
}
.about-video-block .video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #1a1a1a;
  transition: box-shadow var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  color: var(--kompot-gray);
  text-decoration: none;
}
.video-placeholder-link:hover {
  color: var(--kompot-red);
  background: #e0e0e0;
}
.video-placeholder-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.video-placeholder-text {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.about-video-block .video-wrap:hover {
  box-shadow: var(--shadow-hover);
  transform: scale(1.02);
}
.about-video-block .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Нативный HTML5-плеер (MP4 и др.) - тот же размер, что и iframe */
.about-video-block .video-wrap .video-player,
.video-wrap .video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a1a1a;
  border: 0;
}
.about-video-block .video-wrap .video-player {
  border-radius: var(--radius-lg);
}
.review-card .video-wrap .video-player {
  border-radius: var(--radius-sm);
}
.media-clip-card-video .video-player {
  border-radius: var(--radius-sm);
}
.card-trailer {
  margin-top: 0.75rem;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #1a1a1a;
}
.card-trailer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.card-trailer .video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #1a1a1a;
}
/* Слот «фото или видео» в карточках фильмов - одно место под медиа */
.card-media.video-wrap {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
  background: #1a1a1a;
}
.card-media.video-wrap iframe,
.card-media.video-wrap .video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
@media (max-width: 768px) {
  .about-media {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-text {
    padding: 0 0.5rem;
  }
}

/* ========== «О студиях» (главная, десктоп ) ========== */
.about-studios-section {
  background: var(--kompot-white);
  padding-top: 3.25rem;
  padding-bottom: 3.5rem;
}

.about-studios-wrap {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.about-studios-section .section-desc.about-studios-lead {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.25rem;
  text-align: center;
}

.about-studios-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
}

.about-studio-card {
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.35rem, 2.2vw, 1.85rem);
  background: var(--kompot-white);
  border: 1px solid #acafaf;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.about-studio-card:hover {
  border-color: rgba(196, 30, 58, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.about-studio-card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.about-studio-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgba(196, 30, 58, 0.12),
    rgba(196, 30, 58, 0.04)
  );
  color: var(--kompot-red);
  font-size: 1.35rem;
}

.about-studio-title {
  margin: 0;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.25;
  color: var(--kompot-dark);
}

.about-studio-text {
  margin: 0;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.35vw, 1rem);
  line-height: 1.6;
  color: var(--kompot-gray);
}

@media (max-width: 768px) {
  .about-studios-section {
    padding-top: 2.5rem;
    padding-bottom: 2.75rem;
  }

  .about-studios-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-studio-card {
    border-radius: 16px;
  }
}

/* ========== Cards grid ========== */
.cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}
.cards-grid .card {
  flex: 0 1 min(320px, 100%);
  min-width: min(280px, 100%);
}
.card {
  background: var(--kompot-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--kompot-border);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
    box-shadow var(--transition), border-color var(--transition);
}
.card.reveal {
  opacity: 1;
  transform: translateY(0);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.card .card-img {
  transition: none;
}
.card-img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  display: block;
}
.card-body {
  padding: 1.35rem;
  text-align: center;
}
.card-body h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
  color: var(--kompot-dark);
  line-height: 1.3;
}
.card-body p {
  font-size: 0.92rem;
  color: var(--kompot-gray);
  line-height: 1.55;
}
.card-body .btn-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--kompot-red);
  font-weight: 600;
  font-size: 0.9rem;
}
.card-body .btn-link:hover {
  text-decoration: underline;
}
.card-body .btn-link:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Варианты карточек по секциям */

/* ========== Team grid ========== */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.team-grid .team-card {
  flex: 0 1 200px;
  min-width: 180px;
  max-width: 220px;
}
@media (max-width: 768px) {
  .team-grid .team-card {
    flex: 0 1 calc(50% - 0.75rem);
    min-width: 0;
    max-width: none;
  }
}
.team-card {
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.team-card.reveal {
  opacity: 1;
  transform: translateY(0);
}
.team-card .avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid var(--kompot-border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.team-card:hover .avatar {
  box-shadow: var(--shadow-hover);
  transform: scale(1.02);
}
.team-card h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.team-card p {
  font-size: 0.875rem;
  color: var(--kompot-gray);
}

/* ========== News grid ========== */
.news-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  align-items: stretch;
}
.news-grid .news-card-link {
  flex: 0 1 min(360px, 100%);
  min-width: min(300px, 100%);
}
.news-card-link {
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.news-card-link.reveal {
  opacity: 1;
  transform: translateY(0);
}
.news-card-link:hover .news-card {
  box-shadow: var(--shadow-hover);
  border-color: rgba(196, 30, 58, 0.25);
}
.news-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--kompot-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--kompot-border);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.news-card .thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.news-card .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  text-align: center;
}
.news-card .date {
  font-size: 0.8rem;
  color: var(--kompot-red);
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.news-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
  color: var(--kompot-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.7em;
}
.news-card p {
  font-size: 0.92rem;
  color: var(--kompot-gray);
  line-height: 1.55;
}
.news-card .card-read-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kompot-red);
  display: inline-block;
  margin-top: 0.25rem;
}
.news-card-link:hover .card-read-link {
  text-decoration: underline;
}

/* Страница «Новости» */
body.page-news .news-page-main {
  padding: 7.5rem 0 46px;
  background: #fff;
  font-family: Montserrat, var(--font-sans);
}
body.page-news .news-page-main.reveal {
  opacity: 1;
  transform: none;
}
.hot-hero {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.hot-hero.reveal {
  opacity: 1;
  transform: translateY(0);
}
body.page-news .news-page-wrap {
  --hot-page-pad: clamp(1rem, 10.76vw, 155px);
  position: relative;
  z-index: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--hot-page-pad);
  padding-right: var(--hot-page-pad);
  box-sizing: border-box;
}

.hot-hero.hot-hero--news {
  margin-bottom: 61px;
}

body.page-news .news-page-wrap .news-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  width: 100%;
  max-width: min(1130px, 100%);
  margin: 0 auto 57px;
  box-sizing: border-box;
}

body.page-news .news-list-card-link {
  display: block;
  width: 100%;
  max-width: 1130px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1024px) {
  /* flex вместо grid — неполный последний ряд по центру (как «Горячее» / блог) */
  body.page-news .news-page-wrap .news-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
  }

  body.page-news .news-list-card-link {
    display: flex;
    flex-direction: column;
    flex: 0 1 363px;
    width: auto;
    max-width: min(363px, 100%);
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
    box-sizing: border-box;
  }

  body.page-news .news-page-wrap .news-grid .news-card.news-list-card {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  body.page-news .news-list-card-media {
    min-height: 300px;
    max-height: 300px;
  }

  body.page-news .news-list-card-media .thumb {
    min-height: 300px;
    max-height: 300px;
    border-radius: 20px 20px 0 0;
  }

  body.page-news .news-list-card-body {
    padding: 38px 25px 28px;
  }

  body.page-news .news-list-card-date {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.57;
  }

  body.page-news .news-list-card-body h3 {
    margin: 0 0 0;
    font-size: 20px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* В макете десктопа только дата, заголовок и «Подробнее» */
  body.page-news .news-list-card-lede {
    display: none;
  }
}

body.page-news .news-grid .news-card.news-list-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border: 1px solid #acafaf;
  border-radius: 20px;
  overflow: hidden;
  background: #e6f5e4;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease,
    opacity 0.5s var(--ease-out);
}

body.page-news
  .news-grid
  .news-card-link:nth-child(3n + 2)
  .news-card.news-list-card {
  background: #f5e4fb;
}

body.page-news
  .news-grid
  .news-card-link:nth-child(3n + 3)
  .news-card.news-list-card {
  background: #e2eaf0;
}

body.page-news .news-list-card-media {
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  background: #fff;
}

body.page-news .news-list-card-media .thumb {
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 20px 20px 0 0;
}

body.page-news .news-list-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 38px;
  padding-left: 25px;
  padding-right: 15px;
  padding-bottom: 39px;
  box-sizing: border-box;
}

body.page-news .news-list-card-date {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  color: #494949;
  text-align: center;
}

body.page-news .news-list-card-body h3 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-news .news-list-card-lede {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

body.page-news .news-list-card-body .card-read-link {
  margin-top: auto;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.22;
  color: #494949;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-news .news-page-wrap .news-card-link:hover .news-card.news-list-card {
  box-shadow: 0px 0px 15px 0px #00000026;
  border-color: rgba(0, 0, 0, 0.12);
  transform: none;
}

body.page-news .news-grid .news-card.news-list-card:hover {
  transform: none;
}

body.page-news .news-page-wrap .news-card-link:hover .card-read-link {
  text-decoration: none;
}

body.page-news .news-page-wrap:has(.more-cards-wrap--blog) .news-grid {
  margin-bottom: 30px;
}

body.page-blog .blog-page-wrap:has(.more-cards-wrap--blog) .blog-grid {
  margin-bottom: 30px;
}

body.page-blog .more-cards-wrap--blog,
body.page-news .more-cards-wrap--blog,
body.page-media .more-cards-wrap--blog {
  margin-top: 0;
  margin-bottom: 48px;
  max-width: min(1130px, 100%);
  margin-left: auto;
  margin-right: auto;
}

body.page-blog .more-cards-wrap--blog .btn-more-cards,
body.page-news .more-cards-wrap--blog .btn-more-cards,
body.page-media .more-cards-wrap--blog .btn-more-cards {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  min-height: 22px;
  overflow: visible;
  padding: 0;
  background: transparent;
  color: #494949;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: Montserrat, var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

body.page-blog .more-cards-wrap--blog .btn-more-cards-label,
body.page-news .more-cards-wrap--blog .btn-more-cards-label,
body.page-media .more-cards-wrap--blog .btn-more-cards-label {
  line-height: 17px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-blog .more-cards-wrap--blog .btn-more-cards:hover,
body.page-news .more-cards-wrap--blog .btn-more-cards:hover,
body.page-media .more-cards-wrap--blog .btn-more-cards:hover {
  color: #494949;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.page-blog
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label,
body.page-news
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label,
body.page-media
  .more-cards-wrap--blog
  .btn-more-cards:hover
  .btn-more-cards-label {
  text-decoration: none;
}

body.page-blog .more-cards-wrap--blog .btn-more-cards:focus-visible,
body.page-news .more-cards-wrap--blog .btn-more-cards:focus-visible,
body.page-media .more-cards-wrap--blog .btn-more-cards:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 3px;
  border-radius: 4px;
}
.news-hint {
  font-size: 0.9rem;
  color: var(--kompot-gray-light);
  margin-bottom: 2.5rem;
  text-align: center;
}
.news-cta {
  background: linear-gradient(
    135deg,
    var(--kompot-red-soft) 0%,
    rgba(196, 30, 58, 0.04) 100%
  );
  border: 2px solid var(--kompot-red);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(196, 30, 58, 0.1);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.news-cta.reveal {
  opacity: 1;
  transform: translateY(0);
}
.news-cta-inner {
  max-width: 520px;
  margin: 0 auto;
}
.news-cta-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kompot-dark);
  margin-bottom: 0.75rem;
}
.news-cta-text {
  font-size: 1rem;
  color: var(--kompot-gray);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.btn-cta-news {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  background: var(--kompot-red);
  color: var(--kompot-white);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-cta-news:hover {
  background: var(--kompot-red-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn);
}
.btn-cta-news:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .news-cta {
    padding: 1.75rem 1.25rem;
  }
  .news-cta-title {
    font-size: 1.2rem;
  }
}

/* ========== Post page (отдельная новость/статья блога) ========== */
/* Как news-page-wrap / blog-page-wrap: max 1440 + боковые 155 → контент 1130, не min(1200px) из .wrap */
body.page-post .post-page-main {
  padding: 7rem 0 2.27rem;
  font-family: Montserrat, var(--font-sans);
}

body.page-post .post-page-main > .wrap {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 10.76vw, 155px);
  padding-right: clamp(1rem, 10.76vw, 155px);
  box-sizing: border-box;
}
.post-breadcrumb {
  font-size: 14px;
  line-height: 30px;
  margin-top: 26px;
  margin-bottom: 26px;
  font-family: Montserrat;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--kompot-gray);
}
.post-breadcrumb a {
  color: var(--kompot-red);
  text-decoration: none;
}
.post-breadcrumb a:hover {
  text-decoration: underline;
}
.post-breadcrumb .sep {
  margin: 0 0.35rem;
  color: var(--kompot-gray);
}
.post-article {
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.post-article.reveal {
  opacity: 1;
  transform: translateY(0);
}
.post-title {
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--kompot-dark);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  position: relative;
  padding-bottom: 0.5rem;
}

.post-date {
  font-size: 0.875rem;
  line-height: 1.875rem;
  color: var(--kompot-gray);
  margin-bottom: 1.875rem;
}

.post-image-wrap {
  margin-bottom: 2.25rem;
  overflow: hidden;
  background: var(--kompot-bg-light);
}
.post-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 450px;
  object-fit: cover;
}
/* Текст статьи */
.post-body.prose {
  font-family: Montserrat, var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  color: #494949;
}
.post-body.prose p {
  margin: 0 0 1rem;
}
.post-body.prose h2,
.post-body.prose h3 {
  font-family: Montserrat, var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  color: #494949;
  margin: 1.25rem 0 0.5rem;
}
.post-body.prose h2:first-child,
.post-body.prose h3:first-child {
  margin-top: 0;
}
.post-body.prose ul,
.post-body.prose ol {
  margin: 1rem 0;
  padding-left: 1.25rem;
  font-family: Montserrat, var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  color: #494949;
}
.post-body.prose li {
  margin-bottom: 0.35rem;
}
.post-body.prose strong {
  font-weight: 700;
}
.post-body.prose a {
  color: var(--kompot-red);
}

/* «Другие новости»  */
body.page-post .post-others-panel {
  width: 100vw;
  max-width: 100vw;
  margin: 4rem calc(50% - 50vw) 0;
  padding-top: 22px;
  padding-left: 155px;
  padding-right: 155px;
  padding-bottom: 80px;
  box-sizing: border-box;
  background: #f5e4fb;
  border-radius: 50px;
}

body.page-post .post-others-inner {
  max-width: 1130px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

body.page-post .post-others-head {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  min-height: 0;
}

.post-others-title {
  margin: 0;
  padding-top: 56px;
  max-width: 746px;
  font-family: Montserrat, var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 50px);
  line-height: 1.12;
  letter-spacing: 0;
  color: #494949;
  text-align: left;
}

body.page-post .post-others-deco {
  flex-shrink: 0;
  line-height: 0;
  align-self: flex-start;
  margin-right: 30px;
}

body.page-post .post-others-deco img {
  display: block;
  width: 321px;
  height: 188px;
  max-width: 321px;
  max-height: 188px;
  object-fit: contain;
}

.post-others-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
  box-sizing: border-box;
}

.post-other-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #acafaf;
  box-shadow: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease,
    opacity 0.5s var(--ease-out);
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(24px);
}
.post-other-card.reveal {
  opacity: 1;
  transform: translateY(0);
}
.post-other-card:hover {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.12);
}
.post-other-card-media {
  width: 100%;
  flex-shrink: 0;
  height: 300px;
  overflow: hidden;
  background: #f5f5f5;
}
.post-other-card .thumb {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}
.post-other-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 38px;
  padding-bottom: 38px;
  padding-left: 25px;
  padding-right: 15px;
  box-sizing: border-box;
}
.post-other-card .date {
  margin: 0 0 14px;
  font-family: Montserrat, var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #494949;
}
.post-other-card h3 {
  margin: 0 0 36px;
  font-family: Montserrat, var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.post-other-card-more {
  margin-top: auto;
  font-family: Montserrat, var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.22;
  color: #494949;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-other-card:hover .post-other-card-more {
  text-decoration: none;
}

body.page-post .post-page-main > .wrap > .hot-cta {
  margin-top: clamp(2.5rem, 5vw, 4.4375rem);
}

@media (max-width: 1200px) {
  body.page-post .post-others-panel {
    padding-left: clamp(1.25rem, 8vw, 4.5rem);
    padding-right: clamp(1.25rem, 8vw, 4.5rem);
  }
}

@media (max-width: 1023px) {
  body.page-post .post-others-panel {
    padding-top: 36px;
    padding-bottom: 25px;
    margin-top: 2rem;
    border-radius: 20px;
  }

  body.page-post .post-others-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
  }

  /* Иллюстрация над заголовком (в разметке после h2) */
  body.page-post .post-others-deco {
    order: -1;
    align-self: center;
    margin-right: 0;
  }

  body.page-post .post-others-title {
    padding-top: 0;
    width: 100%;
    max-width: none;
    align-self: stretch;
    text-align: center;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
  }

  body.page-post .post-others-deco img {
    width: 147px;
    height: 86px;
  }

  .post-others-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
  }

  .post-other-card-body {
    padding-top: 16px;
    padding-bottom: 19px;
    padding-left: 22px;
    padding-right: 20px;
  }

  .post-other-card .date {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 0;
  }

  .post-other-card h3 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 6px;
  }

  .post-other-card {
    border-radius: 10px;
  }

  .post-other-card-media {
    border-radius: 10px 10px 0 0;
    height: 206px;
  }

  .post-other-card .thumb {
    min-height: 206px;
    height: 206px;
    max-height: 206px;
  }
}

.post-cta {
  background: linear-gradient(
    135deg,
    var(--kompot-red-soft) 0%,
    rgba(196, 30, 58, 0.06) 100%
  );
  border: 2px solid var(--kompot-red);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(196, 30, 58, 0.1);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.post-cta.reveal {
  opacity: 1;
  transform: translateY(0);
}
.post-cta-inner {
  max-width: 520px;
  margin: 0 auto;
}
.post-cta-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kompot-dark);
  margin-bottom: 0.75rem;
}
.post-cta-text {
  font-size: 1rem;
  color: var(--kompot-gray);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.btn-post-cta {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--kompot-red);
  color: var(--kompot-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-post-cta:hover {
  color: var(--kompot-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn);
}
@media (max-width: 640px) {
  body.page-post .post-page-main {
    padding: 6rem 0 3rem;
  }
  .post-cta {
    padding: 1.75rem 1.25rem;
  }
}

/* ========== Blog page (герой + сетка как «Горячее»; CTA — те же картинки hot2) ========== */
body.page-blog .blog-page-main {
  padding: 7.5rem 0 46px;
  background: #fff;
  font-family: Montserrat, var(--font-sans);
}

body.page-blog .blog-page-wrap {
  --hot-page-pad: clamp(1rem, 10.76vw, 155px);
  position: relative;
  z-index: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--hot-page-pad);
  padding-right: var(--hot-page-pad);
  box-sizing: border-box;
}

/* Список статей */
body.page-blog .blog-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  width: 100%;
  max-width: min(1130px, 100%);
  margin: 0 auto 57px;
  box-sizing: border-box;
}

body.page-blog .blog-grid .blog-list-card-link {
  display: block;
  width: 100%;
  max-width: 1130px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

body.page-blog .blog-grid .news-card.blog-list-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: none;
  min-height: 200px;
  border: 1px solid #acafaf;
  border-radius: 20px;
  overflow: hidden;
  background: #e6f5e4;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease,
    opacity 0.5s var(--ease-out);
}

body.page-blog
  .blog-grid
  .news-card-link:nth-child(3n + 2)
  .news-card.blog-list-card {
  background: #f5e4fb;
}

body.page-blog
  .blog-grid
  .news-card-link:nth-child(3n + 3)
  .news-card.blog-list-card {
  background: #e2eaf0;
}

body.page-blog .blog-grid .blog-list-card-media {
  flex: 0 0 268px;
  width: 268px;
  min-height: 200px;
  max-height: 200px;
  overflow: hidden;
  background: #fff;
}

body.page-blog .blog-grid .blog-list-card-media .thumb {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 20px 0 0 20px;
}

body.page-blog .blog-grid .blog-list-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: 31px;
  padding-bottom: 25px;
  padding-left: 51px;
  padding-right: 51px;
  box-sizing: border-box;
}

body.page-blog .blog-grid .blog-list-card-body h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-blog .blog-grid .blog-list-card-lede {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 36rem;
}

body.page-blog .blog-grid .blog-list-card-body .card-read-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.22;
  color: #494949;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-blog .blog-grid .news-card-link:hover .news-card.blog-list-card {
  box-shadow: 0px 0px 15px 0px #00000026;
  border-color: rgba(0, 0, 0, 0.12);
}

body.page-blog .blog-grid .news-card-link:hover .card-read-link {
  text-decoration: none;
}

body.page-blog .blog-grid .news-card.blog-list-card:hover {
  box-shadow: 0px 0px 15px 0px #00000026;
  transform: none;
}

@media (max-width: 640px) {
  body.page-news .news-page-main,
  body.page-blog .blog-page-main,
  body.page-media .media-page-main {
    padding: 6rem 0 2.5rem;
  }
}

/* ========== Review card ========== */
.review-card {
  background: var(--kompot-white);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.review-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.review-card .author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.review-card .author-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.review-card .author-name {
  font-weight: 600;
}
.review-card .text {
  color: var(--kompot-gray);
  font-size: 0.95rem;
  text-align: center;
}
.review-card .video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  margin-top: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.review-card .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.review-card .video-wrap .video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a1a1a;
}

/* Красные акценты на внутренних страницах: заголовки и политика */
body.privacy-page main .section-title::after {
  width: 5rem;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--kompot-red), var(--kompot-red-dark));
}
body.privacy-page main .wrap {
  border-top: 3px solid var(--kompot-red);
  padding-top: 1.5rem;
}
.error-page {
  border-top: 3px solid var(--kompot-red);
  margin-top: 0;
}
body.page-404 .error-page .btn:hover {
  background: var(--kompot-red-dark);
  box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4);
}
.error-page h1,
.error-page p,
.error-page .btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.error-page h1.reveal,
.error-page p.reveal,
.error-page .btn.reveal {
  opacity: 1;
  transform: translateY(0);
}
.error-page .btn.reveal:hover {
  transform: translateY(-2px);
}
body.page-404 .error-page .btn:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 3px;
}

.form-group {
  margin-bottom: 1.15rem;
}
.form-group
  input:where(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="email"],
    [type="url"],
    [type="search"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="time"]
  ),
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--kompot-border);
  border-radius: var(--radius-sm);
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
  color: #101010;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group
  input:where(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="email"],
    [type="url"],
    [type="search"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="time"]
  )::placeholder,
.form-group textarea::placeholder {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #a3a3a3;
  opacity: 1;
}

.form-group
  input:where(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="email"],
    [type="url"],
    [type="search"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="time"]
  )::-webkit-input-placeholder,
.form-group textarea::-webkit-input-placeholder {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #a3a3a3;
}

.form-group
  input:where(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="email"],
    [type="url"],
    [type="search"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="time"]
  )::-moz-placeholder,
.form-group textarea::-moz-placeholder {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #a3a3a3;
  opacity: 1;
}
.form-group
  input:where(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="email"],
    [type="url"],
    [type="search"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="time"]
  ):focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--kompot-red);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}
.form-group
  input:where(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="email"],
    [type="url"],
    [type="search"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="time"]
  ):focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}
.form-group textarea {
  min-height: 120px;
  resize: none;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--kompot-gray);
  line-height: 1.4;
}
.form-consent input {
  width: auto;
  margin-top: 0.2rem;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
}

.btn-submit {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--kompot-red);
  color: var(--kompot-white);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition),
    box-shadow var(--transition);
  min-height: 52px;
}
.btn-submit:hover {
  background: var(--kompot-red-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn), var(--glow-red);
}
.btn-submit:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}
.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ========== Footer ========== */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  font-family: "Montserrat", var(--font-sans);
  color: #494949;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.footer-surface {
  position: relative;
  padding: 3rem 0 0;
  min-height: 0;
  background: #ffffff;
}

.footer-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.footer-deco-img {
  position: absolute;
  display: block;
  object-fit: contain;
  user-select: none;
  max-width: none;
}
.footer-deco--left {
  left: 13.51%;
  top: -3rem;
  width: 228px;
  height: 185px;
}
.footer-deco--left .footer-deco-img--left {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
}
.footer-deco--right {
  right: 12.97%;
  top: 5px;
  width: 197px;
  height: 178px;
}
.footer-deco--right .footer-deco-img--right {
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  height: auto;
}

.footer-vk-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.footer-vk-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-vk-link:hover {
  opacity: 1;
  transform: scale(1.06);
}
.footer-vk-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.footer-masthead {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 0;
}

.footer-tagline {
  margin: 0 0 2px;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.35;
  color: #494949;
  margin-bottom: 10px;
}
.footer-welcome {
  margin: 0 0 70px;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #494949;
}
.footer-brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 102px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: initial;
}
.footer-brand-row .footer-contact-col--left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  max-width: 280px;
  margin: 30px 0 0;
}
.footer-brand-row .footer-contact-col--right {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  max-width: 280px;
  margin: 30px 0 0;
}
.footer-brand-row .footer-logo-block {
  flex: 0 0 auto;
  text-align: center;
}
.footer-logo-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}
.footer-logo-main {
  width: 198px;
  height: auto;
  max-height: 130px;
  object-fit: contain;
}

.footer-contact-col {
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
}
.footer-brand-row .footer-contact-col {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.footer-address {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.45;
  white-space: pre-line;
}
.footer-hours {
  margin: 0;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.57;
}
.footer-phone-wrap {
  margin: 0 0 0.5rem;
}
.footer-phone {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #494949;
  text-decoration: none;
}
.footer-phone:hover {
  color: var(--kompot-red);
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 292px;
  min-height: 46px;
  margin: 0.35rem 0 0.65rem;
  padding: 0 1.1rem;
  border-radius: 10px;
  background: #eb2026;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.22;
  text-decoration: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.15s ease;
}
.footer-cta:hover {
  background: #60b34a;
  color: #fff !important;
}
.footer-email-wrap {
  margin: 0;
}
.footer-email {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.43;
  color: #494949;
  text-decoration: none;
}
.footer-email:hover {
  color: var(--kompot-red);
  text-decoration: underline;
}

.footer-copy {
  position: relative;
  z-index: 1;
  margin: 22px auto 17px;
  padding: 0 1rem;
  text-align: center;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.22;
  color: #494949;
}

.footer-legal {
  background: #750000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0 1rem 12px;
  box-sizing: border-box;
}
.footer-legal-inner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}
.footer-northcode {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
}
.footer-northcode a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  text-decoration: none;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s ease, opacity 0.2s ease;
}
.footer-northcode a:hover {
  color: #fff;
}
.footer-northcode a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer-northcode-logo {
  display: block;
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  object-fit: contain;
}
@media (max-width: 480px) {
  .footer-northcode {
    padding-top: 8px;
  }
  .footer-northcode a {
    font-size: 11px;
    gap: 8px;
  }
  .footer-northcode-logo {
    width: 32px;
    height: 32px;
  }
}
.footer-legal-link {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.22;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.footer-legal-link:hover {
  text-decoration: underline;
  color: #fff;
}

/* Футер: мобильная вёрстка до 1024px (порядок блоков, типографика, декор) */
@media (max-width: 1023px) {
  .footer-surface {
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Выше специфичность, чем у глобального .wrap в @media (max-width: 768px) */
  .site-footer .footer-masthead.wrap {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .footer-masthead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .footer-brand-row {
    display: contents;
  }

  .footer-deco--right {
    display: none !important;
  }

  .footer-deco {
    pointer-events: none;
  }

  .footer-deco--left {
    order: 1;
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% + 25px);
    max-width: none;
    height: auto;
    margin: 0 0 0 -25px;
    align-self: flex-start;
    z-index: 0;
    flex: 0 0 auto;
  }

  .footer-deco--left .footer-deco-img--left {
    position: relative;
    display: block;
    width: 228px;
    max-width: min(228px, 70vw);
    height: auto;
    margin: 0;
  }

  .site-footer .footer-tagline {
    order: 2;
    margin: 1px 0 0;
    padding: 0 20px;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .site-footer .footer-welcome {
    order: 3;
    margin: 5px 0 0;
    padding: 0 20px;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .footer-brand-row .footer-logo-block {
    order: 4;
    margin: 29px 0 0;
  }

  .footer-vk-row {
    order: 5;
    margin: 12px 0 0;
  }

  .footer-brand-row .footer-contact-col--left {
    order: 6;
    margin: 22px 0 0;
    max-width: 100%;
    width: 100%;
    flex: none !important;
    min-width: 0;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .footer-address {
    margin: 0;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .footer-hours {
    margin: 16px 0 0;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .footer-brand-row .footer-contact-col--right {
    order: 7;
    margin: 22px 0 0;
    max-width: 100%;
    width: 100%;
    flex: none !important;
    min-width: 0;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .footer-phone-wrap {
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .footer-phone {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .footer-cta {
    margin: 10px 0 0;
    width: 100%;
    max-width: none;
    align-self: stretch;
    min-height: 46px;
    height: 46px;
    padding: 0 1.1rem;
    box-sizing: border-box;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: #fff !important;
    background: #eb2026;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }

  .footer-email-wrap {
    margin: 13px 0 0;
    width: 100%;
    text-align: center;
  }

  .footer-email {
    font-family: "Montserrat", var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .site-footer .footer-copy.wrap {
    order: 8;
    margin: 22px auto 11px;
    padding: 0 20px;
    font-family: "Montserrat", var(--font-sans);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    color: #494949;
  }

  .footer-legal {
    margin-top: 0;
  }
}

/* ========== Страница «СМИ о нас »========== */
body.page-media .media-page-main {
  padding: 7.5rem 0 46px;
  background: #fff;
  font-family: Montserrat, var(--font-sans);
  overflow-x: visible;
}

body.page-media .page-wrap {
  overflow-x: visible;
}

body.page-media .media-page-wrap {
  --hot-page-pad: clamp(1rem, 10.76vw, 155px);
  position: relative;
  z-index: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--hot-page-pad);
  padding-right: var(--hot-page-pad);
  box-sizing: border-box;
  overflow-x: visible;
}

body.page-media .media-page-main > .wrap {
  z-index: 0;
  overflow-x: visible;
}

body.page-media .media-page-block--articles {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(1130px, 100%);
  margin: 0 auto 57px;
  box-sizing: border-box;
}

body.page-media .media-page-block--clips {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 auto 69px;
  box-sizing: border-box;
}

body.page-media .media-articles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.page-media .media-article-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 555px;
  width: auto;
  max-width: min(555px, 100%);
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

body.page-media .media-article-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

body.page-media .media-article-card-hit,
body.page-media .media-article-card-hit--static {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 211px;
  height: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  background: #f8f8f8;
  border: 1px solid #acafaf;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.page-media .media-article-card-hit:hover {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.12);
}

body.page-media .media-article-card-media {
  flex: 0 0 172px;
  width: 172px;
  height: 211px;
  min-height: 211px;
  max-height: 211px;
  align-self: stretch;
  overflow: hidden;
  background: #fff;
}

body.page-media .media-article-card-media img {
  width: 100%;
  height: 211px;
  min-height: 211px;
  object-fit: cover;
  display: block;
  border-radius: 20px 0 0 20px;
}

body.page-media .media-article-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 26px 19px 24px 41px;
  box-sizing: border-box;
}

body.page-media .media-article-card-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-media .media-article-card-desc {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-media .media-article-card-read {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.22;
  color: #494949;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-media .media-article-card-hit:hover .media-article-card-read {
  text-decoration: none;
}

body.page-media .media-clips-panel {
  background: #f5e4fb;
  border-radius: 50px;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 78px;
  padding-bottom: 61px;
  padding-left: var(--hot-page-pad);
  padding-right: var(--hot-page-pad);
  box-sizing: border-box;
}

body.page-media .media-clips-panel-head,
body.page-media .media-clips-panel > .media-clips-grid,
body.page-media .media-clips-panel > .more-cards-wrap {
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

body.page-media .media-clips-panel-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 32px;
  width: 100%;
  box-sizing: border-box;
}

body.page-media .media-clips-intro {
  flex: 1;
  min-width: 0;
  text-align: left;
}

body.page-media .media-clips-heading {
  margin: 0 0 8px;
  text-align: left;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 50px);
  line-height: 1.25;
  color: #494949;
}

body.page-media .media-clips-lead {
  margin: 0;
  text-align: left;
  font-weight: 500;
  font-size: clamp(0.95rem, 2vw, 20px);
  line-height: 1.5;
  color: #494949;
}

body.page-media .media-clips-head-visual {
  flex-shrink: 0;
  align-self: flex-start;
  line-height: 0;
  margin-top: -56px;
  padding-right: 32px;
}

body.page-media .media-clips-head-visual picture {
  display: block;
  line-height: 0;
}

body.page-media .media-clips-head-visual img {
  display: block;
  width: 329px;
  height: 188px;
  object-fit: contain;
}

body.page-media .media-clips-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

body.page-media .media-clip-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 363px;
  max-width: min(363px, 100%);
  min-width: 0;
  width: auto;
  align-self: stretch;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: box-shadow 0.2s ease, border-color 0.2s ease,
    opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

body.page-media .media-clip-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

body.page-media .media-clip-card:hover {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.12);
}

body.page-media .media-clip-card-video {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1a1a;
}

body.page-media .media-clip-card-video iframe,
body.page-media .media-clip-card-video video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

body.page-media .media-clip-card-body {
  padding-top: 29px;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 29px;
  background: #f5e4fb;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  text-align: left;
}

body.page-media .media-clip-card-meta {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  color: #494949;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-media .media-clip-card-heading {
  margin: 0 0 11px;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: #494949;
}

body.page-media
  .media-page-wrap:has(.more-cards-wrap--blog)
  .media-articles-grid,
body.page-media .media-page-wrap:has(.more-cards-wrap--blog) .media-clips-grid {
  margin-bottom: 0;
}

body.page-media .media-page-block--articles .more-cards-wrap--blog {
  margin-bottom: 59px;
  margin-top: 59px;
}

/* «Показать ещё» под сеткой видеосюжетов (макет): только этот блок */
body.page-media .media-clips-panel > .more-cards-wrap.more-cards-wrap--blog {
  margin-top: 38px;
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  body.page-media .media-page-block--articles {
    margin-bottom: 30px;
  }

  body.page-media .media-page-block--clips {
    margin-bottom: 30px;
  }

  body.page-media .media-articles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    max-width: 100%;
  }

  body.page-media .media-article-card {
    flex: 0 1 280px;
    max-width: min(280px, 100%);
    width: auto;
    margin: 0;
  }

  body.page-media .media-article-card-hit,
  body.page-media .media-article-card-hit--static {
    flex-direction: column;
    max-width: 280px;
    min-height: 0;
    border-radius: 10px;
    height: auto;
  }

  body.page-media .media-article-card-media {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    max-width: 100%;
  }

  body.page-media .media-article-card-media img {
    min-height: 206px;
    height: 206px;
    max-height: 206px;
    border-radius: 10px 10px 0 0;
  }

  body.page-media .media-article-card-hit .media-article-card-media {
    order: 1;
  }

  body.page-media .media-article-card-hit .media-article-card-body {
    display: contents;
  }

  body.page-media .media-article-card-hit .media-article-card-title {
    order: 3;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.5;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  body.page-media .media-article-card-hit .media-article-card-desc {
    order: 2;
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.4;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  body.page-media .media-article-card-hit .media-article-card-read {
    order: 4;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    width: 100%;
    align-self: center;
  }

  body.page-media .media-article-card-hit--static {
    display: flex;
    flex-direction: column;
  }

  body.page-media .media-article-card-hit--static .media-article-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 16px 22px 24px;
    width: 100%;
    box-sizing: border-box;
  }

  body.page-media .media-article-card-hit--static .media-article-card-desc {
    order: 1;
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  body.page-media .media-article-card-hit--static .media-article-card-title {
    order: 2;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.5;
  }

  body.page-media .media-article-card-hit--static .media-article-card-read {
    order: 3;
    margin-top: auto;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.5;
  }

  body.page-media .media-clips-panel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 30px;
    padding: 28px 20px 32px;
    box-sizing: border-box;
  }

  body.page-media .media-clips-panel-head {
    position: relative;
    display: block;
    padding-top: 96px;
    margin-bottom: 24px;
  }

  body.page-media .media-clips-intro {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 280px;
  }

  body.page-media .media-clips-head-visual {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
    padding-right: 0;
    align-self: auto;
    max-width: none;
    z-index: 0;
  }

  body.page-media .media-clips-head-visual img {
    width: 144px;
    max-width: 144px;
    height: auto;
    max-height: 86px;
    object-fit: contain;
  }

  body.page-media .media-clips-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
  }

  body.page-media .media-clip-card {
    flex: 0 1 280px;
    max-width: min(280px, 100%);
    min-width: 0;
    width: auto;
    align-self: stretch;
    border-radius: 10px;
    min-height: 0;
  }

  /* Макет моб: превью видео 206px по высоте */
  body.page-media .media-clip-card-video {
    height: 206px;
    min-height: 206px;
    max-height: 206px;
    border-radius: 10px 10px 0 0;
  }

  body.page-media .media-clip-card-body {
    padding-bottom: 5px;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    align-items: unset;
  }

  body.page-media .media-clip-card-meta {
    font-size: 10px;
    line-height: 14px;
    text-align: center;
  }

  body.page-media .media-clip-card-heading {
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    margin-bottom: 5px;
  }

  body.page-media
    #mediaArticlesSection
    > .more-cards-wrap.more-cards-wrap--blog {
    margin-bottom: 0;
  }

  body.page-media .media-page-block--articles .more-cards-wrap--blog {
    margin-top: 30px;
  }

  body.page-media .media-clips-panel > .more-cards-wrap.more-cards-wrap--blog {
    margin-top: 30px;
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  body.page-media .media-clips-grid {
    flex-direction: column;
    align-items: center;
  }

  body.page-media .media-clip-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: min(280px, 100%);
  }
}

body.page-hot .hot-page-main {
  padding: 7.5rem 0 46px;
  background: #fff;
  font-family: "Montserrat", var(--font-sans);
}

body.page-hot .hot-page-wrap {
  --hot-page-pad: clamp(1rem, 10.76vw, 155px);
  position: relative;
  z-index: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--hot-page-pad);
  padding-right: var(--hot-page-pad);
  box-sizing: border-box;
}

/* Крошки только на мобильной вёрстке */
.hot-breadcrumbs {
  display: none;
}

.hot-hero {
  position: relative;
  z-index: 3;
  /* Макет: 49px от низа текста до верха блока карточек */
  margin-bottom: 49px;
  text-align: left;
}

.hot-hero.hot-hero--blog {
  margin-bottom: 53px;
}

.hot-hero.hot-hero--media {
  margin-bottom: 47px;
}

.hot-hero-text {
  max-width: 746px;
  position: relative;
  z-index: 1;
}

.hot-hero-title {
  padding-top: 57px;
  margin: 0 0 0.35em;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 50px);
  line-height: 1.12;
  letter-spacing: 0;
  color: #494949;
}

.hot-hero-desc {
  margin: 0;
  font-weight: 500;
  font-size: clamp(0.95rem, 2vw, 18px);
  line-height: 1.67;
  letter-spacing: 0;
  color: #494949;
}

/* Декор вне .hot-hero: слой z-index:1 под сеткой (2), текст героя z-index:3 поверх сетки при наложении */
.hot-hero-visual,
.hot-cta-deco {
  display: block;
}

.hot-hero-visual {
  line-height: 0;
  pointer-events: none;
}

.hot-hero-img {
  display: block;
  width: min(324px, 100%);
  height: auto;
  max-height: 222px;
  object-fit: contain;
}

.hot-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 21px;
  margin-top: 0;
  margin-bottom: 57px;
}

@media (min-width: 1024px) {
  .hot-hero-visual {
    position: absolute;
    top: 27px;
    left: min(calc(var(--hot-page-pad) + 746px + 53px), calc(100% - 324px));
    width: 324px;
    height: 222px;
    z-index: 1;
  }

  .hot-hero-visual .hot-hero-img {
    width: 324px;
    height: 222px;
    max-height: none;
    margin: 0;
    object-fit: contain;
  }

  body.page-blog .blog-page-wrap .hot-hero-visual {
    left: min(calc(var(--hot-page-pad) + 746px + 73px), calc(100% - 280px));
    width: 280px;
    height: 222px;
    top: 0;
  }

  body.page-blog .blog-page-wrap .hot-hero-visual .hot-hero-img {
    width: 280px;
    height: 222px;
    object-fit: cover;
  }

  body.page-news .news-page-wrap .hot-hero-visual {
    left: min(calc(var(--hot-page-pad) + 746px + 12px), calc(100% - 320px));
    width: 320px;
    height: 216px;
    top: 0;
  }

  body.page-news .news-page-wrap .hot-hero-visual .hot-hero-img {
    width: 320px;
    height: 216px;
    object-fit: cover;
  }

  body.page-media .media-page-wrap .hot-hero-visual {
    left: min(calc(var(--hot-page-pad) + 746px + 28px), calc(100% - 337px));
    width: 337px;
    height: 223px;
    top: 0;
    margin: 0;
    z-index: 1;
  }

  body.page-media .media-page-wrap .hot-hero-visual .hot-hero-img {
    width: 337px;
    height: 223px;
    object-fit: contain;
  }
}

.hot-grid .hot-card {
  flex: 0 1 calc((100% - 42px) / 3);
  max-width: calc((100% - 42px) / 3);
  min-width: 0;
  box-sizing: border-box;
  min-height: 0;
  align-self: stretch;
  height: auto;
}

.hot-card {
  background: #fff;
  border: 1px solid #acafaf;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: box-shadow var(--transition), transform var(--transition),
    opacity 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
}

.hot-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.hot-card-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border-radius: 20px 20px 0 0;
}

.hot-card .hot-card-title,
.hot-card .hot-card-desc,
.hot-card .btn-hot-signup {
  margin-left: 25px;
  margin-right: 15px;
}

.hot-card .hot-card-title {
  margin-top: 33px;
  margin-bottom: 0;
}

.hot-card .hot-card-desc {
  margin-top: 14px;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-card .btn-hot-signup {
  margin-top: 27px;
  margin-bottom: 37px;
  flex-shrink: 0;
  align-self: center;
}

.hot-card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* Отрицательные отступы карточек только на мобильных (увеличение карточек на телефонах) */
@media (max-width: 768px) {
  .cta-strip {
    margin-left: -15px;
    margin-right: -15px;
  }
  .card {
    margin-left: -10px;
    margin-right: -10px;
  }
  .news-card {
    margin-left: -10px;
    margin-right: -10px;
  }
  .news-cta {
    margin-left: -15px;
    margin-right: -15px;
  }
  .review-card {
    margin-left: -10px;
    margin-right: -10px;
  }
  .ai-block {
    margin-left: -15px;
    margin-right: -15px;
  }
  .form-block {
    margin-left: -15px;
    margin-right: -15px;
  }
  .hot-card {
    margin-left: -10px;
    margin-right: -10px;
  }
}

.hot-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #494949;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}

.hot-card-desc {
  font-size: 14px;
  font-weight: 500;
  color: #494949;
  line-height: 1.57;
  margin: 0;
  flex: 1;
}

.btn-hot-signup {
  width: 188px;
  max-width: calc(100% - 48px);
  min-height: 46px;
  padding: 0 1.1rem;
  box-sizing: border-box;
  background: #eb2026;
  color: #fff !important;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.22;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: background var(--transition), transform var(--transition),
    box-shadow var(--transition);
}

.btn-hot-signup:hover {
  background: #60b34a;
  transform: translateY(-1px);
}

.btn-hot-signup:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hot-cta {
  position: relative;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.hot-cta.reveal {
  opacity: 1;
  transform: translateY(0);
}

.hot-cta-panel {
  position: relative;
  background: #750000;
  border-radius: 50px;
  padding-left: 76px;
  padding-right: 95px;
  padding-top: 55px;
  padding-bottom: 18px;
  box-sizing: border-box;
}

.hot-cta-deco {
  position: absolute;
  right: -21px;
  top: 19px;
  width: 268px;
  height: 290px;
  pointer-events: none;
  line-height: 0;
}

.hot-cta-deco img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.hot-cta-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 363px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.hot-cta-copy {
  text-align: left;
  color: #fff;
  max-width: 35rem;
  padding-top: 6px;
}

.hot-cta-heading {
  margin: 0 0 1rem;
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 40px);
  line-height: 1.25;
  color: #fff;
}

.hot-cta-lead {
  margin: 0;
  font-weight: 500;
  font-size: clamp(0.95rem, 2vw, 20px);
  line-height: 1.5;
  color: #fff;
}

.hot-cta-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.hot-cta-form .form-group.hot-cta-field {
  margin: 0;
}

.hot-cta-form .hot-cta-field + .hot-cta-field {
  margin-top: 12px;
}

.hot-cta-form .hot-cta-field input {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #f5f5f5;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
  color: #101010;
  text-align: center;
}

.hot-cta-form .hot-cta-field input::placeholder {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #a3a3a3;
  opacity: 1;
  text-align: center;
}

.hot-cta-form .hot-cta-field input::-webkit-input-placeholder {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #a3a3a3;
}

.hot-cta-form .hot-cta-field input::-moz-placeholder {
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  color: #a3a3a3;
  opacity: 1;
}

.hot-cta-form
  .hot-cta-field
  input.hot-cta-input--placeholder-error::placeholder {
  color: #ff0606;
}

.hot-cta-form
  .hot-cta-field
  input.hot-cta-input--placeholder-error::-webkit-input-placeholder {
  color: #ff0606;
}

.hot-cta-form
  .hot-cta-field
  input.hot-cta-input--placeholder-error::-moz-placeholder {
  color: #ff0606;
  opacity: 1;
}

.hot-cta-form .hot-cta-field input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
  border-color: #fff;
}

.hot-cta-submit {
  width: 100%;
  max-width: 364px;
  align-self: flex-start;
  height: 46px;
  margin-top: 36px;
  min-height: 46px;
  border: none;
  border-radius: 10px;
  background: #eb2026;
  color: #fff !important;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.22;
  cursor: pointer;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.15s ease;
}

.hot-cta-submit:hover {
  background: #60b34a;
}

.hot-cta-consent-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 31px;
  max-width: 364px;
}

.hot-cta-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  max-width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.hot-cta-consent-checkbox {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  margin: 2px 0 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 3px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  align-self: flex-start;
}

.hot-cta-consent-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.hot-cta-consent-checkbox:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.hot-cta-consent-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  color: #fff;
  text-align: left;
}

.hot-cta-field-error {
  margin: 8px 0 0;
  padding: 0;
  font-family: "Montserrat", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  color: #ff0606;
}

.hot-cta-consent-error {
  margin-top: 10px;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .hot-grid .hot-card {
    flex: 0 1 calc((100% - 21px) / 2);
    max-width: calc((100% - 21px) / 2);
  }
}

/* «Горячее» мобильный макет 320px */
@media (max-width: 1023px) {
  body.page-hot .hot-page-main {
    padding: 6rem 0 2.5rem;
  }

  body.page-news .news-page-main,
  body.page-blog .blog-page-main,
  body.page-media .media-page-main {
    padding: 6rem 0 2.5rem;
  }

  body.page-hot .hot-page-wrap,
  body.page-news .news-page-wrap,
  body.page-blog .blog-page-wrap,
  body.page-media .media-page-wrap {
    --hot-page-pad: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding-left: var(--hot-page-pad);
    padding-right: var(--hot-page-pad);
  }

  body.page-hot .hot-breadcrumbs,
  body.page-news .hot-breadcrumbs,
  body.page-blog .hot-breadcrumbs,
  body.page-media .hot-breadcrumbs {
    display: block;
    order: 0;
    margin: 0;
    font-family: Montserrat, var(--font-sans);
    font-weight: 500;
    font-size: 10px;
    line-height: 18px;
    letter-spacing: 0;
    color: #494949;
    text-align: left;
  }

  body.page-news .hot-breadcrumbs {
    margin-bottom: 26px;
  }

  body.page-media .hot-breadcrumbs {
    margin-bottom: 13px;
  }

  body.page-hot .hot-breadcrumbs-link,
  body.page-news .hot-breadcrumbs-link,
  body.page-blog .hot-breadcrumbs-link,
  body.page-media .hot-breadcrumbs-link {
    color: #494949;
    text-decoration: none;
  }

  body.page-hot .hot-breadcrumbs-link:hover,
  body.page-news .hot-breadcrumbs-link:hover,
  body.page-blog .hot-breadcrumbs-link:hover,
  body.page-media .hot-breadcrumbs-link:hover {
    text-decoration: underline;
  }

  body.page-hot .hot-breadcrumbs-current,
  body.page-news .hot-breadcrumbs-current,
  body.page-blog .hot-breadcrumbs-current,
  body.page-media .hot-breadcrumbs-current {
    color: #494949;
  }

  body.page-hot .hot-hero-visual,
  body.page-news .news-page-wrap .hot-hero-visual,
  body.page-blog .blog-page-wrap .hot-hero-visual {
    order: 1;
    position: static;
    width: auto;
    max-width: 200px;
    margin: 0 auto 2px;
    align-self: center;
    text-align: center;
    z-index: auto;
    height: 126px;
  }

  /* «СМИ о нас» моб : иллюстрация media-moblie.png ~184×133, справа */
  body.page-media .media-page-wrap .hot-hero-visual {
    order: 1;
    position: static;
    width: 184px;
    max-width: 184px;
    height: 133px;
    max-height: none;
    margin-left: auto;
    margin-right: auto;
    align-self: flex-end;
    text-align: center;
    z-index: auto;
  }

  body.page-hot .hot-hero-visual .hot-hero-img {
    width: 100%;
    max-width: 184px;
    height: auto;
    max-height: none;
    margin: 0 auto;
  }

  body.page-news .news-page-wrap .hot-hero-visual,
  body.page-blog .blog-page-wrap .hot-hero-visual {
    height: 185px;
    max-height: 108px;
  }

  body.page-news .news-page-wrap .hot-hero-visual .hot-hero-img,
  body.page-blog .blog-page-wrap .hot-hero-visual .hot-hero-img {
    width: 185px;
    max-width: 185px;
    height: 108px;
    object-fit: cover;
    max-height: none;
    margin: 0 auto;
  }

  body.page-media .media-page-wrap .hot-hero-visual .hot-hero-img {
    width: 100%;
    max-width: 184px;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin: 0;
  }

  body.page-hot .hot-hero,
  body.page-news .news-page-wrap .hot-hero,
  body.page-blog .blog-page-wrap .hot-hero,
  body.page-media .media-page-wrap .hot-hero {
    order: 2;
    text-align: center;
    margin-bottom: 30px;
  }

  body.page-hot .hot-hero-text,
  body.page-news .news-page-wrap .hot-hero-text,
  body.page-blog .blog-page-wrap .hot-hero-text,
  body.page-media .media-page-wrap .hot-hero-text {
    max-width: 100%;
    margin: 0 auto;
  }

  body.page-hot .hot-hero-title,
  body.page-news .news-page-wrap .hot-hero-title,
  body.page-blog .blog-page-wrap .hot-hero-title,
  body.page-media .media-page-wrap .hot-hero-title {
    padding-top: 0;
    font-size: 24px;
    line-height: 1.25;
    text-align: center;
  }

  body.page-hot .hot-hero-desc,
  body.page-news .news-page-wrap .hot-hero-desc,
  body.page-blog .blog-page-wrap .hot-hero-desc,
  body.page-media .media-page-wrap .hot-hero-desc {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    line-height: 1.57;
    text-align: center;
  }

  body.page-hot .hot-grid {
    order: 3;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  body.page-blog .blog-grid {
    order: 3;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  body.page-news .news-page-wrap .news-grid {
    order: 3;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Секции без order остаются 0 и оказываются между крошками и героем — ставим после picture/header */
  body.page-media #mediaArticlesSection {
    order: 3;
    width: 100%;
  }

  body.page-media #mediaClipsSection {
    order: 4;
    width: 100%;
  }

  body.page-hot .hot-page-wrap > .more-cards-wrap,
  body.page-news .news-page-wrap > .more-cards-wrap,
  body.page-blog .blog-page-wrap > .more-cards-wrap {
    order: 4;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  body.page-news .news-page-wrap > .more-cards-wrap.more-cards-wrap--blog {
    margin-bottom: 30px;
  }

  body.page-hot .hot-cta {
    order: 5;
  }

  body.page-news .news-page-wrap > .hot-cta,
  body.page-blog .blog-page-wrap > .hot-cta,
  body.page-media .media-page-wrap > .hot-cta,
  body.page-post .post-page-main > .wrap > .hot-cta {
    order: 5;
  }

  body.page-hot .hot-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 10px;
  }

  body.page-hot .hot-card-img {
    height: 206px;
    border-radius: 10px 10px 0 0;
  }

  body.page-hot .hot-card .hot-card-title,
  body.page-hot .hot-card .hot-card-desc,
  body.page-hot .hot-card .btn-hot-signup {
    margin-left: 22px;
    margin-right: 22px;
  }

  body.page-hot .hot-card .hot-card-title {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
    min-height: 0;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  body.page-hot .hot-card .hot-card-desc {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
  }

  body.page-hot .hot-card .btn-hot-signup {
    margin-top: 14px;
    margin-bottom: 28px;
    width: 200px;
    max-width: calc(100% - 44px);
  }

  body.page-hot .hot-cta-panel,
  body.page-news .hot-cta-panel,
  body.page-blog .hot-cta-panel,
  body.page-media .hot-cta-panel,
  body.page-post .hot-cta-panel,
  body.page-home .hot-cta-panel {
    border-radius: 10px;
    padding: 28px 22px 24px;
  }

  body.page-hot .hot-cta-deco,
  body.page-news .hot-cta-deco,
  body.page-blog .hot-cta-deco,
  body.page-media .hot-cta-deco,
  body.page-post .hot-cta-deco,
  body.page-home .hot-cta-deco {
    top: auto;
    left: auto;
    right: -20px;
    bottom: -18.58px;
    width: 191px;
    max-width: 191px;
    height: 187px;
  }

  body.page-hot .hot-cta-layout,
  body.page-news .hot-cta-layout,
  body.page-blog .hot-cta-layout,
  body.page-home .hot-cta-layout {
    grid-template-columns: 1fr;
    gap: 0.6875rem;
  }

  body.page-media .hot-cta-layout,
  body.page-post .post-page-main > .wrap .hot-cta-layout {
    gap: 0;
    grid-template-columns: 1fr;
  }

  body.page-hot .hot-cta-copy,
  body.page-news .hot-cta-copy,
  body.page-blog .hot-cta-copy,
  body.page-media .hot-cta-copy,
  body.page-post .hot-cta-copy,
  body.page-home .hot-cta-copy {
    text-align: center;
    padding-top: 0;
    max-width: none;
    margin: 0 auto;
  }

  body.page-hot .hot-cta-heading,
  body.page-news .hot-cta-heading,
  body.page-blog .hot-cta-heading,
  body.page-media .hot-cta-heading,
  body.page-post .hot-cta-heading,
  body.page-home .hot-cta-heading {
    font-size: 24px;
    margin-bottom: 0.625rem;
    text-align: left;
  }

  body.page-hot .hot-cta-lead,
  body.page-news .hot-cta-lead,
  body.page-blog .hot-cta-lead,
  body.page-media .hot-cta-lead,
  body.page-post .hot-cta-lead,
  body.page-home .hot-cta-lead {
    font-size: 14px;
    line-height: 1.57;
    text-align: left;
  }

  body.page-news .hot-cta-lead,
  body.page-blog .hot-cta-lead,
  body.page-media .hot-cta-lead,
  body.page-post .hot-cta-lead,
  body.page-home .hot-cta-lead {
    margin-bottom: 10px;
  }

  body.page-hot .hot-cta-form,
  body.page-news .hot-cta-form,
  body.page-blog .hot-cta-form,
  body.page-media .hot-cta-form,
  body.page-post .hot-cta-form,
  body.page-home .hot-cta-form {
    max-width: 236px;
    margin: 0 auto;
  }

  body.page-hot .hot-cta-submit,
  body.page-news .hot-cta-submit,
  body.page-blog .hot-cta-submit,
  body.page-media .hot-cta-submit,
  body.page-post .hot-cta-submit,
  body.page-home .hot-cta-submit {
    margin-top: 12px;
    width: 100%;
    max-width: none;
    align-self: stretch;
  }

  body.page-hot .hot-cta-consent-wrap,
  body.page-news .hot-cta-consent-wrap,
  body.page-blog .hot-cta-consent-wrap,
  body.page-media .hot-cta-consent-wrap,
  body.page-post .hot-cta-consent-wrap,
  body.page-home .hot-cta-consent-wrap {
    margin-top: 18px;
    max-width: none;
    width: 100%;
  }

  /* Карточка 280px; flex (не grid) — иначе последняя карточка в неполном ряду садится в 1-ю колонку и не центрируется */
  body.page-blog .blog-grid,
  body.page-news .news-page-wrap .news-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Сброс десктопного flex-direction: column — иначе карточки идут строго по одной в ряд */
  body.page-blog .blog-grid,
  body.page-news .news-page-wrap .news-grid {
    flex-direction: row;
    align-items: stretch;
  }

  body.page-blog .blog-grid .blog-list-card-link,
  body.page-news .news-page-wrap .news-grid .news-list-card-link {
    display: flex;
    flex-direction: column;
    flex: 0 1 280px;
    width: auto;
    max-width: min(280px, 100%);
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }

  body.page-blog .blog-grid .news-card.blog-list-card,
  body.page-news .news-page-wrap .news-grid .news-card.news-list-card {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto;
    border-radius: 10px;
  }

  body.page-blog .blog-grid .blog-list-card-media,
  body.page-news .news-page-wrap .news-grid .news-list-card-media {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    max-width: none;
  }

  body.page-blog .blog-grid .blog-list-card-media .thumb,
  body.page-news .news-page-wrap .news-grid .news-list-card-media .thumb {
    min-height: 206px;
    height: 206px;
    border-radius: 10px 10px 0 0;
  }

  body.page-blog .blog-grid .blog-list-card-body,
  body.page-news .news-page-wrap .news-grid .news-list-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
    text-align: center;
  }

  body.page-news .news-page-wrap .news-grid .news-list-card-body {
    padding-top: 17px;
    padding-bottom: 20px;
    padding-left: 22px;
    padding-right: 20px;
  }

  body.page-blog .blog-grid .blog-list-card-body {
    padding-top: 24px;
    padding-bottom: 29px;
    padding-left: 22px;
    padding-right: 22px;
  }

  body.page-news .news-page-wrap .news-grid .news-list-card-date {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
  }

  body.page-blog .blog-grid .blog-list-card-body h3,
  body.page-news .news-page-wrap .news-grid .news-list-card-body h3 {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.5;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    text-align: center;
  }

  body.page-blog .blog-grid .blog-list-card-lede,
  body.page-news .news-page-wrap .news-grid .news-list-card-lede {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    max-width: none;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  body.page-blog .blog-grid .blog-list-card-body .card-read-link,
  body.page-news
    .news-page-wrap
    .news-grid
    .news-list-card-body
    .card-read-link {
    margin-top: auto;
    align-self: center;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* 620px контент: 20+280+20+280+20 — две карточки по 280px */
@media (max-width: 1023px) and (min-width: 620px) {
  body.page-hot .hot-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: calc(280px + 20px + 280px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.page-hot .hot-grid .hot-card {
    flex: 0 0 280px;
    max-width: 280px;
  }
}

@media (max-width: 619px) {
  body.page-hot .hot-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 30px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  body.page-hot .hot-grid .hot-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 900px) {
  .hot-hero-visual {
    text-align: center;
  }

  .hot-cta-layout {
    grid-template-columns: 1fr;
  }

  .hot-cta-submit,
  .hot-cta-consent-wrap {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  body.page-hot .hot-page-main {
    padding: 5.375rem 0 0.5rem;
  }

  body.page-blog .blog-page-main {
    padding: 5.375rem 0 1rem;
  }

  body.page-news .news-page-main {
    padding: 5.375rem 0 1.25rem;
  }

  body.page-media .media-page-main {
    padding: 5.375rem 0 1rem;
  }

  body.page-hot .hot-page-wrap {
    --hot-page-pad: 20px;
    padding-left: var(--hot-page-pad);
    padding-right: var(--hot-page-pad);
  }

  body.page-news .news-page-wrap,
  body.page-blog .blog-page-wrap,
  body.page-media .media-page-wrap {
    --hot-page-pad: 20px;
    padding-left: var(--hot-page-pad);
    padding-right: var(--hot-page-pad);
  }

  body.page-hot .hot-grid {
    gap: 30px;
  }

  body.page-news .news-page-wrap .news-grid,
  body.page-blog .blog-grid,
  body.page-media .media-page-wrap .media-articles-grid {
    gap: 30px;
  }

  body.page-hot .hot-card-img {
    height: 206px;
  }

  body.page-hot .hot-cta-panel,
  body.page-news .hot-cta-panel,
  body.page-blog .hot-cta-panel,
  body.page-media .hot-cta-panel,
  body.page-post .hot-cta-panel,
  body.page-home .hot-cta-panel {
    border-radius: 10px;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

@media (max-width: 768px) {
  .hot-cta-form .hot-cta-field input {
    min-height: 40px !important;
    height: 40px;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  .hot-cta-panel .hot-cta-submit.btn-submit {
    min-height: 46px !important;
    height: 46px;
    font-size: 14px !important;
    padding: 0 1.1rem !important;
  }
}

/* Hot signup modal */
.hot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 1rem;
}
.hot-modal.active {
  opacity: 1;
  visibility: visible;
}
.hot-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.hot-modal-content {
  position: relative;
  background: var(--kompot-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hot-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--kompot-gray);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  border-radius: var(--radius-sm);
}
.hot-modal-close:hover {
  color: var(--kompot-dark);
  background: var(--kompot-bg);
}
.hot-modal-body {
  padding: 2rem 3rem 2rem 2rem;
  overflow-y: auto;
}
.hot-modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kompot-dark);
  margin: 0 0 0.5rem 0;
}
.hot-modal-hint {
  font-size: 0.9rem;
  color: var(--kompot-gray);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

/* ========== News modal ========== */
.news-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
  padding: 1rem;
  box-sizing: border-box;
}
.news-modal.active {
  opacity: 1;
  visibility: visible;
}
.news-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.news-modal-content {
  position: relative;
  background: var(--kompot-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s var(--ease-out);
  box-sizing: border-box;
}
.news-modal.active .news-modal-content {
  transform: scale(1) translateY(0);
}
.news-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: var(--kompot-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 10;
  transition: background var(--transition), color var(--transition),
    transform var(--transition);
}
.news-modal-close:hover {
  background: var(--kompot-red);
  color: var(--kompot-white);
  transform: rotate(90deg);
}
.news-modal-close:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
}
.news-modal-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  width: 100px;
  padding: 2rem 0.75rem;
  background: linear-gradient(
    135deg,
    var(--kompot-red),
    var(--kompot-red-dark)
  );
  color: var(--kompot-white);
  text-align: center;
  flex-shrink: 0;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.news-modal-day {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.news-modal-month {
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.95;
}
.news-modal-body {
  flex: 1;
  padding: 2rem 3.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 90vh;
}
.news-modal-image {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  display: block;
}
.news-modal-image[hidden] {
  display: none;
}
.news-modal-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
  color: var(--kompot-dark);
}
.news-modal-description {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.8;
  color: var(--kompot-gray);
  margin: 0;
  white-space: pre-wrap;
}
@media (max-width: 767px) {
  .news-modal-content {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-lg);
    flex-direction: column;
  }
  .news-modal-date {
    min-width: 100%;
    width: 100%;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-direction: row;
    gap: 1rem;
  }
  .news-modal-body {
    padding: 1.5rem 3rem 1.5rem 1.5rem;
    max-height: calc(95vh - 120px);
  }
  .news-modal-close {
    width: 36px;
    height: 36px;
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* ========== Utility ========== */
.pt {
  padding-top: 5rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.news-more-wrap {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0;
}
.link-more {
  display: inline-block;
  color: var(--kompot-red);
  font-weight: 600;
  margin-top: 1rem;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.link-more:hover {
  text-decoration: underline;
}
.link-more:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Кнопка «Все новости» - по центру, в виде кнопки */
.btn-more-news {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.5rem !important;
  margin-top: 0 !important;
  min-height: 44px;
  background: var(--kompot-red);
  color: var(--kompot-white) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: background var(--transition), transform var(--transition),
    box-shadow var(--transition);
}
.btn-more-news:hover {
  background: var(--kompot-red-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
  text-decoration: none !important;
}
.btn-more-news:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 3px;
}

/* Блок «Смотреть ещё» под сетками новостей, блога, горячего */
.more-cards-wrap {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
.btn-more-cards {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  min-height: 44px;
  background: transparent;
  color: var(--kompot-red);
  border: 2px solid var(--kompot-red);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
}
.btn-more-cards:hover {
  color: var(--kompot-red-dark);
  border-color: var(--kompot-red-dark);
  background: var(--kompot-red-soft);
}
.btn-more-cards .more-cards-arrow {
  font-size: 0.75em;
  transition: transform var(--transition);
}
.btn-more-cards:hover .more-cards-arrow {
  transform: translateY(2px);
}
.btn-more-cards:focus-visible {
  outline: 2px solid var(--kompot-red);
  outline-offset: 4px;
}

/* ========== Мобильная версия ========== */
@media (max-width: 768px) {
  :root {
    --container: min(100%, 100% - 1.5rem);
  }
  html {
    -webkit-text-size-adjust: 100%;
  }
  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }
  .site-header.scrolled {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .site-header-subpage.scrolled {
    height: 69px;
    padding-top: 0;
  }
  .header-inner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  main {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  body {
    font-size: 1rem;
    line-height: 1.55;
  }
  #about,
  #achievements,
  #films,
  #projects,
  #reviews,
  #team,
  #contacts {
    scroll-margin-top: 5rem;
  }
  .hero {
    min-height: 60vh;
    padding-top: calc(5.5rem + env(safe-area-inset-top, 0));
    padding-right: 1.25rem;
    padding-bottom: 3rem;
    padding-left: 1.25rem;
  }
  .hero-logo {
    width: 200px;
    max-width: 85vw;
    height: auto;
  }
  .hero h1 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    line-height: 1.25;
  }
  .hero .btn,
  .btn-hero-cta {
    min-height: 52px;
    padding: 1.05rem 1.65rem !important;
    font-size: 1.0625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .section {
    padding: 2.5rem 1.25rem;
  }
  /* «Достижения»: нижний отступ 11px; выше специфичность, чем у .section в этом же и в 480px-блоке */
  #achievements.achievements-section.section {
    padding-bottom: 11px;
  }
  body.page-home #films.home-cinema-section {
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: clamp(2rem, 4vw, 3rem);
    box-sizing: border-box;
    padding-bottom: 0;
  }
  body.page-home #projects.home-projects-section {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    padding-bottom: 40px;
  }
  body.page-home #reviews.home-reviews-section {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    padding-bottom: 0;
    padding-top: 0;
  }
  .section-title {
    font-size: clamp(1.5rem, 5vw, 1.85rem);
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
  }
  .section-desc:not(.achievements-subtitle):not(.home-cinema-subtitle):not(
      .home-projects-subtitle
    ):not(.home-team-subtitle) {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
  }
  .wrap {
    padding: 0 0.25rem;
  }
  body.page-home #projects .wrap.home-projects-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.page-home #reviews .wrap.home-reviews-wrap {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-top: 0;
  }
  .card-body {
    padding: 1.25rem 1rem;
  }
  .card-body h3 {
    font-size: 1.05rem;
  }
  .card-body p {
    font-size: 0.9rem;
  }
  .cards-grid,
  .news-grid,
  .blog-grid {
    gap: 1.25rem;
  }

  body.page-hot .hot-grid {
    gap: 30px;
  }

  .cta-strip {
    padding: 1.5rem 1.25rem;
    margin-top: 2rem;
    border-radius: var(--radius-sm);
  }
  .cta-strip-text {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .btn-cta-strip {
    min-height: 48px;
    padding: 0.9rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .contact-wrap {
    gap: 1.75rem;
  }
  .form-block {
    padding: 1.5rem 1.25rem;
  }
  .form-block h3 {
    font-size: 1.15rem;
  }
  .form-group
    input:where(
      :not([type]),
      [type="text"],
      [type="tel"],
      [type="email"],
      [type="url"],
      [type="search"],
      [type="password"],
      [type="number"],
      [type="date"],
      [type="time"]
    ),
  .form-group textarea {
    min-height: 48px;
    padding: 0.9rem 1rem;
    font-size: 14px;
  }
  .form-group textarea {
    min-height: 120px;
  }
  .btn-submit {
    min-height: 54px;
    padding: 1.05rem;
    font-size: 1.0625rem;
  }
  .nav-mobile-links a {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .nav-mobile-phone {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
  }
  .nav-mobile-cta-primary {
    min-height: 52px;
    font-size: 14px;
  }
  .nav-mobile-close {
    min-width: 44px;
    min-height: 44px;
  }
  .nav-mobile-cta {
    min-height: 48px;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
  }
  .menu-toggle {
    min-width: 48px;
    min-height: 48px;
  }
  .about-text p {
    font-size: 1rem;
  }
  .about-media {
    gap: 1.5rem;
  }
  .review-card {
    padding: 1.25rem 1rem;
  }
  .review-card .author-photo {
    width: 48px;
    height: 48px;
  }
  .more-cards-wrap {
    margin-top: 1.75rem;
    margin-bottom: 1.25rem;
  }
  .btn-more-cards {
    min-height: 48px;
    padding: 0.6rem 1.25rem;
  }

  body.page-blog .more-cards-wrap--blog {
    margin-top: 0;
    margin-bottom: 24px;
  }

  body.page-blog .more-cards-wrap--blog .btn-more-cards,
  body.page-news .more-cards-wrap--blog .btn-more-cards,
  body.page-media .more-cards-wrap--blog .btn-more-cards {
    height: 22px;
    min-height: 22px;
    overflow: visible;
    padding: 0;
    font-size: 12px;
    line-height: 17px;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 2rem 1rem;
  }
  .wrap {
    padding: 0;
  }

  body.page-hot .hot-page-wrap {
    --hot-page-pad: 20px;
    padding-left: var(--hot-page-pad);
    padding-right: var(--hot-page-pad);
  }
  .cta-strip {
    margin-left: 0;
    margin-right: 0;
    padding: 1.25rem 1rem;
  }
  .card,
  .news-card,
  .review-card,
  .hot-card {
    margin-left: 0;
    margin-right: 0;
  }
  .ai-block,
  .form-block {
    margin-left: 0;
    margin-right: 0;
  }
  .news-cta {
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem 1rem;
  }

  body.page-hot .hot-cta,
  body.page-blog .hot-cta,
  body.page-media .hot-cta {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  .section-title {
    font-size: 1.4rem;
  }
  .hero {
    padding-top: calc(5rem + env(safe-area-inset-top, 0));
    padding-right: 1rem;
    padding-bottom: 2.5rem;
    padding-left: 1rem;
  }
}

.header-brand-group {
  display: flex;
  align-items: center;
  gap: 16px;

  @media (max-width: 1210px) {
    gap: 7px;
  }
}