/* =========================================================
   ПЕСОЧНИЦА /s4v8n2/ — стили правок главной стахеев.рф
   Подключается после style.css шаблона coastal_1_0, поэтому
   всё здесь перекрывает штатное. Токены шаблона:
   --color1 #191c1c (графит) · --color2 #a77e5f (бронза)
   --color3 #CAA089 · --color4 #dec2aa · --color6 #f2f1ef (фон)
   Шрифт шаблона: Dihjauti. Отступ: --offset (2rem / 15px моб).
   ========================================================= */

/* --- плашка песочницы убрана 29.09.2026 по команде Романа (noindex остаётся) --- */

/* --- служебные классы песочницы ---
   .sb-hide — скрыть блок целиком (вешается через replace.php на <section ...>,
              пока решение «убрать / вниз» не принято окончательно) */
.sb-hide { display: none !important; }

/* =========================================================
   ПРАВКИ ПО БЛОКАМ — заполняется по ходу работы
   (нумерация по таблице «Главная_правки_по_блокам.md»)
   ========================================================= */

/* ---------- БЛОК 1. Первый экран (29.09.2026) ---------- */

/* пустая верхняя полоса без текстов — оставляем тонкой, награды
   позиционируются от её нижнего края, поэтому саму полосу не убираем */
.app .start-screen__infos { padding: 0; min-height: 0; height: 0; }   /* полоса убрана совсем: видео сразу под шапкой */
.app .start-screen__awards { top: calc(100% + 2rem); }

/* h1 = большое «Стахеев» (шрифт заголовка Winglet) + подзаголовок нашим шрифтом */
.app .sb-hero-h1 { display: grid; justify-items: center; gap: 1.2rem; margin: 0; font-weight: inherit; }
.app .sb-hero-h1 .start-screen__title { font-size: 8rem; line-height: 1.05; letter-spacing: 0; padding-right: 0; }
.app .sb-hero-sub {
  font-family: inherit;               /* Dihjauti — шрифт сайта */
  font-size: 2.1rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color4);
  text-align: center;
  padding: 0 var(--offset);
}

/* строка под видео на месте прежнего мелкого h1 */
.app .sb-hero-note {
  color: var(--color4);
  font-size: 14px;
  line-height: 1.8;
  margin: 15px 0 0;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
}


@media (max-width: 1023px) {
  .app .sb-hero-h1 .start-screen__title { font-size: 5.5rem; }
  .app .sb-hero-sub { font-size: 1.6rem; }
}
@media (max-width: 767px) {
  .app .sb-hero-h1 .start-screen__title { font-size: 4.2rem; }
  .app .sb-hero-sub { font-size: 1.4rem; }
}

/* --- правки после первого просмотра 29.09.2026 --- */
/* подзаголовок не должен заезжать под пиктограммы наград справа (ПК) */
.app .sb-hero-sub { max-width: 52rem; }
/* на планшете и телефоне награды стоят слева под заголовком — опускаем их ниже подзаголовка */
@media (max-width: 1023px) {
  .app .start-screen__awards { top: 27rem; }
}

/* ===================================================================
   ШАПКА (29.09.2026) — по решению, отработанному на Прайме
   (sb-pc-header + sticky-шапка для Телеграм-вебвью).
   Шаблон держит высоту жёстко через --header-height на :root
   (15rem / 13rem / 11rem) и той же переменной отступает .app сверху;
   на скролле шапка ещё и пересобирается классами (_no-top / _scroll).
   Делаем её сразу узкой и одинаковой в обоих состояниях.
   =================================================================== */

/* sticky внутри overflow:hidden не работает (hidden = свой скролл-
   контейнер). clip даёт тот же обрез без этого побочного эффекта;
   ОБЕ оси clip — смешанная пара в части браузеров откатывается к hidden */
.app { overflow-x: clip; overflow-y: clip; }

/* --- ПК и планшет-ландшафт (шапка шаблона фиксированная) ---
   Эмблема Стахеева вертикальная (рамка + «премиальный квартал»), поэтому
   высоту держим жёстко 80px, а логотип вписываем в неё по высоте. */
