/* HurtLand Facelit working tokens.
   This file is our override layer above the imported Rayo demo CSS. */

@font-face {
  font-family: "HL Geologica";
  src: url("/templates/carnival/fonts/geologica/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HL Unbounded";
  src: url("/templates/carnival/fonts/unbounded/Unbounded-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@property --hl-wordmark-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes hl-wordmark-gradient {
  to {
    --hl-wordmark-hue: 1;
  }
}

:root {
  --hl-font-ui: "HL Geologica", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hl-font-text: var(--hl-font-ui);
  --hl-font-display: var(--hl-font-ui);
  --hl-font-heading: "HL Unbounded", var(--hl-font-display);
  --hl-font-wordmark: var(--hl-font-heading);
  /* Отзывы без рукописного Caveat: число и подпись на Geologica, как и награда
     рядом. Unbounded только в заголовке. Два шрифта на весь шаблон. */
  --hl-font-reviews: var(--hl-font-ui);
  --hl-font-numeric: var(--hl-font-heading);

  --hl-color-black: #0a0a0a;
  --hl-color-graphite: #111212;
  --hl-color-graphite-soft: #1c1c1c;
  --hl-color-white: #ffffff;
  --hl-color-ivory: #faf7f6;
  --hl-color-muted: #acacac;
  --hl-color-muted-deep: #838383;
  --hl-color-lime: #ddf160;
  --hl-color-gold: #f6c62d;
  /* Цвета градиента заголовка и HURTLAND.RU, для иконок направлений. */
  --hl-color-sky: #00cfff;
  --hl-color-violet: #a600ff;
  --hl-color-pink: #ff006e;
  --hl-color-orange: #ff8800;
  /* Акцент сайта — орхидея логотипа, а не лаймовый Rayo. Через --accent--dark
     ниже он уходит во все акцентные места Rayo: выделение, hover, ссылки. */
  --hl-color-accent: var(--hl-color-orchid);
  --hl-color-cyan: #55b8c9;
  --hl-color-magenta: #f044d8;
  --hl-color-orchid: #a7499b;
  --hl-color-danger: #c91616;

  --hl-bg: var(--base);
  --hl-bg-deep: var(--base-shade);
  --hl-surface: var(--base-tint);
  --hl-text: var(--t-bright);
  --hl-text-muted: var(--t-medium);
  --hl-border: rgba(255, 255, 255, 0.18);
  --hl-radius-sm: 1rem;
  --hl-radius-md: 1.6rem;
  --hl-radius-lg: 3.8rem;
  --hl-radius-xl: 6rem;

  --_font-default: var(--hl-font-text);
  --_font-accent: var(--hl-font-display);
  --base--dark: var(--hl-color-graphite);
  --base-rgb--dark: 17, 18, 18;
  --base-tint--dark: var(--hl-color-graphite-soft);
  --base-shade--dark: var(--hl-color-black);
  --base-opp--dark: var(--hl-color-ivory);
  --base-opp-tint--dark: var(--hl-color-white);
  --accent--dark: var(--hl-color-accent);
  --additional--dark: var(--hl-color-orchid); /* было danger: красные кнопки и карточки Benji не нужны */
  --t-bright--dark: var(--hl-color-white);
  --t-medium--dark: var(--hl-color-muted);
  --t-muted--dark: var(--hl-color-muted-deep);
  --t-muted-extra--dark: #535151;
}

[color-scheme="dark"] .mxd-menu__wrapper {
  --t-opp-bright: var(--t-bright);
  --t-opp-medium: var(--t-medium);
  --t-opp-muted: var(--t-muted);
}

[color-scheme="dark"] .mxd-menu__contain > .hamburger__base {
  background-color: var(--base-tint);
}

.mxd-header .mxd-logo__image,
.mxd-header .mxd-logo__text {
  display: none;
}

.mxd-header .mxd-logo {
  position: relative;
  isolation: isolate;
  width: clamp(5.4rem, 4.4vw, 7.2rem);
  height: clamp(5.4rem, 4.4vw, 7.2rem);
}

.mxd-header .mxd-logo::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hl-text) 7%, transparent);
}

/* Скроллбар. У Rayo ползунок красится в --accent, а это кислотный лайм.
   Уводим в фирменный фиолетовый и заодно чиним Firefox, где Rayo не задает ничего. */
::-webkit-scrollbar-thumb {
  background-color: var(--hl-color-orchid);
}

::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--hl-color-orchid) 78%, #ffffff);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--hl-color-orchid) var(--hl-bg-deep);
}

.hl-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hl-color-orchid);
  -webkit-mask: url("/templates/carnival/img/hl-mark-thin.png") center / contain no-repeat;
  mask: url("/templates/carnival/img/hl-mark-thin.png") center / contain no-repeat;
}

.hl-header-logo {
  display: block;
  flex: 0 0 auto;
  width: clamp(4.8rem, 4.4vw, 7.2rem);
}

.hl-header-logo img {
  display: block;
  width: 100%;
  height: auto;
}

body :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: normal;
}

/* Полоса прокрутки резервируется всегда: попап и меню прячут overflow,
   и без этого страница становилась шире на ширину полосы и сдвигалась.
   Главная всегда скроллится, поэтому постоянный гаттер ничего не стоит. */
/* Полоса прокрутки скрыта: решение Benji 2026-11-08, по дизайну она не нужна.
   Заодно страница не дёргается по ширине, когда попап видео прячет overflow,
   поэтому прежний scrollbar-gutter больше не нужен. Прокрутка колесом,
   пальцем и клавишами работает как раньше. */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

::selection {
  background-color: var(--hl-color-orchid);
  color: var(--hl-color-white);
  text-shadow: none;
}

.hl-hero-webgen {
  position: relative;
  isolation: isolate;
  /* Без min-height от окна: иначе на высоких экранах под баннером оставалась
     пустота до HURTLAND.RU, а на низких надпись шла вплотную. Benji 2026-11-08. */
  overflow: hidden;
  padding: clamp(14rem, 10vw, 19rem) clamp(1.8rem, 6vw, 8rem) var(--hl-domain-gap);
  background: var(--hl-bg);
  color: var(--hl-text);
}

.hl-hero-intro {
  width: min(100%, 172rem);
  margin: 0 auto clamp(2.4rem, 3vw, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 6rem);
  container-type: inline-size;
}

.hl-hero-heading {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: var(--hl-font-heading);
  font-size: clamp(2.4rem, 5.25vw, 8.8rem);
  font-size: clamp(2rem, 5.55cqw, 9.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: inherit;
  text-transform: uppercase;
}

.hl-hero-heading__first,
.hl-hero-heading__second {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.hl-hero-heading__second {
  margin-top: 0.16em;
  gap: 0.6em;
}

/* Заголовок в одну строку (страницы видов пирсинга): хвостовая звезда после слова. */
.hl-hero-heading__spark--tail {
  margin-left: 0.6em;
}

/* Свечение заголовка — порт пена "Apple MacBook Pro Page Header Text".
   Copyright (c) 2026 Mark Learst — MIT. https://codepen.io/marklearst/pen/JooEKYB
   Радиусы размытия переведены из px в em, чтобы эффект жил на резиновом кегле. */
.hl-glow {
  /* Ручки настройки: гамма, плотность ореола, сила кромки, ширина свечения. */
  --hl-glow-gradient: linear-gradient(90deg, #00cfff, #a600ff, #ff006e, #ff8800);
  --hl-glow-halo: 0.7;
  --hl-glow-edge: 0.5;
  --hl-glow-spread: 0.24em;
  position: relative;
  z-index: 1;
  filter: brightness(1.1);
}

.hl-glow::before,
.hl-glow::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--hl-glow-gradient);
  background-size: 200% 200%;
  animation: hl-glow-shift 12s ease-in-out infinite;
}

.hl-glow::before {
  z-index: -1;
  border-radius: 999px;
  opacity: var(--hl-glow-halo);
  filter: blur(var(--hl-glow-spread)) brightness(0.8);
}

/* Без filter: в WebKit (iPhone) фильтр на элементе с background-clip: text снимает
   обрезку, и градиент ложился прямоугольником поверх букв. Мягкость кромки — text-shadow. */
.hl-glow::after {
  z-index: 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: color-burn;
  opacity: var(--hl-glow-edge);
}

@keyframes hl-glow-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hl-glow::before,
  .hl-glow::after {
    animation: none;
  }
}

