:root {
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Manrope", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
.editorial-title,
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

.brand,
.language-switcher,
.menu-button,
.tagline,
.services,
p,
button,
a,
nav {
  font-family: var(--font-sans);
}
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: #f8f7f4;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 34px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.brand {
  font-size: 17px;
  letter-spacing: 0.28em;
}

.menu-button {
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 100%;
  height: 1px;
  background: #111;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
}

.hero-inner {
  text-align: center;
}

.symbol {
  font-size: 70px;
  line-height: 1;
  margin-bottom: 24px;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 0.24em;
}

.tagline {
  margin: 44px 0 0;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.services {
  margin: 54px 0 0;
  font-size: 14px;
  letter-spacing: 0.24em;
}

@media (max-width: 800px) {
  .site-header {
    padding: 24px;
  }

  h1 {
    font-size: 40px;
  }

  .tagline {
    font-size: 18px;
  }

  .services {
    line-height: 2;
  }
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 28px;
}

.language-switcher button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;

  color: #999;
  cursor: pointer;

  transition: color 0.25s ease;
}

.language-switcher button:hover {
  color: #111;
}

.language-switcher button.active {
  color: #111;
}

.header-actions {
  display: flex;
  align-items: center;
}
.hero-logo {
  position: relative;
  top: -18px;
}

/* ALEZERIA base paper texture */
body {
  background-color: #f7f6f3;
  background-image:
    linear-gradient(
      rgba(247, 246, 243, 0.85),
      rgba(247, 246, 243, 0.85)
    ),
    url("../images/alezeria-paper-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ==============================
   SCREEN 02
   ============================== */

.screen-02 {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 145px 8.2vw 90px;
  overflow: hidden;
}

.screen-02-top {
  display: grid;
  grid-template-columns: minmax(500px, 1.08fr) minmax(360px, 0.72fr);
  column-gap: 12vw;
  align-items: start;
}

.screen-02-title {
  margin: 0;
  max-width: 600px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 5.4vw, 88px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: pre-line;
}

.screen-02-right {
  padding-top: 22px;
  max-width: 430px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 21px;
  line-height: 1.48;
}

.screen-02-right p {
  margin: 0 0 37px;
  white-space: pre-line;
}

.s2-dark {
  color: #171717;
}

.s2-muted {
  color: rgba(20, 20, 20, 0.37);
}

.screen-02-bottom {
  margin-top: 115px;
}

.s2-intro {
  margin: 0 0 37px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 21px;
  line-height: 1.52;
  white-space: pre-line;
}

.s2-question {
  margin: 0;
  max-width: 1120px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(68px, 6.15vw, 100px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  white-space: pre-line;
}

.screen-02-arrow {
  position: absolute;
  left: 3.5vw;
  bottom: 42px;
  font-family: Arial, sans-serif;
  font-size: 37px;
  font-weight: 200;
  line-height: 1;
}

.screen-02-number {
  position: absolute;
  right: 4vw;
  bottom: 47px;
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 17px;
  letter-spacing: 0.08em;
}

.screen-02-number-muted {
  color: rgba(20,20,20,.42);
}

@media (max-width: 900px) {
  .screen-02 {
    padding: 125px 28px 100px;
  }

  .screen-02-top {
    grid-template-columns: 1fr;
  }

  .screen-02-right {
    margin-top: 70px;
  }

  .screen-02-bottom {
    margin-top: 100px;
  }

  .screen-02-title {
    font-size: 58px;
  }

  .s2-question {
    font-size: 58px;
  }
}

/* =========================================
   SCREEN STRUCTURE — FINAL SEPARATION
   ========================================= */

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.hero,
.screen-02 {
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Очень тихая физическая граница кадра */
.screen-02 {
  position: relative;
  padding: 150px 8.2vw 82px;
  border-top: 1px solid rgba(20,20,20,.08);
}

/* Собственная подпись второго кадра */
.screen-02-brand {
  position: absolute;
  top: 48px;
  left: 3.4vw;

  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .24em;
  color: #161616;
}

/* Основная верхняя композиция */
.screen-02-top {
  display: grid;
  grid-template-columns: minmax(500px, 1fr) minmax(360px, .72fr);
  column-gap: 13vw;
  align-items: start;
}

.screen-02-title {
  margin: 0;
  max-width: 580px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(68px, 5.2vw, 86px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  white-space: pre-line;
}

.screen-02-right {
  padding-top: 8px;
  max-width: 410px;
}

/* Нижняя смысловая часть */
.screen-02-bottom {
  margin-top: 115px;
}

.s2-intro {
  margin-bottom: 38px;
}

.s2-question {
  max-width: 1080px;
  font-size: clamp(70px, 5.9vw, 96px);
  line-height: .96;
}

/* Нижние системные элементы второго кадра */
.screen-02-arrow {
  left: 3.4vw;
  bottom: 36px;
}

.screen-02-number {
  right: 4vw;
  bottom: 39px;
}

@media (max-width: 900px) {
  html {
    scroll-snap-type: none;
  }

  .hero,
  .screen-02 {
    height: auto;
    min-height: 100vh;
  }

  .screen-02 {
    padding: 130px 28px 100px;
  }

  .screen-02-brand {
    left: 28px;
    top: 38px;
  }
}

/* =========================================
   SCREEN 02 — VIEWPORT FIT
   ========================================= */

.screen-02-brand {
  display: none !important;
}

.screen-02 {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;

  padding:
    clamp(92px, 10.5vh, 115px)
    8.2vw
    clamp(52px, 6vh, 68px);
}

/* Верхняя часть */
.screen-02-top {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) minmax(350px, .72fr);
  column-gap: 13vw;
  align-items: start;
}

.screen-02-title {
  font-size: clamp(62px, 4.8vw, 82px);
  line-height: .96;
}

.screen-02-right {
  padding-top: 4px;
  font-size: clamp(17px, 1.18vw, 20px);
  line-height: 1.45;
}

.screen-02-right p {
  margin-bottom: clamp(24px, 3vh, 34px);
}

/* Нижняя часть */
.screen-02-bottom {
  margin-top: clamp(62px, 8vh, 88px);
}

.s2-intro {
  margin: 0 0 clamp(24px, 3vh, 34px);
  font-size: clamp(17px, 1.18vw, 20px);
  line-height: 1.5;
}

.s2-question {
  max-width: 1080px;
  font-size: clamp(60px, 5.25vw, 88px);
  line-height: .91;
  letter-spacing: -.025em;
}

/* Системные элементы */
.screen-02-arrow {
  left: 3.4vw;
  bottom: 25px;
  font-size: 31px;
}

.screen-02-number {
  right: 4vw;
  bottom: 29px;
  font-size: 15px;
}

/* Граница между 01 и 02 */
.screen-02 {
  border-top: 1px solid rgba(20,20,20,.10);
}


/* Language order: EN DE ES FR RU */
.language-switcher [data-lang="en"] { order: 1; }
.language-switcher [data-lang="de"] { order: 2; }
.language-switcher [data-lang="es"] { order: 3; }
.language-switcher [data-lang="fr"] { order: 4; }
.language-switcher [data-lang="ru"] { order: 5; }



/* =========================================================
   SCREEN 03
   ========================================================= */

.screen-03 {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;

  padding-top: 100px;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  border-top: 1px solid rgba(20,20,20,.10);
}


/* LEFT PHOTO COLUMN */

.screen-03-images {
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 62px;

  width: 52.2%;

  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;

  overflow: hidden;
}

.s3-photo {
  position: relative;
  overflow: hidden;
  background: #222;
}

.s3-photo img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}


/* Individual crop positions */

.s3-photo-architecture img {
  object-position: 55% 56%;
}

.s3-photo-smile img {
  object-position: 50% 37%;
}

.s3-photo-business img {
  object-position: 50% 49%;
}


/* Individual text shadows / gradients */

.s3-photo-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s3-photo-architecture .s3-photo-shade {
  background:
    linear-gradient(
      90deg,
      rgba(10,10,9,.72) 0%,
      rgba(10,10,9,.52) 23%,
      rgba(10,10,9,.12) 49%,
      rgba(10,10,9,0) 68%
    );
}

.s3-photo-smile .s3-photo-shade {
  background:
    linear-gradient(
      90deg,
      rgba(10,10,9,.67) 0%,
      rgba(10,10,9,.45) 24%,
      rgba(10,10,9,.08) 48%,
      rgba(10,10,9,0) 67%
    );
}

.s3-photo-business .s3-photo-shade {
  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.48) 0%,
      rgba(5,5,5,.27) 28%,
      rgba(5,5,5,.05) 50%,
      rgba(5,5,5,0) 69%
    );
}


/* TEXT ON PHOTOS */

.s3-photo-text {
  position: absolute;
  z-index: 2;

  left: 3.6vw;
  top: 50%;
  transform: translateY(-50%);

  width: min(310px, 34%);

  margin: 0;

  white-space: pre-line;

  font-family: Arial, sans-serif;
  font-size: clamp(15px, 1.08vw, 20px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .005em;

  color: rgba(255,255,255,.96);
}


/* RIGHT COLUMN */

.screen-03-copy {
  position: absolute;

  left: 55.1%;
  right: 8.1vw;

  top: 132px;
  bottom: 78px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.s3-copy-block {
  width: min(420px, 100%);
}

.s3-copy-block p {
  margin: 0;

  white-space: pre-line;

  font-family: Arial, sans-serif;
  font-size: clamp(16px, 1.15vw, 21px);
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: .012em;

  color: #161616;
}

.s3-rule {
  width: min(315px, 78%);
  height: 1px;

  background: rgba(20,20,20,.18);
}

.s3-business-copy .s3-muted {
  margin-top: 17px;
  color: rgba(20,20,20,.46);
}

.s3-final {
  padding-bottom: 8px;
}


/* BOTTOM SYSTEM ELEMENTS */

.screen-03-arrow {
  position: absolute;

  left: 3.4vw;
  bottom: 24px;

  font-family: Arial, sans-serif;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;

  color: #111;
}

.screen-03-number {
  position: absolute;

  right: 4vw;
  bottom: 28px;

  display: flex;
  gap: 8px;

  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .05em;

  color: #111;
}

.screen-03-number-muted {
  color: rgba(20,20,20,.42);
}


/* Keep all three screens in snap system */

.hero,
.screen-02,
.screen-03 {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* MOBILE */

@media (max-width: 900px) {

  .screen-03 {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 100px 24px 90px;
  }

  .screen-03-images,
  .screen-03-copy {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .screen-03-images {
    height: 900px;
  }

  .screen-03-copy {
    margin-top: 50px;
    gap: 34px;
  }

  .s3-photo-text {
    left: 28px;
    width: 62%;
  }

  .s3-rule {
    width: 100%;
  }
}


/* SCREEN 03 — smile crop correction */
.s3-photo-smile img {
  object-position: 50% 58%;
}


/* SCREEN 03 — fine tuning */
.screen-03-inner {
  transform: translateX(28px);
}

/* smile photo a bit lower */
.s3-photo-smile img {
  object-position: 50% 54%;
}

/* business owner photo a bit higher and more to the right */
.s3-photo-business img {
  object-position: 60% 42%;
}

/* stronger dark overlay on the left side of the bottom image */
.s3-photo-business {
  position: relative;
  overflow: hidden;
}

.s3-photo-business::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.56) 28%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0.00) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* keep text above overlay */
.s3-photo-business .s3-photo-text {
  position: absolute;
  z-index: 2;
}


/* =========================================
   SCREEN 03 — PHOTO FINE TUNING
   ========================================= */

/* Всю группу из трёх фотографий немного вправо */
.screen-03-images {
  left: 2.2vw;
  width: 50%;
}

/* Улыбку немного ниже в кадре */
.s3-photo-smile img {
  object-position: 50% 52%;
}

/* Нижний кадр: человек выше и правее */
.s3-photo-business img {
  object-position: 50% 46%;
  transform: scale(1.06) translate(2.5%, -3%);
  transform-origin: center center;
}

/* Нижний кадр сильнее затемняем слева */
.s3-photo-business .s3-photo-shade {
  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.68) 0%,
      rgba(5,5,5,.48) 25%,
      rgba(5,5,5,.18) 47%,
      rgba(5,5,5,0) 70%
    );
}


/* SCREEN 03 — second photo crop tuning */

/* Улыбка: лицо немного меньше и правее */
.s3-photo-smile img {
  left: auto;
  right: 0;
  width: 96%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  transform: none;
}

/* Мастерская: человек меньше, выше и правее,
   показываем больше стола и инструментов */
.s3-photo-business img {
  left: auto;
  right: 0;
  width: 95%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
  transform: none;
}

/* Слева сохраняем глубокое затемнение */
.s3-photo-business {
  background: #171411;
}


/* SCREEN 03 — precise photo positioning */

/* УЛЫБКА:
   меньше + правее + немного ниже */
.s3-photo-smile img {
  left: auto;
  right: -1.5%;
  width: 91%;
  height: 100%;
  object-fit: cover;
  object-position: center 49%;
  transform: none;
}

/* МАСТЕРСКАЯ:
   уменьшаем масштаб, человека выше и правее,
   показываем больше стола и инструментов */
.s3-photo-business img {
  left: auto;
  right: -2%;
  width: 89%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: none;
}

/* Левая свободная зона естественно продолжает затемнение */
.s3-photo-smile,
.s3-photo-business {
  background: #151411;
}


/* =========================================================
   SCREEN 03 — FINAL PHOTO TUNING
   ========================================================= */

/* Улыбка:
   ещё немного уменьшаем,
   лицо оставляем правее центра
   и поднимаем выше */
.s3-photo-smile img {
  left: auto;
  right: -1.5%;
  width: 87%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  transform: none;
}

/* Единая тёмная основа для всех трёх кадров */
.s3-photo {
  background: #0b0b09;
}

/* ОДИНАКОВОЕ плавное затемнение для всех фотографий.
   Первые ~14% почти непрозрачны — поэтому граница
   уменьшенного изображения полностью растворяется. */
.s3-photo .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(8, 8, 7, 0.94) 0%,
    rgba(8, 8, 7, 0.90) 10%,
    rgba(8, 8, 7, 0.82) 15%,
    rgba(8, 8, 7, 0.62) 24%,
    rgba(8, 8, 7, 0.38) 34%,
    rgba(8, 8, 7, 0.18) 45%,
    rgba(8, 8, 7, 0.06) 55%,
    rgba(8, 8, 7, 0.00) 65%
  );
}

/* Нижний кадр по положению фиксируем —
   он уже найден правильно */
.s3-photo-business img {
  left: auto;
  right: -2%;
  width: 89%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: none;
}


/* =========================================================
   SCREEN 03 — COLORED FOG + FINAL POSITION
   ========================================================= */

/* Нижнее фото: немного опускаем внутри окна */
.s3-photo-business img {
  object-position: center 56%;
}


/* Убираем прежнее общее затемнение */
.s3-photo .s3-photo-shade {
  backdrop-filter: none;
}


/* 1. АРХИТЕКТУРА
   прохладный серо-оливковый туман */
.s3-photo-architecture .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(39, 43, 36, 0.92) 0%,
    rgba(48, 52, 43, 0.80) 11%,
    rgba(67, 70, 58, 0.58) 23%,
    rgba(94, 96, 80, 0.32) 36%,
    rgba(120, 120, 102, 0.13) 49%,
    rgba(120, 120, 102, 0.00) 64%
  );
}


/* 2. УЛЫБКА
   более плотный тёплый дымчатый слой,
   чтобы белый текст читался увереннее */
.s3-photo-smile .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(49, 45, 37, 0.97) 0%,
    rgba(58, 53, 43, 0.91) 12%,
    rgba(75, 68, 55, 0.78) 23%,
    rgba(94, 84, 67, 0.56) 34%,
    rgba(118, 105, 83, 0.30) 46%,
    rgba(135, 120, 94, 0.11) 57%,
    rgba(135, 120, 94, 0.00) 68%
  );
}


/* 3. МАСТЕРСКАЯ
   глубокий тёплый коричнево-бордовый туман */
.s3-photo-business .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(40, 28, 23, 0.95) 0%,
    rgba(52, 35, 28, 0.86) 11%,
    rgba(70, 45, 34, 0.68) 23%,
    rgba(91, 57, 41, 0.43) 36%,
    rgba(108, 70, 48, 0.20) 49%,
    rgba(108, 70, 48, 0.06) 59%,
    rgba(108, 70, 48, 0.00) 68%
  );
}


/* =========================================================
   SCREEN 03 — SMILE LEFT EDGE SEAM FIX
   ========================================================= */

/* Фоновый цвет под средним фото — в тон леса/теней */
.s3-photo-smile {
  background: #3f392f;
}

/* Само фото мягко проявляется слева:
   физическая вертикальная граница изображения исчезает */
.s3-photo-smile img {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.10) 5%,
    rgba(0,0,0,.32) 10%,
    rgba(0,0,0,.62) 17%,
    rgba(0,0,0,.86) 24%,
    #000 32%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.10) 5%,
    rgba(0,0,0,.32) 10%,
    rgba(0,0,0,.62) 17%,
    rgba(0,0,0,.86) 24%,
    #000 32%
  );
}

/* Средний туман подстраиваем под новый мягкий переход */
.s3-photo-smile .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(58,53,43,.96) 0%,
    rgba(65,59,48,.90) 12%,
    rgba(77,70,56,.73) 24%,
    rgba(94,84,67,.49) 36%,
    rgba(113,101,80,.25) 48%,
    rgba(125,111,88,.08) 60%,
    rgba(125,111,88,0) 70%
  );
}


/* =========================================================
   SCREEN 03 — SMILE GREEN FOG
   ========================================================= */

/* Зеленовато-оливковая основа из палитры верхнего кадра */
.s3-photo-smile {
  background: #4b5143;
}

/* Плавное проявление фотографии слева */
.s3-photo-smile img {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 5%,
    rgba(0,0,0,.25) 10%,
    rgba(0,0,0,.50) 17%,
    rgba(0,0,0,.76) 24%,
    rgba(0,0,0,.92) 30%,
    #000 36%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 5%,
    rgba(0,0,0,.25) 10%,
    rgba(0,0,0,.50) 17%,
    rgba(0,0,0,.76) 24%,
    rgba(0,0,0,.92) 30%,
    #000 36%
  );
}

/* Зеленоватое затуманивание вместо коричневого */
.s3-photo-smile .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(55, 62, 49, .96) 0%,
    rgba(62, 69, 55, .90) 11%,
    rgba(73, 80, 64, .76) 21%,
    rgba(88, 94, 75, .56) 32%,
    rgba(105, 110, 88, .34) 43%,
    rgba(119, 123, 98, .16) 54%,
    rgba(125, 128, 102, .05) 63%,
    rgba(125, 128, 102, 0) 72%
  );
}


/* =========================================================
   SCREEN 03 — FINAL FOG BALANCE
   ========================================================= */


/* ---------------------------------------------------------
   SMILE
   Делаем переход ещё длиннее и естественнее.
   Под текстом туман плотный, после текста быстрее исчезает.
   --------------------------------------------------------- */

.s3-photo-smile img {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 7%,
    rgba(0,0,0,.26) 14%,
    rgba(0,0,0,.55) 22%,
    rgba(0,0,0,.80) 30%,
    rgba(0,0,0,.95) 38%,
    #000 44%
  );

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 7%,
    rgba(0,0,0,.26) 14%,
    rgba(0,0,0,.55) 22%,
    rgba(0,0,0,.80) 30%,
    rgba(0,0,0,.95) 38%,
    #000 44%
  );
}

.s3-photo-smile .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(55,62,49,.96) 0%,
    rgba(59,66,52,.93) 12%,
    rgba(67,74,59,.84) 22%,
    rgba(78,85,68,.68) 30%,
    rgba(91,97,77,.43) 37%,
    rgba(106,111,88,.21) 45%,
    rgba(118,122,97,.08) 52%,
    rgba(125,128,102,0) 59%
  );
}


/* ---------------------------------------------------------
   BUSINESS
   Немного ослабляем только самый левый тёмный участок.
   Остальной кадр и положение человека не меняем.
   --------------------------------------------------------- */

