/* ══════════════════════════════════════════════════════════════════════
   ВАРИАНТ №2 — «Дон Корлеоне»
   Чёрный кабинет, одна тёплая лампа сверху, вино и запёкшийся алый.
   Свет строится радиальными пятнами, а не картинками: вверху вольфрам,
   внизу справа — багровое зарево. Всё остальное уходит в чёрный.
   Тема одна и намеренно тёмная — фон и цвета красятся явно, чтобы
   страница не «занимала» фон у хоста.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  /* чёрный со смещением в красный, а не нейтральный серый */
  --void:#0A0607;
  --ink:#100A0B;
  --surface:#17100F;
  --surface-2:#1F1615;

  --blood:#7E1518;        /* глубокая венозная — заливки */
  --scarlet:#A81D22;      /* основной алый */
  --scarlet-lit:#C93030;  /* ховер */
  --ember:#E8564A;        /* редкая горячая точка */

  --amber:#E0C179;        /* вольфрам, свет лампы */
  --amber-dim:#E0C179;

  /* Весь текст — чистый белый. Три ступени оставлены отдельными
     переменными: если понадобится вернуть тише подписи или сноски,
     это правка одной строки, а не двух сотен мест.              */
  --parch:#FFFFFF;        /* основной текст */
  --parch-dim:#FFFFFF;    /* второстепенный */
  --parch-far:#FFFFFF;    /* подписи и сноски */

  --line:rgba(239,230,214,.11);
  --line-soft:rgba(239,230,214,.05);
  --line-red:rgba(168,29,34,.36);

  --display:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --caps:"Cinzel","Cormorant Garamond",Georgia,serif;
  /* Barlow держит латиницу, но кириллицы в нём нет: без пары русский
     молча уезжал в системный Segoe UI и выпадал из набора. Commissioner
     подхватывает кириллицу той же плотности, латиница не меняется. */
  --sans:"Barlow","Commissioner",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,76px);
  --shell:1300px;
  --navh:80px;
}
/* Русская версия набирается Libertinus Serif — одной гарнитурой во всех
   ролях. Латинский логотип из этого исключён: MONTERO и Concierge
   Service одинаковы на всех языках и остаются на Cinzel.        */
html[lang="ru"]{
  --display:"Libertinus Serif","Cormorant Garamond",Georgia,serif;
  --caps:"Libertinus Serif","Cormorant Garamond",Georgia,serif;
  --sans:"Libertinus Serif",Georgia,"Times New Roman",serif;
}
html[lang="ru"] .lk-name,
html[lang="ru"] .lk-sub{ font-family:"Cinzel","Cormorant Garamond",Georgia,serif; }

/* Иностранные версии набираются Cormorant Garamond — той же
   антиквой, что и прежде, но заголовки идут в 600. Владелец прислал
   образец: гарнитура там та самая, а отличие — в насыщенности. На
   сайте заголовки стояли в 400 и рядом с образцом читались бледно.

   Опыт с Playfair владелец не принял — правило снято целиком.

   Сначала это собрали на английском, потом владелец попросил то же
   самое остальным иностранным языкам. Поэтому селектор не перечисляет
   языки, а исключает один: под правило попадают английский,
   португальский, испанский и итальянский — и любой, который добавят
   позже, тоже сразу окажется набран как остальные.

   Насыщенность меняется только у заголовков. Основной текст, подписи
   и логотип не тронуты: MONTERO и Concierge Service одинаковы на всех
   языках и остаются на Cinzel.

   Русского это не касается ничем: он вычтен из селектора и живёт по
   своим правилам выше.                                           */
html:not([lang="ru"]) h2,
html:not([lang="ru"]) h3,
html:not([lang="ru"]) h4,
html:not([lang="ru"]) .svc-name,
html:not([lang="ru"]) .lp-h,
html:not([lang="ru"]) .lp-big b,
html:not([lang="ru"]) .lp-foot-claim b{ font-weight:600; }

/* Подпись под названием услуги («ARMORED · DRIVEN · DISCREET») шла
   Barlow 300 — самым лёгким начертанием. На мелком кегле с большой
   разрядкой такая строка расползается в серую сыпь: у русского эта
   же подпись идёт в 600 и держится плотно. Ставим 500 — строка
   набирает вес, но не спорит с названием услуги над ней.

   Кегль и разрядка прежние: тронута одна насыщенность.           */
html:not([lang="ru"]) .svc-tag{ font-weight:500; }

/* ── ТЕЛЕФОН: иностранные языки набираются плотнее ──────────────────

   Владелец смотрел сайт с телефона по-английски и попросил прибавить
   веса четырём местам. Причина у всех одна: русский набран Libertinus
   и ему отдельным правилом выше поднята насыщенность до 600, а
   иностранные идут Barlow и Cinzel в 300 — самом лёгком начертании.
   На тёмном фоне мелкий светлый текст в 300 расползается.

   Прибавка везде на один шаг, не больше: строки должны стать плотнее,
   а не превратиться в жирные.

   Cinzel в 300 браузер и так рисует четырёхсотым — легче четырёхсот у
   этой гарнитуры начертаний нет. Поэтому шаг, который видно, это 500.

   Только телефон и только не-русский: компьютерная версия живёт в
   отдельной папке и сюда не заглядывает, а русский вычтен селектором.
*/
@media (max-width:980px){

  /* Строка под кнопкой: «24/7 ATTENDANCE · 20+ SERVICES …».
     Цифры в ней и так шли 500 — подписи рядом были легче цифр. */
  html:not([lang="ru"]) .hero-rail span,
  html:not([lang="ru"]) .hero-rail em{ font-weight:500; }

  /* Страна над названием города в карточке направления («BRAZIL»).
     Владелец попросил её на шаг больше остальных подписей. */
  html:not([lang="ru"]) .band-num{ font-weight:500; }

  /* Весь основной текст: подводки под заголовками, описания карточек,
     тексты услуг, шаги работы и текст витрины. Гарнитура и кегль у них
     общие, поэтому и вес общий. */
  html:not([lang="ru"]) .sec-lede,
  html:not([lang="ru"]) .band-txt,
  html:not([lang="ru"]) .svc-text,
  html:not([lang="ru"]) .steps p,
  html:not([lang="ru"]) .lp-txt{ font-weight:400; }

  /* Заявление в рамке на последнем экране шло 400, а на первом — 600,
     и один и тот же текст читался в двух разных весах. Равняем по
     первому экрану. */
  html:not([lang="ru"]) .final-in .lk-claim b{ font-weight:600; }
}

/* Строки заявления в рамке набираются в одну строку каждая.

   Рамка на компьютере обжимает набор и получает ширину «сколько
   занял текст», а скрипт сетки округляет её до целой точки экрана.
   Округление отнимает доли пикселя — и строке, которая занимала
   ровно всю ширину, этих долей не хватало: она переносилась, а
   высота рамки остаётся прежней, и вторая строка вылезала наружу.
   Это и видно было на первом и последнем экране: по-английски
   переносилась вторая строка заявления, по-испански и по-итальянски —
   первая, и лишняя строка ложилась поверх канта.

   Запрет переноса снимает причину: строка остаётся одной, а
   недостающие доли пикселя гасятся полем рамки — до канта от текста
   почти сорок пикселей.

   Только компьютер: на телефоне рамка тянется по высоте, перенос там
   нормален и нужен.                                                */
@media (min-width:981px){
  html:not([lang="ru"]) .lk-claim b{ white-space:nowrap; }
}

/* Libertinus — книжная антиква со светлыми штрихами: на тёмном фоне
   она выглядела жидко и мельче, чем есть. Для русского поднимаем
   насыщенность до полужирной и добавляем по одному-полтора пункта
   мелким строкам. Остальные языки этого не касается.             */
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] h4,
html[lang="ru"] p,
html[lang="ru"] .sec-lede,
html[lang="ru"] .svc-name,
html[lang="ru"] .svc-tag,
html[lang="ru"] .svc-text,
html[lang="ru"] .band-txt,
html[lang="ru"] .label,
html[lang="ru"] .eyebrow,
html[lang="ru"] .nav-links a,
html[lang="ru"] .drawer-links a,
html[lang="ru"] .hero-rail span,
html[lang="ru"] .hero-rail b,
html[lang="ru"] .hero-in .lk-claim,
html[lang="ru"] .conc-sig-t b,
html[lang="ru"] .foot-brand,
html[lang="ru"] .foot-legal a,
html[lang="ru"] .rf-field label,
html[lang="ru"] .rf-field input,
html[lang="ru"] .rf-field select,
html[lang="ru"] .rf-field textarea,
html[lang="ru"] .btn{ font-weight:600; }

html[lang="ru"] .sec-lede{ font-size:17px; }
html[lang="ru"] .svc-text,
html[lang="ru"] .band-txt{ font-size:16px; }
html[lang="ru"] .steps p{ font-size:15.5px; }
html[lang="ru"] .svc-tag{ font-size:12px; }
html[lang="ru"] .label{ font-size:12px; }
html[lang="ru"] .nav-links a{ font-size:11.5px; }
html[lang="ru"] .drawer-links a{ font-size:11px; }
html[lang="ru"] .hero-rail span{ font-size:11px; }
html[lang="ru"] .btn{ font-size:12px; }
html[lang="ru"] .btn-sm{ font-size:11px; }

/* На узких экранах прибавка съедает строку — там возвращаем кегль
   к исходному, насыщенность остаётся.                           */
@media (max-width:420px){
  html[lang="ru"] .svc-text,
  html[lang="ru"] .band-txt,
  html[lang="ru"] .conc-say > p{ font-size:15px; }
}

*{ box-sizing:border-box; }

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--parch);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--blood); color:var(--parch); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ── Зерно плёнки ────────────────────────────────────────────────────
   Один SVG-шум поверх всего. Из-за него чёрный перестаёт быть
   «цифровым» и начинает читаться как проявленная плёнка.            */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════ ТИПОГРАФИКА ══════════ */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  line-height:.98;
  letter-spacing:-.012em;
  text-wrap:balance;
}

h1{
  font-size:clamp(44px,8vw,132px);
  line-height:.92;
  letter-spacing:-.022em;
  /* лёгкое тиснение: тёплый верх, тень снизу — как свет лампы на бумаге */
  color:var(--parch);
  text-shadow:0 1px 0 rgba(0,0,0,.7), 0 0 60px rgba(224,193,121,.10);
}
h1 .em{
  display:inline-block;
  font-style:italic;
  font-weight:300;
  color:transparent;
  background-image:linear-gradient(96deg,#F3EADA 0%,#E5CFA4 34%,#E0C179 62%,#E8DCC4 100%);
  -webkit-background-clip:text; background-clip:text;
}

h2{ font-size:clamp(34px,5.2vw,78px); }
h2 .em{
  font-style:italic; font-weight:300;
  color:transparent;
  background-image:linear-gradient(96deg,#F3EADA 0%,#E5CFA4 38%,#E0C179 66%,#E8DCC4 100%);
  -webkit-background-clip:text; background-clip:text;
}
h3{ font-size:clamp(30px,4.6vw,62px); }
h4{ font-size:clamp(19px,2vw,24px); letter-spacing:0; }

.lede{
  font-family:var(--display);
  font-size:clamp(18px,2.05vw,26px);
  font-weight:300;
  line-height:1.5;
  color:var(--parch-dim);
  max-width:31ch;
  margin:0;
}

.eyebrow,.label{
  font-family:var(--caps);
  font-size:11px;
  font-weight:500;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--parch-far);
  margin:0;
}
.eyebrow em,.foot-brand em{ color:var(--amber-dim); font-style:normal; }

.label{ display:flex; align-items:center; gap:14px; color:#E0C179; }
.label i{
  font-family:var(--caps); font-style:normal; font-size:11px;
  color:#E0C179; letter-spacing:.1em;
  padding-right:14px; border-right:1px solid var(--line-red);
}

.sec-lede{
  font-size:16px; color:var(--parch-dim);
  max-width:52ch; margin:22px 0 0;
}
/* Лид раздела услуг выключен по центру — он читается как заявление,
   а не как вводный абзац, и по левому краю висел бы неровно.   */
#services .sec-lede{ text-align:center; margin-inline:auto; }

/* ══════════ КНОПКИ ══════════ */

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--caps); font-size:11px; font-weight:500;
  letter-spacing:.20em; text-transform:uppercase;
  padding:0 30px; height:52px;
  border:1px solid transparent;
  transition:color .4s var(--ease), background-color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.btn span{ position:relative; z-index:2; }

.btn-fill{ background:var(--blood); color:var(--parch); border-color:var(--blood); }
.btn-fill:hover{ background:var(--scarlet); border-color:var(--scarlet-lit); transform:translateY(-2px); }

.btn-ghost{ border-color:var(--line); color:var(--parch-dim); }
.btn-ghost:hover{ border-color:var(--amber-dim); color:var(--parch); transform:translateY(-2px); }

.btn-line{ border-color:var(--line-red); color:var(--parch); }
.btn-line:hover{ border-color:var(--scarlet); background:rgba(126,21,24,.22); }

.btn-sm{ height:42px; padding:0 20px; font-size:10px; letter-spacing:.18em; }
.btn-lg{ height:60px; padding:0 38px; }

:focus-visible{ outline:1px solid var(--amber); outline-offset:3px; }

/* ══════════ ШАПКА ══════════ */

.nav{
  position:fixed; inset:0 0 auto; z-index:800;
  height:var(--navh);
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(10,6,7,.86);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-soft);
}
.nav.hide{ transform:translateY(-100%); }

.nav-in{
  height:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:flex; align-items:center; gap:13px; min-width:0; }
/* Знак — растровый, поэтому размер задаём по ширине, высоту оставляем
   пропорции. Золотое свечение снято вместе с кольцом: вокруг чёрного
   диска оно читалось тем же ободом, только размытым.                 */
.brand-mark,.seal,.seal-lg,.lang-seal{
  display:block; flex:none; height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* Подложки у знака больше нет: чёрный квадрат снят, остались одни
   буквы на прозрачном. Очерчивать нечего — кант тоже снят.      */
/* В шапке знак стоит один, без надписи рядом: имя набрано
   внутри квадрата, и дублировать его словом было бы лишним.
   72 пикселя вместо прежних 54 — на них разбирается и подпись
   «Private Concierge» под именем.                          */
.brand-mark{ width:72px; }
.seal{ width:44px; }
.foot-brand .seal{ width:38px; }
.seal-lg{ width:84px; }
.lang-seal{ width:62px; margin:0 auto 20px; }

/* Меню стоит ровно по центру шапки — под серединой имени MONTERO,
   а не там, куда его двигают знак слева и кнопки справа. Абсолютная
   привязка к середине: длина пунктов и языка на неё не влияет.   */
.nav-links{ display:flex; gap:clamp(18px,2.4vw,38px); }
/* От 1200 пикселей меню встаёт ровно по центру шапки — под серединой
   имени MONTERO, а не там, куда его двигают знак слева и кнопки
   справа. Ниже 1200 места между ними нет, и меню остаётся в потоке,
   иначе оно наезжает на кнопку языка.                            */
@media (min-width:1200px){
  .nav-links{ position:absolute; left:50%; transform:translateX(-50%); }
}
.nav-links a{
  position:relative;
  font-family:var(--caps); font-size:10.5px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--parch);
  padding-block:6px;
  transition:color .35s var(--ease);
}
/* Алая черта под пунктом снята. Наведение и текущий раздел даёт
   белое неоновое свечение самих букв — тем же светом, что горит
   под кнопкой на первом экране.                                */
.nav-links a{
  transition:color .35s var(--ease), text-shadow .35s var(--ease);
}
/* Свечение только под курсором: текущий раздел не подсвечивается,
   иначе один пункт горит постоянно.                            */
.nav-links a:hover{
  color:#FFFFFF;
  text-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.7),
    0 0 30px rgba(255,255,255,.4);
}

.nav-right{ display:flex; align-items:center; gap:10px; }

/* Шапка держится тихо: тонкая серая обводка, мелкий кегль, всё
   прижато к правому краю. Золото здесь спорило с заголовком.     */
.nav-right > .lang-btn,
.nav-right > .btn{
  height:32px; box-sizing:border-box;
  /* Язык и «Связь 24/7» — одного размера: 118 пикселей покрывают
     самую длинную из пяти подписей кнопки связи (испанскую).   */
  min-width:118px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 11px;
  font-size:9px; letter-spacing:.16em;
  background:transparent;
  border:1px solid var(--line);
  color:var(--parch-dim);
  box-shadow:none;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.nav-right > .lang-btn:hover,
.nav-right > .btn:hover{
  border-color:var(--amber-dim); color:var(--parch);
  background:transparent; box-shadow:none; transform:none;
}
.nav-right > .nav-tel{
  border:0; padding:0; height:auto; background:transparent;
  box-shadow:none; color:var(--parch-dim);
}
.nav-right > .nav-tel:hover{ color:var(--amber); box-shadow:none; transform:none; }
.nav-tel{
  font-size:11px; letter-spacing:.05em;
  white-space:nowrap;
}

/* touch-action:none — иначе браузер считает движение вниз прокруткой
   и перестаёт слать pointermove, а выбор ведением ломается. */
.burger{ display:none; width:34px; height:34px; position:relative; touch-action:none; }
.burger span{
  position:absolute; left:9px; right:9px; height:1px; background:var(--parch);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:first-child{ top:15px; }
.burger span:last-child{ top:20px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ── Шторка ──────────────────────────────────────────────────────────
   [hidden] в UA-стилях даёт display:none, но любой авторский display
   его перебивает — и невидимая шторка молча ловит все клики. Поэтому
   правило ниже обязательно.                                          */
.drawer[hidden]{ display:none; }
.drawer{
  position:fixed; inset:0; z-index:790;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--navh) + 30px) var(--gut) 40px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(224,193,121,.14), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 100%, rgba(126,21,24,.30), transparent 68%),
    var(--void);
  opacity:0; transition:opacity .42s var(--ease);
}
.drawer.open{ opacity:1; }

.drawer-lang{ align-self:center; margin-bottom:22px; }

/* Пункт под пальцем: подрастает, уходит в золото и получает лёгкую
   подложку слева. Меняем transform, а не кегль — от смены кегля
   строки прыгали бы, и палец терял бы цель.                     */
.drawer-links a span{
  display:inline-block; transform-origin:center;
  transition:transform .22s var(--ease), color .22s var(--ease);
}
.drawer-links a.hot{
  background:linear-gradient(90deg, transparent,
    rgba(224,193,121,.14) 28%, rgba(224,193,121,.14) 72%, transparent);
}
.drawer-links a.hot span{ transform:scale(1.22); color:#E0C179; }
.drawer-links{ display:flex; flex-direction:column; gap:4px; }
/* Пункты набраны как надпись на кнопке «Связь 24/7»: та же гарнитура,
   тот же кегль и разрядка. Место под палец держим отступами строки,
   а не размером букв — иначе по мелкому тексту трудно попасть.    */
.drawer-links a{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--caps); font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  line-height:1.2; color:var(--parch);
  border-bottom:1px solid var(--line-soft); padding-block:17px;
}

/* ══════════ СВЕТОВЫЕ ПОДЛОЖКИ ══════════
   Вместо фотографий — свет. Каждая сцена это один тёплый источник
   и один холодный или багровый отблеск на противоходе.              */