.hl-hero-heading__spark,
.hl-hero-heading__arrow {
  display: block;
  flex: 0 0 auto;
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  mask: url("/templates/carnival/img/webgen/soft-star.png") center / contain no-repeat;
}

.hl-hero-heading__first > .hl-hero-heading__spark {
  position: absolute;
  left: -0.5em;
  width: 0.58em;
  height: 0.58em;
  color: inherit;
  opacity: 0.35;
}

.hl-hero-heading__arrow {
  width: 0.9em;
  height: 0.9em;
  mask-image: url("/templates/carnival/img/webgen/black-arrow.png");
}

/* Союз «и» в заголовке — векторный скетч из полос. SVG генерирует
   workspace/run/hl-and-svg.py [толщина] [растяжка] [растворение] [где полная]:
   сейчас 3.0, 0.86, 0 и 0.9 — линии тоньше, знак сжат по ширине (0.82 Benji
   счёл чересчур), левый низ растворяется в ноль (Benji 2026-11-08). Имя файла с версией: маска идёт
   без ?v=, и браузер держал старый файл, отсюда «ничего не изменилось».
   Высота больше, прозрачность 0.6, чтобы знак был тише слов. Идет маской:
   цвет от заголовка. aspect-ratio равен viewBox файла. Для экранных чтецов
   рядом скрытый «и». */
.hl-hero-heading__and {
  display: block;
  flex: 0 0 auto;
  height: 0.78em;
  aspect-ratio: 144.48 / 100;
  opacity: 0.6;
  background: currentColor;
  mask: url("/templates/carnival/img/webgen/hl-and-v4.svg") center / contain no-repeat;
}

.hl-hero-film {
  position: relative;
  flex: 0 0 10%;
  aspect-ratio: 1;
  color: inherit;
}

.hl-hero-film {
  display: block;
  text-decoration: none;
}

/* Надпись по кругу: SVG вместо PNG-маски, текст правится в разметке. */
.hl-hero-film__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.7;
  animation: hl-hero-film-turn 20s linear infinite;
}

.hl-hero-film__ring text {
  fill: currentColor;
  font-family: var(--hl-font-ui);
  font-size: 7.6px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hl-showreel {
  position: relative;
  width: min(92vw, 110rem);
  margin: 0 auto;
  background: var(--hl-color-black);
  border-radius: var(--hl-radius-sm);
  overflow: hidden;
}

.hl-showreel video {
  display: block;
  width: 100%;
  height: auto;
}

.hl-hero-film__play {
  position: absolute;
  inset: 20%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hl-text);
  color: var(--hl-bg);
  font-size: clamp(1.8rem, 2vw, 3.2rem);
  padding-left: 0.1em;
}

@keyframes hl-hero-film-turn {
  to { transform: rotate(360deg); }
}

/* Иконка в кнопке «Запись» вместо стрелки Phosphor. */
.hl-btn-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .hl-btn-icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* Офф-канвас, третья итерация 2026-11-08 по замечаниям Benji.
   Слой бургера .mxd-nav__contain фиксированный и поверх меню; в нём кружок
   сертификатов (только при открытом меню), «Запись» (пилюля на десктопе в
   закрытом состоянии, при открытом меню — кружок с календарём) и бургер.
   Оба кружка появляются вместе с крестиком анимацией, чтобы не «залипали».
   Видео на телефоне живёт в header и при открытом меню скрыто. Белая подложка
   кружка перекрашивается плавно: раньше при закрытии весь экран на миг
   становился белым. Меню компактное: на телефоне две колонки, карточки студий
   рядом даже на телефоне, в каждой свой график. */
.mxd-nav__contain {
  gap: 1rem;
}

@media (min-width: 768px) {
  .mxd-nav__contain {
    gap: 2rem;
  }
}

.hl-nav-control {
  pointer-events: auto;
}

/* Линии бургера белые с инверсией относительно того, что под ними: на белом
   кружке чёрные, на тёмном меню белые, во время полёта подложки меняются
   вместе с ней в каждом кадре. Никаких таймингов, крестик всегда один. */
.hamburger__line {
  background-color: #ffffff;
  mix-blend-mode: difference;
  transition: none;
}

/* Страница за меню: тёмная пелена с размытием на весь экран, чтобы не
   просвечивала открытая страница. */
.mxd-menu__wrapper .mxd-menu__base {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 18, 18, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Сертификаты: фиолетовая пилюля с подарком, видна только при открытом меню.
   Benji 2026-11-08: со словами, «Сертификаты» и «Запись», это вмещается. */
.hl-nav-gift {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  height: 4.6rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--hl-color-orchid);
  color: var(--hl-color-white);
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Rayo на телефоне зажимает .btn-mobile-icon в кружок 4.6rem и прячет подпись
   с !important; в открытом меню пилюли со словами, поэтому перебиваем. Высоту
   подписи не трогаем: у btn-anim вторая копия слова прячется за ней. */
.mxd-nav__contain .hl-nav-gift,
.mxd-nav__contain:has(.nav-open) .hl-nav-booking {
  width: auto;
}

.mxd-nav__contain .hl-nav-gift .btn-caption,
.mxd-nav__contain:has(.nav-open) .hl-nav-booking .btn-caption {
  display: block !important;
}

.hl-nav-gift:hover {
  background: var(--hl-color-violet);
  color: var(--hl-color-white);
}

@keyframes hl-nav-in {
  from { opacity: 0; transform: translateY(-0.6rem) scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes hl-nav-in-b {
  from { opacity: 0; transform: translateY(-0.6rem) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.mxd-nav__contain:has(.nav-open) .hl-nav-gift {
  display: inline-flex;
  animation: hl-nav-in 0.5s ease 0.35s both;
}

/* «Запись» живёт только в открытом меню: кружок с календарём без слова
   (Benji 2026-11-08: второй кружок в шапке не нужен, только бургер). */
.hl-nav-booking {
  display: none;
}

.mxd-nav__contain:has(.nav-open) .hl-nav-booking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  height: 4.6rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
  animation: hl-nav-in 0.5s ease 0.25s both;
}

.mxd-nav__contain:has(.nav-open) .hl-nav-booking .btn-caption {
  display: none;
}

@media (min-width: 768px) {
  .mxd-nav__contain:has(.nav-open) .hl-nav-gift,
  .mxd-nav__contain:has(.nav-open) .hl-nav-booking {
    height: 5.6rem;
    padding: 0 2.2rem;
    font-size: 1.6rem;
  }
}

/* Меню. */
.mxd-menu__left {
  padding-top: 2.4rem;
}

.mxd-menu__right {
  padding-top: 2rem;
}

#main-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.6rem;
  row-gap: 0.2rem;
}

.main-menu__link,
.main-menu__link .btn-caption {
  height: 2.8rem;
  line-height: 2.8rem;
  font-family: var(--hl-font-ui);
  font-size: 1.9rem;
  font-weight: 500;
}

/* Карточки студий. */
.hl-menu-aside {
  display: grid;
  gap: 1rem;
  padding: 0 2rem;
}

.hl-menu-studios {
  display: grid;
  gap: 1rem;
}

.hl-menu-studio {
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--hl-font-ui);
  color: var(--hl-text);
}

.hl-menu-studio p {
  margin: 0;
}

.hl-menu-studio__metro {
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hl-menu-studio__address {
  margin-top: 0.6rem !important;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
}

.hl-menu-studio__hours {
  margin-top: 0.4rem !important;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
}

.hl-menu-studio__note {
  margin-top: 0.2rem !important;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
}

.hl-menu-studio__phone {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--hl-text);
  text-decoration: none;
}

.hl-menu-studio__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.hl-menu-studio__links a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: var(--hl-text);
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.hl-menu-studio__links a:hover {
  border-color: var(--hl-color-orchid);
  color: var(--hl-color-orchid);
}

/* Телефон — первый чип, только иконка трубки; номер в title и aria-label.
   Benji 2026-11-08: номер строкой занимал лишнюю высоту. */
.hl-menu-studio__links a.hl-menu-studio__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
}

.hl-menu-studio__call svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hl-chip-short {
  display: none;
}

.mxd-menu__data p,
.mxd-menu__data p a {
  font-family: var(--hl-font-ui);
}

@media (min-width: 560px) {
  .hl-menu-aside {
    padding: 0 3rem;
  }

  .hl-menu-studio {
    padding: 1.4rem 1.6rem 1.6rem;
  }

  .hl-menu-studio__metro {
    font-size: 1.15rem;
  }

  .hl-menu-studio__address,
  .hl-menu-studio__phone {
    font-size: 1.7rem;
  }

  .hl-menu-studio__hours {
    font-size: 1.2rem;
  }
}

/* Планшет: пункты крупнее и с воздухом, две колонки; карточки по одной в строку. */
@media (min-width: 768px) and (max-width: 1199px) {
  .mxd-menu__left {
    padding-top: 6rem;
  }

  #main-menu {
    column-gap: 4rem;
    row-gap: 1.6rem;
  }

  .main-menu__link,
  .main-menu__link .btn-caption {
    height: 1.15em;
    line-height: 1.15;
    font-size: clamp(3.2rem, 4.6vw, 4.8rem);
  }

  .hl-menu-aside {
    padding: 2rem 6rem 0;
  }
}