.s3-photo-business .s3-photo-shade {
  background: linear-gradient(
    90deg,
    rgba(40,28,23,.86) 0%,
    rgba(52,35,28,.76) 11%,
    rgba(70,45,34,.64) 22%,
    rgba(91,57,41,.42) 35%,
    rgba(108,70,48,.20) 48%,
    rgba(108,70,48,.06) 59%,
    rgba(108,70,48,0) 68%
  );
}



/* =========================================================
   SCREEN 04 — REAL TAILORING STORY
   ========================================================= */

.screen-04 {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 116px 38px 58px;
  overflow: hidden;
}

.s4-heading {
  position: absolute;
  left: 3.3%;
  top: 13.5%;
  width: 25%;
}

.s4-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 2.65vw, 52px);
  line-height: 0.94;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.s4-stage-nav {
  position: absolute;
  top: 15.4%;
  left: 30.2%;
  width: 40%;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}

.s4-stage-nav-item {
  position: relative;
  font-family: Arial, sans-serif;
  font-size: clamp(10px, .76vw, 13px);
  letter-spacing: .02em;
  color: rgba(17,17,17,.35);
  white-space: nowrap;
}

.s4-stage-nav-item.active {
  color: #111;
}

.s4-stage-nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -17px;
  width: 34px;
  height: 1px;
  background: #111;
}


/* -------- VISUAL STORY -------- */

.s4-story {
  position: absolute;
  left: 3.2%;
  top: 32.5%;
  width: 68.5%;
  height: 50%;
  display: grid;
  grid-template-columns:
    minmax(220px, 1.25fr)
    34px
    minmax(190px, 1fr)
    34px
    minmax(150px, .72fr)
    34px
    minmax(180px, .92fr);
  gap: 10px;
  align-items: stretch;
}

.s4-stage {
  position: relative;
  min-width: 0;
  height: 100%;
}

.s4-flow-arrow {
  align-self: start;
  padding-top: 10px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 29px;
  font-weight: 300;
  color: #222;
}

.s4-photo {
  position: absolute;
  overflow: hidden;
  background: #dedbd3;
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 10px 24px rgba(0,0,0,.025);
}

.s4-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* -------- 01 RESEARCH -------- */

.s4-measurement {
  left: 0;
  top: 7%;
  width: 66%;
  height: 39%;
}

.s4-measurement img {
  object-position: 49% 50%;
}

.s4-fabrics {
  right: 0;
  top: 39%;
  width: 54%;
  height: 26%;
}

.s4-fabrics img {
  object-position: 50% 50%;
}

.s4-note {
  position: absolute;
  box-sizing: border-box;
  background: rgba(239,234,224,.94);
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, .77vw, 14px);
  line-height: 1.4;
  font-style: italic;
  color: #333;
}

.s4-note-1 {
  left: 3%;
  top: 51%;
  padding: 12px 14px;
  transform: rotate(-1.3deg);
}


/* -------- 02 CONNECTION -------- */

.s4-pattern {
  left: 0;
  top: 10%;
  width: 72%;
  height: 42%;
}

.s4-pattern img {
  object-position: 50% 50%;
}

.s4-pinning {
  right: 0;
  top: 38%;
  width: 54%;
  height: 33%;
}

.s4-pinning img {
  object-position: 52% 54%;
}

.s4-note-2 {
  left: 2%;
  top: 60%;
  padding: 12px 14px;
  transform: rotate(.8deg);
}


/* -------- 03 REMOVE -------- */

.s4-cutting {
  left: 8%;
  top: 12%;
  width: 84%;
  height: 55%;
}

.s4-cutting img {
  object-position: 51% 46%;
}


/* -------- 04 CREATE -------- */

.s4-final-photo {
  left: 0;
  top: 6%;
  width: 100%;
  height: 61%;
}

.s4-final-photo img {
  object-position: 52% 50%;
}

.s4-final-line {
  position: absolute;
  left: 5%;
  top: 71%;
  width: 90%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, .88vw, 16px);
  line-height: 1.35;
  color: #222;
}


/* -------- CAPTIONS -------- */

.s4-stage-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: clamp(9px, .65vw, 11px);
  line-height: 1.35;
  letter-spacing: .08em;
  color: rgba(17,17,17,.47);
}


/* -------- RIGHT COPY -------- */

.s4-copy {
  position: absolute;
  top: 24.5%;
  right: 4%;
  width: 19.5%;
  font-family: Arial, sans-serif;
}

.s4-copy-block {
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid rgba(17,17,17,.17);
}

.s4-copy-block h3 {
  margin: 0 0 10px;
  font-size: clamp(11px, .78vw, 14px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .02em;
}

.s4-copy-block p {
  margin: 0;
  font-size: clamp(10px, .72vw, 13px);
  line-height: 1.55;
  color: #222;
}

.s4-ai-copy {
  margin-top: 3px;
  font-size: clamp(9px, .67vw, 12px);
  line-height: 1.55;
  color: #333;
}

.s4-ai-copy p {
  margin: 0 0 10px;
}


/* -------- SCREEN MARKERS -------- */

.screen-04-arrow {
  position: absolute;
  left: 3.3%;
  bottom: 3.4%;
  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}

.screen-04-number {
  position: absolute;
  right: 4%;
  bottom: 3.7%;
  display: flex;
  gap: 8px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  letter-spacing: .04em;
}

.screen-04-number-muted {
  color: rgba(17,17,17,.38);
}


/* -------- SMALLER SCREENS -------- */

@media (max-width: 1100px) {
  .screen-04 {
    min-height: 1100px;
  }

  .s4-heading {
    width: 30%;
  }

  .s4-story {
    width: 66%;
    grid-template-columns:
      minmax(170px, 1.2fr)
      22px
      minmax(155px, 1fr)
      22px
      minmax(125px, .72fr)
      22px
      minmax(145px, .9fr);
  }

  .s4-copy {
    width: 21%;
  }
}

/* =========================================================
   SCREEN 04 — SCROLL SNAP FIX
   ========================================================= */

.screen-04 {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}



/* =========================================================
   SCREEN 04 — PROPORTIONS / HIERARCHY TUNING
   ========================================================= */

/* Немного расширяем всю визуальную историю */
.s4-story {
  left: 3.2%;
  width: 70.5%;

  /* 01–03 компактнее, 04 заметно крупнее */
  grid-template-columns:
    minmax(190px, 1.02fr)
    30px
    minmax(170px, .86fr)
    30px
    minmax(135px, .60fr)
    30px
    minmax(230px, 1.28fr);

  gap: 8px;
}


/* ---------- 01 — ИССЛЕДУЕМ ---------- */

.s4-measurement {
  left: 0;
  top: 8%;
  width: 64%;
  height: 38%;
}

.s4-fabrics {
  right: 0;
  top: 40%;
  width: 52%;
  height: 25%;
}


/* ---------- 02 — ИЩЕМ СВЯЗЬ ---------- */

.s4-pattern {
  left: 0;
  top: 11%;
  width: 70%;
  height: 41%;
}

.s4-pinning {
  right: 0;
  top: 40%;
  width: 52%;
  height: 31%;
}


/* ---------- 03 — УБИРАЕМ ---------- */

.s4-cutting {
  left: 5%;
  top: 10%;
  width: 90%;
  height: 59%;
}


/* ---------- 04 — СОЗДАЁМ / ГЛАВНЫЙ РЕЗУЛЬТАТ ---------- */

.s4-final-photo {
  left: 0;
  top: 1%;
  width: 100%;
  height: 70%;
}

.s4-final-photo img {
  object-position: 51% 50%;
}

.s4-final-line {
  left: 4%;
  top: 74%;
  width: 92%;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.35;
}


/* ---------- СТРЕЛКИ МЕЖДУ ЭТАПАМИ ---------- */

.s4-flow-arrow {
  padding-top: 5px;
  font-size: 30px;
}


/* ---------- НИЖНИЕ ПОДПИСИ ---------- */

.s4-stage-caption {
  font-size: clamp(10px, .72vw, 12px);
  line-height: 1.35;
  letter-spacing: .075em;
  color: rgba(17,17,17,.58);
}


/* ---------- ПРАВАЯ КОЛОНКА ---------- */

.s4-copy {
  top: 24%;
  right: 3.3%;
  width: 20.5%;
}

.s4-copy-block {
  padding-bottom: 21px;
  margin-bottom: 21px;
}

.s4-copy-block h3 {
  margin-bottom: 10px;
  font-size: clamp(13px, .88vw, 16px);
  line-height: 1.28;
  font-weight: 600;
}

.s4-copy-block p {
  font-size: clamp(12px, .80vw, 14px);
  line-height: 1.52;
}

.s4-ai-copy {
  font-size: clamp(11px, .74vw, 13px);
  line-height: 1.55;
}


/* ---------- ВЕРХНИЙ ИНДИКАТОР ЭТАПОВ ---------- */

.s4-stage-nav {
  left: 30%;
  width: 42%;
}

.s4-stage-nav-item {
  font-size: clamp(11px, .78vw, 14px);
}


/* ---------- ЗАПИСКИ ---------- */

.s4-note {
  font-size: clamp(12px, .82vw, 15px);
}


/* ---------- АДАПТАЦИЯ ---------- */

@media (max-width: 1100px) {
  .s4-story {
    width: 69%;
    grid-template-columns:
      minmax(160px, 1fr)
      20px
      minmax(145px, .84fr)
      20px
      minmax(115px, .60fr)
      20px
      minmax(190px, 1.22fr);
  }

  .s4-copy {
    width: 21%;
  }
}



/* =========================================================
   SCREEN 05 — AORA CASE
   ========================================================= */

.screen-05 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: 5.6% 2.5% 5.2%;
  overflow: hidden;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  color: #111;
}


/* ---------- TOP ---------- */

.s5-top {
  position: relative;
  width: 72%;
  height: 155px;

  display: grid;
  grid-template-columns: 43% 5% 52%;
  align-items: start;

  border-bottom: 1px solid rgba(17,17,17,.16);
}

.s5-origin {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 26px;
}

.s5-origin-image {
  height: 132px;
  overflow: hidden;
}

.s5-origin-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.s5-origin-copy {
  padding-top: 0;
}

.s5-kicker {
  margin-bottom: 7px;
  font-family: Arial, sans-serif;
  font-size: clamp(10px,.70vw,13px);
  letter-spacing: .12em;
  color: rgba(17,17,17,.55);
}

.s5-origin-copy h2 {
  margin: 0 0 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px,1.72vw,31px);
  line-height: 1.02;
  font-weight: 400;
}

.s5-origin-copy p {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(11px,.78vw,14px);
  color: rgba(17,17,17,.54);
}

.s5-top-arrow {
  padding-top: 43px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 300;
}

.s5-turn {
  padding-top: 0;
  padding-left: 9%;
  font-family: Arial, sans-serif;
  font-size: clamp(11px,.78vw,14px);
  line-height: 1.45;
}

.s5-turn p {
  margin: 0 0 14px;
}

.s5-turn .s5-accent {
  color: #9a692b;
  font-size: clamp(12px,.87vw,15px);
}


/* ---------- MAIN ---------- */

.s5-main {
  width: 100%;
  margin-top: 22px;

  display: grid;
  grid-template-columns: 26% 46% 24%;
  gap: 2%;
  align-items: start;
}


/* LEFT COPY */

.s5-left-copy {
  padding: 10px 3% 0 7%;
}

.s5-aora-mark {
  width: 95px;
  margin-bottom: 16px;
  color: #9a692b;
  text-align: center;
}

.s5-aora-symbol {
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: .7;
}

.s5-aora-name {
  margin-top: 9px;
  font-family: Georgia, serif;
  font-size: 23px;
  letter-spacing: .28em;
}

.s5-left-copy h2 {
  margin: 0 0 17px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px,3vw,53px);
  line-height: .91;
  font-weight: 400;
}

.s5-lead,
.s5-muted,
.s5-small-copy {
  font-family: Arial, sans-serif;
}

.s5-lead {
  margin: 0 0 26px;
  font-size: clamp(11px,.80vw,14px);
  line-height: 1.45;
  color: rgba(17,17,17,.58);
}

.s5-muted {
  margin: 0;
  font-size: clamp(11px,.80vw,14px);
  line-height: 1.45;
  color: rgba(17,17,17,.58);
}

.s5-small-rule {
  width: 40px;
  height: 1px;
  margin: 17px 0;
  background: #9a692b;
}

.s5-small-copy {
  margin: 0;
  font-size: clamp(10px,.70vw,13px);
  line-height: 1.45;
}


/* HERO */

.s5-hero {
  position: relative;
  height: 355px;
  overflow: hidden;
  border-radius: 7px;
  background: #071019;
}

.s5-hero > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 52%;
  filter: brightness(.72);
}

.s5-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.03),
      rgba(0,0,0,.08) 45%,
      rgba(0,0,0,.28)
    );
}

.s5-hero-overlay {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 27%;
  text-align: center;
  color: white;
}

.s5-hero-kicker {
  font-family: Arial, sans-serif;
  font-size: clamp(10px,.70vw,13px);
  letter-spacing: .30em;
  color: #d4a253;
}

.s5-hero-overlay h2 {
  margin: 19px 0 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(29px,2.7vw,48px);
  line-height: 1;
  font-weight: 400;
}

.s5-hero-overlay p {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(11px,.80vw,14px);
}


/* RIGHT */

.s5-right {
  padding-left: 7%;
  border-left: 1px solid rgba(17,17,17,.18);
}

.s5-right-kicker {
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: clamp(10px,.74vw,13px);
  letter-spacing: .29em;
}

.s5-right-copy h3 {
  margin: 0 0 15px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px,1.14vw,21px);
  line-height: 1.28;
  font-weight: 400;
}

.s5-right-muted {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(11px,.76vw,14px);
  line-height: 1.55;
  color: rgba(17,17,17,.48);
}

.s5-gold-rule {
  width: 37px;
  height: 1px;
  margin: 16px 0;
  background: #9a692b;
}

.s5-right-final {
  margin: 0 0 17px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px,1.05vw,19px);
  line-height: 1.35;
}

.s5-video-card {
  position: relative;
  width: 100%;
  height: 205px;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}

.s5-video-card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.s5-video-play {
  position: absolute;
  left: 18px;
  top: auto;
  bottom: 18px;
  width: 54px;
  height: 54px;
  transform: none;

  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(0,0,0,.20);
  color: white;
  cursor: pointer;
}

.s5-video-play span {
  display: block;
  transform: translateX(2px);
  font-size: 19px;
}

.s5-video-time {
  position: absolute;
  right: 13px;
  bottom: 11px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: white;
  letter-spacing: .08em;
}

.s5-video-caption {
  margin: 8px 0 0;
  font-family: Arial, sans-serif;
  font-size: clamp(8px,.58vw,10px);
  line-height: 1.4;
  color: rgba(17,17,17,.47);
}


/* ---------- LOWER CARDS ---------- */

.s5-lower {
  width: 72%;
  margin-top: 24px;

  display: grid;
  grid-template-columns: 44% 56%;
  gap: 10px;
}

.s5-story-card,
.s5-contact-card {
  height: 245px;
  overflow: hidden;
  border-radius: 7px;
}


/* PERSONAL STORY */

.s5-story-card {
  position: relative;
  background: #6d4c2b;
}

.s5-story-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s5-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(36,21,11,.68) 0%,
      rgba(36,21,11,.39) 43%,
      rgba(36,21,11,.04) 75%
    );
}

.s5-story-overlay {
  position: absolute;
  z-index: 2;
  left: 5%;
  top: 9%;
  color: white;
}

.s5-mini-aora {
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .27em;
  color: #d2a35b;
}

.s5-mini-aora.dark {
  color: #9a692b;
}

.s5-story-overlay h3 {
  margin: 0 0 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px,1.7vw,30px);
  line-height: .96;
  font-weight: 400;
}

.s5-story-overlay p {
  margin: 0 0 15px;
  font-family: Arial, sans-serif;
  font-size: clamp(8px,.56vw,10px);
  line-height: 1.45;
}

.s5-story-overlay span {
  font-family: Arial, sans-serif;
  font-size: clamp(8px,.58vw,10px);
  color: #d2a35b;
}


/* CONTACT */

.s5-contact-card {
  display: grid;
  grid-template-columns: 65% 35%;
  background: #eee9df;
}

.s5-contact-copy {
  padding: 7% 6%;
}

.s5-contact-copy h3 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px,1.62vw,29px);
  line-height: .98;
  font-weight: 400;
}

.s5-contact-copy > p {
  margin: 0 0 14px;
  font-family: Arial, sans-serif;
  font-size: clamp(8px,.57vw,10px);
  line-height: 1.4;
}

.s5-contact-row {
  display: grid;
  grid-template-columns: 30px 1.45fr 1.25fr 20px;
  gap: 8px;

  padding: 8px 0;
  border-top: 1px solid rgba(17,17,17,.18);

  font-family: Arial, sans-serif;
  font-size: clamp(7px,.50vw,9px);
}

.s5-contact-image {
  overflow: hidden;
}

.s5-contact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% center;
  display: block;
}


/* ---------- BOTTOM THESIS ---------- */

.s5-bottom-line {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 3.3%;

  padding-top: 16px;
  border-top: 1px solid rgba(17,17,17,.18);

  display: grid;
  grid-template-columns: 2.1fr 1.35fr 1.6fr .85fr;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px,1.18vw,21px);
  line-height: 1.17;
}

.s5-bottom-line > div {
  padding: 0 7%;
  border-right: 1px solid rgba(17,17,17,.18);
}

.s5-bottom-line > div:first-child {
  padding-left: 0;
}

.s5-bottom-line > div:last-child {
  border-right: 0;
}

.s5-bottom-small {
  font-family: Arial, sans-serif;
  font-size: clamp(8px,.58vw,11px);
  line-height: 1.55;
  color: rgba(17,17,17,.45);
}


/* ---------- SCREEN MARKERS ---------- */

.screen-05-arrow {
  position: absolute;
  left: 3.3%;
  bottom: 2.5%;
  font-family: Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
}

.screen-05-number {
  position: absolute;
  right: 4%;
  top: 4.2%;

  display: flex;
  gap: 8px;

  font-family: Arial, sans-serif;
  font-size: 16px;
  letter-spacing: .04em;
}

.screen-05-number-muted {
  color: rgba(17,17,17,.38);
}


/* ---------- SCREEN 05 RESPONSIVE BASE ---------- */

@media (max-width: 1100px) {
  .screen-05 {
    min-height: 1250px;
  }

  .s5-main {
    grid-template-columns: 25% 47% 24%;
  }

  .s5-top,
  .s5-lower {
    width: 73%;
  }
}



/* =========================================================
   SCREEN 05 — FINAL FIT / 2026-08-10
   ========================================================= */


/* Весь экран должен помещаться в один viewport */
.screen-05 {
  height: 100vh;
  min-height: 0;

  padding-top: 8.8vh;
  padding-bottom: 3.8vh;

  overflow: hidden;
}


/* ---------------------------------------------------------
   Верхняя история — немного компактнее
   --------------------------------------------------------- */

.s5-top {
  height: 122px;
}

.s5-origin-image {
  height: 104px;
}

.s5-origin {
  gap: 20px;
}

.s5-top-arrow {
  padding-top: 34px;
}

.s5-turn {
  line-height: 1.34;
}

.s5-turn p {
  margin-bottom: 10px;
}


/* ---------------------------------------------------------
   Центральная зона
   --------------------------------------------------------- */

.s5-main {
  margin-top: 14px;
}


/* Центральный кадр чуть ниже по высоте,
   но сохраняем его визуально главным */
.s5-hero {
  height: 292px;
}


/* УБИРАЕМ АБСОЛЮТНО ВСЁ ЗАТЕМНЕНИЕ */
.s5-hero > img {
  filter: none;
}


/* удаляем затемняющий overlay */
.s5-hero::after {
  content: none;
  display: none;
}


/* Текст остаётся поверх чистой фотографии */
.s5-hero-overlay {
  top: 26%;
}


/* лёгкая тень только у букв —
   изображение она никак не затемняет */
.s5-hero-overlay h2,
.s5-hero-overlay p,
.s5-hero-kicker {
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}