.sc-night{ background:
  radial-gradient(ellipse 70% 55% at 26% 12%, rgba(224,193,121,.20), transparent 62%),
  radial-gradient(ellipse 60% 55% at 84% 88%, rgba(126,21,24,.34), transparent 66%),
  linear-gradient(160deg,#150E0E 0%,#0B0708 60%,#080506 100%); }

.sc-blood{ background:
  radial-gradient(ellipse 66% 50% at 74% 18%, rgba(200,48,44,.30), transparent 62%),
  radial-gradient(ellipse 70% 60% at 18% 92%, rgba(64,12,14,.7), transparent 70%),
  linear-gradient(150deg,#2A0E10 0%,#150809 55%,#0A0506 100%); }

.sc-sea{ background:
  radial-gradient(ellipse 60% 50% at 30% 82%, rgba(30,72,78,.42), transparent 66%),
  radial-gradient(ellipse 60% 50% at 78% 14%, rgba(224,193,121,.18), transparent 62%),
  linear-gradient(165deg,#0D1618 0%,#0B0E10 58%,#080607 100%); }

.sc-sky{ background:
  radial-gradient(ellipse 70% 46% at 52% 4%, rgba(224,193,121,.26), transparent 60%),
  radial-gradient(ellipse 60% 60% at 12% 96%, rgba(126,21,24,.24), transparent 68%),
  linear-gradient(180deg,#1A1210 0%,#0E0A0A 62%,#080606 100%); }

.sc-stone{ background:
  radial-gradient(ellipse 62% 52% at 68% 20%, rgba(160,146,124,.18), transparent 62%),
  radial-gradient(ellipse 60% 58% at 20% 90%, rgba(90,20,22,.30), transparent 68%),
  linear-gradient(155deg,#171414 0%,#0D0B0B 60%,#070606 100%); }

.sc-amber{ background:
  radial-gradient(ellipse 66% 50% at 40% 14%, rgba(224,193,121,.30), transparent 62%),
  radial-gradient(ellipse 58% 56% at 88% 90%, rgba(110,26,24,.32), transparent 66%),
  linear-gradient(160deg,#20160F 0%,#120C0A 58%,#090606 100%); }

.sc-ivory{ background:
  radial-gradient(ellipse 70% 52% at 46% 10%, rgba(236,224,202,.20), transparent 62%),
  radial-gradient(ellipse 56% 56% at 84% 92%, rgba(126,21,24,.22), transparent 68%),
  linear-gradient(170deg,#1B1614 0%,#100B0B 60%,#080606 100%); }

.sc-dark{ background:
  radial-gradient(ellipse 60% 46% at 78% 10%, rgba(190,160,110,.14), transparent 60%),
  radial-gradient(ellipse 64% 60% at 24% 94%, rgba(90,18,20,.30), transparent 70%),
  linear-gradient(150deg,#120E0E 0%,#0A0708 62%,#070506 100%); }

/* подпись слота — видно только пока нет снимка */
.slot{
  position:absolute; left:14px; bottom:12px;
  font-family:var(--sans); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(239,230,214,.20);
  border:1px dashed rgba(239,230,214,.14);
  padding:3px 8px; pointer-events:none;
}
.media{ width:100%; height:100%; object-fit:cover; }

/* ══════════ ПЕРВЫЙ ЭКРАН ══════════ */

.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:grid; grid-template-rows:1fr auto;
  padding:calc(var(--navh) + 30px) 0 0;
  overflow:hidden;
}
/* Первый экран стоит на сплошном чёрном. Ни подсветки, ни отсветов,
   ни перехода — владелец попросил ровный чёрный фон.            */
.hero-bg{ position:absolute; inset:-12% 0; z-index:-2; background:#000000; }
/* Снимок гримируем под палитру: гасим, уводим в тёплое, снимаем лишнюю
   насыщенность. Ночной город должен стать сценой, а не открыткой.
   Градиент под ним остаётся и работает, пока файл грузится.          */
.hero-bg .media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 72%;
  filter:brightness(.88) contrast(1.05) saturate(.80) sepia(.06);
  /* Медленный наезд: кадр живёт, но движение на грани заметности.
     Дорогой сайт двигается так, что вы замечаете это не сразу.
     Цикл 46 секунд, туда и обратно — стыка не видно.               */
  animation:heroDrift 46s ease-in-out infinite;
  will-change:transform;
}
@keyframes heroDrift{
  0%   { transform:scale(1.05) translate3d(0,0,0); }
  50%  { transform:scale(1.13) translate3d(-1.8%,-1.2%,0); }
  100% { transform:scale(1.05) translate3d(0,0,0); }
}

/* Видеофон появляется, только когда действительно готов играть.
   Пока не готов — под ним стоит снимок, и пустого чёрного экрана
   на медленной сети не бывает.                                    */
.hero-bg .vid{ opacity:0; transition:opacity 1.4s var(--ease); }
.hero-bg .vid.on{ opacity:1; }

/* Ролик ярче и беспокойнее снимка: гасим сильнее, иначе огни города
   лезут в заголовок. И наезд ему нужен слабее — 720 пикселей исходника
   при сильном увеличении мылят. Ритм тот же, размах вдвое меньше.   */
.hero-bg .vid{
  filter:brightness(.74) contrast(1.12) saturate(.58) sepia(.16);
  animation-name:heroDriftVid;
}
@keyframes heroDriftVid{
  0%   { transform:scale(1.01) translate3d(0,0,0); }
  50%  { transform:scale(1.05) translate3d(-.8%,-.5%,0); }
  100% { transform:scale(1.01) translate3d(0,0,0); }
}

/* Дыхание лампы: свет над городом медленно набирает и отпускает.
   Один слой, 17 секунд — этого хватает, чтобы экран не выглядел
   застывшей картинкой.                                            */
/* Дыхание лампы снято вместе с остальным светом первого экрана. */
.hero-glow{ display:none; }
@keyframes heroBreath{
  0%,100%{ opacity:.5; }
  50%    { opacity:1; }
}

/* виньетка — то, что превращает градиент в кадр */
/* Виньетка не нужна: затемнять ровный чёрный нечем и незачем. */
.hero-vig{ display:none; }

/* Когда снимок есть, кадру нужна другая выдержка: тёмная колонка слева
   под заголовок, опора под полосой цифр и виньетка глубже. Без снимка
   такая заливка съела бы градиент, поэтому правило включается только
   при наличии картинки.                                              */
.hero:has(.media) .hero-vig{
  background:
    radial-gradient(ellipse 66% 40% at 44% -8%, rgba(224,193,121,.14), transparent 62%),
    radial-gradient(ellipse 46% 42% at 90% 88%, rgba(168,30,34,.24), transparent 66%),
    radial-gradient(ellipse 94% 90% at 50% 44%, transparent 24%, rgba(6,3,4,.52) 74%, rgba(5,3,4,.94) 100%),
    radial-gradient(ellipse 70% 46% at 50% 82%, rgba(6,3,4,.72), transparent 72%),
    /* Подложка под именем: закатное небо светлее ночного, и белые
       буквы на нём тонули. Пятно мягкое и широкое — читается как
       глубина кадра, а не как плашка.                          */
    radial-gradient(ellipse 54% 30% at 50% 40%, rgba(6,3,4,.42), transparent 78%),
    linear-gradient(180deg, rgba(6,3,4,.78) 0%, rgba(6,3,4,.30) 20%, rgba(6,3,4,.34) 40%, rgba(6,3,4,.66) 62%, rgba(6,3,4,.78) 78%, rgba(6,3,4,.96) 100%);
}
/* над фотографией нити читаются как сор — почти гасим */
.hero:has(.media) .strings span{ opacity:calc(var(--o) * .45); }

/* ── Компьютер: гасим сам снимок, плёнку убираем ──────────────────
   Только brightness — он равномерно убавляет свет и не трогает
   ни резкость, ни цветовой тон. Ни saturate, ни sepia: именно они
   в прошлой версии «портили качество», обесцвечивая кадр.
   Виньетка снята: на светлом снимке её пятна читались плашкой.
   Работает от 721 px, телефон живёт по своим правилам.          */
@media (min-width:721px){
  /* Кадр стоит неподвижно. Наезд снят, увеличение снято — снимок
     показывается один к одному. Шпиль в файле лежит на 0.498 ширины,
     поэтому выравнивание по центру ставит башню строго посередине
     на любом мониторе: обрезаются поровну левый и правый край.      */
  .hero-bg .media{
    filter:brightness(.35);
    animation:none;
    transform:none;
    object-position:center center;
  }
}

/* Шпиль должен стоять точно под буквой «Т» в MONTERO. Куда он попадёт,
   зависит от пропорций окна: чем оно ниже, тем шире обрезаются бока.
   Два значения покрывают весь парк мониторов — 16:10 выше, 16:9 здесь. */
@media (min-width:721px) and (min-aspect-ratio:17/10){
  .hero-bg .media{ object-position:center center; }
  .hero:has(.media) .hero-vig{ background:none; }
}

/* Нити: тонкие вертикальные лучи от верхнего края. Театральный
   задник, не иллюстрация — держим их почти на пороге видимости.   */
/* Нити сняты — на чёрном они читались как сор. */
.strings{ display:none; }
.strings span{
  position:absolute; top:0; left:var(--x); width:1px; height:var(--h);
  opacity:var(--o);
  background:linear-gradient(180deg, rgba(224,193,121,.9), rgba(168,29,34,.5) 55%, transparent 100%);
  transform-origin:top center;
  animation:sway 14s ease-in-out infinite; animation-delay:var(--d);
}
@keyframes sway{
  0%,100%{ transform:rotate(-.35deg); }
  50%{ transform:rotate(.35deg); }
}

/* Первый экран: знак стоит по центру кадра, а не прижат к низу —
   строка ложится на чистое небо, а не на огни города.            */
.hero-in{ align-self:center; padding-bottom:clamp(20px,3vh,38px); text-align:center; }
/* Знак на первом экране набран тем же кеглем, что на финальном:
   владелец выбрал этот размер по финальному экрану. Собственного
   --lk здесь больше нет — берётся общий из .lockup. Тень тоже
   снята вместе со снимком: на ровном фоне она только пачкала
   штрихи.                                                    */
.hero-in .lockup{ margin:0 auto; }
/* Крупнее становится ровно одно слово. Кегль задан отдельно от --lk,
   от которого считается всё остальное в знаке, — поэтому «Concierge
   Service», линии по бокам и рамка с заявлением не меняются.     */
.hero-in .lk-name{ font-size:clamp(30px,7.5vw,150px); font-weight:500; }
/* Обе строки заявления набраны одним начертанием: первая была легче
   второй, и фраза читалась разнобоем. Финальный экран не трогаем. */
.hero-in .lk-claim b{ font-weight:600; }

/* Сияющая белая черта под рамкой знака. Ширину берёт у самой рамки,
   поэтому совпадает с ней на любом языке. Сама линия — градиент,
   гаснущий к краям, свечение — три тени разного радиуса.          */
/* Сияющая черта под рамкой знака снята — это был последний блик. */
.hero-in .lk-claim::after{ display:none; }

.hero-act{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:100px; }
/* Кнопка первого экрана без рамки: золото снято, читаемость держит
   белая неоновая черта под словами — её видно как кнопку, но на
   чёрном она не спорит с именем сверху.                        */
.hero-act .btn{
  position:relative;
  background:transparent;
  border:0;
  color:var(--parch);
  box-shadow:none;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.hero-act .btn::after{
  content:""; position:absolute; left:14px; right:14px; bottom:12px;
  height:1px; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.45) 14%,
    #FFFFFF 36%, #FFFFFF 64%,
    rgba(255,255,255,.45) 86%, transparent 100%);
  box-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.7),
    0 0 30px rgba(255,255,255,.4);
  transition:box-shadow .4s var(--ease);
}
.hero-act .btn:hover{
  background:transparent;
  color:var(--parch);
  transform:translateY(-2px);
}
.hero-act .btn:hover::after{
  box-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 20px rgba(255,255,255,.9),
    0 0 44px rgba(255,255,255,.55);
}

.hero-rail{
  border-top:1px solid var(--line-soft);
  max-width:var(--shell); margin-inline:auto; width:100%;
  padding:15px var(--gut);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px clamp(24px,5vw,64px);
}
.hero-rail span{
  display:flex; align-items:baseline; gap:0;
  font-family:var(--caps); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--parch);
}
/* Цифры набраны вровень с подписью: тот же кегль, тот же цвет, только
   без разрядки — иначе «24 /7» распадается на отдельные знаки.
   Выключка по базовой линии у родителя, поэтому строка ровная.    */
.hero-rail b{
  font-family:var(--caps); font-size:inherit; font-weight:500;
  letter-spacing:.06em; color:var(--parch);
  /* У Cormorant по умолчанию старостильные цифры: единица в них
     выглядит как римская I. Просим обычные, на общей высоте.      */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
/* Отбивку до слова даёт сам текст, а не зазор между элементами:
   иначе она попадает и между «24» и «/7».                        */
.hero-rail em{ font-style:normal; margin-left:8px; }

/* Низкий экран ноутбука: кегль знака не трогаем — он такой же, как на
   финальном экране, и по замерам помещается вместе с кнопкой и полосой
   цифр. Ужимаем только отбивки под ним.                             */
@media (min-width:981px) and (max-height:800px){
  .hero-in .lk-claim::after{ margin-top:18px; }
  .hero-act{ margin-top:40px; }
  .hero .btn-lg{ height:54px; }
}

/* ══════════ ОБЩИЕ СЕКЦИИ ══════════ */

.sec{ position:relative; padding:clamp(84px,11vw,168px) 0; }
.sec::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.sec-head{ max-width:44ch; }
.sec-head h2{ margin:20px 0 0; }

/* ── Услуги: шапка раздела одной строкой, по центру ────────────────
   На компьютере «I · Услуги» и «Что мы устраиваем» стоят в одну
   линию по центру, заголовок не переносится. Лид под ними крупнее:
   это заявление, а не сноска. Телефон живёт по своим правилам —
   там шапка уже выключена по центру и набрана прописными.       */
@media (min-width:721px){
  /* Пустоты сверху было на треть экрана — разделы начинаются сразу.
     Снизу столько же: между последней услугой и «Направлениями»
     оставался пустой экран, и стык разделов провисал.          */
  /* Ширина страницы. Прежде контент жил в колонке 1300 пикселей, и на
     широком мониторе по бокам оставались пустые поля почти в треть
     экрана. Владелец сравнил с quintessentially.com, где страница
     занята почти целиком, — здесь то же: колонка во всю ширину,
     поля только на воздух по краям.                            */
  :root{ --shell:100%; --gut:clamp(28px,2.4vw,46px); }

  #services,#destinations,#concierge,#request{
    padding-top:clamp(30px,3vw,48px);
    padding-bottom:clamp(30px,3vw,48px);
  }
  /* Хвост под последней строкой списка ровно на столько опускал
     правую карточку ниже списка — снимаем, нижние края сходятся. */
  #services .svc-list{ padding-bottom:0; }

  /* Шапки «Услуг» и «Направлений» набраны одинаково: метка над
     заголовком, всё по центру, заголовок одной строкой.        */
  #services .sec-head,
  #destinations .sec-head{ max-width:none; margin-inline:auto; text-align:center; }
  #services .label,
  #destinations .label{ justify-content:center; margin:0; }
  #services .sec-head h2,
  #destinations .sec-head h2{ margin:12px 0 0; white-space:nowrap; }
  /* Лид идёт одной строкой во всю ширину колонки. Кегль привязан к
     ширине окна и упирается в 22px: по замерам самая длинная из
     десяти строк — русская в «Направлениях» — при этом помещается. */
  #services .sec-lede{
    margin:26px auto 0; max-width:none;
    white-space:nowrap; font-size:min(1.7vw, 22px); line-height:1.3;
  }
  /* В «Направлениях» лид ложится в две строки и набран крупнее:
     ширина ограничена так, чтобы во всех пяти языках выходило
     ровно две строки, а не одна длинная и одна короткая.      */
  #destinations .sec-lede{
    margin:26px auto 0; max-width:28em;
    white-space:normal; font-size:min(2.4vw, 32px); line-height:1.32;
  }
  /* Описания направлений набраны тем же кеглем, что и лид раздела:
     на широком экране 15 пикселей под заголовком в 60 читались
     сноской. Ширину колонки задаём в em, чтобы при росте кегля
     строка не растягивалась через весь экран.                  */
  /* Консьерж: обе колонки набраны одним кеглем — слева рассказ,
     справа четыре шага. Прежде правая была на пиксель мельче левой
     и читалась подписью к ней.                                  */
  #concierge .conc-say > p,
  #concierge .steps p{ font-size:min(1.5vw, 20px); line-height:1.5; }
  #concierge .conc-say > p{ max-width:34em; }
  #concierge .steps p{ max-width:26em; }

  /* Заявка: шапка стоит над формой по центру, как в «Консьерже».
     Текст слева набран крупнее — прежними 17 пикселями он занимал
     треть высоты формы и висел в пустоте.                      */
  #request .req-head{ max-width:none; margin:0 auto 34px; text-align:center; }
  #request .req-head .label{ justify-content:center; margin:0; }
  #request .req-head h2{ margin:12px 0 0; }
  /* Колонки заявки тянутся до одной высоты, а кнопка «Отправить» и
     три знака связи прижаты к их низу — с одинаковым отступом, равным
     внутреннему полю формы. Так обе кнопки стоят на одной линии при
     любой длине текста, а не только на русском.                   */
  #request .req-grid{ align-items:stretch; }
  #request .req-say{ text-align:center; display:flex; flex-direction:column; }
  #request .direct{ margin-top:auto; margin-bottom:clamp(20px,2.4vw,34px); }
  #request .req-form{ display:flex; }
  #request .rf{ flex:1 1 auto; }
  #request .rf-foot{ margin-top:auto; }
  #request .req-say .sec-lede{
    margin:0 auto; max-width:24em;
    font-size:min(1.95vw, 26px); line-height:1.45;
  }

  /* Направления идут карточками в один ряд: сверху кадр, под ним
     номер, название и описание. Полосы во всю ширину с фоном и
     параллаксом здесь не нужны — их место занимает сетка.      */
  #destinations .bands{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(18px,2vw,30px);
    max-width:var(--shell); margin-inline:auto;
    padding-inline:var(--gut);
  }
  #destinations .band{
    display:block; padding:0; border-top:0; overflow:visible;
  }
  #destinations .band-bg{ display:none; }
  #destinations .band::after{ display:none; }
  #destinations .band-in{
    display:flex; flex-direction:column;
    max-width:none; padding-inline:0; gap:0;
  }
  /* Кадр встаёт первым — он и есть заголовок карточки. */
  #destinations .band-plate{
    order:-1; aspect-ratio:4/5; max-height:none;
    box-shadow:0 18px 44px rgba(0,0,0,.5);
  }
  #destinations .band-col{ text-align:left; padding-top:18px; }
  #destinations .band-num{ margin-bottom:10px; }
  #destinations .band-in h3{ font-size:clamp(20px,1.7vw,30px); }
  #destinations .band-txt{
    font-size:clamp(14px,1.05vw,18px); line-height:1.45;
    max-width:none; margin:12px 0 0;
  }
}

.services{ background:
  radial-gradient(ellipse 80% 40% at 50% 0%, rgba(224,193,121,.055), transparent 62%),
  var(--ink); }

/* ══════════ УСЛУГИ — реестр и сцена ══════════
   На десктопе слева опись, справа прилипшая сцена: клик по строке
   переносит её описание на сцену. На мобильном сцены нет, описание
   раскрывается прямо под строкой.                                  */

.svc-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,72px);
  margin-top:clamp(44px,6vw,84px);
  align-items:start;
}
.svc-grid > *{ min-width:0; }

/* Хвост под списком — запас хода для прилипшей карточки справа.
   Без него на последних строках список кончается раньше, чем
   карточка успевает встать под шапку, и её верх уходит под неё. */
.svc-list{ border-top:1px solid var(--line); padding-bottom:34px; }
.svc-row{ border-bottom:1px solid var(--line); }

.svc-head{
  position:relative; width:100%; text-align:left;
  display:grid; grid-template-columns:44px 1fr auto;
  align-items:baseline; gap:6px 14px;
  padding:22px 0;
  transition:padding-left .5s var(--ease);
}
.svc-head::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(126,21,24,.26), rgba(126,21,24,0) 78%);
  opacity:0; transition:opacity .5s var(--ease);
}
.svc-head > *{ position:relative; }

