/* =========================================================================
   AMAKS — «С Новым годом 2027», вёрстка макета Figma (node 2469:81)
   Макет: 1440 × 4357 px. Все координаты перенесены 1:1 из Figma,
   адаптив реализован пропорциональным масштабированием (js/main.js).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Шрифты
   Оригинальные шрифты макета (Geniral font, Majestic, Zing Script Rust,
   Circe) — коммерческие и в макет не входят. Положите их файлы в /fonts,
   и они подхватятся автоматически; иначе браузер возьмёт ближайшие
   кириллические аналоги из Google Fonts (см. <link> в index.html).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Geniral font";
  src: url("../fonts/geniral.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Majestic";
  src: url("../fonts/majestic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Zing Script";
  src: url("../fonts/zing-script-rust-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Circe";
  src: url("../fonts/circe-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Circe";
  src: url("../fonts/circe-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Circe";
  src: url("../fonts/circe-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Токены
   ------------------------------------------------------------------------- */
.ng27 {
  --design-width: 1440;
  --design-height: 4357;

  /* цвета */
  --cream: #fdead7;
  --green: #26413a;
  --green-light: #30544b;
  --blue: #629ab1;
  --blue-light: #598da3;
  --orange: #e7863f;
  --orange-dark: #e97622;
  --wine: #670708;
  --red: #ca060f;
  --ink: #303030;
  --divider: rgba(217, 217, 217, .2);

  /* типографика */
  --font-display: "Geniral font", "Oswald", "Yeseva One", sans-serif;
  --font-script: "Majestic", "Playfair Display", Georgia, serif;
  --font-hand: "Zing Script", "Marck Script", "Caveat", cursive;
  --font-sans: "Circe", "Nunito Sans", "Inter", system-ui, sans-serif;
  --font-inter: "Inter", "Nunito Sans", system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   3. Сброс и каркас
   ------------------------------------------------------------------------- */
.ng27.ng27,
.ng27.ng27 *,
.ng27.ng27 *::before,
.ng27.ng27 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  float: none;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: baseline;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  list-style: none;
  opacity: revert;
  visibility: revert;
  transform: none;
  filter: none;
  transition: none;
  animation: none;
}

/* Ключ ко всей вёрстке: --u = один пиксель макета.
   Считается от ширины КОНТЕЙНЕРА (100cqw), а не окна, поэтому блок
   подстраивается под ту колонку, в которую его вставили на сайте.
   Пока контейнер шире 1440 CSS-пикселей, --u = 1px и макет показан
   один в один; на узких --u пропорционально уменьшается, и композиция
   сжимается целиком, без горизонтальной прокрутки.
   Все размеры ниже записаны числами из Figma: calc(469 * var(--u)) —
   это те самые 469 px макета. */
.ng27 {
  container: ng27 / inline-size;
  overflow-x: hidden;
  background: var(--cream);
  -webkit-text-size-adjust: 100%;

  /* наследуемые свойства сайта-хозяина дальше этой границы не проходят */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1.2;
  text-align: left;
  text-indent: 0;
  white-space: normal;
  word-spacing: normal;
  direction: ltr;

}

.ng27 p,
.ng27 h1,
.ng27 h2,
.ng27 h3,
.ng27 ul {
  margin: 0;
  padding: 0;
}

h1:before {
  display: none !important;
}

.ng27 ul {
  list-style: none;
}

/* display возвращаем к значению браузера, отменяя правила сайта-хозяина,
   но картинок не касаемся: у них свой display: block ниже, и он должен
   спокойно проигрывать собственным .lines / .swirl / .stamp { display: none } */
.ng27.ng27 *:where(:not(img)),
.ng27.ng27 *:where(:not(img))::before,
.ng27.ng27 *:where(:not(img))::after {
  display: revert;
}

.ng27 img {
  display: block;
  border: 0;
}

.ng27 a {
  text-decoration: none;
  color: inherit;
}

.ng27 .page_ny {
  --u: min(1px, 100cqw / 1440);
  position: relative;
  width: calc(1440 * var(--u));
  height: calc(4357 * var(--u));
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
}

/* Секции-обёртки нужны только мобильной раскладке: на широких экранах они
   не создают бокса, и потомки позиционируются относительно .page_ny, как в Figma. */
.ng27 .s,
.ng27 .hero-photos,
.ng27 .prog-photos {
  display: contents;
}

/* все прямые потомки макета и секций позиционируются абсолютно */
.ng27 .page_ny>*,
.ng27 .s>*,
.ng27 .hero-card>*,
.ng27 .hero-photos>*,
.ng27 .section-program>*,
.ng27 .prog-photos>*,
.ng27 .section-price>*,
.ng27 .promo>*,
.ng27 .card>*,
.ng27 .menu-card>* {
  position: absolute;
}

/* обрезающая обёртка для изображений, «подрезанных» во фрейме Figma */
.ng27 .crop {
  overflow: hidden;
  pointer-events: none;
}

.ng27 .crop>img {
  position: absolute;
  max-width: none;
}

/* -------------------------------------------------------------------------
   4. Кнопки
   ------------------------------------------------------------------------- */
.ng27 .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--u)) calc(82 * var(--u));
  border-radius: calc(32 * var(--u));
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
  text-align: center;
  white-space: nowrap;
  color: #fff;
  /* Сдвиг при нажатии — отдельной переменной. Если писать его прямо в
     transform у :active, у центрированных кнопок затирается
     translateX(-50%) и кнопка прыгает вправо. */
  --press: 0px;
  transform: translateY(var(--press));
  transition: filter .2s ease, transform .2s ease;
}