/* ---------------------------------------------------------
   Левая колонка
   --------------------------------------------------------- */

.s5-left-copy {
  padding-top: 3px;
}

.s5-aora-mark {
  margin-bottom: 11px;
}

.s5-aora-symbol {
  font-size: 48px;
}

.s5-aora-name {
  margin-top: 6px;
}

.s5-left-copy h2 {
  margin-bottom: 12px;
}

.s5-lead {
  margin-bottom: 17px;
}

.s5-small-rule {
  margin: 12px 0;
}


/* ---------------------------------------------------------
   Правая колонка + видео
   --------------------------------------------------------- */

.s5-right-copy h3 {
  margin-bottom: 11px;
}

.s5-gold-rule {
  margin: 11px 0;
}

.s5-right-final {
  margin-bottom: 12px;
}

.s5-video-card {
  height: 166px;
}

.s5-video-caption {
  margin-top: 5px;
}


/* ---------------------------------------------------------
   Нижние два кадра
   --------------------------------------------------------- */

.s5-lower {
  margin-top: 15px;
}

.s5-story-card,
.s5-contact-card {
  height: 188px;
}


/* Камень снова становится главным объектом
   светлого нижнего блока */
.s5-contact-card {
  grid-template-columns: 66% 34%;
}

.s5-contact-image {
  background: #eee9df;
}

.s5-contact-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  /* камень в исходнике расположен справа */
  object-position: 68% center;
}


/* немного компактнее содержимое contact-card */
.s5-contact-copy {
  padding: 5.2% 6%;
}

.s5-contact-copy h3 {
  margin-bottom: 7px;
}

.s5-contact-copy > p {
  margin-bottom: 9px;
}

.s5-contact-row {
  padding: 5px 0;
}


/* ---------------------------------------------------------
   Нижняя смысловая строка
   --------------------------------------------------------- */

.s5-bottom-line {
  bottom: 2.1%;

  padding-top: 10px;

  font-size: clamp(13px, 1.02vw, 18px);
}

.s5-bottom-line > div {
  padding-left: 6%;
  padding-right: 6%;
}


/* ---------------------------------------------------------
   Номер экрана — ниже переключателя языков
   --------------------------------------------------------- */

.screen-05-number {
  top: 9.3%;
}


/* ---------------------------------------------------------
   Стрелка
   --------------------------------------------------------- */

.screen-05-arrow {
  bottom: 1.9%;
}


/* ---------------------------------------------------------
   Для невысоких desktop-окон
   --------------------------------------------------------- */

@media (min-width: 1101px) and (max-height: 820px) {

  .screen-05 {
    padding-top: 7.8vh;
  }

  .s5-top {
    height: 108px;
  }

  .s5-origin-image {
    height: 92px;
  }

  .s5-main {
    margin-top: 10px;
  }

  .s5-hero {
    height: 260px;
  }

  .s5-video-card {
    height: 148px;
  }

  .s5-lower {
    margin-top: 11px;
  }

  .s5-story-card,
  .s5-contact-card {
    height: 166px;
  }

  .s5-bottom-line {
    padding-top: 7px;
  }
}



/* =========================================================
   SCREEN 05 — REVISION 3
   closer to approved composition
   ========================================================= */


/* ---------------------------------------------------------
   ОБЩАЯ ГЕОМЕТРИЯ
   --------------------------------------------------------- */

.screen-05 {
  height: 100vh;
  min-height: 0;

  padding:
    8.2vh
    2.45%
    4.1vh;

  overflow: hidden;
}


/* ---------------------------------------------------------
   ВЕРХНИЙ BUSINESS / WORKSHOP БЛОК
   Делаем крупнее — ближе к пропорции оригинала.
   Благодаря увеличению верхней зоны основной hero уходит ниже.
   --------------------------------------------------------- */

.s5-top {
  width: 73.5%;
  height: 148px;

  grid-template-columns:
    44%
    5%
    51%;

  border-bottom:
    1px solid rgba(17,17,17,.15);
}


.s5-origin {
  grid-template-columns:
    52%
    48%;

  gap: 18px;
}


.s5-origin-image {
  height: 126px;
}


.s5-origin-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  /* человек и стол остаются главным центром */
  object-position: center 53%;
}


.s5-origin-copy {
  padding-top: 0;
}


.s5-origin-copy h2 {
  font-size: clamp(22px,1.67vw,30px);
  line-height: 1.02;

  margin-bottom: 8px;
}


.s5-top-arrow {
  padding-top: 45px;
}


.s5-turn {
  padding-left: 8%;

  line-height: 1.38;
}


.s5-turn p {
  margin-bottom: 12px;
}


/* ---------------------------------------------------------
   ОСНОВНАЯ СРЕДНЯЯ ЧАСТЬ

   Правая колонка становится absolute.
   Благодаря этому её высота больше НЕ толкает
   нижние карточки вниз.
   --------------------------------------------------------- */

.s5-main {
  position: relative;

  width: 100%;

  margin-top: 20px;

  display: grid;

  grid-template-columns:
    24%
    48%;

  gap: 2%;

  align-items: start;
}


/* ---------------------------------------------------------
   ЛЕВАЯ AORA-КОЛОНКА
   --------------------------------------------------------- */

.s5-left-copy {
  padding:
    4px
    4%
    0
    6%;
}


.s5-aora-mark {
  margin-bottom: 13px;
}


.s5-aora-symbol {
  font-size: 52px;
}


.s5-aora-name {
  font-size: 22px;

  margin-top: 7px;
}


.s5-left-copy h2 {
  font-size: clamp(36px,3.05vw,54px);

  line-height: .92;

  margin-bottom: 16px;
}


.s5-lead {
  margin-bottom: 22px;
}


.s5-small-rule {
  margin: 14px 0;
}


/* =========================================================
   ГЛАВНЫЙ НОЧНОЙ КАДР
   БОЛЬШЕ + СВЕТЛЕЕ + ЯРЧЕ
   ========================================================= */

.s5-hero {
  height: 324px;

  border-radius: 7px;

  overflow: hidden;
}


.s5-hero > img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 49%;

  /*
     Никакого затемняющего слоя.
     Усиливаем непосредственно исходник.
  */
  filter:
    brightness(1.34)
    contrast(.96)
    saturate(1.08);
}


/* гарантированно убираем старое затемнение */

.s5-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}


/* текст остаётся читаемым без затемнения фотографии */

.s5-hero-overlay {
  top: 27%;

  left: 5%;
  right: 5%;
}


.s5-hero-overlay h2 {
  font-size: clamp(32px,2.85vw,50px);

  margin-top: 18px;

  text-shadow:
    0 1px 5px rgba(0,0,0,.48);
}


.s5-hero-overlay p,
.s5-hero-kicker {
  text-shadow:
    0 1px 4px rgba(0,0,0,.55);
}


/* =========================================================
   ПРАВАЯ КОЛОНКА
   Теперь она не определяет высоту s5-main.
   ========================================================= */

.s5-right {
  position: absolute;

  left: 76%;
  top: 0;

  width: 24%;

  box-sizing: border-box;

  padding-left: 7%;

  border-left:
    1px solid rgba(17,17,17,.17);
}


.s5-right-copy h3 {
  margin-bottom: 13px;
}


.s5-right-muted {
  line-height: 1.5;
}


.s5-gold-rule {
  margin: 13px 0;
}


.s5-right-final {
  margin-bottom: 14px;
}


/* ---------------------------------------------------------
   VIDEO
   --------------------------------------------------------- */

.s5-video-card {
  height: 174px;
}


.s5-video-caption {
  margin-top: 7px;

  font-size: clamp(8px,.55vw,10px);
}


/* =========================================================
   AORA CTA ПОД ВИДЕО
   ========================================================= */

.s5-aora-cta {
  margin-top: 37px;

  text-align: center;
}


.s5-aora-cta-title {
  margin-bottom: 8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(29px,2.35vw,42px);

  font-weight: 400;

  letter-spacing: .08em;
}


.s5-aora-cta p {
  margin:
    0
    0
    18px;

  font-family:
    Arial,
    sans-serif;

  font-size: clamp(10px,.72vw,13px);

  line-height: 1.55;
}


.s5-aora-button {
  box-sizing: border-box;

  width: 76%;

  min-height: 48px;

  margin:
    0
    auto;

  padding:
    0
    16px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-radius: 4px;

  background: #15191b;

  color: #fff;

  text-decoration: none;

  font-family:
    Arial,
    sans-serif;

  font-size: clamp(9px,.67vw,12px);

  letter-spacing: .07em;
}


.s5-aora-url {
  margin-top: 9px;

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;

  color: #9a692b;
}


/* =========================================================
   НИЖНИЕ ДВЕ КАРТОЧКИ
   ========================================================= */

.s5-lower {
  width: 73.5%;

  margin-top: 17px;

  grid-template-columns:
    44%
    56%;

  gap: 10px;
}


.s5-story-card,
.s5-contact-card {
  height: 190px;
}


/* =========================================================
   КАРТОЧКА С МАЛЬЧИКОМ
   ========================================================= */

.s5-story-card > img {
  object-position: center 52%;
}


.s5-story-overlay {
  left: 4.8%;
  top: 8%;
}


.s5-story-overlay h3 {
  margin-bottom: 11px;

  font-size: clamp(20px,1.68vw,30px);

  line-height: .94;
}


.s5-story-overlay p {
  margin-bottom: 9px;

  font-size: clamp(7px,.49vw,9px);

  line-height: 1.35;
}


.s5-story-overlay span {
  font-size: clamp(8px,.54vw,10px);
}


/* затемнение только слева,
   как в исходном макете */

.s5-story-card::after {
  background:
    linear-gradient(
      90deg,
      rgba(39,25,14,.65) 0%,
      rgba(39,25,14,.45) 34%,
      rgba(39,25,14,.08) 66%,
      rgba(39,25,14,0) 82%
    );
}


/* =========================================================
   КОНТАКТНАЯ КАРТОЧКА + КАМЕНЬ
   ========================================================= */

.s5-contact-card {
  position: relative;

  grid-template-columns:
    66%
    34%;

  /*
     Фон всей карточки,
     поэтому отдельного прямоугольника
     картинки с камнем визуально нет.
  */
  background:
    rgba(239,234,224,.92);
}


.s5-contact-copy {
  position: relative;
  z-index: 3;

  padding:
    5.1%
    5.8%;
}


.s5-contact-home {
  position: absolute;

  right: 5%;
  top: 8%;

  font-family:
    Arial,
    sans-serif;

  font-size: 7px;

  letter-spacing: .08em;
}


.s5-contact-copy h3 {
  margin-bottom: 7px;

  font-size: clamp(19px,1.55vw,28px);
}


.s5-contact-intro {
  margin-bottom: 7px !important;

  font-size: clamp(7px,.47vw,9px) !important;

  line-height: 1.32 !important;
}


.s5-contact-row {
  grid-template-columns:
    24px
    1.45fr
    1.25fr
    .75fr;

  gap: 5px;

  padding:
    4px
    0;

  font-size: clamp(6px,.43vw,8px);
}


/* ---------------------------------------------------------
   ФОН КАМНЯ ВИЗУАЛЬНО РАСТВОРЯЕМ
   --------------------------------------------------------- */

.s5-contact-image {
  position: relative;

  overflow: hidden;

  background: transparent;
}


.s5-contact-image img {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 0;
  top: 0;

  max-width: none;

  object-fit: cover;

  /*
     Наводим исходник именно на камень.
  */
  object-position: 79% 66%;

  /*
     Делаем камень значительно крупнее.
  */
  transform:
    scale(2.05)
    translate(-1.5%, 5%);

  transform-origin:
    79%
    66%;

  /*
     Светлая основа JPEG смешивается
     с цветом карточки и практически исчезает.
  */
  mix-blend-mode: multiply;

  opacity: .94;

  filter:
    contrast(1.03)
    saturate(.92);
}


/* =========================================================
   НИЖНЯЯ ТЕКСТОВАЯ ЛИНИЯ
   ========================================================= */

.s5-bottom-line {
  left: 7%;
  right: 11%;

  bottom: 2.1%;

  padding-top: 11px;

  font-size: clamp(13px,1.08vw,19px);
}


.s5-bottom-line > div {
  padding:
    0
    5%;
}


.s5-bottom-line > div:first-child {
  padding-left: 0;
}


/* =========================================================
   НУМЕРАЦИЯ 05 / 08 — ВНИЗ
   ========================================================= */

.screen-05-number {
  top: auto !important;

  right: 4.1%;

  bottom: 2.25%;

  font-size: 15px;
}


/* стрелка остаётся слева */

.screen-05-arrow {
  bottom: 1.8%;
}


/* =========================================================
   ДЛЯ НИЗКИХ DESKTOP ЭКРАНОВ
   ========================================================= */

@media (min-width: 1101px) and (max-height: 850px) {

  .screen-05 {
    padding-top: 7.2vh;
  }


  .s5-top {
    height: 132px;
  }


  .s5-origin-image {
    height: 112px;
  }


  .s5-top-arrow {
    padding-top: 37px;
  }


  .s5-main {
    margin-top: 14px;
  }


  .s5-hero {
    height: 285px;
  }


  .s5-video-card {
    height: 150px;
  }


  .s5-aora-cta {
    margin-top: 23px;
  }


  .s5-aora-button {
    min-height: 42px;
  }


  .s5-lower {
    margin-top: 12px;
  }


  .s5-story-card,
  .s5-contact-card {
    height: 170px;
  }


  .s5-bottom-line {
    padding-top: 7px;
  }

}



/* =========================================================
   SCREEN 05 — LAYOUT REVISION 4
   side text higher / lower cards higher and taller
   ========================================================= */


/* ---------------------------------------------------------
   AORA — УБИРАЕМ ВЕРТИКАЛЬНУЮ ПАЛОЧКУ
   --------------------------------------------------------- */

.s5-aora-symbol {
  display: none !important;
}

.s5-aora-mark {
  width: 105px;
  margin-bottom: 10px;
  text-align: left;
}

.s5-aora-name {
  margin-top: 0;
  font-size: 22px;
  letter-spacing: .28em;
}


/* ---------------------------------------------------------
   ЛЕВЫЙ ТЕКСТ — ПОДНИМАЕМ
   --------------------------------------------------------- */

.s5-left-copy {
  transform: translateY(-24px);

  padding-left: 6%;
  padding-right: 3%;
  padding-top: 0;
}

.s5-left-copy h2 {
  margin-top: 0;
  margin-bottom: 14px;
}

.s5-lead {
  margin-bottom: 20px;
}

.s5-muted {
  margin-bottom: 0;
}

.s5-small-rule {
  margin-top: 12px;
  margin-bottom: 12px;
}


/* ---------------------------------------------------------
   ПРАВЫЙ ТЕКСТ — ПОДНИМАЕМ
   --------------------------------------------------------- */

.s5-right {
  top: -24px;
}

.s5-right-kicker {
  margin-bottom: 9px;
}

.s5-right-copy h3 {
  margin-bottom: 12px;
}

.s5-right-muted {
  line-height: 1.48;
}

.s5-gold-rule {
  margin-top: 12px;
  margin-bottom: 12px;
}

.s5-right-final {
  margin-bottom: 12px;
}


/* ---------------------------------------------------------
   ВИДЕО ЧУТЬ ВЫШЕ
   --------------------------------------------------------- */

.s5-video-card {
  height: 170px;
}

.s5-video-caption {
  margin-top: 5px;
}


/* ---------------------------------------------------------
   НИЖНИЕ КАРТОЧКИ
   ПОДНИМАЕМ И ДЕЛАЕМ ВЫШЕ
   --------------------------------------------------------- */

.s5-lower {
  position: relative;

  margin-top: 0;

  transform: translateY(-30px);

  width: 73.5%;

  grid-template-columns:
    44%
    56%;

  gap: 10px;
}

.s5-story-card,
.s5-contact-card {
  height: 220px;
}


/* =========================================================
   КАРТОЧКА С МАЛЬЧИКОМ
   ВЕСЬ ТЕКСТ ДОЛЖЕН ПОМЕЩАТЬСЯ
   ========================================================= */

.s5-story-card {
  position: relative;
}

.s5-story-card > img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 50%;
}

.s5-story-overlay {
  left: 5%;
  top: 7%;
  bottom: 7%;

  width: 43%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s5-story-overlay .s5-mini-aora {
  margin-bottom: 8px;
}

.s5-story-overlay h3 {
  margin: 0 0 10px;

  font-size: clamp(20px, 1.55vw, 28px);
  line-height: .96;
}

.s5-story-overlay p {
  margin: 0 0 9px;

  font-size: clamp(7px, .48vw, 9px);
  line-height: 1.35;
}

.s5-story-overlay span {
  margin-top: auto;

  font-size: clamp(8px, .53vw, 10px);
  line-height: 1.2;
}


/* Затемнение оставляем только под текстом */

.s5-story-card::after {
  background:
    linear-gradient(
      90deg,
      rgba(35,22,12,.68) 0%,
      rgba(35,22,12,.49) 34%,
      rgba(35,22,12,.15) 57%,
      rgba(35,22,12,0) 76%
    );
}


/* =========================================================
   КАРТОЧКА С КАМНЕМ
   БОЛЬШЕ МЕСТА ДЛЯ ТЕКСТА
   ========================================================= */

.s5-contact-card {
  grid-template-columns:
    65%
    35%;
}

.s5-contact-copy {
  padding:
    4.3%
    5.5%;
}

.s5-contact-copy h3 {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: clamp(20px, 1.55vw, 28px);
  line-height: 1;
}

.s5-contact-intro {
  margin-bottom: 9px !important;

  font-size: clamp(7px, .49vw, 9px) !important;
  line-height: 1.35 !important;
}

.s5-contact-row {
  grid-template-columns:
    24px
    1.35fr
    1.25fr
    .75fr;

  padding: 5px 0;

  font-size: clamp(6px, .45vw, 8px);
}


/* ---------------------------------------------------------
   КАМЕНЬ — КРУПНЕЕ И НИЖЕ
   --------------------------------------------------------- */

.s5-contact-image {
  position: relative;

  overflow: hidden;

  background: transparent !important;
}

.s5-contact-image img {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 0;
  top: 0;

  object-fit: cover;

  object-position: 80% 67%;

  transform:
    scale(2.20)
    translate(-2%, 7%);

  transform-origin:
    80%
    67%;

  mix-blend-mode: multiply;

  opacity: .95;
}


/* =========================================================
   ЧУТЬ ПОДНИМАЕМ AORA CTA СПРАВА
   ========================================================= */

.s5-aora-cta {
  margin-top: 27px;
}


/* =========================================================
   НИЖНЯЯ СТРОКА
   Карточки теперь выше и могут занять больше пространства.
   ========================================================= */

.s5-bottom-line {
  bottom: 2.0%;
}


/* =========================================================
   НИЗКИЙ DESKTOP
   ========================================================= */

@media (min-width: 1101px) and (max-height: 850px) {

  .s5-left-copy {
    transform: translateY(-20px);
  }

  .s5-right {
    top: -20px;
  }

  .s5-lower {
    transform: translateY(-25px);
  }

  .s5-story-card,
  .s5-contact-card {
    height: 200px;
  }

  .s5-story-overlay h3 {
    font-size: clamp(19px, 1.45vw, 26px);
  }

  .s5-contact-copy {
    padding-top: 3.8%;
    padding-bottom: 3.8%;
  }
}



/* =========================================================
   SCREEN 05 — RIGHT COLUMN POSITION FIX
   Правый блок остаётся абсолютным
   ========================================================= */

@media (min-width: 1101px) {

  .s5-right {
    position: absolute !important;

    left: 76% !important;
    width: 24% !important;

    /* Поднимаем всю правую колонку целиком */
    top: -56px !important;

    box-sizing: border-box;
  }

}



/* =========================================================
   SCREEN 05 — опустить кадр с мальчиком и кадр с камнем
   ========================================================= */

@media (min-width: 1101px) {
  :root {
    --screen05-lower-frames: 28px;
  }

  /* Левый нижний кадр с мальчиком */
  .s5-story-card,
  .screen05-story-card,
  .screen05-personal-card {
    margin-top: var(--screen05-lower-frames) !important;
  }

  /* Правый визуальный кадр с камнем внутри контактного блока */
  .s5-contact-visual,
  .s5-contact-image,
  .screen05-contact-visual,
  .screen05-contact-stone {
    margin-top: var(--screen05-lower-frames) !important;
  }
}



/* =========================================================
   SCREEN 05 — BOY CARD
   ниже + немного выше по размеру
   ========================================================= */

@media (min-width: 1101px) {

  .s5-story-card {
    /* было примерно 28px — опускаем ещё ниже */
    margin-top: 48px !important;

    /* немного увеличиваем высоту кадра */
    height: 218px !important;
  }

}



/* =========================================================
   SCREEN 05 — STONE CARD ALIGNMENT
   выравниваем с карточкой мальчика
   ========================================================= */

@media (min-width: 1101px) {

  /* Весь кадр с камнем опускаем на уровень мальчика */
  .s5-contact-card {
    margin-top: 48px !important;
    height: 218px !important;

    /* убираем бежевую основу слева */
    background: transparent !important;
  }


  /* Левая текстовая часть также без собственной заливки */
  .s5-contact-copy {
    background: transparent !important;
  }


  /* Убираем старое дополнительное опускание картинки */
  .s5-contact-image {
    margin-top: 0 !important;
    height: 100% !important;

    background: transparent !important;
  }


  /* Камень делаем крупным и поднимаем выше внутри кадра */
  .s5-contact-image img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 80% 58% !important;

    transform:
      scale(2.20)
      translate(-2%, -5%) !important;

    transform-origin: 80% 58% !important;

    opacity: .95;
  }

}