@media (min-width: 1200px) {
  .mxd-menu__left {
    padding-top: 9rem;
  }

  #main-menu {
    display: block;
  }

  /* Пункты крупные, как в демо Rayo (до 5.6rem), и уменьшаются с высотой окна,
     чтобы восемь пунктов всегда влезали без прокрутки. Benji 2026-11-08. */
  /* Кегль как в демо, интервал между пунктами больше (Benji 2026-11-08: пункты не
     увеличивать, увеличить расстояние). Высота пункта в переменной: по ней же
     считается высота колонки карточек, чтобы она шла от «Студии» до «Контактов». */
  /* Высота пункта — восьмая часть свободной высоты: окно минус поля панели,
     верхний отступ 9rem и нижняя строка с почтой (всего ~26rem). */
  .mxd-menu__inner {
    --hl-menu-item: clamp(4.8rem, calc((100vh - 26rem) / 8), 7rem);
  }

  .main-menu__link,
  .main-menu__link .btn-caption {
    height: var(--hl-menu-item);
    line-height: var(--hl-menu-item);
    font-size: clamp(3.2rem, 4.6vh, 4.6rem);
  }

  /* На десктопе карточки студий в правой колонке столбиком, рядом они только на планшете. */
  .hl-menu-studios {
    grid-template-columns: minmax(0, 1fr);
  }

  .mxd-menu__right {
    display: flex;
    align-items: flex-start;
    padding-top: 0;
  }

  /* Колонка карточек до правого края панели, вровень с крестиком; по высоте —
     ровно восемь пунктов меню, верх вровень с «Студией», низ с «Контактами». */
  .hl-menu-aside {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: calc(10.4rem + 8 * var(--hl-menu-item));
    padding: 10.4rem 6rem 0 0;
    gap: 1.6rem;
  }

  .hl-menu-studios {
    height: 100%;
    grid-template-rows: 1fr 1fr;
    gap: 1.6rem;
  }

  .hl-menu-studio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.2rem 2.8rem 2.8rem;
  }

  .hl-menu-studio {
    padding: 2rem 2.2rem 2.2rem;
  }

  .hl-menu-studio__metro {
    font-size: 1.2rem;
  }

  .hl-menu-studio__links {
    gap: 0.5rem;
  }

  .hl-menu-studio__links a {
    padding: 0.4rem 0.9rem;
    font-size: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .mxd-menu__left,
  .hl-menu-aside {
    padding-top: 11rem;
  }

  .hl-menu-aside {
    height: calc(11rem + 8 * var(--hl-menu-item));
    padding-right: 9rem;
  }
}

/* Внутренние страницы: контейнер под компонент Joomla, пока простейший. */
.hl-page {
  padding: clamp(12rem, 9vw, 17rem) clamp(1.8rem, 6vw, 8rem) clamp(4rem, 5vw, 8rem);
  background: var(--hl-bg);
  color: var(--hl-text);
}

.hl-page__inner {
  width: min(100%, 120rem);
  margin: 0 auto;
  font-family: var(--hl-font-text);
}

.hl-page h1,
.hl-page h2,
.hl-page h3 {
  font-family: var(--hl-font-ui);
  font-weight: 600;
  line-height: 1.1;
  color: var(--hl-text);
}

.hl-page h1 {
  margin: 0 0 2.4rem;
  font-size: clamp(3rem, 4.5vw, 6rem);
}

.hl-page h2 {
  margin: 3.2rem 0 1.2rem;
  font-size: clamp(2.2rem, 2.6vw, 3.4rem);
}

.hl-page h3 {
  margin: 2.4rem 0 1rem;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
}

.hl-page p,
.hl-page li {
  font-size: clamp(1.6rem, 1.25vw, 1.9rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.hl-page a {
  color: var(--hl-color-orchid);
}

.hl-page img {
  max-width: 100%;
  height: auto;
  border-radius: 1.6rem;
}

/* ------------------------------------------------------------------ */
/* Переход между страницами: страница проявляется после загрузки и гаснет
   перед уходом по внутренней ссылке; сверху тонкая полоска-лоадер в цветах
   свечения заголовка. Ведёт js/hl.js. Benji 2026-11-08: без лоадера Rayo
   с процентами, маленький и аккуратный. */
.mxd-page-content,
.mxd-footer {
  opacity: 0;
  transition: opacity 0.35s ease;
}

html.is-ready .mxd-page-content,
html.is-ready .mxd-footer {
  opacity: 1;
}

html.is-leaving .mxd-page-content,
html.is-leaving .mxd-footer {
  opacity: 0;
  transition-duration: 0.25s;
}

.hl-loader {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: 0.3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hl-loader__bar {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--hl-color-sky), var(--hl-color-violet), var(--hl-color-pink), var(--hl-color-orange));
  border-radius: 0 999px 999px 0;
  box-shadow: 0 0 1.2rem rgba(166, 0, 255, 0.6);
}

html.is-leaving .hl-loader,
html:not(.is-ready) .hl-loader {
  opacity: 1;
}

/* Одна честная полоска на переход: при уходе 0 → 60% за время затемнения,
   новая страница продолжает с 60% до конца (флаг hl-nav в sessionStorage). */
html:not(.is-ready) .hl-loader__bar {
  animation: hl-loader-run 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

html.is-leaving .hl-loader__bar {
  animation: hl-loader-leave 0.3s ease-out forwards;
}

html.is-continuing:not(.is-ready) .hl-loader__bar {
  animation: hl-loader-continue 0.9s ease-out forwards;
}

@keyframes hl-loader-run {
  from { width: 0; }
  60% { width: 70%; }
  to { width: 96%; }
}

@keyframes hl-loader-leave {
  from { width: 0; }
  to { width: 60%; }
}

@keyframes hl-loader-continue {
  from { width: 60%; }
  to { width: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  .mxd-page-content,
  .mxd-footer {
    transition: none;
  }
}

/* Внутренние страницы: отступ под шапку у первой секции, ритм секций модулей. */
.hl-inner .hl-page:not(:first-child) {
  padding-top: clamp(2rem, 3vw, 4rem);
}

.hl-inner > :first-child {
  padding-top: clamp(12rem, 9vw, 17rem) !important;
}

.hl-mods {
  padding: clamp(2rem, 3vw, 4rem) clamp(1.8rem, 6vw, 8rem);
  background: var(--hl-bg);
  color: var(--hl-text);
}

.hl-mods .hl-page__inner {
  width: min(100%, 120rem);
}

.hl-inner > :last-child {
  padding-bottom: clamp(6rem, 7vw, 10rem);
}

/* Заглушки Rayo (dummyimage.com) заменены локальными файлами тех же размеров:
   ничего стороннего и тот же вид до прихода наших фото. */
.divider-image-1, .divider-image-2, .divider-image-3, .divider-image-4, .divider-image-5,
.divider-image-6, .divider-image-7, .divider-image-8, .divider-image-9, .divider-image-10,
.prj-details-img-01, .prj-details-img-02 {
  background-image: url("/templates/carnival/img/placeholder/1920x1200.png");
}

.preview-image-1, .preview-image-2, .preview-image-3, .preview-image-4,
.preview-image-5, .preview-image-6, .preview-image-7 {
  background-image: url("/templates/carnival/img/placeholder/1400x1400.png");
}

.blog-preview-image-1, .blog-preview-image-2, .blog-preview-image-3 {
  background-image: url("/templates/carnival/img/placeholder/1000x1250.png");
}

.about-image-1 { background-image: url("/templates/carnival/img/placeholder/1400x1000.png"); }
.image-values-1 { background-image: url("/templates/carnival/img/placeholder/1200x1600.png"); }
.image-values-2 { background-image: url("/templates/carnival/img/placeholder/1600x1200.png"); }

.mxd-promo__bg {
  background-image: url("/templates/carnival/img/placeholder/1400x900.png");
}

/* Главная: видео-разделитель на кадре старого модуля. */
.hl-video-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  color: var(--hl-color-white);
  text-decoration: none;
  isolation: isolate;
}

.hl-video-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(17, 18, 18, 0.45);
  transition: background-color 0.3s ease;
}

.hl-video-divider:hover::before {
  background: rgba(17, 18, 18, 0.3);
}

.hl-video-divider__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(7rem, 7vw, 10rem);
  height: clamp(7rem, 7vw, 10rem);
  border-radius: 50%;
  background: var(--hl-color-white);
  color: var(--hl-bg);
  transition: transform 0.3s ease;
}