.svc-num{
  font-family:var(--caps); font-size:11.5px; letter-spacing:.08em;
  color:#FFFFFF; padding-top:6px;
  transition:color .4s var(--ease);
}
.svc-name{
  font-family:var(--display); font-size:clamp(24px,2.8vw,36px);
  line-height:1.06; color:#FFFFFF;
  transition:color .4s var(--ease);
}
/* Описание под названием набрано золотом самого знака: тона сняты с
   кольца вокруг монограммы — от глубокого #A78239 до светлого блика
   #DEBE75. Плоская заливка читалась бы как жёлтая краска, поэтому по
   высоте строки идёт переход, как на металле. Обычный color задан
   первым: если браузер не умеет обрезать заливку по буквам, текст
   останется золотым, а не пропадёт.                              */
.svc-tag{
  grid-column:2; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#E0C179;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .svc-tag{
    background:linear-gradient(180deg,
      #F3E2AE 0%, #E0C179 26%, #C39A46 58%, #A78239 82%, #E6CE93 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.svc-mark{
  grid-row:1; grid-column:3; align-self:center;
  width:22px; height:1px; background:var(--parch-far);
  transition:background-color .4s var(--ease), width .5s var(--ease);
}
.svc-mark::after{
  content:""; position:absolute; right:10px; top:-10px;
  width:1px; height:21px; background:var(--parch-far);
  transform:scaleY(1); transition:transform .5s var(--ease), background-color .4s var(--ease);
}

.svc-head:hover{ padding-left:16px; }
.svc-head:hover::before{ opacity:.55; }
.svc-head:hover .svc-num{ color:var(--amber); }

.svc-row.on .svc-head::before{ opacity:1; }
.svc-row.on .svc-head{ padding-left:16px; }
.svc-row.on .svc-num{ color:var(--amber); }
.svc-row.on .svc-mark{ background:var(--amber); width:26px; }
.svc-row.on .svc-mark::after{ transform:scaleY(0); background:var(--amber); }

/* сцена

   Карточка обязана целиком помещаться в экран: от рамки снимка до
   кнопки заявки. Раньше высоты не хватало, и низ карточки уезжал под
   край — прилипший блок отпускало только в самом конце списка.

   Поэтому сцене задан потолок по высоте окна, а внутри — колонка:
   текст, пункты и кнопка занимают ровно столько, сколько им нужно,
   а снимок забирает остаток. Что бы ни было в описании, карточка
   упирается в потолок, а не вылезает за него.                       */
.svc-stage{
  position:sticky; top:calc(var(--navh) + 10px);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(31,22,21,.7), rgba(16,10,11,.7));
  padding:clamp(20px,2vw,28px);
  /* Не потолок, а точная высота: иначе снимку нечего заполнять и он
     схлопывается в полоску. Сверху ограничиваем, чтобы на большом
     мониторе карточка не превращалась в афишу.                      */
  height:min(calc(100svh - var(--navh) - 26px), 940px);
  display:flex; flex-direction:column;
  overflow:auto; overscroll-behavior:contain;
}
.svc-stage > *{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
}
/* Подсветка была нужна пустой заглушке — тёмному градиенту. Как только
   в плашке настоящий снимок, она его выжигает, поэтому включается
   только при отсутствии картинки.                                  */
.svc-stage .svc-media:not(:has(img)){ filter:brightness(1.5) saturate(1.15); }
/* Снимки сняты в ясный полдень, а страница — тёмный кабинет. Гасим,
   уводим в тёплое и снимаем лишнюю синеву, чтобы кадр не выпадал.  */
/* Снимки, у которых главное стоит по центру кадра, а не внизу:
   семья с документами, коллаж из сцен. Рамку заполняют целиком,
   как и все прочие, но обрезаются симметрично.                  */
.svc-media .media.mid{ object-position:center center; }
.svc-media .media{
  /* Главное на этих снимках стоит внизу кадра — машина, яхта, вертолёт.
     Если плашка обрежет, пусть теряется небо, а не они.             */
  object-position:center 62%;
  filter:brightness(.82) contrast(1.06) saturate(.62) sepia(.16);
}
.svc-stage .svc-media{
  position:relative; width:100%;
  border:1px solid rgba(224,193,121,.16);
  /* снимок тянется и сжимается — он и есть запас высоты */
  flex:1 1 auto; aspect-ratio:auto; min-height:150px;
}
/* Карточка услуги: сверху снимок во всю ширину — ему отдана вся
   свободная высота, под ним описание разложено на две половины:
   слева рассказ, справа перечень. Заголовок снят, он дублировал
   строку, нажатую в списке слева.                              */
.svc-stage .svc-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr auto auto;
  column-gap:clamp(20px,2vw,40px);
  row-gap:clamp(14px,1.4vw,22px);
  height:100%; min-height:0;
}
.svc-stage .svc-media{ grid-column:1 / -1; grid-row:1; }
.svc-stage .svc-text { grid-column:1; grid-row:2; margin:0; align-self:start; }
.svc-stage .svc-items{ grid-column:2; grid-row:2; margin:0; align-self:start; }
.svc-stage .svc-cta  { grid-column:1 / -1; grid-row:3; align-self:start; }
.svc-stage .svc-cta{ align-self:flex-start; }
.svc-stage h4{
  font-family:var(--display); font-size:clamp(26px,3vw,38px);
  margin:22px 0 0; color:var(--parch);
}

/* Ноутбук с невысоким экраном: снимку не остаётся места, поэтому
   слегка ужимаем текст — карточка должна влезать и здесь.          */
@media (min-width:981px) and (max-height:820px){
  .svc-stage{ padding:20px; }
  .svc-stage h4{ font-size:clamp(22px,2.3vw,30px); margin-top:16px; }
  .svc-stage .svc-text{ margin-top:10px; font-size:14px; line-height:1.55; }
  .svc-stage .svc-items{ margin-top:14px; gap:7px; }
  .svc-stage .svc-items li{ font-size:12.5px; }
  .svc-stage .svc-cta{ margin-top:18px; }
}
@media (min-width:981px) and (max-height:700px){
  .svc-stage h4{ font-size:24px; margin-top:12px; }
  .svc-stage .svc-text{ margin-top:8px; font-size:13.5px; }
  .svc-stage .svc-items{ margin-top:10px; gap:6px; }
  .svc-stage .svc-items li{ font-size:12px; }
  .svc-stage .svc-cta{ margin-top:14px; }
}
.svc-text{ margin:14px 0 0; color:var(--parch-dim); font-size:15px; max-width:46ch; }
.svc-items{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px; }
.svc-items li{
  position:relative; padding-left:20px; font-size:13.5px;
  letter-spacing:.02em; color:var(--parch-dim);
}
.svc-items li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--scarlet);
}
.svc-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-family:var(--caps); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
  border-bottom:1px solid var(--line-red); padding-bottom:6px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.svc-cta::after{ content:"→"; font-family:var(--sans); transition:transform .4s var(--ease); }
.svc-cta:hover{ color:var(--parch); border-color:var(--scarlet); }
.svc-cta:hover::after{ transform:translateX(5px); }

/* мобильное раскрытие в строке */
.svc-body{
  display:none;
  grid-template-rows:0fr;
  transition:grid-template-rows .62s var(--ease);
}
.svc-detail{ overflow:hidden; }
.svc-detail .svc-media{ position:relative; aspect-ratio:16/9; margin-bottom:20px; }
/* На сцене пропорция снимка не жёсткая: он и есть запас высоты.
   Правило идёт после общего, иначе 16/9 перебивало бы его.     */
.svc-stage .svc-detail .svc-media{ aspect-ratio:auto; }

/* ══════════ НАПРАВЛЕНИЯ ══════════ */

.dest{ background:var(--void); padding-bottom:0; }
.bands{ margin-top:clamp(44px,6vw,84px); }

.band{
  position:relative; isolation:isolate; overflow:hidden;
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center;
  padding:clamp(46px,6.5vw,96px) 0;
}
.band-bg{
  position:absolute; inset:-10% 0; z-index:-2;
  filter:saturate(.92);
  transition:filter .8s var(--ease);
}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,3,4,.80) 0%, rgba(6,3,4,.44) 44%, rgba(6,3,4,.10) 100%),
             linear-gradient(180deg, rgba(6,3,4,.5) 0%, transparent 32%, rgba(6,3,4,.7) 100%);
}
.band:hover .band-bg{ filter:saturate(1.14) brightness(1.1); }

.band-in{
  position:relative;
  display:grid; grid-template-columns:1fr .62fr;
  gap:clamp(26px,4.5vw,72px); align-items:center;
}
.band-in > *{ min-width:0; }

/* Пластина — освещённый прямоугольник в тёмной комнате. Та же подложка,
   что и у фона полосы, но поднятая по яркости: получается кадр, который
   висит в темноте, а не ещё одно чёрное пятно. Сюда ляжет снимок.      */
.band-plate{
  position:relative; aspect-ratio:4/5; width:100%;
  max-height:min(56vh,480px);
  overflow:hidden;
  border:1px solid rgba(224,193,121,.22);
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 0 90px rgba(0,0,0,.5);
}
.band-num{
  display:block; font-family:var(--caps); font-size:11px;
  letter-spacing:.28em; color:#E0C179; margin-bottom:16px;
}
/* Осветление — только для пустой рамки: градиентная заглушка без него
   почти чёрная. Снимку те же +75% яркости выбелили бы небо.        */
.band-plate:not(:has(img)){ filter:brightness(1.75) saturate(1.2); }
.band-plate .media{ object-position:center 50%;
  filter:brightness(.92) contrast(1.05) saturate(.78) sepia(.10); }
.band-in h3{ color:var(--parch); }
/* Номер, название и описание направления выключены по центру своей
   колонки: рядом стоит кадр, и симметричный столбик держится с ним
   лучше, чем текст, прижатый к левому краю.                    */
.band-col{ text-align:center; }
.band-txt{ margin:18px auto 0; max-width:46ch; color:var(--parch-dim); font-size:15px; }

/* ══════════ КОНСЬЕРЖ ══════════ */

.conc{ background:
  radial-gradient(ellipse 60% 44% at 84% 8%, rgba(126,21,24,.20), transparent 64%),
  radial-gradient(ellipse 56% 44% at 8% 92%, rgba(224,193,121,.07), transparent 66%),
  var(--ink); }

.conc-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,86px);
  margin-top:clamp(44px,6vw,80px);
  align-items:start;
}
.conc-grid > *{ min-width:0; }

/* Раздел выключен по центру целиком. У врезки алая черта переехала
   с левого края наверх и стала короткой чертой по оси — при центре
   боковая линия читалась бы как случайный обрубок.               */
/* Раздел «Консьерж» собран по центру на всех экранах — так решено
   отдельно и раньше остальных.                                  */
#concierge .sec-head{ text-align:center; margin-inline:auto; }
/* Подпись набрана флексом, поэтому центрируется не текстом. */
#concierge .label{ justify-content:center; }

/* Остальные три раздела пока выравниваем по центру только на телефоне:
   на широком экране их шапки остаются слева, как были.            */
@media (max-width:720px){
  #services .sec-head,
  #destinations .sec-head,
  #request .req-head,
  #request .req-say{ text-align:center; margin-inline:auto; }
  #services .label,
  #destinations .label,
  #request .label{ justify-content:center; }
  /* Прописные шире строчных примерно на треть — кегль убавляем,
     иначе заголовок ломается на слишком много строк.          */
  #services .sec-head h2,
  #destinations .sec-head h2,
  #request .req-head h2{
    text-transform:uppercase; letter-spacing:.02em;
    font-size:clamp(24px,7vw,34px);
  }
}
/* Заголовок обязан стоять ровно в две строки. Каждая половина —
   отдельный блок без переносов, а кегль считается от ширины экрана,
   чтобы длинная строка помещалась на любом языке. Ограничение в
   44 знака здесь снято: оно и ломало строку надвое.              */
#concierge .sec-head{ max-width:none; }
#concierge .sec-head h2{
  font-size:min(5.4vw, 54px); line-height:1.2;
  text-transform:uppercase; letter-spacing:.02em;
}
#concierge .sec-head h2 .ln{ display:block; white-space:nowrap; }

/* Направления: заголовок и вводный абзац по центру. */
#destinations .sec-head{ text-align:center; margin-inline:auto; }
#destinations .sec-lede{ margin-inline:auto; }
.conc-say{ text-align:center; }
.conc-say > p{ color:var(--parch-dim); max-width:50ch; margin:0 auto 16px; font-size:15.5px; }
.conc-say > p.pull{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(21px,2.5vw,31px); line-height:1.34;
  color:var(--parch); margin:0 auto 28px;
  padding-top:22px; border-top:1px solid var(--line-red);
  max-width:24ch;
}

/* Строка с призывом набирается плотнее, чтобы отделиться от абзацев. */
.conc-start{ margin-top:26px; }
.conc-start b{ font-weight:500; color:var(--parch); }

.conc-sig{ display:flex; align-items:center; gap:18px; margin-top:38px; }
/* Подпись выключена по центру: три строки разной длины собираются
   в симметричный блок, короткая последняя стоит под серединой.  */
.conc-sig-t{
  display:flex; flex-direction:column; gap:5px;
  min-width:0; align-items:center; text-align:center;
}
.conc-sig-t b{
  font-family:var(--caps); font-weight:500; font-size:12px; line-height:1.75;
  letter-spacing:.18em; text-transform:uppercase; color:#E0C179;
}
.conc-sig-t .sl{ display:block; }
/* На телефоне ручные переносы только мешают: строка и так не
   помещается по ширине, и текст лучше ложится сам.          */
@media (max-width:720px){ .conc-sig-t .sl{ display:inline; } }
.conc-sig-t i{
  font-style:normal; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--parch-far);
}

/* шаги — алая нить сверху вниз */
.steps{
  position:relative; list-style:none; margin:0; padding:0 0 0 clamp(34px,4vw,54px);
  display:grid; gap:clamp(26px,3vw,42px);
}
.steps::before{
  content:""; position:absolute; left:11px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--scarlet), rgba(168,29,34,.16));
}
.steps li{ position:relative; }
.st-n{
  position:absolute; left:calc(-1 * clamp(34px,4vw,54px)); top:-1px;
  width:23px; text-align:center;
  font-family:var(--caps); font-size:10px; letter-spacing:.06em;
  color:#E0C179; background:var(--ink); padding-block:4px;
}
.steps h4{ color:var(--parch); }
.steps p{ margin:9px 0 0; color:var(--parch-dim); font-size:14.5px; max-width:42ch; }

/* ══════════ ЗАЯВКА ══════════ */

#request{ background:
  radial-gradient(ellipse 62% 46% at 12% 6%, rgba(224,193,121,.08), transparent 64%),
  var(--void); }

.req-grid{
  display:grid; grid-template-columns:.86fr 1.14fr;
  gap:clamp(32px,5vw,80px); align-items:start;
}
.req-grid > *{ min-width:0; }
.req-say h2{ margin:20px 0 0; }

/* Прямая связь — три круглых знака вместо строк с подписями. Каждый
   собран как фирменная печать: чёрная эмаль, толстое золотое кольцо
   и тонкая линия внутри. Значок белый.                            */
.direct{ display:flex; justify-content:center; gap:12px; margin-top:38px; }
.direct-btn{
  /* Овал, а не круг: три кнопки делят ширину поровну и
     заканчиваются такими же полукружиями, с каких начинаются. */
  flex:1 1 0; min-width:0; max-width:190px;
  height:54px; border-radius:999px;
  display:grid; place-items:center; color:#FFFFFF;
  /* Кольцо набрано градиентом через border-box, иначе плоская
     заливка читается как жёлтая обводка, а не как металл.     */
  background:
    linear-gradient(#0C0C0D, #0C0C0D) padding-box,
    linear-gradient(150deg, #E6CE93 0%, #C39A46 26%, #A78239 52%,
                            #DEBE75 74%, #A78239 100%) border-box;
  border:2px solid transparent;
  box-shadow:
    inset 0 0 0 3px #0C0C0D,
    inset 0 0 0 4px rgba(224,193,121,.65),
    0 8px 22px rgba(0,0,0,.45);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.direct-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 3px #0C0C0D,
    inset 0 0 0 4px rgba(224,193,121,.95),
    0 10px 26px rgba(0,0,0,.5),
    0 0 18px rgba(224,193,121,.35);
}

/* ── Форма ─────────────────────────────────────────────────────────── */
.req-form{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(31,22,21,.6), rgba(14,9,10,.6));
}
.rf{ display:grid; gap:0; padding:clamp(20px,2.4vw,34px); }
.rf-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(14px,2vw,26px); }
.rf-row > *{ min-width:0; }

/* Между подписью и полем воздуха было столько же, сколько между
   самими полями, и форма читалась как набор пустот. Подпись теперь
   прижата к своему полю, а дышат между собой сами поля.        */
.rf-field{ display:flex; flex-direction:column; gap:2px; padding-block:5px; min-width:0; }
.rf-field label{
  font-family:var(--caps); font-size:9.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--parch-far);
}
.rf-field label .req{ color:var(--scarlet); }

.rf-field input,
.rf-field select,
.rf-field textarea{
  width:100%; max-width:100%;
  font-family:var(--display); font-size:17px; font-weight:300;
  color:var(--parch); background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:1px 0 5px; border-radius:0;
  transition:border-color .4s var(--ease);
}
.rf-field textarea{ resize:vertical; min-height:54px; line-height:1.4; }
.rf-field input:focus,
.rf-field select:focus,
.rf-field textarea:focus{
  outline:none; border-bottom-color:var(--amber);
}
.rf-field input::placeholder,
.rf-field textarea::placeholder{ color:var(--parch-far); }

/* ── Читаемость блока заявки ────────────────────────────────────────
   Подписи полей были набраны приглушённым пергаментом: на почти
   чёрной подложке формы 11 пикселей такого цвета не читаются.
   Здесь они белые в полную силу — это единственное место на странице,
   где человек должен разбирать текст, а не любоваться им. Шапка
   «IV · Заявка» сюда не входит: она золотая, как три остальные.  */