/* =========================================================
   SCREEN 05 — левый текстовый блок вниз на 0.5 см
   ========================================================= */

@media (min-width: 1101px) {
  .s5-left-copy {
    transform: translateY(calc(-24px + 0.5cm)) !important;
  }
}

/* Для невысокого desktop-окна */
@media (min-width: 1101px) and (max-height: 850px) {
  .s5-left-copy {
    transform: translateY(calc(-20px + 0.5cm)) !important;
  }
}



/* =========================================================
   SCREEN 05 — НИЖНИЙ ТЕКСТОВЫЙ БЛОК
   немного выше + укороченный правый разделитель
   ========================================================= */

@media (min-width: 1101px) {

  /* Поднимаем весь нижний текстовый ряд */
  .s5-bottom-line {
    bottom: 3.2% !important;
  }


  /* Убираем штатную правую границу у третьего блока */
  .s5-bottom-line > div:nth-child(3) {
    position: relative;
    border-right: none !important;
  }


  /* Рисуем более короткий разделитель */
  .s5-bottom-line > div:nth-child(3)::after {
    content: "";

    position: absolute;
    right: 0;
    top: 4px;

    width: 1px;
    height: 32px;

    background: rgba(17,17,17,.18);
  }

}



/* =========================================================
   SCREEN 05 — ПРАВЫЙ БЛОК ЕЩЁ ВЫШЕ
   Только вертикальное положение
   ========================================================= */

@media (min-width: 1101px) {
  .s5-right {
    top: -86px !important;
  }
}



/* =========================================================
   SCREEN 05 — нумерация немного выше
   ========================================================= */

@media (min-width: 1101px) {
  .screen-05-number {
    bottom: 4.2% !important;
  }
}



/* =========================================================
   SCREEN 05 — FINAL TYPOGRAPHY / IMAGE POLISH
   Геометрию и положение элементов НЕ меняем
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. КОНТАКТНЫЙ БЛОК С КАМНЕМ
     Повышаем читаемость мелкого текста
     ======================================================= */

  .s5-contact-intro {
    font-size: clamp(8px, .54vw, 10px) !important;
    line-height: 1.38 !important;
  }

  .s5-contact-row {
    font-size: clamp(7px, .49vw, 9px) !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     2. КАРТОЧКА С МАЛЬЧИКОМ
     Нижний текст и ссылка примерно на 1 px крупнее
     ======================================================= */

  .s5-story-overlay p {
    font-size: clamp(8px, .54vw, 10px) !important;
    line-height: 1.32 !important;
  }

  .s5-story-overlay span {
    font-size: clamp(9px, .59vw, 11px) !important;
    line-height: 1.2 !important;
  }


  /* =======================================================
     3. ЦЕНТРАЛЬНЫЙ НОЧНОЙ КАДР
     Ещё около +5% яркости.
     Размер и положение изображения не меняются.
     ======================================================= */

  .s5-hero > img {
    filter:
      brightness(1.41)
      contrast(.96)
      saturate(1.08) !important;
  }

}



/* =========================================================
   SCREEN 05 — MULTILANGUAGE LINE BREAKS
   ========================================================= */

.screen-05 [data-i18n] {
  white-space: pre-line;
}



/* =========================================================
   SCREEN 05 — FULLSCREEN VIDEO
   ========================================================= */


/* Старый тайминг скрываем также через CSS на всякий случай */
.s5-video-time {
  display: none !important;
}


/* Chrome / Edge / Firefox */
#s5-video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;

  background: #000 !important;
}


/* Safari */
#s5-video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;

  background: #000 !important;
}


/* =========================================================
   SCREEN 06 — КОДЕКС ДОВЕРИЯ
   ========================================================= */

.screen-06 {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 720px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.30),
      rgba(246,243,237,.20)
    );

  color: #151515;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}


.s6-shell {
  position: absolute;

  left: 2.7%;
  right: 2.7%;

  top: 7.2%;
  bottom: 2.5%;
}


/* =========================================================
   PAGE NUMBER
   ========================================================= */

.s6-page-number {
  position: absolute;

  top: 0;
  right: .5%;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: clamp(13px, .82vw, 16px);
  letter-spacing: .04em;

  z-index: 20;
}

.s6-page-slash,
.s6-page-total {
  color: rgba(20,20,20,.38);
}


/* =========================================================
   TOP
   ========================================================= */

.s6-top {
  position: absolute;

  left: 0;
  top: 1.8%;

  width: 73.2%;
  height: 17.6%;

  display: grid;

  grid-template-columns:
    minmax(240px, 1.1fr)
    minmax(235px, 1fr)
    55px
    minmax(330px, 1.35fr);

  column-gap: 2.7%;
}


/* DEVICE */

.s6-device {
  position: relative;

  width: 88%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.s6-device-screen {
  width: 88%;
  height: 87%;

  overflow: hidden;

  border: 5px solid #181a19;
  border-radius: 7px 7px 3px 3px;

  background: #181a19;

  box-shadow:
    0 8px 15px rgba(0,0,0,.08);
}

.s6-device-screen img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}

.s6-device-base {
  position: absolute;

  left: 2%;
  bottom: 3%;

  width: 96%;
  height: 5px;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0),
      rgba(65,65,65,.35) 18%,
      rgba(80,80,80,.40) 50%,
      rgba(65,65,65,.35) 82%,
      rgba(0,0,0,0)
    );
}


/* TITLE */

.s6-project-title {
  padding-top: 2%;
}

.s6-kicker {
  margin-bottom: 6px;

  color: rgba(20,20,20,.48);

  font-size: clamp(10px, .68vw, 13px);
  letter-spacing: .12em;
}

.s6-project-title h2 {
  margin: 0 0 9px;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(31px, 2.45vw, 46px);
  line-height: .92;
}

.s6-project-title p {
  margin: 0;

  color: rgba(20,20,20,.55);

  font-size: clamp(10px, .72vw, 13px);
  line-height: 1.45;
}


/* ARROW */

.s6-top-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: Georgia, serif;

  font-size: clamp(24px, 1.8vw, 34px);
  font-weight: 300;
}


/* TOP STORY */

.s6-top-story {
  padding-top: 4%;

  font-size: clamp(10px, .75vw, 14px);
  line-height: 1.48;
}

.s6-top-story p {
  margin: 0 0 8px;
}

.s6-top-story .s6-accent {
  margin-top: 12px;

  color: #a56a27;

  font-size: 1.04em;
}


.s6-top-rule {
  position: absolute;

  left: 0;
  top: 21.2%;

  width: 73.3%;
  height: 1px;

  background: rgba(20,20,20,.14);
}


/* =========================================================
   LEFT STORY
   ========================================================= */

.s6-left {
  position: absolute;

  left: .5%;
  top: 25%;

  width: 20.5%;
  height: 40%;
}


.s6-brand {
  display: flex;
  align-items: center;

  margin-bottom: 27px;
}


.s6-brand-symbol {
  position: relative;

  width: 40px;
  height: 52px;

  margin-right: 12px;
}

.s6-brand-symbol::before {
  content: "";

  position: absolute;

  left: 13px;
  top: 0;

  width: 1px;
  height: 52px;

  background: #ae7128;
}

.s6-brand-symbol::after {
  content: "";

  position: absolute;

  left: 4px;
  top: 13px;

  width: 27px;
  height: 27px;

  border: 1px solid #ae7128;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.s6-brand-name {
  display: flex;
  flex-direction: column;
}

.s6-brand-name strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.1vw, 21px);
  font-weight: 400;
}

.s6-brand-name small {
  margin-top: 3px;

  font-size: clamp(5px, .38vw, 7px);
  letter-spacing: .18em;
}


.s6-left h2 {
  margin: 0 0 20px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 1.85vw, 35px);
  line-height: 1.08;
  font-weight: 400;
}


.s6-left-copy {
  margin: 0;

  color: rgba(20,20,20,.56);

  font-size: clamp(10px, .72vw, 13px);
  line-height: 1.55;
}


.s6-gold-line {
  width: 33px;
  height: 1px;

  margin: 20px 0 19px;

  background: #ad7129;
}


/* =========================================================
   HERO
   ========================================================= */

.s6-hero {
  position: absolute;

  left: 24.7%;
  top: 23.1%;

  width: 48.6%;
  height: 44.2%;

  overflow: hidden;

  border-radius: 10px;

  background: #e8dac6;
}


.s6-hero > img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


.s6-hero-copy {
  position: absolute;

  left: 5.2%;
  top: 6.5%;

  width: 46%;

  z-index: 2;
}


.s6-hero-mini-brand {
  display: flex;
  align-items: center;

  margin-bottom: 34px;
}

.s6-hero-mark {
  position: relative;

  display: block;

  width: 20px;
  height: 32px;

  margin-right: 10px;

  border-left: 1px solid #25211c;
}

.s6-hero-mark::after {
  content: "";

  position: absolute;

  left: 3px;
  top: 9px;

  width: 11px;
  height: 11px;

  border: 1px solid #25211c;
  border-left-color: transparent;
  border-bottom-color: transparent;

  border-radius: 50%;
}


.s6-hero-mini-brand div {
  display: flex;
  flex-direction: column;
}

.s6-hero-mini-brand strong {
  font-family: Georgia, serif;
  font-size: clamp(7px, .55vw, 10px);
  font-weight: 400;
}

.s6-hero-mini-brand small {
  margin-top: 2px;

  font-size: clamp(3px, .28vw, 5px);
  letter-spacing: .13em;
}


.s6-hero-copy h2 {
  margin: 0 0 18px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(29px, 2.05vw, 39px);
  font-weight: 400;
  line-height: .98;
}

.s6-hero-copy h2 span {
  color: #a86621;
}


.s6-hero-copy > p {
  margin: 0;

  font-size: clamp(7px, .48vw, 9px);
  line-height: 1.48;
}


.s6-hero-link {
  margin-top: 20px;

  color: #a86621;

  font-size: clamp(6px, .45vw, 8px);
  letter-spacing: .04em;
}


/* PRINCIPLES */

.s6-principles {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 18%;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  background: rgba(18,25,27,.96);

  color: #fff;

  z-index: 3;
}


.s6-principle {
  display: grid;

  grid-template-columns: 31px 1fr;
  align-items: center;

  gap: 8px;

  padding: 0 4%;

  border-right: 1px solid rgba(255,255,255,.16);
}


.s6-principle:last-child {
  border-right: 0;
}


.s6-principle-icon {
  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #a9712d;
  border-radius: 50%;

  color: #c68a3a;

  font-size: 12px;
}


.s6-principle strong {
  display: block;

  margin-bottom: 5px;

  font-size: clamp(5px, .37vw, 7px);
  letter-spacing: .03em;
}


.s6-principle p {
  margin: 0;

  color: rgba(255,255,255,.75);

  font-size: clamp(4px, .31vw, 6px);
  line-height: 1.35;
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.s6-right {
  position: absolute;

  top: 10.7%;
  right: .2%;

  width: 20.3%;
  height: 78%;

  padding-left: 2.2%;

  border-left: 1px solid rgba(20,20,20,.15);

  box-sizing: border-box;
}


.s6-right-kicker {
  margin-bottom: 12px;

  font-size: clamp(9px, .67vw, 13px);
  letter-spacing: .28em;
}


.s6-right-block h3 {
  margin: 0;

  font-size: clamp(10px, .76vw, 14px);
  line-height: 1.48;
  font-weight: 400;
}


.s6-right-muted {
  margin: 18px 0 0;

  color: rgba(20,20,20,.50);

  font-size: clamp(9px, .67vw, 12px);
  line-height: 1.48;
}


.s6-right-gold-line {
  width: 33px;
  height: 1px;

  margin: 20px 0 22px;

  background: #ad7129;
}


.s6-difference .s6-right-kicker {
  margin-bottom: 10px;
}


.s6-difference .s6-right-muted {
  margin-top: 18px;
}


/* TRUST CARD */

.s6-trust-card {
  position: relative;

  width: 100%;
  height: 20%;

  min-height: 145px;

  margin-top: 19px;

  overflow: hidden;

  border-radius: 9px;
}


.s6-trust-card > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


.s6-trust-card-copy {
  position: absolute;

  left: 6%;
  top: 8%;

  width: 48%;
}


.s6-trust-card-copy h4 {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(8px, .57vw, 11px);
  line-height: 1.22;
}


.s6-card-line {
  width: 18px;
  height: 1px;

  margin: 10px 0;

  background: #a76a24;
}


.s6-trust-card-copy p {
  margin: 0;

  font-size: clamp(4px, .31vw, 6px);
  line-height: 1.35;
}


/* FINAL RIGHT */

.s6-right-final {
  margin-top: 33px;
}


.s6-right-final p {
  margin: 0 0 20px;

  font-size: clamp(9px, .67vw, 12px);
  line-height: 1.42;
}


.s6-open-site {
  width: 100%;
  height: 42px;

  box-sizing: border-box;

  padding: 0 9%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #15191a;

  color: #fff;
  text-decoration: none;

  border-radius: 3px;

  font-size: clamp(8px, .58vw, 11px);
  letter-spacing: .09em;
}


.s6-domain {
  margin-top: 10px;

  text-align: center;

  color: #a66524;

  font-size: clamp(7px, .52vw, 10px);
  letter-spacing: .07em;
}


/* =========================================================
   LOWER CARDS
   ========================================================= */

.s6-lower {
  position: absolute;

  left: 0;
  top: 69.5%;

  width: 73.2%;
  height: 20.8%;

  display: grid;

  grid-template-columns: 42.5% 57.5%;

  gap: 1.2%;
}


.s6-case {
  position: relative;

  overflow: hidden;

  border-radius: 9px;

  background: #eee2d1;
}


.s6-case > img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


/* LEFT CASE */

.s6-case-left-copy {
  position: absolute;

  left: 5%;
  top: 8%;

  width: 45%;
}


.s6-case-left-copy h3 {
  margin: 0 0 12px;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(15px, 1.1vw, 21px);
  line-height: 1.03;
}


.s6-case-left-copy p {
  margin: 0;

  font-size: clamp(5px, .35vw, 7px);
  line-height: 1.35;
}


.s6-case-links {
  margin-top: 11px;

  color: #a86827;

  font-size: clamp(4px, .31vw, 6px);
}


.s6-case-left-footer {
  position: absolute;

  left: 3.5%;
  right: 3.5%;
  bottom: 5%;

  height: 20%;

  display: grid;
  grid-template-columns: .8fr 1.55fr 1fr;

  background: rgba(255,255,255,.58);

  border: 1px solid rgba(120,100,80,.18);
}


.s6-case-left-footer span {
  display: flex;
  align-items: center;

  padding: 0 8%;

  border-right: 1px solid rgba(120,100,80,.18);

  font-family: Georgia, serif;

  font-size: clamp(5px, .39vw, 7px);
}


.s6-case-left-footer span:last-child {
  border-right: 0;
}


.s6-case-left-footer b,
.s6-service h4 b {
  display: inline-flex;

  width: 19px;
  height: 19px;

  align-items: center;
  justify-content: center;

  margin-right: 8px;

  border: 1px solid rgba(169,105,35,.45);
  border-radius: 50%;

  color: #aa6b27;

  font-weight: 400;
}


/* RIGHT CASE */

.s6-case-right-copy {
  position: absolute;

  left: 3%;
  top: 6%;

  width: 73%;
  height: 89%;
}


.s6-case-right-copy h3 {
  margin: 0 0 4px;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(15px, 1.05vw, 20px);
}


.s6-case-right-intro {
  margin: 0 0 11px;

  font-size: clamp(4px, .30vw, 6px);
  line-height: 1.3;
}


.s6-services {
  height: 67%;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  background: rgba(255,255,255,.60);

  border: 1px solid rgba(120,100,80,.16);
}


.s6-service {
  padding: 5% 7%;

  border-right: 1px solid rgba(120,100,80,.18);
}


.s6-service:last-child {
  border-right: 0;
}


.s6-service h4 {
  display: flex;
  align-items: center;

  margin: 0 0 7px;

  font-family: Georgia, serif;

  font-size: clamp(5px, .39vw, 7px);
  line-height: 1.18;

  font-weight: 400;
}


.s6-service h4 b {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  margin-right: 6px;

  font-size: 7px;
}


.s6-service p {
  margin: 0 0 6px;

  font-size: clamp(4px, .29vw, 5.5px);
  line-height: 1.3;
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.s6-bottom-line {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 7.2%;

  display: grid;
  grid-template-columns: 25% 26% 29% 20%;

  border-top: 1px solid rgba(20,20,20,.15);
}


.s6-bottom-line > div {
  display: flex;
  align-items: center;

  padding: 0 7%;

  border-right: 1px solid rgba(20,20,20,.15);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(10px, .72vw, 14px);
  line-height: 1.25;
}


.s6-bottom-line > div:last-child {
  border-right: 0;
}


.s6-bottom-line .s6-bottom-small {
  font-family: inherit;

  color: rgba(20,20,20,.48);

  font-size: clamp(8px, .58vw, 11px);
}


/* DOWN */

.s6-down {
  position: absolute;

  left: .7%;
  bottom: .2%;

  transform: translateX(-100%);

  font-size: 26px;
  line-height: 1;
}


/* =========================================================
   LOW DESKTOP
   ========================================================= */

@media (min-width: 1101px) and (max-height: 820px) {

  .s6-shell {
    top: 6.5%;
    bottom: 2%;
  }

  .s6-left h2 {
    margin-bottom: 14px;
  }

  .s6-brand {
    margin-bottom: 18px;
  }

  .s6-left-copy {
    line-height: 1.4;
  }

  .s6-gold-line {
    margin-top: 13px;
    margin-bottom: 13px;
  }

  .s6-right-final {
    margin-top: 20px;
  }

  .s6-right-final p {
    margin-bottom: 13px;
  }

}


/* =========================================================
   BASIC TABLET FALLBACK
   ========================================================= */

@media (max-width: 1100px) {

  .screen-06 {
    height: auto;
    min-height: 100vh;

    overflow: visible;
  }

  .s6-shell {
    position: relative;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    width: 92%;

    margin: 90px auto 50px;

    display: flex;
    flex-direction: column;

    gap: 28px;
  }

  .s6-top,
  .s6-left,
  .s6-hero,
  .s6-right,
  .s6-lower,
  .s6-bottom-line,
  .s6-page-number {
    position: relative;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    width: 100%;
    height: auto;
  }

  .s6-top {
    display: grid;
    grid-template-columns: 1fr;
  }

  .s6-top-arrow,
  .s6-top-rule {
    display: none;
  }

  .s6-device {
    min-height: 230px;
  }

  .s6-left {
    min-height: 400px;
  }

  .s6-hero {
    aspect-ratio: 2 / 1;
    min-height: 420px;
  }

  .s6-right {
    padding-left: 0;
    border-left: 0;
  }

  .s6-trust-card {
    min-height: 260px;
  }

  .s6-lower {
    display: grid;
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .s6-case {
    min-height: 330px;
  }

  .s6-bottom-line {
    display: grid;
    grid-template-columns: 1fr;

    border-top: 1px solid rgba(20,20,20,.15);
  }

  .s6-bottom-line > div {
    min-height: 75px;

    border-right: 0;
    border-bottom: 1px solid rgba(20,20,20,.10);
  }

  .s6-down {
    display: none;
  }

}



/* =========================================================
   SCREEN 06 — REFINEMENT 01
   hero / laptop / analysis / right readability
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. НОУТБУК — настоящий первый экран проекта
     ======================================================= */

  .s6-device-screen {
    position: relative;
  }

  .s6-device-screen > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Книга остаётся справа,
     * слева оставляем место под заголовок.
     */
    object-position: center center;
  }


  .s6-device-overlay {
    position: absolute;

    left: 5.5%;
    top: 8%;

    width: 53%;

    z-index: 3;

    color: #222;
  }


  .s6-device-mini-brand {
    display: flex;
    align-items: center;

    margin-bottom: 12px;
  }


  .s6-device-mini-mark {
    position: relative;

    width: 11px;
    height: 21px;

    flex: 0 0 11px;

    margin-right: 5px;

    border-left: 1px solid rgba(35,30,25,.85);
  }


  .s6-device-mini-mark::after {
    content: "";

    position: absolute;

    left: 2px;
    top: 6px;

    width: 7px;
    height: 7px;

    border: 1px solid rgba(35,30,25,.85);
    border-left-color: transparent;
    border-bottom-color: transparent;

    border-radius: 50%;
  }


  .s6-device-mini-brand > div {
    display: flex;
    flex-direction: column;
  }


  .s6-device-mini-brand strong {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(5px, .34vw, 7px);
    line-height: 1;

    font-weight: 400;
  }


  .s6-device-mini-brand small {
    margin-top: 2px;

    font-size: clamp(2.5px, .19vw, 4px);
    letter-spacing: .10em;
  }


  .s6-device-title {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(10px, .72vw, 14px);
    line-height: .94;

    font-weight: 400;
  }


  .s6-device-title span {
    color: #a86b27;
  }



  /* =======================================================
     2. ГЛАВНЫЙ HERO — немного крупнее
     ======================================================= */

  .s6-hero {
    left: 23.8% !important;
    top: 22.2% !important;

    width: 50.9% !important;
    height: 46.5% !important;
  }


  /* Заголовок внутри hero немного увереннее */

  .s6-hero-copy {
    left: 5.0% !important;
    top: 6.1% !important;

    width: 47% !important;
  }


  .s6-hero-copy h2 {
    font-size: clamp(31px, 2.18vw, 42px) !important;
    line-height: .97 !important;
  }


  .s6-hero-copy > p {
    font-size: clamp(7.5px, .51vw, 9.5px) !important;
  }


  .s6-hero-link {
    font-size: clamp(6.5px, .47vw, 8.5px) !important;
  }



  /* =======================================================
     3. НИЖНИЙ РЯД
     Сохраняем общий уровень карточек под увеличенным hero
     ======================================================= */

  .s6-lower {
    top: 70.2% !important;
    height: 19.8% !important;
  }



  /* =======================================================
     4. ANALYSIS CARD
     ======================================================= */

  .s6-analysis-card > img {
    object-fit: cover !important;
    object-position: center center !important;
  }


  /*
   * Лёгкое осветление только левой области изображения,
   * чтобы текст читался без тяжёлой белой плашки.
   */
  .s6-analysis-card::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        rgba(248,244,237,.97) 0%,
        rgba(248,244,237,.90) 29%,
        rgba(248,244,237,.48) 48%,
        rgba(248,244,237,.08) 65%,
        rgba(248,244,237,0) 76%
      );

    z-index: 1;
  }


  .s6-analysis-copy {
    position: absolute;

    left: 4.4%;
    top: 7%;

    width: 47%;
    height: 88%;

    z-index: 2;
  }


  .s6-analysis-copy h3 {
    margin: 0 0 5px;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;

    font-size: clamp(15px, 1.05vw, 20px);
    line-height: .98;
  }


  .s6-analysis-intro {
    margin: 0 0 7px;

    font-size: clamp(4.5px, .32vw, 6px);
    line-height: 1.25;
  }


  .s6-analysis-points {
    width: 100%;
  }


  .s6-analysis-point {
    display: grid;

    grid-template-columns: 22px 1fr;

    gap: 6px;

    padding: 4px 0;

    border-top: 1px solid rgba(70,55,40,.13);
  }


  .s6-analysis-point > span {
    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(170,107,39,.50);
    border-radius: 50%;

    color: #a86b27;

    font-size: clamp(4px, .27vw, 5px);
  }


  .s6-analysis-point strong {
    display: block;

    margin-bottom: 1px;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;

    font-size: clamp(5px, .38vw, 7px);
    line-height: 1.15;
  }


  .s6-analysis-point p {
    margin: 0;

    font-size: clamp(3.6px, .27vw, 5px);
    line-height: 1.22;
  }



  /* =======================================================
     5. ПРАВАЯ КОЛОНКА — читаемость
     Положение самой колонки НЕ меняем
     ======================================================= */

  .s6-right-block h3 {
    font-size: clamp(11px, .82vw, 15px) !important;
    line-height: 1.44 !important;
  }


  .s6-right-muted {
    font-size: clamp(10px, .72vw, 13px) !important;
    line-height: 1.44 !important;

    color: rgba(20,20,20,.57) !important;
  }


  .s6-right-final p {
    font-size: clamp(10px, .72vw, 13px) !important;
    line-height: 1.40 !important;
  }


  .s6-video-caption,
  .s6-domain {
    opacity: .82;
  }


  /*
   * Чуть компактнее вертикальные интервалы,
   * чтобы увеличение текста не растянуло колонку.
   */

  .s6-right-gold-line {
    margin-top: 17px !important;
    margin-bottom: 18px !important;
  }


  .s6-difference .s6-right-muted {
    margin-top: 14px !important;
  }


  .s6-trust-card {
    margin-top: 15px !important;
  }


  .s6-right-final {
    margin-top: 24px !important;
  }


  .s6-right-final p {
    margin-bottom: 16px !important;
  }

}



