/* =========================================================
   ALEZERIA — MOBILE SYSTEM
   Phones: 320–480px portrait + modern phone landscape
   Loaded AFTER style.css. Desktop remains untouched.
   ========================================================= */

@media (max-width: 767px), (max-width: 932px) and (max-height: 600px) and (orientation: landscape) {

  :root {
    --m-gutter: clamp(18px, 5.2vw, 26px);
    --m-gap: clamp(28px, 8vw, 46px);
    --m-serif: Georgia, "Times New Roman", serif;
    --m-sans: Arial, Helvetica, sans-serif;
    --m-rule: rgba(20,20,20,.16);
    --m-muted: rgba(20,20,20,.48);
    --m-gold: #b36f22;
  }

  html {
    width: 100% !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background-attachment: scroll !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }

  .hero,
  .screen-02,
  .screen-03,
  .screen-04,
  .screen-05,
  .screen-06,
  .screen-07,
  .screen-08 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  .screen-02,
  .screen-03,
  .screen-04,
  .screen-05,
  .screen-06,
  .screen-07,
  .screen-08 {
    border-top: 1px solid rgba(20,20,20,.10) !important;
  }

  img,
  video {
    max-width: 100% !important;
  }

  /* ---------- GLOBAL HEADER ---------- */

  .site-header {
    position: fixed !important;
    z-index: 1000 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding:
      calc(14px + env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      12px
      max(14px, env(safe-area-inset-left)) !important;
    gap: 8px !important;
    background: linear-gradient(to bottom, rgba(247,246,243,.96), rgba(247,246,243,.78), rgba(247,246,243,0)) !important;
    pointer-events: none;
  }

  .site-header .brand,
  .site-header .header-actions,
  .site-header button,
  .site-header nav {
    pointer-events: auto;
  }

  .brand {
    flex: 0 0 auto !important;
    font-size: clamp(10px, 2.9vw, 12px) !important;
    letter-spacing: .24em !important;
    white-space: nowrap !important;
  }

  .header-actions {
    margin-left: auto !important;
    gap: 10px !important;
  }

  .language-switcher {
    display: flex !important;
    gap: clamp(5px, 1.8vw, 9px) !important;
    margin-right: 6px !important;
  }

  .language-switcher button {
    font-size: clamp(8px, 2.35vw, 10px) !important;
    letter-spacing: .10em !important;
    line-height: 1 !important;
  }

  .menu-button {
    width: 27px !important;
    height: 20px !important;
    flex: 0 0 27px !important;
  }

  /* ---------- 01 / HERO ---------- */

  .hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding:
      calc(88px + env(safe-area-inset-top))
      var(--m-gutter)
      calc(54px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-inner {
    width: min(100%, 440px) !important;
    text-align: center !important;
  }

  .hero-logo {
    position: static !important;
    width: clamp(76px, 23vw, 108px) !important;
    height: auto !important;
    margin: 0 auto 22px !important;
  }

  .hero h1 {
    margin: 0 !important;
    font-size: clamp(30px, 9.4vw, 42px) !important;
    line-height: 1 !important;
    letter-spacing: .20em !important;
  }

  .tagline {
    width: min(100%, 350px) !important;
    margin: 30px auto 0 !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.55 !important;
    letter-spacing: .035em !important;
  }

  .services {
    width: min(100%, 360px) !important;
    margin: 32px auto 0 !important;
    font-size: clamp(9px, 2.8vw, 11px) !important;
    line-height: 1.8 !important;
    letter-spacing: .16em !important;
  }

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

  .screen-02 {
    padding:
      calc(96px + env(safe-area-inset-top))
      var(--m-gutter)
      74px !important;
  }

  .screen-02-top {
    display: block !important;
  }

  .screen-02-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(46px, 13vw, 64px) !important;
    line-height: .96 !important;
    letter-spacing: -.025em !important;
    white-space: pre-line !important;
  }

  .screen-02-right {
    width: 100% !important;
    max-width: 100% !important;
    margin: 58px 0 0 !important;
    padding: 0 !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.48 !important;
  }

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

  .screen-02-bottom {
    margin: 66px 0 0 !important;
  }

  .s2-intro {
    margin: 0 0 25px !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.45 !important;
    white-space: pre-line !important;
  }

  .s2-question {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(44px, 12.5vw, 61px) !important;
    line-height: .97 !important;
    letter-spacing: -.025em !important;
    white-space: pre-line !important;
    overflow-wrap: anywhere;
  }

  .screen-02-arrow,
  .screen-02-number {
    position: static !important;
    transform: none !important;
  }

  .screen-02-arrow {
    margin-top: 54px !important;
    font-size: 28px !important;
  }

  .screen-02-number {
    margin-top: -22px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

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

  .screen-03 {
    padding: 92px var(--m-gutter) 66px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .screen-03-images,
  .screen-03-copy {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    display: contents !important;
  }

  .s3-photo {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 2px;
  }

  .s3-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .s3-photo-text {
    left: 18px !important;
    top: 50% !important;
    width: min(74%, 270px) !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.42 !important;
  }

  .s3-copy-block {
    width: 100% !important;
    max-width: 100% !important;
    padding: 27px 2px 34px !important;
  }

  .s3-copy-block p {
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.5 !important;
    white-space: pre-line !important;
  }

  .s3-rule {
    width: 100% !important;
    margin: 0 0 8px !important;
    background: var(--m-rule) !important;
  }

  .s3-business-copy .s3-muted {
    margin-top: 14px !important;
  }

  /* Interleave imagery and thought on mobile */
  .s3-photo-architecture { order: 1; }
  .screen-03-copy > .s3-copy-block:nth-child(1) { order: 2; }
  .screen-03-copy > .s3-rule:nth-child(2) { order: 3; }
  .s3-photo-smile { order: 4; }
  .screen-03-copy > .s3-copy-block:nth-child(3) { order: 5; }
  .screen-03-copy > .s3-rule:nth-child(4) { order: 6; }
  .s3-photo-business { order: 7; }
  .s3-business-copy { order: 8; }
  .screen-03-copy > .s3-rule:nth-child(6) { order: 9; }
  .s3-final { order: 10; }
  .screen-03-copy > .s3-rule:nth-child(8) { order: 11; }

  .screen-03-arrow,
  .screen-03-number {
    position: static !important;
    transform: none !important;
  }

  .screen-03-arrow {
    order: 20;
    margin-top: 18px !important;
    font-size: 28px !important;
  }

  .screen-03-number {
    order: 21;
    margin-top: -22px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

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

  .screen-04 {
    padding: 94px var(--m-gutter) 68px !important;
  }

  .s4-heading,
  .s4-stage-nav,
  .s4-story,
  .s4-copy {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .s4-heading h2 {
    margin: 0 !important;
    font-size: clamp(41px, 11.5vw, 56px) !important;
    line-height: .96 !important;
    letter-spacing: -.025em !important;
  }

  .s4-stage-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px 14px !important;
    margin-top: 34px !important;
  }

  .s4-stage-nav-item {
    font-size: clamp(9px, 2.75vw, 11px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .s4-story {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 40px !important;
  }

  .s4-stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .s4-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  .s4-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s4-stage-03 .s4-photo,
  .s4-stage-04 .s4-photo {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 10 !important;
  }

  .s4-note,
  .s4-stage-caption,
  .s4-final-line {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    width: auto !important;
    height: auto !important;
  }

  .s4-note,
  .s4-final-line {
    margin-top: 2px !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.35 !important;
  }

  .s4-stage-caption {
    margin-top: 2px !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    line-height: 1.35 !important;
    letter-spacing: .10em !important;
  }

  .s4-flow-arrow {
    position: static !important;
    width: max-content !important;
    margin: -2px auto !important;
    font-size: 22px !important;
    transform: rotate(90deg) !important;
  }

  .s4-copy {
    margin-top: 50px !important;
    display: block !important;
  }

  .s4-copy-block {
    padding: 0 0 22px !important;
    margin: 0 0 22px !important;
    border-bottom: 1px solid var(--m-rule) !important;
  }

  .s4-copy-block h3 {
    margin: 0 0 8px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
  }

  .s4-copy-block p,
  .s4-ai-copy {
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.5 !important;
  }

  .s4-ai-copy {
    margin-top: 30px !important;
  }

  .screen-04-arrow,
  .screen-04-number {
    position: static !important;
    transform: none !important;
  }

  .screen-04-arrow {
    margin-top: 46px !important;
    font-size: 28px !important;
  }

  .screen-04-number {
    margin-top: -22px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

  /* ---------- 05 ---------- */

  .screen-05 {
    padding: 92px var(--m-gutter) 66px !important;
  }

  .s5-top,
  .s5-origin,
  .s5-main,
  .s5-left-copy,
  .s5-hero,
  .s5-right,
  .s5-lower,
  .s5-story-card,
  .s5-contact-card,
  .s5-bottom-line {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .s5-top {
    display: block !important;
  }

  .s5-origin {
    display: grid !important;
    grid-template-columns: minmax(100px, 36%) 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .s5-origin-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .s5-origin-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s5-origin-copy {
    padding: 0 !important;
  }

  .s5-kicker,
  .s5-right-kicker,
  .s5-hero-kicker,
  .s5-mini-aora {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    letter-spacing: .16em !important;
  }

  .s5-origin-copy h2 {
    margin: 5px 0 8px !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1 !important;
  }

  .s5-origin-copy p,
  .s5-turn,
  .s5-left-copy p,
  .s5-right p,
  .s5-video-caption,
  .s5-contact-intro {
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.48 !important;
  }

  .s5-top-arrow {
    display: none !important;
  }

  .s5-turn {
    margin-top: 28px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--m-rule) !important;
  }

  .s5-turn p {
    margin: 0 0 12px !important;
    white-space: pre-line !important;
  }

  .s5-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
    margin-top: 48px !important;
  }

  .s5-left-copy h2 {
    margin: 8px 0 22px !important;
    font-size: clamp(46px, 13vw, 62px) !important;
    line-height: .92 !important;
  }

  .s5-aora-name {
    font-size: clamp(22px, 6.4vw, 28px) !important;
    letter-spacing: .18em !important;
  }

  .s5-left-copy p {
    white-space: pre-line !important;
  }

  .s5-small-rule,
  .s5-gold-rule {
    margin: 20px 0 !important;
  }

  .s5-hero {
    position: relative !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  .s5-hero > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s5-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 24px !important;
  }

  .s5-hero-overlay h2 {
    margin: 8px 0 !important;
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1 !important;
  }

  .s5-right {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .s5-right-copy h3 {
    margin: 8px 0 18px !important;
    font-size: clamp(25px, 7vw, 33px) !important;
    line-height: 1.08 !important;
  }

  .s5-video-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin-top: 28px !important;
    overflow: hidden !important;
  }

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

  .s5-aora-cta {
    margin-top: 34px !important;
  }

  .s5-aora-cta-title {
    font-size: clamp(38px, 11vw, 52px) !important;
  }

  .s5-aora-button {
    min-height: 50px !important;
  }

  .s5-lower {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin-top: 42px !important;
  }

  .s5-story-card,
  .s5-contact-card {
    overflow: hidden !important;
  }

  .s5-story-card {
    position: relative !important;
    aspect-ratio: 4 / 3 !important;
  }

  .s5-story-card > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s5-story-overlay {
    position: absolute !important;
    inset: 0 !important;
    padding: 20px !important;
  }

  .s5-story-overlay h3 {
    font-size: clamp(29px, 8vw, 38px) !important;
    line-height: .95 !important;
  }

  .s5-contact-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .s5-contact-copy {
    padding: 24px 18px !important;
  }

  .s5-contact-copy h3 {
    font-size: clamp(27px, 7.5vw, 36px) !important;
    line-height: 1.02 !important;
  }

  .s5-contact-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .s5-contact-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s5-bottom-line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 34px !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid var(--m-rule) !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.45 !important;
  }

  .screen-05-arrow,
  .screen-05-number {
    position: static !important;
    transform: none !important;
  }

  .screen-05-arrow {
    margin-top: 36px !important;
    font-size: 28px !important;
  }

  .screen-05-number {
    margin-top: -22px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

  /* ---------- 06 ---------- */

  .screen-06 {
    padding: 92px var(--m-gutter) 66px !important;
  }

  .s6-shell {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .s6-shell > *,
  .s6-top,
  .s6-left,
  .s6-hero,
  .s6-right,
  .s6-lower,
  .s6-bottom-line {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
  }

  .s6-top { order: 1; }
  .s6-left { order: 3; }
  .s6-hero { order: 4; }
  .s6-right { order: 5; }
  .s6-lower { order: 6; }
  .s6-bottom-line { order: 7; }
  .s6-down { order: 8; }
  .s6-page-number { order: 9; }
  .s6-top-rule { order: 2; }

  .s6-top {
    display: grid !important;
    grid-template-columns: minmax(105px, 35%) 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .s6-device {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .s6-project-title {
    position: static !important;
    width: auto !important;
  }

  .s6-project-title h2 {
    margin: 4px 0 8px !important;
    font-size: clamp(26px, 7.3vw, 34px) !important;
    line-height: .95 !important;
  }

  .s6-project-title p,
  .s6-top-story,
  .s6-left-copy,
  .s6-right,
  .s6-bottom-line {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.45 !important;
  }

  .s6-top-arrow {
    display: none !important;
  }

  .s6-top-story {
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--m-rule) !important;
  }

  .s6-top-story p {
    white-space: pre-line !important;
  }

  .s6-top-rule {
    margin: 28px 0 32px !important;
    height: 1px !important;
  }

  .s6-left h2 {
    margin: 12px 0 22px !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
  }

  .s6-left-copy {
    white-space: pre-line !important;
  }

  .s6-hero {
    position: relative !important;
    margin-top: 36px !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  .s6-hero > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s6-hero-copy {
    position: absolute !important;
    inset: 0 !important;
    width: 58% !important;
    padding: 22px 18px !important;
  }

  .s6-hero-copy h2 {
    font-size: clamp(27px, 7.7vw, 36px) !important;
    line-height: .94 !important;
  }

  .s6-right {
    margin-top: 38px !important;
    padding: 0 !important;
    border-left: 0 !important;
  }

  .s6-right-block,
  .s6-right-final {
    padding: 0 0 24px !important;
    margin: 0 0 24px !important;
    border-bottom: 1px solid var(--m-rule) !important;
  }

  .s6-right h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.2 !important;
  }

  .s6-trust-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 10px 0 30px !important;
    overflow: hidden !important;
  }

  .s6-trust-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s6-open-site {
    min-height: 50px !important;
  }

  .s6-lower {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 34px !important;
  }

  .s6-case {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 8 !important;
    overflow: hidden !important;
  }

  .s6-case > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .s6-case-left-copy,
  .s6-case-right-copy {
    position: absolute !important;
    inset: 0 !important;
    padding: 18px !important;
  }

  .s6-case h3 {
    margin: 0 0 8px !important;
    font-size: clamp(21px, 5.8vw, 28px) !important;
    line-height: 1.02 !important;
  }

  .s6-bottom-line {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 30px !important;
    padding-top: 22px !important;
    border-top: 1px solid var(--m-rule) !important;
  }

  .s6-down,
  .s6-page-number {
    position: static !important;
    transform: none !important;
  }

  .s6-down {
    margin-top: 34px !important;
    font-size: 28px !important;
  }

  .s6-page-number {
    margin-top: -22px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

  /* ---------- 07 ---------- */

  .screen-07 {
    padding: 94px var(--m-gutter) 66px !important;
    display: flex !important;
    flex-direction: column !important;
    isolation: isolate !important;
  }

  .screen-07::before {
    inset: 0 !important;
  }

  .screen-07 > * {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .s7-main-title { order: 1; }
  .s7-story { order: 2; }
  .s7-bottom { order: 3; }
  .s7-bottom-marker { order: 4; }
  .s7-page-number { order: 5; }

  .s7-main-title {
    margin: 0 !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -.025em !important;
    white-space: pre-line !important;
  }

  .s7-story {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 42px !important;
  }

  .s7-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .s7-card-image,
  .s7-card-aora-shade,
  .s7-card-codex-wash {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .s7-card-image {
    object-fit: cover !important;
  }

  .s7-card-copy {
    position: absolute !important;
    inset: 0 !important;
    padding: 22px !important;
  }

  .s7-card-copy p {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.45 !important;
    white-space: pre-line !important;
  }

  .s7-center {
    padding: 28px 2px 32px !important;
  }

  .s7-center-top {
    margin-bottom: 26px !important;
  }

  .s7-center h2,
  .s7-center-question {
    font-size: clamp(31px, 8.7vw, 40px) !important;
    line-height: 1.02 !important;
    white-space: pre-line !important;
  }

  .s7-center-muted,
  .s7-center-question-label {
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.5 !important;
    white-space: pre-line !important;
  }

  .s7-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 36px !important;
  }

  .s7-bottom-block {
    width: 100% !important;
    padding: 28px 0 !important;
    border-top: 1px solid var(--m-rule) !important;
  }

  .s7-bottom-serif,
  .s7-bottom-final {
    font-size: clamp(24px, 6.8vw, 31px) !important;
    line-height: 1.18 !important;
    white-space: pre-line !important;
  }

  .s7-bottom-center,
  .s7-origin-row,
  .s7-origin-small {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.5 !important;
  }

  .s7-origin-row {
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    gap: 16px !important;
  }

  .s7-origin-symbol {
    font-size: 42px !important;
  }

  .s7-bottom-marker {
    margin-top: 16px !important;
  }

  .s7-page-number {
    margin-top: 24px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

  /* ---------- 08 ---------- */

  .screen-08 {
    padding: 94px var(--m-gutter) calc(42px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .screen-08 > *,
  .s8-main,
  .s8-left,
  .s8-right,
  .s8-question,
  .s8-footer,
  .s8-page-number {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
  }

  .s8-main { order: 1; }
  .s8-question { order: 2; }
  .s8-footer { order: 3; }
  .s8-page-number { order: 4; }

  .s8-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .s8-left,
  .s8-right {
    padding: 0 !important;
  }

  .s8-left-lead {
    margin: 0 !important;
    font-size: clamp(25px, 7vw, 32px) !important;
    line-height: 1.2 !important;
    white-space: pre-line !important;
  }

  .s8-left-muted {
    margin: 30px 0 0 !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.55 !important;
    white-space: pre-line !important;
  }

  .s8-gold-line {
    margin: 26px 0 !important;
  }

  .s8-left-final {
    margin: 0 !important;
    font-size: clamp(22px, 6.2vw, 28px) !important;
    line-height: 1.35 !important;
    white-space: pre-line !important;
  }

  .s8-main-divider {
    position: static !important;
    width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 42px 0 !important;
    background: var(--m-rule) !important;
    transform: none !important;
    scale: 1 !important;
  }

  .s8-brand {
    text-align: left !important;
  }

  .s8-brand-logo {
    width: clamp(62px, 18vw, 82px) !important;
    height: auto !important;
    margin: 0 0 16px !important;
  }

  .s8-brand-name {
    font-size: clamp(23px, 6.5vw, 29px) !important;
    letter-spacing: .18em !important;
  }

  .s8-right-title {
    margin: 24px 0 0 !important;
    font-size: clamp(35px, 9.8vw, 46px) !important;
    line-height: 1.02 !important;
    white-space: pre-line !important;
  }

  .s8-right-intro,
  .s8-right-note {
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.5 !important;
    white-space: pre-line !important;
  }

  .s8-right-intro {
    margin: 26px 0 0 !important;
  }

  .s8-right-note {
    margin: 30px 0 0 !important;
  }

  .s8-contacts {
    margin-top: 30px !important;
  }

  .s8-contact {
    min-height: 64px !important;
  }

  .s8-contact-label {
    font-size: 10px !important;
  }

  .s8-contact-value {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    overflow-wrap: anywhere;
  }

  .s8-question {
    margin-top: 52px !important;
    padding: 38px 0 !important;
    border-top: 1px solid var(--m-rule) !important;
    border-bottom: 1px solid var(--m-rule) !important;
    text-align: center !important;
  }

  .s8-question-intro {
    margin: 0 auto 20px !important;
    width: min(100%, 320px) !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.4 !important;
    white-space: pre-line !important;
  }

  .s8-question-main {
    margin: 0 auto !important;
    width: min(100%, 440px) !important;
    font-size: clamp(34px, 9.6vw, 46px) !important;
    line-height: 1.03 !important;
  }

  .s8-question-main span,
  .s8-question-main em {
    display: inline !important;
  }

  .s8-footer {
    margin-top: 30px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .s8-footer-brand {
    font-size: 18px !important;
    letter-spacing: .20em !important;
  }

  .s8-footer-services {
    margin-top: 9px !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
  }

  .s8-footer-copy {
    margin-top: 7px !important;
    font-size: 9px !important;
  }

  .s8-page-number {
    margin-top: 26px !important;
    margin-left: auto !important;
    width: max-content !important;
    font-size: 12px !important;
  }

}

/* =========================================================
   EXTRA-COMPACT PHONES — 320–359px
   ========================================================= */
@media (max-width: 359px) {
  :root { --m-gutter: 16px; }

  .language-switcher { gap: 4px !important; }
  .language-switcher button { font-size: 8px !important; }
  .brand { font-size: 9px !important; letter-spacing: .19em !important; }
  .menu-button { width: 24px !important; height: 18px !important; flex-basis: 24px !important; }

  .s5-origin,
  .s6-top {
    grid-template-columns: 1fr !important;
  }

  .s5-origin-image,
  .s6-device {
    max-width: 190px !important;
  }

  .s4-stage-nav {
    grid-template-columns: 1fr !important;
  }

  .s4-stage {
    grid-template-columns: 1fr !important;
  }

  .s4-photo,
  .s4-stage-03 .s4-photo,
  .s4-stage-04 .s4-photo {
    grid-column: 1 !important;
  }

  .s4-note,
  .s4-stage-caption,
  .s4-final-line {
    grid-column: 1 !important;
  }
}

/* =========================================================
   PHONE LANDSCAPE — 568–932px wide, short viewport
   Still a reading flow, but use available width better.
   ========================================================= */
@media (min-width: 568px) and (max-width: 932px) and (max-height: 600px) and (orientation: landscape) {
  :root { --m-gutter: clamp(24px, 5vw, 48px); }

  .hero {
    min-height: 100dvh !important;
    padding-top: 70px !important;
    padding-bottom: 38px !important;
  }

  .hero-logo { width: 64px !important; margin-bottom: 12px !important; }
  .hero h1 { font-size: 30px !important; }
  .tagline { margin-top: 16px !important; font-size: 13px !important; }
  .services { margin-top: 18px !important; font-size: 9px !important; }

  .screen-02,
  .screen-03,
  .screen-04,
  .screen-05,
  .screen-06,
  .screen-07,
  .screen-08 {
    padding-left: max(var(--m-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--m-gutter), env(safe-area-inset-right)) !important;
  }

  .screen-02-title,
  .s7-main-title { max-width: 650px !important; }

  .screen-03,
  .s4-copy,
  .s5-main,
  .s6-shell,
  .s7-bottom,
  .s8-main {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .s3-photo { aspect-ratio: 16 / 7 !important; }
  .s5-hero, .s6-hero { aspect-ratio: 16 / 7 !important; }

  .s8-main {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 34px !important;
    align-items: start !important;
  }

  .s8-main-divider {
    width: 1px !important;
    height: 100% !important;
    margin: 0 !important;
  }
}


/* =========================================================
   ALEZERIA — MOBILE POLISH 2
   Финальная доводка телефонной версии
   320–767 px
   Desktop НЕ затрагивается
   ========================================================= */

@media (max-width: 767px) {


  /* =======================================================
     ОБЩЕЕ
     ======================================================= */

  :root {
    --m-muted: rgba(20,20,20,.62);
  }


  /*
     Header больше не должен визуально смешиваться
     с текстом, проходящим под ним при прокрутке.
  */

  .site-header {
    background: rgba(247,246,243,.94) !important;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    border-bottom: 1px solid rgba(20,20,20,.06);
  }


  /*
     Светло-серые тексты делаем немного увереннее.
  */

  .s3-muted,
  .s4-copy-block p,
  .s4-ai-copy,
  .s5-muted,
  .s6-project-title p,
  .s6-right-muted,
  .s7-center-muted,
  .s8-left-muted {
    color: rgba(20,20,20,.60) !important;
  }



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


  /*
     Первый архитектурный кадр.
     Было object-position примерно 55%.
     Уменьшаем X → изображение смещается вправо,
     человек становится немного правее.
  */

  .s3-photo-architecture img {
    object-position: 43% 56% !important;
  }


  /*
     У всех трёх кадров одинаковая мобильная геометрия.
  */

  .s3-photo {
    aspect-ratio: 16 / 9 !important;
    border-radius: 3px !important;
  }


  .s3-photo-text {
    left: 18px !important;

    width: min(76%, 275px) !important;

    font-size: clamp(15px, 4.15vw, 17px) !important;
    line-height: 1.40 !important;
  }


  .s3-copy-block {
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }



  /* =======================================================
     SCREEN 04
     ======================================================= */


  /*
     Заголовку добавляем немного воздуха.
  */

  .screen-04 {
    padding-top:
      calc(104px + env(safe-area-inset-top)) !important;
  }


  .s4-heading h2 {
    font-size: clamp(38px, 10.8vw, 50px) !important;
    line-height: .96 !important;
  }


  .s4-stage-nav {
    margin-top: 28px !important;
    gap: 10px 18px !important;
  }


  .s4-stage-nav-item {
    font-size: clamp(10px, 2.9vw, 12px) !important;
  }


  .s4-story {
    margin-top: 34px !important;
    gap: 32px !important;
  }


  /*
     Первые два этапа сохраняем как пару фотографий,
     но немного увеличиваем высоту кадров.
  */

  .s4-stage-01 .s4-photo,
  .s4-stage-02 .s4-photo {
    aspect-ratio: 1 / 1 !important;
  }


  .s4-note {
    padding: 14px 14px !important;
  }


  .s4-stage-caption {
    margin-top: 8px !important;
  }



  /* =======================================================
     SCREEN 06 — ОСНОВНАЯ КОРРЕКЦИЯ
     ======================================================= */


  /*
     Верхний маленький preview:
     сейчас его desktop-геометрия делает экран
     почти вертикальным.

     Задаём реальное соотношение исходного изображения 16:9.
  */

  .s6-device {
    aspect-ratio: auto !important;

    display: block !important;
  }


  .s6-device-screen {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 9 !important;

    border-width: 4px !important;

    box-sizing: border-box !important;
  }


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

    width: 100% !important;
    height: 100% !important;

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


  .s6-device-base {
    bottom: -9px !important;

    left: 2% !important;
    width: 96% !important;
  }


  /*
     Немного больше места между preview и названием.
  */

  .s6-top {
    gap: 18px !important;
  }


  .s6-project-title h2 {
    font-size: clamp(27px, 7.5vw, 35px) !important;
    line-height: .96 !important;
  }



  /*
     Большой центральный hero.
     Исходный 16:9 был слишком низким для текста.
     Делаем мобильный формат более высоким.
  */

  .s6-hero {
    aspect-ratio: 4 / 3 !important;

    margin-top: 38px !important;

    border-radius: 7px !important;
  }


  .s6-hero > img {
    object-position: center center !important;
  }


  .s6-hero-copy {
    width: 64% !important;

    padding: 18px 16px !important;

    box-sizing: border-box !important;
  }


  .s6-hero-mini-brand {
    margin-bottom: 16px !important;
  }


  .s6-hero-copy h2 {
    margin-bottom: 12px !important;

    font-size: clamp(23px, 6.5vw, 29px) !important;
    line-height: .96 !important;
  }


  .s6-hero-copy > p {
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1.40 !important;
  }


  .s6-hero-link {
    margin-top: 12px !important;

    font-size: clamp(8px, 2.2vw, 10px) !important;
  }



  /*
     Правая editorial-часть.
     Trust-card уже выглядит хорошо —
     сохраняем её практически без изменений.
  */

  .s6-right {
    margin-top: 42px !important;
  }


  .s6-right-block,
  .s6-right-final {
    padding-bottom: 28px !important;
    margin-bottom: 28px !important;
  }



  /*
     Нижние две иллюстрации:
     возвращаем естественное 16:9 вместо слишком плоского 16:8.
  */

  .s6-case {
    aspect-ratio: 16 / 9 !important;

    border-radius: 7px !important;
  }


  .s6-case-left-copy,
  .s6-case-right-copy {
    padding: 17px !important;
  }


  .s6-case h3 {
    font-size: clamp(20px, 5.55vw, 24px) !important;
    line-height: 1.02 !important;
  }


  .s6-case-left-copy p,
  .s6-case-right-copy p {
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1.35 !important;
  }


  /*
     Для первой карточки сохраняем крупную мысль,
     но не позволяем ей выпадать за нижний край.
  */

  .s6-case-left-copy h3 {
    max-width: 72% !important;
  }


  /*
     Во второй карточке заголовок и объяснение
     чуть компактнее и свободнее.
  */

  .s6-case-right-copy h3 {
    margin-bottom: 12px !important;
  }


  .s6-case-right-intro {
    max-width: 64% !important;
  }



  /* =======================================================
     TOUCH / SAFE AREA
     ======================================================= */

  .screen-03,
  .screen-04,
  .screen-05,
  .screen-06,
  .screen-07,
  .screen-08 {
    scroll-margin-top:
      calc(58px + env(safe-area-inset-top)) !important;
  }


}


/* =========================================================
   VERY SMALL PHONES — 320–359 px
   ========================================================= */

@media (max-width: 359px) {

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


  .s6-device {
    width: min(100%, 260px) !important;
    max-width: 260px !important;
  }


  .s6-project-title {
    margin-top: 18px !important;
  }


  .s6-hero {
    aspect-ratio: 1 / 1 !important;
  }


  .s6-hero-copy {
    width: 68% !important;
  }

}



/* =========================================================
   SCREEN 03 — MOBILE
   Коррекция положения людей ВПРАВО
   Карточки и тексты не двигаем
   ========================================================= */

@media (max-width: 767px) {

  /* 01 — архитектура */
  .s3-photo-architecture img {
    object-position: 68% 56% !important;
  }

  /* 02 — стоматология */
  .s3-photo-smile img {
    object-position: 62% 50% !important;
  }

  /* 03 — бизнес */
  .s3-photo-business img {
    object-position: 62% 50% !important;
  }

}



/* =========================================================
   SCREEN 03 — MOBILE
   РЕАЛЬНЫЙ СДВИГ ЛЮДЕЙ ВПРАВО
   Двигаем непосредственно сами фотографии
   ========================================================= */

@media (max-width: 767px) {

  /* Общая подготовка */
  .screen-03 .s3-photo {
    overflow: hidden !important;
  }

  .screen-03 .s3-photo img {
    transform-origin: center center !important;
  }


  /* 01 — АРХИТЕКТУРА
     Человек немного правее */
  .screen-03 .s3-photo-architecture img {
    object-position: center center !important;
    transform: translateX(6%) scale(1.12) !important;
  }


  /* 02 — УЛЫБКА
     Лицо заметно правее */
  .screen-03 .s3-photo-smile img {
    object-position: center center !important;
    transform: translateX(8%) scale(1.16) !important;
  }


  /* 03 — БИЗНЕС
     Человек немного правее */
  .screen-03 .s3-photo-business img {
    object-position: center center !important;
    transform: translateX(7%) scale(1.14) !important;
  }

}



/* =========================================================
   SCREEN 03 — MOBILE
   ФИНАЛЬНАЯ КОРРЕКЦИЯ ПОЛОЖЕНИЯ ЛЮДЕЙ

   01 Архитектура — ФИКСИРУЕМ
   02 Улыбка — ещё правее
   03 Бизнес — ещё правее
   ========================================================= */

@media (max-width: 767px) {

  /* -------------------------------------------------------
     01 — АРХИТЕКТУРА
     Положение утверждено — сохраняем без изменений
     ------------------------------------------------------- */

  .screen-03 .s3-photo-architecture img {
    object-position: center center !important;
    transform: translateX(6%) scale(1.12) !important;
  }


  /* -------------------------------------------------------
     02 — УЛЫБКА
     Было 8% → делаем 13%
     ------------------------------------------------------- */

  .screen-03 .s3-photo-smile img {
    object-position: center center !important;
    transform: translateX(13%) scale(1.16) !important;
  }


  /* -------------------------------------------------------
     03 — БИЗНЕС
     Было 7% → делаем 14%
     ------------------------------------------------------- */

  .screen-03 .s3-photo-business img {
    object-position: center center !important;
    transform: translateX(14%) scale(1.14) !important;
  }

}



/* =========================================================
   SCREEN 03 — MOBILE — FINAL POSITION 2
   Только тонкая доводка двух кадров
   ========================================================= */

@media (max-width: 767px) {

  /* 01 — АРХИТЕКТУРА
     Уже утверждено — НЕ МЕНЯЕМ */
  .screen-03 .s3-photo-architecture img {
    object-position: center center !important;
    transform: translateX(6%) scale(1.12) !important;
  }


  /* 02 — УЛЫБКА
     Было 13%, ещё немного вправо */
  .screen-03 .s3-photo-smile img {
    object-position: center center !important;
    transform: translateX(16%) scale(1.17) !important;
  }


  /* 03 — БИЗНЕС
     Было 14%, ещё немного вправо */
  .screen-03 .s3-photo-business img {
    object-position: center center !important;
    transform: translateX(17%) scale(1.15) !important;
  }

}



/* =========================================================
   SCREEN 03 — MOBILE
   ТЕКСТ В ТРЁХ ФОТОКАДРАХ
   крупнее + левее + больше строк
   ========================================================= */

@media (max-width: 767px) {

  .screen-03 .s3-photo-text {
    left: 10px !important;
    right: auto !important;

    width: 58% !important;
    max-width: 215px !important;

    font-size: clamp(16px, 4.5vw, 19px) !important;
    line-height: 1.28 !important;

    letter-spacing: 0 !important;
  }


  /* 01 — архитектура */
  .screen-03 .s3-photo-architecture .s3-photo-text {
    width: 56% !important;
  }


  /* 02 — улыбка */
  .screen-03 .s3-photo-smile .s3-photo-text {
    width: 54% !important;
  }


  /* 03 — бизнес */
  .screen-03 .s3-photo-business .s3-photo-text {
    width: 56% !important;
  }

}



/* =========================================================
   ALEZERIA — MOBILE PAPER BACKGROUND
   Единый исходный бумажный фон 01–08
   + убираем отдельную полосу header
   ========================================================= */

@media (max-width: 767px),
       (max-width: 932px) and (max-height: 600px) and (orientation: landscape) {


  /* -------------------------------------------------------
     1. БАЗОВЫЙ ЦВЕТ
     ------------------------------------------------------- */

  html {
    background: #f7f6f3 !important;
  }


  /*
     Сам body делаем прозрачным.
     Фактура будет жить на отдельном фиксированном слое,
     поэтому на длинных мобильных страницах она больше
     не растягивается на всю высоту сайта.
  */

  body {
    position: relative !important;
    z-index: 0 !important;

    background: transparent !important;
    background-image: none !important;
  }



  /* -------------------------------------------------------
     2. ЕДИНАЯ БУМАЖНАЯ ФАКТУРА

     Используем ТОТ ЖЕ исходный файл,
     который применялся в desktop:
     images/alezeria-paper-bg.jpg
     ------------------------------------------------------- */

  body::before {
    content: "" !important;

    position: fixed !important;
    z-index: -1 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    pointer-events: none !important;

    background-color: #f7f6f3 !important;

    background-image:
      linear-gradient(
        rgba(247,246,243,.84),
        rgba(247,246,243,.84)
      ),
      url("../images/alezeria-paper-bg.jpg") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }



  /* -------------------------------------------------------
     3. ВСЕ СТРАНИЦЫ ПРОЗРАЧНЫЕ

     Теперь 01–08 используют один общий бумажный слой.
     Особенно важно для 07 и 08.
     ------------------------------------------------------- */

  .hero,
  .screen-02,
  .screen-03,
  .screen-04,
  .screen-05,
  .screen-06,
  .screen-07,
  .screen-08 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }



  /* -------------------------------------------------------
     4. SCREEN 07
     Убираем возможную самостоятельную подложку.
     ------------------------------------------------------- */

  .screen-07 {
    background: transparent !important;
  }



  /* -------------------------------------------------------
     5. SCREEN 08
     Здесь в desktop CSS есть собственный #f7f6f2.
     На мобильном полностью его отключаем.
     ------------------------------------------------------- */

  .screen-08 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }



  /* -------------------------------------------------------
     6. HEADER

     Раньше сверху была почти непрозрачная заливка,
     поэтому получалась отдельная белая полоса.

     Теперь header полупрозрачный:
     сквозь него остаётся видна та же бумажная фактура.
     ------------------------------------------------------- */

  .site-header {
    background: rgba(247,246,243,.58) !important;
    background-image: none !important;

    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;

    border-bottom: 0 !important;
    box-shadow: none !important;
  }

}


/* =========================================================
   Очень маленькие телефоны
   фон остаётся тем же — никаких отдельных заливок
   ========================================================= */

@media (max-width: 359px) {

  .site-header {
    background: rgba(247,246,243,.62) !important;
  }

}



/* =========================================================
   SCREEN 04 — MOBILE
   Убираем лишнюю черточку возле "03 — УБИРАЕМ"
   ========================================================= */

@media (max-width: 767px) {

  .screen-04 .s4-stage-nav-item.active::after {
    display: none !important;
    content: none !important;
  }

}



/* =========================================================
   SCREEN 05 — MOBILE
   Соотношение КАРТИНКА / ТЕКСТ
   Было примерно 36 / 64
   Делаем примерно 42 / 58
   ========================================================= */

@media (min-width: 360px) and (max-width: 767px) {

  .screen-05 .s5-origin {
    grid-template-columns: minmax(120px, 42%) minmax(0, 58%) !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .screen-05 .s5-origin-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .screen-05 .s5-origin-copy {
    min-width: 0 !important;
  }

}



/* =========================================================
   SCREEN 05 — MOBILE
   Финальный баланс изображения и текста
   ========================================================= */

@media (min-width: 360px) and (max-width: 767px) {

  .screen-05 .s5-origin {
    grid-template-columns:
      minmax(0, 40%)
      minmax(0, 60%) !important;

    gap: 11px !important;
    align-items: start !important;
  }

  .screen-05 .s5-origin-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  .screen-05 .s5-origin-copy {
    min-width: 0 !important;
  }

}



/* =========================================================
   SCREEN 05 — AORA STORY CARD
   Оптимизация пропорций текста внутри фотографии
   ========================================================= */

@media (max-width: 767px) {

  /* Текстовая зона немного шире,
     но всё ещё остаётся только слева */
  .screen-05 .s5-story-overlay {
    inset: auto !important;

    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: auto !important;

    width: 51% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    padding:
      18px
      0
      16px
      20px !important;

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


  /* AORA */
  .screen-05 .s5-story-overlay .s5-mini-aora {
    margin: 0 0 8px 0 !important;

    font-size: clamp(9px, 2.45vw, 11px) !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
  }


  /* Главный заголовок:
     немного меньше текущего,
     чтобы он не забирал почти всю карточку */
  .screen-05 .s5-story-overlay h3 {
    margin: 0 0 10px 0 !important;

    font-size: clamp(26px, 7.15vw, 31px) !important;
    line-height: .96 !important;
    font-weight: 400 !important;
  }


  /* Маленький поясняющий текст:
     наоборот делаем заметно читабельнее */
  .screen-05 .s5-story-overlay p {
    margin: 0 !important;

    width: 100% !important;
    max-width: 165px !important;

    font-size: clamp(9.5px, 2.55vw, 11px) !important;
    line-height: 1.34 !important;
  }


  /* Ссылка ставится в нижнюю часть текстовой зоны */
  .screen-05 .s5-story-overlay span {
    margin-top: auto !important;

    font-size: clamp(9.5px, 2.5vw, 11px) !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
  }

}



/* =========================================================
   SCREEN 05 — MOBILE
   Поднимаем камень внутри нижнего изображения
   Размер карточки и масштаб камня не меняем
   ========================================================= */

@media (max-width: 767px) {

  .screen-05 .s5-contact-image img {
    object-position: 79% 66% !important;

    transform:
      scale(2.05)
      translate(-1.5%, -3%) !important;

    transform-origin:
      79% 66% !important;
  }

}



/* =========================================================
   SCREEN 05 — AORA STORY
   ES + FR — текст полностью помещается в изображение
   RU / EN / DE НЕ МЕНЯЕМ
   ========================================================= */

@media (max-width: 767px) {


  /* =======================================================
     ESPAÑOL
     ======================================================= */

  html[lang="es"] .screen-05 .s5-story-overlay {
    width: 58% !important;

    padding:
      15px
      0
      12px
      18px !important;
  }

  html[lang="es"] .screen-05 .s5-story-overlay .s5-mini-aora {
    margin-bottom: 6px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }

  html[lang="es"] .screen-05 .s5-story-overlay h3 {
    margin: 0 0 7px 0 !important;

    font-size: clamp(23px, 6.35vw, 27px) !important;
    line-height: .94 !important;
  }

  html[lang="es"] .screen-05 .s5-story-overlay p {
    max-width: 170px !important;

    font-size: clamp(8.5px, 2.25vw, 10px) !important;
    line-height: 1.25 !important;
  }

  html[lang="es"] .screen-05 .s5-story-overlay span {
    margin-top: 6px !important;

    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }



  /* =======================================================
     FRANÇAIS
     ======================================================= */

  html[lang="fr"] .screen-05 .s5-story-overlay {
    width: 57% !important;

    padding:
      15px
      0
      12px
      18px !important;
  }

  html[lang="fr"] .screen-05 .s5-story-overlay .s5-mini-aora {
    margin-bottom: 6px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }

  html[lang="fr"] .screen-05 .s5-story-overlay h3 {
    margin: 0 0 7px 0 !important;

    font-size: clamp(23px, 6.3vw, 27px) !important;
    line-height: .94 !important;
  }

  html[lang="fr"] .screen-05 .s5-story-overlay p {
    max-width: 175px !important;

    font-size: clamp(8.5px, 2.25vw, 10px) !important;
    line-height: 1.24 !important;
  }

  html[lang="fr"] .screen-05 .s5-story-overlay span {
    margin-top: 6px !important;

    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   Убираем стилизацию под ноутбук
   + меняем баланс ИЗОБРАЖЕНИЕ / ТЕКСТ
   ========================================================= */

@media (min-width: 360px) and (max-width: 767px) {

  /* Верхняя пара:
     42% изображение / 58% текст */
  .screen-06 .s6-top {
    grid-template-columns:
      minmax(0, 42%)
      minmax(0, 58%) !important;

    column-gap: 14px !important;
    row-gap: 18px !important;

    align-items: start !important;
  }


  /* Сам контейнер больше не изображает ноутбук */
  .screen-06 .s6-device {
    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 10 !important;

    display: block !important;

    overflow: visible !important;
  }


  /* Обычная чистая карточка с изображением */
  .screen-06 .s6-device-screen {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: auto !important;

    overflow: hidden !important;

    border: 0 !important;
    border-radius: 5px !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  .screen-06 .s6-device-screen img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
  }


  /* Полностью убираем нижнюю "ножку ноутбука" */
  .screen-06 .s6-device-base {
    display: none !important;
  }


  /* Текстовая колонка */
  .screen-06 .s6-project-title {
    min-width: 0 !important;
    padding-top: 1px !important;
  }

}


/* =========================================================
   320–359 px
   На самых узких телефонах оставляем блок вертикальным,
   но ноутбук всё равно убираем
   ========================================================= */

@media (max-width: 359px) {

  .screen-06 .s6-device-screen {
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .screen-06 .s6-device-base {
    display: none !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   КНИГУ ВНУТРИ ПЕРВОГО КАДРА СМЕЩАЕМ КРАЙНЕ ВЛЕВО
   Размер карточки НЕ меняем
   ========================================================= */

@media (max-width: 767px) {

  .screen-06 .s6-device-screen img {
    object-fit: cover !important;

    /* Показываем крайнюю правую часть исходника,
       благодаря чему книга уходит влево внутри кадра */
    object-position: 100% 50% !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   КНИГА — СИЛЬНЫЙ СДВИГ ВЛЕВО ВНУТРИ КАДРА
   ========================================================= */

@media (max-width: 767px) {

  .screen-06 .s6-device-screen {
    overflow: hidden !important;
  }

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

    object-fit: cover !important;
    object-position: center center !important;

    transform:
      translateX(-22%)
      scale(1.18) !important;

    transform-origin: center center !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   КНИГА — ТОЛЬКО НЕБОЛЬШОЙ СДВИГ ВЛЕВО
   ========================================================= */

@media (max-width: 767px) {

  .screen-06 .s6-device-screen img {
    object-fit: cover !important;
    object-position: center center !important;

    transform:
      translateX(-6%)
      scale(1.05) !important;

    transform-origin: center center !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   ВЕСЬ ЛЕВЫЙ КАДР СИЛЬНО СМЕЩАЕМ ВЛЕВО
   Текст справа НЕ двигаем
   ========================================================= */

@media (min-width: 360px) and (max-width: 767px) {

  .screen-06 .s6-top {
    overflow: visible !important;
  }

  .screen-06 .s6-device {
    transform: translateX(-30px) !important;
  }

}


/* 320–359 px — немного меньше,
   чтобы кадр не вышел слишком далеко за экран */

@media (max-width: 359px) {

  .screen-06 .s6-device {
    transform: translateX(-20px) !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   Возвращаем сам кадр на место
   и двигаем ТОЛЬКО КНИГУ внутри него
   ========================================================= */

@media (max-width: 767px) {

  /* 1. ОТМЕНЯЕМ прежнее перемещение всего кадра */
  .screen-06 .s6-device {
    transform: none !important;
    translate: none !important;
  }


  /* 2. Карточка остаётся неподвижной */
  .screen-06 .s6-device-screen {
    overflow: hidden !important;
  }


  /* 3. Двигаем только изображение с книгой внутри карточки */
  .screen-06 .s6-device-screen img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform:
      translateX(-13%)
      scale(1.10) !important;

    transform-origin: center center !important;
  }

}


/* Самые узкие телефоны */
@media (max-width: 359px) {

  .screen-06 .s6-device {
    transform: none !important;
    translate: none !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   1. Поднимаем весь верхний блок
   2. Саму карточку НЕ двигаем
   3. Книгу внутри карточки уводим далеко влево
      и сохраняем полностью видимой
   ========================================================= */

@media (min-width: 360px) and (max-width: 767px) {


  /* -------------------------------------------------------
     1. ПОДНИМАЕМ ВЕСЬ ВЕРХНИЙ БЛОК
     ------------------------------------------------------- */

  .screen-06 .s6-top {
    position: relative !important;

    top: -85px !important;
    margin-bottom: -85px !important;
  }


  /* -------------------------------------------------------
     2. САМ ЛЕВЫЙ КАДР ВОЗВРАЩАЕМ В ШТАТНОЕ ПОЛОЖЕНИЕ
     ------------------------------------------------------- */

  .screen-06 .s6-device {
    transform: none !important;
    translate: none !important;
  }


  .screen-06 .s6-device-screen {
    position: relative !important;

    overflow: hidden !important;

    background: #e7d2b8 !important;
  }


  /* -------------------------------------------------------
     3. ДВИГАЕМ ТОЛЬКО ФОТОГРАФИЮ ВНУТРИ КАДРА

     Изображение делаем немного шире самого окна.
     Благодаря этому его можно далеко сдвинуть влево,
     не получив пустого края справа.
     ------------------------------------------------------- */

  .screen-06 .s6-device-screen img {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 128% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    /* Берём правую часть исходного изображения,
       где находится книга */
    object-position: 100% 50% !important;

    /* Затем физически переносим книгу влево */
    transform: translateX(-18%) !important;

    transform-origin: center center !important;
  }

}


/* =========================================================
   320–359 px
   Чуть меньшее смещение для очень узких телефонов
   ========================================================= */

@media (max-width: 359px) {

  .screen-06 .s6-top {
    position: relative !important;

    top: -65px !important;
    margin-bottom: -65px !important;
  }

  .screen-06 .s6-device {
    transform: none !important;
    translate: none !important;
  }

  .screen-06 .s6-device-screen img {
    width: 124% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: 100% 50% !important;

    transform: translateX(-15%) !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   HERO — ФИНАЛЬНАЯ ОПТИМИЗАЦИЯ ШРИФТОВ
   RU / EN / DE / ES / FR
   Изображение и положение книги НЕ меняем
   ========================================================= */

@media (max-width: 767px) {

  /* Текстовая область */
  .screen-06 .s6-hero-copy {
    width: 58% !important;

    padding:
      17px
      0
      13px
      17px !important;

    box-sizing: border-box !important;
  }


  /* -------------------------------------------------------
     Маленький логотип / подпись сверху
     ------------------------------------------------------- */

  .screen-06 .s6-hero-mini-brand {
    margin-bottom: 11px !important;
  }

  .screen-06 .s6-hero-mark {
    width: 15px !important;
    height: 25px !important;
    margin-right: 7px !important;
  }

  .screen-06 .s6-hero-mini-brand strong {
    font-size: clamp(6px, 1.75vw, 8px) !important;
    line-height: 1.05 !important;
  }

  .screen-06 .s6-hero-mini-brand small {
    margin-top: 1px !important;

    font-size: clamp(3.5px, 1vw, 4.5px) !important;
    line-height: 1.05 !important;

    letter-spacing: .10em !important;
  }


  /* -------------------------------------------------------
     Основной заголовок
     ------------------------------------------------------- */

  .screen-06 .s6-hero-copy h2 {
    margin: 0 0 10px 0 !important;

    font-size: clamp(21px, 6.25vw, 26px) !important;
    line-height: .94 !important;

    letter-spacing: -.015em !important;
  }


  /* -------------------------------------------------------
     Основной небольшой текст
     Делаем заметно читабельнее
     ------------------------------------------------------- */

  .screen-06 .s6-hero-copy > p {
    width: 100% !important;
    max-width: 172px !important;

    margin: 0 !important;

    font-size: clamp(8.5px, 2.3vw, 10px) !important;
    line-height: 1.32 !important;

    letter-spacing: 0 !important;
  }


  /* -------------------------------------------------------
     Ссылка снизу
     ------------------------------------------------------- */

  .screen-06 .s6-hero-link {
    margin-top: 9px !important;

    font-size: clamp(8px, 2.15vw, 9.5px) !important;
    line-height: 1.1 !important;

    letter-spacing: .015em !important;
  }



  /* =======================================================
     FR + ES
     Более длинные формулировки —
     немного компактнее основной заголовок
     ======================================================= */

  html[lang="fr"] .screen-06 .s6-hero-copy h2,
  html[lang="es"] .screen-06 .s6-hero-copy h2 {
    font-size: clamp(20px, 5.85vw, 24px) !important;
    line-height: .93 !important;
  }


  html[lang="fr"] .screen-06 .s6-hero-copy > p,
  html[lang="es"] .screen-06 .s6-hero-copy > p {
    font-size: clamp(8.2px, 2.2vw, 9.5px) !important;
    line-height: 1.28 !important;
  }



  /* =======================================================
     DE
     Самые длинные слова —
     оставляем дополнительный запас
     ======================================================= */

  html[lang="de"] .screen-06 .s6-hero-copy h2 {
    font-size: clamp(19.5px, 5.7vw, 23.5px) !important;
    line-height: .92 !important;
  }

  html[lang="de"] .screen-06 .s6-hero-copy > p {
    font-size: clamp(8px, 2.12vw, 9.2px) !important;
    line-height: 1.27 !important;
  }



  /* =======================================================
     RU + EN
     Можно оставить немного выразительнее
     ======================================================= */

  html[lang="ru"] .screen-06 .s6-hero-copy h2,
  html[lang="en"] .screen-06 .s6-hero-copy h2 {
    font-size: clamp(21px, 6.2vw, 26px) !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   TRUST CARD / ЧАШКА + БЛОКНОТ
   Оптимизация текста внутри изображения
   Само изображение НЕ меняем
   ========================================================= */

@media (max-width: 767px) {

  /* Текстовая область слева */
  .screen-06 .s6-trust-card-copy {
    position: absolute !important;

    left: 20px !important;
    top: 20px !important;

    width: 47% !important;
    max-width: 175px !important;

    padding: 0 !important;

    box-sizing: border-box !important;
  }


  /* Основная фраза */
  .screen-06 .s6-trust-card-copy h4 {
    margin: 0 !important;

    font-size: clamp(10px, 2.75vw, 12px) !important;
    line-height: 1.12 !important;

    font-weight: 400 !important;
    letter-spacing: -.01em !important;
  }


  /* Золотая разделительная линия */
  .screen-06 .s6-card-line {
    width: 25px !important;
    height: 1px !important;

    margin:
      11px
      0
      9px
      0 !important;
  }


  /* Нижний поясняющий текст */
  .screen-06 .s6-trust-card-copy p {
    margin: 0 !important;

    width: 100% !important;

    font-size: clamp(6.8px, 1.9vw, 8.2px) !important;
    line-height: 1.30 !important;

    letter-spacing: 0 !important;
  }



  /* =======================================================
     ENGLISH
     ======================================================= */

  html[lang="en"] .screen-06 .s6-trust-card-copy {
    width: 48% !important;
  }

  html[lang="en"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(9.8px, 2.65vw, 11.5px) !important;
  }



  /* =======================================================
     DEUTSCH
     Длинные слова — немного компактнее
     ======================================================= */

  html[lang="de"] .screen-06 .s6-trust-card-copy {
    width: 49% !important;
  }

  html[lang="de"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(9.4px, 2.55vw, 11px) !important;
    line-height: 1.10 !important;
  }

  html[lang="de"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(6.4px, 1.75vw, 7.7px) !important;
    line-height: 1.26 !important;
  }



  /* =======================================================
     ESPAÑOL
     ======================================================= */

  html[lang="es"] .screen-06 .s6-trust-card-copy {
    width: 50% !important;
  }

  html[lang="es"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(9.3px, 2.5vw, 10.8px) !important;
    line-height: 1.09 !important;
  }

  html[lang="es"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(6.3px, 1.72vw, 7.6px) !important;
    line-height: 1.25 !important;
  }



  /* =======================================================
     FRANÇAIS
     Самая длинная верхняя формулировка
     ======================================================= */

  html[lang="fr"] .screen-06 .s6-trust-card-copy {
    width: 50% !important;
  }

  html[lang="fr"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(9.2px, 2.45vw, 10.6px) !important;
    line-height: 1.08 !important;
  }

  html[lang="fr"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(6.2px, 1.7vw, 7.5px) !important;
    line-height: 1.24 !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   TRUST CARD — КРУПНЫЙ И СБАЛАНСИРОВАННЫЙ ТЕКСТ
   Все 5 языков
   ФОТО НЕ МЕНЯЕМ
   ========================================================= */

@media (max-width: 767px) {

  /* -------------------------------------------------------
     ОБЩАЯ ГЕОМЕТРИЯ ТЕКСТОВОГО БЛОКА

     Процентные координаты делают положение
     симметричным относительно размера самой картинки.
     ------------------------------------------------------- */

  .screen-06 .s6-trust-card-copy {
    position: absolute !important;

    left: 6.5% !important;
    top: 8.5% !important;

    width: 44% !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* -------------------------------------------------------
     ГЛАВНАЯ ФРАЗА
     ------------------------------------------------------- */

  .screen-06 .s6-trust-card-copy h4 {
    margin: 0 !important;

    font-size: clamp(12px, 3.35vw, 14.5px) !important;
    line-height: 1.10 !important;

    font-weight: 400 !important;
    letter-spacing: -.015em !important;
  }


  /* -------------------------------------------------------
     ЗОЛОТАЯ ЛИНИЯ
     ------------------------------------------------------- */

  .screen-06 .s6-card-line {
    width: 28px !important;
    height: 1px !important;

    margin:
      12px
      0
      10px
      0 !important;
  }


  /* -------------------------------------------------------
     ПОЯСНЯЮЩИЙ ТЕКСТ
     ------------------------------------------------------- */

  .screen-06 .s6-trust-card-copy p {
    margin: 0 !important;

    width: 100% !important;
    max-width: none !important;

    font-size: clamp(7.8px, 2.18vw, 9.4px) !important;
    line-height: 1.30 !important;

    letter-spacing: 0 !important;
  }



  /* =======================================================
     RU — наиболее свободная композиция
     ======================================================= */

  html[lang="ru"] .screen-06 .s6-trust-card-copy {
    width: 44% !important;
  }

  html[lang="ru"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(12.5px, 3.45vw, 15px) !important;
  }

  html[lang="ru"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(8px, 2.2vw, 9.5px) !important;
  }



  /* =======================================================
     EN
     ======================================================= */

  html[lang="en"] .screen-06 .s6-trust-card-copy {
    width: 45% !important;
  }

  html[lang="en"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(12px, 3.3vw, 14.5px) !important;
  }

  html[lang="en"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(7.8px, 2.15vw, 9.3px) !important;
  }



  /* =======================================================
     DE
     ======================================================= */

  html[lang="de"] .screen-06 .s6-trust-card-copy {
    width: 47% !important;
  }

  html[lang="de"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(11.3px, 3.05vw, 13.5px) !important;
    line-height: 1.08 !important;
  }

  html[lang="de"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(7.2px, 1.98vw, 8.7px) !important;
    line-height: 1.27 !important;
  }



  /* =======================================================
     ES
     ======================================================= */

  html[lang="es"] .screen-06 .s6-trust-card-copy {
    width: 48% !important;
  }

  html[lang="es"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(11.2px, 3vw, 13.3px) !important;
    line-height: 1.08 !important;
  }

  html[lang="es"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(7.1px, 1.95vw, 8.6px) !important;
    line-height: 1.26 !important;
  }



  /* =======================================================
     FR
     ======================================================= */

  html[lang="fr"] .screen-06 .s6-trust-card-copy {
    width: 48% !important;
  }

  html[lang="fr"] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(11px, 2.95vw, 13px) !important;
    line-height: 1.07 !important;
  }

  html[lang="fr"] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(7px, 1.92vw, 8.5px) !important;
    line-height: 1.25 !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   ПЕРВАЯ НИЖНЯЯ КАРТОЧКА
   Симметричная типографика относительно изображения
   RU / EN / DE / ES / FR
   ========================================================= */

@media (max-width: 767px) {

  .screen-06 .s6-case-left {
    position: relative !important;
    overflow: hidden !important;
  }


  /* -------------------------------------------------------
     ТЕКСТОВЫЙ БЛОК
     Равномерный отступ сверху и слева
     ------------------------------------------------------- */

  .screen-06 .s6-case-left-copy {
    position: absolute !important;

    top: 8% !important;
    left: 7% !important;

    width: 44% !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* -------------------------------------------------------
     ОСНОВНОЙ ЗАГОЛОВОК
     ------------------------------------------------------- */

  .screen-06 .s6-case-left-copy h3 {
    margin: 0 0 10px 0 !important;

    width: 100% !important;
    max-width: none !important;

    font-size: clamp(19px, 5.35vw, 23px) !important;
    line-height: .96 !important;

    font-weight: 400 !important;
    letter-spacing: -.015em !important;
  }


  /* -------------------------------------------------------
     НИЖНИЙ ПОЯСНЯЮЩИЙ ТЕКСТ
     ------------------------------------------------------- */

  .screen-06 .s6-case-left-copy p {
    margin: 0 !important;

    width: 100% !important;
    max-width: none !important;

    font-size: clamp(7.5px, 2.05vw, 9px) !important;
    line-height: 1.28 !important;

    letter-spacing: 0 !important;
  }



  /* =======================================================
     RU
     ======================================================= */

  html[lang="ru"] .screen-06 .s6-case-left-copy {
    width: 43% !important;
  }

  html[lang="ru"] .screen-06 .s6-case-left-copy h3 {
    font-size: clamp(19px, 5.25vw, 22.5px) !important;
    line-height: .95 !important;
  }



  /* =======================================================
     EN
     ======================================================= */

  html[lang="en"] .screen-06 .s6-case-left-copy {
    width: 44% !important;
  }

  html[lang="en"] .screen-06 .s6-case-left-copy h3 {
    font-size: clamp(18.5px, 5.1vw, 22px) !important;
    line-height: .96 !important;
  }



  /* =======================================================
     DE
     Длинные слова — чуть больше ширины и компактнее шрифт
     ======================================================= */

  html[lang="de"] .screen-06 .s6-case-left-copy {
    width: 47% !important;
  }

  html[lang="de"] .screen-06 .s6-case-left-copy h3 {
    font-size: clamp(17px, 4.65vw, 20px) !important;
    line-height: .95 !important;
  }

  html[lang="de"] .screen-06 .s6-case-left-copy p {
    font-size: clamp(7px, 1.9vw, 8.4px) !important;
    line-height: 1.24 !important;
  }



  /* =======================================================
     ES
     ======================================================= */

  html[lang="es"] .screen-06 .s6-case-left-copy {
    width: 47% !important;
  }

  html[lang="es"] .screen-06 .s6-case-left-copy h3 {
    font-size: clamp(17.5px, 4.75vw, 20.5px) !important;
    line-height: .95 !important;
  }

  html[lang="es"] .screen-06 .s6-case-left-copy p {
    font-size: clamp(7px, 1.92vw, 8.5px) !important;
    line-height: 1.25 !important;
  }



  /* =======================================================
     FR
     ======================================================= */

  html[lang="fr"] .screen-06 .s6-case-left-copy {
    width: 47% !important;
  }

  html[lang="fr"] .screen-06 .s6-case-left-copy h3 {
    font-size: clamp(17px, 4.65vw, 20px) !important;
    line-height: .94 !important;
  }

  html[lang="fr"] .screen-06 .s6-case-left-copy p {
    font-size: clamp(7px, 1.9vw, 8.4px) !important;
    line-height: 1.24 !important;
  }

}



/* =========================================================
   SCREEN 06 — MOBILE
   ПЕРВАЯ НИЖНЯЯ КАРТОЧКА
   RU + EN — ВЕСЬ ТЕКСТ ВНУТРИ КАДРА
   Остальные языки НЕ меняем
   ========================================================= */

@media (max-width: 767px) {


  /* =======================================================
     RUSSIAN
     ======================================================= */

  html[lang="ru"] .screen-06 .s6-case-left-copy {
    top: 7% !important;
    left: 7% !important;

    width: 48% !important;
    max-width: none !important;
  }

  html[lang="ru"] .screen-06 .s6-case-left-copy h3 {
    margin: 0 0 7px 0 !important;

    width: 100% !important;

    font-size: clamp(16.5px, 4.55vw, 19.5px) !important;
    line-height: .91 !important;

    letter-spacing: -.015em !important;
  }

  html[lang="ru"] .screen-06 .s6-case-left-copy p {
    margin: 0 !important;

    width: 100% !important;

    font-size: clamp(6.1px, 1.68vw, 7.4px) !important;
    line-height: 1.17 !important;

    letter-spacing: -.005em !important;
  }



  /* =======================================================
     ENGLISH
     Более длинный заголовок —
     даём ещё немного ширины
     ======================================================= */

  html[lang="en"] .screen-06 .s6-case-left-copy {
    top: 7% !important;
    left: 7% !important;

    width: 51% !important;
    max-width: none !important;
  }

  html[lang="en"] .screen-06 .s6-case-left-copy h3 {
    margin: 0 0 7px 0 !important;

    width: 100% !important;

    font-size: clamp(15.5px, 4.25vw, 18px) !important;
    line-height: .90 !important;

    letter-spacing: -.018em !important;
  }

  html[lang="en"] .screen-06 .s6-case-left-copy p {
    margin: 0 !important;

    width: 100% !important;

    font-size: clamp(6px, 1.62vw, 7.2px) !important;
    line-height: 1.15 !important;

    letter-spacing: -.008em !important;
  }

}



/* =========================================================
   SCREEN 07 — MOBILE
   AORA — делаем фон значительно ярче и светлее
   ========================================================= */

@media (max-width: 767px) {

  /* Само изображение */
  .screen-07 .s7-card-aora .s7-card-image {
    filter:
      brightness(1.48)
      contrast(.92)
      saturate(1.12) !important;
  }


  /* Ослабляем затемняющий слой поверх фотографии */
  .screen-07 .s7-card-aora-shade {
    background: linear-gradient(
      90deg,
      rgba(2, 8, 14, .42) 0%,
      rgba(2, 8, 14, .27) 38%,
      rgba(2, 8, 14, .10) 68%,
      rgba(2, 8, 14, .02) 100%
    ) !important;
  }

}


/* =========================================================
   SCREEN 05 — AORA STORY
   RU — СЖАТИЕ ТЕКСТА С ЗАПАСОМ
   Изображение и другие языки НЕ меняем
   ========================================================= */

@media (max-width: 767px) {

  html[lang="ru"] .screen-05 .s5-story-overlay {
    width: 57% !important;

    padding:
      14px
      0
      16px
      18px !important;

    box-sizing: border-box !important;

    justify-content: flex-start !important;
  }


  /* AORA */
  html[lang="ru"] .screen-05 .s5-story-overlay .s5-mini-aora {
    margin-bottom: 6px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }


  /* Главный заголовок */
  html[lang="ru"] .screen-05 .s5-story-overlay h3 {
    margin:
      0
      0
      7px
      0 !important;

    font-size: clamp(22px, 6.05vw, 26px) !important;
    line-height: .92 !important;

    letter-spacing: -.015em !important;
  }


  /* Основной небольшой текст */
  html[lang="ru"] .screen-05 .s5-story-overlay p {
    width: 100% !important;
    max-width: 175px !important;

    margin: 0 !important;

    font-size: clamp(8px, 2.18vw, 9.5px) !important;
    line-height: 1.22 !important;

    letter-spacing: -.005em !important;
  }


  /* Нижняя ссылка:
     отменяем прижим к самому низу карточки */
  html[lang="ru"] .screen-05 .s5-story-overlay span {
    margin-top: 7px !important;

    font-size: clamp(8px, 2.15vw, 9.3px) !important;
    line-height: 1.1 !important;

    white-space: normal !important;
  }

}



/* =========================================================
   SCREEN 03 — MOBILE 320–359 px
   ТРЕТИЙ КАДР / BUSINESS

   Уменьшаем текст во ВСЕХ языках,
   чтобы он гарантированно помещался в изображение.
   Картинку и положение человека НЕ меняем.
   ========================================================= */

@media (max-width: 359px) {

  .screen-03 .s3-photo-business .s3-photo-text {
    left: 9px !important;
    right: auto !important;

    width: 61% !important;
    max-width: none !important;

    font-size: 12px !important;
    line-height: 1.16 !important;

    letter-spacing: -0.01em !important;

    margin: 0 !important;
  }


  /* EN */
  html[lang="en"] .screen-03
  .s3-photo-business .s3-photo-text {
    font-size: 11.8px !important;
    line-height: 1.15 !important;
  }


  /* DE — самый длинный вариант */
  html[lang="de"] .screen-03
  .s3-photo-business .s3-photo-text {
    width: 63% !important;

    font-size: 11.3px !important;
    line-height: 1.13 !important;
  }


  /* ES */
  html[lang="es"] .screen-03
  .s3-photo-business .s3-photo-text {
    width: 63% !important;

    font-size: 11.4px !important;
    line-height: 1.13 !important;
  }


  /* FR */
  html[lang="fr"] .screen-03
  .s3-photo-business .s3-photo-text {
    width: 63% !important;

    font-size: 11.3px !important;
    line-height: 1.13 !important;
  }


  /* RU */
  html[lang="ru"] .screen-03
  .s3-photo-business .s3-photo-text {
    font-size: 11.8px !important;
    line-height: 1.15 !important;
  }

}



/* =========================================================
   ALEZERIA — PHONE LANDSCAPE FINAL FIX
   844×390 / 932×430 и близкие форматы

   Исправляем:
   - AORA story card / screen 05
   - trust card / screen 06
   - две нижние case cards / screen 06

   Portrait НЕ затрагивается
   ========================================================= */

@media
  (min-width: 568px)
  and (max-width: 932px)
  and (max-height: 500px)
  and (orientation: landscape) {


  /* =======================================================
     ОБЩИЙ ПРИНЦИП

     Карточки теперь рассчитываются от ВЫСОТЫ телефона,
     а не растягиваются почти на всю ширину экрана.
     Поэтому целиком помещаются в landscape viewport.
     ======================================================= */

  .screen-05 .s5-story-card,
  .screen-06 .s6-trust-card,
  .screen-06 .s6-case {
    width: min(
      100%,
      calc((100dvh - 92px) * 1.78)
    ) !important;

    max-width: 700px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;
    max-height: calc(100dvh - 92px) !important;

    overflow: hidden !important;
  }



  /* =======================================================
     SCREEN 05 — AORA / РЕБЁНОК НА БЕРЕГУ
     ======================================================= */

  .screen-05 .s5-story-card > img {
    width: 100% !important;
    height: 100% !important;

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


  .screen-05 .s5-story-overlay {
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 48% !important;
    height: 100% !important;

    padding:
      clamp(14px, 4vh, 20px)
      8px
      clamp(13px, 3.5vh, 18px)
      clamp(16px, 4.5vh, 22px) !important;

    box-sizing: border-box !important;
  }


  .screen-05 .s5-story-overlay .s5-mini-aora {
    font-size: clamp(9px, 2.4vh, 11px) !important;
    line-height: 1 !important;

    margin-bottom: clamp(5px, 1.5vh, 8px) !important;
  }


  .screen-05 .s5-story-overlay h3 {
    font-size: clamp(27px, 7.4vh, 35px) !important;
    line-height: .92 !important;

    margin: 0 0 clamp(6px, 1.7vh, 9px) !important;
  }


  /* Именно этот текст сейчас был слишком мелким */
  .screen-05 .s5-story-overlay p {
    width: 100% !important;
    max-width: 210px !important;

    font-size: clamp(10px, 2.65vh, 12px) !important;
    line-height: 1.22 !important;

    margin: 0 !important;
  }


  .screen-05 .s5-story-overlay span {
    margin-top: clamp(5px, 1.5vh, 8px) !important;

    font-size: clamp(9px, 2.3vh, 11px) !important;
    line-height: 1.1 !important;
  }



  /* =======================================================
     SCREEN 06 — ЧАШКА + БЛОКНОТ
     ======================================================= */

  .screen-06 .s6-trust-card img {
    width: 100% !important;
    height: 100% !important;

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


  .screen-06 .s6-trust-card-copy {
    left: 6% !important;
    top: 9% !important;

    width: 43% !important;
    max-width: none !important;
  }


  .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(12px, 3.1vh, 15px) !important;
    line-height: 1.08 !important;
  }


  .screen-06 .s6-card-line {
    width: 26px !important;

    margin:
      clamp(7px, 2vh, 10px)
      0
      clamp(6px, 1.6vh, 9px) !important;
  }


  .screen-06 .s6-trust-card-copy p {
    font-size: clamp(8px, 2.1vh, 10px) !important;
    line-height: 1.22 !important;
  }



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

  .screen-06 .s6-case > img {
    width: 100% !important;
    height: 100% !important;

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


  .screen-06 .s6-case-left-copy,
  .screen-06 .s6-case-right-copy {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;

    width: 48% !important;
    height: 100% !important;

    padding:
      clamp(14px, 4vh, 20px)
      clamp(10px, 2.5vh, 14px)
      clamp(12px, 3vh, 17px)
      clamp(16px, 4.4vh, 22px) !important;

    box-sizing: border-box !important;
  }


  .screen-06 .s6-case h3 {
    margin: 0 0 clamp(7px, 2vh, 10px) !important;

    font-size: clamp(24px, 6.2vh, 31px) !important;
    line-height: .94 !important;
  }


  /* Увеличиваем маленький поясняющий текст */
  .screen-06 .s6-case-left-copy p,
  .screen-06 .s6-case-right-copy p,
  .screen-06 .s6-case-right-intro {
    width: 100% !important;
    max-width: 220px !important;

    font-size: clamp(9px, 2.35vh, 11px) !important;
    line-height: 1.22 !important;
  }



  /* =======================================================
     ЯЗЫКОВОЙ ЗАПАС

     В landscape больше не используем слишком маленькие
     отдельные размеры для длинных языков.
     ======================================================= */

  html[lang="de"] .screen-05 .s5-story-overlay h3,
  html[lang="fr"] .screen-05 .s5-story-overlay h3,
  html[lang="es"] .screen-05 .s5-story-overlay h3 {
    font-size: clamp(25px, 6.7vh, 32px) !important;
  }


  html[lang="de"] .screen-06 .s6-case h3,
  html[lang="fr"] .screen-06 .s6-case h3,
  html[lang="es"] .screen-06 .s6-case h3 {
    font-size: clamp(22px, 5.7vh, 28px) !important;
  }


  html[lang="de"] .screen-06 .s6-case-left-copy p,
  html[lang="fr"] .screen-06 .s6-case-left-copy p,
  html[lang="es"] .screen-06 .s6-case-left-copy p,
  html[lang="de"] .screen-06 .s6-case-right-copy p,
  html[lang="fr"] .screen-06 .s6-case-right-copy p,
  html[lang="es"] .screen-06 .s6-case-right-copy p {
    font-size: clamp(8.5px, 2.15vh, 10px) !important;
  }

}



/* =========================================================
   SCREEN 06 — HERO LOGO
   ФИНАЛЬНАЯ ВЕРСИЯ ДЛЯ ТЕЛЕФОНОВ И МАЛЫХ ЭКРАНОВ
   <= 1100 px

   Исправляем:
   - форму знака
   - пропорции знака
   - размер названия
   - читаемость подписи
   ========================================================= */

@media (max-width: 1100px) {

  /* Весь логотип */
  .screen-06 .s6-hero-mini-brand {
    display: flex !important;
    align-items: center !important;

    margin-bottom: 12px !important;

    white-space: nowrap !important;
  }


  /* =======================================================
     ЗНАК

     Полностью отключаем старую мобильную конструкцию
     и строим знак заново в тех же пропорциях,
     что утверждены на desktop.
     ======================================================= */

  .screen-06 .s6-hero-mark {
    position: relative !important;

    display: block !important;
    flex: 0 0 auto !important;

    width: clamp(24px, 3.5vw, 32px) !important;
    height: clamp(38px, 5.3vw, 50px) !important;

    margin-right: clamp(8px, 1.3vw, 11px) !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: none !important;

    transform: none !important;
  }


  /* Вертикальная ось */
  .screen-06 .s6-hero-mark::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    left: 39% !important;
    top: 0 !important;

    width: 1px !important;
    height: 100% !important;

    background: #25221e !important;

    border: 0 !important;

    transform: none !important;
  }


  /* Плавная дуга */
  .screen-06 .s6-hero-mark::after {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    left: 0 !important;
    top: 16% !important;

    width: 100% !important;
    height: 77% !important;

    border: 0 !important;
    border-radius: 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.15' stroke-linecap='round'/%3E%3C/svg%3E") !important;

    transform: none !important;
  }


  /* =======================================================
     ТЕКСТОВАЯ ЧАСТЬ ЛОГОТИПА
     ======================================================= */

  .screen-06 .s6-hero-mini-brand > div {
    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    min-width: 0 !important;
  }


  /* Кодекс доверия */
  .screen-06 .s6-hero-mini-brand strong {
    font-family:
      Georgia,
      "Times New Roman",
      serif !important;

    font-size: clamp(8.5px, 1.35vw, 11.5px) !important;
    line-height: 1.02 !important;

    font-weight: 400 !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;
  }


  /* АНАЛИТИЧЕСКАЯ ПРАКТИКА */
  .screen-06 .s6-hero-mini-brand small {
    margin-top: 3px !important;

    font-size: clamp(4.2px, .72vw, 6.2px) !important;
    line-height: 1 !important;

    letter-spacing: .13em !important;

    white-space: nowrap !important;
  }

}


/* =========================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ТЕЛЕФОНЫ 320–359 px
   ========================================================= */

@media (max-width: 359px) {

  .screen-06 .s6-hero-mark {
    width: 22px !important;
    height: 35px !important;

    margin-right: 7px !important;
  }

  .screen-06 .s6-hero-mini-brand strong {
    font-size: 8px !important;
  }

  .screen-06 .s6-hero-mini-brand small {
    margin-top: 2px !important;

    font-size: 3.8px !important;
    letter-spacing: .11em !important;
  }

}


/* =========================================================
   PHONE LANDSCAPE
   568–932 px
   ========================================================= */

@media
  (min-width: 568px)
  and (max-width: 932px)
  and (max-height: 500px)
  and (orientation: landscape) {

  .screen-06 .s6-hero-mark {
    width: 29px !important;
    height: 45px !important;

    margin-right: 10px !important;
  }

  .screen-06 .s6-hero-mini-brand strong {
    font-size: 10.5px !important;
  }

  .screen-06 .s6-hero-mini-brand small {
    font-size: 5.4px !important;
  }

}



/* SCREEN 03 - ARCHITECT TEXT READABILITY */
@media (max-width: 767px) {
  .screen-03 .s3-photo-architecture .s3-photo-shade {
    background: linear-gradient(
      90deg,
      rgba(39,43,36,.96) 0%,
      rgba(43,47,39,.90) 14%,
      rgba(52,56,46,.78) 28%,
      rgba(67,70,58,.60) 42%,
      rgba(86,88,73,.38) 54%,
      rgba(105,106,88,.16) 64%,
      rgba(120,120,102,0) 73%
    ) !important;
  }
}


/* SCREEN 03 - BUSINESS TEXT - RU ONLY */
@media (min-width: 360px) and (max-width: 767px) {
  html[lang="ru"] .screen-03 .s3-photo-business .s3-photo-text {
    width: 61% !important;
    max-width: none !important;
    font-size: clamp(14.5px, 3.85vw, 16px) !important;
    line-height: 1.18 !important;
  }
}


/* ALEZERIA - LANDSCAPE TEXT READABILITY */
@media (min-width: 568px) and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {

  .screen-03 .s3-photo-text {
    font-size: clamp(17px, 4.6vh, 19px) !important;
    line-height: 1.24 !important;
  }

  .screen-05 .s5-story-overlay .s5-mini-aora {
    font-size: clamp(10.5px, 2.8vh, 12px) !important;
  }

  .screen-05 .s5-story-overlay p {
    font-size: clamp(11.5px, 3vh, 13px) !important;
    line-height: 1.25 !important;
  }

  .screen-05 .s5-story-overlay span {
    font-size: clamp(10.5px, 2.7vh, 12px) !important;
  }

  .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(14px, 3.6vh, 17px) !important;
    line-height: 1.10 !important;
  }

  .screen-06 .s6-trust-card-copy p {
    font-size: clamp(9.5px, 2.5vh, 11.5px) !important;
    line-height: 1.25 !important;
  }

  .screen-06 .s6-case h3 {
    font-size: clamp(26px, 6.7vh, 33px) !important;
  }

  .screen-06 .s6-case-left-copy p,
  .screen-06 .s6-case-right-copy p,
  .screen-06 .s6-case-right-intro {
    font-size: clamp(10.5px, 2.75vh, 12.5px) !important;
    line-height: 1.25 !important;
  }
}


/* ALEZERIA - LANDSCAPE TEXT PRIORITY FIX */
@media (min-width: 568px) and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {

  html[lang] .screen-05 .s5-story-overlay .s5-mini-aora {
    font-size: clamp(10.5px, 2.8vh, 12px) !important;
  }

  html[lang] .screen-05 .s5-story-overlay h3 {
    font-size: clamp(27px, 7.4vh, 35px) !important;
    line-height: .92 !important;
  }

  html[lang] .screen-05 .s5-story-overlay p {
    font-size: clamp(11.5px, 3vh, 13px) !important;
    line-height: 1.25 !important;
  }

  html[lang] .screen-05 .s5-story-overlay span {
    font-size: clamp(10.5px, 2.7vh, 12px) !important;
  }

  html[lang] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(14px, 3.6vh, 17px) !important;
    line-height: 1.10 !important;
  }

  html[lang] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(9.5px, 2.5vh, 11.5px) !important;
    line-height: 1.25 !important;
  }

  html[lang] .screen-06 .s6-case h3 {
    font-size: clamp(26px, 6.7vh, 33px) !important;
  }

  html[lang] .screen-06 .s6-case-left-copy p,
  html[lang] .screen-06 .s6-case-right-copy p,
  html[lang] .screen-06 .s6-case-right-intro {
    font-size: clamp(10.5px, 2.75vh, 12.5px) !important;
    line-height: 1.25 !important;
  }
}


/* SCREEN 07 - LANDSCAPE TEXT READABILITY */
@media (min-width: 568px) and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .screen-07 .s7-card-copy p {
    font-size: clamp(17px, 4.6vh, 19px) !important;
    line-height: 1.38 !important;
  }

  .screen-07 .s7-card-kicker {
    font-size: clamp(12px, 3.1vh, 14px) !important;
  }
}


/* ALEZERIA - LANDSCAPE TEXT STRONG READABILITY */
@media (min-width: 568px) and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {

  html[lang] .screen-06 .s6-trust-card-copy h4 {
    font-size: clamp(16px, 4.4vh, 19px) !important;
    line-height: 1.10 !important;
  }

  html[lang] .screen-06 .s6-trust-card-copy p {
    font-size: clamp(11px, 3.05vh, 13px) !important;
    line-height: 1.25 !important;
  }

  html[lang] .screen-06 .s6-case-left-copy p,
  html[lang] .screen-06 .s6-case-right-copy p,
  html[lang] .screen-06 .s6-case-right-intro {
    font-size: clamp(12px, 3.2vh, 14px) !important;
    line-height: 1.24 !important;
  }

  html[lang] .screen-07 .s7-card-copy p {
    font-size: clamp(20px, 5.5vh, 22px) !important;
    line-height: 1.32 !important;
  }

  html[lang] .screen-07 .s7-card-kicker {
    font-size: clamp(13px, 3.5vh, 15px) !important;
  }
}


/* ALEZERIA - SOFT WHITE TEXT ON DARK AORA IMAGES - ALL FORMATS */
[data-i18n="s5_hero_title"],
[data-i18n="s5_hero_sub"],
[data-i18n="s7_aora_text"] {
  color: rgba(242,239,231,.88) !important;
}


/* AORA KICKER SOFTEN - ALL FORMATS */
.screen-07 .s7-card-kicker:not(.s7-card-kicker-dark) {
  color: rgba(242,239,231,.68) !important;
}