.rf-field label{ color:#FFFFFF; }
.rf-field label{ font-weight:600; }

/* Значения полей и подсказки в них — тоже в белую сторону. Подсказка
   светлее фона, но холоднее набранного текста, чтобы одно не путалось
   с другим.                                                          */
.rf-field input,
.rf-field select,
.rf-field textarea{ color:#FFFFFF; }
.rf-field input::placeholder{ color:#FFFFFF; opacity:1; }
/* «Что вам нужно» — сталь: пример длинный, и белым в полную силу он
   спорил бы с настоящим ответом.                                     */
.rf-field textarea::placeholder{ color:#C3CBD3; opacity:1; }
.rf-field select option{ color:#FFFFFF; }

/* Дата: у поля свой внутренний редактор, он красится отдельно.
   color-scheme нужен, чтобы иконка календаря была светлой.           */
.rf-field input[type="date"]{ color-scheme:dark; }
.rf-field input[type="date"]::-webkit-datetime-edit,
.rf-field input[type="date"]::-webkit-datetime-edit-text,
.rf-field input[type="date"]::-webkit-datetime-edit-day-field,
.rf-field input[type="date"]::-webkit-datetime-edit-month-field,
.rf-field input[type="date"]::-webkit-datetime-edit-year-field{ color:#FFFFFF; }

.rf-field.is-select{ position:relative; }
/* Стрелок у полей выбора нет по решению владельца: список открывается
   нажатием по самой строке.                                        */
.rf-field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.rf-field select option{ background:var(--surface-2); color:var(--parch); }

/* Дата: собственный образец формата поверх пустого поля. */
.rf-field.is-date{ position:relative; }
.rf-field.is-date input{
  /* Safari на iPhone не считает поле даты обычным блоком: без снятого
     оформления и box-sizing оно берёт свою «родную» ширину и вылезает
     за подчёркивание вместе со стрелкой.                          */
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; min-width:0; max-width:100%;
  box-sizing:border-box;
  line-height:20px; min-height:26px;
  cursor:pointer;
}
/* Родной значок календаря убираем совсем: на iPhone он занимал место
   и растягивал поле. Выбор открывается нажатием по самому полю —
   на телефоне это поведение по умолчанию, на компьютере вызываем
   showPicker() из скрипта.                                        */
.rf-field.is-date input::-webkit-calendar-picker-indicator{
  display:none; -webkit-appearance:none; appearance:none;
}
/* Chrome рисует своё «дд.мм.гггг» отдельным внутренним слоем, и одним
   color:transparent он не убирается — гасим сам этот слой.       */
.rf-field.is-date:not(.has-val) input:not(:focus){ color:transparent; }
.rf-field.is-date:not(.has-val) input:not(:focus)::-webkit-datetime-edit{ opacity:0; }
/* Обёртка поля даты: подсказка ложится точно на него, с теми же
   отступами, поэтому строка не наезжает на подпись.            */
/* Safari на iPhone даёт пустому полю даты нулевую высоту — строка
   схлопывалась, и подсказка налезала на следующую подпись. Задаём
   обёртке и полю ту же высоту, что у обычного ввода: 20 на строку
   плюс 1 и 5 на отступы — ровно 26, как у поля «Страна».        */
.rf-datebox{ position:relative; display:block; min-height:26px; }
.rf-ph{
  position:absolute; inset:0; pointer-events:none;
  padding:1px 0 5px; overflow:hidden;
  font-family:var(--display); font-size:17px; font-weight:300;
  line-height:20px; color:var(--parch-far);
}
.rf-field.is-date.has-val .rf-ph,
.rf-field.is-date input:focus + .rf-ph{ display:none; }

.rf-field.has-error input,
.rf-field.has-error select,
.rf-field.has-error textarea{ border-bottom-color:var(--ember); }

.rf-error{
  font-size:11.5px; letter-spacing:.04em; color:var(--ember);
}

/* Строка согласия снята — кнопка встала на её место и занимает всю
   ширину формы: так до неё труднее промахнуться пальцем.      */
.rf-foot{ display:flex; margin-top:16px; padding-top:18px; border-top:1px solid var(--line); }
.rf-submit{
  flex:1 1 auto; width:100%;
  /* Владелец попросил набрать надпись плотнее — она главная на
     странице и на светлом золоте лёгкие буквы теряются. Шаг один:
     500 → 600 у иностранных, 600 → 700 у русского (у него свой
     набор весов, правило ниже). */
  font-weight:600;
  /* Главное действие страницы набрано золотом знака: тем же переходом
     от глубокого #A78239 к светлому блику, что и кольцо у эмблемы.
     Буквы тёмные — на золоте белое читается плохо.               */
  background:linear-gradient(150deg, #E6CE93 0%, #D4B267 22%, #C39A46 48%,
                                     #E0C179 72%, #B8893C 100%);
  border-color:transparent; color:#0C0C0D;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
html[lang="ru"] .rf-submit{ font-weight:700; }
.rf-submit:hover{
  background:linear-gradient(150deg, #F3E2AE 0%, #E0C179 22%, #D4AF52 48%,
                                     #F0DCA4 72%, #C39A46 100%);
  border-color:transparent; color:#0C0C0D;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 22px rgba(224,193,121,.3);
}
.rf-failure{ display:block; }

.rf-done{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:clamp(34px,5vw,64px);
}
.rf-done-mark{
  display:grid; place-items:center; width:52px; height:52px;
  border:1px solid var(--line-red); color:var(--amber);
  border-radius:50%;
}
.rf-done h3{
  font-family:var(--display); font-size:clamp(28px,3.4vw,42px);
  color:var(--parch); margin:6px 0 0;
}
.rf-done p{ margin:0; color:var(--parch-dim); }
.rf-done .btn{ margin-top:12px; }

/* ══════════ ФИНАЛ ══════════ */

.final{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:82svh; display:grid; place-items:center;
  text-align:center; padding:clamp(80px,10vw,140px) 0;
}
.final-bg{ position:absolute; inset:-12% 0; z-index:-2; }
.final-vig{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 66% at 50% 46%, transparent 26%, rgba(6,3,4,.6) 70%, #050304 100%);
}
/* Фирменный знак вместо заголовка. Три яруса: имя вразрядку, под ним
   подпись между двух волосяных линий, ниже — обещание в рамке. Размеры
   считаются от одного кегля --lk, поэтому знак масштабируется целиком
   и пропорции не разъезжаются между телефоном и большим экраном.   */
.lockup{
  --lk:clamp(30px,6.2vw,86px);
  --lk-line:rgba(255,255,255,.75);
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--caps); color:var(--parch);
  text-transform:uppercase; line-height:1;
}
.lk-name{
  font-weight:400; font-size:var(--lk);
  letter-spacing:.20em; text-indent:.20em;
  white-space:nowrap;
}
/* Подпись с линиями по бокам: линии тянутся, текст держит свою ширину. */
.lk-sub{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--lk) * .30);
  width:100%; margin-top:calc(var(--lk) * .26);
}
.lk-sub i{ flex:1 1 auto; height:1px; background:var(--lk-line); }
.lk-sub em{
  flex:none; font-style:normal; font-weight:400;
  font-size:calc(var(--lk) * .235); letter-spacing:.24em; text-indent:.24em;
  white-space:nowrap;
}
/* Обещание в рамке. Верхняя грань — не бордюр, а фон с прорехой по
   центру: в неё садится точка, как в макете. Бордюром такого не
   сделать, а закрасить прореху нечем — под знаком живая фотография. */
.lk-claim{
  position:relative;
  margin-top:calc(var(--lk) * .52);
  padding:calc(var(--lk) * .34) calc(var(--lk) * .5);
  border:1px solid var(--lk-line); border-top:0;
  background-image:linear-gradient(90deg,
    var(--lk-line) 0 calc(50% - .55em), transparent calc(50% - .55em) calc(50% + .55em),
    var(--lk-line) calc(50% + .55em) 100%);
  background-size:100% 1px; background-repeat:no-repeat; background-position:top left;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--lk) * .16);
}
.lk-dot{
  position:absolute; top:0; left:50%; translate:-50% -50%;
  width:.34em; height:.34em; border-radius:50%; background:var(--lk-line);
  font-size:calc(var(--lk) * .30);
}
.lk-claim b{
  font-weight:400; font-size:calc(var(--lk) * .285);
  letter-spacing:.07em; text-indent:.07em; line-height:1.3;
}
.lk-claim b.hard{ font-weight:600; }


/* На телефоне линии по бокам подписи съедают её до нечитаемого —
   даём знаку почти всю ширину и растим кегль относительно экрана. */
@media (max-width:560px){
  .lockup{ --lk:clamp(26px,8.4vw,42px); width:100%; }
  .lk-claim{ padding-inline:calc(var(--lk) * .34); }
}

/* ══════════ ПОДВАЛ ══════════ */

.foot{ background:var(--void); border-top:1px solid var(--line-soft); padding:34px 0; }
.foot-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 34px;
}
.foot-brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--caps); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--parch-dim);
}
.foot-legal{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
/* Круглая кнопка WhatsApp закреплена в правом нижнем углу экрана и
   накрывала год в правовой строке — она стоит последней на странице.
   Отводим строке место под кнопку на любой ширине.               */
.foot-legal{ padding-right:74px; }
.foot-legal a,.foot-c{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--parch-far);
  transition:color .3s;
}
.foot-legal a:hover{ color:var(--amber); }

/* ══════════ ПРАВОВЫЕ ДОКУМЕНТЫ ══════════
   Сайт одностраничный: «Условия» и «Политика» открываются окном
   поверх страницы. Ширина строки держится в районе 70 знаков —
   длинный юридический текст иначе не читается.                */
.legal-gate[hidden]{ display:none; }
.legal-gate{
  position:fixed; inset:0; z-index:1100;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(56px,8vw,96px) clamp(18px,5vw,40px) clamp(40px,8vw,80px);
  background:
    radial-gradient(ellipse 70% 40% at 50% -4%, rgba(224,193,121,.14), transparent 62%),
    radial-gradient(ellipse 60% 50% at 92% 96%, rgba(126,21,24,.26), transparent 68%),
    #070405;
  opacity:0; transition:opacity .38s var(--ease);
}
.legal-gate.on{ opacity:1; }
.legal-in{
  position:relative; width:100%; max-width:72ch; margin-inline:auto;
  color:var(--parch);
}
.legal-in h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(26px,4vw,40px); line-height:1.15; margin:0;
}
.legal-upd{
  margin:10px 0 26px; font-family:var(--caps); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#E0C179;
}
.legal-in h3{
  font-family:var(--caps); font-weight:600;
  font-size:clamp(13px,1.6vw,15px); letter-spacing:.1em;
  margin:30px 0 8px; color:#FFFFFF;
  padding-top:18px; border-top:1px solid var(--line);
}
.legal-in p{ margin:0 0 12px; font-size:15.5px; line-height:1.62; color:var(--parch-dim); }
.legal-lead{ font-size:16.5px; color:var(--parch); }
/* Крестик закрытия — тот же, что у бургера: две линии крест-накрест. */
.legal-close{
  position:fixed; top:clamp(14px,3vw,26px); right:clamp(14px,4vw,34px);
  width:40px; height:40px; z-index:2;
}
.legal-close span{
  position:absolute; left:10px; right:10px; top:19px; height:1px;
  background:var(--parch);
}
.legal-close span:first-child{ transform:rotate(45deg); }
.legal-close span:last-child{ transform:rotate(-45deg); }

/* ══════════ ПЛАВАЮЩИЙ WHATSAPP ══════════ */

.float-wa{
  position:fixed; right:clamp(16px,3vw,30px); bottom:clamp(16px,3vw,30px);
  z-index:850; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  color:#FFFFFF;
  /* Кнопка повторяет знак: чёрная эмаль без золота. Кольца сняты,
     остался волосяной пергаментный кант — только чтобы кнопка не
     растворилась в тёмном низу страницы — и тень под ней.       */
  background:#0C0C0D;
  border:1px solid rgba(232,225,209,.22);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background-color .3s;
}
.float-wa.on{ opacity:1; transform:none; pointer-events:auto; }
/* При наведении подсвечиваем кант, а не заливаем кнопку. */
.float-wa:hover{ border-color:rgba(232,225,209,.5); }

/* ══════════ ПОЯВЛЕНИЕ ══════════ */

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.09s; } .d2{ transition-delay:.18s; }
.d3{ transition-delay:.27s; } .d4{ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .drawer-links a span{ transition:none; }
  .drawer-links a.hot span{ transform:none; }
  .strings span{ animation:none; }
  .hero-bg .media{ animation:none; transform:scale(1.02); }
  .hero-glow{ animation:none; opacity:.8; }
  *{ scroll-behavior:auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   АДАПТИВ
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:1080px){
  /* Селектор должен быть не слабее того, что задаёт рамку в шапке,
     иначе телефон не спрячется и шапка расползётся.               */
  .nav-right > .nav-tel{ display:none; }
}

@media (max-width:980px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  :root{ --navh:70px; }
  /* Шапка здесь ниже на десять пикселей, и знак в 72 из неё вылезал. */
  .brand-mark{ width:60px; }

  /* сцены нет — описание раскрывается в строке */
  .svc-grid{ grid-template-columns:1fr; }
  #services .svc-list{ padding-bottom:0; }
  .svc-stage{ display:none; }
  .svc-body{ display:grid; }
  .svc-row.on .svc-body{ grid-template-rows:1fr; }
  .svc-detail > :last-child{ margin-bottom:26px; }
  /* заливка ховера на тач-экранах только мешает — гасим */
  .svc-head:hover{ padding-left:0; }
  .svc-head:hover::before{ opacity:0; }
  .svc-row.on .svc-head{ padding-left:12px; }

  .conc-grid,.req-grid{ grid-template-columns:1fr; }
  .steps{ padding-left:44px; }
  .st-n{ left:-44px; }
}

@media (max-width:720px){
  /* На телефоне между разделами оставалось по 168 px пустоты —
     воздух, рассчитанный на широкий экран, здесь читается как
     провал. Режем отступы почти вдвое: разделы разделены, но
     страница не рвётся на куски.                            */
  .sec{ padding:46px 0; }
  .final{ padding:56px 0; min-height:auto; }
  .foot{ padding:26px 0; }
  /* На узком экране снимок виден целиком и лезет прямо под заголовок.
     Своя заливка: плотнее в середине, где стоит текст.               */
  .hero:has(.media) .hero-vig{
    background:linear-gradient(180deg,
      rgba(6,3,4,.62) 0%, rgba(6,3,4,.12) 14%,
      rgba(6,3,4,0) 40%, rgba(6,3,4,0) 62%,
      rgba(6,3,4,.30) 84%, rgba(6,3,4,.72) 100%);
  }
  /* Для телефона свой снимок — вертикальный. Горизонтальный кадр
     пришлось бы раздувать почти втрое, чтобы закрыть высокий
     экран, отсюда и были пиксели. Наезд выключен: он добавлял
     ещё до 13% увеличения и дрожание.                        */
  .hero-bg{ inset:-2% 0; }     /* запаса хватает параллаксу в 14px */
  .hero-bg .media{
    object-position:center 62%;
    animation:none; transform:none;
    /* Снимок для телефона показываем как есть: ни гашения, ни сепии,
       ни снятой насыщенности. Текст держится собственной тенью.   */
    filter:none;
  }
  .hero-act{ flex-direction:column; align-items:stretch; }
  .btn-lg{ width:100%; padding-inline:18px; letter-spacing:.14em; }
  .hero-rail{ gap:10px 26px; }

  .rf-row{ grid-template-columns:1fr; }
  .rf-submit{ width:100%; padding-inline:14px; letter-spacing:.14em; }


  .band{ padding-block:clamp(40px,9vw,64px); }
  .band-in{ grid-template-columns:1fr; }
  .band-plate{ aspect-ratio:16/10; order:-1; }
  .foot-in{ flex-direction:column; align-items:flex-start; }
}

/* На телефоне шапку делят знак, переключатель языка, кнопка заявки и
   бургер. Знак уменьшаем и поджимаем зазоры — так он остаётся целым
   вместо того, чтобы обрезаться флексом. */
@media (max-width:540px){
  .nav-in{ gap:12px; }
  .brand-mark{ width:60px; }
}

/* На самых узких экранах шапку делят эмблема, язык, кнопка и бургер —
   места на слово не остаётся, и знак остаётся за эмблемой одной.    */
/* Ниже 430px шапке тесно: знак, язык, заявка и бургер не встают в ряд,
   а на английском и испанском кнопка заявки ещё шире русской. Убираем
   из шапки переключатель языка — он есть в бургер-меню отдельной
   строкой, и язык всё равно спрашивается при первом заходе.        */
@media (max-width:430px){
  .nav-right > .lang-btn{ display:none; }
}


@media (max-width:420px){
  .svc-head{ grid-template-columns:32px 1fr auto; }
  .btn-sm{ padding-inline:14px; letter-spacing:.12em; }
  .band-txt,.svc-text,.conc-say > p{ font-size:14.5px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ЯЗЫКИ
   ══════════════════════════════════════════════════════════════════════ */

/* Переключатель в шапке — код языка, а не флаг: флаги на люксовом сайте
   читаются как аэропорт, и к тому же язык это не страна.            */
.lang-btn{
  display:flex; align-items:center; gap:7px;
  font-family:var(--caps); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--parch-dim);
  padding:8px 12px; border:1px solid var(--line);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.lang-btn svg{ opacity:.6; transition:transform .35s var(--ease); }
.lang-btn:hover{ color:var(--parch); border-color:var(--amber-dim); }
.lang-btn:hover svg{ transform:translateY(1px); }


/* ── Плашка выбора ───────────────────────────────────────────────────
   Открывается при первом заходе. Тот же кабинет, что и весь сайт:
   лампа сверху, багровое зарево снизу, зерно плёнки поверх.        */
.lang-gate[hidden]{ display:none; }
.lang-gate{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:clamp(24px,6vw,64px);
  background:
    radial-gradient(ellipse 70% 44% at 50% -6%, rgba(224,193,121,.20), transparent 62%),
    radial-gradient(ellipse 52% 46% at 88% 92%, rgba(168,30,34,.30), transparent 66%),
    radial-gradient(ellipse 60% 55% at 6% 74%, rgba(52,16,14,.6), transparent 70%),
    #070405;
  opacity:0; transition:opacity .6s var(--ease);
  overflow-y:auto;
}
.lang-gate.on{ opacity:1; }
.lang-gate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.lang-in{
  position:relative; z-index:2;
  width:100%; max-width:430px; text-align:center;
  animation:langRise .8s var(--ease) both;
}
@keyframes langRise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
.lang-in h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(26px,3.4vw,36px); line-height:1.04;
  color:var(--parch); margin:0;
}
.lang-sub{
  margin:12px auto 0; max-width:38ch;
  font-size:12.5px; color:var(--parch-far);
}

.lang-list{
  list-style:none; margin:clamp(20px,3vw,30px) 0 0; padding:0;
  border-top:1px solid var(--line);
  text-align:center;
}
.lang-list li{ border-bottom:1px solid var(--line); }
/* Нумерация снята, строки выключены по центру: имя языка и его
   английское название стоят друг под другом по оси окна.     */
.lang-list button{
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 0; text-align:center;
}
.lang-list button::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent,
    rgba(126,21,24,.30) 26%, rgba(126,21,24,.30) 74%, transparent);
  opacity:0; transition:opacity .45s var(--ease);
}
.lang-list button > *{ position:relative; }
.lang-list b{
  font-family:var(--display); font-weight:600;
  font-size:clamp(19px,2vw,22px); color:var(--parch-dim);
  transition:color .4s var(--ease);
}
.lang-list i{
  font-style:normal; font-size:9.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--parch-far);
}
.lang-list button:hover::before{ opacity:.75; }
.lang-list button:hover b{ color:var(--parch); }
.lang-list button[aria-current="true"] b{ color:var(--parch); }