.hl-video-divider:hover .hl-video-divider__play {
  transform: scale(1.06);
}

.hl-video-divider__play svg {
  width: 40%;
  height: 40%;
  margin-left: 6%;
}

.hl-video-divider__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--hl-font-ui);
  font-size: clamp(1.8rem, 1.8vw, 2.6rem);
  font-weight: 600;
  text-align: center;
}

.hl-video-divider__caption small {
  font-size: clamp(1.3rem, 1vw, 1.5rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

/* Главная: цифры, иконки линиями вместо картинок Rayo. */
.hl-stat-icon {
  fill: none;
  stroke: var(--hl-color-orchid);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mxd-stats-simple__counter span {
  font-size: 0.6em;
  color: var(--hl-color-orchid);
}

/* Главная, сборка 2026-11-09 по таблице в doc/template.md. */

/* Заголовки блоков главной: Unbounded, капителью, в одну строку (Benji 2026-11-09:
   кириллица в Geologica на заголовках выглядит плохо). */
.hl-home .mxd-section-title h2,
.hl-home .mxd-block__name h2,
.hl-home .mxd-services-stack__title h3 {
  font-family: var(--hl-font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hl-home .mxd-section-title h2,
.hl-home .mxd-block__name h2 {
  font-size: clamp(3.8rem, 3.6vw, 5.4rem);
  line-height: 1.1;
  white-space: nowrap;
}

.hl-home .mxd-services-stack__title h3 {
  font-size: clamp(2.6rem, 3.2vw, 4.6rem);
  line-height: 1.1;
}

/* Заголовок из четырёх слов в узкой колонке отзывов — в две строки по явному переносу. */
.hl-home .mxd-section-title h2.hl-h2-wrap {
  white-space: normal;
  font-size: clamp(3.4rem, 3.5vw, 5.2rem);
}

/* Стопка направлений короче Rayo (600–760px): картинки ещё не наши, пустоты не нужно. */
@media only screen and (min-width: 992px) {
  .hl-home .services-stack {
    height: 320px;
  }

  /* Текст сразу под заголовком, на ширину до картинки. */
  .hl-home .mxd-services-stack__inner {
    justify-content: flex-start;
  }

  .hl-home .mxd-services-stack__title {
    margin-bottom: 2rem;
  }

  .hl-home .mxd-services-stack__info {
    width: 66%;
  }

  .hl-home .mxd-services-stack__info p {
    text-wrap: pretty;
  }

  .hl-home .mxd-services-stack__info p + p {
    margin-top: 1rem;
  }

  /* Картинка квадратом по высоте, чуть выше середины, с запасом справа до кружка —
     ничего не режется ни на одной ширине. */
  .hl-home .services-stack__image {
    width: auto;
    aspect-ratio: 1 / 1;
    top: 46%;
    right: 12%;
    bottom: auto;
    height: 64%;
    transform: translateY(-50%);
  }

  .hl-home .services-stack__image img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }

  .hl-home .mxd-services-stack__info {
    width: 56%;
  }

  .hl-home .services-stack__image img {
    height: 100%;
    width: auto;
    max-width: none;
    margin-left: auto;
    object-fit: contain;
  }
}

@media only screen and (min-width: 1600px) {
  .hl-home .services-stack {
    height: 400px;
  }
}

@media only screen and (max-width: 991px) {
  .hl-home .services-stack {
    height: 46vh;
    min-height: 380px;
  }

  .hl-home .services-stack__image {
    display: flex;
    justify-content: center;
    height: 140px;
    margin-top: 1.2rem;
  }

  .hl-home .services-stack__image img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
}

/* Перенос в подписях только на десктопе. */
.hl-br-desktop {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .hl-br-desktop {
    display: inline;
  }
}

.hl-home .mxd-services-stack__info p + p {
  margin-top: 1.2rem;
}

/* Абзац «Студия»: мельче Rayo t-large, без висячих слов. */
.hl-home .mxd-block__paragraph p.t-large {
  font-size: 2.2rem;
  font-weight: 200;
  line-height: 1.5;
  text-wrap: pretty;
}

.hl-home .mxd-block__paragraph p.t-large + p.t-large {
  margin-top: 1.6rem;
}

/* Кнопка капителью (пробуем на одной, Benji 2026-11-09). */
.hl-btn-caps .btn-caption {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}

/* Фото-разделитель: полоса ниже экрана, но выше прежней — в кадре надпись на стене
   и оба человека; параллакс Ukiyo для него слабее (data-u-scale 1.15 вместо 1.5). */
.hl-home .mxd-divider,
.hl-home .mxd-divider__image {
  height: 360px;
}

@media only screen and (min-width: 768px) {
  .hl-home .mxd-divider,
  .hl-home .mxd-divider__image {
    height: 460px;
  }
}

@media only screen and (min-width: 1200px) {
  .hl-home .mxd-divider,
  .hl-home .mxd-divider__image {
    height: 600px;
  }
}

/* Шапки «Подход» и «Портфолио»: на телефоне заголовок и кнопка в одну строку,
   кнопка записи там кружком с календарём (btn-mobile-icon Rayo). */
@media only screen and (max-width: 1199px) {
  .hl-home .hl-sec-head .row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  .hl-home .hl-sec-head .row > [class*="col-"] {
    width: auto;
    flex: 0 1 auto;
  }

  /* Заголовок ужимается, кнопка-кружок не уезжает за край. */
  .hl-home .hl-sec-head .row > [class*="col-"]:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hl-home .hl-sec-head h2 {
    font-size: clamp(2.8rem, 8vw, 3.8rem);
  }

  .hl-home .hl-sec-head .mxd-section-title__hrcontrols {
    margin: 0;
    padding: 0;
  }
}

/* Подход: заголовки строк капслоком (проба, Benji 2026-11-09). */
.hl-home .mxd-approach-list__title h6 {
  font-family: var(--hl-font-heading);
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Заголовок строки на одной линии с текстом: тот же line-height 2.7rem, что у p (1.8rem/1.5),
   без верхнего поля; капитель Unbounded чуть ниже строчных Geologica — поднята на 1px. */
@media only screen and (min-width: 1200px) {
  .hl-home .mxd-approach-list__title,
  .hl-home .mxd-approach-list__descr {
    padding-top: 0;
  }

  .hl-home .mxd-approach-list__title h6 {
    margin-top: 0;
    line-height: 2.7rem;
    transform: translateY(-1px);
  }
}

/* Подход: текст строк тоньше. */
.hl-home .mxd-approach-list__descr p {
  font-weight: 300;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Бегущая строка тем же шрифтом, капителью, чуть мельче и полупрозрачнее. */
.hl-home .marquee__text {
  font-family: var(--hl-font-heading);
  font-weight: 400;
  font-size: clamp(5.2rem, 8vw, 11rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

/* Отзывы: карточка уже, текст тоньше. */
@media only screen and (min-width: 768px) {
  .hl-home .mxd-testimonials-card {
    max-width: 400px;
  }
}

@media only screen and (min-width: 1400px) {
  .hl-home .mxd-testimonials-card {
    max-width: 440px;
  }
}

@media only screen and (min-width: 1600px) {
  .hl-home .mxd-testimonials-card {
    max-width: 520px;
  }
}

.hl-home .mxd-testimonials-card__text p {
  font-weight: 300;
}

.hl-home .mxd-section-title__descr p {
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1.4;
}

.hl-home .mxd-testimonials-card__company img {
  height: 2.6rem;
  width: auto;
  opacity: 0.85;
}

/* Блок рейтинга на месте Clutch у Rayo: название площадки, пять звёзд, оценка и число отзывов. */
.hl-review-rating {
  display: inline-flex;
  flex-direction: column;
  gap: 0.8rem;
  text-decoration: none;
  background: none;
  color: var(--t-bright);
}

.hl-review-rating__name {
  font-family: var(--hl-font-heading);
  font-size: 2.2rem;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1;
}

.hl-review-rating__stars {
  display: flex;
  gap: 0.3rem;
}

.hl-review-rating__stars svg {
  width: 3rem;
  height: 3rem;
  fill: var(--hl-color-orchid);
}

.hl-review-rating__meta {
  font-family: var(--hl-font-ui);
  font-size: 1.9rem;
  color: var(--t-medium);
}

/* Низ карточки отзыва: имя как у Rayo, под ним дата слева и логотип площадки справа. */
.hl-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 0.6rem;
}

.hl-review-foot .mxd-testimonials-card__position {
  margin: 0;
  color: var(--t-medium);
}

.hl-review-foot__logo {
  width: auto;
  height: 3.8rem;
  opacity: 0.9;
}

/* Аватарка меньше (у Rayo 8rem), имя рядом с ней справа, мельче. */
.hl-home .mxd-testimonials-card__media {
  justify-content: flex-start;
  align-items: center;
  gap: 1.6rem;
}

.hl-home .mxd-testimonials-card__photo {
  flex: none;
  width: 6rem;
  height: 6rem;
}

.hl-home .mxd-testimonials-card__name {
  margin: 0;
  font-size: 2.2rem;
}

.hl-home .hl-avatar-zoom {
  transform: scale(1.7);
  transform-origin: 50% 40%;
}

/* Цифры: число и подпись в одну строку, длинные числа чуть мельче. */
.hl-home .mxd-stats-simple__descr,
.hl-home .mxd-stats-simple__counter {
  white-space: nowrap;
}

@media only screen and (min-width: 992px) {
  .hl-home .mxd-stats-simple__counter {
    font-size: clamp(4.4rem, 4.6vw, 7rem);
  }
}

/* Разделитель: фото Benji 1920×1200 вместо заглушки. */
.mxd-divider__image.hl-divider-home {
  background-image: url("/templates/carnival/img/hl/home-parallax.jpg?v=4");
  background-position: center 40%;
}

/* Стопка направлений: на фиолетовой карточке текст белый (Benji 2026-11-08). */
.hl-stack-accent h3,
.hl-stack-accent p {
  color: var(--hl-color-white);
}

.hl-stack-accent .tag {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--hl-color-white);
}

/* Портфолио: бегущие линии Rayo с портретными кадрами 3:4 (у Rayo 540×400). */
.hl-home .hl-works .marquee__item {
  width: 240px;
  height: 320px;
}

@media only screen and (min-width: 768px) {
  .hl-home .hl-works .marquee__item {
    width: 270px;
    height: 360px;
  }
}

@media only screen and (min-width: 1200px) {
  .hl-home .hl-works .marquee__item {
    width: 300px;
    height: 400px;
  }
}

@media only screen and (min-width: 1600px) {
  .hl-home .hl-works .marquee__item {
    width: 405px;
    height: 540px;
  }
}

.hl-home .hl-works .marquee__item.has-caption p {
  font-family: var(--hl-font-ui);
  font-weight: 500;
}

.hl-home .hl-works .marquee__link {
  cursor: zoom-in;
}

/* Отзывы: карточки одной высоты на любом экране, длинный текст обрезается. */
.swiper-testimonials .swiper-slide {
  height: auto;
  display: flex;
}

.swiper-testimonials .mxd-testimonials-card {
  width: 100%;
  height: 100%;
}

.mxd-testimonials-card__text p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Заглушка внутренних страниц: один экран без шапки — крутятся песочные часы,
   две строки текста по центру; подвал ниже. */
.hl-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 12rem 3rem 8rem;
  text-align: center;
}

.hl-stub__spin {
  display: block;
  width: clamp(16rem, 24vw, 30rem);
  height: auto;
  margin-bottom: 4rem;
  animation: hl-stub-spin 12s linear infinite;
}

.hl-stub__text {
  max-width: 64rem;
  font-size: clamp(2rem, 1.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--t-bright);
}

@keyframes hl-stub-spin {
  to { transform: rotate(360deg); }
}

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

/* Страницы разделов: двусловные заголовки блоков на телефоне переносятся. */
@media only screen and (max-width: 767px) {
  .hl-section .mxd-block__name h2 {
    white-space: normal;
    font-size: clamp(2.6rem, 7.4vw, 3.8rem);
  }
}

/* Страницы разделов (hl-pages.php): прайс на каркасе Capabilities — слева название,
   справа цена; примечание мелким. */
.hl-price .mxd-cpb-list__title {
  font-family: var(--hl-font-ui);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
}

.hl-price .hl-price__link {
  color: var(--t-bright);
  background: none;
  transition: color 0.25s ease;
}

.hl-price .hl-price__link:hover {
  color: var(--hl-color-orchid);
}

.hl-price .mxd-cpb-list__num {
  flex: none;
  font-family: var(--hl-font-ui);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--t-bright);
}

.hl-price .mxd-cpb-list__num span {
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
}

.hl-price .mxd-cpb-list__content {
  padding: 2rem 0;
}

@media only screen and (min-width: 1200px) {
  .hl-price .mxd-cpb-list__content {
    padding: 2.2rem 0;
  }
}

.hl-note {
  max-width: 72rem;
  margin-top: 4rem;
}

.hl-note__title {
  margin: 0 0 0.8rem;
  font-family: var(--hl-font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hl-color-orchid);
}

.hl-note__text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--t-medium);
}

/* Форма заявки на сертификат: два поля и кнопка, поля в стиле пилюль. */
.hl-form {
  display: grid;
  gap: 1.2rem;
  margin-top: 3.2rem;
  max-width: 48rem;
}

.hl-form__field input {
  width: 100%;
  height: 5.6rem;
  padding: 0 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--t-bright);
  font-family: var(--hl-font-ui);
  font-size: 1.7rem;
  outline: none;
  transition: border-color 0.25s ease;
}

.hl-form__field input::placeholder {
  color: var(--t-medium);
}

.hl-form__field input:focus {
  border-color: var(--hl-color-orchid);
}

.hl-form__field input:user-invalid {
  border-color: var(--hl-color-pink);
}

.hl-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hl-form__submit {
  justify-self: start;
  margin-top: 0.8rem;
}

.hl-form__reply {
  margin: 0;
  font-size: 1.6rem;
  color: var(--t-bright);
}

.hl-form__reply--error {
  color: var(--hl-color-pink);
}

.hl-form.is-sent .hl-form__field,
.hl-form.is-sent .hl-form__submit {
  display: none;
}

/* До/после по Villade: два фото друг над другом, верхнее обрезано по --position,
   прозрачный range поверх, линия и ручка. Пары 475×950 из старых коллажей. */
.hl-ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  justify-items: center;
  gap: 2rem;
}