.ng27 .btn:hover {
  filter: brightness(1.1);
}

.ng27 .btn:active {
  --press: calc(1 * var(--u));
}

.ng27 .btn--sm {
  width: calc(250 * var(--u));
  padding: calc(7 * var(--u)) calc(31 * var(--u));
  border-radius: calc(13 * var(--u));
}

/* -------------------------------------------------------------------------
   5. Фон, ленты, общий декор
   ------------------------------------------------------------------------- */
.ng27 .bg-base {
  left: 0;
  top: 0;
  width: calc(1440 * var(--u));
  height: calc(4357 * var(--u));
  background: var(--cream);
}

.ng27 .ribbon {
  left: calc(-105 * var(--u));
  width: calc(1650 * var(--u));
  height: calc(22 * var(--u));
}

.ng27 .ribbon-top {
  top: 0;
}

.ng27 .ribbon-bottom {
  top: calc(4335 * var(--u));
}

.ng27 .lines {
  width: calc(1085 * var(--u));
  height: calc(1352 * var(--u));
}

.ng27 .lines-a {
  left: calc(9 * var(--u));
  top: calc(526 * var(--u));
}

.ng27 .lines-b {
  left: calc(485 * var(--u));
  top: calc(1734 * var(--u));
}

/* «конфета» */
.ng27 .deco-candy-a {
  left: calc(509 * var(--u));
  top: calc(772 * var(--u));
  width: calc(210 * var(--u));
  height: calc(206 * var(--u));
}

.ng27 .deco-candy-a>img {
  left: calc(-.06 * var(--u));
  top: calc(-36 * var(--u));
  width: calc(210.1 * var(--u));
  height: calc(299 * var(--u));
}

.ng27 .deco-candy-b {
  left: calc(122 * var(--u));
  top: calc(1996 * var(--u));
  width: calc(210 * var(--u));
  height: calc(204 * var(--u));
}

.ng27 .deco-candy-b>img {
  left: calc(-.06 * var(--u));
  top: calc(-36 * var(--u));
  width: calc(210.1 * var(--u));
  height: calc(299 * var(--u));
}

/* звёзды-блёстки (один и тот же спрайт, разные кадры) */
.ng27 .star>img {
  width: calc(366 * var(--u));
  height: calc(520.9 * var(--u));
}

.ng27 .star-a {
  left: calc(259 * var(--u));
  top: calc(325 * var(--u));
  width: calc(131 * var(--u));
  height: calc(221 * var(--u));
}

.ng27 .star-a>img {
  left: calc(-226.8 * var(--u));
  top: calc(-15 * var(--u));
}

.ng27 .star-b {
  left: calc(1005 * var(--u));
  top: calc(77 * var(--u));
  width: calc(131 * var(--u));
  height: calc(221 * var(--u));
}

.ng27 .star-b>img {
  left: calc(-227.5 * var(--u));
  top: calc(-90.7 * var(--u));
}

.ng27 .star-c {
  left: calc(656 * var(--u));
  top: calc(876 * var(--u));
  width: calc(131 * var(--u));
  height: calc(221 * var(--u));
}

.ng27 .star-c>img {
  left: calc(-22 * var(--u));
  top: calc(-25.4 * var(--u));
}

.ng27 .star-d {
  left: calc(1293 * var(--u));
  top: calc(2251 * var(--u));
  width: calc(131 * var(--u));
  height: calc(221 * var(--u));
}

.ng27 .star-d>img {
  left: calc(-22 * var(--u));
  top: calc(-25.4 * var(--u));
}

.ng27 .star-e {
  left: calc(310 * var(--u));
  top: calc(2127 * var(--u));
  width: calc(89 * var(--u));
  height: calc(97 * var(--u));
}

.ng27 .star-e>img {
  left: calc(-49.9 * var(--u));
  top: calc(-29.3 * var(--u));
}

.ng27 .star-f {
  left: calc(52 * var(--u));
  top: calc(1032 * var(--u));
  width: calc(131 * var(--u));
  height: calc(221 * var(--u));
}

.ng27 .star-f>img {
  left: calc(-22 * var(--u));
  top: calc(-25.4 * var(--u));
}

.ng27 .star-g {
  left: calc(1260 * var(--u));
  top: calc(757 * var(--u));
  width: calc(131 * var(--u));
  height: calc(221 * var(--u));
}

.ng27 .star-g>img {
  left: calc(-226.8 * var(--u));
  top: calc(-15 * var(--u));
}

/* печати и завиток */
.ng27 .swirl {
  left: calc(139 * var(--u));
  top: calc(1192.9 * var(--u));
  width: calc(406 * var(--u));
  height: calc(23.5 * var(--u));
}

.ng27 .stamp {
  object-fit: cover;
}

.ng27 .stamp-a {
  left: calc(720.6 * var(--u));
  top: calc(1096.6 * var(--u));
  width: calc(154.285 * var(--u));
  height: calc(154.285 * var(--u));
  transform: rotate(-5.93deg);
}

.ng27 .stamp-b {
  left: calc(766.1 * var(--u));
  top: calc(2357.6 * var(--u));
  width: calc(74.937 * var(--u));
  height: calc(74.937 * var(--u));
  transform: rotate(-5.93deg);
}