@media (prefers-reduced-motion: reduce){
  .lang-in{ animation:none; }
  .lang-gate{ transition:none; }
}

@media (max-width:1080px){
  .lang-btn{ padding:7px 10px; letter-spacing:.14em; }
}
@media (max-width:400px){
  .lang-btn span{ letter-spacing:.1em; }
  .lang-list button{ grid-template-columns:28px 1fr; gap:10px; }
  .lang-list i{ grid-column:2; }
}


/* ══════════ ВИТРИНА (панель под первым экраном) ══════════
   Собрана по макету: полоса со слоганом, три колонки — философия,
   шесть направлений работы, направления с прямой связью — и своя
   нижняя строка. Живёт только на главной, на логику разделов
   ниже не влияет.                                              */

.lp{ position:relative; background:#000000; border-top:1px solid var(--line-soft); }

/* ── Полоса со слоганом ─────────────────────────────────────── */
/* Полоса со слоганом стоит на панораме из макета. Снимок прижат к
   правому краю, слева его гасит градиент — на нём и лежит текст. */
.lp-band{
  position:relative; isolation:isolate;
  border-bottom:1px solid var(--line-soft);
  background:#000 url("../img/band.jpg?v=011242ff") right center / cover no-repeat;
}
.lp-band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,.35) 34%, rgba(0,0,0,0) 52%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 26%, transparent 70%, rgba(0,0,0,.5) 100%);
}
.lp-band-in{ position:relative; }
.lp-band-in{
  max-width:var(--shell); margin-inline:auto;
  padding:clamp(28px,3.4vw,54px) var(--gut);
}
.lp-slogan{
  margin:0; font-family:var(--caps);
  font-size:clamp(16px,1.5vw,24px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); line-height:1.5;
}
.lp-count{
  margin:clamp(14px,1.4vw,22px) 0 0;
  font-family:var(--caps); font-size:11px; letter-spacing:.28em;
  color:var(--parch-far);
}
.lp-count b{ font-weight:400; }

/* ── Три колонки ────────────────────────────────────────────── */
.lp-grid{
  max-width:var(--shell); margin-inline:auto;
  padding:clamp(28px,3.4vw,54px) var(--gut);
  display:grid; grid-template-columns:.86fr 1.2fr 1fr;
  gap:clamp(24px,3vw,56px); align-items:start;
}
.lp-grid > *{ min-width:0; }
.lp-label{
  margin:0 0 clamp(16px,1.8vw,26px);
  font-family:var(--caps); font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--parch-far);
}

/* Философия */
.lp-h{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(20px,1.9vw,30px); line-height:1.28;
  letter-spacing:.01em; text-transform:uppercase; color:var(--parch);
}
.lp-txt{
  margin:clamp(16px,1.6vw,24px) 0 0; max-width:34em;
  font-size:clamp(13px,.85vw,15px); line-height:1.7; color:var(--parch-dim);
}
.lp-sign{
  margin:clamp(18px,2vw,30px) 0 0;
  font-family:var(--caps); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--parch-far);
}

/* Шесть направлений работы */
.lp-list{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(20px,2.4vw,44px);
}
.lp-list li{ border-bottom:1px solid var(--line-soft); min-width:0; list-style:none; }
/* Колонки сетки не должны раздуваться под длинную подпись — иначе
   строка выталкивает стрелку за край экрана.                    */
.lp-list a > *{ min-width:0; }
.lp-name,.lp-tag{ overflow-wrap:anywhere; }
.lp-list a{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:start; gap:0 14px;
  padding:clamp(12px,1.2vw,18px) 0;
  transition:color .35s var(--ease);
}
.lp-num{
  font-family:var(--caps); font-size:12px; letter-spacing:.16em;
  color:var(--amber); padding-top:2px;
}
.lp-name{
  display:block; font-family:var(--caps);
  font-size:clamp(11px,.78vw,13px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--parch);
}
.lp-tag{
  display:block; margin-top:5px;
  font-size:clamp(11px,.72vw,12.5px); line-height:1.45; color:var(--parch-far);
}
/* Стрелка смотрит вниз — она ведёт к полному списку услуг ниже. */
.lp-arrow{
  width:16px; height:16px; margin-top:2px; position:relative; flex:none;
  transition:transform .35s var(--ease);
}
.lp-arrow::before,
.lp-arrow::after{
  content:""; position:absolute; background:#FFFFFF;
}
.lp-arrow::before{ left:7px; top:0; width:1px; height:16px; }
.lp-arrow::after{
  left:3px; top:9px; width:8px; height:8px;
  border-left:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;
  transform:rotate(-45deg); transform-origin:center;
  background:none;
}
.lp-list a:hover .lp-arrow{ transform:translateY(3px); }
.lp-list a:hover .lp-name{ color:#FFFFFF; }

/* Направления */
.lp-dest-in > *{ min-width:0; }
.lp-dest-in{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2vw,34px); align-items:center;
}
.lp-big{ margin:0; text-align:center; }
.lp-big b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(44px,4.4vw,72px); line-height:1; color:var(--amber);
}
.lp-big span{
  display:block; margin-top:8px;
  font-family:var(--caps); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--parch-far);
}
.lp-icons{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,20px);
}
.lp-icons li{ text-align:center; color:var(--amber); min-width:0; list-style:none; }
.lp-icons span{
  display:block; margin-top:10px; hyphens:none;
  font-family:var(--caps); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--parch-dim);
}
.lp-icons svg{ margin-inline:auto; }

/* Прямая связь */
.lp-one{
  margin-top:clamp(20px,2.2vw,34px);
  border:1px solid var(--line);
  padding:clamp(18px,1.9vw,30px);
  display:grid; grid-template-columns:1fr 1fr auto;
  gap:clamp(16px,1.8vw,30px); align-items:center;
}
.lp-one-h{
  margin:0; font-family:var(--caps);
  font-size:clamp(13px,1.05vw,17px); letter-spacing:.1em;
  text-transform:uppercase; color:var(--parch); line-height:1.55;
}
.lp-one-txt{
  margin:0; font-size:clamp(11px,.75vw,13px);
  line-height:1.6; color:var(--parch-dim);
}
.lp-one-btn{ white-space:nowrap; }

/* ── Нижняя строка витрины ──────────────────────────────────── */
.lp-foot{
  border-top:1px solid var(--line-soft);
  max-width:var(--shell); margin-inline:auto;
  padding:clamp(20px,2.2vw,34px) var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(16px,2vw,32px);
}
.lp-foot-brand b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(15px,1.15vw,19px); letter-spacing:.22em; color:var(--parch);
}
.lp-foot-brand em{
  display:block; margin-top:4px; font-style:normal;
  font-family:var(--caps); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--parch-far);
}
.lp-foot-claim{ margin:0; text-align:center; }
.lp-foot-claim b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(17px,1.6vw,27px); letter-spacing:.06em; color:var(--parch);
}
.lp-foot-claim em{
  display:block; margin-top:6px; font-style:normal;
  font-family:var(--caps); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber-dim);
}
.lp-foot-cta{
  justify-self:end;
  font-family:var(--caps); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--parch);
  border-bottom:1px solid rgba(232,225,209,.3); padding-bottom:5px;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.lp-foot-cta:hover{ color:#FFFFFF; border-color:#FFFFFF; }

/* ── Планшет и телефон ──────────────────────────────────────── */
/* Подписи под иконками длиннее самих иконок — ниже 1500 пикселей
   раскладываем их в два ряда, иначе они лезут за край.        */
@media (max-width:1500px){
  .lp-icons{ grid-template-columns:repeat(2,1fr); row-gap:clamp(14px,1.4vw,22px); }
}
@media (max-width:1100px){
  .lp-grid{ grid-template-columns:1fr 1fr; }
  .lp-dest{ grid-column:1 / -1; }
  .lp-one{ grid-template-columns:1fr 1fr; }
  .lp-one-btn{ grid-column:1 / -1; justify-self:start; }
}
@media (max-width:720px){
  .lp-grid{ grid-template-columns:1fr; }
  .lp-list{ grid-template-columns:1fr; }
  .lp-dest-in{ grid-template-columns:1fr; gap:18px; }
  .lp-icons{ grid-template-columns:repeat(4,1fr); }
  .lp-one{ grid-template-columns:1fr; }
  .lp-foot{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .lp-foot-cta{ justify-self:center; }
  .lp-slogan{ text-align:center; }
  .lp-count{ text-align:center; }
}


/* ══════════ ГЛАВНАЯ ЦЕЛИКОМ В ОДИН ЭКРАН ══════════
   По макету владельца первый экран и витрина под ним — одно полотно
   высотой в окно: имя, заявление, кнопка, полоса со слоганом, три
   колонки и нижняя строка. Разделы ниже живут своей жизнью.      */
@media (min-width:981px){
  /* Полотно ровно в высоту окна. Витрина не тянется — остаток высоты
     забирает первый экран, поэтому нижняя строка витрины садится на
     край окна, а не оставляет под собой чёрную полосу.            */
  .home-canvas{
    min-height:100svh;
    display:flex; flex-direction:column;
  }
  .hero{
    min-height:0; height:auto;
    padding:calc(var(--navh) + clamp(10px,1.4vh,26px)) 0 0;
    grid-template-rows:auto;
    flex:1 1 auto; align-content:center;
  }
  .lp{ flex:0 0 auto; }
  .hero-in{ padding-bottom:0; }
  /* Имя ужимается: место теперь делят пять блоков, а не один. */
  /* Кегль ограничен и по ширине, и по высоте окна: на низком экране
     ноутбука имя обязано ужиматься, иначе полотно не влезает.   */
  .hero-in .lk-name{ font-size:min(5.4vw, 11.5svh, 104px); }
  .hero-in .lk-sub{ margin-top:calc(var(--lk) * .16); }
  .hero-in .lk-claim{ margin-top:calc(var(--lk) * .30); padding:calc(var(--lk) * .22) calc(var(--lk) * .5); }
  .hero-act{ margin-top:clamp(16px,2vh,30px); }
  .hero .btn-lg{ height:46px; }
  /* Полоса цифр уходит: в макете её нет, а высоту она съедала. */
  .hero-rail{ display:none; }

  /* Витрина поджата под остаток экрана. */
  .lp-band-in{ padding-block:clamp(12px,1.6vh,26px); }
  .lp-grid{ padding-block:clamp(14px,1.8vh,30px); }
  .lp-foot{ padding-block:clamp(10px,1.4vh,24px); }
  .lp-slogan{ font-size:clamp(14px,1.15vw,20px); }
  .lp-count{ margin-top:clamp(8px,1vh,16px); }
  .lp-label{ margin-bottom:clamp(10px,1.2vh,20px); }
  .lp-h{ font-size:min(1.55vw, 3.1svh, 26px); }
  .lp-txt{ margin-top:clamp(8px,1.2vh,18px); font-size:min(.78vw, 1.7svh, 14px); line-height:1.55; }
  .lp-sign{ margin-top:clamp(12px,1.4vh,22px); }
  .lp-list a{ padding-block:min(1vh, 14px); }
  .lp-name{ font-size:min(.78vw, 1.6svh, 13px); }
  .lp-tag{ font-size:min(.72vw, 1.5svh, 12.5px); margin-top:3px; }
  .lp-big b{ font-size:min(3.4vw, 7svh, 60px); }
  .lp-one{ margin-top:clamp(12px,1.6vh,26px); padding:clamp(12px,1.4vw,22px); }
  .lp-one-h{ font-size:min(.9vw, 1.9svh, 15px); }
  .lp-one-txt{ font-size:min(.75vw, 1.6svh, 13px); }
  .lp-icons svg{ width:min(2.6svh, 26px); height:min(2.6svh, 26px); }
  .lp-icons span{ margin-top:6px; }
  .lp-foot-claim b{ font-size:min(1.3vw, 2.8svh, 23px); }
  .lp-slogan{ line-height:1.4; }
}


/* Невысокий монитор: полотно должно уложиться и здесь, поэтому
   режем отбивки и мелкий кегель ещё раз. Значения подобраны
   замерами на 1600x900, 1440x900, 1366x768 и 1280x720.        */
@media (min-width:981px) and (max-height:1000px){
  .hero{ padding-top:calc(var(--navh) + 6px); }
  .hero-in .lk-claim{ margin-top:calc(var(--lk) * .22); padding:calc(var(--lk) * .16) calc(var(--lk) * .44); }
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .24); }
  .hero-act{ margin-top:clamp(10px,1.4vh,20px); }
  .hero .btn-lg{ height:40px; }

  .lp-band-in{ padding-block:clamp(9px,1.1vh,18px); }
  .lp-grid{ padding-block:clamp(10px,1.3vh,22px); }
  .lp-foot{ padding-block:clamp(8px,1vh,16px); }
  .lp-label{ margin-bottom:clamp(7px,.9vh,14px); }
  .lp-txt{ margin-top:clamp(6px,.9vh,12px); }
  .lp-sign{ margin-top:clamp(8px,1vh,14px); }
  .lp-list a{ padding-block:min(.8vh, 11px); }
  .lp-one{ margin-top:clamp(8px,1.1vh,18px); padding:clamp(9px,1.1vw,16px); }
  .lp-one-h{ line-height:1.4; }
  .lp-icons span{ margin-top:4px; font-size:8.5px; }
  .lp-count{ margin-top:clamp(5px,.7vh,10px); }
}


/* Ноутбук 768 и ниже по высоте: последний виток сжатия. Имя ещё
   меньше, отбивки почти сняты — зато полотно целиком в экране. */
@media (min-width:981px) and (max-height:820px){
  .hero{ padding-top:calc(var(--navh) + 2px); }
  .hero-in .lk-name{ font-size:min(5.4vw, 9.4svh, 104px); }
  .hero-in .lk-claim{ margin-top:calc(var(--lk) * .18); padding:calc(var(--lk) * .13) calc(var(--lk) * .4); }
  .hero-act{ margin-top:10px; }
  .hero .btn-lg{ height:36px; }
  .lp-band-in{ padding-block:8px; }
  .lp-grid{ padding-block:10px; }
  .lp-foot{ padding-block:7px; }
  .lp-label{ margin-bottom:6px; }
  .lp-list a{ padding-block:6px; }
  .lp-tag{ margin-top:2px; }
  .lp-one{ margin-top:8px; padding:9px 12px; }
  .lp-txt{ margin-top:6px; }
  .lp-sign{ margin-top:8px; }
  .lp-big b{ font-size:min(3.4vw, 6svh, 60px); }
  .lp-foot-claim b{ font-size:min(1.3vw, 2.4svh, 23px); }
  /* Самый низкий парк ноутбуков: 1366x768 и 1280x720. Здесь режем
     последнее — межстрочные интервалы, иконки и кегль имени.    */
  .hero-in .lk-name{ font-size:min(5vw, 8.2svh, 104px); }
  .hero-in .lk-sub em{ font-size:calc(var(--lk) * .2); }
  .lp-name{ font-size:min(.72vw, 1.4svh, 12px); }
  .lp-tag{ font-size:min(.66vw, 1.3svh, 11.5px); line-height:1.35; }
  .lp-list a{ padding-block:5px; }
  .lp-one-h{ line-height:1.3; }
  .lp-one-txt{ line-height:1.45; }
  .lp-icons svg{ width:20px; height:20px; }
  .lp-icons span{ margin-top:3px; font-size:8px; }
  .lp-big b{ font-size:min(3vw, 5.2svh, 60px); }
  .lp-big span{ margin-top:4px; }
  .lp-txt{ line-height:1.5; }
  .lp-foot-brand b{ font-size:16px; }
  /* Остаток добираем на самой рамке заявления и на полосе слогана —
     это два последних места, где ещё был запас.               */
  .hero-in .lk-claim{ margin-top:calc(var(--lk) * .14); padding:calc(var(--lk) * .1) calc(var(--lk) * .36); }
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .21); line-height:1.2; }
  .hero-act{ margin-top:8px; }
  .hero .btn-lg{ height:34px; }
  .lp-band-in{ padding-block:6px; }
  .lp-grid{ padding-block:8px; }
  .lp-foot{ padding-block:6px; }
  .lp-slogan{ font-size:min(1.05vw, 2.1svh, 20px); line-height:1.35; }
  .lp-count{ margin-top:4px; }
  .lp-one{ margin-top:6px; }
  .lp-sign{ margin-top:6px; }
  .lp-list a{ padding-block:4px; }
  .lp-label{ margin-bottom:5px; }
  .lp-txt{ font-size:min(.7vw, 1.5svh, 13px); }
  .lp-one-txt{ font-size:min(.68vw, 1.4svh, 12px); }
  .lp-foot-claim em{ margin-top:3px; }
}


/* ══════════ ГЛАВНАЯ ПО МАКЕТУ ══════════
   Золото возвращено туда, где оно стоит на макете: подпись под именем
   и линии по её бокам, рамка заявления с точкой, подсветка кнопки,
   рамки в шапке, перегородки между иконками и рамка «Один номер».  */