/* =========================================================
   SCREEN 06 — ЛЕВЫЙ БЛОК НЕМНОГО ВЫШЕ
   ========================================================= */

@media (min-width: 1101px) {
  .s6-left {
    top: 23.6% !important;
  }
}



/* =========================================================
   SCREEN 06 — HERO LOGO
   форма знака ближе к оригиналу + чуть крупнее название
   ========================================================= */

@media (min-width: 1101px) {

  /* Весь маленький логотип внутри центрального hero */
  .s6-hero-mini-brand {
    align-items: center !important;
  }


  /* -------------------------------------------------------
     ЗНАК

     Старую CSS-конструкцию полностью убираем
     и строим более точный знак кодом через SVG.
     ------------------------------------------------------- */

  .s6-hero-mark {
    position: relative !important;

    display: block !important;
    flex: 0 0 auto !important;

    width: 30px !important;
    height: 43px !important;

    margin-right: 11px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 44'%3E%3Cpath d='M7 1.5 L7 42.5 M7 12.5 C18 12.5 25 19 25 28 C25 35 22 39 17 41.5' fill='none' stroke='%2325221e' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }


  /* Полностью отключаем старые детали знака */
  .s6-hero-mark::before,
  .s6-hero-mark::after {
    content: none !important;
    display: none !important;
  }


  /* -------------------------------------------------------
     НАЗВАНИЕ
     ------------------------------------------------------- */

  .s6-hero-mini-brand > div {
    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
  }


  .s6-hero-mini-brand strong {
    font-family: Georgia, "Times New Roman", serif !important;

    font-size: clamp(8.5px, .64vw, 12px) !important;
    line-height: 1.05 !important;

    font-weight: 400 !important;

    letter-spacing: 0 !important;
  }


  /* АНАЛИТИЧЕСКАЯ ПРАКТИКА */
  .s6-hero-mini-brand small {
    margin-top: 3px !important;

    font-size: clamp(3.5px, .32vw, 6px) !important;
    line-height: 1 !important;

    letter-spacing: .15em !important;
  }

}



/* =========================================================
   SCREEN 06 — HERO LOGO
   точная корректировка формы знака
   ========================================================= */

@media (min-width: 1101px) {

  .s6-hero-mark {
    width: 36px !important;
    height: 56px !important;

    flex: 0 0 36px !important;

    margin-right: 12px !important;

    border: 0 !important;
    background: none !important;

    position: relative !important;
  }


  /*
   * Длинная вертикальная ось —
   * проходит выше и ниже дуги,
   * как в оригинальном логотипе.
   */
  .s6-hero-mark::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    left: 14px !important;
    top: 0 !important;

    width: 1px !important;
    height: 56px !important;

    background: #25221e !important;

    transform: none !important;
  }


  /*
   * Отдельная плавная дуга.
   * Начинается левее вертикальной линии,
   * пересекает её и раскрывается вправо.
   */
  .s6-hero-mark::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    left: 0 !important;
    top: 9px !important;

    width: 36px !important;
    height: 43px !important;

    border: 0 !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 43'%3E%3Cpath d='M1 10 C6 4.5 11 2 16 2 C27 2 34 10 35 21 C36 29 33 36 29 40' fill='none' stroke='%2325221e' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  }

}



/* =========================================================
   SCREEN 06 — RIGHT BLOCK UP / NUMBER DOWN
   ========================================================= */

@media (min-width: 1101px) {


  /* -------------------------------------------------------
     1. ВЕСЬ ПРАВЫЙ БЛОК
     Поднимаем примерно на 1 см.
     Размеры и внутреннюю геометрию не меняем.
     ------------------------------------------------------- */

  .s6-right {
    transform: translateY(-38px) !important;
  }


  /* -------------------------------------------------------
     2. НУМЕРАЦИЯ 06 / 08
     Переносим из верхнего угла вниз.
     ------------------------------------------------------- */

  .s6-page-number {
    top: auto !important;
    bottom: 1.2% !important;

    right: .5% !important;

    transform: none !important;
  }

}



/* =========================================================
   SCREEN 06 — НИЖНИЙ ЛЕВЫЙ КАДР
   убрать светлую нижнюю панель + показать тарелочку целиком
   ========================================================= */

@media (min-width: 1101px) {

  /* 1. Полностью убираем светлый прямоугольник и его текст */
  .s6-case-left-footer {
    display: none !important;
  }


  /* 2. Само изображение не меняем и не масштабируем вручную.
        Смещаем видимую область вниз по исходнику,
        то есть фотография визуально поднимается внутри рамки.
        Благодаря этому нижняя правая тарелочка входит в кадр. */
  .s6-case-left > img {
    object-fit: cover !important;
    object-position: center 76% !important;
  }

}



/* =========================================================
   SCREEN 06 — LEFT COLUMN COMPACT
   возвращаем последнюю строку без перемещения нижнего кадра
   ========================================================= */

@media (min-width: 1101px) {

  /* Логотип ближе к заголовку */
  .s6-left .s6-brand {
    margin-bottom: 16px !important;
  }


  /* Заголовок немного компактнее по вертикали */
  .s6-left h2 {
    margin-bottom: 13px !important;
    line-height: 1.02 !important;
  }


  /* Основные текстовые блоки */
  .s6-left .s6-left-copy {
    line-height: 1.38 !important;
  }


  /* Уменьшаем большой промежуток вокруг золотой линии */
  .s6-left .s6-gold-line {
    margin-top: 13px !important;
    margin-bottom: 12px !important;
  }


  /* Второй текст собираем ещё чуть плотнее */
  .s6-left .s6-left-copy-bottom {
    line-height: 1.34 !important;
    margin-bottom: 0 !important;
  }

}



/* =========================================================
   SCREEN 06 — НИЖНИЙ ПРАВЫЙ КАДР
   убираем белую таблицу и усиливаем основной текст
   ========================================================= */

@media (min-width: 1101px) {


  /* -------------------------------------------------------
     1. Полностью удаляем белый прямоугольник
        вместе со всеми тремя колонками текста
     ------------------------------------------------------- */

  .s6-case-right .s6-services {
    display: none !important;
  }


  /* -------------------------------------------------------
     2. Основной текст свободно располагаем
        в левой чистой области фотографии
     ------------------------------------------------------- */

  .s6-case-right .s6-case-right-copy {
    left: 4.5% !important;
    top: 9% !important;

    width: 52% !important;
    height: auto !important;
  }


  /* -------------------------------------------------------
     3. Заголовок "Когда нас приглашают"
     ------------------------------------------------------- */

  .s6-case-right .s6-case-right-copy h3 {
    margin: 0 0 13px !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;

    font-size: clamp(19px, 1.35vw, 26px) !important;
    line-height: 1.02 !important;

    color: #171513 !important;
  }


  /* -------------------------------------------------------
     4. Поясняющий основной текст
     ------------------------------------------------------- */

  .s6-case-right .s6-case-right-intro {
    margin: 0 !important;

    width: 88% !important;

    font-size: clamp(8px, .57vw, 11px) !important;
    line-height: 1.42 !important;

    color: rgba(20,20,20,.76) !important;
  }

}



/* =========================================================
   SCREEN 06 — FINAL POLISH
   Только читаемость. Геометрию крупных блоков не меняем.
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     ЛЕВЫЙ ТЕКСТОВЫЙ СТОЛБЕЦ
     Чуть более уверенный серый текст
     ======================================================= */

  .s6-left .s6-left-copy {
    color: rgba(20,20,20,.68) !important;
  }

  .s6-left .s6-left-copy-bottom {
    color: rgba(20,20,20,.70) !important;
  }



  /* =======================================================
     НИЖНИЙ ЛЕВЫЙ КАДР
     Мелкий текст под заголовком увеличиваем примерно на 18%
     ======================================================= */

  .s6-case-left .s6-case-left-copy p {
    font-size: clamp(6px, .42vw, 8.2px) !important;
    line-height: 1.34 !important;

    color: rgba(25,22,18,.82) !important;
  }


  /* Если там сохранилась маленькая ссылка — тоже чуть читаемее */

  .s6-case-left .s6-case-links {
    font-size: clamp(5px, .36vw, 7px) !important;
    line-height: 1.25 !important;
  }



  /* =======================================================
     НИЖНИЙ ПРАВЫЙ КАДР
     Заголовок оставляем как есть.
     Поясняющий текст увеличиваем примерно на 22%.
     ======================================================= */

  .s6-case-right .s6-case-right-intro {
    font-size: clamp(9.5px, .69vw, 13px) !important;
    line-height: 1.38 !important;

    width: 90% !important;

    color: rgba(20,20,20,.78) !important;
  }



  /* =======================================================
     ПРАВАЯ КОЛОНКА
     Немного крупнее и контрастнее.
     Положение самой колонки НЕ меняем.
     ======================================================= */

  .s6-right .s6-right-block h3 {
    font-size: clamp(11.5px, .87vw, 15.8px) !important;
    line-height: 1.43 !important;

    color: rgba(18,18,18,.88) !important;
  }


  .s6-right .s6-right-muted {
    font-size: clamp(10.5px, .77vw, 13.8px) !important;
    line-height: 1.43 !important;

    color: rgba(20,20,20,.62) !important;
  }


  .s6-right .s6-right-final p {
    font-size: clamp(10.5px, .77vw, 13.8px) !important;
    line-height: 1.40 !important;

    color: rgba(18,18,18,.86) !important;
  }



  /* =======================================================
     МАЛАЯ КАРТОЧКА СПРАВА
     Подписи внутри чуть более читаемые
     ======================================================= */

  .s6-trust-card-copy h4 {
    color: rgba(20,18,16,.92) !important;
  }

  .s6-trust-card-copy p {
    color: rgba(20,18,16,.70) !important;
  }



  /* =======================================================
     НОУТБУК
     Кадр с книгой лучше ориентируем внутри экрана.
     Сам ноутбук НЕ двигаем.
     ======================================================= */

  .s6-device-screen > img {
    object-fit: cover !important;
    object-position: center center !important;
  }

}


/* SCREEN 06 — удалены нижние ссылки левого кадра */
.s6-case-links {
  display: none !important;
}



/* =========================================================
   SCREEN 06 — FINAL TEXT CONTRAST
   Только яркость и читаемость мелких текстов
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. ЛЕВЫЙ СТОЛБЕЦ
     Размер и расположение не меняем.
     Только делаем серый текст немного темнее.
     ======================================================= */

  .s6-left .s6-left-copy {
    color: rgba(20, 20, 20, .76) !important;
  }

  .s6-left .s6-left-copy-bottom {
    color: rgba(20, 20, 20, .78) !important;
  }



  /* =======================================================
     2. ПРАВАЯ КОЛОНКА
     Усиливаем основной и серый текст.
     Заголовки КОДЕКС ДОВЕРИЯ / ОТЛИЧИЕ не трогаем.
     ======================================================= */

  .s6-right .s6-right-block h3 {
    color: rgba(15, 15, 15, .94) !important;
  }

  .s6-right .s6-right-muted {
    color: rgba(20, 20, 20, .70) !important;
  }

  .s6-right .s6-right-final p {
    color: rgba(15, 15, 15, .93) !important;
  }



  /* =======================================================
     3. НИЖНИЙ ЛЕВЫЙ КАДР
     Четыре маленькие строки делаем крупнее и темнее.
     Заголовок и изображение не трогаем.
     ======================================================= */

  .s6-case-left .s6-case-left-copy p {
    font-size: clamp(6.8px, .47vw, 9px) !important;
    line-height: 1.32 !important;

    color: rgba(18, 16, 14, .88) !important;
  }



  /* =======================================================
     4. НИЖНИЙ ПРАВЫЙ КАДР
     Размер текста уже хороший — только усиливаем контраст.
     ======================================================= */

  .s6-case-right .s6-case-right-intro {
    color: rgba(18, 18, 18, .84) !important;
  }



  /* =======================================================
     5. МАЛАЯ КАРТОЧКА СПРАВА
     Очень лёгкое усиление, без изменения размера.
     ======================================================= */

  .s6-trust-card-copy h4 {
    color: rgba(16, 14, 12, .96) !important;
  }

  .s6-trust-card-copy p {
    color: rgba(20, 18, 16, .78) !important;
  }

}




/* =========================================================
   SCREEN 06 — MULTILANGUAGE
   ========================================================= */

.screen-06 [data-i18n] {
  white-space: pre-line;
}


/* сохраняем цвет строк центрального hero */

.s6-hero-copy h2 .s6-hero-line-dark {
  color: #171513 !important;
}

.s6-hero-copy h2 .s6-hero-line-gold {
  color: #a86621 !important;
}


/* то же для миниатюры в ноутбуке */

.s6-device-line-dark {
  color: #222 !important;
}

.s6-device-line-gold {
  color: #a86b27 !important;
}



/* =========================================================
   SCREEN 07
   ========================================================= */