.ng27 .goat {
  left: calc(968 * var(--u));
  top: calc(1035 * var(--u));
  width: calc(326 * var(--u));
  height: calc(249 * var(--u));
}

.ng27 .goat>img {
  left: 0;
  top: calc(-112 * var(--u));
  width: calc(326 * var(--u));
  height: calc(463.9 * var(--u));
}

.ng27 .postcard {
  left: calc(607 * var(--u));
  top: calc(2128 * var(--u));
  width: calc(197 * var(--u));
  height: calc(278 * var(--u));
}

.ng27 .postcard>img {
  left: 0;
  top: calc(-2.3 * var(--u));
  width: calc(197 * var(--u));
  height: calc(280.3 * var(--u));
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */
.ng27 .hero-card {
  left: calc(60 * var(--u));
  top: calc(87 * var(--u));
  width: calc(1320 * var(--u));
  height: calc(771 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--green);
}

.ng27 .hero-bottle {
  left: calc(982 * var(--u));
  top: calc(67 * var(--u));
  width: calc(410 * var(--u));
  height: calc(307 * var(--u));
  object-fit: cover;
}

/* --- Крупные заголовки ---------------------------------------------------
   Фирменный Geniral намного уже свободных аналогов, поэтому для каждого
   заголовка с экспорта макета сняты три величины: высота прописной, ширина
   надписи и положение базовой линии. Под них подобраны кегль, scaleX и top —
   надпись занимает ровно тот же прямоугольник, что в Figma.
   Положите фирменные шрифты в /fonts — тогда у каждого такого правила нужно
   убрать transform/transform-origin и вернуть размеры из комментария.
   ------------------------------------------------------------------------- */
/* --- Заголовок первого экрана -------------------------------------------
   Geniral и Majestic — коммерческие и в выгрузку не входят, а аналоги дают
   другой рисунок букв. Поэтому обе строки выгружены из Figma в SVG
   (node 2469:90 и 2469:91) — текст там уже в кривых, так что шрифт не нужен,
   начертание в точности как у дизайнера и не мылится на любом зуме.
   Координаты взяты из самого SVG: translate(-475 -200) и
   translate(-391.008 -354.234) — это позиции слоёв на странице.
   Координаты считаются от .hero-card (60, 87).
   ------------------------------------------------------------------------- */
.ng27 .hero-title {
  left: calc(415 * var(--u));
  top: calc(113 * var(--u));
  /* на странице: 475, 200 */
  width: calc(491 * var(--u));
  height: calc(216 * var(--u));
}

.ng27 .hero-title-script {
  left: calc(331.008 * var(--u));
  top: calc(267.234 * var(--u));
  /* на странице: 391.008, 354.234 */
  width: calc(633 * var(--u));
  height: calc(170 * var(--u));
}

.ng27 .hero-title img,
.ng27 .hero-title-script img {
  width: 100%;
  height: 100%;
}

.ng27 .hero-lead {
  left: calc(660 * var(--u));
  top: calc(489 * var(--u));
  transform: translateX(-50%);
  width: calc(624 * var(--u));
  font-family: var(--font-hand);
  font-size: calc(24 * var(--u));
  line-height: 1.15;
  letter-spacing: calc(-.36 * var(--u));
  text-align: center;
  color: var(--cream);
}

.ng27 .hero-btn {
  left: calc(660.5 * var(--u));
  top: calc(622 * var(--u));
  transform: translateX(-50%) translateY(var(--press));
  background: var(--wine);
  color: var(--cream);
}

.ng27 .hero-photo-dinner {
  left: calc(52 * var(--u));
  top: calc(544 * var(--u));
  width: calc(315 * var(--u));
  height: calc(434 * var(--u));
}

.ng27 .hero-photo-dinner>img {
  left: calc(-123.9 * var(--u));
  top: 0;
  width: calc(577 * var(--u));
  height: calc(434 * var(--u));
}

.ng27 .hero-photo-tree {
  left: calc(1139.2 * var(--u));
  top: calc(253.1 * var(--u));
  width: calc(308.735 * var(--u));
  height: calc(424.288 * var(--u));
  transform: rotate(10.99deg);
}

.ng27 .hero-photo-tree>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ng27 .cocktail {
  left: calc(38 * var(--u));
  top: calc(67 * var(--u));
  width: calc(243 * var(--u));
  height: calc(346 * var(--u));
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   7. Рукописные текстовые блоки
   ------------------------------------------------------------------------- */
.ng27 .text-31dec,
.ng27 .text-photozone,
.ng27 .text-onenight,
.ng27 .text-vocal,
.ng27 .text-goat {
  font-family: var(--font-hand);
  font-size: calc(24 * var(--u));
  line-height: 1.15;
  letter-spacing: calc(-.36 * var(--u));
  color: var(--ink);
}

.ng27 .text-31dec {
  left: calc(127 * var(--u));
  top: calc(997 * var(--u));
  width: calc(510 * var(--u));
}

.ng27 .text-goat {
  left: calc(796 * var(--u));
  top: calc(895 * var(--u));
  width: calc(516 * var(--u));
  text-align: right;
}

.ng27 .text-onenight {
  left: calc(849 * var(--u));
  top: calc(2179 * var(--u));
  width: calc(516 * var(--u));
}

.ng27 .text-photozone {
  left: calc(882 * var(--u));
  top: calc(2305 * var(--u));
  width: calc(434 * var(--u));
}

.ng27 .text-vocal {
  left: calc(51 * var(--u));
  top: calc(2245 * var(--u));
  width: calc(536 * var(--u));
}

/* -------------------------------------------------------------------------
   8. Секция «Новогодняя программа»
   ------------------------------------------------------------------------- */
.ng27 .section-program {
  left: calc(54 * var(--u));
  top: calc(1285 * var(--u));
  width: calc(1333 * var(--u));
  height: calc(810 * var(--u));
  overflow: hidden;
}

.ng27 .prog-bg {
  left: calc(13 * var(--u));
  top: calc(8 * var(--u));
  width: calc(1320 * var(--u));
  height: calc(798 * var(--u));
}

.ng27 .prog-branch {
  left: calc(1095 * var(--u));
  top: calc(8 * var(--u));
  width: calc(229 * var(--u));
  height: calc(326 * var(--u));
  object-fit: cover;
}

.ng27 .prog-title {
  left: calc(673 * var(--u));
  top: calc(85.76 * var(--u));
  /* макет: top 96 / font-size 150; прописная 107, ширина 662 */
  transform-origin: 50% 0;
  transform: translateX(-50%) scaleX(.456307);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(130.49 * var(--u));
  line-height: 1;
  text-align: center;
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .prog-text {
  left: calc(667 * var(--u));
  top: calc(291 * var(--u));
  transform: translateX(-50%);
  width: calc(760 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1;
  letter-spacing: calc(-.36 * var(--u));
  text-align: center;
  color: var(--cream);
}

.ng27 .prog-meet {
  left: calc(667.5 * var(--u));
  top: calc(428 * var(--u));
  transform: translateX(-50%);
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: calc(-.36 * var(--u));
  text-align: center;
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .prog-star-1 {
  left: calc(865 * var(--u));
  top: calc(378 * var(--u));
  width: calc(238 * var(--u));
  height: calc(244 * var(--u));
}

.ng27 .prog-star-1>img {
  left: calc(-32.9 * var(--u));
  top: calc(-200.6 * var(--u));
  width: calc(489.4 * var(--u));
  height: calc(697.2 * var(--u));
}

.ng27 .prog-star-2 {
  left: calc(165 * var(--u));
  top: calc(337 * var(--u));
  width: calc(159 * var(--u));
  height: calc(164 * var(--u));
}

.ng27 .prog-star-2>img {
  left: calc(-310.9 * var(--u));
  top: calc(-162.2 * var(--u));
  width: calc(489.4 * var(--u));
  height: calc(697.2 * var(--u));
}

.ng27 .prog-candy {
  left: calc(991 * var(--u));
  top: calc(536 * var(--u));
  width: calc(320 * var(--u));
  height: calc(263 * var(--u));
}

.ng27 .prog-candy>img {
  left: calc(-337.7 * var(--u));
  top: calc(-229.4 * var(--u));
  width: calc(657.7 * var(--u));
  height: calc(492.4 * var(--u));
}

.ng27 .prog-snowman {
  left: calc(212 * var(--u));
  top: calc(582 * var(--u));
  width: calc(204 * var(--u));
  height: calc(204 * var(--u));
  object-fit: cover;
  transform: scaleX(-1);
}

.ng27 .prog-photo-singer {
  left: calc(1049.7 * var(--u));
  top: calc(62.8 * var(--u));
  width: calc(243.049 * var(--u));
  height: calc(318.746 * var(--u));
  transform: rotate(9.52deg);
}

.ng27 .prog-photo-singer>img {
  left: calc(-108 * var(--u));
  top: calc(-12.5 * var(--u));
  width: calc(471.4 * var(--u));
  height: calc(353.5 * var(--u));
}

.ng27 .prog-photo-a {
  left: calc(13 * var(--u));
  top: calc(372 * var(--u));
  width: calc(343 * var(--u));
  height: calc(419 * var(--u));
}

.ng27 .prog-photo-a>img {
  left: 0;
  top: calc(-69.1 * var(--u));
  width: calc(343 * var(--u));
  height: calc(488.2 * var(--u));
}

.ng27 .prog-photo-b {
  left: calc(34 * var(--u));
  top: calc(27 * var(--u));
  width: calc(245 * var(--u));
  height: calc(345 * var(--u));
}

.ng27 .prog-photo-b>img {
  left: calc(-121.6 * var(--u));
  top: calc(-13.8 * var(--u));
  width: calc(499.7 * var(--u));
  height: calc(375.4 * var(--u));
}

.ng27 .prog-ball {
  left: calc(1067.5 * var(--u));
  top: calc(330 * var(--u));
  width: calc(242 * var(--u));
  height: calc(325 * var(--u));
}

.ng27 .prog-ball>img {
  left: calc(-121.7 * var(--u));
  top: calc(-12.4 * var(--u));
  width: calc(482.6 * var(--u));
  height: calc(361.5 * var(--u));
}

/* блок акции внутри программы */
.ng27 .promo {
  left: calc(416 * var(--u));
  top: calc(528 * var(--u));
  width: calc(502 * var(--u));
  height: calc(188 * var(--u));
  border-radius: calc(32 * var(--u));
  overflow: hidden;
  background: var(--orange);
}

.ng27 .promo-bg {
  left: 0;
  top: 0;
  width: calc(502 * var(--u));
  height: calc(196 * var(--u));
  transform: scaleX(-1);
}

.ng27 .promo-tree {
  left: calc(-119 * var(--u));
  top: calc(-31 * var(--u));
  width: calc(245 * var(--u));
  height: calc(226 * var(--u));
  object-fit: cover;
  object-position: bottom;
}

.ng27 .promo-star {
  left: calc(353 * var(--u));
  top: calc(-14 * var(--u));
  width: calc(79 * var(--u));
  height: calc(119 * var(--u));
}

.ng27 .promo-star>img {
  left: calc(-109.4 * var(--u));
  top: calc(-.2 * var(--u));
  width: calc(188.4 * var(--u));
  height: calc(267.5 * var(--u));
}

.ng27 .promo-title {
  left: calc(250.5 * var(--u));
  top: calc(20 * var(--u));
  transform: translateX(-50%);
  font-weight: 800;
  font-size: calc(32 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-.64 * var(--u));
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.ng27 .promo-sub {
  left: calc(251 * var(--u));
  top: calc(95 * var(--u));
  transform: translateX(-50%);
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-.36 * var(--u));
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.ng27 .promo-btn {
  left: calc(251 * var(--u));
  top: calc(130 * var(--u));
  transform: translateX(-50%) translateY(var(--press));
  background: var(--orange-dark);
}

.ng27 .promo-gift {
  left: calc(393 * var(--u));
  top: calc(60 * var(--u));
  width: calc(152 * var(--u));
  height: calc(152 * var(--u));
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   9. Блоки меню
   ------------------------------------------------------------------------- */
.ng27 .menu-card {
  top: calc(2472 * var(--u));
  width: calc(650 * var(--u));
  height: calc(265 * var(--u));
  border-radius: calc(32 * var(--u));
  overflow: hidden;
}

.ng27 .menu-adult {
  left: calc(60 * var(--u));
  background: var(--green);
}

.ng27 .menu-kids {
  left: calc(730 * var(--u));
  background: var(--blue);
}

.ng27 .menu-title {
  left: calc(25.97 * var(--u));
  top: calc(20.51 * var(--u));
  /* макет: left 26 / top 26 / font-size 75; прописная 53.6, ширина 295 (детское — 237) */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(66.17 * var(--u));
  line-height: 1;
  transform-origin: 0 0;
  transform: scaleX(.5273);
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .menu-img--adult {
  left: calc(403 * var(--u));
  top: calc(62 * var(--u));
  width: calc(307 * var(--u));
  height: calc(263 * var(--u));
}

.ng27 .menu-img--adult>img {
  left: 0;
  top: calc(-87.8 * var(--u));
  width: calc(307 * var(--u));
  height: calc(436.7 * var(--u));
}

.ng27 .menu-img--kids {
  left: calc(408 * var(--u));
  top: calc(62 * var(--u));
  width: calc(314 * var(--u));
  height: calc(258 * var(--u));
}

.ng27 .menu-img--kids>img {
  left: calc(-.06 * var(--u));
  top: calc(-88.6 * var(--u));
  width: calc(314.1 * var(--u));
  height: calc(446.7 * var(--u));
}

.ng27 .menu-kids .menu-title {
  transform: scaleX(.528492);
}

.ng27 .menu-btn {
  left: calc(16 * var(--u));
  top: calc(211 * var(--u));
}

.ng27 .menu-btn--adult {
  background: var(--green-light);
}

.ng27 .menu-btn--kids {
  background: var(--blue-light);
}

/* -------------------------------------------------------------------------
   10. Секция «Стоимость»
   ------------------------------------------------------------------------- */
.ng27 .section-price {
  left: calc(54 * var(--u));
  top: calc(2837 * var(--u));
  width: calc(1333 * var(--u));
  height: calc(783 * var(--u));
  overflow: hidden;
}

.ng27 .price-bg {
  left: calc(7 * var(--u));
  top: calc(-7 * var(--u));
  width: calc(1320 * var(--u));
  height: calc(798 * var(--u));
  transform: rotate(180deg);
}

.ng27 .price-title {
  left: calc(667 * var(--u));
  top: calc(27.76 * var(--u));
  /* макет: top 38 / font-size 150; прописная 107, ширина 302 */
  transform-origin: 50% 0;
  transform: translateX(-50%) scaleX(.476019);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(130.49 * var(--u));
  line-height: 1;
  text-align: center;
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .price-hand {
  left: calc(875 * var(--u));
  top: calc(311 * var(--u));
  width: calc(452 * var(--u));
  height: calc(493 * var(--u));
}

.ng27 .price-hand>img {
  left: 0;
  top: calc(-100.9 * var(--u));
  width: calc(452 * var(--u));
  height: calc(642.5 * var(--u));
}

.ng27 .price-branch {
  left: calc(1101 * var(--u));
  top: 0;
  width: calc(219 * var(--u));
  height: calc(311 * var(--u));
  object-fit: cover;
}

.ng27 .price-note {
  left: calc(36 * var(--u));
  top: calc(-21 * var(--u));
  width: calc(165 * var(--u));
  height: calc(209 * var(--u));
}

.ng27 .price-note>img {
  left: calc(-.3 * var(--u));
  top: 0;
  width: calc(165.5 * var(--u));
  height: calc(227.7 * var(--u));
}

.ng27 .price-snowman {
  left: calc(53 * var(--u));
  top: calc(46 * var(--u));
  width: calc(180 * var(--u));
  height: calc(180 * var(--u));
  object-fit: cover;
  transform: scaleX(-1);
}

.ng27 .price-tree {
  left: calc(67 * var(--u));
  top: calc(0 * var(--u));
  width: calc(214 * var(--u));
  height: calc(239 * var(--u));
  transform: scaleX(-1);
  border-radius: 20px;
}

.ng27 .price-tree>img {
  left: calc(-61 * var(--u));
  top: calc(.4 * var(--u));
  width: calc(294 * var(--u));
  height: calc(294.3 * var(--u));
}

.ng27 .price-santa {
  left: calc(15 * var(--u));
  top: calc(48 * var(--u));
  width: calc(160 * var(--u));
  height: calc(190 * var(--u));
}

.ng27 .price-santa>img {
  left: calc(-29.6 * var(--u));
  top: 0;
  width: calc(231.4 * var(--u));
  height: calc(233 * var(--u));
}

/* карточки билетов */
.ng27 .card {
  top: calc(228 * var(--u));
  width: calc(291 * var(--u));
  height: calc(507 * var(--u));
}

.ng27 .card--adult {
  left: calc(81 * var(--u));
}

.ng27 .card--kids {
  left: calc(392 * var(--u));
}

.ng27 .card-bg {
  left: 0;
  top: 0;
  width: calc(291 * var(--u));
  height: calc(507 * var(--u));
  border-radius: calc(32 * var(--u));
}

.ng27 .card--adult .card-bg {
  background: var(--green);
}

.ng27 .card--kids .card-bg {
  background: var(--blue);
}

.ng27 .card-photo {
  left: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(271 * var(--u));
  height: calc(230 * var(--u));
  border-radius: calc(19 * var(--u));
}

.ng27 .card--adult .card-photo {
  background: var(--green-light);
}

.ng27 .card--kids .card-photo {
  background: var(--blue-light);
}

.ng27 .card-badge {
  left: calc(22 * var(--u));
  top: calc(22 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: calc(20 * var(--u));
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: calc(18 * var(--u));
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}

.ng27 .card--adult .card-badge {
  background: var(--green);
}

.ng27 .card--kids .card-badge {
  background: var(--blue);
}

.ng27 .card-body {
  left: calc(12 * var(--u));
  top: calc(250 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  width: calc(267 * var(--u));
  font-family: var(--font-inter);
  color: var(--cream);
}

.ng27 .card-body-top {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.ng27 .card-title {
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: calc(-.75 * var(--u));
}

.ng27 .card-note {
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: calc(18 * var(--u));
}

.ng27 .card-small {
  font-weight: 600;
  font-size: calc(12 * var(--u));
  line-height: calc(12 * var(--u));
}

.ng27 .card-prices {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(18 * var(--u));
  white-space: nowrap;
}

/* зачёркнутая старая цена — в макете это отдельная линия #ca060f высотой 2px */
.ng27 .price-old {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: calc(2 * var(--u));
}

.ng27 .card-btn,
.ng27 .card-call {
  top: calc(461 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: calc(20 * var(--u));
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: calc(18 * var(--u));
  text-align: center;
  color: #fff;
  white-space: nowrap;
  transition: filter .2s ease;
}

.ng27 .card-btn:hover,
.ng27 .card-call:hover {
  filter: brightness(1.12);
}

.ng27 .card-btn:active,
.ng27 .card-call:active {
  transform: translateY(calc(1 * var(--u)));
}

.ng27 .card-btn {
  left: calc(12 * var(--u));
  width: calc(189 * var(--u));
}

.ng27 .card-call {
  left: calc(211 * var(--u));
  width: calc(68 * var(--u));
  height: calc(34 * var(--u));
}

.ng27 .card-call img {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.ng27 .card--adult .card-btn,
.ng27 .card--adult .card-call {
  background: var(--green-light);
}

.ng27 .card--kids .card-btn,
.ng27 .card--kids .card-call {
  background: var(--blue-light);
}

/* что входит в стоимость */
.ng27 .incl-title {
  left: calc(725 * var(--u));
  top: calc(262 * var(--u));
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: calc(-.36 * var(--u));
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .incl-list {
  left: calc(725 * var(--u));
  top: calc(334 * var(--u));
  width: calc(261 * var(--u));
}

.ng27 .incl-list li {
  position: relative;
  height: calc(42 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: calc(-.36 * var(--u));
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .incl-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(34 * var(--u));
  width: calc(261 * var(--u));
  height: calc(1 * var(--u));
  background: var(--divider);
}

.ng27 .incl-list li:last-child::after {
  display: none;
}

/* -------------------------------------------------------------------------
   11. Раннее бронирование
   ------------------------------------------------------------------------- */
.ng27 .band-bottom {
  left: calc(60 * var(--u));
  top: calc(3720 * var(--u));
  width: calc(1327 * var(--u));
  height: calc(490 * var(--u));
  transform: scaleX(-1);
}

.ng27 .stamp-frame {
  left: calc(123 * var(--u));
  top: calc(3775 * var(--u));
  width: calc(266 * var(--u));
  height: calc(379 * var(--u));
  object-fit: cover;
}

.ng27 .early-title {
  left: calc(450 * var(--u));
  top: calc(3803 * var(--u));
  font-weight: 400;
  font-size: calc(45 * var(--u));
  line-height: 1;
  letter-spacing: calc(-.675 * var(--u));
  color: var(--cream);
  white-space: nowrap;
}

.ng27 .early-text {
  left: calc(450 * var(--u));
  top: calc(3863 * var(--u));
  width: calc(650 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.25;
  letter-spacing: calc(-.36 * var(--u));
  color: var(--cream);
}

.ng27 .btn-promo-bottom {
  left: calc(663 * var(--u));
  top: calc(4098 * var(--u));
  transform: translateX(-50%) translateY(var(--press));
  background: var(--orange);
}

/* =========================================================================
   12. Мобильная раскладка (< 900px)
   Отдельного мобильного фрейма в Figma нет, раскладка собрана по десктопному:
   секции выстраиваются в колонку, декор, который на узком экране только
   мешает, скрыт. --u здесь ≈ 1 CSS-пиксель, поэтому размеры из макета
   (карточки билетов 291, кнопки 250) работают как есть — внутренности
   карточек остаются ровно такими, как нарисованы.
   ========================================================================= */
@container ng27 (max-width: 899px) {


  .ng27 .page_ny {
    --u: min(1px, 100cqw / 390);
    width: auto;
    /* на планшете колонка не растягивается на всю ширину */
    max-width: calc(480 * var(--u));
    height: auto;
    margin: 0 auto;
    overflow: visible;
    background: var(--cream);
    padding-bottom: calc(28 * var(--u));
  }

  .ng27 .s,
  .ng27 .hero-photos,
  .ng27 .prog-photos {
    display: block;
  }

  /* Холст превращается в поток. relative, а не static: в потоке ведёт себя
     так же, но остаётся системой координат — иначе вложенные в .crop
     вырезки и внутренности карточек считались бы от .page_ny и разъехались. */
  .ng27 .page_ny>*,
  .ng27 .s>*,
  .ng27 .hero-card>*,
  .ng27 .hero-photos>*,
  .ng27 .section-program>*,
  .ng27 .prog-photos>*,
  .ng27 .section-price>*,
  .ng27 .menu-card>* {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }

  /* декор, который на узком экране только мешает */
  .ng27 .bg-base,
  .ng27 .lines,
  .ng27 .swirl,
  .ng27 .star,
  .ng27 .stamp,
  .ng27 .deco-candy-a,
  .ng27 .deco-candy-b,
  .ng27 .prog-bg,
  .ng27 .prog-branch,
  .ng27 .prog-star-1,
  .ng27 .prog-star-2,
  .ng27 .prog-candy,
  .ng27 .prog-snowman,
  .ng27 .prog-ball,
  .ng27 .price-bg,
  .ng27 .price-branch,
  .ng27 .price-hand,
  .ng27 .price-note,
  .ng27 .band-bottom {
    display: none;
  }

  .ng27 .ribbon {
    width: 100%;
    height: calc(18 * var(--u));
    object-fit: cover;
  }

  /* ---------- hero ---------- */
  .ng27 .s--hero {
    position: relative;
    padding-top: calc(34 * var(--u));
  }

  .ng27 .hero-card {
    width: auto;
    height: auto;
    margin: 0 calc(12 * var(--u));
    padding: calc(88 * var(--u)) calc(18 * var(--u)) calc(32 * var(--u));
    border-radius: calc(24 * var(--u));
    text-align: center;
  }

  .ng27 .cocktail {
    position: absolute;
    top: calc(2 * var(--u));
    left: calc(2 * var(--u));
    width: calc(92 * var(--u));
    height: auto;
  }

  .ng27 .hero-bottle {
    position: absolute;
    top: calc(10 * var(--u));
    right: calc(4 * var(--u));
    width: calc(104 * var(--u));
    height: auto;
  }

  /* Строка с white-space: nowrap шире контейнера не центрируется
     выключкой — браузер прижимает её к левому краю. Поэтому бокс сжимается
     по содержимому (max-content) и центрируется тем же приёмом, что
     на десктопе: left: 50% + translateX(-50%). */
  .ng27 .prog-title,
  .ng27 .price-title {
    position: relative;
    left: 50%;
    width: max-content;
    transform-origin: 50% 0;
  }

  /* Сброс выше обнулил transform — возвращаем сдвиг при нажатии тем кнопкам,
     которые в мобильной раскладке встали в поток. Кнопку в блоке акции сюда
     не включаем: блок целиком сохраняет исходную композицию, и ей нужен
     собственный translateX(-50%). */
  .ng27 .hero-btn,
  .ng27 .menu-btn,
  .ng27 .btn-promo-bottom {
    transform: translateY(var(--press));
  }

  /* заголовок — картинки, просто уменьшаем пропорционально */
  .ng27 .hero-title,
  .ng27 .hero-title-script {
    width: auto;
    height: auto;
  }

  .ng27 .hero-title img {
    width: calc(284 * var(--u));
    height: auto;
  }

  .ng27 .hero-title-script img {
    width: calc(300 * var(--u));
    height: auto;
    margin-top: calc(4 * var(--u));
  }

  .ng27 .hero-lead {
    width: auto;
    margin: calc(14 * var(--u)) auto 0;
    max-width: calc(300 * var(--u));
    font-size: calc(17 * var(--u));
  }

  .ng27 .hero-btn {
    display: inline-flex;
    margin-top: calc(22 * var(--u));
    padding: calc(14 * var(--u)) calc(34 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .ng27 .hero-photos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    margin-top: calc(18 * var(--u));
  }

  .ng27 .hero-photos>* {
    zoom: .42;
  }

  .ng27 .hero-photo-tree {
    transform: rotate(6deg);
  }

  /* ---------- текстовые блоки ---------- */
  .ng27 .s--intro,
  .ng27 .s--about {
    padding: 0 calc(18 * var(--u));
    text-align: center;
  }

  .ng27 .text-goat,
  .ng27 .text-31dec,
  .ng27 .text-onenight,
  .ng27 .text-photozone,
  .ng27 .text-vocal {
    width: auto;
    max-width: calc(330 * var(--u));
    margin: calc(24 * var(--u)) auto 0;
    font-size: calc(18 * var(--u));
    text-align: center;
  }

  .ng27 .goat {
    zoom: .5;
    margin: calc(14 * var(--u)) auto 0;
  }

  .ng27 .postcard {
    zoom: .5;
    margin: calc(14 * var(--u)) auto 0;
  }

  /* ---------- программа ---------- */
  .ng27 .s--program {
    padding-top: calc(4 * var(--u));
  }

  .ng27 .section-program {
    width: auto;
    height: auto;
    margin: calc(24 * var(--u)) calc(12 * var(--u)) 0;
    padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u));
    border-radius: calc(24 * var(--u));
    background: var(--blue);
  }

  .ng27 .prog-title {
    font-size: calc(58 * var(--u));
    transform: translateX(-50%) scaleX(.456307);
  }

  .ng27 .prog-text {
    width: auto;
    margin-top: calc(16 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: 1.35;
  }

  .ng27 .prog-text p {
    margin-bottom: 0;
    display: inline;
  }

  .ng27 .prog-meet {
    margin-top: calc(14 * var(--u));
    font-size: calc(15 * var(--u));
    white-space: normal;
  }

  .ng27 .prog-photos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(8 * var(--u));
    margin-top: calc(18 * var(--u));
  }

  .ng27 .prog-photos>* {
    zoom: .3;
  }

  /* блок акции сохраняет исходную композицию, просто уменьшен целиком */
  .ng27 .promo {
    zoom: .64;
    margin: calc(26 * var(--u)) auto 0;
  }

  /* ---------- меню ---------- */
  .ng27 .s--menu {
    padding-top: calc(6 * var(--u));
  }

  .ng27 .menu-card {
    width: auto;
    height: auto;
    margin: calc(18 * var(--u)) calc(12 * var(--u)) 0;
    padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
    border-radius: calc(24 * var(--u));
  }

  .ng27 .menu-title {
    font-size: calc(46 * var(--u));
    transform: scaleX(.5273);
    transform-origin: 0 0;
    white-space: nowrap;
  }

  .ng27 .menu-kids .menu-title {
    transform: scaleX(.528492);
  }

  /* тарелка уходит правее и мельче, иначе наезжает на заголовок */
  .ng27 .menu-img {
    position: absolute;
    right: calc(-34 * var(--u));
    top: calc(8 * var(--u));
    zoom: .46;
  }

  .ng27 .menu-btn {
    margin-top: calc(16 * var(--u));
  }

  /* ---------- стоимость ---------- */
  .ng27 .s--price {
    padding-top: calc(6 * var(--u));
  }

  .ng27 .section-price {
    width: auto;
    height: auto;
    margin: calc(24 * var(--u)) calc(12 * var(--u)) 0;
    padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u));
    border-radius: calc(24 * var(--u));
    background: var(--wine);
  }

  .ng27 .price-title {
    font-size: calc(105 * var(--u));
    transform: translateX(-50%) scaleX(.476019);
  }

  /* карточки билетов остаются в исходных размерах макета (291 × 507),
     их внутренности не трогаем — рендерятся ровно как в Figma */
  .ng27 .card {
    margin: calc(22 * var(--u)) auto 0;
  }

  .ng27 .incl-title {
    margin: calc(30 * var(--u)) 0 calc(6 * var(--u));
    font-size: calc(19 * var(--u));
    white-space: normal;
    text-align: center;
  }

  .ng27 .incl-list {
    width: auto;
    max-width: calc(291 * var(--u));
    margin: 0 auto;
  }

  .ng27 .incl-list li {
    height: auto;
    padding: calc(10 * var(--u)) 0;
    font-size: calc(16 * var(--u));
    white-space: normal;
  }

  .ng27 .incl-list li::after {
    top: auto;
    bottom: 0;
    width: 100%;
  }

  /* ---------- раннее бронирование ---------- */
  .ng27 .s--early {
    margin: calc(24 * var(--u)) calc(12 * var(--u)) 0;
    padding: calc(26 * var(--u)) calc(18 * var(--u)) calc(28 * var(--u));
    border-radius: calc(24 * var(--u));
    background: var(--green);
    text-align: center;
  }

  .ng27 .stamp-frame {
    width: calc(132 * var(--u));
    height: auto;
    margin: 0 auto calc(16 * var(--u));
  }

  .ng27 .early-title {
    font-size: calc(26 * var(--u));
    line-height: 1.2;
    white-space: normal;
  }

  .ng27 .early-text {
    width: auto;
    margin-top: calc(12 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .ng27 .btn-promo-bottom {
    display: inline-flex;
    margin-top: calc(20 * var(--u));
    padding: calc(14 * var(--u)) calc(28 * var(--u));
    font-size: calc(15 * var(--u));
  }
}

/* -------------------------------------------------------------------------
   13. Печать
   ------------------------------------------------------------------------- */
@media print {
  .ng27 .page_ny {
    --u: 1px;
  }
}