/* Тёплая подложка вместо чистого чёрного — как на макете. */
.hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(58,38,20,.34), transparent 62%),
    radial-gradient(ellipse 60% 50% at 92% 96%, rgba(52,30,14,.28), transparent 66%),
    #050403;
}
.lp{ background:
  radial-gradient(ellipse 70% 90% at 6% 50%, rgba(46,30,16,.30), transparent 64%),
  radial-gradient(ellipse 60% 80% at 96% 60%, rgba(46,30,16,.26), transparent 66%),
  #050403; }

/* Первый экран: золотая подпись, линии, рамка и точка. */
.hero-in .lockup{ --lk-line:rgba(224,193,121,.55); }
.hero-in .lk-sub em{ color:var(--amber); }
.hero-in .lk-dot{ background:var(--amber); }
.hero-in .lk-claim{ border-color:rgba(224,193,121,.55); }
.hero-in .lk-claim b{ color:#F4EFE4; }

/* Кнопка первого экрана: золотая подсветка снизу, как на макете. */
.hero-act .btn::after{
  background:linear-gradient(90deg,
    transparent 0%, rgba(224,193,121,.5) 14%,
    #E0C179 36%, #E0C179 64%,
    rgba(224,193,121,.5) 86%, transparent 100%);
  box-shadow:
    0 0 4px rgba(224,193,121,.9),
    0 0 14px rgba(224,193,121,.6),
    0 0 30px rgba(224,193,121,.3);
}
.hero-act .btn:hover::after{
  box-shadow:
    0 0 5px rgba(240,214,150,1),
    0 0 20px rgba(224,193,121,.85),
    0 0 44px rgba(224,193,121,.5);
}

/* Шапка: обе кнопки в золотой рамке. */
.nav-right > .lang-btn,
.nav-right > .btn{
  border-color:rgba(224,193,121,.45);
  color:#EDE6D8;
}
.nav-right > .lang-btn:hover,
.nav-right > .btn:hover{ border-color:var(--amber); color:#FFFFFF; }

/* Витрина: перегородки между иконками и золотая рамка «Один номер». */
.lp-icons li + li{ border-left:1px solid rgba(224,193,121,.22); }
.lp-icons li{ padding-inline:clamp(6px,.8vw,14px); }
.lp-one{ border-color:rgba(224,193,121,.34); }
.lp-one-btn{ border-color:rgba(224,193,121,.55); color:#EDE6D8; }
.lp-one-btn:hover{ border-color:var(--amber); color:#FFFFFF; }
.lp-foot-cta{ border-bottom-color:rgba(224,193,121,.5); }
.lp-foot-cta:hover{ border-bottom-color:var(--amber); }
.lp-list li{ border-bottom-color:rgba(224,193,121,.14); }
.lp-band{ border-bottom-color:rgba(224,193,121,.18); }
.lp-foot{ border-top-color:rgba(224,193,121,.18); }


/* Витрина — только для компьютера. На телефоне и планшете её нет:
   там страница живёт прежней вёрсткой, как до этой правки.      */
@media (max-width:980px){
  #showcase{ display:none !important; }
}


/* Первый экран — только белое: подпись, линии, точка, рамка, кнопка
   и обе кнопки шапки. Золота здесь нет.                          */
.hero-in .lockup{ --lk-line:rgba(255,255,255,.7); }
.hero-in .lk-sub em{ color:#FFFFFF; }
.hero-in .lk-dot{ background:#FFFFFF; }
.hero-in .lk-claim{ border-color:rgba(255,255,255,.6); }
.hero-act .btn::after{
  background:linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.45) 14%,
    #FFFFFF 36%, #FFFFFF 64%,
    rgba(255,255,255,.45) 86%, transparent 100%);
  box-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.7),
    0 0 30px rgba(255,255,255,.4);
}
.hero-act .btn:hover::after{
  box-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 20px rgba(255,255,255,.9),
    0 0 44px rgba(255,255,255,.55);
}
.nav-right > .lang-btn,
.nav-right > .btn{ border-color:rgba(255,255,255,.35); color:#FFFFFF; }
.nav-right > .lang-btn:hover,
.nav-right > .btn:hover{ border-color:#FFFFFF; color:#FFFFFF; }


/* Философия прижата к низу колонки — по линии, отмеченной владельцем,
   и набрана чуть крупнее.                                        */
@media (min-width:981px){
  .lp-philosophy{ align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end; }
  .lp-philosophy .lp-label{ margin-bottom:auto; }
  .lp-h{ font-size:min(1.75vw, 3.4svh, 30px); }
  .lp-txt{ font-size:min(.92vw, 1.9svh, 16px); }
  .lp-sign{ font-size:11px; }
}


/* Часы под слоганом: время идёт, двоеточие мигает раз в секунду. */
.lp-clock{
  margin:clamp(14px,1.4vw,22px) 0 0;
  font-family:var(--caps); font-size:clamp(15px,1.15vw,20px);
  letter-spacing:.18em; color:var(--parch);
}
.lp-clock b{ font-weight:400; }
.lp-clock i{ font-style:normal; transition:opacity .18s linear; }
.lp-clock.tick i{ opacity:.15; }
@media (min-width:981px) and (max-height:1000px){ .lp-clock{ margin-top:clamp(5px,.7vh,10px); } }


/* «Философия Montero» стоит вплотную над заголовком, а не в верху
   колонки: весь блок держится единым куском внизу.             */
@media (min-width:981px){
  .lp-philosophy .lp-label{ margin-bottom:clamp(8px,1vh,14px); }
}

.lp-clock{ color:var(--amber); }

.lp-h{ line-height:1.05; }

@media (min-width:981px){ .lp-philosophy .lp-txt{ margin-top:6px; } }


/* В списке остаются только названия: подписи под ними сняты, а сам
   список прижат к нижней черте колонки.                        */
@media (min-width:981px){
  .lp-tag{ display:none; }
  .lp-services{ align-self:stretch; display:flex; flex-direction:column; }
  .lp-services .lp-list{ margin-top:auto; }
}

@media (min-width:981px){ .lp-name{ white-space:nowrap; } }

@media (min-width:981px){ .lp-services .lp-label{ margin-top:auto; margin-bottom:clamp(8px,1vh,14px); } .lp-services .lp-list{ margin-top:0; } }

@media (min-width:981px){ .lp-services .lp-label{ padding-left:40px; } }


/* Список услуг растянут во всю высоту колонки — от верхней черты до
   нижней, строки распределены поровну. Кегль названий взят от блока
   «Один номер…».                                                */
@media (min-width:981px){
  .lp-services .lp-label{ margin-top:0; }
  .lp-services .lp-list{
    flex:1 1 auto; align-content:space-between;
  }
  .lp-name{
    font-size:min(.9vw, 1.9svh, 15px);
    letter-spacing:.1em; line-height:1.4;
  }
  .lp-num{ font-size:13px; }
  /* Подписи под иконками направлений слипались — дали им воздух. */
  .lp-icons li{ padding-inline:clamp(8px,1vw,18px); }
}

@media (min-width:981px){ .lp-services .lp-list{ flex:0 0 auto; align-content:start; margin-top:auto; } .lp-name{ font-size:min(.8vw, 1.7svh, 13.5px); } }

@media (min-width:981px){ .lp-services{ justify-content:flex-end; } .lp-services .lp-list{ margin-top:0; } }


/* Блок услуг растянут от верхней до нижней черты панели: список
   занимает всю оставшуюся высоту, строки распределены поровну.  */
@media (min-width:981px){
  .lp-services{ justify-content:flex-start; }
  .lp-services .lp-list{
    flex:1 1 auto; align-content:space-between; margin-top:clamp(6px,1vh,12px);
    row-gap:0;
  }
  .lp-name{ font-size:min(1.05vw, 2.1svh, 17px); }
  .lp-num { font-size:min(.78vw, 1.6svh, 13px); }
  .lp-list a{ padding-block:clamp(6px,1.1vh,14px); }
}

@media (min-width:981px){ .lp-services .lp-list{ transform:translateY(5%); } }

@media (min-width:981px){ .lp-services .lp-list{ transform:translateY(10%); } }

@media (min-width:981px){ .lp-services .lp-list{ transform:translateY(15%); } }

@media (min-width:981px){ .lp-services .lp-list{ transform:translateY(30%); } }

@media (min-width:981px){ .lp-services .lp-list{ transform:translateY(15%); } }

/* Первые четыре строки услуг опущены, 05 и 06 остаются на месте. */
@media (min-width:981px){ .lp-services .lp-list > li:nth-child(-n+4){ transform:translateY(10%); } }

@media (min-width:981px){ .lp-services .lp-list > li:nth-child(-n+4){ transform:translateY(20%); } }

/* Заголовок колонки прижат вплотную к строке 01. */
@media (min-width:981px){
  .lp-services .lp-label{ margin-bottom:0; }
  .lp-services .lp-list{ margin-top:0; }
}

@media (min-width:981px){ .lp-services .lp-label{ transform:translateY(40px); } }

@media (min-width:981px){
  .lp-services .lp-label{ transform:none; margin-bottom:clamp(8px,1vh,14px); }
  .lp-services .lp-list{ margin-top:clamp(6px,1vh,12px); }
}

@media (min-width:981px){ .lp-services .lp-label{ display:none; } }

@media (min-width:981px){ .lp-services .lp-label{ display:block; visibility:hidden; } }

@media (min-width:981px){ .lp-name{ font-size:min(.92vw, 1.85svh, 15px); } }

/* Под названием услуги вернулась строка-описание. */
@media (min-width:981px){
  .lp-tag{ display:block; font-size:min(.66vw,1.3svh,11px); letter-spacing:.06em;
           color:rgba(255,255,255,.5); margin-top:3px; white-space:nowrap; }
  .lp-list a{ padding-block:clamp(4px,.7vh,9px); }
}

@media (min-width:981px){ .lp-tag{ font-size:min(.76vw,1.5svh,12.5px); color:#FFFFFF; } }

@media (min-width:981px){ .lp-tag{ font-size:min(.85vw,1.7svh,14px); } }

/* В правой колонке сняты крупная «04» и подпись над ней. */
@media (min-width:981px){
  .lp-dest > .lp-label{ display:none; }
  .lp-dest .lp-big{ display:none; }
}

@media (min-width:981px){ .lp-dest .lp-icons{ display:none; } }

@media (min-width:981px){ .lp-dest .lp-icons{ display:grid; visibility:hidden; } }

/* Фотополоса расширена вниз до линии «Философия Montero». */
@media (min-width:981px){ .lp-band{ min-height:min(245px, 22.7svh); } }

@media (min-width:981px) and (max-height:1039px){ .lp-band{ min-height:min(180px,19svh); } }
@media (min-width:981px) and (max-height:939px){ .lp-band{ min-height:min(150px,16svh); } }
@media (min-width:981px) and (max-height:820px){ .lp-band{ min-height:min(130px,15svh); } }

/* На более узких экранах колонки выше — полосе оставлен только
   реально свободный запас, главная остаётся в один экран.      */
@media (min-width:981px) and (max-width:1750px) and (min-height:1040px){ .lp-band{ min-height:min(200px,19svh); } }
@media (min-width:981px) and (max-width:1500px) and (max-height:939px){ .lp-band{ min-height:min(120px,13svh); } }
@media (min-width:981px) and (max-width:1500px) and (max-height:820px){ .lp-band{ min-height:min(85px,11.5svh); } }

/* Полоса: исходный PNG без сжатия, без затемняющей вуали. */
@media (min-width:981px){
  .lp-band{ background:#000 url("../img/band.png?v=15ea551f") center center / cover no-repeat; }
  .lp-band::after{ display:none; }
}

/* Фото продлено вниз до строки «Философия Montero» — растёт только
   само изображение, разметка полосы и колонок не меняется.      */
@media (min-width:981px){
  .lp-band{ position:relative; background:#000; overflow:visible; }
  .lp-band::before{
    content:''; position:absolute; left:0; right:0; top:0; bottom:min(-98px,-9svh);
    background:url("../img/band.png?v=15ea551f") center center / cover no-repeat;
    z-index:0; pointer-events:none;
  }
  .lp-band > *{ position:relative; z-index:1; }
  .lp-grid{ position:relative; z-index:1; }
}

@media (min-width:981px){ .lp-band::before{ transform:translateY(-1cm); } }

@media (min-width:981px){ .lp-band::before{ transform:translateY(-.5cm); } }

@media (min-width:981px){ .lp-band::before{ transform:translateY(-.8cm); } }

/* Прежние варианты полосы-снимка сняты вместе с самим элементом:
   витрина стоит на цельной фотографии (.lp::before). Файлы обрезков
   унесены в _archive/band-strips.                                */

/* Слоган и часы опущены к нижнему краю фотографии. */
@media (min-width:981px){
  .lp-band{ display:flex; align-items:flex-end; }
  .lp-band-in{ width:100%; margin-top:auto; transform:translateY(58px); }
}

@media (min-width:981px){ .lp-clock{ margin-top:2px; } }

@media (min-width:981px){ .lp-band-in{ transform:translateY(calc(58px + 2mm)); } }

@media (min-width:981px){ .lp-band-in{ transform:translateY(calc(58px + 4mm)); } }

@media (min-width:981px){ .lp-clock{ transform:translateY(-2mm); } }

@media (min-width:981px){ .hero-act{ display:none; } }

@media (min-width:981px){ .hero-act{ display:flex; visibility:hidden; } }

/* Вместо длинной стрелки — маленький треугольник, как в календаре. */
@media (min-width:981px){
  .lp-arrow{ width:9px; height:9px; margin-top:0; align-self:center; }
  .lp-arrow::before{ display:none; }
  .lp-arrow::after{
    left:0; top:0; width:0; height:0; border:none;
    border-left:4.5px solid transparent; border-right:4.5px solid transparent;
    border-top:5px solid #FFFFFF; transform:none; background:none;
  }
}

/* Блок «Один номер»: без кнопки и без золотой рамки. */
@media (min-width:981px){
  .lp-one-btn{ display:none; }
  .lp-one{ border:none; }
  .lp-one-txt{ max-width:none; }
}

/* Правая колонка построена как левая: заголовок в две-три строки,
   под ним абзац того же кегля — блоки читаются симметрично.     */
@media (min-width:981px){
  .lp-one{
    display:block; margin-top:0; padding:0; border:none;
  }
  .lp-one-h{
    font-family:var(--display); font-weight:400; text-transform:uppercase;
    font-size:min(1.55vw, 3.1svh, 26px); line-height:1.28;
    letter-spacing:.01em; color:var(--parch);
  }
  .lp-one-txt{
    margin-top:clamp(8px,1.2vh,18px);
    font-size:min(.78vw, 1.7svh, 14px); line-height:1.55;
    color:var(--parch-dim); max-width:34em;
  }
  .lp-dest-in{ display:block; }
  .lp-dest{ justify-content:flex-start; }
}

@media (min-width:981px){
  .lp-dest .lp-icons{ display:none; }
  .lp-dest{ align-self:start; }
}

@media (min-width:981px){ .lp-dest{ align-self:center; } }

@media (min-width:981px){ .lp-dest{ align-self:start; padding-top:60px; } }

/* Правый блок выключен по правому краю. */
@media (min-width:981px){
  .lp-one{ text-align:right; }
  .lp-one-txt{ margin-left:auto; }
}

@media (min-width:981px){ .lp-one-txt{ font-size:16px; line-height:1.55; } }

@media (min-width:981px){ .lp-one-txt{ margin-top:6px; } }

@media (min-width:981px){ .lp-dest{ padding-top:54px; } }

/* Откат: текст правого блока вернулся к прежнему кеглю. */
@media (min-width:981px){
  .lp-one-txt{ font-size:min(.78vw, 1.7svh, 14px); line-height:1.55; margin-top:clamp(8px,1.2vh,18px); }
  .lp-dest{ padding-top:60px; }
}

/* Текст «Один номер…» набран точно тем же кеглем, что и абзац
   философии слева: Libertinus Serif 16px/1.55.                 */
@media (min-width:981px){
  .lp-one-txt{ font-size:16px; line-height:1.55; margin-top:6px; }
  .lp-dest{ padding-top:54px; }
}

/* Откат: прежний кегль правого текста. */
@media (min-width:981px){
  .lp-one-txt{ font-size:min(.78vw, 1.7svh, 14px); line-height:1.55; margin-top:clamp(8px,1.2vh,18px); }
  .lp-dest{ padding-top:60px; }
}

@media (min-width:981px){ .lp-one-h span[data-i18n="lp.one.h2"]{ display:none; }
  .lp-one-h br + br{ display:none; } }


/* Равный шаг строк услуг. Отдельный сдвиг первых четырёх строк
   опускал 01–04 на 20% высоты строки, а 05 и 06 оставлял на месте —
   просвет между 03/04 и 05/06 выходил уже остальных. Сдвиг снят:
   шаг между всеми тремя строками теперь один и тот же.          */
@media (min-width:981px){
  .lp-services .lp-list > li:nth-child(-n+4){ transform:none; }
}

/* Строка «Философия Montero» снята. Убрана видимостью, а не разметкой:
   место под строкой сохранено, поэтому заголовок «Ваше время. Ваша
   роскошь.», абзац и подпись остаются точно там же, где стояли, и
   соседние колонки не двигаются.                                */
.lp-philosophy .lp-label{ visibility:hidden; }

/* Правый абзац набран точно так же, как левый. Формулы взяты у
   `.lp-txt` один в один: тот же шрифт, тот же кегль с теми же
   пределами, тот же межстрочный интервал, тот же отступ от
   заголовка и та же мера строки — значит и ужимается он на узких
   экранах так же. Выключка остаётся правой: правый блок так
   построен, и выравнивание владелец менять не просил.           */
@media (min-width:981px){
  .lp-one-txt{
    font-size:min(.92vw, 1.9svh, 16px);
    line-height:1.55;
    margin-top:6px;
    max-width:34em;
  }
}
/* На низком экране левый абзац сжимает межстрочный интервал —
   правый сжимает его ровно так же.                             */
@media (min-width:981px) and (max-height:820px){
  .lp-one-txt{ line-height:1.5; }
}

/* Последняя строка правого блока — подпись, а не часть абзаца: класс
   `lp-sign` у неё тот же, что у «Частный консьерж — MONTERO» слева,
   поэтому шрифт, кегль, разрядка и цвет совпадают сами и останутся
   совпадать при любой будущей правке левой подписи. Подпись ниже
   абзаца, но короче строки текста, а заголовок стал плотнее — колонка
   в сумме не выросла, и подгонять высоту не пришлось. Витрина живёт
   только на широком экране — ниже 980 пикселей её нет вовсе, поэтому
   отдельных правил для телефона подписи не нужно.                */

/* Правый блок выровнен по верхней линии левого: заголовки «ОДИН
   НОМЕР» и «ВАШЕ ВРЕМЯ» начинаются на одной высоте — на нижней
   границе фотографии.                                            */
@media (min-width:981px){
  /* Межстрочный правого заголовка приведён к левому — 1.05 вместо
     1.28. Лишний полулидинг опускал «ОДИН НОМЕР» ниже строки «ВАШЕ
     ВРЕМЯ» на три-четыре пикселя, и правый блок не доходил до нижней
     границы фотографии. Заодно две строки заголовка стоят так же
     плотно, как слева.                                            */
  .lp-one-h{ line-height:1.05; }
}

/* Верхняя линия правого блока подтянута к левой: «ОДИН НОМЕР» теперь
   начинается на той же высоте, что «ВАШЕ ВРЕМЯ» — у нижней границы
   фотографии. Три пикселя снимаются с верхней отбивки колонки.   */
@media (min-width:981px){ .lp-dest{ padding-top:57px; } }

/* Имя на первом экране растянуто по горизонтали: между буквами
   встаёт полноценный пробел — .45em вместо .20em. `text-indent`
   держится равным разрядке: он гасит хвостовой пробел после
   последней буквы, иначе слово уехало бы влево на этот пробел.
   Слово остаётся ровно по центру экрана при любой ширине окна.
   Знак в подвале не тронут — растянуто только главное имя.     */
.hero-in .lk-name{ letter-spacing:.45em; text-indent:.45em; }


/* ── Снимок на всю витрину ──────────────────────────────────────
   Раньше фотография была узкой полосой под первым экраном и резалась
   прямой линией. Теперь она стоит фоном всей витрины: входит из
   черноты сразу под рамкой заявления, накрывает полосу со слоганом и
   три колонки и обрывается ровно на верхней черте нижней строки.
   Снимок взят целиком (band-full.jpg, 2400x1500), а не обрезанной
   полосой: по ширине он ложится всегда полностью, поэтому дом,
   пальмы, обе птицы и горизонт не срезаются ни при какой ширине
   окна. Кадр поднят по вертикали — за это отвечает 74.5% в
   background-position: тёмная нижняя часть снимка встаёт под белый
   текст витрины, а закат остаётся сверху.
   Слой только фоновый: разметка не двигается ни на пиксель.      */
@media (min-width:981px){
  .lp-band::before{ display:none; }
  .lp-band{ background:transparent; }

  .lp::before{
    content:''; position:absolute; z-index:0; pointer-events:none;
    left:0; right:0; top:-9svh; bottom:0;
    /* Снимок и вуаль над ним одним слоем: книзу темнеет, чтобы текст
       витрины читался, а закат наверху остался живым.            */
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 34%,
                              rgba(0,0,0,.62) 66%, rgba(0,0,0,.88) 100%),
      url("../img/band-full.jpg?v=a36153e3") center 74.5% / cover no-repeat;
    /* Растворение сверху: ступени вручную, иначе на большой площади
       ровный градиент даёт видимые полосы.                       */
    /* Долгое растворение сверху: снимок проступает из черноты на
       протяжении 42% своей высоты, ступени идут по мягкой кривой —
       медленно из нуля и медленно к единице, поэтому ни начала, ни
       конца перехода не видно. Короче — виден стык, длиннее —
       гаснет сам закат.                                        */
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0.0%, rgba(0,0,0,.02) 5.88%, rgba(0,0,0,.09) 11.76%, rgba(0,0,0,.22) 17.64%, rgba(0,0,0,.40) 23.1%, rgba(0,0,0,.60) 28.56%, rgba(0,0,0,.78) 33.6%, rgba(0,0,0,.91) 37.8%, rgba(0,0,0,1) 42.0%, #000 44.0%);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0.0%, rgba(0,0,0,.02) 5.88%, rgba(0,0,0,.09) 11.76%, rgba(0,0,0,.22) 17.64%, rgba(0,0,0,.40) 23.1%, rgba(0,0,0,.60) 28.56%, rgba(0,0,0,.78) 33.6%, rgba(0,0,0,.91) 37.8%, rgba(0,0,0,1) 42.0%, #000 44.0%);
  }
  /* Содержимое витрины лежит поверх снимка. */
  .lp-band, .lp-grid, .lp-foot{ position:relative; z-index:1; }
  /* Нижняя строка на своём чёрном — снимок обрывается на её черте. */
  .lp-foot{ background:#000; }
}

/* Снимок теперь идёт сплошным полотном, и старые разделительные
   линии режут его поперёк. Убраны две: золотая черта под полосой
   слогана и верхняя граница витрины. Черта над нижней строкой
   оставлена — по ней снимок и обрывается.                       */
@media (min-width:981px){
  /* Гасим цвет, а не саму границу: убрать `border` — значит забрать
     два пикселя высоты, и вся витрина уедет вниз.                */
  .lp{ border-top-color:transparent; }
  .lp-band{ border-bottom-color:transparent; }
}

/* Стык первого экрана и витрины. У подложки первого экрана снизу
   справа стояло тёплое пятно, а у витрины — своё, другой формы.
   Пока низ закрывала плотная полоса-фото, стыка не было видно;
   на цельном снимке верх полупрозрачный, и разница подложек
   проступила ровной горизонтальной полосой. Убираем нижнее пятно
   у первого экрана и оба у витрины: под снимком с обеих сторон
   один и тот же ровный #050403, границы больше нет. Верхнее сияние
   над именем MONTERO не тронуто.                                */
@media (min-width:981px){
  .hero-bg{
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(58,38,20,.34), transparent 62%),
      #050403;
  }
  .lp{ background:#050403; }
}

/* Снимок начинается ровно под нижней чертой рамки заявления. */
@media (min-width:981px){ .lp::before{ top:-8.5svh; } }

/* ══════════ ТЕЛЕФОН: КНОПКА «СВЯЗАТЬСЯ С НАМИ» НИЖЕ ══════════

   Владелец отметил точкой на скриншоте уровень, куда должна опуститься
   кнопка со своей чертой: примерно две трети пути от прежнего места до
   полосы цифр. Двигаем отступами, а не transform'ом — у .hero-act есть
   класс reveal, а он сам держит transform и при появлении сбросил бы
   любой наш сдвиг.

   Отступ сверху растёт на --drop, снизу ровно на столько же уходит в
   минус: собственная высота .hero-in не меняется, поэтому знак MONTERO
   и рамка заявления остаются на прежнем месте, а вниз съезжает только
   кнопка.

   Шаг привязан к высоте окна. Фиксированные 110px, снятые с телефона
   владельца, на коротком экране прижали бы кнопку к полосе цифр
   вплотную; формула держит одну и ту же долю просвета на 690, 740,
   844 и 932 пикселях высоты. max() страхует от отрицательного сдвига
   на совсем низком окне.

   Правило целиком внутри max-width:980px — на компьютере .hero-act
   и без того display:none, задеть широкий экран нечем.            */
@media (max-width:980px){
  /* Заявление стало крупнее и заняло три строки — владелец разрешил
     приспустить кнопку, чтобы группе было просторнее. Свободный член
     118 -> 100: это около восемнадцати пикселей вниз на любом экране.
     Знак идёт следом, просвет между ним и кнопкой задан через тот же
     --drop и потому не меняется.                                   */
  .hero-in{ --drop:max(0px, calc(30svh - 100px)); }
  .hero-act{
    margin-top:calc(100px + var(--drop));
    margin-bottom:calc(var(--drop) * -1);
  }
}

/* ══════════ ТЕЛЕФОН: ЗНАК ОПУЩЕН К КНОПКЕ ══════════

   Владелец начертил на скриншоте линию: низ рамки заявления должен
   сесть на неё. По замеру снимка это 198px на экране 430x932 — около
   трёх четвертей просвета, который оставался между рамкой и кнопкой.
   Содержимое первого экрана собирается внизу, а верхняя треть уходит
   в чистый чёрный.

   Тот же приём, что и с кнопкой: сколько прибавили сверху, столько же
   снимаем снизу. Знак съезжает вниз, а всё, что идёт после него, —
   кнопка, полоса цифр, вся страница — остаётся на прежнем месте,
   потому что собственная высота .hero-in не меняется.

   Горизонтальные auto сохраняем: без них знак уедет от центра.

   Шаг в долях высоты окна, а не в пикселях: просвет между рамкой и
   кнопкой на низком телефоне меньше, и жёсткие 198px посадили бы знак
   кнопке на голову.                                              */
@media (max-width:980px){
  /* Знак опускается не на «столько-то пикселей», а до самой кнопки:
     сдвиг равен всей отбивке над ней минус 6px просвета. Отсюда два
     следствия. Во-первых, ниже уже некуда — владелец просил опустить
     ещё, и это остаток. Во-вторых, просвет ровно 6px на любом экране,
     поэтому ни на 320, ни на 430 рамка не наедет на кнопку: раньше
     доля от высоты окна на маленьком телефоне давала перехлёст.

     Сколько прибавили сверху — столько же сняли снизу, поэтому кнопка,
     полоса цифр и высота страницы не двигаются.                    */
  .hero-in{ --lock-drop:calc(100px + var(--drop) - 6px); }
  .hero-in .lockup{ margin:var(--lock-drop) auto calc(var(--lock-drop) * -1); }
}

/* ══════════ ТЕЛЕФОН: БУКВА М НАД ЗНАКОМ ══════════

   Верхняя треть первого экрана после опускания знака осталась пустой.
   Владелец попросил занять её одной буквой M из фирменного знака —
   без слова MONTERO и без строки PRIVATE CONCIERGE. Буква вырезана из
   mark.png по альфа-каналу и увеличена втрое: на экране с тройной
   плотностью точек исходных 432 пикселей не хватало, край мылился.

   Цепляем к самому знаку, а не к первому экрану: bottom:100% ставит
   букву ровно над словом MONTERO, и она едет вместе с ним при любой
   высоте окна. Получается та же композиция, что на визитке — M сверху,
   MONTERO под ней.

   Ширина ограничена и по экрану, и по его высоте: 86vw не даёт букве
   упереться в поля на широком телефоне, 52svh — налезть на шапку на
   низком. Абсолютное положение, поэтому в поток буква не входит и
   ничего под собой не двигает.                                     */
@media (max-width:980px){
  .hero-in .lockup{ position:relative; }
  .hero-in .lockup::before{
    content:'';
    position:absolute; bottom:100%; left:50%; translate:-50% 0;
    width:min(73.5vw, 44.5svh); aspect-ratio:432 / 352;   /* размер подобран владельцем: −10%, затем ещё −5% */
    margin-bottom:2svh;
    background:url("../img/mark-letter.png?v=23e12377") center / contain no-repeat;
    pointer-events:none;
  }
}

/* ══════════ ТЕЛЕФОН: MONTERO ПОД ШИРИНУ БУКВЫ M ══════════

   Слово выключается ровно по краям буквы над ним и набирается на 5%
   крупнее. Разрядка не подобрана на глаз, а посчитана: собственная
   ширина слова без разрядки — 5.34 кегля (замерено, величина одна и
   та же на любом экране), между семью буквами шесть просветов, а
   последний просвет уходит за хвост строки. Отсюда

       разрядка = (ширина буквы M − 5.34em) / 6

   и то же значение уходит в text-indent: он гасит висящий просвет
   после последней буквы, иначе слово встанет левее середины.

   Ширина буквы взята той же формулой, что у самой буквы, вместе с
   ограничением по высоте окна — иначе на планшете, где буква упирается
   в высоту, слово оказалось бы шире неё.                            */
@media (max-width:980px){
  .hero-in .lk-name{
    font-size:clamp(31.5px, 7.875vw, 157.5px);
    /* Интерлиньяж был равен кеглю, и от прибавки в 5% строка стала бы
       на столько же выше — знак вырос бы, а за ним поехала бы буква M
       над ним. Делим интерлиньяж на те же 1.05: коробка строки остаётся
       прежней высоты, растут только сами буквы.                     */
    line-height:0.95238;
    letter-spacing:calc((min(73.5vw, 44.5svh) - 5.34em) / 6);
    text-indent:calc((min(73.5vw, 44.5svh) - 5.34em) / 6);
  }
}

/* ══════════ ТЕЛЕФОН: БУКВА M ПО ЦЕНТРУ ПУСТОТЫ ══════════

   Буква висит над словом MONTERO, а нужно, чтобы она стояла ровно
   посередине между шапкой и словом. Отступ снизу для этого не
   постоянный: пустота зависит и от высоты окна, и от его ширины —
   ширина задаёт кегль знака, а значит и его высоту.

   Разобрал первый экран по коробкам: сдвиг знака и сдвиг кнопки в
   выражении сокращаются, и остаётся зависимость только от размеров
   окна. Проверено замером на 320x690, 360x740, 375x667, 390x768,
   390x844, 412x915, 414x896 и 430x932 — расхождение с истинным
   центром меньше пикселя.

   Только до 520px: выше начинают срабатывать ограничители кегля,
   зависимость ломается, и на планшете буква остаётся на прежнем
   месте — там пустоты меньше и центровать нечего.                */
@media (max-width:520px){
  .hero-in .lockup::before{
    /* Пересчитано после того, как заявление стало крупнее и заняло
       три строки: знак вырос, пустота над ним уменьшилась. Затем
       строка снова стала одной, знак укоротился, и пустота выросла:
       86 -> 79.4. Проверено на восьми размерах. */
    margin-bottom:max(0px, calc(39.25svh - 35.86vw - 79.4px));
  }
}

/* ══════════ ТЕЛЕФОН: РАМКА ЗАЯВЛЕНИЯ КРУПНЕЕ ══════════

   Владелец попросил сделать заявление вместе с рамкой немного больше.
   Все размеры внутри неё выражены долями --lk: поля, кегль строки,
   просвет между строками и точка на верхней грани. Умножаем каждую
   долю на 1.08 — рамка растёт целиком и пропорционально, а не только
   текст внутри.

   Рамка стала выше на 8% своей высоты (толщина линии не в счёт — она
   остаётся волосяной). Этот прирост гасим поровну: половину снимаем
   с верхней отбивки, половину уводим в минус снизу. Итог — высота
   знака прежняя, поэтому буква M над ним остаётся по центру пустоты,
   а кнопка и полоса цифр не двигаются. Коэффициент .0632 — это
   половина прироста в долях --lk, посчитана по коробке и проверена
   на 320, 390 и 430.                                              */
@media (max-width:980px){
  .hero-in .lk-claim{
    padding-block:calc(var(--lk) * .3856);
    padding-inline:calc(var(--lk) * .567);
    gap:calc(var(--lk) * .1814);
    /* Прирост высоты гасим не поровну, а 40% сверху и 60% снизу: над
       рамкой всего пятнадцать пикселей до строки CONCIERGE SERVICE, а
       под ней до надписи на кнопке — двадцать четыре. Сумма поправок
       по-прежнему равна приросту, поэтому высота знака не меняется. */
    /* Отрицательный отступ снизу был нужен, пока рамка была в две
       строки: он гасил прирост высоты. С тремя строками он посадил
       рамку на кнопку — просвет упал до нуля. Снимаем его, и нижняя
       грань рамки снова совпадает с низом знака, до которого от
       кнопки выдержаны те же 6px.                                 */
    margin-top:calc(var(--lk) * .46);
    margin-bottom:0;
  }
  /* Кегль строки поднят ещё на 8% сверх общего увеличения рамки, а цвет
     сменён с пергаментного на чистый белый — тот же, что у надписи на
     кнопке «Связаться с нами». Насыщенность у них и так одинаковая,
     600; плотнее кнопка выглядела именно за счёт размера и белизны. */
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .40); color:#fff; }
  .hero-in .lk-dot{ font-size:calc(var(--lk) * .3402); }
}
@media (max-width:560px){
  .hero-in .lk-claim{ padding-inline:calc(var(--lk) * .3856); }
}

/* ══════════ ЗАЯВЛЕНИЕ: СИЯЮЩАЯ ЗОЛОТАЯ РАМКА ══════════

   Рамка была белой: правило ниже по файлу перебивало прежнее золото.
   Владелец прислал образец цвета — светлое шампанское золото, и просил
   не плоскую линию, а сияющую. Поэтому кроме самого цвета добавлено
   свечение: наружное мягкое и лёгкое внутреннее. Линия при этом
   остаётся волосяной.

   --lk-line задаётся на самой рамке, а не на знаке: этой переменной
   рисуются сразу три вещи — боковые и нижняя грани, верхняя черта
   (она сделана градиентом фона) и точка на ней. Один цвет — и все
   три меняются согласованно.                                      */
.hero-in .lk-claim{
  --lk-line:#EFDBA6;
  border-color:#EFDBA6;
  box-shadow:0 0 20px rgba(239,219,166,.20),
             inset 0 0 26px rgba(239,219,166,.05);
}
.hero-in .lk-dot{ box-shadow:0 0 10px rgba(239,219,166,.7); }

/* ══════════ ЗАЯВЛЕНИЕ НА КОМПЬЮТЕРЕ: ОДНА СТРОКА И КРУПНЕЕ ══════════

   Владелец попросил на широком экране собрать заявление в одну строку и
   поднять кегль. Рамка внутри — колонка из двух блоков; разворачиваем её
   в ряд и запрещаем перенос, отбивку между половинами задаём в долях
   кегля, чтобы она росла вместе с ним.

   Замер: строка целиком занимает 923px при окне 1920 и 745px при 1280 —
   запас по ширине больше половины экрана, поэтому увеличение кегля на
   четверть в неё укладывается.

   Кегль поднят с .285 до .35 доли --lk. Пропорционально подняты и два
   правила для низких экранов ноутбука: там заявление ужимается, иначе
   первый экран вместе с витриной не влезает в высоту окна.          */
@media (min-width:981px){
  /* Владелец вернул две строки: сверху вся фраза целиком, снизу
     «на одном номере телефона». Рамка снова колонка — базовое правило,
     поэтому здесь остаётся только кегль и запрет переноса: первая
     строка обязана быть неразрывной. Запас есть — при окне 1906 она
     занимает 855px из 1302px свободных внутри рамки. */
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .35); }
  html[lang="ru"] .hero-in .lk-claim b{ white-space:nowrap; }
}
@media (min-width:981px) and (max-height:1000px){
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .295); }
}
@media (min-width:981px) and (max-height:820px){
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .258); }
}

/* Совсем низкое окно ноутбука: две строки вместо одной прибавили
   рамке около сорока пикселей, и на высоте 620 витрина переставала
   садиться на нижний край. Кегль здесь ужимаем — только ниже 640,
   выше этого запаса хватает. */
@media (min-width:981px) and (max-height:640px){
  .hero-in .lk-claim b{ font-size:calc(var(--lk) * .225); }
}

/* ══════════ ТЕЛЕФОН: ПЕРВАЯ СТРОКА ЦЕЛИКОМ ══════════

   Владелец захотел ту же разбивку, что и на компьютере: вся фраза
   одной строкой, «на одном номере телефона» — под ней. На телефоне
   это упирается в физику: в строке 51 знак, а внутри рамки при
   экране 390 остаётся 325px. Кегль поэтому считается от ширины
   экрана, а не от знака.

   Разрядка на телефоне срезана с .07em до .02em — только она и
   освобождает те 10%, без которых строка не влезала бы вовсе.
   Коэффициенты подобраны замером: строка равна 31.1 своего кегля,
   свободная ширина — 0.833 ширины экрана выше 400px и 0.81 ниже
   (там поля первого экрана фиксированные, 20px, а не 5%). Отсюда
   два порога; в обоих оставлен запас около 4% на случай, если
   шрифт не догрузится и метрики поедут.                          */
/* Только для русского. Переводы длиннее: португальская строка при
   экране 390 требует 380px против 323px свободных, и в неразрывном
   виде она вылезала за край экрана вместе с рамкой. Остальные языки
   переносятся, как переносились до этого. */
@media (max-width:980px){
  html[lang="ru"] .hero-in .lk-claim b{
    white-space:nowrap; letter-spacing:.02em; text-indent:.02em;
  }
}
@media (max-width:560px){
  html[lang="ru"] .hero-in .lk-claim b{ font-size:2.730vw; line-height:1.238; }
  html[lang="ru"] .hero-in .lk-claim{ padding-inline:calc(var(--lk) * .18); }
}
@media (max-width:400px){
  html[lang="ru"] .hero-in .lk-claim b{ font-size:2.659vw; line-height:1.237; }
}
@media (max-width:560px){
  html[lang="ru"] .hero-in .lk-claim b{ letter-spacing:.015em; text-indent:.015em; }
}

/* Оптическая центровка строк в рамке. Поля сверху и снизу равны, но
   буквы всё равно сидят высоко: под строкой остаётся место под
   выносные элементы, которых в прописных нет. Замер по пикселям при
   390 и 430 дал перекос около .16 кегля — половину этого забираем
   снизу и отдаём наверх. Сумма поправок нулевая, поэтому высота
   рамки не меняется: буква M над знаком и просвет до кнопки
   остаются на своих местах. */
@media (max-width:980px){
  .hero-in .lk-claim{
    padding-top:calc(var(--lk) * .3856 + .21vw);
    padding-bottom:calc(var(--lk) * .3856 - .21vw);
  }
}

/* ══════════ ВИТРИНА: СТЕКЛЯННАЯ ПОЛОСА ПОД ТЕКСТОМ ══════════

   Владелец показал приём с матовым стеклом и попросил такую же
   подложку под витрину — полосой от края до края экрана.

   Смысл приёма не в прозрачности, а в размытии: backdrop-filter
   расфокусирует снимок под полосой, поэтому текст читается, а фото
   остаётся живым. Одной прозрачной заливкой этого не добиться.

   Ширину считать не нужно: на компьютере --shell равен 100%, и
   .lp-grid и так занимает всю страницу. Приём с 100vw был бы даже
   вреден — он считается вместе с полосой прокрутки.

   ── Где у полосы верх ──────────────────────────────────────────
   Верхняя грань идёт не по краю сетки, а по верху прописных в
   заголовках «Ваше время» и «Один номер». Между краем сетки и этой
   линией лежит скрытая строка рубрики (.lp-label, visibility:hidden
   — место занимает) и отбивки: 68–98px в зависимости от окна, сумма
   полудюжины clamp'ов из разных медиазапросов. Повторить её числом
   в CSS нельзя, а трюк со статической позицией не проходит: если у
   абсолютного блока заданы и bottom, и высота auto, браузер по
   спецификации берёт высоту из содержимого (у пустой псевдострочки
   это ноль) и решает уравнение относительно top — полоса
   схлопывается в линию у нижнего края.

   Поэтому смещение считает скрипт в app.js и кладёт в
   --lp-glass-top. Запасное значение 72px — на случай, если скрипт
   не отработал: при большинстве окон это почти точное попадание. */
@media (min-width:981px){
  .lp-grid::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    top:calc(var(--lp-glass-top, 72px) - 64px); left:0; right:0; bottom:0;
    /* Заливка светлее исходной: владелец попросил, чтобы полоса
       читалась заметнее и не была почти прозрачной. Сверху широкий
       блик, ниже ровная вуаль; чёрная подложка оставлена совсем
       лёгкой, чтобы белый текст не терял контраст. */
    background:linear-gradient(180deg,
      rgba(255,255,255,.075) 0%, rgba(255,255,255,.055) 100%),
      rgba(0,0,0,.055);
    -webkit-backdrop-filter:blur(28px) saturate(1.22);
            backdrop-filter:blur(28px) saturate(1.22);
    border-bottom:1px solid rgba(255,255,255,.11);
    /* Верхняя грань растворяется. Резкой её делала не столько
       черта, сколько само размытие: backdrop-filter обрывается по
       краю блока, и снимок скачком из резкого становился мягким.
       Маска гасит весь слой целиком — вместе с размытием, — поэтому
       переход идёт постепенно. Ступени идут по мягкой кривой:
       ровный градиент на такой площади даёт видимые полосы.

       Блок начинается на 64px выше линии прописных, и ровно на
       этой линии маска выходит на единицу. То есть под заголовками
       стекло уже в полную силу, а всё, что выше, — плавное
       появление из ничего. Черты сверху больше нет. */
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0px, rgba(0,0,0,.03) 12px, rgba(0,0,0,.12) 24px,
      rgba(0,0,0,.30) 34px, rgba(0,0,0,.55) 44px, rgba(0,0,0,.77) 52px,
      rgba(0,0,0,.93) 58px, rgba(0,0,0,1) 64px);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0px, rgba(0,0,0,.03) 12px, rgba(0,0,0,.12) 24px,
      rgba(0,0,0,.30) 34px, rgba(0,0,0,.55) 44px, rgba(0,0,0,.77) 52px,
      rgba(0,0,0,.93) 58px, rgba(0,0,0,1) 64px);
  }
}