.hl-ba {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 2;
  max-height: 80vh;
  border-radius: var(--_radius-m);
  overflow: hidden;
  background: var(--base-tint);
}

.hl-ba__images img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hl-ba__before {
  width: var(--position) !important;
  object-position: left center;
}

.hl-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}

.hl-ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  background: var(--t-bright);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.hl-ba__handle {
  position: absolute;
  top: 50%;
  left: var(--position);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--t-bright);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.hl-ba__handle::before,
.hl-ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border: solid var(--base);
  border-width: 2px 2px 0 0;
}

.hl-ba__handle::before {
  left: 1.1rem;
  transform: translateY(-50%) rotate(-135deg);
}

.hl-ba__handle::after {
  right: 1.1rem;
  transform: translateY(-50%) rotate(45deg);
}

.hl-ba__label {
  position: absolute;
  top: 1.6rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(17, 18, 18, 0.6);
  color: var(--t-bright);
  font-family: var(--hl-font-ui);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}

.hl-ba__label--before { left: 1.6rem; }
.hl-ba__label--after { right: 1.6rem; }

.hl-ba__range:focus-visible ~ .hl-ba__handle {
  outline: 3px solid var(--hl-color-orchid);
  outline-offset: 3px;
}

/* Подвал Rayo в исходном виде; вместо rayostudio — контурная HURTLAND.RU, как под hero. */
.hl-footer-wordmark {
  height: auto;
  overflow: visible;
  z-index: 0;
}