.screen-07 {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 720px;

  overflow: hidden;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* =========================================================
   PAGE NUMBER
   ========================================================= */

.s7-page-number {
  position: absolute;

  right: 4.1%;
  top: 7.7%;

  display: flex;
  align-items: baseline;
  gap: 9px;

  font-size: clamp(13px, .95vw, 18px);
  line-height: 1;

  letter-spacing: .04em;

  color: #171717;
}

.s7-page-slash,
.s7-page-total {
  color: rgba(25,25,25,.42);
}



/* =========================================================
   MAIN TITLE
   ========================================================= */

.s7-main-title {
  position: absolute;

  left: 6.2%;
  top: 7.7%;

  width: 35%;

  margin: 0;

  white-space: pre-line;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(35px, 3.15vw, 61px);
  line-height: 1.03;

  letter-spacing: -.018em;

  color: #171615;
}



/* =========================================================
   STORY
   ========================================================= */

.s7-story {
  position: absolute;

  left: 2.3%;
  right: 2.3%;

  top: 25.0%;
  height: 37.5%;

  display: grid;

  grid-template-columns:
    minmax(320px, 1.12fr)
    minmax(290px, .84fr)
    minmax(320px, 1.12fr);

  gap: 3.2%;
}



/* =========================================================
   CARDS
   ========================================================= */

.s7-card {
  position: relative;

  overflow: hidden;

  border-radius: 7px;
}

.s7-card-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* AORA */

.s7-card-aora .s7-card-image {
  object-position: center 48%;
}

.s7-card-aora-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3,8,13,.61) 0%,
      rgba(3,8,13,.27) 42%,
      rgba(3,8,13,.03) 74%
    );
}


/* CODEX */

.s7-card-codex .s7-card-image {
  object-position: 69% center;

  transform: scale(1.03);
}

.s7-card-codex-wash {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(246,239,228,.95) 0%,
      rgba(246,239,228,.72) 40%,
      rgba(246,239,228,.10) 71%
    );
}



.s7-card-copy {
  position: absolute;

  left: 7%;
  top: 9%;

  z-index: 3;
}

.s7-card-copy-aora {
  color: #fff;
}

.s7-card-copy-codex {
  color: #1c1916;
}



.s7-card-kicker {
  margin-bottom: 16px;

  font-size: clamp(12px, .93vw, 17px);

  letter-spacing: .22em;
}

.s7-card-kicker-dark {
  color: #1d1a17;
}



.s7-mini-gold-line {
  width: 34px;
  height: 1px;

  margin-bottom: 20px;

  background: #a86b27;
}



.s7-card-copy p {
  margin: 0;

  white-space: pre-line;

  font-size: clamp(13px, 1.02vw, 18px);
  line-height: 1.55;
}



/* =========================================================
   CENTER
   ========================================================= */

.s7-center {
  position: relative;

  padding: 0 3%;
}


.s7-center-top {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 44px 1fr;

  align-items: center;

  gap: 19px;

  margin: 3.5% 0 8%;
}


.s7-center-top > span {
  display: block;

  height: 1px;

  background: rgba(20,20,20,.27);
}


.s7-down-arrow {
  position: relative;

  width: 44px;
  height: 50px;

  margin: auto;
}


.s7-down-arrow i::before {
  content: "";

  position: absolute;

  left: 21px;
  top: 0;

  width: 1px;
  height: 42px;

  background: #a86b27;
}


.s7-down-arrow i::after {
  content: "";

  position: absolute;

  left: 15px;
  top: 32px;

  width: 12px;
  height: 12px;

  border-right: 1px solid #a86b27;
  border-bottom: 1px solid #a86b27;

  transform: rotate(45deg);
}



.s7-center h2 {
  margin: 0 0 7%;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(24px, 2.05vw, 39px);
  line-height: 1.10;

  color: #1b1917;
}


.s7-center-muted,
.s7-center-question-label {
  margin: 0;

  white-space: pre-line;

  color: rgba(20,20,20,.59);

  font-size: clamp(13px, 1.0vw, 18px);
  line-height: 1.55;
}


.s7-center-question-label {
  margin-top: 8%;
  margin-bottom: 2%;
}


.s7-center-question {
  margin: 0;

  white-space: pre-line;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(31px, 2.65vw, 50px);
  line-height: 1.05;

  color: #191715;
}



/* =========================================================
   BOTTOM
   ========================================================= */

.s7-bottom {
  position: absolute;

  left: 2.3%;
  right: 2.3%;

  top: 67.7%;
  bottom: 5.8%;

  display: grid;

  grid-template-columns:
    minmax(300px, .98fr)
    minmax(360px, 1.13fr)
    minmax(360px, 1.10fr);

  border-top: 1px solid rgba(25,25,25,.16);
}



.s7-bottom-block {
  position: relative;

  padding: 3.6% 9% 0 8%;

  min-width: 0;
}


.s7-bottom-block + .s7-bottom-block {
  border-left: 1px solid rgba(25,25,25,.16);
}


.s7-bottom-serif {
  margin: 0;

  white-space: pre-line;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(19px, 1.63vw, 31px);
  line-height: 1.28;

  color: #1a1816;
}



.s7-bottom-center {
  padding-left: 8.5%;
  padding-right: 8%;
}


.s7-bottom-center p {
  margin: 0 0 5.2%;

  white-space: pre-line;

  font-size: clamp(11px, .89vw, 16px);
  line-height: 1.50;

  color: rgba(25,25,25,.72);
}


.s7-bottom-center p:last-child {
  margin-bottom: 0;
}



.s7-origin-row {
  display: grid;

  grid-template-columns: 55px 1fr;

  gap: 22px;

  align-items: start;
}


.s7-origin-symbol {
  font-family:
    "Noto Serif CJK SC",
    "Songti SC",
    "SimSun",
    serif;

  font-size: clamp(36px, 3.1vw, 57px);
  line-height: 1;

  color: #171513;
}


.s7-origin-row p {
  margin: 0;

  white-space: pre-line;

  font-size: clamp(10px, .82vw, 15px);
  line-height: 1.50;

  color: rgba(20,20,20,.74);
}


.s7-origin-gold-line {
  width: 1px;
  height: 42px;

  margin: 5.5% 0 3.5% 17px;

  background: #a86b27;
}


.s7-origin-small {
  margin: 0 0 3.7% 72px;

  font-size: clamp(10px, .82vw, 15px);
  line-height: 1.45;

  color: rgba(20,20,20,.72);
}


.s7-bottom-final {
  margin-left: 72px;

  font-size: clamp(20px, 1.70vw, 33px);
}



/* =========================================================
   BOTTOM MARKER
   ========================================================= */

.s7-bottom-marker {
  position: absolute;

  left: 2.3%;
  right: 2.3%;

  bottom: 1.2%;

  display: grid;
  grid-template-columns: 1fr 44px 1fr;

  align-items: center;

  gap: 18px;
}


.s7-bottom-marker span {
  height: 1px;

  background: rgba(20,20,20,.17);
}


.s7-bottom-marker i {
  justify-self: center;

  width: 1px;
  height: 27px;

  background: rgba(20,20,20,.75);
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .screen-07 {
    height: auto;
    min-height: 100vh;

    overflow: visible;

    padding: 120px 5% 80px;
  }

  .s7-main-title,
  .s7-page-number,
  .s7-story,
  .s7-bottom,
  .s7-bottom-marker {
    position: relative;
    inset: auto;
  }

  .s7-main-title {
    width: 78%;
    margin-bottom: 50px;
  }

  .s7-page-number {
    position: absolute;
    top: 92px;
    right: 5%;
  }

  .s7-story {
    height: auto;

    grid-template-columns: 1fr;
    gap: 24px;
  }

  .s7-card {
    min-height: 420px;
  }

  .s7-center {
    padding: 35px 8%;
  }

  .s7-bottom {
    margin-top: 50px;

    grid-template-columns: 1fr;

    border-top: 1px solid rgba(20,20,20,.16);
  }

  .s7-bottom-block {
    padding: 40px 4%;
  }

  .s7-bottom-block + .s7-bottom-block {
    border-left: 0;
    border-top: 1px solid rgba(20,20,20,.16);
  }

  .s7-bottom-marker {
    margin-top: 30px;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .screen-07 {
    padding-left: 22px;
    padding-right: 22px;
  }

  .s7-main-title {
    width: 92%;
  }

  .s7-card {
    min-height: 330px;
  }

  .s7-origin-row {
    grid-template-columns: 45px 1fr;
    gap: 14px;
  }

  .s7-origin-small,
  .s7-bottom-final {
    margin-left: 0;
  }

}







/* =========================================================
   SCREEN 07 — DESKTOP GEOMETRY FIX
   выравниваем по исходному макету
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. ГЛАВНЫЙ ЗАГОЛОВОК
     Должен спокойно помещаться в 3 строки
     ======================================================= */

  .s7-main-title {
    left: 5.8% !important;
    top: 6.0% !important;

    width: 45% !important;

    font-size: clamp(35px, 2.85vw, 55px) !important;
    line-height: 1.03 !important;

    margin: 0 !important;
  }



  /* =======================================================
     2. ОСНОВНОЙ РЯД:
        AORA / ЦЕНТР / КОДЕКС
     ======================================================= */

  .s7-story {
    left: 2.3% !important;
    right: 2.3% !important;

    top: 27.5% !important;
    height: 35.5% !important;

    grid-template-columns:
      minmax(310px, 1.10fr)
      minmax(300px, .88fr)
      minmax(310px, 1.10fr) !important;

    gap: 3.1% !important;
  }



  /* =======================================================
     3. ДВЕ ФОТОКАРТОЧКИ
     Ничего не выходим за пределы основного ряда
     ======================================================= */

  .s7-card {
    height: 100% !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  .s7-card-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
  }


  /* AORA */
  .s7-card-aora .s7-card-image {
    object-position: center 48% !important;
  }


  /* КОДЕКС */
  .s7-card-codex .s7-card-image {
    object-position: 69% center !important;

    transform: scale(1.02) !important;
  }



  /* =======================================================
     4. ЦЕНТРАЛЬНАЯ КОЛОНКА
     Уплотняем, чтобы вопрос полностью остался
     внутри верхнего ряда
     ======================================================= */

  .s7-center {
    padding: 0 4.2% !important;

    min-width: 0 !important;
    overflow: visible !important;
  }


  .s7-center-top {
    margin-top: 1.5% !important;
    margin-bottom: 7% !important;

    grid-template-columns: 1fr 38px 1fr !important;

    gap: 15px !important;
  }


  .s7-down-arrow {
    width: 38px !important;
    height: 44px !important;
  }


  .s7-down-arrow i::before {
    left: 18px !important;

    height: 36px !important;
  }


  .s7-down-arrow i::after {
    left: 12px !important;
    top: 27px !important;
  }



  /* Главная центральная фраза */

  .s7-center h2 {
    margin: 0 0 6.5% !important;

    font-size: clamp(23px, 1.78vw, 34px) !important;
    line-height: 1.08 !important;
  }



  /* Не с дизайна... */

  .s7-center-muted {
    font-size: clamp(12px, .88vw, 16px) !important;
    line-height: 1.44 !important;
  }



  /* А с вопроса */

  .s7-center-question-label {
    margin-top: 6.2% !important;
    margin-bottom: 2.2% !important;

    font-size: clamp(12px, .88vw, 16px) !important;
    line-height: 1.35 !important;
  }



  /* Что здесь действительно важно? */

  .s7-center-question {
    margin: 0 !important;

    font-size: clamp(27px, 2.15vw, 41px) !important;
    line-height: 1.03 !important;

    white-space: pre-line !important;
  }



  /* =======================================================
     5. НИЖНИЙ ЭТАЖ
     Полностью отделяем его от фотографий
     ======================================================= */

  .s7-bottom {
    left: 2.3% !important;
    right: 2.3% !important;

    top: 68.2% !important;
    bottom: 4.5% !important;

    grid-template-columns:
      minmax(290px, .92fr)
      minmax(350px, 1.08fr)
      minmax(350px, 1.08fr) !important;
  }



  .s7-bottom-block {
    padding-top: 3.0% !important;
    padding-left: 7.2% !important;
    padding-right: 7.2% !important;

    overflow: hidden !important;
  }



  /* =======================================================
     6. НИЖНИЙ ЛЕВЫЙ ТЕКСТ
     ======================================================= */

  .s7-bottom-left .s7-bottom-serif {
    font-size: clamp(18px, 1.42vw, 27px) !important;
    line-height: 1.25 !important;
  }



  /* =======================================================
     7. НИЖНИЙ ЦЕНТРАЛЬНЫЙ ТЕКСТ
     ======================================================= */

  .s7-bottom-center {
    padding-left: 7.5% !important;
    padding-right: 7.5% !important;
  }


  .s7-bottom-center p {
    margin: 0 0 3.8% !important;

    font-size: clamp(10px, .76vw, 14px) !important;
    line-height: 1.38 !important;
  }


  .s7-bottom-center p:last-child {
    margin-bottom: 0 !important;
  }



  /* =======================================================
     8. НИЖНИЙ ПРАВЫЙ БЛОК
     Иероглиф и тексты теперь только ниже фотографии
     ======================================================= */

  .s7-bottom-right {
    padding-left: 7% !important;
    padding-right: 6% !important;
  }


  .s7-origin-row {
    grid-template-columns: 48px 1fr !important;

    gap: 18px !important;

    align-items: start !important;
  }


  .s7-origin-symbol {
    font-size: clamp(34px, 2.75vw, 51px) !important;
    line-height: .95 !important;
  }


  .s7-origin-row p {
    font-size: clamp(9px, .71vw, 13px) !important;
    line-height: 1.40 !important;
  }


  .s7-origin-gold-line {
    height: 34px !important;

    margin-top: 4.2% !important;
    margin-bottom: 2.8% !important;
    margin-left: 14px !important;
  }


  .s7-origin-small {
    margin-left: 62px !important;
    margin-bottom: 3.0% !important;

    font-size: clamp(9px, .71vw, 13px) !important;
    line-height: 1.35 !important;
  }


  .s7-bottom-final {
    margin-left: 62px !important;

    font-size: clamp(18px, 1.43vw, 27px) !important;
    line-height: 1.22 !important;
  }



  /* =======================================================
     9. НИЖНИЙ МАРКЕР
     ======================================================= */

  .s7-bottom-marker {
    bottom: 1.0% !important;
  }

}



/* =========================================================
   SCREEN 07 — GEOMETRY PASS 2
   Финальное разделение верхнего и нижнего этажей
   ========================================================= */

@media (min-width: 1101px) {


  /* -------------------------------------------------------
     1. Главный заголовок
     немного выше и компактнее
     ------------------------------------------------------- */

  .s7-main-title {
    top: 4.8% !important;
    left: 5.8% !important;

    width: 47% !important;

    font-size: clamp(34px, 2.65vw, 51px) !important;
    line-height: 1.02 !important;
  }



  /* -------------------------------------------------------
     2. Весь ряд AORA / центр / CODEX
     поднимаем выше
     ------------------------------------------------------- */

  .s7-story {
    top: 24.2% !important;
    height: 35.2% !important;

    left: 2.3% !important;
    right: 2.3% !important;
  }



  /* -------------------------------------------------------
     3. Центральная колонка
     делаем немного компактнее по вертикали
     ------------------------------------------------------- */

  .s7-center {
    padding-left: 4.5% !important;
    padding-right: 4.5% !important;
  }


  .s7-center-top {
    margin-top: 1% !important;
    margin-bottom: 5.2% !important;
  }


  .s7-center h2 {
    margin-bottom: 5.0% !important;

    font-size: clamp(22px, 1.70vw, 32px) !important;
    line-height: 1.07 !important;
  }


  .s7-center-muted {
    font-size: clamp(11px, .82vw, 15px) !important;
    line-height: 1.42 !important;
  }


  .s7-center-question-label {
    margin-top: 4.8% !important;
    margin-bottom: 1.8% !important;
  }


  .s7-center-question {
    font-size: clamp(25px, 1.95vw, 37px) !important;
    line-height: 1.02 !important;
  }



  /* -------------------------------------------------------
     4. Нижний этаж
     начинается ПОСЛЕ карточек с небольшим воздухом
     ------------------------------------------------------- */

  .s7-bottom {
    top: 63.3% !important;
    bottom: 4.8% !important;

    left: 2.3% !important;
    right: 2.3% !important;
  }



  /* -------------------------------------------------------
     5. Нижний левый блок
     ------------------------------------------------------- */

  .s7-bottom-left {
    padding-top: 3.2% !important;
  }


  .s7-bottom-left .s7-bottom-serif {
    font-size: clamp(17px, 1.34vw, 25px) !important;
    line-height: 1.23 !important;
  }



  /* -------------------------------------------------------
     6. Нижний центральный текст
     компактнее, чтобы полностью вошёл в экран
     ------------------------------------------------------- */

  .s7-bottom-center {
    padding-top: 3.0% !important;
  }


  .s7-bottom-center p {
    margin-bottom: 3.2% !important;

    font-size: clamp(9.5px, .72vw, 13px) !important;
    line-height: 1.34 !important;
  }



  /* -------------------------------------------------------
     7. Правый философский блок
     целиком располагаем ниже фотографии
     ------------------------------------------------------- */

  .s7-bottom-right {
    padding-top: 3.0% !important;
  }


  .s7-origin-row {
    grid-template-columns: 46px 1fr !important;
    gap: 17px !important;
  }


  .s7-origin-symbol {
    font-size: clamp(32px, 2.45vw, 47px) !important;
  }


  .s7-origin-row p {
    font-size: clamp(9px, .68vw, 12.5px) !important;
    line-height: 1.36 !important;
  }


  .s7-origin-gold-line {
    height: 30px !important;

    margin-top: 3.3% !important;
    margin-bottom: 2.2% !important;
    margin-left: 13px !important;
  }


  .s7-origin-small {
    margin-left: 60px !important;
    margin-bottom: 2.3% !important;

    font-size: clamp(9px, .68vw, 12.5px) !important;
    line-height: 1.32 !important;
  }


  .s7-bottom-final {
    margin-left: 60px !important;

    font-size: clamp(17px, 1.34vw, 25px) !important;
    line-height: 1.19 !important;
  }



  /* -------------------------------------------------------
     8. Нижняя декоративная линия
     ------------------------------------------------------- */

  .s7-bottom-marker {
    bottom: .7% !important;
  }

}



/* =========================================================
   SCREEN 07 — compact title + much brighter left image
   ========================================================= */

@media (min-width: 1101px) {

  /* 1) Верхний главный заголовок */
  .s7-main-title {
    width: 40% !important;
    font-size: clamp(29px, 2.18vw, 42px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.01em !important;
  }


  /* 2) Левую карточку слегка опускаем, чтобы не лезла в заголовок */
  .s7-story-left {
    margin-top: 1.4% !important;
  }


  /* 3) Левую картинку делаем ГОРАЗДО светлее */
  .s7-story-left img,
  .s7-story-left .card-image,
  .s7-story-left .story-image,
  .s7-story-left picture img {
    filter: brightness(1.55) contrast(1.08) saturate(1.03) !important;
  }


  /* 4) Если сверху есть затемняющий слой — ослабляем его */
  .s7-story-left::before,
  .s7-story-left .image-overlay,
  .s7-story-left .card-overlay {
    opacity: 0.18 !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.18) 100%
    ) !important;
  }


  /* 5) Белый текст на левой карточке оставляем читаемым */
  .s7-story-left .card-title,
  .s7-story-left .card-text,
  .s7-story-left .card-label,
  .s7-story-left .story-title,
  .s7-story-left .story-text {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.28) !important;
  }
}


/* =========================================================
   SCREEN 07 — опустить верхний заголовок и сильнее осветлить левую картинку
   ========================================================= */

@media (min-width: 1101px) {

  /* 1) Опускаем верхний заголовок на 1.5 см */
  .s7-main-title {
    margin-top: 1.5cm !important;
  }

  /* 2) Ещё сильнее осветляем левую карточку */
  .s7-story-left img,
  .s7-story-left .card-image,
  .s7-story-left .story-image,
  .s7-story-left picture img {
    filter: brightness(1.9) contrast(1.1) saturate(1.05) !important;
  }

  /* 3) Ещё сильнее ослабляем затемнение сверху */
  .s7-story-left::before,
  .s7-story-left .image-overlay,
  .s7-story-left .card-overlay {
    opacity: 0.08 !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.08) 100%
    ) !important;
  }
}