/* ══════════ ВИТРИНА: СЛОГАН ВЫШЕ НА САНТИМЕТР ══════════

   Владелец попросил приподнять блок «Ваше время. Наша
   ответственность.» с часами на сантиметр, а затем ещё на пять
   миллиметров — итого полтора сантиметра, и ничего вокруг не
   тронуть. Двигаем свойством translate, а не отступами: сдвиг
   трансформацией вообще не участвует в раскладке, поэтому высота
   полосы, положение витрины и всё остальное остаются нетронутыми
   по определению, а не по расчёту.

   translate, а не transform: у слогана и часов внутри свои классы
   reveal, и transform там занят анимацией появления. Отдельное
   свойство translate с ней не конфликтует.                       */
@media (min-width:981px){
  .lp-band-in{ translate:0 -1.5cm; }
}

/* ══════════ ТЕЛЕФОН: НАДПИСЬ НА КНОПКЕ — СЛИВОЧНОЕ ЗОЛОТО ══════════

   Владелец прислал образец цвета для надписи «Связаться с нами».
   Цвет снят с картинки на глаз — #F0E3B4, светлое сливочное золото,
   чуть светлее той рамки заявления (#EFDBA6), что стоит над кнопкой.

   Правило только для телефона; на компьютере надпись остаётся белой.
   Ховер перекрыт отдельно: на тачскрине он залипает после нажатия,
   и без этого буквы после касания вернулись бы к белому.     */
