:root {
  --color-milk: #f3eee7;
  --color-milk-light: #fbf8f3;
  --color-graphite: #272c31;
  --color-graphite-soft: #3b4249;
  --color-brick: #bf5638;
  --color-brick-dark: #9f452f;
  --color-white: #ffffff;
  --color-text-muted: #68625d;
  --color-line: rgba(39, 44, 49, 0.12);
  --shadow-card: 0 18px 46px rgba(39, 44, 49, 0.10);
  --shadow-large: 0 30px 80px rgba(39, 44, 49, 0.17);
  --radius-small: 14px;
  --radius-medium: 22px;
  --radius-large: 34px;
  --container: 1720px;
}

/* Не даём фирменной букве «П» разрывать строку «Санкт-Петербург». */
#home .hero-title--depth > span:nth-child(2) > span { display: inline !important; }

/* Масштабирование нового первого экрана: только hero, без вмешательства в шапку и остальные блоки. */
@media (max-width: 1180px) and (min-width: 1021px) {
  #home .hero-title--depth {
    font-size: clamp(34px, 3.35vw, 40px) !important;
  }
  #home .hero-title--depth > span:first-child {
    gap: .10em !important;
  }
  #home .hero-title--depth > span:first-child > span:last-child {
    font-size: clamp(19px, 1.95vw, 23px) !important;
  }
  #home .hero-title--depth + div[aria-label] > span {
    font-size: clamp(21px, 2.05vw, 25px) !important;
  }
}

@media (max-width: 1020px) {
  #home .hero-copy {
    min-width: 0;
  }
  #home .hero-title--depth {
    max-width: 100%;
    font-size: clamp(30px, 5.1vw, 42px) !important;
  }
  #home .hero-title--depth > span:first-child {
    gap: .12em !important;
  }
  #home .hero-title--depth > span:first-child > span:last-child {
    font-size: clamp(20px, 3.2vw, 28px) !important;
  }
  #home .hero-title--depth + div[aria-label] > span {
    font-size: clamp(23px, 3.5vw, 31px) !important;
  }
}

@media (max-width: 760px) {
  #home .hero-title--depth {
    font-size: clamp(26px, 7.4vw, 36px) !important;
    line-height: 1 !important;
  }
  #home .hero-title--depth > span:first-child {
    gap: .10em !important;
  }
  #home .hero-title--depth > span:first-child > span:last-child {
    font-size: clamp(17px, 4.8vw, 22px) !important;
  }
  #home .hero-title--depth + div[aria-label] {
    margin: 17px 0 15px !important;
  }
  #home .hero-title--depth + div[aria-label] > span {
    font-size: clamp(21px, 6vw, 27px) !important;
  }
  #home .eyebrow {
    max-width: 100%;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  #home .hero-title--depth {
    font-size: 24.5px !important;
  }
  #home .hero-title--depth > span:first-child > span:last-child {
    font-size: 16px !important;
  }
  #home .hero-title--depth + div[aria-label] > span {
    font-size: 20px !important;
  }
  #home .eyebrow {
    gap: 7px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  #home .hero-actions .button {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 340px) {
  #home .hero-title--depth {
    font-size: 23.5px !important;
  }
  #home .hero-title--depth > span:first-child > span:last-child {
    font-size: 15.5px !important;
  }
  #home .hero-title--depth + div[aria-label] > span {
    font-size: 19.5px !important;
  }
}

/* Низкие окна и мобильная альбомная ориентация: не растягиваем фотографию на лишнюю высоту. */
@media (max-width: 1020px) and (max-height: 620px) {
  #home .hero-copy {
    padding-top: 18px !important;
  }
  #home .hero-visual {
    min-height: clamp(300px, 60vh, 360px) !important;
  }
}