/* =========================================================
   SCREEN 07 — POLISH PASS 3
   Точная доводка композиции
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. ВЕРХНИЙ ЗАГОЛОВОК
     немного вправо, плотнее по строкам
     вертикальное положение сохраняем
     ======================================================= */

  .s7-main-title {
    left: calc(5.8% + .8cm) !important;

    top: 4.8% !important;
    margin-top: 1.5cm !important;

    width: 40% !important;

    font-size: clamp(29px, 2.18vw, 42px) !important;
    line-height: .95 !important;
    letter-spacing: -.012em !important;
  }



  /* =======================================================
     2. ЛЕВАЯ КАРТИНКА AORA
     реально осветляем ИМЕННО существующий img
     ======================================================= */

  .s7-card-aora .s7-card-image {
    filter:
      brightness(1.62)
      contrast(1.03)
      saturate(1.06) !important;

    object-position: center 48% !important;
  }


  /* Ослабляем тёмную вуаль поверх изображения */

  .s7-card-aora-shade {
    background:
      linear-gradient(
        90deg,
        rgba(3,8,13,.25) 0%,
        rgba(3,8,13,.11) 43%,
        rgba(3,8,13,.015) 76%
      ) !important;
  }


  /* Белый текст оставляем уверенно читаемым */

  .s7-card-copy-aora {
    color: #fff !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.35) !important;
  }



  /* =======================================================
     3. ПРАВЫЙ КАДР CODEX
     опускаем примерно на 5–6 мм,
     не меняя положения левого кадра
     ======================================================= */

  .s7-card-codex {
    top: .55cm !important;

    height: calc(100% - .55cm) !important;
  }



  /* =======================================================
     4. ЦЕНТРАЛЬНЫЙ БЛОК
     поднимаем примерно на 6 мм
     ======================================================= */

  .s7-center {
    transform: translateY(-.6cm) !important;
  }


  /* Центральный вопрос немного спокойнее */

  .s7-center-question {
    font-size: clamp(23px, 1.78vw, 34px) !important;
    line-height: 1.02 !important;
  }



  /* =======================================================
     5. НИЖНИЙ ЭТАЖ
     опускаем разделительную линию примерно на 5 мм,
     но сохраняем полезную высоту блока
     ======================================================= */

  .s7-bottom {
    top: calc(63.3% + .5cm) !important;
    bottom: 2.7% !important;
  }



  /* =======================================================
     6. НИЖНИЙ ЛЕВЫЙ ТЕКСТ
     чуть меньше и компактнее
     ======================================================= */

  .s7-bottom-left .s7-bottom-serif {
    font-size: clamp(16px, 1.23vw, 23px) !important;
    line-height: 1.19 !important;
  }



  /* =======================================================
     7. НИЖНИЙ ЦЕНТРАЛЬНЫЙ ТЕКСТ
     немного крупнее и заметно контрастнее
     ======================================================= */

  .s7-bottom-center p {
    font-size: clamp(10.3px, .79vw, 14.2px) !important;
    line-height: 1.36 !important;

    color: rgba(20,20,20,.82) !important;

    margin-bottom: 3.1% !important;
  }



  /* =======================================================
     8. ПРАВЫЙ НИЖНИЙ БЛОК
     пояснение оставляем,
     финальную фразу поднимаем ближе к нему
     ======================================================= */

  .s7-origin-row p {
    color: rgba(20,20,20,.80) !important;
  }


  .s7-origin-small {
    color: rgba(20,20,20,.78) !important;
  }


  .s7-bottom-final {
    position: relative !important;

    top: -.45cm !important;

    font-size: clamp(17px, 1.34vw, 25px) !important;
    line-height: 1.18 !important;
  }



  /* =======================================================
     9. НИЖНИЙ МАРКЕР
     чуть ниже, чтобы не мешал тексту
     ======================================================= */

  .s7-bottom-marker {
    bottom: .35% !important;
  }

}



/* =========================================================
   SCREEN 07 — картинки ниже и ближе к центру
   + главный заголовок немного выше
   ========================================================= */

@media (min-width: 1101px) {


  /* -------------------------------------------------------
     1. Главный заголовок немного поднимаем
     Размер, ширину и шрифт НЕ меняем
     ------------------------------------------------------- */

  .s7-main-title {
    margin-top: 1.0cm !important;
  }


  /* -------------------------------------------------------
     2. Левая картинка AORA
     ниже + вправо к центру
     ------------------------------------------------------- */

  .s7-card-aora {
    position: relative !important;

    transform:
      translateX(.75cm)
      translateY(.75cm) !important;
  }


  /* -------------------------------------------------------
     3. Правая картинка CODEX
     ниже + влево к центру

     Убираем предыдущий отдельный top,
     чтобы обе картинки двигались одинаково.
     ------------------------------------------------------- */

  .s7-card-codex {
    position: relative !important;

    top: 0 !important;
    height: 100% !important;

    transform:
      translateX(-.75cm)
      translateY(.75cm) !important;
  }

}


/* =========================================================
   SCREEN 07 — нумерация вниз
   ========================================================= */

@media (min-width: 1101px) {

  .s7-page-number {
    top: auto !important;
    bottom: 2.2% !important;

    right: 4.1% !important;
  }

}


/* =========================================================
   SCREEN 07 — немного разводим два правых нижних текста
   ========================================================= */

@media (min-width: 1101px) {

  .s7-bottom-final {
    top: -0.10cm !important;
    margin-top: 0.18cm !important;
  }

}



/* =========================================================
   SCREEN 08 / FINAL PAGE
   ========================================================= */

.screen-08 {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 720px;

  overflow: hidden;

  background: #f7f6f2;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  isolation: isolate;
}


/* =========================================================
   PAGE NUMBER
   ========================================================= */

.s8-page-number {
  position: absolute;

  right: 4.1%;
  top: 8.7%;

  display: flex;
  gap: 9px;
  align-items: baseline;

  font-size: clamp(13px, .95vw, 18px);
  line-height: 1;

  letter-spacing: .04em;

  color: #171717;
}

.s8-page-slash,
.s8-page-total {
  color: rgba(20,20,20,.40);
}



/* =========================================================
   MAIN AREA
   ========================================================= */

.s8-main {
  position: absolute;

  left: 9.8%;
  right: 20.5%;

  top: 10.2%;
  height: 55.2%;

  display: grid;

  grid-template-columns:
    minmax(360px, 1fr)
    1px
    minmax(330px, .82fr);

  column-gap: 8.8%;
}



/* =========================================================
   LEFT COLUMN
   ========================================================= */

.s8-left {
  padding-top: 8.8%;
}


.s8-left-lead,
.s8-left-final {
  margin: 0;

  white-space: pre-line;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  color: #24211f;
}


.s8-left-lead {
  max-width: 520px;

  font-size: clamp(18px, 1.47vw, 28px);
  line-height: 1.37;
}


.s8-left-muted {
  margin: 7.3% 0 0;

  white-space: pre-line;

  font-size: clamp(13px, 1.05vw, 19px);
  line-height: 1.48;

  color: rgba(30,30,30,.50);
}


.s8-gold-line {
  width: 40px;
  height: 1px;

  margin: 7.8% 0 6.2%;

  background: #ad722d;
}


.s8-left-final {
  max-width: 470px;

  font-size: clamp(17px, 1.38vw, 26px);
  line-height: 1.38;
}



/* =========================================================
   VERTICAL DIVIDER
   ========================================================= */

.s8-main-divider {
  width: 1px;
  height: 100%;

  background: rgba(25,25,25,.16);
}



/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.s8-right {
  padding-top: 0;
}



/* =========================================================
   ALEZERIA BRAND
   ========================================================= */

.s8-brand {
  margin-left: 0;
  margin-bottom: 5.5%;

  width: max-content;

  text-align: center;
}


.s8-brand-symbol {
  position: relative;

  width: 64px;
  height: 70px;

  margin: 0 auto 8px;
}


/*
   Временная кодовая реконструкция знака.
   Позже при необходимости заменим
   на точный существующий знак ALEZERIA.
*/

.s8-mark-left,
.s8-mark-right {
  position: absolute;

  top: 6px;

  width: 23px;
  height: 59px;

  background: #151515;

  border-radius: 60% 40% 58% 42%;
}


.s8-mark-left {
  left: 7px;

  transform: rotate(-13deg);
}


.s8-mark-right {
  right: 7px;

  transform: rotate(13deg);
}


.s8-mark-center {
  position: absolute;

  left: 26px;
  top: 3px;

  width: 12px;
  height: 65px;

  background: #f7f6f2;

  border-radius: 55%;

  transform: rotate(1deg);
}


.s8-brand-name {
  font-family: Arial, Helvetica, sans-serif;

  font-size: clamp(19px, 1.65vw, 31px);
  line-height: 1;

  letter-spacing: .18em;

  color: #1c1b1a;
}



/* =========================================================
   RIGHT COPY
   ========================================================= */

.s8-right-title {
  margin: 0 0 5.7%;

  white-space: pre-line;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(24px, 2.03vw, 39px);
  line-height: 1.08;

  color: #24211f;
}


.s8-right-intro,
.s8-right-note {
  margin: 0;

  white-space: pre-line;

  font-size: clamp(11px, .87vw, 16px);
  line-height: 1.50;

  color: #272522;
}


.s8-right-note {
  margin-top: 7.2%;
}



/* =========================================================
   CONTACTS
   ========================================================= */

.s8-contacts {
  margin-top: 7.5%;

  border-top: 1px solid rgba(25,25,25,.18);
}


.s8-contact {
  min-height: 78px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  text-decoration: none;

  border-bottom: 1px solid rgba(25,25,25,.20);

  color: #1e1d1b;

  transition:
    padding-left .2s ease,
    padding-right .2s ease;
}


.s8-contact:hover {
  padding-left: 7px;
  padding-right: 5px;
}


.s8-contact-copy {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


.s8-contact-label {
  font-size: clamp(9px, .70vw, 12px);
  line-height: 1;

  letter-spacing: .15em;

  color: #a86b27;
}


.s8-contact-value {
  font-size: clamp(15px, 1.18vw, 22px);
  line-height: 1;

  color: #171717;
}


.s8-contact-arrow {
  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(20px, 1.5vw, 28px);

  color: #a86b27;
}



/* =========================================================
   FINAL QUESTION AREA
   ========================================================= */

.s8-question {
  position: absolute;

  left: 2.9%;
  right: 2.9%;

  top: 69.0%;
  height: 21.4%;

  border-top: 1px solid rgba(25,25,25,.16);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


.s8-question-intro {
  margin: 2.2% 0 1.0%;

  white-space: pre-line;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(12px, .96vw, 17px);
  line-height: 1.40;

  color: #2b2926;
}


.s8-question-main {
  margin: 0;

  max-width: 740px;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;

  font-size: clamp(31px, 2.68vw, 51px);
  line-height: 1.04;

  color: #171614;
}


.s8-question-main > span {
  white-space: pre-line;
}


.s8-question-main em {
  font-weight: 400;

  white-space: nowrap;
}



/* =========================================================
   FOOTER
   ========================================================= */

.s8-footer {
  position: absolute;

  left: 2.9%;
  right: 2.9%;

  bottom: 1.8%;
  height: 7.8%;

  border-top: 1px solid rgba(25,25,25,.16);

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}


.s8-footer-brand {
  font-family: Arial, Helvetica, sans-serif;

  font-size: clamp(13px, 1.03vw, 19px);

  letter-spacing: .22em;

  color: #191817;
}


.s8-footer-services {
  margin-top: 8px;

  font-size: clamp(9px, .67vw, 12px);

  letter-spacing: .24em;

  color: rgba(20,20,20,.80);
}


.s8-footer-copy {
  margin-top: 8px;

  font-size: clamp(8px, .60vw, 11px);

  letter-spacing: .08em;

  color: rgba(20,20,20,.75);
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .screen-08 {
    height: auto;
    min-height: 100vh;

    overflow: visible;

    padding:
      120px
      6%
      60px;
  }


  .s8-page-number {
    top: 92px;
    right: 6%;
  }


  .s8-main,
  .s8-question,
  .s8-footer {
    position: relative;

    inset: auto;

    width: 100%;
    height: auto;
  }


  .s8-main {
    grid-template-columns: 1fr;

    gap: 55px;
  }


  .s8-main-divider {
    width: 100%;
    height: 1px;
  }


  .s8-left {
    padding-top: 20px;
  }


  .s8-right {
    padding-bottom: 30px;
  }


  .s8-question {
    margin-top: 50px;
    padding: 45px 0;
  }


  .s8-footer {
    padding: 28px 0 0;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .screen-08 {
    padding-left: 24px;
    padding-right: 24px;
  }


  .s8-left-lead,
  .s8-left-final {
    font-size: 21px;
  }


  .s8-right-title {
    font-size: 31px;
  }


  .s8-contact-value {
    font-size: 16px;
  }


  .s8-question-main {
    font-size: 34px;
  }


  .s8-question-main em {
    white-space: normal;
  }

}



/* =========================================================
   SCREEN 08 — FINAL COMPOSITION PASS
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. ОБЩИЙ ФОН

     ВАЖНО:
     убираем собственную заливку Screen 08.
     Теперь через неё виден общий фон сайта,
     используемый предыдущими экранами.
     ======================================================= */

  .screen-08 {
    background: transparent !important;
    background-color: transparent !important;
  }



  /* =======================================================
     2. ОСНОВНОЙ ДВУХКОЛОНОЧНЫЙ БЛОК
     ======================================================= */

  .s8-main {
    left: 9.8% !important;
    right: 20.5% !important;

    top: 9.5% !important;
    height: 56.5% !important;

    grid-template-columns:
      minmax(360px, 1fr)
      1px
      minmax(330px, .82fr) !important;

    column-gap: 8.8% !important;
  }



  /* =======================================================
     3. ЛЕВАЯ КОЛОНКА
     немного компактнее, чтобы текст закончился
     ДО нижней горизонтальной линии
     ======================================================= */

  .s8-left {
    padding-top: 7.0% !important;
  }


  .s8-left-lead {
    max-width: 520px !important;

    font-size: clamp(18px, 1.38vw, 26px) !important;
    line-height: 1.34 !important;
  }


  .s8-left-muted {
    margin-top: 5.8% !important;

    font-size: clamp(12px, .98vw, 18px) !important;
    line-height: 1.44 !important;
  }


  .s8-gold-line {
    width: 40px !important;

    margin-top: 5.8% !important;
    margin-bottom: 4.5% !important;
  }


  .s8-left-final {
    max-width: 470px !important;

    font-size: clamp(16px, 1.23vw, 23px) !important;
    line-height: 1.34 !important;
  }



  /* =======================================================
     4. ВЕРТИКАЛЬНЫЙ РАЗДЕЛИТЕЛЬ
     ======================================================= */

  .s8-main-divider {
    height: 100% !important;

    background: rgba(25,25,25,.15) !important;
  }



  /* =======================================================
     5. НАСТОЯЩИЙ ПРОЗРАЧНЫЙ ЛОГОТИП ALEZERIA

     Никаких CSS-фигур больше нет.
     ======================================================= */

  .s8-brand {
    width: max-content !important;

    margin: 0 0 4.6% 0 !important;

    text-align: center !important;
  }


  .s8-brand-logo {
    display: block !important;

    width: auto !important;
    height: 72px !important;

    max-width: 100px !important;

    margin: 0 auto 11px !important;

    object-fit: contain !important;
  }


  .s8-brand-name {
    font-family: Arial, Helvetica, sans-serif !important;

    font-size: clamp(19px, 1.55vw, 29px) !important;
    line-height: 1 !important;

    letter-spacing: .18em !important;

    color: #171717 !important;
  }



  /* =======================================================
     6. УБИРАЕМ СТАРЫЕ CSS-ЧАСТИ ЛОГОТИПА
     даже если какие-то правила остались выше
     ======================================================= */

  .s8-brand-symbol,
  .s8-mark-left,
  .s8-mark-right,
  .s8-mark-center {
    display: none !important;
  }



  /* =======================================================
     7. ПРАВЫЙ ЗАГОЛОВОК

     Убираем ненормальное растягивание букв.
     ======================================================= */

  .s8-right-title {
    margin: 0 0 5.2% !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;

    font-size: clamp(23px, 1.92vw, 36px) !important;
    line-height: 1.08 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    color: #23201e !important;
  }



  /* =======================================================
     8. ПРАВЫЕ ПОЯСНЕНИЯ
     ======================================================= */

  .s8-right-intro,
  .s8-right-note {
    font-size: clamp(11px, .83vw, 15px) !important;
    line-height: 1.46 !important;

    letter-spacing: 0 !important;
  }


  .s8-right-note {
    margin-top: 6.2% !important;
  }



  /* =======================================================
     9. КОНТАКТЫ
     ======================================================= */

  .s8-contacts {
    margin-top: 6.3% !important;
  }


  .s8-contact {
    min-height: 70px !important;
  }


  .s8-contact-copy {
    gap: 8px !important;
  }


  .s8-contact-value {
    font-size: clamp(15px, 1.11vw, 21px) !important;
  }



  /* =======================================================
     10. НИЖНИЙ СМЫСЛОВОЙ БЛОК

     Отделяем от верхнего блока.
     ======================================================= */

  .s8-question {
    left: 2.9% !important;
    right: 2.9% !important;

    top: 69.2% !important;
    height: 20.2% !important;
  }


  .s8-question-intro {
    margin-top: 1.8% !important;
    margin-bottom: .8% !important;

    font-size: clamp(11px, .90vw, 16px) !important;
    line-height: 1.38 !important;
  }



  /* =======================================================
     11. ГЛАВНЫЙ ФИНАЛЬНЫЙ ВОПРОС

     Исправляем наложение "именно таким?"
     ======================================================= */

  .s8-question-main {
    display: block !important;

    margin: 0 auto !important;

    max-width: 850px !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;

    font-size: clamp(29px, 2.40vw, 46px) !important;
    line-height: 1.10 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    color: #171614 !important;
  }


  .s8-question-main > span {
    position: static !important;

    white-space: pre-line !important;

    line-height: inherit !important;
  }


  .s8-question-main em {
    position: static !important;

    display: inline !important;

    margin: 0 0 0 .10em !important;
    padding: 0 !important;

    white-space: nowrap !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    font-style: italic !important;

    line-height: inherit !important;
    vertical-align: baseline !important;

    letter-spacing: 0 !important;

    transform: none !important;
  }



  /* =======================================================
     12. FOOTER
     ======================================================= */

  .s8-footer {
    left: 2.9% !important;
    right: 2.9% !important;

    bottom: 1.1% !important;
    height: 8.0% !important;
  }


  .s8-footer-brand {
    font-size: clamp(12px, .96vw, 18px) !important;
  }


  .s8-footer-services {
    margin-top: 7px !important;

    font-size: clamp(8px, .64vw, 11px) !important;
  }


  .s8-footer-copy {
    margin-top: 7px !important;

    font-size: clamp(8px, .57vw, 10px) !important;
  }



  /* =======================================================
     13. НУМЕРАЦИЯ
     ======================================================= */

  .s8-page-number {
    right: 4.1% !important;
    top: 8.7% !important;
  }

}



/* =========================================================
   SCREEN 08 — FINAL POLISH
   Только точечная доводка утверждённой композиции
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. НАСТОЯЩИЙ ПРОЗРАЧНЫЙ ЛОГОТИП
     увеличиваем только картинку,
     форму НЕ рисуем и НЕ меняем
     ======================================================= */

  .s8-brand-logo {
    width: auto !important;
    height: 105px !important;

    max-width: 135px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;

    object-fit: contain !important;

    transform: none !important;
  }


  /* Надпись ALEZERIA под знаком оставляем спокойной */

  .s8-brand-name {
    font-size: clamp(19px, 1.52vw, 28px) !important;

    letter-spacing: .18em !important;

    line-height: 1 !important;
  }



  /* =======================================================
     2. ВСЮ ПРАВУЮ КОЛОНКУ
     поднимаем примерно на 5.5 мм
     ======================================================= */

  .s8-right {
    position: relative !important;

    transform: translateY(-0.55cm) !important;
  }



  /* =======================================================
     3. ЗАГОЛОВОК СПРАВА
     сохраняем размеры и нормальную плотность
     ======================================================= */

  .s8-right-title {
    font-size: clamp(23px, 1.90vw, 35px) !important;
    line-height: 1.07 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }



  /* =======================================================
     4. ЛЕВЫЙ НИЖНИЙ АБЗАЦ
     совсем немного вверх
     ======================================================= */

  .s8-left-final {
    position: relative !important;

    transform: translateY(-0.23cm) !important;
  }



  /* =======================================================
     5. ФИНАЛЬНЫЙ БЛОК
     сам разделитель оставляем на месте,
     а тексты внутри поднимаем
     ======================================================= */

  .s8-question-intro {
    position: relative !important;

    transform: translateY(-0.55cm) !important;

    margin-bottom: .65% !important;
  }


  .s8-question-main {
    position: relative !important;

    transform: translateY(-0.75cm) !important;

    max-width: 820px !important;

    font-size: clamp(28px, 2.27vw, 44px) !important;
    line-height: 1.08 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }



  /* =======================================================
     6. ОБЕ ЧАСТИ ВОПРОСА
     гарантированно работают как единая фраза
     ======================================================= */

  .s8-question-main > span {
    position: static !important;

    white-space: pre-line !important;

    line-height: inherit !important;

    transform: none !important;
  }


  .s8-question-main em {
    position: static !important;

    display: inline !important;

    margin-left: .10em !important;

    padding: 0 !important;

    white-space: nowrap !important;

    font-size: 1em !important;
    font-weight: 400 !important;
    font-style: italic !important;

    line-height: inherit !important;
    vertical-align: baseline !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    transform: none !important;
  }



  /* =======================================================
     7. FOOTER
     НЕ двигаем.
     Только гарантируем, что он остаётся ниже вопроса.
     ======================================================= */

  .s8-footer {
    bottom: 1.1% !important;

    transform: none !important;
  }

}



/* =========================================================
   SCREEN 08 — BOTTOM SECTOR FINAL FIX
   Исправляем только контакты / вопрос / футер
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. КОНТАКТЫ
     немного компактнее, чтобы снизу появился воздух
     ======================================================= */

  .s8-contacts {
    margin-top: 5.4% !important;
    transform: translateY(-0.18cm) !important;
  }

  .s8-contact {
    min-height: 62px !important;
  }

  .s8-contact-copy {
    gap: 6px !important;
  }

  .s8-contact-label {
    line-height: 1 !important;
  }

  .s8-contact-value {
    line-height: 1.08 !important;
  }


  /* =======================================================
     2. НИЖНИЙ СМЫСЛОВОЙ СЕКТОР
     отделяем его от контактного блока
     ======================================================= */

  .s8-question {
    top: 70.0% !important;
    height: 18.7% !important;

    left: 2.9% !important;
    right: 2.9% !important;

    border-top: 1px solid rgba(25,25,25,.16) !important;
  }


  /* =======================================================
     3. МАЛЕНЬКОЕ ВСТУПЛЕНИЕ
     возвращаем нормальное положение без transform
     ======================================================= */

  .s8-question-intro {
    transform: none !important;

    margin-top: 1.65% !important;
    margin-bottom: .65% !important;

    font-size: clamp(11px, .84vw, 15px) !important;
    line-height: 1.35 !important;
  }


  /* =======================================================
     4. ГЛАВНЫЙ ФИНАЛЬНЫЙ ВОПРОС
     немного компактнее + строго по центру
     ======================================================= */

  .s8-question-main {
    position: relative !important;

    transform: none !important;

    width: 100% !important;
    max-width: 790px !important;

    margin: 0 auto !important;

    text-align: center !important;

    font-size: clamp(27px, 2.18vw, 42px) !important;
    line-height: 1.06 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }


  /*
     Первая часть сохраняет принудительный перенос:
     Почему ваш бизнес
     появился
  */

  .s8-question-main > span {
    position: static !important;

    white-space: pre-line !important;

    line-height: inherit !important;

    transform: none !important;
  }


  /*
     "именно таким?" остаётся на второй строке
     рядом со словом "появился"
  */

  .s8-question-main em {
    position: static !important;

    display: inline !important;

    margin-left: .10em !important;

    padding: 0 !important;

    white-space: nowrap !important;

    font-size: 1em !important;
    line-height: inherit !important;

    font-weight: 400 !important;
    font-style: italic !important;

    vertical-align: baseline !important;

    transform: none !important;
  }


  /* =======================================================
     5. FOOTER
     опускаем чуть ниже и создаём воздух над ALEZERIA
     ======================================================= */

  .s8-footer {
    bottom: .45% !important;
    height: 7.0% !important;

    padding-top: .25cm !important;

    transform: none !important;
  }

  .s8-footer-brand {
    margin: 0 !important;

    font-size: clamp(12px, .90vw, 17px) !important;
    line-height: 1 !important;

    letter-spacing: .22em !important;
  }

  .s8-footer-services {
    margin-top: 8px !important;

    font-size: clamp(8px, .60vw, 10.5px) !important;
    line-height: 1.1 !important;
  }

  .s8-footer-copy {
    margin-top: 7px !important;

    font-size: clamp(7.5px, .54vw, 9.5px) !important;
    line-height: 1 !important;
  }

}