@media (min-width: 1024px) {
  :root { --header-height: 80px; }               /* и высота шапки, и отступ .app, и top подменю */
  .app .header,
  .app .header._no-top {
    --header-height: 80px;
    height: 80px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .app .header__inner { grid-gap: 15px; align-items: center; width: 100%; }
  .app .header__logo { display: flex; align-items: center; justify-content: center; margin: 0 15px; }
  .app .header__logo img,
  .app .header._no-top .header__logo img { width: auto; height: 62px; }
  .app .header__nav { align-items: center; }
  .app .header__nav-item { font-size: 13px; }
  .app .header__contacts { row-gap: 3px; grid-template-rows: auto auto; font-size: 15px; margin-left: 2rem; align-self: center; }
  .app .header__contacts .link { font-size: 15px; }
  .app .header__contacts .button,
  .app .header__contacts a.button { padding: 5px 14px; font-size: 11px; }
  .app .header__label { display: none !important; }   /* бегунок «0% рассрочка» съедал ещё 32px */
}

/* --- телефон и планшет-портрет (в шаблоне шапка static + JS-классы) --- */
@media (max-width: 1023px) {
  :root { --header-height: 6rem; }
  /* во встроенных браузерах (Телеграм, Chrome iOS) fixed через классы
     плавает вместе с их панелями — sticky остаётся в потоке */
  .app .header,
  .app .header._scroll {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    transform: none !important;
    height: auto !important;
    z-index: 555;
  }
  /* «козырёк»: продолжение фона шапки вверх — ТГ считает верхом линию
     ниже своей пилюли, в зазоре просвечивал контент. ::after занят
     шаблонным декором (снег) */
  .app .header::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: 160px;
    background: var(--color1);
  }
  /* бар сразу компактный — как у шаблона после прокрутки, только с самого начала */
  .app .header__mobile,
  .app .header._scroll .header__mobile { padding: 8px 2.5rem; }
  .app .header__mobile-logo img,
  .app .header._scroll .header__mobile-logo img { width: 6rem; margin: auto; }
  .app .header__btn,
  .app .header._scroll .header__btn { width: 3.5rem; height: 3.5rem; min-width: 0; padding: 0; }
  .app .header__btn img { width: 3.5rem; }
  .app .header__label { display: none !important; }
}

/* 29.09.2026: вариант «видео от верхней кромки + полупрозрачная шапка»
   показан и ОТМЕНЁН Романом — шапка со сплошной заливкой, логотип на месте,
   видео начинается под шапкой. */

/* ---------- 29.09.2026: заголовок без имени, выравнивание слева на ПК ---------- */
/* имя квартала в h1 только для поиска и ИИ — визуально его несёт логотип шапки */
.app .sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1024px) {
  .app .start-screen__main { justify-items: start; }
  .app .sb-hero-h1 { justify-items: start; justify-self: start; text-align: left; }
  .app .sb-hero-h1 .start-screen__title { text-align: left; }
  .app .sb-hero-sub { text-align: left; padding: 0; max-width: none; }
  /* иконки TG/MAX и строка «рассрочка» остаются как были (по центру/справа) */
  .app .start-screen__main > .start-screen__button { justify-self: center; }   /* строка «рассрочка» остаётся по центру */
}

/* ===================================================================
   ЧИТАЕМОСТЬ ЗАГОЛОВКА НА СВЕТЛОМ ВИДЕО (29.09.2026)
   Три тихих слоя, ни один не бросается в глаза:
   1) виньетка — лёгкое затемнение той части кадра, где лежит текст
      (слева на ПК, сверху на телефоне), к центру сходит на нет;
   2) мягкое свечение по контуру букв — размытая тень без жёсткой обводки;
   3) «золото Прайма» в текстовой версии: один медленный перелив по
      заголовку при загрузке (бронза → белое золото → бронза), дальше
      буквы стоят спокойно. Отключается одной строкой: animation: none.
   =================================================================== */
.app .start-screen__content::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(25,28,28,.55) 0%, rgba(25,28,28,.28) 36%, rgba(25,28,28,0) 62%);
}
@media (max-width: 1023px) {
  .app .start-screen__content::before {
    background: linear-gradient(180deg, rgba(25,28,28,.55) 0%, rgba(25,28,28,.25) 40%, rgba(25,28,28,0) 62%);
  }
}
.app .start-screen__main { z-index: 1; }

/* свечение по контуру: заголовок — через drop-shadow (совместимо с золотым
   переливом, где заливка букв прозрачная), подзаголовок — обычной тенью */