/* Градиент hero (#hl-domain-gradient) есть только на главной, в подвале свой. */
.mxd-footer .hl-footer-wordmark__text {
  stroke: url(#hl-footer-gradient);
}

/* Карточки студий в подвале: каркас карточки Rayo, строки как в офф-канвасе,
   контакты чипами-иконками (Benji 2026-11-08: словами ужасно, иконками лучше). */
.footer-blocks__card.hl-footer-studio {
  gap: 1.6rem;
  padding: 2.6rem 3rem; /* боковые поля как у Rayo: 3rem, с 768 — 5rem, 1200–1439 — 4rem */
}

@media only screen and (min-width: 768px) {
  .footer-blocks__card.hl-footer-studio {
    padding: 2.6rem 5rem;
  }
}


.hl-footer-studio p {
  margin: 0;
  font-family: var(--hl-font-ui);
}

.hl-footer-studio__metro {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-medium);
}

.hl-footer-studio__address {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--t-bright);
}

.hl-footer-studio__note {
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--t-medium);
}

.hl-footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-footer-chips a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: var(--t-bright);
  background: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.hl-footer-chips a:hover {
  border-color: var(--hl-color-orchid);
  color: var(--hl-color-orchid);
}

.hl-chip-icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

.hl-chip-icon--line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hl-footer-chips--common {
  margin-top: 2rem;
}

/* Benji 2026-11-08: над надписью больше воздуха, и при параллаксе она не должна
   наезжать на блок выше — обёртка режет всё, что выехало за её верх. */
.mxd-footer__text-wrap {
  overflow: hidden;
}

/* Benji 2026-11-08: надпись посередине чёрного поля между последним блоком и
   карточками. Сверху 5rem секции + 5rem здесь; снизу столько же за вычетом
   нижнего поля внутри SVG (23/1000 его ширины, примерно 2.3vw). */
.mxd-footer .mxd-footer__fullwidth-text {
  padding-top: 5rem;
  margin-bottom: calc(10rem - 2.3vw);
}

/* Последняя секция страницы перед подвалом: у Rayo нижнее поле 13–15rem
   (`padding-blog` и т. п.), Benji 2026-11-08 просил 5rem. */
.mxd-page-content > .mxd-section:last-child {
  padding-bottom: 5rem;
}

/* Низ подвала выше, чтобы кнопка «наверх» не ложилась на копирайт. */
@media only screen and (min-width: 768px) {
  .mxd-footer {
    padding-bottom: 10rem;
  }
}

/* Копирайт в последней карточке по центру. */
.mxd-footer .footer-blocks__links:has(> p:only-child) {
  justify-content: center;
}

/* Правая карточка: кнопки на всю ширину, слово слева, иконка справа. */
.hl-footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.hl-footer-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: 5.6rem;
  padding: 0 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--t-bright);
  background: none;
  font-family: var(--hl-font-ui);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hl-footer-btn .hl-btn-icon {
  opacity: 0.55;
  stroke-width: 1.8;
}

.hl-footer-btn:hover {
  border-color: var(--hl-color-orchid);
  color: var(--hl-color-orchid);
}

.hl-footer-btn:hover .hl-btn-icon {
  opacity: 1;
}

.hl-footer-btn--accent {
  border-color: var(--hl-color-orchid);
  background: var(--hl-color-orchid);
  color: var(--hl-color-white);
}

.hl-footer-btn--accent .hl-btn-icon {
  opacity: 0.8;
}

.hl-footer-btn--accent:hover {
  border-color: var(--hl-color-violet);
  background: var(--hl-color-violet);
  color: var(--hl-color-white);
}

/* Мелкие ссылки внизу карточек: на любой ширине в одну строку по краям,
   не столбиком, как у Rayo на телефоне; стрелка сразу за словом. */
.mxd-footer .footer-blocks__links {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mxd-footer .footer-blocks__links .btn-line-xsmall {
  width: auto;
  white-space: nowrap;
}

.mxd-footer .footer-blocks__links .btn-line-xsmall .btn-caption {
  white-space: nowrap;
}

.mxd-footer .footer-blocks__links p {
  width: auto;
}

/* Левая карточка: меню мельче Rayo (4.4rem), чтобы подвал был высотой в две
   карточки студий; внизу две мелкие ссылки как у Rayo. */
@media only screen and (min-width: 768px) {
  .footer-blocks__card.hl-footer-menu {
    padding: 3.2rem 5rem;
  }
}

.hl-footer-menu .footer-nav {
  gap: 1rem;
}

.hl-footer-menu .footer-nav__link {
  font-size: 2.8rem;
}

.hl-footer-menu .footer-nav__link .btn-caption {
  height: 3.4rem;
  line-height: 3.4rem;
}

.hl-footer-menu .footer-nav__counter {
  height: 3rem;
  padding: 0 1rem;
}

.hl-footer-menu .footer-nav__counter span {
  font-size: 1.8rem;
}

/* Карточки студий делят высоту колонки: текст сверху, кружки внизу. */
.hl-footer-studio__text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Узкий десктоп 1200–1439: слова меню Rayo по 4.4rem в колонку не входят
   (у Rayo пункты короче), кегль меню и заголовка чуть меньше, поля карточек уже. */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
  .footer-nav__link {
    font-size: 3.6rem;
  }

  .footer-nav__link .btn-caption {
    height: 4.4rem;
  }

  .footer-blocks__title-l {
    font-size: 3.6rem;
  }

  .footer-blocks__card {
    padding: 4rem;
  }

  .footer-blocks__card.hl-footer-studio {
    padding: 2.6rem 4rem;
  }

  .footer-blocks__card.hl-footer-menu {
    padding: 3.2rem 4rem;
  }
}