@media (max-width:980px){
  .hero-in .hero-act .btn,
  .hero-in .hero-act .btn span,
  .hero-in .hero-act .btn:hover,
  .hero-in .hero-act .btn:hover span{ color:#F0E3B4; }
}

/* ══════════ ТЕЛЕФОН: КНОПКА-КАПСУЛА ══════════

   Владелец прислал образец кнопки и попросил повторить один в один:
   капсула со скруглением до полукруга, тёмная заливка чуть светлее
   фона, тонкая тёплая рамка и мягкая тень снизу. Прежняя светящаяся
   черта под словами тут не нужна — гасим её.

   Заливка задана полупрозрачным белым, а не готовым цветом: под
   кнопкой живёт тёплая подложка первого экрана, и процент от неё
   даёт ровно тот же тон, что на образце, но не спорит с фоном при
   любой его правке.

   Высота кнопки не тронута — она задана отдельными правилами под
   разные высоты экрана. Значит раскладка не сдвинулась: буква M над
   знаком и полоса цифр остаются на своих местах.                */
@media (max-width:980px){
  .hero-in .hero-act .btn{
    /* Рамки нет вообще. Разобрал образец по пикселям: сверху и слева
       заливка переходит в фон без всякой линии, а тёплая черта идёт
       только по низу и правому боку — это не бордюр, а тень со
       смещением вправо-вниз и отрицательным разбросом. Обводка,
       которую я поставил раньше, — как раз то, чего быть не должно. */
    border:0;
    border-radius:999px;
    background:#181B1E;
    box-shadow:2px 2px 4px -2px #828065;
  }
  .hero-in .hero-act .btn:hover{
    background:#1D2124;
    box-shadow:2px 2px 5px -2px #9B9878;
  }
  .hero-in .hero-act .btn::after,
  .hero-in .hero-act .btn:hover::after{ display:none; }
}

/* ══════════ ТЕЛЕФОН: ЕДИНОЕ СЛИВОЧНОЕ ЗОЛОТО ══════════

   Владелец прислал образец и попросил перевести на него всё золото и
   всю желтизну телефонной версии. Цвет снят с картинки на глаз —
   #F0E3B4. Компьютер не трогаем: правило целиком внутри медиазапроса.

   Основная масса золота идёт через --amber (двадцать пять мест:
   рубрики разделов, номера услуг, ссылки «подробнее», цифры в полосе
   направлений, подписи). Достаточно переопределить переменную.

   Отдельно ниже перекрыты места, где золото вписано числом: там оно
   набрано градиентом «светлый блик — глубокая тень», и одной
   переменной их не достать. Металлическую структуру сохранил, просто
   сдвинул всю семью в сливочную сторону: если захочется плоского
   цвета без перелива — скажи, уберу переходы.                    */
@media (max-width:980px){
  :root{ --amber:#F0E3B4; --amber-dim:#F0E3B4; }

  /* Подпись под названием услуги */
  .svc-tag{ color:#F0E3B4; }
  @supports (-webkit-background-clip:text) or (background-clip:text){
    /* Только background-image. Сокращённое background сбрасывает
       background-clip к border-box, и градиент, которым набраны сами
       буквы, вылезает сплошной плашкой поверх строки. */
    .svc-tag{
      background-image:linear-gradient(180deg,
        #FBF4DC 0%, #F0E3B4 26%, #DCCB92 58%, #C7B67C 82%, #F5EBC6 100%);
    }
  }

  /* Кнопка отправки заявки — главное действие страницы */
  .rf-submit{
    background:linear-gradient(150deg, #F7EDCB 0%, #F0E3B4 22%, #DCCB92 48%,
                                       #F0E3B4 72%, #CBBA80 100%);
  }
  .rf-submit:hover{
    background:linear-gradient(150deg, #FDF8E6 0%, #F5EBC6 22%, #E6D8A6 48%,
                                       #F7EDCB 72%, #DCCB92 100%);
  }

  /* Три круглые кнопки прямой связи: кольцо набрано градиентом */
  .direct-btn{
    background:
      linear-gradient(#0C0C0D, #0C0C0D) padding-box,
      linear-gradient(150deg, #F5EBC6 0%, #DCCB92 26%, #C7B67C 52%,
                              #F0E3B4 74%, #C7B67C 100%) border-box;
    box-shadow:
      inset 0 0 0 3px #0C0C0D,
      inset 0 0 0 4px rgba(240,227,180,.65),
      0 8px 22px rgba(0,0,0,.45);
  }
  .direct-btn:hover{
    box-shadow:
      inset 0 0 0 3px #0C0C0D,
      inset 0 0 0 4px rgba(240,227,180,.95),
      0 10px 26px rgba(0,0,0,.5),
      0 0 18px rgba(240,227,180,.35);
  }

  /* Рамка снимка в полосе направлений */
  .band-plate{ border-color:rgba(240,227,180,.22); }

  /* Рамка заявления на первом экране и точка на её верхней грани */
  .hero-in .lk-claim{
    --lk-line:#F0E3B4;
    border-color:#F0E3B4;
    box-shadow:0 0 20px rgba(240,227,180,.20),
               inset 0 0 26px rgba(240,227,180,.05);
  }
  .hero-in .lk-dot{ box-shadow:0 0 10px rgba(240,227,180,.7); }

  /* Кнопка «Связь 24/7» в шапке — по прямой просьбе владельца */
  .nav-right > .btn,
  .nav-right > .btn span,
  .nav-right > .btn:hover,
  .nav-right > .btn:hover span{ color:#F0E3B4; }
  .nav-right > .btn{ border-color:rgba(240,227,180,.55); }
  .nav-right > .btn:hover{ border-color:#F0E3B4; }
}

/* Продолжение сливочного золота: места, где цвет вписан числом, а не
   переменной. Собраны отдельным блоком, чтобы видеть их списком. */
@media (max-width:980px){
  .label,
  .label i,
  .band-num,
  .conc-sig-t b,
  .st-n,
  .legal-upd,
  .drawer-links a.hot span{ color:#F0E3B4; }

  /* Курсивные вставки в заголовках набраны золотым переливом */
  h1 .em{ background-image:linear-gradient(96deg,
    #FBF6E6 0%, #F5EBC6 34%, #F0E3B4 62%, #FAF4E2 100%); }
  h2 .em{ background-image:linear-gradient(96deg,
    #FBF6E6 0%, #F5EBC6 38%, #F0E3B4 66%, #FAF4E2 100%); }
}

/* ══════════ ТЕЛЕФОН: CONCIERGE SERVICE КРУПНЕЕ И ПЛОТНЕЕ ══════════

   Строка под названием была набрана 7.7px при экране 390 — мельче
   всего на первом экране. Поднимаем кегль на 30% и переводим в
   полужирное: у Cinzel начертание 600 настоящее, оно подгружается
   вместе с обычным, поэтому браузеру не приходится подделывать.

   Интерлиньяж делим ровно на тот же коэффициент: строчное поле
   остаётся прежней высоты, а значит высота знака не меняется —
   буква M над ним и просвет до кнопки стоят на месте. Прописным
   тесно не станет: капитель занимает семь десятых кегля.        */
@media (max-width:980px){
  .hero-in .lk-sub em{
    font-size:calc(var(--lk) * .3055);
    line-height:.769;
    font-weight:600;
  }
}

/* ══════════ ТЕЛЕФОН: КАПСУЛА ПО ТЕКСТУ И НЕОНОВАЯ ЧЕРТА ══════════

   Владелец обвёл на скриншоте нужный размер кнопки. Замерил обводку:
   218px в ширину при высоте 61 — то есть высота остаётся прежней,
   ужимается только ширина. Надпись занимает 145px, значит поля по
   36px с каждой стороны дают ровно те 217.

   Ширину задаём не числом, а полями: кегль надписи фиксированный,
   поэтому капсула получается одинаковой на любом телефоне, а не
   растягивается вслед за экраном. align-items:center отменяет
   растяжку по ширине, которая шла от общего мобильного правила.

   Светящаяся черта возвращена — та же, что была изначально: белая,
   с тройным ореолом, растворяющаяся к краям. Раньше она жила внутри
   кнопки, у её нижнего края; теперь кнопка узкая, поэтому черта
   вынесена под неё и идёт во всю ширину, как раньше.

   Черта позиционирована абсолютно, поэтому в раскладке не участвует:
   высота блока с кнопкой прежняя, буква M над знаком и полоса цифр
   не двигаются.                                                   */
@media (max-width:980px){
  .hero-in .hero-act{ position:relative; align-items:center; }
  .hero-in .hero-act .btn{ width:auto; padding-inline:36px; }
  .hero-in .hero-act::after{
    content:''; position:absolute; left:14px; right:14px;
    top:calc(100% + 10px); height:1px; pointer-events:none;
    background:linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.45) 14%,
      #FFFFFF 36%, #FFFFFF 64%,
      rgba(255,255,255,.45) 86%, transparent 100%);
    box-shadow:
      0 0 4px rgba(255,255,255,.95),
      0 0 14px rgba(255,255,255,.7),
      0 0 30px rgba(255,255,255,.4);
  }
}

/* Капсула вплотную подходила к рамке заявления — между ними всего
   шесть пикселей, и с заливкой это читается как стык. Ужимаем саму
   кнопку с 60 до 46 пикселей, а освободившиеся четырнадцать отдаём
   отступом сверху: высота блока остаётся ровно шестьдесят, поэтому
   ни знак, ни полоса цифр не двигаются, а над капсулой становится
   двадцать пикселей воздуха вместо шести. Светящаяся черта отмеряна
   от низа блока, значит её положение тоже не меняется.          */
@media (max-width:980px){
  .hero-in .hero-act{ padding-top:14px; }
  .hero-in .hero-act .btn{ height:46px; }
}

/* ══════════ ТЕЛЕФОН: СЛОВО В ЗАГОЛОВКЕ ПОДЧЁРКНУТО ══════════

   Первый заход был капсулой, но владелец нарисовал другое: не кнопка,
   а подчёркивание — линия под словом, которая на концах плавно
   заворачивает вверх короткими крючками. По сути это нижняя половина
   той же капсулы: те же скругления и тот же сливочный цвет, только
   без заливки и без верхней части рамки.

   Сделано отдельным слоем под словом: у него нет верхней грани, а
   нижние углы скруглены, поэтому линия сама уходит вверх по краям.
   Высота слоя и задаёт длину крючков.

   Слой позиционирован абсолютно и в раскладке не участвует, а само
   слово снова стоит в строке заголовка — значит лишней строки, как
   было с капсулой, больше нет.

   Тем же приёмом набран заголовок раздела «Направления» — владелец
   попросил повторить. Компьютера правило не касается.            */
@media (max-width:980px){
  /* Заголовок целиком золотой — по просьбе владельца, не только
     подчёркнутое слово. Правило только для этого раздела: рубрики
     и заголовки остальных разделов остаются белыми. */
  .services .sec-head h2,
  #destinations .sec-head h2,
  #concierge .sec-head h2,
  #request .sec-head h2{ color:#F0E3B4; }
  /* Слово стоит отдельной строкой под «Что мы» — так было в макете
     до всех правок, владелец просил вернуть именно этот разрыв.
     width:fit-content нужен, чтобы блок обнимал слово: иначе
     подчёркивание растянулось бы во всю ширину заголовка. */
  .services .sec-head h2 .h-cap,
  #destinations .sec-head h2 .h-cap,
  #concierge .sec-head h2 .h-cap,
  #request .sec-head h2 .h-cap{
    display:block; width:fit-content; margin:0 auto;
    position:relative;
    color:#F0E3B4;
  }
  .services .sec-head h2 .h-cap::after,
  #destinations .sec-head h2 .h-cap::after,
  #concierge .sec-head h2 .h-cap::after,
  #request .sec-head h2 .h-cap::after{
    content:''; position:absolute; pointer-events:none;
    /* По три пикселя в каждую сторону сверх прежнего — владелец
       просил удлинить подчёркивание примерно на шесть. В em, чтобы
       на любом кегле заголовка вылет был одинаковым по виду. */
    left:-.25em; right:-.25em;
    /* Черта — это низ фигуры, поэтому крючки наращиваются вверх, а
       не вниз: иначе сама линия уезжает от слова, а не подтягивается
       к нему. Верх получается вычитанием высоты.

       Низ считаем от нижней грани строки, а не от верхней. Раньше он
       стоял на .95em от верха — и это работало только там, где
       межстрочник почти равен кеглю. В «Консьерже» заголовок мельче,
       а межстрочник у него 1.2: буквы стоят в строке ниже, чем в
       остальных разделах, и линия, отмеренная сверху, проходила в
       точке под ними — то есть садилась на буквы. Замер: под тремя
       заголовками низ линии не доходил до края строки 0.8 точки, под
       «Консьержем» — 5.3.

       Считаем от нижней грани минус полулидинг — (высота строки
       минус кегль) пополам. Это ровно тот воздух, который межстрочник
       подкладывает под буквы; вычтя его, мы попадаем в низ буквенного
       ящика, где бы он ни оказался. Дальше .03em — тот же просвет,
       что был у трёх заголовков раньше.

       100% здесь — высота самого слова, а у строки в одну строку она
       и есть межстрочник. Слово при этом не двигается: слой стоит
       абсолютно и в раскладке не участвует. */
    bottom:calc((100% - 1em) / 2 + .03em);
    height:.70em;
    border:1.5px solid #F0E3B4; border-top:0;
    border-radius:0 0 .42em .42em;
    /* Кончики сведены на нет. Бордюр везде одной толщины, сузить
       его к концам нельзя — поэтому гасим маской: к верху крючка
       линия растворяется, и он читается как остриё иглы. Ступени
       по мягкой кривой, иначе виден стык. */
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 16%, rgba(0,0,0,.20) 30%,
      rgba(0,0,0,.42) 44%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.88) 72%, #000 84%);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 16%, rgba(0,0,0,.20) 30%,
      rgba(0,0,0,.42) 44%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.88) 72%, #000 84%);
  }
}


/* ── Направления: в слоте номера теперь страна ─────────────────────
   Место, где стояли «01…04», занято названием страны. Разрядка .28em
   у одиннадцатипиксельного каптеля рассчитана на прописные, поэтому
   слово переводим в капс — иначе строчные в такой растяжке рассыпаются.
   Четвёртая карточка называет не один город, а две страны: две пары
   «страна + столица», и города в ней тоже прописными, чтобы карточка
   читалась как перечень, а не как ещё одно направление.            */
.band-num{ text-transform:uppercase; }
.band-col-two h3{ text-transform:uppercase; }
.band-col-two .band-num-2{ margin-top:clamp(30px,2.6vw,34px); }

/* Кадр Аргентина + Парагвай — вертикальный диптих: два города,
   разделённые золотой диагональю из угла в угол. Снимок снят под
   рамку направлений, 4:5, поэтому карточка встаёт вровень с
   соседними и на широком экране, и на телефоне.                 */
#destinations .band-plate-arpy{ aspect-ratio:4/5; max-height:none; }

/* Подпись в подвале — «Время — высшая форма роскоши…» — на телефоне
   тоже золотом: это последняя строка страницы и она держит ту же ноту,
   что и заголовки разделов.                                        */
@media (max-width:980px){
  .foot-brand{ color:#F0E3B4; }
}

/* На телефоне карточка Аргентина + Парагвай встаёт в тот же размер,
   что и три бразильских: 16:10. Вертикальный кадр режется по высоте
   вдвое, и доли стран в окне задаёт единственная величина — где
   диагональ пересекает среднюю строку окна. Диагональ идёт из угла
   в угол, поэтому ровно пополам делит только окно, выставленное по
   центру снимка: 50%. Любой сдвиг вверх отдаёт площадь Аргентине. */
@media (max-width:720px){
  #destinations .band-plate-arpy{ aspect-ratio:16/10; }
  #destinations .band-plate-arpy .media{ object-position:center 50%; }
}