.app .sb-hero-h1 .start-screen__title {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
.app .sb-hero-sub,
.app .sb-hero-note {
  text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 16px rgba(0,0,0,.45);
}

/* золотой перелив — один раз при загрузке */
.app .sb-hero-h1 .start-screen__title {
  background: linear-gradient(100deg,
    var(--color4) 0%, var(--color4) 42%,
    #DFA94F 48%, #FFE9A8 52%, #DFA94F 56%,
    var(--color4) 62%, var(--color4) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sbGoldSweep 2.2s ease-in-out .7s 1 both;
}
@keyframes sbGoldSweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app .sb-hero-h1 .start-screen__title { animation: none; background-position: 0 0; }
}

/* ---------- 29.09.2026: награды на телефоне сразу под подзаголовком, стрелка вниз убрана,
   плашка «эскроу»: на ПК убрана, на телефоне — «Рассрочка 0%» ---------- */
@media (max-width: 1023px) {
  .app .start-screen__awards { top: 13.5rem; }
  .app .start-screen:after { display: none !important; }     /* стрелка-подсказка к плашке */
  .app .sb-banner { padding: 2.2rem 0; font-size: 16px; text-transform: uppercase; color: var(--color4); white-space: nowrap; letter-spacing: 0; }
  .app .sb-banner .text-banner__title { padding-left: 10px; padding-right: 10px; }
  .app .sb-hero-note { display: none; }                      /* на телефоне рассрочка живёт на плашке под видео */
}
@media (max-width: 767px) {
  .app .start-screen__awards { top: 12rem; }
}
@media (min-width: 1024px) {
  .app .sb-banner { display: none; }
}
@media (max-width: 359px) {
  .app .sb-banner { font-size: 13px; }                       /* узкие телефоны: одна строка */
}

/* ---------- БЛОК 3 (29.09.2026): в слайдере «капитал» остался один слайд — стрелки и счётчик не нужны ---------- */
.app #first-line .slider__nav { display: none; }
.app #first-line .slider__main .button { display: none; }   /* кнопка «Заказать звонок» со слайда убрана (Роман) */

/* ---------- ВИДЕО-СЛАЙДЫ (29.09.2026): видео поверх постера, прозрачно до первого кадра ---------- */
.app .sb-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 1;
}
.app .sb-video._playing { opacity: 1; }
.app .swiper-slide .slider__main { z-index: 2; }
/* БЛОК 4 (Роман, 29.09): кнопка «Заказать презентацию» с пляжного двора убрана */
.app #beach .slider__main .button { display: none; }

/* ---------- БЛОК 7 (29.09.2026): подзаголовок блока расположения ---------- */
.app #location .sb-location-sub {
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color9);
  text-align: center;
}
@media (max-width: 767px) {
  .app #location .sb-location-sub { font-size: 1.4rem; }
}
/* цифры: до старта отсчёта не прыгает высота — фиксируем минимальную ширину не нужно,
   значение подменяется текстом той же длины */
.app #location .number .h3 { font-variant-numeric: tabular-nums; }
/* БЛОК 7, ПК (Роман, 29.09): заголовок и подзаголовок строго по центру, воздух перед цифрами */
@media (min-width: 1024px) {
  .app #location .section__title { text-align: center; justify-items: center; margin-bottom: 6rem; }
  .app #location .section__title h2 { text-align: center; margin-left: auto; margin-right: auto; }
  .app #location .sb-location-sub { text-align: center; margin-left: auto; margin-right: auto; }
}
/* шаблонный .section__title — сетка в две колонки: подзаголовок вставал справа от заголовка.
   Делаем блок одноколоночным, оба элемента во всю ширину и по центру */
@media (min-width: 1024px) {
  .app #location .section__title { display: block; }
  .app #location .section__title h2,
  .app #location .sb-location-sub { display: block; width: 100%; max-width: 90rem; }
}
/* БЛОК 7, телефон и планшет (Роман, 29.09): ровно 4 строки — 2 заголовка + 2 подзаголовка,
   на любой ширине: каждая строка — неразрывный блок, кегль подстраивается под ширину экрана */
@media (max-width: 1023px) {
  .app #location .section__title h2 .sb-l,
  .app #location .sb-location-sub .sb-l { display: block; white-space: nowrap; }
  .app #location .section__title h2 { font-size: min(3.2rem, 7.2vw); line-height: 1.15; text-align: center; }
  .app #location .sb-location-sub { font-size: min(1.5rem, 3.7vw); line-height: 1.5; margin-top: 1rem; }
  .app #location .section__title { margin-bottom: 3.5rem; }
}