/* Колонки Rayo фиксированы 650px; у нас высота от содержимого, колонки
   тянутся за самой высокой. */
@media only screen and (min-width: 1200px) {
  .footer-blocks__column {
    height: auto;
  }
}

/* Шапка внутренней страницы в духе Villade: подзаголовок с линиями и точками,
   крупное имя раздела, хлебные крошки. Ниже hero главной, но не простыня. */
.hl-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(34rem, 46vh, 52rem);
  padding: clamp(12rem, 10vw, 16rem) clamp(1.8rem, 6vw, 8rem) clamp(4rem, 5vw, 7rem);
  overflow: hidden;
  text-align: center;
  color: var(--hl-text);
  isolation: isolate;
}

.hl-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35);
}

.hl-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 18, 18, 0.2), var(--hl-bg));
}

.hl-page-hero__inner {
  width: min(100%, 120rem);
}

.hl-sub-title {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 2rem;
  font-family: var(--hl-font-ui);
  font-size: clamp(1.2rem, 1vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hl-color-orchid);
}

.hl-sub-title__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

.hl-sub-title__line {
  width: clamp(3.2rem, 4vw, 6.4rem);
  height: 1px;
  background: currentColor;
}

.hl-page-hero__title {
  margin: 0 0 2.4rem;
  font-family: var(--hl-font-ui);
  font-size: clamp(3.6rem, 7vw, 9.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.hl-page-hero__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-family: var(--hl-font-ui);
  font-size: clamp(1.3rem, 1.05vw, 1.6rem);
  color: rgba(255, 255, 255, 0.72);
}

.hl-page-hero__crumbs a {
  color: var(--hl-text);
  text-decoration: none;
}

.hl-page-hero__crumbs a:hover {
  color: var(--hl-color-orchid);
}

.hl-page-hero__arrow {
  color: var(--hl-color-orchid);
}

/* Шапка уже назвала раздел: заголовок старой статьи внутри текста прячем. */
.hl-page-hero + .hl-page h1.style,
.hl-page-hero + .hl-page .uk-panel > h1:first-child {
  display: none;
}

.hl-inner > .hl-page-hero:first-child {
  padding-top: clamp(12rem, 10vw, 16rem) !important;
}

.hl-inner .hl-page:not(:first-child) {
  padding-top: 0;
}

/* Кнопка видео в шапке живет только на телефоне. */
.hl-header-film {
  display: none;
}

@media (max-width: 767px) {
  /* Заголовок во всю ширину, кнопка видео уходит из hero в шапку. */
  .hl-hero-intro { gap: 0; margin-bottom: 2.4rem; }
  /* Заголовок на телефоне по центру на всю ширину: указание Benji 2026-11-08. */
  .hl-hero-heading { flex: 1 1 100%; text-align: center; }
  .hl-hero-heading__first,
  .hl-hero-heading__second { justify-content: center; }
  /* Кегль с запасом по краям, чтобы свечение не резалось о границы hero. */
  .hl-hero-heading { font-size: 10cqw; }
  /* Обе звезды на телефоне сняты, на их место позже придет что-то другое. */
  .hl-hero-heading__spark { display: none; }
  .hl-hero-film { display: none; }

  .hl-header-film {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hl-header-film svg {
    width: 2rem;
    height: 2rem;
  }
}

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

/* Один и тот же зазор над и под HURTLAND.RU: низ hero и низ разделителя.
   viewBox SVG обрезан по буквам (y от 3 до 92), внутренних полей у него нет. */
:root {
  --hl-domain-gap: clamp(4rem, 4.4vw, 8rem);
}

.hl-domain-divider {
  padding: 0 clamp(1.8rem, 6vw, 8rem) var(--hl-domain-gap);
  background: var(--hl-bg);
}

/* Кегль 122 — не «на глаз», а с намеренным запасом. textLength растягивает
   строку до 1000 в обе стороны: если естественная ширина больше, просветы
   СЖИМАЮТСЯ и буквы слипаются. Самый широкий из системных вариантов —
   Liberation Sans, 7.382 на кегль 1, впритык дал бы 135. Берем 122, это 10%
   запаса, поэтому растяжка всегда идет в плюс, на любом системном шрифте.
   Домен: контурная надпись, открывается слева направо по скроллу.
   Раскрытие делает маска в разметке, ее ведет ScrollTrigger в app.js.
   Пунктирное рисование убрано: в SVG узор перезапускается на каждом контуре,
   поэтому все буквы тянулись одновременно и слово не читалось как слово.
   Вместе с ним отпала и замеренная длина штриха. */
.hl-domain-divider__svg {
  display: block;
  width: min(100%, 172rem);
  height: auto;
  margin: 0 auto;
  padding: 0;
  color: var(--hl-text);
  overflow: visible;
}

.hl-domain-divider__text {
  fill: none;
  stroke: url(#hl-domain-gradient);
  stroke-width: 2.6;
  opacity: 0.42;
  filter: drop-shadow(0 0 7px rgba(166, 0, 255, 0.4));
  stroke-linejoin: round;
  stroke-linecap: round;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 122px;
  font-weight: 700;
}

/* Точка идет общим градиентом. Отдельную отрисовку решаем позже. */
.hl-domain-divider__dot {
  stroke: inherit;
}

.hl-hero-webgen__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 172rem);
  margin: 0 auto;
}

.mxd-header__controls {
  margin-left: auto;
}

.hl-hero-beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(8px);
  opacity: 0.85;
}

.loading__item,
.loading__fade {
  opacity: 1;
}

.hl-hero-webgen__rayo-title {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.4rem, 2vw, 3.2rem);
}

.hl-hero-webgen__rayo-title .mxd-hero-03__headline {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  max-width: none;
  padding: 0;
}

.hl-hero-webgen__rayo-title .hero-03-headline__svg,
.hl-hero-webgen__rayo-title .hero-03-headline__svg-mobile {
  display: none;
}

.hl-hero-webgen__rayo-title .hero-03-headline__title {
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
  color: var(--hl-text);
  font-family: var(--hl-font-display);
  font-size: inherit;
  font-weight: 650;
  line-height: 0.78;
  text-transform: lowercase;
}

.hl-hero-webgen__rayo-title .hero-03-headline__title::before {
  content: none;
}