/* =========================================================
   SCREEN 08 — VERTICAL FINAL ALIGNMENT
   Весь контент выше + номер страницы вниз
   ========================================================= */

@media (min-width: 1101px) {


  /* =======================================================
     1. ОСНОВНОЙ ВЕРХНИЙ БЛОК
     обе колонки поднимаем вместе
     ======================================================= */

  .s8-main {
    transform: translateY(-0.70cm) !important;
  }



  /* =======================================================
     2. НИЖНИЙ ФИНАЛЬНЫЙ ВОПРОС
     весь блок поднимаем на ту же величину
     ======================================================= */

  .s8-question {
    transform: translateY(-0.70cm) !important;
  }



  /* =======================================================
     3. FOOTER
     ALEZERIA / услуги / copyright
     также поднимаем
     ======================================================= */

  .s8-footer {
    transform: translateY(-0.70cm) !important;
  }



  /* =======================================================
     4. НУМЕРАЦИЯ 08 / 08
     переносим вниз вправо независимо от контента
     ======================================================= */

  .s8-page-number {
    top: auto !important;
    bottom: 2.15% !important;

    right: 4.1% !important;

    transform: none !important;
  }

}



/* =========================================================
   SCREEN 08 — FINAL MICROFIX
   1. Правая колонка чуть ниже
   2. ALEZERIA в футере чуть крупнее
   ========================================================= */

@media (min-width: 1101px) {

  /* -------------------------------------------------------
     ПРАВАЯ КОЛОНКА

     Ранее было translateY(-0.55cm).
     Теперь опускаем её примерно на 3 мм:
     итоговый сдвиг = -0.25cm.
     ------------------------------------------------------- */

  .s8-right {
    transform: translateY(-0.25cm) !important;
  }


  /* -------------------------------------------------------
     НИЖНЯЯ ALEZERIA
     примерно +6%, остальные строки футера не трогаем
     ------------------------------------------------------- */

  .s8-footer-brand {
    font-size: clamp(13px, .97vw, 18px) !important;
    line-height: 1 !important;
    letter-spacing: .22em !important;
  }

}



/* =========================================================
   SCREEN 08 — GERMAN COMPACT MODE
   Только DE. Остальные языки не затрагиваем.
   ========================================================= */

@media (min-width: 1101px) {

  /* -------------------------------------------------------
     Правый заголовок:
     уменьшаем и чуть уплотняем
     ------------------------------------------------------- */

  html[lang="de"] .screen-08 .s8-right-title {
    max-width: 430px !important;

    font-size: clamp(21px, 1.68vw, 31px) !important;
    line-height: 1.04 !important;

    margin-bottom: 4.5% !important;
  }


  /* -------------------------------------------------------
     Правые обычные тексты
     совсем немного компактнее
     ------------------------------------------------------- */

  html[lang="de"] .screen-08 .s8-right-intro,
  html[lang="de"] .screen-08 .s8-right-note {
    font-size: clamp(10.5px, .78vw, 14px) !important;
    line-height: 1.38 !important;
  }

  html[lang="de"] .screen-08 .s8-right-note {
    margin-top: 5.2% !important;
  }


  /* -------------------------------------------------------
     Контакты чуть компактнее по высоте
     ------------------------------------------------------- */

  html[lang="de"] .screen-08 .s8-contacts {
    margin-top: 5.0% !important;
  }

  html[lang="de"] .screen-08 .s8-contact {
    min-height: 57px !important;
  }


  /* -------------------------------------------------------
     Маленький текст над финальным вопросом
     ------------------------------------------------------- */

  html[lang="de"] .screen-08 .s8-question-intro {
    font-size: clamp(10px, .77vw, 14px) !important;
    line-height: 1.28 !important;

    margin-top: 1.35% !important;
    margin-bottom: .55% !important;
  }


  /* -------------------------------------------------------
     Главный немецкий вопрос:
     значительно компактнее
     ------------------------------------------------------- */

  html[lang="de"] .screen-08 .s8-question-main {
    max-width: 760px !important;

    font-size: clamp(24px, 1.88vw, 36px) !important;
    line-height: 1.02 !important;
  }


  html[lang="de"] .screen-08 .s8-question-main > span {
    white-space: normal !important;
  }


  html[lang="de"] .screen-08 .s8-question-main em {
    white-space: nowrap !important;
    margin-left: .12em !important;
  }


  /* -------------------------------------------------------
     Немецкий футер немного компактнее
     ------------------------------------------------------- */

  html[lang="de"] .screen-08 .s8-footer-services {
    font-size: clamp(7.5px, .56vw, 9.5px) !important;
    letter-spacing: .19em !important;
  }

}



/* =========================================================
   ALEZERIA — GLOBAL MENU
   ========================================================= */

.site-menu {
  position: fixed;

  inset: 0;

  z-index: 10000;

  background:
    rgba(247, 246, 243, .985);

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  transition:
    opacity .32s ease,
    visibility .32s ease;
}


.site-menu.is-open {
  visibility: visible;
  opacity: 1;

  pointer-events: auto;
}


body.menu-open {
  overflow: hidden !important;
}


/* ---------------------------------------------------------
   MENU CONTAINER
   --------------------------------------------------------- */

.site-menu-inner {
  position: relative;

  width: 100%;
  height: 100%;

  padding:
    clamp(26px, 3.6vw, 68px)
    clamp(30px, 4.1vw, 78px);

  box-sizing: border-box;
}


.site-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.site-menu-brand {
  font-family: Arial, Helvetica, sans-serif;

  font-size: clamp(13px, .95vw, 18px);
  font-weight: 400;

  letter-spacing: .28em;

  color: #171717;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
   --------------------------------------------------------- */

.site-menu-close {
  position: relative;

  width: 42px;
  height: 42px;

  border: 0;
  padding: 0;

  background: transparent;

  cursor: pointer;
}


.site-menu-close span {
  position: absolute;

  left: 5px;
  top: 20px;

  width: 32px;
  height: 1px;

  background: #161616;

  transform-origin: center;
}


.site-menu-close span:first-child {
  transform: rotate(45deg);
}


.site-menu-close span:last-child {
  transform: rotate(-45deg);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.site-menu-content {
  position: absolute;

  left: clamp(50px, 8vw, 150px);
  right: clamp(50px, 8vw, 150px);

  top: 17%;
  bottom: 8%;

  display: grid;

  grid-template-columns:
    minmax(180px, .50fr)
    minmax(440px, 1.5fr);

  column-gap: clamp(60px, 9vw, 180px);
}


.site-menu-intro {
  padding-top: 10px;
}


.site-menu-small {
  display: block;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 11px;

  letter-spacing: .26em;

  color: #8a817a;
}


.site-menu-line {
  width: 42px;
  height: 1px;

  margin-top: 22px;

  background: #b77932;
}


/* ---------------------------------------------------------
   NAVIGATION LINKS
   --------------------------------------------------------- */

.site-menu-links {
  display: flex;
  flex-direction: column;

  justify-content: center;

  border-left:
    1px solid rgba(30, 30, 30, .13);

  padding-left:
    clamp(45px, 5vw, 95px);
}


.site-menu-link {
  position: relative;

  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr);

  align-items: baseline;

  width: 100%;

  padding:
    clamp(8px, .8vh, 14px)
    0;

  color: #171717;

  text-decoration: none;

  transition:
    transform .20s ease,
    opacity .20s ease;
}


.site-menu-number {
  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  letter-spacing: .14em;

  color: #a96f2b;
}


.site-menu-link > span:last-child {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(27px, 2.15vw, 42px);

  line-height: 1;

  font-weight: 400;
}


.site-menu-link:hover {
  transform: translateX(8px);
}


.site-menu-links:hover .site-menu-link:not(:hover) {
  opacity: .34;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-menu-footer {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;

  justify-content: space-between;
  align-items: center;

  padding-top: 18px;

  border-top:
    1px solid rgba(30,30,30,.14);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 9px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: #88827c;
}


/* ---------------------------------------------------------
   BURGER
   --------------------------------------------------------- */

.menu-button {
  cursor: pointer;
}


/* ---------------------------------------------------------
   MOBILE / TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .site-menu-inner {
    padding:
      26px
      24px;
  }


  .site-menu-content {
    left: 24px;
    right: 24px;

    top: 15%;
    bottom: 7%;

    display: block;
  }


  .site-menu-intro {
    display: none;
  }


  .site-menu-links {
    height: calc(100% - 80px);

    justify-content: center;

    border-left: 0;

    padding-left: 0;
  }


  .site-menu-link {
    grid-template-columns:
      42px
      1fr;

    padding:
      clamp(8px, 1.2vh, 15px)
      0;
  }


  .site-menu-link > span:last-child {
    font-size:
      clamp(25px, 7vw, 38px);
  }


  .site-menu-footer {
    display: block;

    line-height: 1.7;
  }


  .site-menu-footer span {
    display: block;
  }

}



/* =========================================================
   ALEZERIA
   LOW-LAPTOP ADAPTATION
   1366 × 768 и близкие размеры

   НЕ затрагивает:
   1440×900
   1600×900
   1920×1080
   ========================================================= */

@media
  (min-width: 1101px)
  and (max-width: 1400px)
  and (max-height: 800px) {


  /* =======================================================
     SCREEN 05
     Освобождаем место для нижнего смыслового ряда
     ======================================================= */


  /*
     Нижние две большие карточки слегка вверх.
     На 1366×768 сейчас под ними почти нет свободного места.
  */

  .screen-05 .s5-lower {
    transform: translateY(-18px) !important;
  }


  /*
     Нижний смысловой ряд, наоборот, опускаем под карточки.
     На больших разрешениях старое положение сохраняется.
  */

  .screen-05 .s5-bottom-line {
    bottom: 0.45% !important;

    font-size: clamp(8px, .67vw, 10px) !important;
    line-height: 1.10 !important;
  }


  .screen-05 .s5-bottom-line > div {
    line-height: 1.10 !important;
  }


  /*
     Стрелку и номер тоже опускаем,
     чтобы они относились именно к нижнему краю экрана.
  */

  .screen-05 .screen-05-arrow {
    bottom: 0.55% !important;
  }


  .screen-05 .screen-05-number {
    bottom: 0.70% !important;
  }



  /* =======================================================
     SCREEN 06
     Разводим нижнюю полосу и правую CTA-зону
     ======================================================= */


  /*
     Нижние карточки совсем немного вверх —
     создаём дополнительный зазор над footer.
  */

  .screen-06 .s6-lower {
    transform: translateY(-8px) !important;
  }


  /*
     Footer сейчас касается нижней части правого блока.
     Опускаем его примерно на 10 px.
  */

  .screen-06 .s6-bottom-line {
    transform: translateY(11px) !important;
  }


  /*
     Последняя маленькая фраза должна занимать
     минимум высоты и не спорить с URL.
  */

  .screen-06 .s6-bottom-small {
    font-size: clamp(7px, .52vw, 9px) !important;
    line-height: 1.08 !important;
  }


  /*
     Стрелка остаётся максимально низко.
  */

  .screen-06 .s6-down {
    bottom: 0.45% !important;
  }



  /* =======================================================
     SCREEN 08
     Больше воздуха в нижней смысловой части
     ======================================================= */


  /*
     Верхние две колонки всего немного выше.
     Это даёт дополнительное пространство вопросу снизу.
  */

  .screen-08 .s8-main {
    transform: translateY(-0.82cm) !important;
  }


  /*
     Финальный вопрос поднимаем ещё примерно на 7 px
     относительно нынешнего laptop-положения.
  */

  .screen-08 .s8-question {
    transform: translateY(-0.92cm) !important;
  }


  /*
     Маленькое вступление к вопросу немного уплотняем.
  */

  .screen-08 .s8-question-intro {
    margin-top: 1.05% !important;
    margin-bottom: 0.42% !important;

    line-height: 1.25 !important;
  }


  /*
     Главный вопрос чуть компактнее именно на низком экране.
     Текст и переносы не меняются.
  */

  .screen-08 .s8-question-main {
    max-width: 760px !important;

    font-size: clamp(24px, 1.98vw, 37px) !important;
    line-height: 1.03 !important;
  }


  /*
     Footer немного выше нижнего края,
     но остаётся заметно ниже вопроса.
  */

  .screen-08 .s8-footer {
    transform: translateY(-0.80cm) !important;
  }


  /*
     Нумерация остаётся отдельной
     и прижимается к нижнему правому краю.
  */

  .screen-08 .s8-page-number {
    top: auto !important;
    bottom: 1.15% !important;

    transform: none !important;
  }

}



/* =========================================================
   1366 × 768 — ТОЧНАЯ КОРРЕКЦИЯ SCREEN 06 / SCREEN 08

   ВАЖНО:
   transform НЕ перезаписываем.
   Сохраняем существующее адаптивное масштабирование.
   ========================================================= */

@media
  (min-width: 1101px)
  and (max-width: 1400px)
  and (max-height: 800px) {


  /* =======================================================
     SCREEN 06

     Существующий масштаб сохраняем.
     Только поднимаем правый сектор.
     ======================================================= */

  .screen-06 aside {
    translate: 0 -24px !important;
  }



  /* =======================================================
     SCREEN 08

     DE уже правильный — вообще не изменяем.

     RU / EN / ES / FR:
     верхнее положение почти сохраняем,
     но слегка уплотняем ВЕСЬ правый сектор,
     чтобы его нижняя часть перестала выступать.
     ======================================================= */

  html[lang="ru"] .screen-08 .s8-main > :last-child,
  html[lang="en"] .screen-08 .s8-main > :last-child,
  html[lang="es"] .screen-08 .s8-main > :last-child,
  html[lang="fr"] .screen-08 .s8-main > :last-child {
    scale: .95 !important;
    translate: 0 -3px !important;
    transform-origin: top center !important;
  }


  /* Германия остаётся без дополнительного изменения */

  html[lang="de"] .screen-08 .s8-main > :last-child {
    scale: 1 !important;
    translate: none !important;
  }

}



/* =========================================================
   SCREEN 08 — 1366×768
   УКОРАЧИВАЕМ СУЩЕСТВУЮЩУЮ ЦЕНТРАЛЬНУЮ ПАЛОЧКУ
   Никаких новых линий не создаём
   ========================================================= */

@media
  (min-width: 1101px)
  and (max-width: 1400px)
  and (max-height: 800px) {

  .screen-08 .s8-main-divider {
    transform-origin: top center !important;
    scale: 1 .92 !important;
  }

}



/* =========================================================
   SCREEN 06 — 1366×768 — EN FINAL FIX
   Только английская версия.
   Поднимаем правый сектор ещё немного.
   Остальные языки НЕ меняем.
   ========================================================= */

@media
  (min-width: 1101px)
  and (max-width: 1400px)
  and (max-height: 800px) {

  html[lang="en"] .screen-06 aside {
    translate: 0 -38px !important;
  }

}



/* =========================================================
   SCREEN 06 — 1366×768 — EN FINAL 2
   Исправляем только английский правый сектор.
   05, 08 и остальные языки НЕ трогаем.
   ========================================================= */

@media
  (min-width: 1101px)
  and (max-width: 1400px)
  and (max-height: 800px) {

  html[lang="en"] .screen-06 aside {

    /* было -38px — слишком высоко */
    translate: 0 -18px !important;

    /* лёгкое пропорциональное уплотнение,
       чтобы низ всё равно уверенно помещался */
    scale: .96 !important;

    transform-origin: top right !important;
  }

}