/* ===================================================================
   КЛУБНАЯ ИНФРАСТРУКТУРА — формат highlife.ru (hl-infra, 29.09.2026).
   Перенос из прототипа site\prototip-highlife\proto.css (блок 2).
   Ориентация как у highlife: portrait = телефон/планшет-портрет,
   landscape = ПК. Шрифт шаблона Dihjauti, тёмный фон #0e1011.
   =================================================================== */
.app .hl-infra { --dark: #0e1011; --ease: cubic-bezier(.22,.61,.36,1);
  position: relative; display: flex; flex-direction: column; overflow: clip;
  background: var(--dark); color: #E0DAD5; padding-bottom: calc(6 * var(--sb-stable-vh,1svh)); font-size: 1.6rem; line-height: 1.4; }
.app .hl-infra * { box-sizing: border-box; }
.app .hl-infra img { display: block; }
/* тёмная полоса поверх верхней зоны, чтобы заголовок «уходил под» верх экрана */
.app .hl-infra__over { position: absolute; left: 0; top: 0; width: 100%; height: calc(2.4rem + calc(3.7 * var(--sb-stable-vh,1svh))); background: var(--dark); z-index: 20; }
.app .hl-infra__wrap { height: 250vh; }
.app .hl-infra__in { position: sticky; top: calc(-31.9444vh); height: 100vh; margin-bottom: calc(31.9444vh); display: flex; flex-direction: column; }
.app .hl-infra__head { padding-top: calc(15.5 * var(--sb-stable-vh,1svh)); text-align: center; }
.app .hl-infra__title { margin: 0 auto calc(4 * var(--sb-stable-vh,1svh)); max-width: 14em; text-transform: uppercase; font-weight: 400; font-size: 4.1rem; line-height: 1.1; color: var(--color4); display: block; text-align: center; }
.app .hl-infra__text { max-width: 52rem; margin: 0 auto; font-size: 1.7rem; line-height: 1.5; color: #E0DAD5; text-transform: uppercase; }
.app .hl-infra__body { position: relative; display: flex; flex: 1; margin-top: calc(4 * var(--sb-stable-vh,1svh)); transition: opacity .2s linear; }

/* ----- категории (ПК): вертикальная колонка слева, «лестница» прозрачности ----- */
.app .hl-infra__cats-wrap { position: absolute; left: 0; top: 3.7vw; bottom: -1vw; width: 21.1vw; overflow: hidden; z-index: 3; }
.app .hl-infra__cats { position: absolute; left: 0; right: 0; top: 50%; padding: 0 2em; text-transform: uppercase; font-weight: 600; font-size: 1.25rem; letter-spacing: .02em; transition: transform 1.2s var(--ease); will-change: transform; }
.app .hl-infra__cat { height: 3.3vw; display: flex; align-items: center; cursor: pointer; opacity: .1; transition: opacity .6s; white-space: nowrap; }
.app .hl-infra__cat[data-pos="3"] { opacity: .2; }
.app .hl-infra__cat[data-pos="2"] { opacity: .3; }
.app .hl-infra__cat[data-pos="1"] { opacity: .5; }
.app .hl-infra__cat[data-pos="0"] { opacity: 1; pointer-events: none; }
@media (hover: hover) { .app .hl-infra__cat:hover { opacity: 1; } }

/* ----- галерея (ПК): двойной слайдер ----- */
.app .hl-infra__gallery { position: relative; width: 100%; height: 39vw; }
.app .hl-slider { position: relative; margin-left: 21.1vw; padding-right: 21.1vw; overflow: hidden; height: 100%; }
.app .hl-slider__track { position: relative; height: 100%; padding-top: 4.7vw; display: flex; will-change: transform; transition: transform 1.2s var(--ease); }
.app .hl-slide { flex: 0 0 auto; width: 55.8vw; height: 34.4vw; padding: 0 1vw; cursor: pointer; }
.app .hl-slide__img { position: relative; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; transition: transform 1.2s var(--ease), transform-origin 1.2s var(--ease); }
.app .hl-slide__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app .hl-slide__img::after { content: attr(data-caption); position: absolute; left: 2rem; bottom: 1.6rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .06em; color: #E0DAD5; opacity: 0; transition: opacity .6s; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.app .hl-slide:not(.is-active) .hl-slide__img { transform: translateY(-15%) scale(.74); }
.app .hl-slide.is-prev .hl-slide__img { transform-origin: 100% 0; }
.app .hl-slide.is-active .hl-slide__img::after { opacity: 1; }
.app .hl-slider.no-anim .hl-slider__track, .app .hl-slider.no-anim .hl-slide__img { transition: none !important; }
.app .hl-slider__pag { display: none; }

/* стрелки */
.app .hl-slider__nav { position: absolute; right: 5%; bottom: 2px; z-index: 2; display: flex; align-items: center; gap: 1rem; }
.app .hl-arrow { width: 5rem; height: 5rem; padding: 0; border: 0; background: none; color: #E0DAD5; cursor: pointer; }
.app .hl-arrow svg { width: 100%; height: 100%; overflow: visible; }
.app .hl-arrow .arrow { transition: transform .3s; }
@media (hover: hover) { .app .hl-arrow_left:hover .arrow { transform: translateX(-20%); } .app .hl-arrow_right:hover .arrow { transform: translateX(20%); } }
.app .hl-slider__counter { display: none; min-width: 4em; text-align: center; font-size: 1.4rem; }

/* ----- телефон / планшет-портрет ----- */
@media (max-width: 1023px), (orientation: portrait) {
  .app .hl-infra { padding-bottom: calc(6 * var(--sb-stable-vh,1svh)); }
  .app .hl-infra__over { display: none; }
  .app .hl-infra__wrap { height: auto; }
  .app .hl-infra__in { position: static; height: auto; margin: 0; }
  .app .hl-infra__head { padding: calc(8 * var(--sb-stable-vh,1svh)) var(--offset) calc(4 * var(--sb-stable-vh,1svh)); }
  .app .hl-infra__title { font-size: 3.2rem; margin-bottom: 1.4rem; max-width: none; }
  .app .hl-infra__text { font-size: 1.4rem; }
  .app .hl-infra__body { flex-direction: column-reverse; gap: calc(5 * var(--sb-stable-vh,1svh)); margin-top: 0; }
  .app .hl-infra__cats-wrap { position: relative; width: 100%; top: auto; bottom: auto; overflow: hidden; }
  .app .hl-infra__cats { position: relative; top: auto; left: 50%; display: flex; width: max-content; padding: 0; font-size: 1.15rem; }
  .app .hl-infra__cat { height: auto; padding: 0 .85em; opacity: .5; }
  .app .hl-infra__cat[data-pos="0"] { opacity: 1; }
  /* галерея: один большой кадр почти во всю ширину, следующий выглядывает справа (как у highlife) */
  .app .hl-infra__gallery { width: 100%; height: auto; margin: 0; }
  .app .hl-slider { margin: 0; padding: 0; width: 100vw; overflow: hidden; }
  .app .hl-slider__track { padding-top: 0; margin-left: 5vw; height: min(128vw, calc(66 * var(--sb-stable-vh,1svh))); transition: transform .6s var(--ease); }
  .app .hl-slide { width: 90vw; height: 100%; padding: 0 2.5vw 0 0; }
  .app .hl-slide:not(.is-active) .hl-slide__img { transform: none; }
  .app .hl-slide__img::after { content: ""; background: linear-gradient(transparent 55%, rgba(0,0,0,.45)); inset: 0; left: 0; bottom: 0; opacity: 1; }
  /* полоски-пагинация внутри активного кадра, как в сторис */
  .app .hl-slider__pag { display: flex; gap: 1.2vw; position: absolute; left: 8vw; width: 81.5vw; bottom: 4vw; z-index: 2; }
  .app .hl-slider__pag i { flex: 1; height: 3px; background: rgba(222,194,170,.45); position: relative; overflow: hidden; border-radius: 2px; }
  .app .hl-slider__pag i::after { content: ""; position: absolute; inset: 0; background: var(--color4); transform: translateX(-101%); transition: transform .6s var(--ease); }
  .app .hl-slider__pag i.is-active::after { transform: none; }
  .app .hl-slider__pag i.is-active { background: rgba(222,194,170,.45); }
  .app .hl-slider.is-dragging .hl-slider__track { transition: none; }
  .app .hl-slider__nav { display: none; }
  .app .hl-arrow { width: 3.9rem; height: 3.9rem; }
  .app .hl-slider__counter { display: block; }
}

/* Desktop strip: same background as the page; mobile composition retained. */
.app .sb-hero-socials{display:none}
@media(min-width:1024px){
 .app .sb-banner{display:grid;grid-template-columns:140px minmax(0,1fr) 140px;align-items:center;min-height:76px;padding:12px 32px;gap:16px;background:var(--color1,#191c1c);color:var(--color4,#f2f1ef);}
 .app .sb-banner .text-banner__title{grid-column:2;grid-row:1;width:auto;max-width:none;padding:0;margin:0;text-align:center;font-size:24px;line-height:1.3;letter-spacing:0;text-transform:none;}
 .app .sb-banner .sb-hero-socials{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-items:center;gap:12px;}
 .app .sb-banner .sb-hero-socials a{position:static;display:flex;align-items:center;justify-content:center;transform:none;margin:0;padding:0;width:44px;height:44px;flex:0 0 44px;}
 .app .sb-banner .sb-hero-socials img{display:block;width:40px;height:40px;object-fit:contain;}
 .app .sb-banner .sb-hero-socials a:focus-visible{outline:2px solid var(--color2,#a77e5f);outline-offset:4px;}
 .app .start-screen .sb-hero-note{display:none;}
}

/* Compact desktop strip, Roman 01.10.2026. */
@media(min-width:1024px){
.app .sb-banner{min-height:52px;padding:2px 32px;}
.app .sb-banner .text-banner__title{font-size:19.2px;}
.app .sb-banner .sb-hero-socials{gap:8px;}
.app .sb-banner .sb-hero-socials a{width:48px;height:48px;flex-basis:48px;}
.app .sb-banner .sb-hero-socials img{width:48px;height:48px;}
}
@media(min-width:1024px){.app .sb-banner .text-banner__title{font-family:Dihjauti,sans-serif;font-weight:400;font-style:normal;letter-spacing:normal;text-transform:uppercase;}}

/* Prime gold palette adapted to a restrained, repeating masked glint. */
@media(min-width:1024px){
.app .sb-banner .sb-hero-socials a{position:relative;}
.app .sb-banner .sb-hero-socials a::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 34%,#EFC97E 44%,#FFE9A8 50%,#F7DC96 56%,transparent 66%);background-size:300% 100%;background-position:100% 0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.app .sb-banner .sb-hero-socials a.max::after{-webkit-mask-image:url('/local/templates/coastal_1_0/img/max.svg');mask-image:url('/local/templates/coastal_1_0/img/max.svg');}
.app .sb-banner .sb-hero-socials a.tg::after{-webkit-mask-image:url('/local/templates/coastal_1_0/img/tg.svg');mask-image:url('/local/templates/coastal_1_0/img/tg.svg');}
}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
.app .sb-banner .sb-hero-socials a::after{animation:sbSocialGold 10s ease-in-out infinite;animation-delay:1s;}
.app .sb-banner .sb-hero-socials a.tg::after{animation-delay:2.1s;}
}
@keyframes sbSocialGold{0%{opacity:0;background-position:100% 0;}4%{opacity:.55;}18%{opacity:.55;}24%{opacity:0;background-position:0% 0;}100%{opacity:0;background-position:0% 0;}}
@media(min-width:1024px){.app .sb-banner .sb-hero-socials a{inset:auto;}}
@media(min-width:1024px){.app .sb-banner .sb-hero-socials a::after{mask-mode:luminance;}}
/* Keep the name and facts intact when wrapping the extended hero text. */
.app .sb-hero-name,.app .sb-hero-fact{white-space:nowrap;}
.app .sb-hero-h1{max-width:100%;min-width:0;}
@media(max-width:1023px){.app .sb-hero-h1 .start-screen__title{max-width:100%;}.app .sb-hero-sub{max-width:100%;}}
.app .sb-hero-sub>span{white-space:nowrap;}
.app .sb-hero-h1{grid-template-columns:minmax(0,1fr);width:100%;}.app .sb-hero-h1>.start-screen__title,.app .sb-hero-h1>.sb-hero-sub{min-width:0;max-width:100%;}.app .sb-hero-sub>span{display:inline-block;}
/* Original CTA appearance, compact dimensions only. Roman, 01.10.2026. */
.app #pool-outside .button._alt-color:not(:empty),
.app #pool-inside .button._alt:not(:empty){box-sizing:border-box;width:320px;max-width:100%;min-width:0;height:50px;min-height:50px;padding:3px 10px;line-height:20px;white-space:normal;justify-self:center;margin-left:auto;margin-right:auto;}
@media(max-width:1023px){
 .app #pool-outside .button._alt-color:not(:empty),
 .app #pool-inside .button._alt:not(:empty){height:46px;min-height:46px;}
}

/* Desktop subtitle: compact type, left aligned; mobile approved unchanged. */
@media(min-width:1024px){.app .sb-hero-h1 .sb-hero-sub{font-size:14.4px;text-align:left;justify-self:start;width:auto;white-space:normal;}}
/* More breathing room in the two compact native CTAs, Roman 01.10.2026. */
.app #pool-outside .button._alt-color:not(:empty){font-size:14px;line-height:18px;padding:5px 16px;}
.app #pool-inside .button._alt:not(:empty){font-size:16px;line-height:20px;padding:5px 16px;}
@media(max-width:1023px){
 .app #pool-outside .button._alt-color:not(:empty){font-size:13px;line-height:16px;}
 .app #pool-inside .button._alt:not(:empty){font-size:14px;line-height:18px;}
}

/* Identical subtle gold wave on the floor-plan and call CTAs. */
@media(prefers-reduced-motion:no-preference){
 .app #pool-outside .button._alt-color:not(:empty),
 .app #pool-inside .button._alt:not(:empty){overflow:hidden;}
 .app #pool-outside .button._alt-color:not(:empty)::after,
 .app #pool-inside .button._alt:not(:empty)::after{
  content:'';position:absolute;inset:0 auto 0 0;width:60%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(250,220,150,.08) 20%,rgba(255,228,167,.28) 50%,rgba(250,220,150,.08) 80%,transparent 100%);
  transform:translateX(-110%);opacity:0;
  animation:sbPlanGoldWave 6.8s ease-in-out infinite;animation-delay:2s;
 }
}
@keyframes sbPlanGoldWave{
 0%{transform:translateX(-110%);opacity:0;}
 5%{opacity:.8;}
 13%{opacity:1;}
 23%{opacity:.8;}
 26.4706%{transform:translateX(180%);opacity:0;}
 100%{transform:translateX(180%);opacity:0;}
}

/* Call CTA fits its caption, retaining a modest 16px inset on each side. */
.app #pool-inside .button._alt:not(:empty){width:auto;min-width:0;white-space:nowrap;}

/* A little more space around the call caption, Roman 01.10.2026. */
.app #pool-inside .button._alt:not(:empty){padding-left:28px;padding-right:28px;}

/* Mobile location heading: center the blocks as well as their text. */
@media(max-width:1023px){
 .app #location .section__title{display:flex;flex-direction:column;align-items:center;text-align:center;}
 .app #location .section__title h2,.app #location .sb-location-sub{width:100%;max-width:100%;margin-left:auto;margin-right:auto;text-align:center;}
}

/* Club infrastructure: site palette on both layouts. */
.app #club.hl-infra{--dark:var(--color1,#191c1c);background:var(--dark);}
.app #club .hl-infra__title{color:var(--color2,#a77e5f);}
.app #club .hl-infra__text{color:var(--color4,#dec2aa);}
/* Desktop only: shorter scroll stage, compact edges, gallery stays visible to exit. */
@media(min-width:1024px) and (orientation:landscape){
 .app #club.hl-infra{padding-bottom:32px;}
 .app #club .hl-infra__over{display:none;}
 .app #club .hl-infra__wrap{height:calc(160 * var(--sb-stable-vh,1svh));min-height:calc(39vw + 240px);}
 .app #club .hl-infra__in{top:var(--header-height,80px);height:auto;margin-bottom:0;}
 .app #club .hl-infra__head{padding:32px 24px 0;}
 .app #club .hl-infra__title{margin-bottom:16px;}
 .app #club .hl-infra__body{flex:none;margin-top:16px;opacity:1!important;}
}

/* Club category labels: corporate bronze, larger on both layouts. */
.app #club .hl-infra__cats{color:var(--color2,#a77e5f);font-size:1.6rem;}
@media(orientation:portrait){.app #club .hl-infra__cats{font-size:1.4rem;}}
/* Native site navigation classes are applied to the original buttons. */
.app #club .sb-club-arrow{padding:0;border:0;background:none;cursor:pointer;}
.app #club .sb-club-arrow svg{display:none;}
.app #club .sb-club-arrow:focus-visible{outline:2px solid var(--color2);outline-offset:6px;}
@media(min-width:1024px) and (orientation:landscape){
 .app #club.hl-infra{padding-bottom:64px;}
 .app #club .hl-infra__head{padding-top:64px;}
 .app #club .hl-slider__track{padding-top:16px;height:calc(100% - 64px);}
 .app #club .hl-infra__gallery{height:calc(34.4vw + 80px);}
 .app #club .hl-slide__img::after{content:none;}
 .app #club .hl-slider__nav{left:auto;right:calc(5% + 15px);bottom:0;height:42px;gap:10px;color:var(--color2,#a77e5f);}
 .app #club .hl-infra__cats-wrap{bottom:64px;}
}

/* Club controls: small circles; right edge follows the visible, clipped photo area. */
@media(orientation:landscape){
 .app #club .hl-slider__nav{left:calc(22.1vw + 16px);right:max(16px,calc(100% - 75.9vw + 16px));width:auto;top:calc(39.1vw - 56px);bottom:auto;height:40px;justify-content:space-between;gap:0;z-index:4;pointer-events:none;}
 .app #club .sb-club-arrow{position:relative;inset:auto;flex:0 0 40px;width:40px;height:40px;min-width:0;padding:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(25,28,28,.14);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 1px 4px rgba(0,0,0,.12);color:#f1e6dc;}
 .app #club .sb-club-arrow::before{content:none;}
 .app #club .sb-club-arrow::after{content:'';display:block;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;font-family:inherit;font-size:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));}
 .app #club #infraPrev::after{transform:translateX(2px) rotate(-135deg);}
 .app #club #infraNext::after{transform:translateX(-2px) rotate(45deg);}
}
@media(min-width:1024px) and (orientation:landscape){
 .app #club .hl-slider__nav{top:calc(34.4vw - 40px);}
}

/* Larger desktop category labels; allow long names two lines without clipping. */
@media(min-width:1024px) and (orientation:landscape){
 .app #club .hl-infra__cats{font-size:20px;padding:0 12px;}
 .app #club .hl-infra__cat{height:max(56px,3.3vw);line-height:1.15;white-space:normal;}
}
@media(min-width:1024px) and (max-width:1199px) and (orientation:landscape){
 .app #club .hl-infra__cats{font-size:18px;padding:0 4px;}
}

/* Desktop: remove the obsolete arrow footer and leave a 32px gap before the lobby. */
@media(min-width:1024px) and (orientation:landscape){
 .app #club.hl-infra{padding-bottom:32px;}
 .app #club .hl-infra__gallery{height:calc(34.4vw + 16px);}
 .app #club .hl-slider__track{height:100%;}
 .app #club .hl-infra__cats-wrap{bottom:0;}
}
/* Landscape introduction: deliberate desktop line breaks; uppercase lead on every layout. */
.app #land-b .ld__lead{text-transform:uppercase;}
.app #land-b .ld-b__title-desktop{display:none;}
@media(min-width:1024px) and (orientation:landscape){
 .app #land-b .ld-b__title-desktop{display:block;}
 .app #land-b .ld-b__title-mobile{display:none;}
 .app #land-b .ld-b__title-desktop>span{display:block;white-space:nowrap;}
 .app #land-b .ld__h2{font-size:clamp(24px,2.65vw,42px);line-height:1.25;}
 .app #land-b .ld-b__intro{transform:translateY(-12px);}
 .app #land-b .ld-b__intro .ld__lead{margin-top:40px;letter-spacing:.045em;}
 .app #land-b .ld-b__hint{margin-top:56px;}
}
/* Two readable paragraphs in the landscape introduction. */
.app #land-b .ld-b__lead-paragraph{display:block;}
.app #land-b .ld-b__lead-paragraph + .ld-b__lead-paragraph{margin-top:1em;}
/* Bring the first photo closer to the introduction on desktop. */
@media(min-width:1024px) and (orientation:landscape){
 .app #land-b .ld-b__intro{margin-right:-2vw;}
}
/* Keep the mobile snap position aligned with the introduction's text inset. */
@media(max-width:1023px),(orientation:portrait){
 .app #land-b .ld-b__scroller{scroll-padding-inline:var(--offset);}
}
/* Mobile card titles match the introductory lead (1.5rem). */
@media(max-width:1023px){.app #land-b .ld-b__t{font-size:1.5rem;}}
/* Approved park and route figures belong to their corresponding cards. */
.app #land-b .ld-b__card-stat{margin-top:20px;color:var(--color2);}
.app #land-b .ld-b__card-stat .ld__num{font-size:clamp(36px,4vw,56px);line-height:1.1;}
.app #land-b .ld-b__card-stat .ld__cap{margin-top:8px;font-size:12px;line-height:1.4;letter-spacing:.04em;}
@media(max-width:1023px),(orientation:portrait){
 .app #land-b .ld-b__card-stat .ld__num{font-size:40px;}
}

@media(max-width:1023px),(orientation:portrait){.app .ld-b__card .ld-b__img{height:calc(50 * var(--sb-stable-vh,1svh))!important}}