.hl-hero-webgen__rayo-title .hero-03-headline__hidden {
  display: block;
  width: max-content;
  max-width: none;
  color: transparent;
  font-size: clamp(2rem, 10vw, 18rem);
  font-family: var(--hl-font-wordmark);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background-image: linear-gradient(90deg, hsl(calc(270 + var(--hl-wordmark-hue) * 15), 95%, 65%), hsl(calc(285 + var(--hl-wordmark-hue) * 15), 95%, 65%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: url(#hl-wordmark-glow);
  animation: hl-wordmark-gradient 6s ease-in-out infinite alternate;
  opacity: 0.4;
  margin-inline: auto;
}

.hl-wordmark-filter {
  position: absolute;
  pointer-events: none;
}

@supports (font-size: 1cqw) {
  .hl-hero-webgen__rayo-title .hero-03-headline__hidden {
    font-size: calc(80cqw / 7.965);
  }
}

/* Вырез под карточку рисует CSS, а не альфа-канал картинки: так он живет на
   любой ширине, а его размер идет от самой карточки. Выступ с фоном страницы
   сидит в правом верхнем углу баннера; две вогнутые дуги по краям — квадраты
   с радиальным градиентом, прозрачные внутри четверти круга. */
.hl-hero-webgen__media,
.hl-hero-webgen__notch {
  --hl-hero-radius: clamp(2rem, 2.6vw, 4rem);
}

.hl-hero-webgen__notch {
  --hl-notch-gap: clamp(1.8rem, 2vw, 3.2rem);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0 0 var(--hl-notch-gap) var(--hl-notch-gap);
  background: var(--hl-bg);
  border-bottom-left-radius: var(--hl-hero-radius);
}

.hl-hero-webgen__notch::before,
.hl-hero-webgen__notch::after {
  content: "";
  position: absolute;
  width: var(--hl-hero-radius);
  height: var(--hl-hero-radius);
  background: radial-gradient(circle farthest-side at 0 100%, transparent calc(100% - 0.5px), var(--hl-bg) 100%);
  pointer-events: none;
}

.hl-hero-webgen__notch::before {
  top: 0;
  left: calc(-1 * var(--hl-hero-radius));
}

.hl-hero-webgen__notch::after {
  right: 0;
  bottom: calc(-1 * var(--hl-hero-radius));
}

.hl-hero-webgen__trust {
  color: #ffffff;
  text-decoration: none;
  position: relative;
  min-height: clamp(6.4rem, 5.6vw, 10.6rem);
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border-radius: clamp(1.2rem, 1vw, 1.8rem);
  background: #242528;
}

.hl-hero-webgen__reviews {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(9rem, 7.5vw, 13rem);
  padding: 0 clamp(1.4rem, 1.4vw, 2.4rem);
  color: var(--hl-text);
  line-height: 1;
  white-space: nowrap;
}

.hl-hero-webgen__reviews-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  font-family: var(--hl-font-reviews);
  font-size: clamp(1.7rem, 1.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

/* Иконка реплики вместо слова «отзывов» на всех экранах: решение Benji 2026-11-08. */
/* Строка числа: иконка реплики перед числом на всех экранах, как звезда
   перед оценкой справа. Решение Benji 2026-11-08. */
.hl-hero-webgen__reviews-num {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

/* Иконка как звезда справа: тот же размер, цвет орхидеи от логотипа.
   Проба Benji 2026-11-08, цвет не утверждён. */
.hl-hero-webgen__reviews-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: var(--hl-color-orchid);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

/* Слово под числом без падежа, как подпись: «отзывы». Benji просил идей,
   варианты в template.md. */
.hl-hero-webgen__reviews-word {
  font-family: var(--hl-font-ui);
  font-size: clamp(1.3rem, 1.05vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.hl-hero-webgen__reviews-copy strong {
  font-family: var(--hl-font-numeric);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
}

/* Награда Яндекса своей разметкой: iframe виджета зависел от Яндекса, при его
   недоступности висел пустым, а растянутый трансформом давал мыльную картинку. */
.hl-hero-webgen__award {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.55em;
  padding: clamp(1.2rem, 1.1vw, 2rem) clamp(1.6rem, 1.6vw, 2.8rem);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--hl-font-ui);
  line-height: 1;
  white-space: nowrap;
}

.hl-hero-webgen__award-top {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: clamp(1.5rem, 1.3vw, 2.3rem);
  font-weight: 600;
}

.hl-hero-webgen__award-top svg {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
}

.hl-hero-webgen__award-star {
  margin-left: 0.5em;
  color: var(--hl-color-gold);
}

/* Подпись тянется на ширину строки «Хорошее место ★ 5,0»: крупнее прежнего
   и с разрядкой, text-align-last добивает остаток ширины колонки. */
.hl-hero-webgen__award-sub {
  display: block;
  font-size: clamp(1.3rem, 1.05vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: right;
  color: rgba(255, 255, 255, 0.72);
}

.hl-hero-webgen__media {
  position: relative;
  aspect-ratio: 2820 / 1040;
  overflow: hidden;
  border: 0;
  border-radius: var(--hl-hero-radius);
  background: var(--hl-bg);
}

.hl-hero-webgen__media::before {
  content: none;
}

.hl-hero-webgen__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hl-hero-webgen__tags {
  position: absolute;
  right: clamp(3rem, 4.8vw, 7.2rem);
  bottom: clamp(2rem, 3vw, 4.4rem);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: end;
  gap: clamp(1rem, 1.1vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-hero-webgen__tags a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 1.1em 0.6em;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.05vw, 1.9rem);
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(14px);
  background: rgba(20, 20, 20, 0.22);
}

/* Два тега (страницы пирсинга): крупнее, на телефоне по центру (Benji 2026-11-09). */
.hl-hero-webgen__tags.hl-hero-webgen__tags--two a {
  font-size: clamp(1.5rem, 1.35vw, 2.4rem);
  padding: 0.6em 1.3em 0.65em;
}

@media only screen and (max-width: 767px) {
  .hl-hero-webgen__tags.hl-hero-webgen__tags--two {
    right: 50%;
    transform: translateX(50%);
    justify-content: center;
  }
}

/* Иконки направлений вместо стрелок Rayo: inline SVG, у каждого направления свой цвет. */
.hl-hero-webgen__tags .hl-tag-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  color: var(--hl-tag-color, currentColor);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hl-hero-webgen__tags .hl-tag--tattoo { --hl-tag-color: var(--hl-color-pink); }
.hl-hero-webgen__tags .hl-tag--piercing { --hl-tag-color: var(--hl-color-sky); }
.hl-hero-webgen__tags .hl-tag--jewelry { --hl-tag-color: var(--hl-color-orange); }
.hl-hero-webgen__tags .hl-tag--gift { --hl-tag-color: var(--hl-color-violet); }
.hl-hero-webgen__tags .hl-tag--cover { --hl-tag-color: var(--hl-color-orchid); }

@media (max-width: 1179px) {
  .hl-hero-webgen {
    padding-top: 15rem;
  }

  .hl-hero-webgen__inner {
    display: flex;
    flex-direction: column;
  }

  .hl-hero-webgen__media {
    order: 1;
    aspect-ratio: 16 / 10;
  }

  /* Та же фотография, что на десктопе; героиня сдвинута к левому краю,
     справа остается свободный фон под кнопки. */
  .hl-hero-webgen__media img {
    object-position: 35% center;
  }

  .hl-hero-webgen__rayo-title {
    order: 3;
  }
}

@media (max-width: 767px) {
  .hl-hero-webgen {
    min-height: auto;
    padding-top: 11rem;
    padding-inline: 2rem;
  }

  .hl-hero-webgen__rayo-title {
    margin-top: 2.4rem;
  }

  .hl-hero-webgen__media {
    aspect-ratio: 1;
  }

  .hl-hero-webgen__media img {
    object-position: 24% center;
  }

  /* Карточка на телефоне в одну строку: «1253 отзыва | ★ 5,0».
     Название награды и подпись скрыты, остаётся оценка. */
  .hl-hero-webgen__notch {
    --hl-notch-gap: 1.4rem;
  }

  .hl-hero-webgen__trust {
    min-height: 0;
    border-radius: 1.2rem;
  }

  .hl-hero-webgen__reviews {
    min-width: 0;
    padding: 0.9rem 1.1rem;
  }

  .hl-hero-webgen__reviews-copy {
    flex-direction: row;
    align-items: center;
    gap: 0.4em;
    font-size: 1.3rem;
  }

  .hl-hero-webgen__reviews-word {
    display: none;
  }

  .hl-hero-webgen__award {
    gap: 0;
    padding: 0.9rem 1.1rem;
  }

  .hl-hero-webgen__award-top {
    font-size: 1.3rem;
  }

  .hl-hero-webgen__award-pin,
  .hl-hero-webgen__award-title,
  .hl-hero-webgen__award-sub {
    display: none;
  }

  .hl-hero-webgen__award-star {
    margin-left: 0;
  }

  .hl-hero-webgen__tags {
    left: 1.6rem;
    right: 1.6rem;
    bottom: 1.6rem;
    gap: 1rem;
  }

  .hl-hero-webgen__tags a {
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
  }

  .hl-hero-webgen__rayo-title .hero-03-headline__hidden {
    line-height: 1.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-hero-webgen__rayo-title .hero-03-headline__hidden {
    animation: none;
  }

}