/* ─── FONTS ──────────────────────────────────────── */
    @font-face {
      font-family: 'Leotaro';
      src: url('../fonts/Leotaro-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Circe';
      src: url('../fonts/circe.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Circe';
      src: url('../fonts/circe-light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    /* ─── TOKENS ─────────────────────────────────────── */
    :root {
      --bg-0: #050816;
      --bg-1: #070B1D;
      --bg-2: #0D0A2A;
      --bg-3: #0A1028;

      --text-100: #EDE9E0;
      --text-80:  rgba(237,233,224,0.80);
      --text-65:  rgba(237,233,224,0.65);
      --text-40:  rgba(237,233,224,0.40);

      --gold:     #FDE08B;
      --gold-70:  rgba(253,224,139,0.70);
      --gold-40:  rgba(253,224,139,0.40);
      --gold-20:  rgba(253,224,139,0.20);
      --gold-10:  rgba(253,224,139,0.10);

      /*
        Шрифтовая шкала — принцип luxury editorial:
        максимальный контраст между уровнями.
        10px overline → 15px body → 46px title → 124px display.
        Никаких «средних» размеров.
      */
      --f-display: clamp(88px, 11vw,  152px);   /* Intro: MALEA */
      --f-hero:    clamp(72px,  9vw,  124px);   /* Hero: имя */
      --f-section: clamp(44px,  5vw,   70px);   /* Philosophy: заголовок */
      --f-title:   clamp(30px, 3.2vw,  46px);   /* Identity: headline */
      --f-body:    clamp(16px, 1.4vw,  19px);   /* Основной текст */
      --f-subtitle: clamp(22px, 2.4vw,  32px);   /* Подзаголовки второго уровня */
      --f-micro:   12px;                          /* Overlines, кнопки, подписи */

      --font-d: 'Leotaro', Georgia, serif;
      --font-b: 'Circe', Arial, sans-serif;
      --font-q: 'Cormorant Garamond', Georgia, serif;

      --col-pad: 10vw;
    }

    /* ─── TYPOGRAPHY SYSTEM — MALEA ──────────────────── */
    /*
      Shared typography utilities — reference layer.
      Эти классы задают единую типографику для всех экранов.
      Используются как эталон; локальные переопределения постепенно
      заменяются на эти классы там, где это безопасно.
    */

    /* Overline — мелкий заголовок-маркер секции */
    .section-overline {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      line-height: 1;
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
    }

    /* Section title — крупный заголовок секции (Leotaro) */
    .section-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: var(--f-section);
      line-height: 1.12;
      letter-spacing: .04em;
      color: var(--text-100);
    }

    /* Body text — основной текст секции */
    .section-body {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      line-height: 1.76;
      color: var(--text-65);
      letter-spacing: .01em;
    }

    /* Panel / card title (Leotaro) */
    .panel-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(22px, 2.2vw, 32px);
      line-height: 1.18;
      letter-spacing: .04em;
      color: var(--text-100);
    }

    /* Micro label — подписи, мета, кнопки, капшн */
    .micro-label {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      line-height: 1;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--text-40);
    }

    /* ─── RESET ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg-0);
      color: var(--text-100);
      font-family: var(--font-b);
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }

    /* ─── NAVIGATION ─────────────────────────────────── */
    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1000;
      padding: 18px var(--col-pad);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;

      background:
        linear-gradient(
          180deg,
          rgba(5,8,22,.92) 0%,
          rgba(5,8,22,.82) 72%,
          rgba(5,8,22,.64) 100%
        );
      border-bottom: 1px solid rgba(253,224,139,.10);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      box-shadow:
        0 10px 34px rgba(0,0,0,.18),
        0 1px 0 rgba(253,224,139,.035);

      transition:
        opacity .45s ease,
        transform .45s ease,
        background .35s ease,
        border-color .35s ease;
    }
    .nav.is-hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
    }

    .nav-logo {
      font-family: var(--font-d);
      font-size: clamp(17px, 1.05vw, 20px);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(253,224,139,.88);
      text-decoration: none;
      flex-shrink: 0;
      line-height: 1;
      transition: color .3s ease, letter-spacing .3s ease;
    }
    .nav-logo:hover {
      color: rgba(253,224,139,.98);
      letter-spacing: .19em;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: clamp(28px, 3vw, 38px);
      list-style: none;
    }
    .nav-links a {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 11px;
      line-height: 1;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(237,233,224,.66);
      text-decoration: none;
      transition: color .25s ease;
    }
    .nav-links a:hover {
      color: rgba(253,224,139,.82);
    }
    .nav-cta {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 11px;
      line-height: 1;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(253,224,139,.86);
      border: 1px solid rgba(253,224,139,.42);
      background: rgba(253,224,139,.026);
      padding: 9px 20px;
      cursor: pointer;
      flex-shrink: 0;
      transition:
        border-color .3s ease,
        background .3s ease,
        color .3s ease;
    }
    .nav-cta:hover {
      color: rgba(253,224,139,.98);
      border-color: rgba(253,224,139,.62);
      background: rgba(253,224,139,.065);
    }

    /* ─── MOBILE MENU — desktop hidden ──────────────── */
    .nav-menu-toggle,
    .nav-mobile-panel {
      display: none;
    }

    /* ─── SHARED ─────────────────────────────────────── */
    .screen {
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    .btn {
      display: inline-block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid var(--gold-40);
      background: transparent;
      padding: 10px 28px;
      cursor: pointer;
      text-decoration: none;
      transition: border-color .3s, background .3s;
    }
    .btn:hover { border-color: var(--gold-70); background: rgba(253,224,139,.08); }

    /* ─── DEV SCREEN LABELS — SAFE DOM BADGES ───────────────────────── */
    .dev-screen-badge {
      display: none;
    }

    body.dev-screen-labels [data-screen-label] {
      position: relative;
    }

    body.dev-screen-labels .dev-screen-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      position: absolute;
      top: 86px;
      left: var(--col-pad);
      z-index: 900;
      pointer-events: none;

      font-family: var(--font-b);
      font-size: 10px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: .18em;
      text-transform: uppercase;

      color: rgba(253,224,139,.76);
      background: rgba(5,8,22,.78);
      border: 1px solid rgba(253,224,139,.26);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      padding: 7px 10px 6px;
      border-radius: 999px;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      body.dev-screen-labels .dev-screen-badge {
        top: 72px;
        left: 18px;
        font-size: 9px;
        letter-spacing: .12em;
        padding: 6px 8px 5px;
      }
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 0  —  INTRO
    ═══════════════════════════════════════════════════ */
    #intro {
      background: var(--bg-0);
      justify-content: center;
      flex-direction: column;
    }

    .intro-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse 65% 55% at 50% 50%,
        rgba(253,224,139,.06) 0%,
        transparent 70%
      );
      pointer-events: none;
    }

    .intro-content {
      position: relative;
      z-index: 1;
      text-align: center;
      width: 100%;
    }

    /* Гигантское имя — главный объект экрана */
    .intro-logo {
      font-family: var(--font-d);
      font-size: var(--f-display);
      color: var(--gold);
      letter-spacing: .12em;
      text-transform: uppercase;
      line-height: 1;
      display: block;
    }

    /* Тонкая золотая нить под именем */
    .intro-rule {
      width: 48px;
      height: 1px;
      background: var(--gold-40);
      margin: 28px auto 22px;
    }

    /* Дескриптор в 10px — контраст к гигантскому имени */
    .intro-desc {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .34em;
      text-transform: uppercase;
      color: rgba(237,233,224,.58);
    }

    @media (max-width: 520px) {
      .intro-desc {
        max-width: 82%;
        margin: 0 auto;
        line-height: 1.7;
        letter-spacing: .22em;
      }
    }

    /* Scroll-hint */
    .intro-hint {
      position: absolute;
      bottom: 44px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
    .intro-hint-line {
      width: 1px;
      height: 52px;
      background: linear-gradient(to bottom, transparent, rgba(237,233,224,.22));
      animation: hint-pulse 2.4s ease-in-out infinite;
      margin: 0 auto;
    }
    @keyframes hint-pulse {
      0%,100% { opacity:.18; transform: scaleY(.6) translateY(-6px); }
      55%      { opacity:.55; transform: scaleY(1)   translateY(0); }
    }


    /* ═══════════════════════════════════════════════════
       SCREEN 1  —  HERO
    ═══════════════════════════════════════════════════ */
    #hero {
      background: var(--bg-1);
      min-height: 100vh;
    }

    .hero-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 52% 70% at 82% 44%, rgba(253,224,139,.07) 0%, transparent 60%),
        radial-gradient(ellipse 36% 52% at  2% 70%, rgba(86,178,205,.05)  0%, transparent 58%);
    }

    /*
      Фото занимает правые 55% экрана.
      Это шире прежних 50% — больше воздуха и кинематографичности.
    */
    .hero-photo {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 55%;
      overflow: hidden;
    }
    .hero-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(.90) brightness(.94);
    }
    /*
      Градиент: у левого края фото — почти чёрный (плавный переход в фон),
      к центру — чистая фотография.
    */
    .hero-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(7,11,29,.82) 0%,
        rgba(7,11,29,.50) 20%,
        rgba(7,11,29,.10) 56%,
        rgba(7,11,29,.00) 100%
      );
    }

    /*
      Текстовый блок: левые 45%.
      Padding-left = --col-pad даёт воздух от края экрана.
      Padding-right = 40px = буфер перед границей фото.
    */
    .hero-inner {
      position: relative;
      z-index: 1;
      width: 45%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 120px 40px 100px var(--col-pad);
    }

    /* Overline — 10px, очень разреженный */
    .overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    /* Имя — доминирующий элемент */
    .hero-name {
      font-family: var(--font-d);
      font-size: var(--f-hero);
      color: var(--gold);
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: .96;
      margin-bottom: 32px;
    }

    /* Тонкая золотая горизонталь после имени */
    .hero-divider {
      width: 40px;
      height: 1px;
      background: var(--gold-40);
      margin-bottom: 24px;
    }

    /* Слоган — небольшой, внятный */
    .hero-tagline {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--text-65);
      line-height: 1.80;
      margin-bottom: 52px;
      max-width: 340px;
    }

    /* Кнопка на первом экране — ширина синхронизируется с MALEA через JS */
    #hero .hero-inner .btn {
      align-self: flex-start;
      width: auto;
      min-width: 0;
      padding: 9px 0;
      letter-spacing: .20em;
      text-align: center;
    }

    #hero .hero-name {
      display: inline-block;
      width: max-content;
      max-width: 100%;
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 2  —  IDENTITY / ABOUT
    ═══════════════════════════════════════════════════ */
    #identity {
      background: var(--bg-2);
      min-height: 100vh;
      padding: 0;
      align-items: stretch;
      overflow: hidden;
    }

    .identity-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 50% 60% at 90% 20%,
        rgba(142,111,255,.10) 0%, transparent 66%
      );
    }

    /* 46/54 сетка: мягче crop портретного фото при верхней привязке */
    .identity-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 46% 54%;
    }

    /* Портрет */
    .identity-portrait {
      position: relative;
      overflow: hidden;
    }
    .identity-portrait img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(.80) brightness(.84);
    }
    .identity-portrait::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to right,
          transparent 30%,
          rgba(13,10,42,.96) 100%
        ),
        linear-gradient(
          to top,
          rgba(13,10,42,.42) 0%,
          rgba(13,10,42,.18) 18%,
          transparent 42%
        );
    }

    /* Текстовый блок */
    .identity-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 8vw 80px 56px;
    }

    /* Overline */
    .identity-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    /*
      Одна мощная фраза вместо трёх средних.
      Контраст: 46px заголовок → 12px подпись.
    */
    .identity-headline {
      font-family: var(--font-d);
      font-size: var(--f-section);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin-bottom: 20px;
    }

    /* Подзаголовок — дополнительные тайтлы в 12px */
    #identity .identity-sub {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .16em;
      color: var(--gold-70);
      text-transform: uppercase;
      margin-bottom: 44px;
    }

    /* Hairline перед списком */
    .identity-rule {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, var(--gold-20) 0%, transparent 85%);
      margin-bottom: 28px;
    }

    /* Список достижений */
    .identity-titres {
      display: flex;
      flex-direction: column;
    }
    .titre-item {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--text-65);
      letter-spacing: .015em;
      line-height: 1.55;
      padding: 14px 0;
      border-bottom: 1px solid var(--gold-10);
    }
    .titre-item:first-child { border-top: 1px solid var(--gold-10); }


    /* ═══════════════════════════════════════════════════
       SCREEN 3  —  PHILOSOPHY
    ═══════════════════════════════════════════════════ */
    #philosophy {
      background: var(--bg-3);
      min-height: 100vh;
      justify-content: center;
    }

    .philosophy-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 75% 60% at 50% 55%,
        rgba(142,111,255,.05) 0%, transparent 72%
      );
    }

    /*
      Editorial split: заголовок слева, текст справа.
      Вертикальная золотая нить — разделитель-акцент.
    */
    #philosophy .philosophy-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1220px;
      margin: 0 auto;
      padding: 0 var(--col-pad);
      display: grid;
      grid-template-columns: minmax(0, 44%) minmax(0, 56%);
      align-items: center;
    }

    @media (min-width: 1200px) {
      #philosophy .philosophy-inner {
        padding-left: 0;
        padding-right: 0;
      }
    }

    #philosophy .philosophy-left { padding-right: clamp(24px, 3vw, 40px); }

    .philosophy-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    /* Заголовок — самый крупный на статичных экранах */
    .philosophy-title {
      font-family: var(--font-d);
      font-size: var(--f-section);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
    }
    .gold-dash { color: inherit; }

    .philosophy-right {
      display: flex;
      align-items: flex-start;
      gap: clamp(26px, 3vw, 36px);
    }

    /* Вертикальная золотая нить */
    .philosophy-line {
      flex-shrink: 0;
      width: 1px;
      align-self: stretch;
      min-height: 140px;
      background: linear-gradient(
        to bottom,
        rgba(253,224,139,.48) 0%,
        rgba(253,224,139,.06) 100%
      );
    }

    .philosophy-body {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--text-65);
      line-height: 1.76;
      letter-spacing: .01em;
      max-width: 600px;
    }

    .philosophy-body p {
      margin: 0;
    }

    .philosophy-body p + p {
      margin-top: 1.05em;
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 4-1  —  IMAGE ONLY (кинематографический кадр)
    ═══════════════════════════════════════════════════ */
    #live-image {
      background: #071426;
      min-height: 100vh;
    }

    .live-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .live-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(.85) brightness(.80);
    }
    /* Лёгкая виньетка по краям — фото дышит */
    .live-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse 80% 75% at 50% 50%,
        transparent 42%,
        rgba(5,8,22,.55) 100%
      );
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 4-2  —  TEXT (editorial layout)
    ═══════════════════════════════════════════════════ */
    #live-text {
      background: var(--bg-3);
      min-height: 100vh;
      justify-content: center;
    }

    /* Атмосферное свечение */
    .live-text-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 68% 60% at 72% 50%,
        rgba(86,178,205,.07) 0%, transparent 68%
      );
    }

    /* Трёхколоночная сетка: заголовок | разделитель | правая часть */
    .live-text-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1220px;
      margin: 0 auto;
      padding: 0 var(--col-pad);
      display: grid;
      grid-template-columns: minmax(0, 48%) 1px minmax(0, 52%);
      align-items: center;
      gap: 0;
    }

    @media (min-width: 1200px) {
      .live-text-inner {
        padding-left: 0;
        padding-right: 0;
      }
    }

    /* Левая колонка: заголовок + hairline + мысли + CTA */
    .live-text-left {
      padding-right: clamp(36px, 4vw, 56px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .live-title {
      font-family: var(--font-d);
      font-size: var(--f-section);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin-bottom: 32px;
    }

    /* Тонкая золотая линия между заголовком и тезисами */
    .live-title-rule {
      width: 36px;
      height: 1px;
      background: var(--gold-40);
      margin-bottom: 24px;
    }

    /* Три тезиса одной строкой */
    .live-manifesto {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(15px, 1.4vw, 18px);
      color: var(--text-80);
      line-height: 1.75;
      letter-spacing: .01em;
      margin-bottom: 40px;
    }

    /* Вертикальная золотая нить-разделитель */
    .live-text-line {
      width: 1px;
      align-self: stretch;
      min-height: 160px;
      background: linear-gradient(
        to bottom,
        rgba(253,224,139,.48) 0%,
        rgba(253,224,139,.06) 100%
      );
    }

    /* Правая колонка: форматы */
    .live-text-right {
      padding-left: clamp(36px, 4vw, 56px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 620px;
    }

    /* Лейбл "ПОДХОДИТ ДЛЯ" — золотой акцент */
    .live-formats-label {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--gold-70);
      margin-bottom: 20px;
    }

    /*
      Форматы — главный визуальный объект правой колонки.
      Имена крупные (28-32px), золотые номера — маленький акцент.
      Форматы читаются как декларация, а не как список.
    */
    .live-format-row {
      display: flex;
      align-items: baseline;
      gap: 20px;
      padding: 18px 0;
      border-bottom: 1px solid var(--gold-10);
    }
    .live-format-row:first-of-type { border-top: 1px solid var(--gold-10); }

    /* Золотой номер — акцент, не доминанта */
    .live-format-num {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      color: var(--gold-70);
      letter-spacing: .14em;
      flex-shrink: 0;
      min-width: 20px;
      padding-top: 5px;
    }

    /* Название — главный текст, крупный */
    .live-format-name {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(20px, 2.2vw, 30px);
      color: var(--text-100);
      line-height: 1.2;
      letter-spacing: .02em;
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 5  —  QUOTE
    ═══════════════════════════════════════════════════ */
    #quote {
      background: #071426;
      min-height: 100vh;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }

    .quote-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 65% 58% at 50% 50%,
        rgba(253,224,139,.07) 0%, transparent 68%
      );
    }

    .quote-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 var(--col-pad);
    }

    /* Золотые горизонтальные нити сверху и снизу */
    .quote-rule,
    .mq-rule,
    .portfolio-quote-rule {
      width: 48px;
      height: 1px;
      background: rgba(253,224,139,.45);
      flex-shrink: 0;
      margin: 0 auto;
    }

    /* Текст цитаты — между двумя нитями */
    .quote-text,
    .mq-text,
    .portfolio-quote-text {
      font-family: var(--font-q);
      font-style: italic;
      font-size: clamp(32px, 3.6vw, 52px);
      color: var(--text-100);
      line-height: 1.44;
      letter-spacing: .01em;
      margin: 40px 0;
    }

    /* Автор — под нижней нитью (Leotaro, фирменный) */
    .quote-author,
    .mq-author,
    .portfolio-quote-author {
      display: block;
      margin-top: 24px;
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(11px, 1vw, 15px);
      line-height: 1;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold-70);
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 6  —  BIG IMAGE
    ═══════════════════════════════════════════════════ */
    #big-image {
      background: #050816;
      min-height: 100vh;
    }

    .bigimg-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .bigimg-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(.82) brightness(.78);
    }
    /* Лёгкая виньетка — фото дышит */
    .bigimg-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 70% at 50% 42%,
          transparent 30%,
          rgba(5,8,22,.60) 100%),
        linear-gradient(to bottom,
          rgba(5,8,22,.55) 0%,
          transparent 18%,
          transparent 80%,
          rgba(5,8,22,.80) 100%);
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 7  —  AUDIO PLAYER
    ═══════════════════════════════════════════════════ */
    .experience-flow {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 10%, rgba(253,224,139,.045), transparent 34%),
        radial-gradient(circle at 82% 42%, rgba(86,178,205,.055), transparent 44%),
        linear-gradient(180deg, #071426 0%, #0A1028 44%, #071426 100%);
    }

    .experience-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .12;
      background:
        linear-gradient(90deg, rgba(253,224,139,.012) 0 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(180deg, transparent, rgba(7,20,38,.12));
    }

    .experience-flow > section {
      position: relative;
      z-index: 1;
    }

    #player {
      background: transparent !important;
      padding: 10vh var(--col-pad) 11vh;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
    }

    /* ── HEADER ─────────────────────── */
    .player-header {
      display: grid;
      grid-template-columns: 60% 40%;
      align-items: center;
      margin-bottom: 7vh;
    }

    .player-left {
      padding-right: 32px;
      display: flex;
      flex-direction: column;
    }

    .player-overline {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    .player-title {
      font-family: var(--font-d);
      font-size: clamp(40px, 5vw, 62px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin-bottom: 24px;
    }

    .player-rule {
      width: 36px;
      height: 1px;
      background: rgba(253,224,139,.46);
      margin-bottom: 24px;
    }

    .player-subtitle {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--gold-70);
      letter-spacing: .02em;
      line-height: 1.65;
    }

    /* CD */
    .player-cd-side {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 48px;
    }

    /* Outer ring — не вращается, держит box-shadow и overflow:hidden */
    .player-cd-outer {
      width: clamp(180px, 20vw, 280px);
      height: clamp(180px, 20vw, 280px);
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(253,224,139,.16),
        0 0 0 12px rgba(253,224,139,.04);
    }

    /* Inner disk — вращается */
    .player-cd-wrap {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: relative;
      background:
        radial-gradient(circle at 38% 30%, #221448 0%, #0e0828 35%, #060414 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Виниловые канавки — декоративные кольца */
    .player-cd-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        repeating-radial-gradient(
          circle at center,
          transparent 0px,
          transparent 8px,
          rgba(253,224,139,.035) 9px,
          transparent 10px
        );
    }

    /* Центральная метка */
    .cd-label {
      position: relative;
      z-index: 1;
      width: 38%;
      height: 38%;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, #1c1040, #0a0618);
      border: 1px solid rgba(253,224,139,.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-d);
      font-size: clamp(10px, 1.1vw, 14px);
      letter-spacing: .22em;
      color: rgba(253,224,139,.45);
    }

    /* Поверх label — картинка */
    .player-cd-wrap img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      border-radius: 50%;
      object-fit: cover;
      filter: saturate(.80) brightness(.82);
      z-index: 2;
    }

    /* Вращение только на inner wrap */
    .player-cd-wrap.is-spinning {
      animation: cd-spin 28s linear infinite;
    }
    @keyframes cd-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* ════════════════════════════════════
       TRACK GRID
    ════════════════════════════════════ */
    .track-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(253,224,139,.14);
      border-bottom: 1px solid rgba(253,224,139,.18);
    }

    .track-col {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 36px 32px 32px;
      border-left: 1px solid rgba(253,224,139,.12);
      cursor: pointer;
      transition: background .35s ease;
      overflow: hidden;
    }
    .track-col:first-child { border-left: none; }
    .track-col:hover { background: rgba(253,224,139,.022); }
    .track-col.is-active { background: rgba(253,224,139,.036); }

    /* Gold top line appears on active */
    .track-col::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--gold-70) 40%, var(--gold) 60%, transparent 100%);
      opacity: 0;
      transition: opacity .4s ease;
    }
    .track-col.is-active::before { opacity: 1; }

    /* Ambient glow behind waveform on active */
    .track-col::after {
      content: '';
      position: absolute;
      top: 80px; left: 0; right: 0;
      height: 120px;
      background: radial-gradient(ellipse 80% 100% at 50% 50%,
        rgba(253,224,139,.07) 0%, transparent 70%);
      pointer-events: none;
      opacity: 0;
      transition: opacity .5s ease;
    }
    .track-col.is-active::after { opacity: 1; }

    /* ── Track number ── */
    .track-num {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(12px, 1vw, 15px);
      color: rgba(253,224,139,.45);
      letter-spacing: .1em;
      margin-bottom: 8px;
      transition: color .35s;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .track-num::after {
      content: '';
      display: block;
      flex: 1;
      height: 1px;
      background: rgba(253,224,139,.12);
      transition: background .35s;
    }
    .track-col:hover .track-num,
    .track-col.is-active .track-num { color: rgba(253,224,139,.85); }
    .track-col.is-active .track-num::after { background: rgba(253,224,139,.28); }

    /* ── Track name ── */
    .track-name {
      font-family: var(--font-d);
      font-size: clamp(17px, 1.6vw, 23px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.18;
      margin-bottom: 28px;
      transition: color .35s;
    }
    .track-col.is-active .track-name { color: var(--gold); }

    /* ════════════════════════════════════
       WAVEFORM
    ════════════════════════════════════ */
    .waveform {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 68px;
      margin-bottom: 28px;
      position: relative;
      z-index: 1;
    }

    .wf-bar {
      flex: 1;
      min-width: 0;
      border-radius: 2px 2px 0 0;
      background: rgba(253,224,139,.16);
      transform-origin: bottom center;
      transition:
        background .4s ease,
        transform .4s ease;
      will-change: transform, background;
    }

    /* Hover: slightly brighter */
    .track-col:hover .wf-bar {
      background: rgba(253,224,139,.26);
    }

    /* Active but not playing: gold, static */
    .track-col.is-active:not(.is-playing) .wf-bar {
      background: rgba(253,224,139,.50);
    }

    /* Playing: gold gradient + animation */
    @keyframes wf-pulse {
      0%, 100% { transform: scaleY(1); }
      50%       { transform: scaleY(var(--wf-peak, 1.4)); }
    }

    .track-col.is-playing .wf-bar {
      background: linear-gradient(
        to top,
        rgba(253,224,139,.90) 0%,
        rgba(253,224,139,.45) 100%
      );
      animation: wf-pulse var(--wf-dur, 0.9s) ease-in-out infinite;
      animation-delay: var(--wf-delay, 0s);
    }

    /* ── Track description ── */
    .track-desc {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(13px, .95vw, 15px);
      color: rgba(237,233,224,.60);
      line-height: 1.76;
      flex-grow: 1;
      margin-bottom: 28px;
      transition: color .35s;
    }
    .track-col.is-active .track-desc { color: var(--text-80); }

    /* ── Progress bar ── */
    .track-bar-wrap {
      height: 14px;
      margin-bottom: 16px;
      position: relative;
      overflow: visible;
      cursor: pointer;
    }
    .track-bar-wrap::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      transform: translateY(-50%);
      background: rgba(253,224,139,.10);
    }
    .track-bar {
      position: absolute;
      top: 50%;
      left: 0;
      height: 1px;
      transform: translateY(-50%);
      background: var(--gold-70);
      width: 0%;
      transition: none;
      z-index: 1;
    }
    .track-bar-wrap:hover::before {
      background: rgba(253,224,139,.18);
    }
    .track-col.is-active .track-bar-wrap::before {
      background: rgba(253,224,139,.16);
    }

    /* ── Footer: duration + play btn ── */
    .track-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .track-dur {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      line-height: 1;
      letter-spacing: .22em;
      color: rgba(237,233,224,.45);
      transition: color .35s;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .track-dur-current { color: inherit; }
    .track-dur-sep { opacity: .4; }
    .track-dur-total { opacity: .55; }
    .track-col.is-active .track-dur { color: var(--gold-70); }

    /* Play / pause button */
    .track-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(253,224,139,.38);
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(253,224,139,.75);
      flex-shrink: 0;
      transition:
        border-color .28s ease,
        background .28s ease,
        color .28s ease,
        transform .2s ease,
        box-shadow .28s ease;
    }
    .track-btn:hover {
      border-color: rgba(253,224,139,.65);
      background: rgba(253,224,139,.05);
      color: var(--gold);
    }
    .track-col.is-active .track-btn {
      border-color: rgba(253,224,139,.80);
      color: var(--gold);
      box-shadow: 0 0 20px rgba(253,224,139,.12);
    }

    /* Play icon (triangle) — всегда по умолчанию */
    .track-icon {
      position: relative;
      width: 14px;
      height: 16px;
      display: block;
    }
    .track-icon::before {
      content: '';
      position: absolute;
      left: 3px; top: 2px;
      width: 0; height: 0;
      border-left: 10px solid currentColor;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      transition: none;
    }
    /* Пауза — только когда трек реально играет (.is-playing) */
    .track-col.is-playing .track-icon::before {
      left: 2px; top: 2px;
      width: 4px; height: 12px;
      border: 0;
      background: currentColor;
      box-shadow: 8px 0 0 currentColor;
    }

    /* ── Responsive ── */
    @media (max-width: 860px) {
      .player-header { grid-template-columns: 1fr; }
      .player-cd-side { display: none; }
      .track-grid { grid-template-columns: 1fr; }
      .track-col { border-left: none; border-top: 1px solid rgba(253,224,139,.12); padding: 32px 24px 28px; }
      .track-col:first-child { border-top: none; }
    }

    /* ═══════════════════════════════════════════════════
       SCREEN 8  —  ВИДЕО И ПЕРФОРМАНС
    ═══════════════════════════════════════════════════ */
    #performance {
      background: transparent !important;
      align-items: center;
      justify-content: center;
      padding: 9vh var(--col-pad) 9vh;
    }

    .perf-inner {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(300px, 34%) minmax(0, 66%);
      gap: 0 56px;
      align-items: start;
    }

    .perf-left {
      padding-right: 24px;
      max-width: 440px;
    }

    .perf-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    .perf-title {
      font-family: var(--font-d);
      font-size: var(--f-section);
      letter-spacing: .04em;
      line-height: 1.12;
      margin-bottom: 24px;
      color: var(--text-100);
    }

    .perf-rule {
      width: 36px;
      height: 1px;
      background: var(--gold-40);
      margin-bottom: 24px;
    }

    .perf-subtitle {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--gold-70);
      letter-spacing: .02em;
      line-height: 1.65;
      margin-bottom: 28px;
    }

    .perf-desc {
      max-width: 410px;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(15px, 1.1vw, 17px);
      color: var(--text-65);
      line-height: 1.76;
      letter-spacing: .01em;
    }

    .perf-left::after {
      content: "";
      display: block;
      width: clamp(150px, 13vw, 220px);
      height: 1px;
      margin-top: 38px;
      background: linear-gradient(
        to right,
        rgba(253,224,139,.52) 0%,
        rgba(253,224,139,.30) 42%,
        rgba(253,224,139,.10) 72%,
        rgba(253,224,139,0) 100%
      );
      box-shadow: 0 0 10px rgba(253,224,139,.10);
      pointer-events: none;
    }

    /* Сетка видео 2×2 */
    .video-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 0;
      min-width: 0;
    }

    .video-card {
      position: relative;
      min-width: 0;
    }

    .video-frame-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--bg-1);
      overflow: hidden;
    }

    .experience-flow .video-frame-wrap {
      background: rgba(7,11,29,.72);
    }

    .video-frame-wrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* Кнопка расширения — появляется при наведении */
    .video-expand-btn {
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(253,224,139,.55);
      background: rgba(5,8,22,.82);
      color: var(--gold);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .25s, border-color .25s;
      backdrop-filter: blur(8px);
      z-index: 2;
    }
    .video-frame-wrap:hover .video-expand-btn { opacity: 1; }
    .video-expand-btn:hover { border-color: var(--gold); }

    .experience-flow .video-expand-btn {
      background: rgba(7,11,29,.82);
    }

    .video-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(circle at 50% 38%, rgba(253,224,139,.025), transparent 34%),
        rgba(5,8,22,.72);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease;
    }

    body.video-modal-active .video-modal-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    .video-frame-wrap.is-video-modalized {
      position: fixed;
      z-index: 2;
      left: 50%;
      top: 50%;
      width: min(1180px, 86vw);
      max-height: 82vh;
      transform: translate(-50%, -50%);
      aspect-ratio: 16 / 9;
      background: #050816;
      border: 1px solid rgba(253,224,139,.22);
      box-shadow:
        0 34px 90px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.025),
        0 0 70px rgba(253,224,139,.045);
      overflow: visible;
    }

    .video-frame-wrap.is-video-modalized iframe {
      width: 100%;
      height: 100%;
      display: block;
    }

    .video-frame-wrap.is-video-modalized .video-expand-btn {
      opacity: 0;
      pointer-events: none;
    }

    /* ─── INLINE VIDEO MODAL — parent host ───────────── */
    .video-modal-host {
      position: relative;
      z-index: 9000 !important;
      overflow: visible !important;
    }

    body.video-modal-active .experience-flow {
      overflow: visible;
    }

    .video-modal-card {
      position: relative;
      z-index: auto;
    }

    /* Placeholder — только чтобы карточка не схлопнулась */
    .video-inline-placeholder {
      display: block;
      width: 100%;
      pointer-events: none;
      flex-shrink: 0;
    }

    /* Название видео — над фреймом, золотым */
    .video-meta { margin-bottom: 12px; }

    .video-name {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(12px, 1vw, 14px);
      color: var(--gold);
      letter-spacing: .10em;
      text-transform: uppercase;
      line-height: 1.45;
    }

    /* Видео-модал */
    .vmodal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(5,8,22,.96);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s;
    }
    .vmodal-overlay.is-open { opacity: 1; pointer-events: auto; }

    .vmodal-box {
      position: relative;
      width: min(90vw, 1200px);
    }

    .vmodal-frame {
      width: 100%;
      aspect-ratio: 16 / 9;
    }

    .vmodal-frame iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    .vmodal-close {
      position: absolute;
      top: -52px;
      right: 0;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(253,224,139,.38);
      background: transparent;
      color: var(--gold);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .25s;
    }
    .vmodal-close:hover { border-color: var(--gold); }

    /* Вертикальный режим модала (9:16) */
    .vmodal-box--vertical {
      width: clamp(200px, 38vh, 360px);
    }
    .vmodal-box--vertical .vmodal-frame {
      aspect-ratio: 9 / 16;
    }


    /* ═══════════════════════════════════════════════════
       SCREEN 9  —  DIGITAL ART
    ═══════════════════════════════════════════════════ */
    #art {
      background: transparent !important;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      padding: 7vh var(--col-pad) 7vh;
    }

    .art-inner {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .art-header {
      display: grid;
      grid-template-columns: minmax(0, 56%) minmax(0, 40%);
      gap: 0 4%;
      align-items: start;
      margin-bottom: 4.4vh;
    }

    .art-left {
      max-width: none;
      min-width: 0;
    }

    .art-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    .art-title {
      font-family: var(--font-d);
      font-size: clamp(50px, 4.4vw, 74px);
      letter-spacing: .02em;
      line-height: 1.03;
      margin-bottom: 20px;
      color: var(--text-100);
      max-width: none;
    }

    .art-title-line {
      white-space: nowrap;
    }

    .art-rule {
      width: 36px;
      height: 1px;
      background: var(--gold-40);
      margin-bottom: 24px;
    }

    .art-subtitle {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--gold-70);
      letter-spacing: .02em;
      line-height: 1.65;
      white-space: nowrap;
    }

    .art-copy {
      position: relative;
      align-self: start;
      margin-top: clamp(34px, 3vw, 48px);
      padding-top: 0;
      max-width: 560px;
      min-width: 0;
    }

    .art-copy::before {
      content: "";
      position: absolute;
      left: -28px;
      top: 0;
      width: 1px;
      height: 132px;
      background: linear-gradient(
        to bottom,
        rgba(253,224,139,.46) 0%,
        rgba(253,224,139,.22) 58%,
        rgba(253,224,139,0) 100%
      );
      box-shadow: 0 0 8px rgba(253,224,139,.08);
      pointer-events: none;
    }

    .art-desc {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(15px, 1.1vw, 17px);
      color: var(--text-65);
      line-height: 1.76;
      letter-spacing: .01em;
    }

    /* HERO ART WALL */
    .art-wall {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 68%) minmax(260px, 32%);
      gap: 20px;
      align-items: stretch;
      min-width: 0;
    }

    .art-wall::before {
      display: none;
      content: none;
    }

    #art .video-card {
      min-width: 0;
      position: relative;
    }

    #art .video-meta {
      display: none;
    }

    #art .video-name {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(11px, .85vw, 13px);
      color: var(--gold);
      letter-spacing: .12em;
      text-transform: uppercase;
      line-height: 1.45;
    }

    #art .video-frame-wrap {
      width: 100%;
      background: rgba(7,11,29,.72);
      overflow: hidden;
    }

    .art-featured {
      min-width: 0;
    }

    .art-featured .video-frame-wrap {
      aspect-ratio: 16 / 9;
      height: 100%;
    }

    .art-mini-row {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 1fr);
      gap: 20px;
      width: auto;
      margin-left: 0;
      min-width: 0;
    }

    .art-mini {
      min-width: 0;
    }

    .art-mini .video-frame-wrap {
      aspect-ratio: 16 / 9;
      height: 100%;
    }

    #art .video-frame-wrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }


    /* ═══════════════════════════════════════════════════
       SCREEN — СОСТАВ МУЗЫКАНТОВ
    ═══════════════════════════════════════════════════ */
    #musicians {
      background: var(--bg-1);
      align-items: center;
      justify-content: center;
      padding: 10vh var(--col-pad) 10vh;
    }

    .musicians-intro-inner {
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      text-align: center;
    }

    .musicians-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      line-height: 1;
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
    }

    .musicians-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(46px, 4.6vw, 72px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin: 0 0 30px;
    }

    .musicians-title-line {
      white-space: nowrap;
    }

    .musicians-rule {
      width: 54px;
      height: 1px;
      background: var(--gold-40);
      margin: 0 auto;
    }

    #musicians-gallery {
      background: var(--bg-1);
      align-items: center;
      justify-content: center;
      padding: 8vh var(--col-pad) 10vh;
    }

    .musicians-gallery-inner {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: start;
    }

    .mg-card {
      min-width: 0;
    }

    .mg-photo {
      width: 100%;
      aspect-ratio: 3 / 4;
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
      background: rgba(13,10,42,.52);
      border: 1px solid rgba(253,224,139,.12);
    }

    .mg-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(.82) brightness(.88);
      display: block;
      transition: filter .45s ease, transform .45s ease;
    }

    .mg-card:hover .mg-photo img {
      filter: saturate(.98) brightness(.96);
      transform: scale(1.035);
    }

    .mg-caption {
      padding-top: 2px;
    }

    .mg-name {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(20px, 1.6vw, 26px);
      color: var(--text-100);
      line-height: 1.2;
      letter-spacing: .01em;
      margin-bottom: 8px;
    }

    .mg-role {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      color: var(--gold-70);
      letter-spacing: .18em;
      text-transform: uppercase;
      line-height: 1.45;
      margin-bottom: 14px;
    }

    .mg-desc {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(14px, 1.05vw, 16px);
      color: var(--text-65);
      line-height: 1.76;
      letter-spacing: .01em;
      max-width: 92%;
    }


    #portfolio.portfolio-hero {
      background: transparent;
      min-height: 100vh;
      align-items: stretch;
      padding: 0;
      position: relative;
      overflow: hidden;
    }

    #portfolio .portfolio-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 46% 54%;
      align-items: stretch;
      max-width: none;
      margin: 0;
      gap: 0;
    }

    #portfolio .portfolio-hero-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 56px 80px var(--col-pad);
    }

    #portfolio .portfolio-title {
      font-family: var(--font-d);
      font-size: var(--f-section);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin: 0;
      max-width: 620px;
    }

    #portfolio .portfolio-title span {
      display: block;
      white-space: normal;
    }

    #portfolio .portfolio-subtitle {
      margin-top: 20px;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(13px, 1vw, 15px);
      line-height: 1;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold-70);
      max-width: 520px;
    }

    #portfolio .portfolio-rule {
      width: 54px;
      height: 1px;
      background: var(--gold-40);
      margin: 30px 0 0;
    }

    #portfolio .portfolio-image {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      display: block;
    }

    #portfolio .portfolio-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: saturate(.82) brightness(.84);
      display: block;
    }

    #portfolio .portfolio-image::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          rgba(13,10,42,.92) 0%,
          rgba(13,10,42,.64) 26%,
          rgba(13,10,42,.22) 58%,
          rgba(13,10,42,.08) 100%
        ),
        linear-gradient(
          180deg,
          rgba(5,8,22,.14) 0%,
          transparent 42%,
          rgba(5,8,22,.22) 100%
        );
    }

    #portfolio-map.portfolio-map {
      width: 100%;
      min-height: 100vh;
      padding: 10vh var(--col-pad) 11vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: transparent;
    }

    #portfolio-map.portfolio-map::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 45% at 15% 25%, rgba(253,224,139,.035) 0%, transparent 65%),
        radial-gradient(ellipse 40% 55% at 85% 70%, rgba(86,178,205,.04) 0%, transparent 55%);
      pointer-events: none;
      opacity: .18;
    }

    #portfolio-map .pm-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr 1.2fr 1fr;
      border-top: 1px solid var(--gold-20);
      border-bottom: 1px solid var(--gold-20);
    }

    #portfolio-map .pm-col {
      position: relative;
      z-index: 1;
      padding: clamp(36px, 5vh, 60px) clamp(28px, 2.8vw, 44px);
      border-right: 1px solid var(--gold-20);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      cursor: default;
      transition:
        background .45s ease,
        border-color .45s ease;
    }

    #portfolio-map .pm-col:last-child {
      border-right: none;
    }

    #portfolio-map .pm-col::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold-40) 30%,
        var(--gold) 55%,
        var(--gold-40) 80%,
        transparent 100%
      );
      opacity: 0;
      transition: opacity .45s ease;
      pointer-events: none;
    }


    /* Thin border outline on column hover */
    #portfolio-map .pm-col::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(253,224,139,.24);
      opacity: 0;
      pointer-events: none;
      transition: opacity .45s ease;
    }

    #portfolio-map .pm-col:hover {
      background: rgba(253,224,139,.024);
    }

    #portfolio-map .pm-col:hover::before {
      opacity: 1;
    }

    #portfolio-map .pm-col:hover::after {
      opacity: 1;
    }

    #portfolio-map .pm-col:hover .pm-col-title,
    #portfolio-map .pm-col:hover .pm-col-num {
      color: var(--gold-70);
    }

    #portfolio-map .pm-col-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: clamp(28px, 3.5vh, 44px);
    }

    #portfolio-map .pm-col-num {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 12px;
      color: var(--gold-40);
      letter-spacing: .1em;
      flex-shrink: 0;
      transition: color .35s ease;
    }

    #portfolio-map .pm-col-title {
      font-family: var(--font-b);
      font-size: var(--f-micro);
      font-weight: 300;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--text-40);
      transition: color .35s ease;
    }

    #portfolio-map .pm-event-list,
    #portfolio-map .pm-partners,
    #portfolio-map .pm-upcoming-list {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    #portfolio-map .pm-event,
    #portfolio-map .pm-partner,
    #portfolio-map .pm-upcoming {
      position: relative;
      z-index: 1;
      padding: 18px 0;
      border-bottom: 1px solid rgba(253,224,139,.07);
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: default;
    }

    #portfolio-map .pm-event:last-child,
    #portfolio-map .pm-partner:last-child,
    #portfolio-map .pm-upcoming:last-child {
      border-bottom: none;
    }

    #portfolio-map .pm-event-name,
    #portfolio-map .pm-partner-name,
    #portfolio-map .pm-upcoming-name {
      font-family: var(--font-d);
      font-size: clamp(17px, 1.55vw, 22px);
      font-weight: 400;
      letter-spacing: .03em;
      line-height: 1.25;
      color: var(--text-80);
      transition: color .3s ease;
    }

    #portfolio-map .pm-event-type,
    #portfolio-map .pm-partner-role,
    #portfolio-map .pm-upcoming-ctx {
      font-family: var(--font-b);
      font-size: clamp(11px, .85vw, 13px);
      font-weight: 300;
      color: var(--text-40);
      line-height: 1.5;
      letter-spacing: .02em;
      transition: color .3s ease;
    }

    #portfolio-map .pm-event:hover .pm-event-name,
    #portfolio-map .pm-partner:hover .pm-partner-name,
    #portfolio-map .pm-upcoming:hover .pm-upcoming-name {
      color: var(--gold-70);
    }

    #portfolio-map .pm-event:hover .pm-event-type,
    #portfolio-map .pm-partner:hover .pm-partner-role,
    #portfolio-map .pm-upcoming:hover .pm-upcoming-ctx {
      color: var(--text-65);
    }

    #portfolio-quote.portfolio-quote-screen {
      min-height: 100vh;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 var(--col-pad);
      position: relative;
      overflow: hidden;
      text-align: center;
      background: transparent;
    }

    #portfolio-quote .portfolio-quote-inner {
      position: relative;
      z-index: 1;
      width: min(1120px, calc(100vw - 2 * var(--col-pad)));
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(-2vh);
    }

    #portfolio-quote .portfolio-quote-text {
      max-width: 1080px;
    }

    #final-experience.final-experience {
      background: var(--bg-2);
      min-height: 100vh;
      height: 100vh;
      padding: 0;
      align-items: stretch;
      overflow: hidden;
      position: relative;
    }

    #final-experience.final-experience::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 48% 58% at 86% 24%, rgba(253,224,139,.060) 0%, transparent 66%),
        radial-gradient(ellipse 42% 54% at 12% 72%, rgba(86,178,205,.050) 0%, transparent 68%);
      z-index: 0;
    }

    #final-experience .final-experience-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: 52% 48%;
      align-items: stretch;
    }

    #final-experience .final-experience-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(72px, 9vh, 92px) 6vw clamp(72px, 9vh, 92px) var(--col-pad);
    }

    #final-experience .final-experience-title {
      font-family: var(--font-d);
      font-size: var(--f-section);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin: 0;
      max-width: 620px;
    }

    #final-experience .final-experience-title span {
      display: block;
    }

    #final-experience .final-experience-rule {
      width: 54px;
      height: 1px;
      background: var(--gold-40);
      margin: 32px 0 34px;
    }

    #final-experience .final-experience-text {
      max-width: 560px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 44px;
    }

    #final-experience .final-experience-text p {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-body);
      color: var(--text-65);
      line-height: 1.76;
      letter-spacing: .01em;
    }

    #final-experience .final-experience-btn {
      align-self: flex-start;
    }

    #final-experience .final-experience-image {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      min-height: 0;
      background: rgba(13,10,42,.52);
    }

    #final-experience .final-experience-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: saturate(.96) brightness(.92) contrast(.98);
      display: block;
    }

    #final-experience .final-experience-image::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          rgba(13,10,42,.92) 0%,
          rgba(13,10,42,.66) 24%,
          rgba(13,10,42,.24) 54%,
          rgba(13,10,42,.08) 100%
        ),
        linear-gradient(
          180deg,
          rgba(5,8,22,.08) 0%,
          transparent 42%,
          rgba(5,8,22,.18) 100%
        ),
        radial-gradient(
          ellipse 64% 70% at 48% 52%,
          rgba(253,224,139,.045) 0%,
          transparent 62%
        );
    }


    /* ═══════════════════════════════════════════════════
       FOOTER — unified editorial finisher
    ═══════════════════════════════════════════════════ */
    #site-footer.ft {
      width: 100%;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(
          ellipse 68% 120% at 72% 0%,
          rgba(253,224,139,.035) 0%,
          rgba(253,224,139,.012) 30%,
          transparent 68%
        ),
        radial-gradient(
          ellipse 58% 100% at 18% 12%,
          rgba(142,111,255,.045) 0%,
          transparent 64%
        ),
        linear-gradient(
          180deg,
          #0D0A2A 0%,
          #0A1028 46%,
          #071426 100%
        );
      border-top: 1px solid rgba(253,224,139,.13);
    }

    #site-footer.ft::before {
      content: "";
      position: absolute;
      top: 0;
      left: var(--col-pad);
      right: var(--col-pad);
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(253,224,139,.10) 16%,
        rgba(253,224,139,.32) 48%,
        rgba(253,224,139,.10) 84%,
        transparent 100%
      );
    }

    #site-footer .ft-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: clamp(26px, 3.4vh, 38px) var(--col-pad) clamp(20px, 2.6vh, 28px);
    }

    #site-footer .ft-main {
      display: grid;
      grid-template-columns: minmax(140px, 22%) minmax(260px, 1fr) minmax(120px, 22%);
      align-items: center;
      column-gap: clamp(28px, 4vw, 64px);
    }

    #site-footer .ft-logo {
      justify-self: start;
      font-family: var(--font-d);
      font-size: clamp(22px, 2vw, 30px);
      font-weight: 400;
      letter-spacing: .16em;
      color: rgba(237,233,224,.88);
      text-decoration: none;
      line-height: 1;
      transition:
        color .3s ease,
        letter-spacing .3s ease,
        transform .3s ease;
    }

    #site-footer .ft-logo:hover {
      color: var(--gold-70);
      letter-spacing: .18em;
      transform: translateY(-1px);
    }

    #site-footer .ft-contacts {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #site-footer .ft-contact-link {
      position: relative;
      font-family: var(--font-b);
      font-size: clamp(11px, .82vw, 13px);
      font-weight: 300;
      letter-spacing: .085em;
      color: rgba(237,233,224,.60);
      text-decoration: none;
      white-space: nowrap;
      transition: color .3s ease;
    }

    #site-footer .ft-contact-link:first-child {
      color: rgba(253,224,139,.66);
    }

    #site-footer .ft-contact-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -5px;
      height: 1px;
      background: rgba(253,224,139,.42);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .28s ease;
    }

    #site-footer .ft-contact-link:hover {
      color: var(--gold);
    }

    #site-footer .ft-contact-link:hover::after {
      transform: scaleX(1);
    }

    #site-footer .ft-dot {
      font-size: 14px;
      color: rgba(253,224,139,.28);
      line-height: 1;
      user-select: none;
    }

    #site-footer .ft-socials {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #site-footer .ft-social {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid rgba(253,224,139,.18);
      border-radius: 50%;
      color: rgba(253,224,139,.50);
      background: rgba(253,224,139,.012);
      text-decoration: none;
      transition:
        border-color .3s ease,
        color .3s ease,
        background .3s ease,
        transform .25s ease,
        box-shadow .25s ease;
      flex-shrink: 0;
    }

    #site-footer .ft-social:hover {
      border-color: rgba(253,224,139,.46);
      color: rgba(253,224,139,.76);
      background: rgba(253,224,139,.035);
      transform: translateY(-1px);
    }

    #site-footer .ft-social svg {
      width: 13px;
      height: 13px;
      fill: currentColor;
    }

    #site-footer .ft-meta {
      margin-top: clamp(16px, 2vh, 22px);
      padding-top: clamp(12px, 1.5vh, 16px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 7px 0;
      border-top: 1px solid rgba(253,224,139,.10);
    }

    #site-footer .ft-meta-item {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 10.5px;
      line-height: 1.45;
      letter-spacing: .075em;
      color: rgba(237,233,224,.54);
      white-space: nowrap;
      text-decoration: none;
      transition: color .3s ease;
    }

    #site-footer a.ft-meta-item:hover {
      color: var(--gold-70);
    }

    #site-footer .ft-meta-sep {
      display: inline-block;
      margin: 0 clamp(10px, 1.2vw, 16px);
      color: rgba(253,224,139,.24);
      font-size: 10px;
      line-height: 1;
    }

    @media (max-width: 820px) {
      #site-footer .ft-main {
        grid-template-columns: 1fr;
        row-gap: 24px;
        text-align: center;
      }

      #site-footer .ft-logo,
      #site-footer .ft-contacts,
      #site-footer .ft-socials {
        justify-self: center;
      }

      #site-footer .ft-meta {
        margin-top: 24px;
      }
    }

    @media (max-width: 520px) {
      #site-footer .ft-shell {
        padding: 32px var(--col-pad) 26px;
      }

      #site-footer .ft-contacts {
        flex-direction: column;
        gap: 8px;
      }

      #site-footer .ft-dot {
        display: none;
      }

      #site-footer .ft-meta {
        flex-direction: column;
        gap: 7px;
      }

      #site-footer .ft-meta-item {
        font-size: 10.5px;
        letter-spacing: .055em;
      }

      #site-footer .ft-meta-sep {
        display: none;
      }
    }


    @media (max-width: 960px) {
      #final-experience.final-experience {
        height: auto;
        min-height: 100vh;
        overflow: visible;
      }

      #final-experience .final-experience-inner {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
      }

      #final-experience .final-experience-copy {
        padding: clamp(82px, 11vh, 112px) var(--col-pad) 40px;
      }

      #final-experience .final-experience-image {
        height: 48vh;
        min-height: 320px;
      }

    }

    @media (max-width: 520px) {
      #final-experience .final-experience-title {
        font-size: clamp(40px, 11vw, 56px);
      }

      #final-experience .final-experience-text p {
        font-size: 15px;
      }

    }

    @media (max-width: 960px) {
      #portfolio.portfolio-hero {
        height: auto;
        min-height: 100vh;
      }

      #portfolio .portfolio-hero-inner {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
      }

      #portfolio .portfolio-hero-copy {
        padding: clamp(88px, 12vh, 120px) var(--col-pad) 42px;
      }

      #portfolio .portfolio-subtitle {
        max-width: 100%;
        margin-top: 18px;
        font-size: 12px;
        letter-spacing: .08em;
      }

      #portfolio .portfolio-image {
        height: 56vh;
        min-height: 360px;
      }

      #portfolio .portfolio-image img {
        object-fit: cover;
        object-position: center center;
      }

      #portfolio-map.portfolio-map {
        height: auto;
        min-height: auto;
        padding: clamp(72px, 10vh, 104px) var(--col-pad);
      }

      #portfolio-map .pm-grid {
        grid-template-columns: 1fr;
      }

      #portfolio-map .pm-col {
        border-right: none;
        border-bottom: 1px solid var(--gold-20);
      }

      #portfolio-map .pm-col:last-child {
        border-bottom: none;
      }

      #portfolio-quote.portfolio-quote-screen {
        height: auto;
        min-height: 100vh;
        padding: clamp(88px, 12vh, 120px) var(--col-pad);
      }

      #portfolio-quote .portfolio-quote-inner {
        width: 100%;
        transform: none;
      }
    }

    @media (max-width: 520px) {
      #portfolio .portfolio-title {
        font-size: clamp(40px, 11vw, 56px);
      }

      #portfolio .portfolio-title span {
        white-space: normal;
      }

      #portfolio-map .pm-col {
        padding: 34px 0;
      }

      #portfolio-map .pm-col-title {
        letter-spacing: .18em;
      }

    }


    /* ═══════════════════════════════════════════════════
       PORTFOLIO FLOW — UNIFIED BACKGROUND
    ═══════════════════════════════════════════════════ */

    .portfolio-flow {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(
          ellipse 72% 44% at 72% 4%,
          rgba(253,224,139,.052) 0%,
          rgba(253,224,139,.016) 34%,
          transparent 72%
        ),
        radial-gradient(
          ellipse 64% 48% at 18% 46%,
          rgba(142,111,255,.070) 0%,
          rgba(142,111,255,.026) 38%,
          transparent 72%
        ),
        radial-gradient(
          ellipse 68% 48% at 62% 86%,
          rgba(86,178,205,.040) 0%,
          transparent 70%
        ),
        linear-gradient(
          180deg,
          #0D0A2A 0%,
          #0A1028 34%,
          #071426 68%,
          #0D0A2A 100%
        );
    }

    .portfolio-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .20;
      background:
        linear-gradient(
          90deg,
          rgba(253,224,139,.010) 0 1px,
          transparent 1px
        ) 0 0 / 25% 100%,
        linear-gradient(
          180deg,
          rgba(253,224,139,.012) 0%,
          transparent 18%,
          transparent 82%,
          rgba(253,224,139,.010) 100%
        );
    }

    .portfolio-flow::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .26;
      background:
        radial-gradient(
          ellipse 72% 34% at 50% 36%,
          transparent 0%,
          rgba(5,8,22,.10) 72%,
          rgba(5,8,22,.20) 100%
        );
    }

    .portfolio-flow > .screen {
      position: relative;
      z-index: 1;
      background: transparent !important;
    }

    /* ═══════════════════════════════════════════════════
       REVIEWS FLOW — UNIFIED BACKGROUND
    ═══════════════════════════════════════════════════ */

    .reviews-flow {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(
          ellipse 72% 42% at 50% 12%,
          rgba(142,111,255,.105) 0%,
          rgba(142,111,255,.045) 34%,
          transparent 72%
        ),
        radial-gradient(
          ellipse 62% 46% at 50% 48%,
          rgba(86,178,205,.048) 0%,
          transparent 68%
        ),
        radial-gradient(
          ellipse 60% 44% at 50% 82%,
          rgba(253,224,139,.040) 0%,
          rgba(253,224,139,.014) 36%,
          transparent 74%
        ),
        linear-gradient(
          180deg,
          #0D0A2A 0%,
          #0A1028 38%,
          #071426 70%,
          #0D0A2A 100%
        );
    }

    .reviews-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .34;
      background:
        linear-gradient(
          180deg,
          rgba(253,224,139,.018) 0%,
          transparent 18%,
          transparent 82%,
          rgba(253,224,139,.012) 100%
        ),
        linear-gradient(
          90deg,
          rgba(253,224,139,.010) 0 1px,
          transparent 1px
        ) 0 0 / 25% 100%;
    }

    .reviews-flow > .screen {
      position: relative;
      z-index: 1;
      background: transparent !important;
    }

    #sensations {
      background: transparent !important;
      min-height: 100vh;
      padding: clamp(96px, 12vh, 140px) var(--col-pad);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    #sensations::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .06;
      background:
        radial-gradient(circle at 50% 24%, rgba(253,224,139,.030), transparent 38%);
      z-index: 0;
    }

    /* Основной блок */
    .sens-block {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1040px;
      margin: 0 auto clamp(42px, 5vh, 64px);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .sens-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      line-height: 1;
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 20px;
    }

    .sens-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(46px, 4.6vw, 72px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin: 0;
      max-width: 1240px;
      text-align: center;
    }

    .sens-title-line {
      display: block;
      white-space: nowrap;
    }

    .sens-rule {
      width: 42px;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(253,224,139,0),
        rgba(253,224,139,.58),
        rgba(253,224,139,0)
      );
      margin: 22px auto 22px;
    }

    .sens-body {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(16px, 1.16vw, 18px);
      color: rgba(237,233,224,.72);
      line-height: 1.78;
      letter-spacing: .01em;
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

    /* Тонкая бесконечная строка ощущений */
    #sensations .sens-pills {
      position: relative;
      z-index: 1;
      width: min(760px, 100%);
      margin: 0 auto;
      overflow: hidden;
      display: block;
      min-height: 34px;

      -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 16%,
        #000 84%,
        transparent 100%
      );
      mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 16%,
        #000 84%,
        transparent 100%
      );
    }

    #sensations .sens-marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: sensMarquee 42s linear infinite;
      will-change: transform;
    }

    #sensations .sens-pill {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(11px, .82vw, 12px);
      line-height: 1.45;
      letter-spacing: .14em;
      color: rgba(253,224,139,.66);
      white-space: nowrap;
      text-align: center;
      transition: color .35s ease;
    }

    #sensations .sens-pill::after {
      content: "·";
      display: inline-block;
      margin: 0 clamp(18px, 2vw, 30px);
      color: rgba(253,224,139,.34);
      font-size: 1.05em;
      line-height: 1;
      transform: translateY(-1px);
    }

    #sensations .sens-pill:hover {
      color: rgba(253,224,139,.78);
    }

    @keyframes sensMarquee {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(-50%, 0, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #sensations .sens-pills {
        width: min(920px, 100%);
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
      }

      #sensations .sens-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 10px;
      }
    }

    /* ═══════════════════════════════════════════════════
       SCREEN (reviews — later)
    ═══════════════════════════════════════════════════ */
    #reviews {
      background: transparent !important;
      min-height: 100vh;
      height: auto;
      padding: clamp(88px, 10vh, 130px) var(--col-pad) clamp(88px, 10vh, 130px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      position: relative;
      overflow: hidden;
    }

    #reviews::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .06;
      background:
        radial-gradient(circle at 50% 18%, rgba(253,224,139,.030), transparent 38%);
      z-index: 0;
    }

    #reviews > * {
      position: relative;
      z-index: 1;
    }

    /* Фотокарусель */
    .photo-carousel-wrap {
      position: relative;
      overflow: hidden;
      margin-bottom: clamp(32px, 4vh, 52px);
    }

    .photo-carousel {
      display: flex;
      gap: 16px;
      will-change: transform;
      transition: transform .55s cubic-bezier(.25,.46,.45,.94);
    }

    #reviews .photo-slide {
      flex: 0 0 calc((100% - 32px) / 3);
      width: calc((100% - 32px) / 3);
      min-width: calc((100% - 32px) / 3);
      max-width: calc((100% - 32px) / 3);
      height: clamp(340px, 42vh, 440px);
      overflow: hidden;
      position: relative;
      background: rgba(18,13,50,.42);
    }

    .photo-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      filter: saturate(.94) brightness(.96);
      transition: filter .45s, transform .45s;
      display: block;
    }
    .photo-slide:hover img {
      filter: saturate(1.04) brightness(1.02);
      transform: scale(1.035);
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(253,224,139,.22);
      background: rgba(5,8,22,.46);
      color: rgba(253,224,139,.62);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: border-color .25s, background .25s, color .25s;
      backdrop-filter: blur(8px);
    }
    .carousel-btn:hover { border-color: rgba(253,224,139,.46); background: rgba(5,8,22,.62); color: rgba(253,224,139,.82); }
    .carousel-btn.prev { left: 14px; }
    .carousel-btn.next { right: 14px; }

    /* Карточки отзывов — 4 колонки, editorial */
    .review-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0 48px;
      margin-bottom: 0;
      padding-top: clamp(28px, 3vh, 40px);
      border-top: none;
      align-items: start;
    }

    .review-card {
      position: relative;
      padding-left: 22px;
      transform: translateY(0);
      transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    }

    .review-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      width: 1px;
      height: calc(100% - 4px);
      background: linear-gradient(
        to bottom,
        rgba(253,224,139,.46) 0%,
        rgba(253,224,139,.20) 55%,
        rgba(253,224,139,0) 100%
      );
      transition: background .4s;
    }

    .review-card:hover {
      transform: none;
    }

    .review-card:hover::before {
      background: linear-gradient(
        to bottom,
        rgba(253,224,139,.72) 0%,
        rgba(253,224,139,.36) 55%,
        rgba(253,224,139,0) 100%
      );
    }

    .review-card-deco {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 28px;
      color: rgba(253,224,139,.10);
      line-height: 1;
      display: block;
      margin-bottom: 8px;
      user-select: none;
      transition: color .4s;
    }

    .review-card:hover .review-card-deco {
      color: rgba(253,224,139,.28);
    }

    .review-card-text {
      font-family: var(--font-b);
      font-weight: 300;
      font-style: italic;
      font-size: clamp(14px, 1.1vw, 17px);
      color: rgba(237,233,224,.62);
      line-height: 1.72;
      letter-spacing: .01em;
      transition: color .4s;
    }

    .review-card:hover .review-card-text {
      color: rgba(237,233,224,.78);
    }

    /* ═══════════════════════════════════════════════════
       ЭКРАН — ЦИТАТА MALEA
    ═══════════════════════════════════════════════════ */
    #malea-quote-screen {
      background: transparent !important;
      min-height: 100vh;
      height: 100vh;
      display: block;
      padding: 0;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    #malea-quote-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .25;
      background:
        linear-gradient(
          180deg,
          rgba(21,16,56,.55) 0%,
          rgba(21,16,56,0) 24%
        );
      z-index: 0;
    }

    #malea-quote-screen > :not(.mq-ghost) {
      position: relative;
      z-index: 1;
    }

    /* Декоративный фоновый знак */
    .mq-ghost {
      display: none;
    }

    .mq-inner {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      width: min(820px, calc(100% - 2 * var(--col-pad)));
      margin: 0;
      transform: translate(-50%, -50%) translateY(-6vh);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media (max-width: 720px) {
      .mq-inner {
        width: min(860px, calc(100% - 2 * var(--col-pad)));
        transform: translate(-50%, -50%) translateY(-4vh);
      }
    }


    /* ═══════════════════════════════════════════════════
       UNIFIED SECTION OVERLINES
    ═══════════════════════════════════════════════════ */

    .overline,
    .identity-overline,
    .philosophy-overline,
    .player-overline,
    .live-formats-label,
    .musicians-overline,
    .sens-overline,
    .egypt-overline {
      color: var(--gold-70);
    }

    /* Higher-specificity overrides */
    #formats-integration .fi-overline {
      color: var(--gold-70);
    }

    /* ═══ старый блок цитаты внутри #reviews (оставлен для совместимости) ═══ */
    .malea-quote-author {
      display: block;
      margin-top: 22px;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold-40);
    }


    /* ─── MODAL ──────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(5,8,22,.96);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }
    .modal-overlay.is-open { opacity: 1; pointer-events: all; }
    .modal-box {
      width: 90%;
      max-width: 520px;
      padding: 52px 48px 48px;
      border: 1px solid var(--gold-20);
      background: rgba(7,11,29,.60);
      position: relative;
    }
    .modal-close {
      position: absolute;
      top: 18px; right: 22px;
      font-size: 22px;
      color: var(--text-65);
      background: none; border: none;
      cursor: pointer;
      padding: 4px 8px;
      transition: color .25s;
      font-family: var(--font-b);
      line-height: 1;
    }
    .modal-close:hover { color: var(--text-100); }
    .modal-title {
      font-family: var(--font-d);
      font-size: 24px;
      color: var(--text-100);
      letter-spacing: .06em;
      margin-bottom: 14px;
      line-height: 1.2;
    }
    .modal-desc {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 14px;
      color: var(--text-65);
      line-height: 1.76;
      letter-spacing: .01em;
      margin-bottom: 28px;
    }
    .modal-note {
      font-size: 12px;
      color: var(--text-40);
      font-style: italic;
      font-family: var(--font-b);
      margin-bottom: 28px;
    }
    .modal-tg {
      display: inline-block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .20em;
      text-transform: uppercase;
      color: var(--text-65);
      border: 1px solid rgba(237,233,224,.22);
      padding: 11px 26px;
      text-decoration: none;
      transition: border-color .25s, color .25s;
    }
    .modal-tg:hover { border-color: var(--gold-40); color: var(--gold-70); }


    /* ─── RESPONSIVE ─────────────────────────────────── */
    @media (max-width: 960px) {
      :root { --col-pad: 6vw; }
      .nav-links { display: none; }

      /* Hero: фото на весь фон, текст поверх */
      .hero-inner {
        width: 100%;
        min-height: 100vh;
        padding: 100px 6vw 80px;
      }
      .hero-photo { width: 100%; left: 0; }
      .hero-photo::after {
        background: linear-gradient(
          to right,
          rgba(7,11,29,.96) 0%,
          rgba(7,11,29,.86) 100%
        );
      }
      .hero-tagline { max-width: 100%; }

      /* Identity: вертикально */
      .identity-inner { grid-template-columns: 1fr; }
      .identity-portrait { height: 50vh; }
      .identity-text { padding: 48px 6vw 56px; }

      /* Philosophy: стопкой */
      #philosophy .philosophy-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 var(--col-pad);
        max-width: none;
      }
      #philosophy .philosophy-left  { padding-right: 0; }

      .live-text-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 var(--col-pad);
        max-width: none;
      }
      .live-text-left { padding-right: 0; }
      .live-text-line { display: none; }
      .live-text-right {
        padding-left: 0;
        max-width: none;
      }

      .perf-inner {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .perf-left {
        padding-right: 0;
        max-width: none;
      }

      .video-grid {
        grid-template-columns: 1fr;
      }

      .art-header {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 44px;
      }

      .art-title-line {
        white-space: normal;
      }

      .art-subtitle {
        white-space: normal;
      }

      .art-copy {
        margin-top: 0;
        padding-top: 0;
        max-width: none;
      }

      .art-copy::before {
        display: none;
      }

      .art-wall {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .art-wall::before {
        display: none;
      }

      .art-featured .video-frame-wrap {
        aspect-ratio: 16 / 9;
      }

      .art-mini-row {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 28px;
        width: 100%;
        margin-left: 0;
      }

      .musicians-title-line {
        white-space: normal;
      }

      .mg-desc {
        max-width: none;
      }

      #sensations {
        padding: 80px var(--col-pad) 96px;
      }

      .sens-block {
        max-width: 100%;
        margin-bottom: 42px;
      }

      .sens-title {
        max-width: 100%;
      }

      .sens-title-line {
        white-space: normal;
        text-wrap: balance;
      }

      .sens-body {
        max-width: 680px;
        font-size: 16px;
        line-height: 1.78;
      }

      #sensations .sens-pill {
        width: auto;
        max-width: 100%;
        padding: 0;
      }
    }

    @media (max-width: 720px) {
      #sensations {
        min-height: 100vh;
        height: auto;
        padding: clamp(88px, 12vh, 120px) var(--col-pad) clamp(72px, 9vh, 104px);
      }

      #reviews {
        min-height: auto;
        height: auto;
        padding: clamp(72px, 10vh, 104px) var(--col-pad);
      }

      .photo-slide {
        flex: 0 0 82%;
        height: clamp(220px, 34vh, 300px);
      }

      .review-cards {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 28px;
        border-top: none;
      }

      #sensations .sens-pills {
        width: min(520px, 92%);
        min-height: 38px;
      }

      #sensations .sens-marquee-track {
        animation-duration: 36s;
      }

      #sensations .sens-pill {
        font-size: 10px;
        letter-spacing: .08em;
      }

      #sensations .sens-pill::after {
        margin: 0 18px;
      }
    }

    @media (max-width: 600px) {
      .intro-logo { letter-spacing: .10em; }
    }


    /* ══════════════════════════════════════════════════════
       EGYPT — EDITORIAL CASE
    ══════════════════════════════════════════════════════ */
    #egypt.egypt-intro {
      min-height: 100vh;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(96px, 12vh, 140px) var(--col-pad);
      position: relative;
      overflow: hidden;
      text-align: center;
      background:
        radial-gradient(circle at 50% 20%, rgba(253,224,139,.040), transparent 34%),
        radial-gradient(circle at 52% 48%, rgba(142,111,255,.070), transparent 46%),
        radial-gradient(circle at 74% 62%, rgba(86,178,205,.040), transparent 42%),
        linear-gradient(180deg, #071426 0%, #0A1028 48%, #071426 100%);
    }

    .egypt-intro-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
    }

    .egypt-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(46px, 4.6vw, 72px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
      margin: 0;
      text-align: center;
    }

    #egypt.egypt-intro .egypt-overline {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      letter-spacing: .30em;
      text-transform: uppercase;
      color: var(--gold-70);
      margin-bottom: 24px;
      text-align: center;
    }

    #egypt .egypt-title {
      color: var(--text-100);
      text-align: center;
    }

    #egypt-case.egypt-case {
      min-height: 100vh;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(88px, 10vh, 130px) var(--col-pad);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 24% 34%, rgba(253,224,139,.030), transparent 34%),
        radial-gradient(circle at 74% 44%, rgba(86,178,205,.050), transparent 44%),
        linear-gradient(180deg, #071426 0%, #0A1028 52%, #071426 100%);
    }

    #egypt-case .egypt-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(360px, 42%) minmax(0, 50%);
      gap: clamp(64px, 6vw, 104px);
      align-items: center;
    }

    #egypt-case .egypt-video {
      width: 100%;
      max-width: 430px;
      justify-self: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #egypt-case .egypt-video .video-card {
      width: 100%;
    }

    #egypt-case .egypt-video .video-frame-wrap {
      width: 100%;
      aspect-ratio: 9 / 16;
      position: relative;
      overflow: hidden;
      background: rgba(7,11,29,.72);
      border: 1px solid rgba(253,224,139,.16);
      box-shadow:
        0 0 0 1px rgba(253,224,139,.04),
        0 24px 80px rgba(3,7,22,.34);
    }

    #egypt-case .egypt-video iframe,
    #egypt-case .egypt-video video {
      width: 100%;
      height: 100%;
      display: block;
      border: 0;
    }

    #egypt-case .egypt-copy {
      max-width: 700px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: clamp(30px, 3.5vw, 46px);
    }

    #egypt-case .egypt-copy,
    #egypt-case .egypt-list,
    #egypt-case .egypt-conclusion,
    #egypt-case .egypt-main-text {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(15px, 1.1vw, 17px);
      line-height: 1.76;
      color: rgba(237,233,224,.74);
      letter-spacing: .01em;
    }

    #egypt-case .egypt-main-text p,
    #egypt-case .egypt-conclusion p { margin: 0; }

    #egypt-case .egypt-list {
      display: flex;
      flex-direction: column;
      border-top: 1px solid rgba(253,224,139,.15);
      border-bottom: 1px solid rgba(253,224,139,.15);
    }

    #egypt-case .egypt-list > * {
      padding: 16px 0;
      border-bottom: 1px solid rgba(253,224,139,.09);
    }

    #egypt-case .egypt-list > *:last-child { border-bottom: 0; }

    #egypt-case .egypt-tl-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    #egypt-case .egypt-tl-num {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(15px, 1.18vw, 19px);
      color: rgba(253,224,139,.64);
      line-height: 1.65;
      width: 20px;
      flex-shrink: 0;
    }

    #egypt-case .egypt-tl-text {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: inherit;
      color: inherit;
      line-height: inherit;
    }

    #egypt-case .egypt-conclusion {
      position: relative;
      padding: clamp(22px, 2.6vw, 34px) 0 0;
      border: 0;
      background: transparent;
    }

    #egypt-case .egypt-conclusion::before {
      content: "";
      display: block;
      width: 42px;
      height: 1px;
      margin-bottom: 22px;
      background: linear-gradient(90deg, rgba(253,224,139,.52), rgba(253,224,139,.10));
    }

    #egypt-case .egypt-quote-p {
      font-family: var(--font-b);
      font-style: normal;
      font-weight: 300;
      font-size: inherit;
      color: rgba(253,224,139,.76);
      line-height: inherit;
      margin: 0 0 18px;
    }

    #egypt-case .egypt-insight-p {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: inherit;
      color: inherit;
      line-height: inherit;
      margin: 0;
    }

    @media (max-width: 1180px) {
      #egypt-case .egypt-inner {
        max-width: 1120px;
        grid-template-columns: minmax(320px, 40%) minmax(0, 54%);
        gap: clamp(48px, 5vw, 72px);
      }

      #egypt-case .egypt-video {
        max-width: 390px;
      }

      #egypt-case .egypt-copy {
        max-width: 640px;
      }
    }

    @media (max-width: 720px) {
      #egypt.egypt-intro {
        height: auto;
        min-height: 100vh;
        padding: clamp(88px, 12vh, 120px) var(--col-pad);
      }


      #egypt-case.egypt-case {
        min-height: auto;
        padding: clamp(72px, 10vh, 104px) var(--col-pad);
      }

      #egypt-case .egypt-inner {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      #egypt-case .egypt-video {
        max-width: 340px;
      }

      #egypt-case .egypt-copy {
        max-width: 100%;
      }
    }


    /* ══════════════════════════════════════════════════════
       FORMATS — ФОРМАТЫ ИНТЕГРАЦИИ
    ══════════════════════════════════════════════════════ */
    .formats-title-screen {
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      padding: 12vh var(--col-pad);
    }
    .formats-title-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .28;
      background:
        radial-gradient(circle at 18% 20%, rgba(78,96,165,.14), transparent 38%),
        radial-gradient(circle at 84% 72%, rgba(253,224,139,.045), transparent 36%);
    }
    .formats-title-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      text-align: center;
    }
    .formats-main-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(46px, 4.6vw, 72px);
      line-height: 1.12;
      letter-spacing: .04em;
      color: var(--text-100);
      text-align: center;
    }
    .formats-main-title span { display: block; }
    .formats-flow {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(
          ellipse 72% 44% at 50% 6%,
          rgba(142,111,255,.075) 0%,
          rgba(142,111,255,.030) 34%,
          transparent 72%
        ),
        radial-gradient(
          ellipse 64% 52% at 72% 48%,
          rgba(86,178,205,.040) 0%,
          transparent 70%
        ),
        radial-gradient(
          ellipse 58% 42% at 32% 84%,
          rgba(253,224,139,.032) 0%,
          rgba(253,224,139,.010) 36%,
          transparent 74%
        ),
        linear-gradient(
          180deg,
          #0D0A2A 0%,
          #0A1028 38%,
          #071426 72%,
          #0A1028 100%
        );
    }
    .formats-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .20;
      background:
        linear-gradient(90deg, rgba(142,111,255,.020) 0 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(180deg, transparent 50%, rgba(3,7,22,.10));
      z-index: 0;
    }
    .formats-flow::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 100% 60% at 50% 100%, rgba(3,7,22,.45) 0%, transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(3,7,22,.20) 0%, transparent 60%);
      z-index: 0;
    }
    .formats-flow > .screen {
      background: transparent !important;
      position: relative;
      z-index: 1;
    }
    #formats-list.formats-list-screen {
      min-height: 100vh;
      height: auto;
      padding: clamp(84px, 10vh, 120px) var(--col-pad);
      align-items: stretch;
    }

    #formats-list .formats-list-bg {
      display: none !important;
    }

    #formats-list .formats-list-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1320px;
      margin: 0 auto;
    }

    #formats-list .formats-list {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    #formats-list .format-line {
      display: grid;
      grid-template-columns: minmax(260px, 32%) minmax(0, 1fr);
      column-gap: clamp(56px, 6vw, 96px);
      align-items: center;
      padding: clamp(42px, 5.4vh, 66px) 0;
      border-top: 1px solid rgba(253,224,139,.10);
    }

    #formats-list .format-line:last-child {
      border-bottom: 1px solid rgba(253,224,139,.10);
    }

    #formats-list .format-line-media {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3 / 2;
      background: rgba(7,11,29,.72);
      border: 1px solid rgba(253,224,139,.14);
    }

    #formats-list .format-line-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: saturate(.88) brightness(.92);
      transition: transform .45s ease, filter .45s ease;
    }

    #formats-list .format-line:hover .format-line-media img {
      transform: scale(1.012);
      filter: saturate(.96) brightness(.96);
    }

    #formats-list .format-line-content {
      min-width: 0;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      column-gap: clamp(22px, 2.4vw, 34px);
      align-items: start;
    }

    #formats-list .format-line-num {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(19px, 1.45vw, 25px);
      line-height: 1.2;
      letter-spacing: .04em;
      color: rgba(253,224,139,.58);
      transform: translateY(5px);
    }

    #formats-list .format-line-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    #formats-list .format-line-head {
      display: block;
      margin: 0 0 clamp(18px, 2.1vw, 28px);
    }

    #formats-list .format-line-label {
      display: block;
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(22px, 2.2vw, 32px);
      line-height: 1.18;
      letter-spacing: .04em;
      color: var(--text-100);
      text-transform: none;
      max-width: 620px;
      margin: 0;
      transition: color .4s ease;
    }

    #formats-list .format-line:hover .format-line-label {
      color: var(--gold);
    }

    #formats-list .format-line-summary,
    #formats-list .format-line-title,
    #formats-list .format-line-desc {
      display: block;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(14px, 1.02vw, 16px);
      line-height: 1.78;
      letter-spacing: .01em;
      color: rgba(237,233,224,.66);
      max-width: 650px;
      margin: 0 0 clamp(26px, 2.6vw, 34px);
    }

    #formats-list .format-line-summary-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: clamp(26px, 2.6vw, 34px);
    }

    #formats-list .format-line-summary-group .format-line-summary {
      margin: 0;
    }

    #formats-list .format-line-specs {
      width: 100%;
      max-width: 760px;
      margin-top: 0;
      border-top: 1px solid rgba(253,224,139,.13);
    }

    #formats-list .format-line-spec {
      display: grid;
      grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr);
      gap: clamp(20px, 2vw, 28px);
      padding: 13px 0;
      border-bottom: 1px solid rgba(253,224,139,.08);
    }

    #formats-list .format-line-spec span {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: 10px;
      line-height: 1.25;
      letter-spacing: .20em;
      text-transform: uppercase;
      color: rgba(253,224,139,.62);
    }

    #formats-list .format-line-spec p {
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(13px, .96vw, 15px);
      line-height: 1.62;
      color: rgba(237,233,224,.76);
      margin: 0;
    }
    #formats-integration.formats-integration-screen {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      padding: 10vh var(--col-pad);
      position: relative;
      overflow: hidden;
    }

    #formats-integration.formats-integration-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 45% at 18% 60%, rgba(253,224,139,.04) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 82% 30%, rgba(142,111,255,.05) 0%, transparent 60%);
      pointer-events: none;
      opacity: .28;
    }

    #formats-integration .fi-header {
      position: relative;
      z-index: 1;
      margin-bottom: clamp(52px, 7vh, 88px);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #formats-integration .fi-overline {
      font-family: var(--font-b);
      font-size: var(--f-micro);
      font-weight: 300;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 24px;
      display: block;
    }

    #formats-integration .fi-heading {
      font-family: var(--font-d);
      font-size: clamp(34px, 4vw, 58px);
      font-weight: 400;
      letter-spacing: .04em;
      line-height: 1.1;
      color: var(--text-100);
      text-align: center;
    }

    #formats-integration .fi-panels {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--gold-20);
      border-bottom: 1px solid var(--gold-20);
      margin-bottom: clamp(52px, 7vh, 80px);
    }

    #formats-integration .fi-panel {
      position: relative;
      padding: clamp(40px, 5vh, 64px) clamp(28px, 3vw, 48px) clamp(44px, 6vh, 72px);
      border-right: 1px solid var(--gold-20);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      cursor: default;
      transition: background .5s ease;
    }

    #formats-integration .fi-panel:last-child {
      border-right: none;
    }

    #formats-integration .fi-panel:hover {
      background: rgba(253,224,139,.025);
    }

    #formats-integration .fi-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold-40) 30%,
        var(--gold) 55%,
        var(--gold-40) 80%,
        transparent 100%
      );
      opacity: 0;
      transition: opacity .5s ease;
    }

    #formats-integration .fi-panel:hover::before {
      opacity: 1;
    }

    #formats-integration .fi-title {
      font-family: var(--font-d);
      font-size: clamp(22px, 2.2vw, 32px);
      font-weight: 400;
      letter-spacing: .04em;
      line-height: 1.18;
      color: var(--text-100);
      margin-bottom: 24px;
      transition: color .4s ease;
    }

    #formats-integration .fi-panel:hover .fi-title {
      color: var(--gold);
    }

    #formats-integration .fi-rule {
      width: 24px;
      height: 1px;
      background: var(--gold-20);
      margin-bottom: 20px;
      transition: width .4s ease, background .4s ease;
    }

    #formats-integration .fi-panel:hover .fi-rule {
      width: 40px;
      background: var(--gold-40);
    }

    #formats-integration .fi-desc {
      font-family: var(--font-b);
      font-size: clamp(13px, 1vw, 15px);
      font-weight: 300;
      line-height: 1.76;
      color: var(--text-65);
      flex-grow: 1;
      transition: color .4s ease;
    }

    #formats-integration .fi-panel:hover .fi-desc {
      color: var(--text-80);
    }

    #formats-integration .fi-tag {
      margin-top: 32px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: var(--f-micro);
      line-height: 1;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--text-40);
      transition: color .4s ease;
    }

    #formats-integration .fi-tag::before {
      content: '';
      display: block;
      width: 18px;
      height: 1px;
      background: var(--gold-40);
    }

    #formats-integration .fi-panel:hover .fi-tag {
      color: var(--gold-70);
    }

    #formats-integration .fi-cta {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
    }

    #formats-integration .fi-btn {
      font-family: var(--font-b);
      font-size: var(--f-micro);
      font-weight: 300;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold);
      background: transparent;
      border: 1px solid var(--gold-40);
      padding: 20px 56px;
      cursor: pointer;
      text-decoration: none;
      transition: border-color .3s, background .3s;
      white-space: nowrap;
    }

    #formats-integration .fi-btn:hover {
      border-color: var(--gold-70);
      background: rgba(253,224,139,.08);
    }
    @media (max-width: 900px) {
      #formats-list .format-line {
        grid-template-columns: 1fr;
        row-gap: 28px;
      }

      #formats-list .format-line-media {
        max-width: 520px;
      }

      #formats-list .format-line-content {
        grid-template-columns: 38px minmax(0, 1fr);
      }

      #formats-integration .fi-panels {
        grid-template-columns: 1fr;
      }
      #formats-integration .fi-panel {
        border-right: none;
        border-bottom: 1px solid var(--gold-20);
      }
      #formats-integration .fi-panel:last-child {
        border-bottom: none;
      }
    }

    @media (max-width: 520px) {
      #formats-list.formats-list-screen {
        padding: 76px var(--col-pad);
      }

      #formats-list .format-line {
        padding: 38px 0;
      }

      #formats-list .format-line-label {
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.18;
        letter-spacing: .04em;
      }

      #formats-list .format-line-spec {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      #formats-integration.formats-integration-screen {
        padding: 86px var(--col-pad) 82px;
      }

      #formats-integration .fi-heading {
        font-size: clamp(34px, 10vw, 48px);
      }

      #formats-integration .fi-btn {
        width: 100%;
        padding: 18px 20px;
      }
    }

    /* ══════════════════════════════════════════════════════
       WHY MALEA
    ══════════════════════════════════════════════════════ */
    #why,
    #why-image,
    #why-argument {
      --why-bg-top: #08142B;
      --why-bg-mid: #071426;
      --why-bg-bottom: #070B1D;
    }

    .why-title-screen {
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      padding: 12vh var(--col-pad);
      background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(253,224,139,.060) 0%, transparent 68%),
        radial-gradient(circle at 18% 18%, rgba(78,96,165,.12), transparent 38%),
        linear-gradient(180deg, var(--why-bg-top) 0%, var(--why-bg-mid) 55%, var(--why-bg-bottom) 100%);
    }

    .why-title-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 20%, rgba(78,96,165,.13), transparent 38%),
        radial-gradient(circle at 84% 72%, rgba(253,224,139,.04), transparent 36%);
    }

    .why-title-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      text-align: center;
    }

    .why-title-main {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(46px, 4.6vw, 72px);
      line-height: 1.12;
      letter-spacing: .04em;
      color: var(--text-100);
      text-align: center;
      margin: 0;
    }

    .why-title-main span {
      display: block;
    }

    .why-image-screen {
      min-height: 100vh;
      padding: 0;
      background: var(--why-bg-mid);
      position: relative;
      overflow: hidden;
    }

    .why-image-bg,
    .why-image-inner {
      display: contents;
    }

    .why-image-bg {
      pointer-events: none;
    }

    .why-image-inner {
      width: 100%;
      height: 100%;
    }

    .why-image-frame {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--why-bg-mid);
      border: 0;
      margin: 0;
      max-height: none;
      aspect-ratio: auto;
    }

    .why-image-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(
          ellipse 78% 72% at 50% 50%,
          transparent 38%,
          rgba(7,20,38,.58) 100%
        ),
        linear-gradient(
          to bottom,
          rgba(7,20,38,.42) 0%,
          transparent 22%,
          transparent 70%,
          rgba(7,20,38,.70) 100%
        );
    }

    .why-image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: saturate(.86) brightness(.86);
      transform: scale(1.001);
    }

    #why-argument.why-argument-sheet {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      padding: 10vh var(--col-pad);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 55% 45% at 18% 60%, rgba(253,224,139,.04) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 82% 30%, rgba(142,111,255,.05) 0%, transparent 60%),
        linear-gradient(180deg, #071426 0%, #0A1028 52%, #071426 100%);
    }

    #why-argument.why-argument-sheet::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 45% at 18% 60%, rgba(253,224,139,.04) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 82% 30%, rgba(142,111,255,.05) 0%, transparent 60%);
      pointer-events: none;
    }

    #why-argument .why-argument-mobile-image {
      display: none;
    }

    #why-argument .why-argument-bg {
      display: none;
    }

    #why-argument .why-argument-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: none;
      margin: 0;
    }

    #why-argument .why-argument-header {
      position: relative;
      z-index: 1;
      margin-bottom: clamp(52px, 7vh, 88px);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      border: 0;
    }

    #why-argument .why-argument-subtitle {
      font-family: var(--font-d);
      font-size: clamp(34px, 4vw, 58px);
      font-weight: 400;
      letter-spacing: .04em;
      line-height: 1.1;
      color: var(--text-100);
      text-align: center;
      margin: 0;
      max-width: none;
    }

    #why-argument .why-argument-subtitle-line {
      display: block;
      white-space: normal;
    }

    #why-argument .why-argument-rule {
      display: none;
    }

    #why-argument .why-argument-list {
      position: relative;
      z-index: 1;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--gold-20);
      border-bottom: 1px solid var(--gold-20);
      margin: 0 0 clamp(52px, 7vh, 80px);
    }

    #why-argument .why-argument-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(40px, 5vh, 64px) clamp(28px, 3vw, 48px) clamp(44px, 6vh, 72px);
      border: 0;
      border-right: 1px solid var(--gold-20);
      background: transparent;
      overflow: hidden;
      cursor: default;
      min-height: 100%;
      transition:
        background .5s ease,
        transform .35s ease,
        border-color .35s ease;
    }

    #why-argument .why-argument-item:last-child {
      border-right: none;
    }

    #why-argument .why-argument-item:hover {
      background: rgba(253,224,139,.025);
      transform: none;
      border-color: var(--gold-20);
    }

    #why-argument .why-argument-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold-40) 30%,
        var(--gold) 55%,
        var(--gold-40) 80%,
        transparent 100%
      );
      opacity: 0;
      transition: opacity .5s ease;
    }

    #why-argument .why-argument-item:hover::before {
      opacity: 1;
    }

    #why-argument .why-argument-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    #why-argument .why-argument-title {
      font-family: var(--font-d);
      font-size: clamp(22px, 2.2vw, 32px);
      font-weight: 400;
      letter-spacing: .04em;
      line-height: 1.18;
      color: var(--text-100);
      margin-bottom: 24px;
      min-height: 2.65em;
      display: flex;
      align-items: flex-start;
      transition: color .4s ease;
    }

    #why-argument .why-argument-item:hover .why-argument-title {
      color: var(--gold);
    }

    #why-argument .why-argument-text {
      font-family: var(--font-b);
      font-size: clamp(13px, 1vw, 15px);
      font-weight: 300;
      line-height: 1.76;
      color: var(--text-65);
      margin-top: 0;
      transition: color .4s ease;
    }

    #why-argument .why-argument-item:hover .why-argument-text {
      color: var(--text-80);
    }

    /* РЕЗУЛЬТАТ — НЕ ТЯЖЁЛАЯ ТАБЛИЦА */

    .why-result {
      width: 100%;
      max-width: var(--why-card-width);
      margin: 0 auto clamp(50px, 6vw, 82px);
      padding: clamp(34px, 4vw, 54px) 0;
      border-top: 1px solid rgba(253,224,139,.16);
      border-bottom: 1px solid rgba(253,224,139,.16);
      text-align: center;
    }

    .why-result-title {
      font-family: var(--font-d);
      font-size: clamp(32px, 3vw, 50px);
      line-height: 1.1;
      letter-spacing: .018em;
      color: rgba(253,224,139,.80);
      text-shadow: 0 0 18px rgba(253,224,139,.06);
      margin: 0 auto clamp(30px, 3.5vw, 46px);
      text-align: center;
    }

    .why-result-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
      max-width: var(--why-card-width);
      margin: 0 auto;
    }

    .why-result-item {
      position: relative;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      gap: 14px;
      padding: 18px 22px 18px 44px;
      font-family: var(--font-b);
      font-weight: 300;
      font-size: clamp(14px, 1.02vw, 17px);
      line-height: 1.55;
      color: rgba(237,233,224,.84);
      border: 1px solid rgba(253,224,139,.14);
      background: rgba(253,224,139,.024);
      transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
    }

    .why-result-item::before {
      content: "";
      position: absolute;
      left: 20px;
      top: 50%;
      width: 7px;
      height: 7px;
      transform: translateY(-50%) rotate(45deg);
      background: rgba(253,224,139,.68);
      box-shadow: 0 0 14px rgba(253,224,139,.16);
      transition:
        background .35s ease,
        box-shadow .35s ease;
    }

    .why-result-item:hover {
      border-color: rgba(253,224,139,.28);
      background: rgba(253,224,139,.035);
    }

    .why-result-item:hover::before {
      background: rgba(253,224,139,.78);
      box-shadow: 0 0 18px rgba(253,224,139,.22);
    }


    #why-argument .why-cta {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
    }

    #why-argument .why-btn {
      font-family: var(--font-b);
      font-size: var(--f-micro);
      font-weight: 300;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold);
      background: transparent;
      border: 1px solid var(--gold-40);
      padding: 20px 56px;
      cursor: pointer;
      text-decoration: none;
      transition: border-color .3s, background .3s;
      white-space: nowrap;
    }

    #why-argument .why-btn:hover {
      border-color: var(--gold-70);
      background: rgba(253,224,139,.08);
    }

    @media (max-width: 900px) {
      #why-argument.why-argument-sheet {
        height: auto;
        min-height: 100vh;
        padding: 86px var(--col-pad) 82px;
      }

      #why-argument .why-argument-list {
        grid-template-columns: 1fr;
      }

      #why-argument .why-argument-item {
        border-right: none;
        border-bottom: 1px solid var(--gold-20);
      }

      #why-argument .why-argument-item:last-child {
        border-bottom: none;
      }
    }

    @media (max-width: 520px) {
      #why-argument .why-argument-subtitle {
        font-size: clamp(34px, 10vw, 48px);
      }

      #why-argument .why-btn {
        width: 100%;
        padding: 18px 20px;
      }
    }

    @media (max-width: 980px) {
      .nav-links {
        gap: 22px;
      }

      .nav-links a {
        font-size: 10px;
        letter-spacing: .18em;
      }

      .nav-cta {
        font-size: 10px;
        letter-spacing: .18em;
        padding: 8px 16px;
      }
    }

    @media (max-width: 760px) {
      #hero .hero-inner .btn {
        padding: 9px 14px;
        font-size: 10px;
        letter-spacing: .18em;
        width: auto !important;
      }

      #why-argument .why-argument-title {
        min-height: 0;
      }
    }

    @media (max-width: 720px) {
      .quote-text,
      .mq-text,
      .portfolio-quote-text {
        font-size: clamp(30px, 8.6vw, 46px);
        line-height: 1.36;
        margin: 34px 0;
      }

      .quote-author,
      .mq-author,
      .portfolio-quote-author {
        margin-top: 22px;
      }
    }

    @media (max-width: 520px) {

      .overline,
      .identity-overline,
      .philosophy-overline,
      .player-overline,
      .live-formats-label,
      .musicians-overline,
      .sens-overline,
      .egypt-overline,
      #formats-integration .fi-overline {
        letter-spacing: .22em;
      }
    }

    /* ═══════════════════════════════════════════════════
       UNIFIED MAIN HEADINGS — SCREENS 11 / 13 / 16 / 18 / 21
    ═══════════════════════════════════════════════════ */
    #musicians .musicians-title,
    #sensations .sens-title,
    #egypt .egypt-title,
    #formats .formats-main-title,
    #why .why-title-main {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(46px, 4.6vw, 72px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
    }

    @media (max-width: 720px) {
      #musicians .musicians-title,
      #sensations .sens-title,
      #egypt .egypt-title,
      #formats .formats-main-title,
      #why .why-title-main {
        font-size: clamp(42px, 8vw, 64px);
        line-height: 1.08;
        letter-spacing: .035em;
      }
    }

    /* ═══════════════════════════════════════════════════
       UNIFIED MAIN HEADINGS — SCREENS 03 / 04 / 06 / 08 / 09 / 10 / 20 / 23 / 24 / 27
    ═══════════════════════════════════════════════════ */
    #identity .identity-headline,
    #philosophy .philosophy-title,
    #live-text .live-title,
    #player .player-title,
    #performance .perf-title,
    #art .art-title,
    #formats-integration .fi-heading,
    #why-argument .why-argument-subtitle,
    #portfolio .portfolio-title,
    #final-experience .final-experience-title {
      font-family: var(--font-d);
      font-weight: 400;
      font-size: clamp(40px, 5vw, 62px);
      color: var(--text-100);
      letter-spacing: .04em;
      line-height: 1.12;
    }

    @media (max-width: 720px) {
      #identity .identity-headline,
      #philosophy .philosophy-title,
      #live-text .live-title,
      #player .player-title,
      #performance .perf-title,
      #art .art-title,
      #formats-integration .fi-heading,
      #why-argument .why-argument-subtitle,
      #portfolio .portfolio-title,
      #final-experience .final-experience-title {
        font-size: clamp(38px, 10vw, 56px);
        line-height: 1.08;
        letter-spacing: .035em;
      }
    }

    /* =========================================================
       FINAL VIDEO MODAL OVERRIDES
       Must stay at the very end of the file.
       Fixes section-specific overrides in #performance, #art, #egypt-case.
    ========================================================= */

    /* ─── 5. Единый backdrop для всех inline video modals ─── */
    body.video-modal-active {
      overflow: hidden;
    }

    .video-modal-host {
      position: relative;
      z-index: 9000 !important;
      overflow: visible !important;
    }

    body.video-modal-active .experience-flow {
      overflow: visible !important;
    }

    #performance.video-modal-host .video-modal-backdrop,
    #art.video-modal-host .video-modal-backdrop,
    #egypt-case.video-modal-host .video-modal-backdrop {
      position: fixed !important;
      inset: 0 !important;
      z-index: 9000 !important;
      background:
        radial-gradient(circle at 50% 38%, rgba(253,224,139,.022), transparent 34%),
        rgba(5,8,22,.84) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    /* ─── 6. Общие модальные параметры для всех видео ─── */
    #performance.video-modal-host .video-frame-wrap.is-video-modalized,
    #art.video-modal-host .video-frame-wrap.is-video-modalized,
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized {
      position: fixed !important;
      z-index: 9010 !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      background: #050816 !important;
      border: 1px solid rgba(253,224,139,.22) !important;
      box-shadow:
        0 34px 90px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,255,255,.025),
        0 0 70px rgba(253,224,139,.045) !important;
      overflow: visible !important;
    }

    #performance.video-modal-host .video-frame-wrap.is-video-modalized iframe,
    #art.video-modal-host .video-frame-wrap.is-video-modalized iframe,
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized iframe {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      border: 0 !important;
    }

    /* ─── 7. Горизонтальные видео (16/9) ─── */
    #performance.video-modal-host .video-frame-wrap.is-video-modal-horizontal,
    #art.video-modal-host .video-frame-wrap.is-video-modal-horizontal {
      width: min(1080px, 82vw) !important;
      height: auto !important;
      max-height: 80vh !important;
      aspect-ratio: 16 / 9 !important;
    }

    /* ─── 8. Вертикальное видео Египта (9/16) ─── */
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modal-vertical {
      width: min(430px, 76vw, calc(82vh * 9 / 16)) !important;
      height: auto !important;
      max-height: 82vh !important;
      aspect-ratio: 9 / 16 !important;
    }

    /* ─── 9. Скрыть внутреннюю кнопку разворота в модалке ─── */
    #performance.video-modal-host .video-frame-wrap.is-video-modalized .video-expand-btn,
    #art.video-modal-host .video-frame-wrap.is-video-modalized .video-expand-btn,
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized .video-expand-btn {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* ─── 11. Mobile ─── */
    @media (max-width: 720px) {
      #performance.video-modal-host .video-frame-wrap.is-video-modal-horizontal,
      #art.video-modal-host .video-frame-wrap.is-video-modal-horizontal {
        width: calc(100vw - 28px) !important;
        max-height: 78vh !important;
        aspect-ratio: 16 / 9 !important;
      }

      #egypt-case.video-modal-host .video-frame-wrap.is-video-modal-vertical {
        width: min(360px, 82vw, calc(78vh * 9 / 16)) !important;
        max-height: 78vh !important;
        aspect-ratio: 9 / 16 !important;
      }

      #performance.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize,
      #art.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize,
      #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize {
        top: -42px !important;
      }
    }

    /* =========================================================
       FIX — Egypt vertical video modal stacking
       Must stay after all video modal overrides.
    ========================================================= */

    /* Задача 1: Убрать stacking context у .egypt-inner в модальном состоянии */
    #egypt-case.video-modal-host .egypt-inner {
      z-index: auto !important;
      overflow: visible !important;
    }

    /* Задача 2: Разрешить видео и крестику выходить за пределы внутренних контейнеров */
    #egypt-case.video-modal-host,
    #egypt-case.video-modal-host .egypt-video,
    #egypt-case.video-modal-host .video-card {
      overflow: visible !important;
    }

    /* Задача 3: Затемнить backdrop для египетского видео */
    #egypt-case.video-modal-host .video-modal-backdrop {
      z-index: 9000 !important;
      background:
        radial-gradient(circle at 50% 38%, rgba(253,224,139,.018), transparent 34%),
        rgba(5,8,22,.82) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Задача 4: Принудительно поднять вертикальное видео над backdrop */
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized.is-video-modal-vertical {
      position: fixed !important;
      z-index: 9010 !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: min(430px, 76vw, calc(82vh * 9 / 16)) !important;
      height: auto !important;
      max-height: 82vh !important;
      aspect-ratio: 9 / 16 !important;
      overflow: visible !important;
      opacity: 1 !important;
      filter: none !important;
    }

    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized.is-video-modal-vertical iframe {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      opacity: 1 !important;
      filter: none !important;
    }

    /* =========================================================
       FINAL VIDEO MODAL CONTROLS — minimize button
       Must stay after all video modal overrides.
    ========================================================= */

    #performance.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize,
    #art.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize,
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize {
      position: absolute !important;
      top: -48px !important;
      right: 0 !important;
      z-index: 9040 !important;

      height: 34px !important;
      padding: 0 14px 0 12px !important;

      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;

      border: 1px solid rgba(253,224,139,.30) !important;
      border-radius: 999px !important;
      background: rgba(5,8,22,.78) !important;

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

      color: rgba(253,224,139,.86) !important;
      cursor: pointer !important;

      font-family: var(--font-b) !important;
      font-weight: 300 !important;
      font-size: 10px !important;
      line-height: 1 !important;
      letter-spacing: .18em !important;
      text-transform: uppercase !important;

      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;

      transition:
        border-color .28s ease,
        background .28s ease,
        color .28s ease,
        transform .28s ease !important;
    }

    #performance.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize:hover,
    #art.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize:hover,
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized .video-inline-minimize:hover {
      border-color: rgba(253,224,139,.56) !important;
      background: rgba(253,224,139,.065) !important;
      color: rgba(253,224,139,.96) !important;
      transform: translateY(-1px) !important;
    }

    .video-inline-minimize-icon {
      position: relative !important;
      width: 13px !important;
      height: 13px !important;
      display: block !important;
      flex: 0 0 13px !important;
    }

    .video-inline-minimize-icon::before {
      content: '' !important;
      position: absolute !important;
      left: 1px !important;
      right: 1px !important;
      bottom: 3px !important;
      height: 1px !important;
      background: rgba(253,224,139,.82) !important;
    }

    .video-inline-minimize-icon::after {
      content: '' !important;
      position: absolute !important;
      left: 50% !important;
      top: 2px !important;
      width: 6px !important;
      height: 6px !important;
      border-left: 1px solid rgba(253,224,139,.82) !important;
      border-bottom: 1px solid rgba(253,224,139,.82) !important;
      transform: translateX(-50%) rotate(-45deg) !important;
      transform-origin: center !important;
    }

    .video-inline-minimize-text {
      display: block !important;
      white-space: nowrap !important;
    }

    /* ─── Egypt vertical: кнопка внутри угла ─── */
    #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized.is-video-modal-vertical .video-inline-minimize {
      top: 12px !important;
      right: 12px !important;
      height: 32px !important;
      padding: 0 12px 0 11px !important;
      background: rgba(5,8,22,.82) !important;
    }

    @media (max-width: 520px) {
      #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized.is-video-modal-vertical .video-inline-minimize-text {
        display: none !important;
      }

      #egypt-case.video-modal-host .video-frame-wrap.is-video-modalized.is-video-modal-vertical .video-inline-minimize {
        width: 34px !important;
        padding: 0 !important;
      }
    }

    /* =========================================================
       FINAL MOBILE MENU — MALEA luxury editorial
       Must stay after all nav/mobile rules.
    ========================================================= */

    @media (max-width: 760px) {
      .nav {
        padding: 14px 18px;
        justify-content: flex-end;
        gap: 0;
        min-height: 58px;
      }

      .nav-logo,
      .nav-links,
      .nav-cta {
        display: none !important;
      }

      .nav-menu-toggle {
        position: relative;
        z-index: 12020;
        display: inline-flex !important;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(253,224,139,.30);
        border-radius: 999px;
        background: rgba(5,8,22,.68);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
      }

      .nav-menu-toggle span {
        position: absolute;
        width: 16px;
        height: 1px;
        background: rgba(253,224,139,.84);
        border-radius: 0;
        transition:
          transform .32s ease,
          opacity .32s ease,
          background .32s ease;
      }

      .nav-menu-toggle span:first-child {
        transform: translateY(-4px);
      }

      .nav-menu-toggle span:last-child {
        transform: translateY(4px);
      }

      .nav-menu-toggle.is-open span:first-child {
        transform: rotate(45deg);
      }

      .nav-menu-toggle.is-open span:last-child {
        transform: rotate(-45deg);
      }

      .nav-mobile-panel {
        position: fixed;
        inset: 0;
        z-index: 12010;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 50% 18%, rgba(253,224,139,.055), transparent 34%),
          radial-gradient(circle at 22% 72%, rgba(86,178,205,.045), transparent 36%),
          linear-gradient(180deg, rgba(5,8,22,.97) 0%, rgba(7,11,29,.98) 100%);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
          opacity .38s ease,
          visibility .38s ease,
          transform .38s ease;
      }

      .nav-mobile-panel.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }

      .nav-mobile-inner {
        width: min(380px, calc(100vw - 48px));
        min-height: min(620px, calc(100vh - 120px));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 42px 0;
      }

      .nav-mobile-logo {
        display: block;
        font-family: var(--font-d);
        font-weight: 400;
        font-size: clamp(46px, 15vw, 72px);
        line-height: .96;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--gold);
        text-decoration: none;
        margin: 0;
      }

      .nav-mobile-rule {
        width: 48px;
        height: 1px;
        background: rgba(253,224,139,.42);
        margin: 28px auto 42px;
        flex-shrink: 0;
      }

      .nav-mobile-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin: 0 0 48px;
        padding: 0;
      }

      .nav-mobile-links a {
        display: inline-block;
        font-family: var(--font-b);
        font-weight: 300;
        font-size: 12px;
        line-height: 1;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: rgba(237,233,224,.74);
        text-decoration: none;
        transition:
          color .28s ease,
          letter-spacing .28s ease;
      }

      .nav-mobile-links a:hover,
      .nav-mobile-links a:focus {
        color: rgba(253,224,139,.88);
        letter-spacing: .30em;
      }

      .nav-mobile-cta {
        font-family: var(--font-b);
        font-weight: 300;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: rgba(253,224,139,.92);
        border: 1px solid rgba(253,224,139,.38);
        background: rgba(253,224,139,.035);
        border-radius: 0;
        padding: 15px 24px;
        cursor: pointer;
        transition:
          border-color .3s ease,
          background .3s ease,
          color .3s ease;
      }

      .nav-mobile-cta:hover,
      .nav-mobile-cta:focus {
        color: rgba(253,224,139,.98);
        border-color: rgba(253,224,139,.58);
        background: rgba(253,224,139,.07);
      }
    }

    /* ──────── SMALL MOBILE (380px) ──────── */
    @media (max-width: 380px) {
      .nav-mobile-inner {
        width: calc(100vw - 36px);
        min-height: calc(100vh - 96px);
      }

      .nav-mobile-logo {
        font-size: clamp(42px, 14vw, 58px);
      }

      .nav-mobile-links {
        gap: 20px;
        margin-bottom: 40px;
      }

      .nav-mobile-links a {
        font-size: 11px;
        letter-spacing: .22em;
      }

      .nav-mobile-cta {
        width: 100%;
        padding: 15px 18px;
      }
    }

/* =========================================================
   FINAL RESPONSIVE SYSTEM — tablet / mobile
   All new responsive fixes must stay here.
   ========================================================= */

/* ─── Stage 1A: Viewport safety ─── */
/* Full-screen sections: safe 100svh fallback for mobile browsers.
   Mobile Safari/Chrome include address bar in 100vh,
   100svh = small viewport height = safe area without chrome. */
@media (max-width: 1100px) {

  /* (1) All full-screen sections — svh fallback */
  #intro,
  #hero,
  #quote,
  #musicians,
  #egypt.egypt-intro,
  #formats.formats-title-screen,
  #why.why-title-screen,
  #portfolio-quote.portfolio-quote-screen,
  #malea-quote-screen,
  #final-experience {
    min-height: 100vh;  /* fallback for older browsers */
    min-height: 100svh; /* modern mobile — last value wins */
  }

  /* (2) Sections with desktop height: 100vh — release height lock
       so min-height can take effect */
  #portfolio-quote.portfolio-quote-screen,
  #malea-quote-screen,
  #egypt.egypt-intro,
  #final-experience.final-experience {
    height: auto;
  }

  /* (3) Fixed overlays — use 100dvh (dynamic viewport height)
       which excludes browser chrome in real time */
  .vmodal-overlay,
  .modal-overlay,
  .video-modal-backdrop {
    min-height: 100vh;  /* fallback */
    height: 100dvh;     /* dynamic — reacts to chrome hide/show */
    max-height: 100dvh; /* cap to dvh */
  }

}

/* ─── Stage 1B+: Mobile Visual Foundation (≤ 760px) ─── */
@media (max-width: 760px) {

  /* 1. Responsive custom properties for mobile layer */
  :root {
    --m-title-main: clamp(34px, 9vw, 46px);
    --m-title-ceremony: clamp(38px, 10vw, 52px);
    --m-title-card: clamp(22px, 6vw, 30px);
    --m-body: 15px;
    --m-body-line: 1.68;
    --m-micro: 10.5px;
  }

  /* 2. Main mobile H2 (identity, philosophy, live-text, player, performance, art, portfolio, final-experience) */
  #identity .identity-headline,
  #philosophy .philosophy-title,
  #live-text .live-title,
  #player .player-title,
  #performance .perf-title,
  #art .art-title,
  #portfolio .portfolio-title,
  #final-experience .final-experience-title {
    font-size: var(--m-title-main);
    line-height: 1.1;
    letter-spacing: .035em;
  }

  /* 3. Ceremonial titles (musicians, sensations, egypt, formats, why) */
  #musicians .musicians-title,
  #sensations .sens-title,
  #egypt .egypt-title,
  #formats .formats-main-title,
  #why .why-title-main {
    font-size: var(--m-title-ceremony);
    line-height: 1.08;
    letter-spacing: .035em;
  }

  /* 4. Quote scale */
  .quote-text,
  .mq-text,
  .portfolio-quote-text {
    font-size: clamp(28px, 7.8vw, 40px);
    line-height: 1.38;
    margin: 34px 0;
  }

  /* 5. Mobile section rhythm (content sections only — no intro, hero, quote, title, image-only) */
  #identity,
  #philosophy,
  #live-text,
  #player,
  #performance,
  #art,
  #reviews,
  #egypt-case,
  #formats-list,
  #formats-integration,
  #why-argument,
  #portfolio,
  #portfolio-map,
  #final-experience {
    padding-top: clamp(72px, 10vh, 96px);
    padding-bottom: clamp(72px, 10vh, 96px);
  }

  /* 6. Image-only screens (live-image, why-image) */
  #live-image,
  #why-image {
    min-height: 72svh;
    height: 72svh;
  }

  /* 7. Base text width on mobile */
  #philosophy .philosophy-body,
  #live-text .live-manifesto,
  #performance .perf-desc,
  #art .art-desc,
  #egypt-case .egypt-copy,
  #final-experience .final-experience-text {
    max-width: 34rem;
    font-size: var(--m-body);
    line-height: var(--m-body-line);
  }

  /* 8. Base media / video normalization */
  #performance .video-card,
  #art .video-card {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  #performance .video-frame-wrap,
  #art .video-frame-wrap {
    aspect-ratio: 16 / 9;
  }

  #egypt-case .egypt-video {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ─── Small mobile (≤ 520px) ─── */
@media (max-width: 520px) {

  /* 1. Responsive custom properties for small mobile */
  :root {
    --m-title-main: clamp(32px, 9.4vw, 42px);
    --m-title-ceremony: clamp(36px, 10vw, 48px);
    --m-title-card: clamp(21px, 6vw, 28px);
    --m-body: 14.5px;
    --m-body-line: 1.66;
    --m-micro: 10px;
  }

  /* 2. Main mobile H2 — small */
  #identity .identity-headline,
  #philosophy .philosophy-title,
  #live-text .live-title,
  #player .player-title,
  #performance .perf-title,
  #art .art-title,
  #portfolio .portfolio-title,
  #final-experience .final-experience-title {
    font-size: var(--m-title-main);
    line-height: 1.08;
    letter-spacing: .032em;
  }

  /* 3. Ceremonial titles — small */
  #musicians .musicians-title,
  #sensations .sens-title,
  #egypt .egypt-title,
  #formats .formats-main-title,
  #why .why-title-main {
    font-size: var(--m-title-ceremony);
    line-height: 1.06;
    letter-spacing: .03em;
  }

  /* 4. Quote scale — small */
  .quote-text,
  .mq-text,
  .portfolio-quote-text {
    font-size: clamp(26px, 7.4vw, 36px);
    line-height: 1.36;
    margin: 30px 0;
  }

  /* 5. Mobile section rhythm — small */
  #identity,
  #philosophy,
  #live-text,
  #player,
  #performance,
  #art,
  #reviews,
  #egypt-case,
  #formats-list,
  #formats-integration,
  #why-argument,
  #portfolio,
  #portfolio-map,
  #final-experience {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  /* 6. Image-only screens — small */
  #live-image {
    min-height: 68svh;
    height: 68svh;
  }

  /* 8. Base media restrictions — small */
  #performance .video-card,
  #art .video-card {
    max-width: 100%;
  }

  #egypt-case .egypt-video {
    max-width: 310px;
  }

}

/* ─── Tablet foundation (761px – 1100px) ─── */
@media (min-width: 761px) and (max-width: 1100px) {

  /* 2. Main H2 — tablet */
  #identity .identity-headline,
  #philosophy .philosophy-title,
  #live-text .live-title,
  #player .player-title,
  #performance .perf-title,
  #art .art-title,
  #portfolio .portfolio-title,
  #final-experience .final-experience-title {
    font-size: clamp(40px, 5.6vw, 58px);
    line-height: 1.1;
  }

  /* 3. Ceremonial titles — tablet */
  #musicians .musicians-title,
  #sensations .sens-title,
  #egypt .egypt-title,
  #formats .formats-main-title,
  #why .why-title-main {
    font-size: clamp(44px, 6vw, 64px);
    line-height: 1.08;
  }

  /* 8. Video cards — tablet */
  #performance .video-card,
  #art .video-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ─── Stage 2: Screens 01–06 / Mobile & Tablet Composition Polish ─── */
/* Scoped fixes only for #intro, #hero, #identity, #philosophy, #live-text. */

/* --- Mobile (≤ 760px) refinements --- */
@media (max-width: 760px) {

  /* #intro: vertical breathing room for mobile composition */
  #intro .intro-content {
    padding-top: 56px;
  }

  /* #intro: safe editorial wrapping for descriptor */
  #intro .intro-desc {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* #hero: compact inner padding, not squeezed desktop */
  #hero .hero-inner {
    padding-top: 60px;
    padding-bottom: 60px;
    width: 100%;
    min-height: 0;
  }

  /* #hero: keep tagline readable, not full-width */
  #hero .hero-tagline {
    max-width: 340px;
  }

  /* #live-text: button — auto width, left-aligned */
  #live-text .live-text-left .btn {
    width: auto;
    align-self: flex-start;
  }

}

/* --- Small mobile (≤ 520px) refinements --- */
@media (max-width: 520px) {

  /* #identity: reduce titre-item vertical padding */
  #identity .titre-item {
    padding-top: 10px;
    padding-bottom: 10px;
  }

}

/* --- Tablet (761px – 1100px) refinements --- */
@media (min-width: 761px) and (max-width: 1100px) {

  /* #hero: cap tagline width on tablet */
  #hero .hero-tagline {
    max-width: 420px;
  }

  /* #identity: cap titres width on tablet */
  #identity .identity-titres {
    max-width: 520px;
  }

  /* #philosophy: cap body width on tablet */
  #philosophy .philosophy-body {
    max-width: 520px;
  }

}

/* ─── Stage 2V: Visual QA corrections — screens 01–06 ─── */

@media (max-width: 1100px) {

  /* #hero: softer overlay for mobile/tablet photo readability */
  #hero .hero-photo::after {
    background: linear-gradient(
      to right,
      rgba(7,11,29,.70) 0%,
      rgba(7,11,29,.34) 48%,
      rgba(7,11,29,.04) 100%
    );
  }

  /* #live-image: lighter reframing plus controlled lower/edge vignette */
  #live-image .live-bg img {
    object-position: center 38%;
  }

  #live-image .live-bg::after {
    background:
      radial-gradient(
        ellipse 84% 76% at 50% 44%,
        transparent 34%,
        rgba(5,8,22,.50) 100%
      ),
      linear-gradient(
        to top,
        rgba(5,8,22,.46) 0%,
        rgba(5,8,22,.18) 28%,
        transparent 58%
      );
  }

}

@media (max-width: 960px) {

  /* #hero: keep full-background photo visible without losing contrast */
  #hero .hero-photo::after {
    background:
      linear-gradient(
        to right,
        rgba(7,11,29,.78) 0%,
        rgba(7,11,29,.58) 54%,
        rgba(7,11,29,.42) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(7,11,29,.12) 0%,
        rgba(7,11,29,.24) 100%
      );
  }

  /* #live-text: reduce mobile/tablet stack distance before formats */
  #live-text .live-text-inner {
    gap: 34px;
  }

}

@media (min-width: 761px) and (max-width: 960px) {

  /* #identity: narrower editorial measure on tablet stack */
  #identity .identity-text {
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  /* #philosophy: less mechanical tablet line length */
  #philosophy .philosophy-body {
    max-width: 480px;
  }

}

@media (min-width: 961px) and (max-width: 1100px) {

  /* #hero: cap CTA width on large tablet without removing JS width sync */
  #hero .hero-inner .btn {
    box-sizing: border-box;
    max-width: 390px;
  }

  /* #identity: keep text column from becoming too wide */
  #identity .identity-text {
    max-width: 620px;
  }

  /* #philosophy: controlled line length and tighter divider offset */
  #philosophy .philosophy-right {
    gap: 24px;
  }

  #philosophy .philosophy-body {
    max-width: 500px;
  }

  /* #live-text: add air before the vertical line at 1024px */
  #live-text .live-text-left {
    padding-right: 56px;
  }

  #live-text .live-title {
    font-size: clamp(40px, 4.8vw, 52px);
  }

  #live-text .btn {
    box-sizing: border-box;
    max-width: 360px;
  }

}

@media (max-width: 760px) {

  /* #hero: taller, more tactile CTA on mobile */
  #hero .hero-inner .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: min(100%, 340px);
    padding-top: 13px;
    padding-bottom: 13px;
    line-height: 1.15;
  }

  /* #identity: avoid title-row overflow and tighten subtitle/rule rhythm */
  #identity .identity-text,
  #identity .identity-titres,
  #identity .titre-item {
    min-width: 0;
    max-width: 100%;
  }

  #identity .identity-sub {
    margin-bottom: 26px;
  }

  #identity .identity-rule {
    margin-bottom: 18px;
  }

  #identity .titre-item {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* #philosophy: reduce gap between title and body on mobile stack */
  #philosophy .philosophy-inner {
    gap: 28px;
  }

  #philosophy .philosophy-right {
    gap: 20px;
  }

  /* #live-text: quieter CTA and tighter stack rhythm */
  #live-text .live-text-inner {
    gap: 30px;
  }

  #live-text .btn {
    box-sizing: border-box;
    max-width: min(100%, 320px);
  }

}

@media (max-width: 390px) {

  /* #intro: minimal logo de-emphasis only for narrow mobile */
  #intro .intro-logo {
    font-size: clamp(82px, 22vw, 86px);
    letter-spacing: .085em;
  }

}

/* ─── Stage D: Hero cinematic recomposition (≤1100px only) ─── */
@media (max-width: 1100px) {

  #hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: stretch;
    justify-content: flex-start;
    background: #050816;
    overflow: hidden;
  }

  #hero .hero-photo {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #hero .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: saturate(.92) brightness(.82) contrast(1.02);
  }

  #hero .hero-photo::after {
    background:
      linear-gradient(
        to bottom,
        rgba(5,8,22,.28) 0%,
        rgba(5,8,22,.08) 28%,
        rgba(5,8,22,.34) 58%,
        rgba(5,8,22,.86) 100%
      ),
      linear-gradient(
        to right,
        rgba(5,8,22,.58) 0%,
        rgba(5,8,22,.28) 42%,
        rgba(5,8,22,.42) 100%
      ),
      radial-gradient(
        ellipse 96% 82% at 50% 42%,
        rgba(5,8,22,0) 34%,
        rgba(5,8,22,.54) 100%
      );
  }

  #hero .hero-glow {
    z-index: 1;
    background:
      radial-gradient(ellipse 70% 42% at 50% 76%, rgba(253,224,139,.10) 0%, transparent 66%),
      radial-gradient(ellipse 48% 48% at 22% 28%, rgba(86,178,205,.06) 0%, transparent 62%);
  }

  #hero .hero-inner {
    position: relative;
    z-index: 2;
    width: min(620px, 100%);
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(88px, 12svh, 132px) var(--col-pad) clamp(54px, 8svh, 86px);
    justify-content: flex-end;
    align-items: flex-start;
  }

  #hero .overline {
    margin-bottom: clamp(14px, 2.4svh, 22px);
    color: rgba(253,224,139,.76);
  }

  #hero .hero-name {
    font-size: clamp(66px, 11vw, 108px);
    line-height: .94;
    letter-spacing: .10em;
    margin-bottom: clamp(20px, 3svh, 30px);
  }

  #hero .hero-divider {
    margin-bottom: clamp(18px, 2.8svh, 26px);
    background: rgba(253,224,139,.48);
  }

  #hero .hero-tagline {
    max-width: 460px;
    margin-bottom: clamp(30px, 4.4svh, 46px);
    color: rgba(237,233,224,.82);
    line-height: 1.72;
  }

  #hero .hero-inner .btn {
    width: auto !important;
    min-width: min(100%, 280px);
    max-width: min(100%, 380px);
    padding: 14px 24px;
    line-height: 1.15;
    background: rgba(5,8,22,.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

}

/* Stage D: mobile hero (≤760px) */
@media (max-width: 760px) {

  #hero {
    --hero-pad-x: max(18px, env(safe-area-inset-left));
  }

  #hero .hero-photo img {
    object-position: center 18%;
    filter: saturate(.92) brightness(.78) contrast(1.03);
  }

  #hero .hero-photo::after {
    background:
      linear-gradient(
        to bottom,
        rgba(5,8,22,.32) 0%,
        rgba(5,8,22,.10) 30%,
        rgba(5,8,22,.36) 56%,
        rgba(5,8,22,.92) 100%
      ),
      linear-gradient(
        to right,
        rgba(5,8,22,.46) 0%,
        rgba(5,8,22,.18) 52%,
        rgba(5,8,22,.36) 100%
      ),
      radial-gradient(
        ellipse 112% 86% at 50% 42%,
        rgba(5,8,22,0) 30%,
        rgba(5,8,22,.56) 100%
      );
  }

  #hero .hero-inner {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(84px, 14svh, 118px) var(--hero-pad-x) max(54px, env(safe-area-inset-bottom));
  }

  #hero .overline {
    font-size: 10px;
    letter-spacing: .24em;
    margin-bottom: 14px;
  }

  #hero .hero-name {
    font-size: clamp(56px, 15.2vw, 72px);
    letter-spacing: .105em;
    margin-bottom: 20px;
  }

  #hero .hero-divider {
    width: 36px;
    margin-bottom: 18px;
  }

  #hero .hero-tagline {
    max-width: 360px;
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.68;
  }

  #hero .hero-inner .btn {
    width: 100% !important;
    min-width: 0;
    max-width: 390px;
    min-height: 48px;
    padding: 15px 18px;
    font-size: 10px;
    letter-spacing: .16em;
  }

}

/* Stage D: vertical tablet hero (761–820px) */
@media (min-width: 761px) and (max-width: 820px) {

  #hero .hero-inner {
    width: min(580px, 78vw);
    padding-left: 7vw;
    padding-right: 7vw;
    padding-bottom: clamp(66px, 8svh, 92px);
  }

  #hero .hero-name {
    font-size: clamp(78px, 11.5vw, 96px);
  }

  #hero .hero-tagline {
    max-width: 430px;
    font-size: clamp(16px, 2vw, 18px);
  }

}

/* Stage D: horizontal tablet hero (821–1100px) */
@media (min-width: 821px) and (max-width: 1100px) {

  #hero .hero-photo img {
    object-position: center 24%;
  }

  #hero .hero-inner {
    width: min(680px, 62vw);
    padding-left: clamp(56px, 8vw, 92px);
    padding-right: clamp(38px, 5vw, 64px);
    padding-bottom: clamp(58px, 7svh, 82px);
  }

  #hero .hero-name {
    font-size: clamp(86px, 10.5vw, 116px);
  }

  #hero .hero-tagline {
    max-width: 480px;
  }

}

/* ─── Targeted responsive polish: #hero / #live-image / #live-text (≤1100px only) ─── */
@media (max-width: 1100px) {

  #live-image {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
  }

  #live-image .live-bg img {
    filter: saturate(.88) brightness(.78) contrast(1.03);
  }

  #live-image .live-bg::after {
    background:
      radial-gradient(
        ellipse 92% 78% at 50% 42%,
        rgba(5,8,22,0) 30%,
        rgba(5,8,22,.50) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(5,8,22,.18) 0%,
        rgba(5,8,22,.04) 28%,
        rgba(5,8,22,.68) 100%
      );
  }

  #live-text {
    align-items: center;
  }

  #live-text .live-text-inner {
    width: min(100%, 1220px);
  }

  #live-text .live-manifesto {
    max-width: 520px;
  }

}

/* Mobile polish (≤760px): cinematic full-screen image and unclipped live-text stack */
@media (max-width: 760px) {

  #hero .hero-inner {
    justify-content: flex-end;
    padding-top: clamp(92px, 13svh, 118px);
    padding-bottom: max(42px, calc(env(safe-area-inset-bottom) + 36px));
  }

  #hero .hero-photo img {
    object-position: 52% 16%;
  }

  #hero .hero-name {
    font-size: clamp(54px, 14.6vw, 70px);
  }

  #hero .hero-tagline {
    max-width: 330px;
    margin-bottom: 24px;
  }

  #live-image {
    min-height: 100vh;
    min-height: 100svh;
  }

  #live-image .live-bg img {
    object-position: 50% 30%;
  }

  #live-image .live-bg::after {
    background:
      radial-gradient(
        ellipse 108% 82% at 50% 38%,
        rgba(5,8,22,0) 26%,
        rgba(5,8,22,.54) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(5,8,22,.18) 0%,
        rgba(5,8,22,.04) 30%,
        rgba(5,8,22,.72) 100%
      );
  }

  #live-text {
    padding-top: clamp(108px, 16svh, 132px);
    padding-bottom: clamp(70px, 10svh, 94px);
    justify-content: flex-start;
  }

  #live-text .live-text-inner {
    gap: 28px;
    align-content: start;
  }

  #live-text .live-title {
    font-size: clamp(36px, 10.4vw, 44px);
    line-height: 1.05;
    margin-bottom: 24px;
  }

  #live-text .live-title-rule {
    margin-bottom: 20px;
  }

  #live-text .live-manifesto {
    max-width: 31rem;
    margin-bottom: 30px;
  }

  #live-text .live-text-left .btn {
    width: 100%;
    max-width: 330px;
    min-height: 46px;
  }

  #live-text .live-formats-label {
    margin-bottom: 18px;
  }

  #live-text .live-format-row {
    gap: 16px;
    padding: 16px 0;
  }

  #live-text .live-format-name {
    font-size: clamp(19px, 5.2vw, 22px);
    line-height: 1.24;
  }

}

/* Vertical tablet polish (761–820px) */
@media (min-width: 761px) and (max-width: 820px) {

  #hero .hero-photo img {
    object-position: 50% 20%;
  }

  #hero .hero-inner {
    width: min(610px, 76vw);
    padding-top: clamp(118px, 13svh, 150px);
    padding-bottom: clamp(74px, 9svh, 104px);
  }

  #hero .hero-tagline {
    max-width: 410px;
  }

  #live-image .live-bg img {
    object-position: 50% 34%;
  }

  #live-text {
    padding-top: clamp(124px, 12svh, 156px);
    padding-bottom: clamp(86px, 9svh, 118px);
    justify-content: flex-start;
  }

  #live-text .live-text-inner {
    gap: 34px;
    max-width: 720px;
  }

  #live-text .live-title {
    max-width: 620px;
    font-size: clamp(46px, 7vw, 58px);
  }

  #live-text .live-manifesto {
    max-width: 620px;
  }

  #live-text .live-text-left .btn {
    width: 100%;
    max-width: none;
  }

  #live-text .live-format-row {
    padding: 18px 0;
  }

}

/* Horizontal tablet polish (821–1100px) */
@media (min-width: 821px) and (max-width: 1100px) {

  #hero .hero-inner {
    width: min(660px, 60vw);
    padding-top: clamp(118px, 12svh, 150px);
  }

  #hero .hero-tagline {
    max-width: 455px;
  }

  #live-image .live-bg img {
    object-position: 50% 36%;
  }

  #live-text .live-text-inner {
    grid-template-columns: minmax(0, 47%) 1px minmax(0, 53%);
    padding-left: clamp(56px, 8vw, 92px);
    padding-right: clamp(56px, 8vw, 92px);
  }

  #live-text .live-text-left {
    padding-right: clamp(42px, 5vw, 62px);
  }

  #live-text .live-text-right {
    padding-left: clamp(42px, 5vw, 62px);
  }

  #live-text .live-title {
    font-size: clamp(44px, 5.1vw, 56px);
    line-height: 1.08;
  }

  #live-text .live-format-row {
    padding: 17px 0;
  }

  #live-text .live-format-name {
    font-size: clamp(21px, 2.25vw, 27px);
  }

}

/* ─── Stage D hotfix: hero centered poster axis — mobile/tablet vertical ─── */
@media (max-width: 760px) {

  #hero .hero-inner {
    width: 100%;
    max-width: none;
    padding-left: clamp(16px, 5vw, 22px);
    padding-right: clamp(16px, 5vw, 22px);
    align-items: center !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .overline,
  #hero .hero-name,
  #hero .hero-tagline {
    text-align: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-divider {
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-inner .btn {
    align-self: center;
    width: 100% !important;
    max-width: 343px;
    margin-left: auto;
    margin-right: auto;
  }

}

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

  #hero .hero-inner {
    width: 100%;
    max-width: none;
    padding-left: clamp(36px, 7vw, 64px);
    padding-right: clamp(36px, 7vw, 64px);
    align-items: center !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .overline,
  #hero .hero-name,
  #hero .hero-tagline {
    text-align: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-divider {
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-inner .btn {
    align-self: center;
    width: auto !important;
    min-width: 280px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ─── Stage D hotfix: hero image subject centering + iPad portrait axis ─── */
@media (max-width: 760px) {

  #hero .hero-photo img {
    object-position: 42% 18%;
  }

}

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

  #hero .hero-photo img {
    object-position: 42% 20%;
  }

}

@media (min-width: 821px) and (max-width: 1100px) and (orientation: portrait) {

  #hero .hero-photo img {
    object-position: 42% 22%;
  }

  #hero .hero-inner {
    width: 100%;
    max-width: none;
    padding-left: clamp(48px, 8vw, 88px);
    padding-right: clamp(48px, 8vw, 88px);
    align-items: center !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .overline,
  #hero .hero-name,
  #hero .hero-tagline {
    text-align: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-divider {
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-inner .btn {
    align-self: center;
    width: auto !important;
    min-width: 300px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ─── Stage D hotfix: tablet landscape hero lift + iPad Pro full-bleed ─── */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 821px) and (max-width: 1100px) and (max-height: 820px) {

  #hero .hero-inner {
    justify-content: center;
    padding-top: clamp(86px, 10svh, 112px);
    padding-bottom: clamp(70px, 9svh, 92px);
    transform: translateY(-3svh);
  }

  #hero .hero-tagline {
    margin-bottom: clamp(26px, 3.8svh, 36px);
  }

}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 1101px) and (max-width: 1366px) and (max-height: 1100px) {

  #hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: stretch;
    justify-content: flex-start;
    background: #050816;
    overflow: hidden;
  }

  #hero .hero-photo {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #hero .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% 24%;
    filter: saturate(.92) brightness(.82) contrast(1.02);
  }

  #hero .hero-photo::after {
    background:
      linear-gradient(
        to bottom,
        rgba(5,8,22,.24) 0%,
        rgba(5,8,22,.08) 28%,
        rgba(5,8,22,.34) 60%,
        rgba(5,8,22,.84) 100%
      ),
      linear-gradient(
        to right,
        rgba(5,8,22,.64) 0%,
        rgba(5,8,22,.30) 42%,
        rgba(5,8,22,.38) 100%
      ),
      radial-gradient(
        ellipse 96% 82% at 50% 42%,
        rgba(5,8,22,0) 34%,
        rgba(5,8,22,.50) 100%
      );
  }

  #hero .hero-glow {
    z-index: 1;
    background:
      radial-gradient(ellipse 70% 42% at 50% 76%, rgba(253,224,139,.10) 0%, transparent 66%),
      radial-gradient(ellipse 48% 48% at 22% 28%, rgba(86,178,205,.06) 0%, transparent 62%);
  }

  #hero .hero-inner {
    position: relative;
    z-index: 2;
    width: min(720px, 58vw);
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(104px, 10svh, 132px) clamp(64px, 7vw, 96px) clamp(72px, 8svh, 98px);
    justify-content: center;
    align-items: flex-start;
    transform: translateY(-2svh);
  }

  #hero .overline {
    color: rgba(253,224,139,.76);
  }

  #hero .hero-name {
    font-size: clamp(96px, 8.4vw, 118px);
    line-height: .94;
    letter-spacing: .10em;
    margin-bottom: clamp(20px, 2.8svh, 30px);
  }

  #hero .hero-divider {
    background: rgba(253,224,139,.48);
    margin-bottom: clamp(18px, 2.6svh, 26px);
  }

  #hero .hero-tagline {
    max-width: 470px;
    margin-bottom: clamp(28px, 3.6svh, 40px);
    color: rgba(237,233,224,.82);
    line-height: 1.72;
  }

  #hero .hero-inner .btn {
    width: auto !important;
    min-width: min(100%, 300px);
    max-width: min(100%, 390px);
    padding: 14px 24px;
    line-height: 1.15;
    background: rgba(5,8,22,.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

}

/* ─── Stage D hotfix: hero tablet landscape desktop-like layout ─── */
@media (min-width: 821px) and (max-width: 1100px) and (orientation: landscape) {
  #hero {
    align-items: stretch;
    justify-content: flex-start;
    background: var(--bg-1);
  }

  #hero .hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 58%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
  }

  #hero .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(.90) brightness(.88) contrast(1.02);
  }

  #hero .hero-photo::after {
    background:
      linear-gradient(
        to right,
        rgba(7,11,29,.92) 0%,
        rgba(7,11,29,.68) 22%,
        rgba(7,11,29,.20) 58%,
        rgba(7,11,29,.00) 100%
      ),
      linear-gradient(
        to top,
        rgba(7,11,29,.72) 0%,
        rgba(7,11,29,.22) 34%,
        rgba(7,11,29,.00) 72%
      );
  }

  #hero .hero-inner {
    position: relative;
    z-index: 2;
    width: 42%;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(96px, 10svh, 120px) 36px clamp(72px, 8svh, 96px) clamp(76px, 8vw, 108px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    text-align: left;
    transform: none;
  }

  #hero .overline,
  #hero .hero-name,
  #hero .hero-tagline {
    text-align: left;
    align-self: flex-start;
    margin-left: 0;
    margin-right: 0;
  }

  #hero .hero-divider {
    margin-left: 0;
    margin-right: 0;
  }

  #hero .hero-name {
    font-size: clamp(76px, 8vw, 96px);
    line-height: .96;
    margin-bottom: clamp(22px, 3svh, 30px);
  }

  #hero .hero-tagline {
    max-width: 390px;
    margin-bottom: clamp(30px, 4svh, 40px);
  }

  #hero .hero-inner .btn {
    align-self: flex-start;
    width: min(340px, 100%) !important;
    max-width: 340px;
    min-height: 46px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 1101px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #hero {
    align-items: stretch;
    justify-content: flex-start;
    background: var(--bg-1);
  }

  #hero .hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 58%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
  }

  #hero .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(.90) brightness(.90) contrast(1.02);
  }

  #hero .hero-photo::after {
    background:
      linear-gradient(
        to right,
        rgba(7,11,29,.92) 0%,
        rgba(7,11,29,.66) 22%,
        rgba(7,11,29,.18) 58%,
        rgba(7,11,29,.00) 100%
      ),
      linear-gradient(
        to top,
        rgba(7,11,29,.66) 0%,
        rgba(7,11,29,.20) 34%,
        rgba(7,11,29,.00) 72%
      );
  }

  #hero .hero-inner {
    position: relative;
    z-index: 2;
    width: 42%;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(112px, 10svh, 136px) 40px clamp(76px, 8svh, 104px) clamp(96px, 8vw, 132px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    text-align: left;
    transform: none;
  }

  #hero .overline,
  #hero .hero-name,
  #hero .hero-tagline {
    text-align: left;
    align-self: flex-start;
    margin-left: 0;
    margin-right: 0;
  }

  #hero .hero-divider {
    margin-left: 0;
    margin-right: 0;
  }

  #hero .hero-name {
    font-size: clamp(92px, 8vw, 118px);
    line-height: .96;
    margin-bottom: clamp(22px, 3svh, 32px);
  }

  #hero .hero-tagline {
    max-width: 450px;
    margin-bottom: clamp(32px, 4svh, 42px);
  }

  #hero .hero-inner .btn {
    align-self: flex-start;
    width: min(360px, 100%) !important;
    max-width: 360px;
    min-height: 46px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ─── Stage E: identity mobile/tablet responsive polish ─── */
@media (max-width: 760px) {
  #identity {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg-2);
  }

  #identity .identity-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    overflow: hidden;
  }

  #identity .identity-text {
    display: contents;
  }

  #identity .identity-headline {
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    padding: clamp(34px, 8vw, 48px) 6.4vw 0;
    margin: 0 auto 14px;
    text-align: center;
    font-size: clamp(34px, 9.4vw, 42px);
    line-height: 1.08;
    letter-spacing: .035em;
    white-space: normal;
  }

  #identity .identity-sub {
    grid-row: 3;
    width: 100%;
    max-width: 310px;
    margin: 0 auto clamp(24px, 6vw, 34px);
    padding: 0 6.4vw;
    text-align: center;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: .14em;
  }

  #identity .identity-portrait {
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: clamp(410px, 57svh, 550px);
    min-height: 390px;
    overflow: hidden;
  }

  #identity .identity-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    filter: saturate(.84) brightness(.82) contrast(1.03);
  }

  #identity .identity-portrait::after {
    background: linear-gradient(to bottom, rgba(13,10,42,.00) 0%, rgba(13,10,42,.10) 42%, rgba(13,10,42,.62) 84%, rgba(13,10,42,1) 100%), radial-gradient(ellipse 86% 72% at 50% 34%, transparent 34%, rgba(13,10,42,.34) 100%);
  }

  #identity .identity-rule {
    grid-row: 4;
    width: auto;
    max-width: none;
    margin: 0 6.4vw 18px;
  }

  #identity .identity-titres {
    grid-row: 5;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 6.4vw clamp(58px, 13vw, 78px);
    text-align: left;
  }

  #identity .titre-item {
    max-width: 100%;
    font-size: 14.5px;
    line-height: 1.54;
    padding: 12px 0;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 390px) {
  #identity .identity-headline {
    font-size: clamp(32px, 9vw, 36px);
    padding-left: 5.8vw;
    padding-right: 5.8vw;
  }

  #identity .identity-sub {
    max-width: 286px;
    font-size: 9.5px;
    letter-spacing: .13em;
  }

  #identity .identity-portrait {
    height: clamp(370px, 55svh, 485px);
    min-height: 350px;
  }

  #identity .identity-portrait img {
    object-position: center 52%;
  }

  #identity .identity-titres {
    margin-left: 5.8vw;
    margin-right: 5.8vw;
  }

  #identity .titre-item {
    font-size: 14px;
  }
}

@media (min-width: 761px) and (max-width: 960px) and (orientation: portrait) {
  #identity {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg-2);
  }

  #identity .identity-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    overflow: hidden;
  }

  #identity .identity-text {
    display: contents;
  }

  #identity .identity-headline {
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    padding: clamp(44px, 5.2vw, 62px) 7vw 0;
    margin: 0 auto 14px;
    text-align: center;
    font-size: clamp(50px, 6.4vw, 60px);
    line-height: 1.08;
    letter-spacing: .04em;
    white-space: normal;
  }

  #identity .identity-sub {
    grid-row: 3;
    width: 100%;
    max-width: 460px;
    margin: 0 auto clamp(22px, 3.2vw, 30px);
    padding: 0 7vw;
    text-align: center;
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: .16em;
  }

  #identity .identity-portrait {
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: clamp(660px, 68svh, 820px);
    min-height: 640px;
    overflow: hidden;
  }

  #identity .identity-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    filter: saturate(.84) brightness(.84) contrast(1.03);
  }

  #identity .identity-portrait::after {
    background: linear-gradient(to bottom, rgba(13,10,42,.00) 0%, rgba(13,10,42,.08) 44%, rgba(13,10,42,.58) 84%, rgba(13,10,42,1) 100%), radial-gradient(ellipse 82% 72% at 50% 36%, transparent 38%, rgba(13,10,42,.30) 100%);
  }

  #identity .identity-rule {
    grid-row: 4;
    width: auto;
    max-width: 620px;
    margin: clamp(30px, 4vw, 42px) auto 22px;
  }

  #identity .identity-titres {
    grid-row: 5;
    width: auto;
    max-width: 620px;
    min-width: 0;
    margin: 0 auto clamp(72px, 8vw, 96px);
    text-align: left;
  }

  #identity .titre-item {
    max-width: 100%;
    font-size: clamp(15.5px, 2vw, 17px);
    line-height: 1.56;
    padding: 14px 0;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (min-width: 961px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #identity {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg-2);
  }

  #identity .identity-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    overflow: hidden;
  }

  #identity .identity-text {
    display: contents;
  }

  #identity .identity-headline {
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    padding: clamp(58px, 6vw, 82px) 8vw 0;
    margin: 0 auto 16px;
    text-align: center;
    font-size: clamp(62px, 6vw, 76px);
    line-height: 1.08;
    letter-spacing: .04em;
    white-space: normal;
  }

  #identity .identity-sub {
    grid-row: 3;
    width: 100%;
    max-width: 540px;
    margin: 0 auto clamp(26px, 3.4vw, 38px);
    padding: 0 8vw;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.58;
    letter-spacing: .17em;
  }

  #identity .identity-portrait {
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: clamp(780px, 64svh, 960px);
    min-height: 740px;
    overflow: hidden;
  }

  #identity .identity-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    filter: saturate(.84) brightness(.84) contrast(1.03);
  }

  #identity .identity-portrait::after {
    background: linear-gradient(to bottom, rgba(13,10,42,.00) 0%, rgba(13,10,42,.08) 46%, rgba(13,10,42,.58) 86%, rgba(13,10,42,1) 100%), radial-gradient(ellipse 80% 72% at 50% 36%, transparent 40%, rgba(13,10,42,.28) 100%);
  }

  #identity .identity-rule {
    grid-row: 4;
    width: auto;
    max-width: 700px;
    margin: clamp(38px, 4vw, 52px) auto 26px;
  }

  #identity .identity-titres {
    grid-row: 5;
    width: auto;
    max-width: 700px;
    min-width: 0;
    margin: 0 auto clamp(88px, 8vw, 116px);
    text-align: left;
  }

  #identity .titre-item {
    max-width: 100%;
    font-size: clamp(16px, 1.65vw, 18px);
    line-height: 1.58;
    padding: 15px 0;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (min-width: 961px) and (max-width: 1100px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #identity {
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
  }

  #identity .identity-inner {
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    display: grid;
    grid-template-columns: 47% 53%;
  }

  #identity .identity-portrait {
    height: 100%;
    overflow: hidden;
  }

  #identity .identity-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  #identity .identity-portrait::after {
    background:
      linear-gradient(
        to right,
        transparent 30%,
        rgba(13,10,42,.96) 100%
      ),
      linear-gradient(
        to top,
        rgba(13,10,42,.42) 0%,
        rgba(13,10,42,.18) 18%,
        transparent 42%
      );
  }

  #identity .identity-text {
    max-width: 560px;
    min-width: 0;
    padding: clamp(54px, 6svh, 72px) clamp(42px, 5vw, 60px) clamp(48px, 5.6svh, 66px) clamp(34px, 4vw, 50px);
    justify-content: center;
  }

  #identity .identity-headline {
    font-size: clamp(46px, 5.2vw, 58px);
    line-height: 1.06;
    margin-bottom: 16px;
  }

  #identity .identity-sub {
    margin-bottom: 24px;
    font-size: 10.5px;
    line-height: 1.45;
  }

  #identity .identity-rule {
    margin-bottom: 16px;
  }

  #identity .identity-titres {
    max-width: 520px;
    min-width: 0;
  }

  #identity .titre-item {
    font-size: clamp(13.5px, 1.55vw, 15.5px);
    line-height: 1.42;
    padding: 9px 0;
  }
}

@media (min-width: 1101px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #identity {
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
  }

  #identity .identity-inner {
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    display: grid;
    grid-template-columns: 46% 54%;
  }

  #identity .identity-portrait {
    height: 100%;
    overflow: hidden;
  }

  #identity .identity-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  #identity .identity-portrait::after {
    background:
      linear-gradient(
        to right,
        transparent 30%,
        rgba(13,10,42,.96) 100%
      ),
      linear-gradient(
        to top,
        rgba(13,10,42,.42) 0%,
        rgba(13,10,42,.18) 18%,
        transparent 42%
      );
  }

  #identity .identity-text {
    max-width: 620px;
    min-width: 0;
    padding: clamp(66px, 7svh, 90px) clamp(58px, 6vw, 82px) clamp(62px, 6.6svh, 86px) clamp(44px, 4vw, 62px);
    justify-content: center;
  }

  #identity .identity-headline {
    font-size: clamp(58px, 5vw, 70px);
    line-height: 1.08;
    margin-bottom: 20px;
  }

  #identity .identity-sub {
    margin-bottom: 32px;
    line-height: 1.5;
  }

  #identity .identity-rule {
    margin-bottom: 22px;
  }

  #identity .identity-titres {
    max-width: 580px;
    min-width: 0;
  }

  #identity .titre-item {
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.5;
    padding: 12px 0;
  }
}

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  #identity {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
  }

  #identity .identity-inner {
    width: 100%;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-columns: 46% 54%;
  }

  #identity .identity-text {
    min-height: 0;
    height: 100%;
    justify-content: center;
    padding: clamp(64px, 8dvh, 88px) 8vw clamp(64px, 8dvh, 88px) 56px;
  }

  #identity .identity-portrait {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #identity .identity-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

/* ─── LIVE-MOBILE-IMAGE — hidden on desktop/landscape ─── */
.live-mobile-image {
  display: none;
}

/* ═════════════════════════════════════════════════════════
   PORTRAIT — combine #live-image + #live-text
   Vertical mobile & tablet portrait only.
═══════════════════════════════════════════════════════════ */

/* Portrait combines screens 05 + 06 semantically.
   Future scroll animation:
   desktop/landscape keeps #live-image -> #live-text as two states;
   portrait skips #live-image as a separate state and reveals #live-text internally:
   title -> image -> manifesto -> formats -> button. */

@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #live-image {
    display: none;
  }

  #live-text {
    min-height: auto;
    height: auto;
    padding: clamp(58px, 12vw, 92px) 0 clamp(72px, 13vw, 110px);
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--bg-3);
    overflow: hidden;
  }

  #live-text .live-text-inner {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
  }

  #live-text .live-text-left {
    display: contents;
  }

  #live-text .live-title {
    grid-row: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto clamp(30px, 7vw, 44px);
    padding: 0 6.6vw;
    text-align: center;
    font-size: clamp(38px, 10vw, 58px);
    line-height: 1.08;
    letter-spacing: .04em;
  }

  #live-text .live-mobile-image {
    grid-row: 2;
    display: block;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin: 0 0 clamp(34px, 8vw, 54px);
    padding: 0;
  }

  #live-text .live-mobile-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.86) brightness(.82) contrast(1.02);
  }

  #live-text .live-title-rule {
    grid-row: 3;
    width: 42px;
    margin: 0 auto clamp(24px, 6vw, 34px);
  }

  #live-text .live-manifesto {
    grid-row: 4;
    padding: 0 6.6vw;
    margin: 0 auto clamp(42px, 9vw, 62px);
    max-width: 560px;
    text-align: center;
    font-size: clamp(16px, 4vw, 20px);
    line-height: 1.68;
  }

  #live-text .live-text-right {
    grid-row: 5;
    width: auto;
    max-width: none;
    padding: 0 6.6vw;
    margin: 0;
  }

  #live-text .live-text-line {
    display: none;
  }

  #live-text .live-formats-label {
    margin-bottom: 18px;
    text-align: left;
  }

  #live-text .live-format-row {
    padding: 15px 0;
  }

  #live-text .live-format-name {
    font-size: clamp(18px, 4.8vw, 25px);
    line-height: 1.22;
  }

  #live-text .live-text-left .btn {
    grid-row: 6;
    justify-self: center;
    margin-top: clamp(40px, 9vw, 62px);
  }
}

/* ═════════════════════════════════════════════════════════
   TABLET PORTRAIT — refinement for larger portrait screens
═══════════════════════════════════════════════════════════ */

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #live-text {
    padding-top: clamp(76px, 8vw, 108px);
    padding-bottom: clamp(88px, 9vw, 124px);
  }

  #live-text .live-text-inner {
    max-width: none;
  }

  #live-text .live-title {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(54px, 6.6vw, 72px);
    margin-bottom: clamp(38px, 5vw, 58px);
  }

  #live-text .live-mobile-image {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin-bottom: clamp(42px, 5.4vw, 68px);
  }

  #live-text .live-manifesto {
    max-width: 620px;
    font-size: clamp(19px, 2.4vw, 23px);
  }

  #live-text .live-text-right {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ─── Stage G: performance/art tablet layout polish ─── */

/* ============================================================
   1. Tablet portrait: 761–1100px touch-only
   ============================================================ */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  /* #performance — tablet editorial stack */
  #performance {
    min-height: auto;
    height: auto;
    padding: clamp(82px, 8vw, 112px) var(--col-pad) clamp(88px, 9vw, 124px);
    align-items: stretch;
    justify-content: flex-start;
  }

  #performance .perf-inner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(42px, 5vw, 64px);
  }

  #performance .perf-left {
    max-width: 760px;
    padding-right: 0;
    margin: 0 auto;
    text-align: center;
  }

  #performance .perf-rule {
    margin-left: auto;
    margin-right: auto;
  }

  #performance .perf-desc {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  #performance .perf-left::after {
    margin-left: auto;
    margin-right: auto;
  }

  #performance .video-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 26px);
  }

  #performance .video-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  #performance .video-frame-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /* #art — tablet portrait hierarchy:
     заголовок/описание сверху,
     featured video на всю ширину,
     mini videos ниже в 2 колонки */
  #art {
    min-height: auto;
    height: auto;
    padding: clamp(82px, 8vw, 112px) var(--col-pad) clamp(88px, 9vw, 124px);
    align-items: stretch;
    justify-content: flex-start;
  }

  #art .art-inner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
  }

  #art .art-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 42px);
    margin-bottom: clamp(42px, 5vw, 62px);
    text-align: center;
  }

  #art .art-title-line,
  #art .art-subtitle {
    white-space: normal;
  }

  #art .art-copy {
    max-width: 720px;
    margin: 0 auto;
  }

  #art .art-copy::before {
    display: none;
  }

  #art .art-wall {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(22px, 3vw, 32px);
    width: 100%;
  }

  #art .art-featured,
  #art .art-mini {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #art .art-featured .video-frame-wrap,
  #art .art-mini .video-frame-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  #art .art-mini-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: clamp(18px, 2.4vw, 26px);
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   2. Tablet landscape: 961–1366px touch-only
   ============================================================ */
@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  /* #performance — compact split, videos get more space */
  #performance {
    min-height: 100svh;
    height: auto;
    padding: clamp(64px, 6svh, 86px) clamp(44px, 5vw, 72px);
    align-items: center;
    justify-content: center;
  }

  #performance .perf-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 30%) minmax(0, 70%);
    gap: clamp(34px, 4vw, 54px);
    align-items: center;
  }

  #performance .perf-left {
    max-width: 360px;
    padding-right: 0;
  }

  #performance .perf-title {
    font-size: clamp(42px, 4.6vw, 62px);
  }

  #performance .perf-desc {
    font-size: clamp(14px, 1.2vw, 16px);
  }

  #performance .video-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 24px);
  }

  #performance .video-card {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #performance .video-frame-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /* #art — keep featured + two mini hierarchy, but make it tablet-safe */
  #art {
    min-height: 100svh;
    height: auto;
    padding: clamp(58px, 6svh, 82px) clamp(44px, 5vw, 72px);
    justify-content: center;
  }

  #art .art-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
  }

  #art .art-header {
    grid-template-columns: minmax(0, 52%) minmax(0, 44%);
    gap: 0 4%;
    margin-bottom: clamp(30px, 4svh, 46px);
  }

  #art .art-title {
    font-size: clamp(44px, 4.5vw, 66px);
  }

  #art .art-title-line {
    white-space: nowrap;
  }

  #art .art-copy {
    max-width: 520px;
  }

  #art .art-wall {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 68%) minmax(250px, 32%);
    gap: clamp(16px, 1.8vw, 24px);
    align-items: stretch;
  }

  #art .art-featured,
  #art .art-mini {
    max-width: none;
    margin: 0;
  }
  
}

/* ─── Stage H: musicians gallery mobile/tablet polish ─── */

/* Mobile — one-column premium cards */
@media (max-width: 760px) {
  #musicians-gallery {
    min-height: auto;
    height: auto;
    align-items: stretch;
    justify-content: flex-start;
    padding: clamp(58px, 12vw, 82px) 6.4vw clamp(72px, 14vw, 96px);
    overflow: visible;
  }

  #musicians-gallery .musicians-gallery-inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(36px, 9vw, 52px);
    align-items: stretch;
  }

  #musicians-gallery .mg-card {
    min-width: 0;
    padding-top: clamp(16px, 4vw, 22px);
    border-top: 1px solid rgba(253,224,139,.12);
  }

  #musicians-gallery .mg-card:first-child {
    padding-top: 0;
    border-top: 0;
  }

  #musicians-gallery .mg-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: clamp(16px, 4vw, 22px);
    background: rgba(13,10,42,.52);
    border: 1px solid rgba(253,224,139,.12);
  }

  #musicians-gallery .mg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(.84) brightness(.88) contrast(1.02);
  }

  #musicians-gallery .mg-caption {
    padding-top: 0;
  }

  #musicians-gallery .mg-name {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.12;
    margin-bottom: 9px;
  }

  #musicians-gallery .mg-role {
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: .16em;
    margin-bottom: 12px;
  }

  #musicians-gallery .mg-desc {
    max-width: none;
    font-size: 14.5px;
    line-height: 1.66;
  }
}

/* Tablet portrait — horizontal editorial musician cards */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #musicians-gallery {
    min-height: auto;
    height: auto;
    align-items: stretch;
    justify-content: flex-start;
    padding: clamp(72px, 7vw, 104px) clamp(48px, 6vw, 72px) clamp(82px, 8vw, 116px);
    overflow: visible;
  }

  #musicians-gallery .musicians-gallery-inner {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(26px, 3.2vw, 38px);
    align-items: stretch;
  }

  #musicians-gallery .mg-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, 38%) minmax(0, 62%);
    gap: clamp(26px, 3.2vw, 42px);
    align-items: center;
    padding: clamp(18px, 2.4vw, 28px) 0;
    border-top: 1px solid rgba(253,224,139,.12);
  }

  #musicians-gallery .mg-card:first-child {
    border-top: 0;
    padding-top: 0;
  }

  #musicians-gallery .mg-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
    background: rgba(13,10,42,.52);
    border: 1px solid rgba(253,224,139,.12);
  }

  #musicians-gallery .mg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(.84) brightness(.88) contrast(1.02);
  }

  #musicians-gallery .mg-caption {
    min-width: 0;
    padding-top: 0;
  }

  #musicians-gallery .mg-name {
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.12;
    margin-bottom: 10px;
  }

  #musicians-gallery .mg-role {
    font-size: 10.5px;
    line-height: 1.45;
    letter-spacing: .17em;
    margin-bottom: 14px;
  }

  #musicians-gallery .mg-desc {
    max-width: 520px;
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.68;
  }
}

/* Tablet landscape — three balanced cards */
@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #musicians-gallery {
    min-height: 100svh;
    height: auto;
    align-items: center;
    justify-content: center;
    padding: clamp(58px, 6svh, 82px) clamp(42px, 5vw, 72px);
    overflow: hidden;
  }

  #musicians-gallery .musicians-gallery-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
    align-items: start;
  }

  #musicians-gallery .mg-card {
    min-width: 0;
  }

  #musicians-gallery .mg-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: clamp(16px, 1.8vw, 22px);
    background: rgba(13,10,42,.52);
    border: 1px solid rgba(253,224,139,.12);
  }

  #musicians-gallery .mg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: saturate(.84) brightness(.88) contrast(1.02);
  }

  #musicians-gallery .mg-name {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.14;
  }

  #musicians-gallery .mg-role {
    font-size: 10px;
    line-height: 1.42;
    letter-spacing: .15em;
  }

  #musicians-gallery .mg-desc {
    max-width: none;
    font-size: clamp(13.5px, 1.1vw, 15.5px);
    line-height: 1.62;
  }
}

/* ─── Stage H2: musicians gallery tablet portrait editorial frames ─── */

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #musicians-gallery .mg-card {
    position: relative;
    grid-template-columns: minmax(230px, 36%) minmax(0, 64%);
    gap: 0;
    align-items: stretch;
    padding: 0;
    overflow: hidden;

    border: 1px solid rgba(253,224,139,.13);
    background:
      linear-gradient(
        135deg,
        rgba(253,224,139,.032) 0%,
        rgba(253,224,139,.010) 36%,
        rgba(13,10,42,.22) 100%
      );
    box-shadow:
      0 24px 70px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(253,224,139,.055);
  }

  #musicians-gallery .mg-card:first-child {
    border-top: 1px solid rgba(253,224,139,.13);
  }

  #musicians-gallery .mg-photo {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
    margin-bottom: 0;
    border: 0;
    border-right: 1px solid rgba(253,224,139,.16);
    background: rgba(13,10,42,.52);
  }

  #musicians-gallery .mg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }

  #musicians-gallery .mg-caption {
    position: relative;
    min-width: 0;
    min-height: 300px;
    padding: clamp(30px, 4vw, 44px) clamp(36px, 5vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
      linear-gradient(
        90deg,
        rgba(253,224,139,.038) 0%,
        rgba(253,224,139,.016) 44%,
        rgba(253,224,139,.004) 100%
      );
  }

  /* Тонкая внутренняя нить — вместо декоративных номеров */
  #musicians-gallery .mg-caption::before {
    content: "";
    position: absolute;
    top: clamp(30px, 3.6vw, 44px);
    bottom: clamp(30px, 3.6vw, 44px);
    left: clamp(18px, 2.4vw, 28px);
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(253,224,139,.30) 18%,
      rgba(253,224,139,.10) 72%,
      transparent 100%
    );
  }

  /* Важно: никаких номеров 01/02/03 */
  #musicians-gallery .mg-card::after {
    content: none;
    display: none;
  }

  #musicians-gallery .mg-name,
  #musicians-gallery .mg-role,
  #musicians-gallery .mg-desc {
    position: relative;
    z-index: 1;
  }

  #musicians-gallery .mg-name {
    max-width: 520px;
    margin-bottom: 11px;
  }

  #musicians-gallery .mg-role {
    max-width: 520px;
    margin-bottom: 16px;
  }

  #musicians-gallery .mg-desc {
    max-width: 560px;
  }
}

/* ─── Stage I: reviews carousel mobile/tablet one-slide polish ─── */

/* Mobile — only one photo visible */
@media (max-width: 760px) {
  #reviews {
    min-height: auto;
    height: auto;
    padding-top: clamp(72px, 10vh, 104px);
    padding-bottom: clamp(72px, 10vh, 104px);
  }

  #reviews .photo-carousel-wrap {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: transparent;
  }

  #reviews .photo-carousel {
    display: flex;
    gap: 2px;
    will-change: transform;
  }

  #reviews .photo-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: clamp(360px, 58svh, 540px);
    overflow: hidden;
    background: rgba(5, 8, 22, .88);
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  #reviews .photo-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    object-position: top center;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  #reviews .carousel-btn {
    width: 40px;
    height: 40px;
  }

  #reviews .carousel-btn.prev {
    left: 10px;
  }

  #reviews .carousel-btn.next {
    right: 10px;
  }
}

/* Tablet portrait — one large photo */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #reviews {
    min-height: auto;
    height: auto;
    padding-top: clamp(82px, 8vw, 112px);
    padding-bottom: clamp(88px, 9vw, 124px);
  }

  #reviews .photo-carousel-wrap {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: transparent;
  }

  #reviews .photo-carousel {
    display: flex;
    gap: 2px;
    will-change: transform;
  }

  #reviews .photo-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: clamp(520px, 62svh, 760px);
    overflow: hidden;
    background: rgba(5, 8, 22, .88);
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  #reviews .photo-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    object-position: top center;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* Tablet landscape — one balanced photo */
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  #reviews {
    min-height: auto;
    height: auto;
    padding-top: clamp(72px, 7svh, 96px);
    padding-bottom: clamp(72px, 7svh, 96px);
  }

  #reviews .photo-carousel-wrap {
    width: min(84vw, 980px);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: transparent;
  }

  #reviews .photo-carousel {
    display: flex;
    gap: 2px;
    will-change: transform;
  }

  #reviews .photo-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: clamp(430px, 62svh, 620px);
    overflow: hidden;
    background: rgba(5, 8, 22, .88);
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  #reviews .photo-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    object-position: top center;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* ─── Stage J: reviews text cards tablet editorial polish — desktop identity ─── */

/* Tablet portrait: same desktop identity, but 2 editorial columns */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #reviews .review-cards {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(30px, 3.6vw, 44px);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(42px, 6vw, 58px);
    row-gap: clamp(34px, 4.8vw, 48px);
    align-items: start;

    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #reviews .review-card {
    position: relative;
    padding-left: 22px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;

    min-height: auto;
    overflow: visible;

    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #reviews .review-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 1px;
    height: calc(100% - 4px);
    background: linear-gradient(
      to bottom,
      rgba(253,224,139,.46) 0%,
      rgba(253,224,139,.20) 55%,
      rgba(253,224,139,0) 100%
    );
  }

  #reviews .review-card::after {
    display: none;
  }

  #reviews .review-card-deco {
    position: static;
    display: block;
    margin: 0 0 8px;
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 28px;
    line-height: 1;
    color: rgba(253,224,139,.10);
    user-select: none;
    pointer-events: none;
  }

  #reviews .review-card-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-b);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(15px, 1.75vw, 17px);
    line-height: 1.72;
    letter-spacing: .01em;
    color: rgba(237,233,224,.66);
  }

  #reviews .review-card:hover {
    transform: none;
  }

  #reviews .review-card:hover::before {
    background: linear-gradient(
      to bottom,
      rgba(253,224,139,.60) 0%,
      rgba(253,224,139,.28) 55%,
      rgba(253,224,139,0) 100%
    );
  }

  #reviews .review-card:hover .review-card-deco {
    color: rgba(253,224,139,.20);
  }

  #reviews .review-card:hover .review-card-text {
    color: rgba(237,233,224,.78);
  }
}

/* Small tablet landscape: keep desktop identity, use 2 readable columns */
@media (min-width: 761px) and (max-width: 1099px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #reviews .review-cards {
    width: min(84vw, 900px);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(24px, 3svh, 36px);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(42px, 5vw, 56px);
    row-gap: clamp(28px, 4svh, 40px);
    align-items: start;

    background: transparent;
    border: 0;
    box-shadow: none;
  }

  #reviews .review-card {
    position: relative;
    padding-left: 22px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;

    min-height: auto;
    overflow: visible;

    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #reviews .review-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 1px;
    height: calc(100% - 4px);
    background: linear-gradient(
      to bottom,
      rgba(253,224,139,.42) 0%,
      rgba(253,224,139,.18) 55%,
      rgba(253,224,139,0) 100%
    );
  }

  #reviews .review-card::after {
    display: none;
  }

  #reviews .review-card-deco {
    position: static;
    display: block;
    margin: 0 0 8px;
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 26px;
    line-height: 1;
    color: rgba(253,224,139,.10);
    user-select: none;
    pointer-events: none;
  }

  #reviews .review-card-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-b);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14.5px, 1.35vw, 16px);
    line-height: 1.68;
    letter-spacing: .01em;
    color: rgba(237,233,224,.64);
  }

  #reviews .review-card:hover {
    transform: none;
  }
}

/* Large tablet landscape: closer to desktop 4-column editorial layout */
@media (min-width: 1100px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #reviews .review-cards {
    width: min(86vw, 1060px);
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(24px, 3svh, 36px);

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 40px);
    row-gap: 0;
    align-items: start;

    background: transparent;
    border: 0;
    box-shadow: none;
  }

  #reviews .review-card {
    position: relative;
    padding-left: 20px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;

    min-height: auto;
    overflow: visible;

    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #reviews .review-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 1px;
    height: calc(100% - 4px);
    background: linear-gradient(
      to bottom,
      rgba(253,224,139,.42) 0%,
      rgba(253,224,139,.18) 55%,
      rgba(253,224,139,0) 100%
    );
  }

  #reviews .review-card::after {
    display: none;
  }

  #reviews .review-card-deco {
    position: static;
    display: block;
    margin: 0 0 8px;
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 26px;
    line-height: 1;
    color: rgba(253,224,139,.10);
    user-select: none;
    pointer-events: none;
  }

  #reviews .review-card-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-b);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.68;
    letter-spacing: .01em;
    color: rgba(237,233,224,.64);
  }

  #reviews .review-card:hover {
    transform: none;
  }
}

/*
  Motion-aware tablet landscape corrections.
  Some sections are intentionally spacious because they will be part of depth transitions.
  Do not treat all vertical space as a bug.
  Scroll groups require consistent grid width.
*/


/* ─── Stage K: screen 15 quote tablet/mobile stable centering ─── */

@media (max-width: 1100px) {

  #malea-quote-screen {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;

    display: grid;
    place-items: center;

    padding: clamp(88px, 12svh, 132px) var(--col-pad);
    overflow: visible;
    text-align: center;
  }

  #malea-quote-screen .mq-inner {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;

    width: min(820px, 100%);
    max-width: 100%;
    margin: 0 auto;

    transform: none;

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

  #malea-quote-screen .mq-text {
    max-width: 820px;
    margin: clamp(32px, 4svh, 42px) 0;
    font-size: clamp(34px, 5.4vw, 52px);
    line-height: 1.36;
    text-wrap: balance;
  }

  #malea-quote-screen .mq-rule {
    width: 48px;
    flex-shrink: 0;
  }

  #malea-quote-screen .mq-author {
    margin-top: clamp(22px, 3svh, 28px);
  }
}

/* Tablet portrait — slightly calmer quote scale */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {

  #malea-quote-screen {
    padding-left: clamp(56px, 8vw, 92px);
    padding-right: clamp(56px, 8vw, 92px);
  }

  #malea-quote-screen .mq-text {
    font-size: clamp(40px, 5.6vw, 58px);
    line-height: 1.34;
  }
}

/* Tablet landscape — keep quote centered and not too high */
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #malea-quote-screen {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(72px, 10svh, 108px);
    padding-bottom: clamp(72px, 10svh, 108px);
  }

  #malea-quote-screen .mq-inner {
    width: min(760px, 78vw);
  }

  #malea-quote-screen .mq-text {
    font-size: clamp(34px, 4.2vw, 50px);
    line-height: 1.34;
    margin-top: clamp(26px, 4svh, 36px);
    margin-bottom: clamp(26px, 4svh, 36px);
  }
}

/* Mobile — prevent clipping and over-wide quote lines */
@media (max-width: 760px) {

  #malea-quote-screen {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(86px, 13svh, 118px);
    padding-bottom: clamp(82px, 12svh, 112px);
    padding-left: clamp(22px, 7vw, 34px);
    padding-right: clamp(22px, 7vw, 34px);
    overflow: visible;
  }

  #malea-quote-screen .mq-inner {
    width: 100%;
    max-width: 420px;
  }

  #malea-quote-screen .mq-text {
    font-size: clamp(30px, 8.2vw, 40px);
    line-height: 1.32;
    margin: 30px 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  #malea-quote-screen .mq-author {
    font-size: 12px;
    letter-spacing: .18em;
  }
}

/* ─── Stage L update: why mobile/tablet portrait order image -> title -> text ─── */

/* Mobile: image first, title below image */
@media (max-width: 760px) {

  #why-image.why-image-screen {
    display: none;
  }

  #why-argument.why-argument-sheet {
    min-height: auto;
    height: auto;
    overflow: visible;
    padding-top: clamp(78px, 11svh, 104px);
    padding-bottom: clamp(82px, 12svh, 112px);
    background:
      radial-gradient(ellipse 55% 45% at 18% 40%, rgba(253,224,139,.04) 0%, transparent 65%),
      radial-gradient(ellipse 45% 55% at 82% 26%, rgba(142,111,255,.05) 0%, transparent 60%),
      linear-gradient(180deg, #071426 0%, #0A1028 48%, #071426 100%);
  }

  #why-argument .why-argument-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  #why-argument .why-argument-mobile-image {
    order: 1;
    display: block;

    width: calc(100% + (var(--col-pad) * 2));
    max-width: none;
    margin-left: calc(var(--col-pad) * -1);
    margin-right: calc(var(--col-pad) * -1);

    margin-top: 0;
    margin-bottom: clamp(34px, 8vw, 48px);

    position: relative;
    overflow: hidden;
    background: #071426;
  }

  #why-argument .why-argument-mobile-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(7,20,38,.12) 0%, transparent 28%, transparent 74%, rgba(7,20,38,.30) 100%);
  }

  #why-argument .why-argument-mobile-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.86) brightness(.86);
    transform: none;
  }

  #why-argument .why-argument-header {
    order: 2;
    margin-top: 0;
    margin-bottom: clamp(36px, 8vw, 52px);
    text-align: center;
  }

  #why-argument .why-argument-subtitle {
    font-size: clamp(34px, 9.4vw, 46px);
    line-height: 1.08;
    letter-spacing: .035em;
  }

  #why-argument .why-argument-list {
    order: 3;
    grid-template-columns: 1fr;
    gap: 0;
  }

  #why-argument .why-cta {
    order: 4;
  }
}

/* Tablet portrait: full-bleed image first, title below image */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #why-image.why-image-screen {
    display: none;
  }

  #why-argument.why-argument-sheet {
    min-height: auto;
    height: auto;
    overflow: visible;
    padding-top: clamp(96px, 10svh, 132px);
    padding-bottom: clamp(96px, 10svh, 132px);
  }

  #why-argument .why-argument-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  #why-argument .why-argument-mobile-image {
    order: 1;
    display: block;

    /*
      Full-bleed на всю ширину экрана:
      изображение выходит за пределы текстового контейнера.
    */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    margin-top: 0;
    margin-bottom: clamp(44px, 5.8vw, 68px);

    position: relative;
    overflow: hidden;
    background: #071426;
  }

  #why-argument .why-argument-mobile-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 84% 72% at 50% 50%, transparent 46%, rgba(7,20,38,.30) 100%),
      linear-gradient(to bottom, rgba(7,20,38,.10) 0%, transparent 28%, transparent 76%, rgba(7,20,38,.26) 100%);
  }

  #why-argument .why-argument-mobile-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.86) brightness(.86);
    transform: none;
  }

  #why-argument .why-argument-header {
    order: 2;
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: clamp(42px, 5.2vw, 64px);
    text-align: center;
  }

  #why-argument .why-argument-subtitle {
    font-size: clamp(42px, 5.4vw, 60px);
    line-height: 1.1;
  }

  #why-argument .why-argument-list {
    order: 3;
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  #why-argument .why-cta {
    order: 4;
  }
}

/* ─── Stage M: live-image + live-text tablet landscape merge ─── */
/*
  Tablet landscape: screen 05 is no longer a separate fullscreen cover.
  The image becomes the first element inside screen 06.
  Uses embedded .live-mobile-image with width: 100vw, height: auto, object-fit: contain.
  No cropping, no absolute/fixed hacks.
*/
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #live-image {
    display: none;
  }

  #live-text {
    min-height: auto;
    height: auto;
    padding: 0 0 clamp(68px, 8svh, 96px);
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    background:
      radial-gradient(ellipse 58% 52% at 76% 44%, rgba(86,178,205,.055) 0%, transparent 66%),
      linear-gradient(180deg, #071426 0%, #0A1028 52%, #071426 100%);
    overflow: visible;
  }

  #live-text .live-text-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible;
  }

  /*
    Pull children of left column into the main grid
    so image can be first, then title/text/button.
  */
  #live-text .live-text-left {
    display: contents;
    padding: 0;
  }

  /*
    Image first.
    Full viewport width.
    Natural height.
    No cropping.
  */
  #live-text .live-mobile-image {
    grid-row: 1;
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 0 clamp(34px, 5svh, 52px);
    padding: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background: #071426;
  }

  #live-text .live-mobile-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(7,20,38,.10) 0%,
        transparent 24%,
        transparent 74%,
        rgba(7,20,38,.28) 100%
      );
  }

  #live-text .live-mobile-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.86) brightness(.82) contrast(1.02);
    transform: none;
  }

  /*
    Title below image.
  */
  #live-text .live-title {
    grid-row: 2;
    width: min(860px, 86vw);
    max-width: 860px;
    margin: 0 auto clamp(24px, 3.6svh, 34px);
    padding: 0;
    text-align: center;
    font-size: clamp(42px, 5.2vw, 62px);
    line-height: 1.08;
    letter-spacing: .04em;
  }

  #live-text .live-title-rule {
    grid-row: 3;
    width: 42px;
    height: 1px;
    margin: 0 auto clamp(20px, 3svh, 28px);
    background: rgba(253,224,139,.42);
  }

  #live-text .live-manifesto {
    grid-row: 4;
    width: min(760px, 78vw);
    max-width: 760px;
    margin: 0 auto clamp(30px, 4.6svh, 44px);
    text-align: center;
    font-size: clamp(16px, 1.55vw, 19px);
    line-height: 1.72;
  }

  #live-text .btn {
    grid-row: 6;
    justify-self: center;
    margin-top: clamp(28px, 4svh, 42px);
  }

  #live-text .live-text-line {
    display: none;
  }

  #live-text .live-text-right {
    grid-row: 5;
    width: min(760px, 78vw);
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  #live-text .live-formats-label {
    text-align: center;
    margin-bottom: clamp(16px, 2.4svh, 22px);
  }

  #live-text .live-format-row {
    padding: clamp(12px, 1.8svh, 16px) 0;
  }

  #live-text .live-format-name {
    font-size: clamp(19px, 2.2vw, 26px);
  }
}

/* Small mobile — extra safe vertical rhythm */
@media (max-width: 520px) {

  #malea-quote-screen {
    padding-top: clamp(78px, 12svh, 104px);
    padding-bottom: clamp(78px, 12svh, 104px);
  }

  #malea-quote-screen .mq-text {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.3;
    margin: 28px 0;
  }

  #malea-quote-screen .mq-rule {
    width: 42px;
  }
}

/* ─── Stage N2: screen 24 portfolio responsive redesign ─── */
/*
  Strategy:
  - Desktop / laptop hover-fine: keep original premium 46/54 split.
  - Tablet landscape touch: editorial split, like screen 3 logic.
  - Tablet portrait/mobile: image first, then title/subtitle.
*/

/* Safety: true desktop/laptop keeps split */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {

  #portfolio.portfolio-hero {
    min-height: 100vh;
    height: auto;
    padding: 0;
    overflow: hidden;
  }

  #portfolio .portfolio-hero-inner {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: stretch;
    gap: 0;
  }

  #portfolio .portfolio-hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 56px 80px var(--col-pad);
    text-align: left;
  }

  #portfolio .portfolio-title {
    max-width: 620px;
    margin: 0;
    font-size: var(--f-section);
    line-height: 1.12;
    letter-spacing: .04em;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 520px;
    margin-top: 20px;
    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    margin: 30px 0 0;
  }

  #portfolio .portfolio-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.82) brightness(.84);
    transform: none;
  }
}


/* Tablet landscape: premium editorial split, not title+banner */
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #portfolio.portfolio-hero {
    min-height: 100svh;
    height: auto;
    padding: 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse 58% 54% at 82% 42%, rgba(86,178,205,.055) 0%, transparent 66%),
      linear-gradient(180deg, #071426 0%, #0A1028 100%);
  }

  #portfolio .portfolio-hero-inner {
    width: 100%;
    min-height: 100svh;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    align-items: stretch;
    gap: 0;
  }

  #portfolio .portfolio-hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
      clamp(72px, 9svh, 104px)
      clamp(34px, 4.4vw, 56px)
      clamp(64px, 8svh, 96px)
      var(--col-pad);
    text-align: left;
  }

  #portfolio .portfolio-title {
    max-width: 520px;
    margin: 0;
    font-size: clamp(38px, 4.6vw, 58px);
    line-height: 1.08;
    letter-spacing: .04em;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 420px;
    margin-top: clamp(18px, 2.4svh, 24px);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .22em;
    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 50px;
    margin: clamp(24px, 3.2svh, 32px) 0 0;
  }

  #portfolio .portfolio-image {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
    background: #071426;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.84) brightness(.84) contrast(1.02);
    transform: none;
  }

  #portfolio .portfolio-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        rgba(7,20,38,.58) 0%,
        rgba(7,20,38,.28) 22%,
        transparent 54%
      ),
      linear-gradient(
        180deg,
        rgba(5,8,22,.16) 0%,
        transparent 42%,
        rgba(5,8,22,.22) 100%
      );
  }
}


/* Tablet portrait: image first, then title */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #portfolio.portfolio-hero {
    min-height: auto;
    height: auto;
    padding: 0 0 clamp(88px, 9svh, 124px);
    overflow: visible;
    background:
      radial-gradient(ellipse 62% 42% at 50% 18%, rgba(86,178,205,.045) 0%, transparent 68%),
      linear-gradient(180deg, #071426 0%, #0A1028 100%);
  }

  #portfolio .portfolio-hero-inner {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #portfolio .portfolio-image {
    order: 1;
    width: 100vw;
    max-width: none;
    height: auto;
    min-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
    background: #071426;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.86) brightness(.84) contrast(1.02);
    transform: none;
  }

  #portfolio .portfolio-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(7,20,38,.08) 0%,
        transparent 30%,
        transparent 76%,
        rgba(7,20,38,.28) 100%
      );
  }

  #portfolio .portfolio-hero-copy {
    order: 2;
    width: min(760px, 100%);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding:
      clamp(48px, 6svh, 72px)
      clamp(56px, 8vw, 92px)
      0;
    text-align: center;
  }

  #portfolio .portfolio-title {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(42px, 5.6vw, 60px);
    line-height: 1.1;
    letter-spacing: .04em;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 100%;
    margin-top: clamp(20px, 2.8vw, 28px);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .22em;
    text-align: center;
  }

  #portfolio .portfolio-rule {
    width: 50px;
    margin: clamp(26px, 3.6vw, 36px) auto 0;
  }
}


/* Mobile: image first, then compact title */
@media (max-width: 760px) {

  #portfolio.portfolio-hero {
    min-height: auto;
    height: auto;
    padding: 0 0 clamp(72px, 11svh, 96px);
    overflow: visible;
    background:
      radial-gradient(ellipse 58% 42% at 50% 12%, rgba(86,178,205,.045) 0%, transparent 68%),
      linear-gradient(180deg, #071426 0%, #0A1028 100%);
  }

  #portfolio .portfolio-hero-inner {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #portfolio .portfolio-image {
    order: 1;
    width: 100vw;
    max-width: none;
    height: auto;
    min-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
    background: #071426;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(.86) brightness(.84) contrast(1.02);
    transform: none;
  }

  #portfolio .portfolio-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(7,20,38,.04) 0%,
        transparent 32%,
        transparent 76%,
        rgba(7,20,38,.30) 100%
      );
  }

  #portfolio .portfolio-hero-copy {
    order: 2;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    padding:
      clamp(38px, 8vw, 52px)
      var(--col-pad)
      0;
    text-align: left;
  }

  #portfolio .portfolio-title {
    max-width: 100%;
    margin: 0;
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.1;
    letter-spacing: .035em;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 100%;
    margin-top: clamp(18px, 4.4vw, 24px);
    font-size: 10.5px;
    line-height: 1.55;
    letter-spacing: .18em;
    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 42px;
    margin-top: clamp(22px, 5vw, 30px);
  }
}


/* Small mobile: keep rhythm compact */
@media (max-width: 520px) {

  #portfolio .portfolio-hero-copy {
    padding-top: clamp(34px, 8vw, 46px);
  }

  #portfolio .portfolio-title {
    font-size: clamp(31px, 8.8vw, 39px);
    line-height: 1.12;
  }
}


/* ─── Stage O: screen 27 final-experience mobile/tablet portrait order ─── */
/*
  Mobile/tablet portrait order:
  title -> rule -> image -> text -> button.
  Desktop and tablet landscape stay unchanged.
*/

/* Mobile */
@media (max-width: 760px) {

  #final-experience.final-experience {
    min-height: auto;
    height: auto;
    padding: 0 0 clamp(72px, 11svh, 96px);
    overflow: visible;
    align-items: stretch;
    background:
      radial-gradient(ellipse 52% 42% at 50% 12%, rgba(253,224,139,.045) 0%, transparent 68%),
      radial-gradient(ellipse 42% 52% at 82% 62%, rgba(86,178,205,.045) 0%, transparent 70%),
      linear-gradient(180deg, #0D0A2A 0%, #071426 100%);
  }

  #final-experience .final-experience-inner {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /*
    Let children of .final-experience-copy become layout items
    of .final-experience-inner without changing HTML.
  */
  #final-experience .final-experience-copy {
    display: contents;
    padding: 0;
  }

  #final-experience .final-experience-title {
    order: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding:
      clamp(82px, 12svh, 112px)
      var(--col-pad)
      0;

    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.1;
    letter-spacing: .035em;
    text-align: left;
  }

  #final-experience .final-experience-rule {
    order: 2;
    width: 42px;
    height: 1px;
    margin:
      clamp(22px, 5vw, 30px)
      auto
      clamp(34px, 8vw, 48px);
    background: rgba(253,224,139,.40);
  }

  #final-experience .final-experience-image {
    order: 3;
    width: 100vw;
    max-width: none;
    height: auto;
    min-height: 0;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: clamp(38px, 8.5vw, 54px);

    position: relative;
    overflow: hidden;
    background: #071426;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;

    object-fit: contain;
    object-position: center center;

    filter: saturate(.86) brightness(.84) contrast(1.02);
    transform: none;
  }

  #final-experience .final-experience-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(7,20,38,.06) 0%,
        transparent 32%,
        transparent 74%,
        rgba(7,20,38,.30) 100%
      );
  }

  #final-experience .final-experience-text {
    order: 4;
    width: 100%;
    max-width: 520px;
    margin:
      0
      auto
      clamp(34px, 8vw, 46px);
    padding: 0 var(--col-pad);

    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #final-experience .final-experience-text p {
    font-size: 15px;
    line-height: 1.68;
    letter-spacing: .01em;
    color: rgba(237,233,224,.68);
  }

  #final-experience .final-experience-btn {
    order: 5;
    align-self: center;
    margin: 0 auto;
  }
}


/* Tablet portrait */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #final-experience.final-experience {
    min-height: auto;
    height: auto;
    padding: 0 0 clamp(90px, 9svh, 128px);
    overflow: visible;
    align-items: stretch;
    background:
      radial-gradient(ellipse 54% 42% at 50% 14%, rgba(253,224,139,.045) 0%, transparent 68%),
      radial-gradient(ellipse 42% 54% at 84% 62%, rgba(86,178,205,.045) 0%, transparent 70%),
      linear-gradient(180deg, #0D0A2A 0%, #071426 100%);
  }

  #final-experience .final-experience-inner {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /*
    Let title/rule/text/button participate in the same column
    as the image without changing HTML.
  */
  #final-experience .final-experience-copy {
    display: contents;
    padding: 0;
  }

  #final-experience .final-experience-title {
    order: 1;
    width: min(760px, 100%);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding:
      clamp(104px, 10svh, 142px)
      clamp(56px, 8vw, 92px)
      0;

    font-size: clamp(42px, 5.6vw, 60px);
    line-height: 1.1;
    letter-spacing: .04em;
    text-align: center;
  }

  #final-experience .final-experience-rule {
    order: 2;
    width: 50px;
    height: 1px;
    margin:
      clamp(26px, 3.6vw, 36px)
      auto
      clamp(44px, 5.4vw, 64px);
    background: rgba(253,224,139,.42);
  }

  #final-experience .final-experience-image {
    order: 3;
    width: 100vw;
    max-width: none;
    height: auto;
    min-height: 0;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: clamp(52px, 6vw, 72px);

    position: relative;
    overflow: hidden;
    background: #071426;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;

    object-fit: contain;
    object-position: center center;

    filter: saturate(.86) brightness(.84) contrast(1.02);
    transform: none;
  }

  #final-experience .final-experience-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 84% 70% at 50% 50%,
        transparent 44%,
        rgba(7,20,38,.22) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(7,20,38,.08) 0%,
        transparent 30%,
        transparent 76%,
        rgba(7,20,38,.26) 100%
      );
  }

  #final-experience .final-experience-text {
    order: 4;
    width: min(680px, 100%);
    max-width: 680px;
    margin:
      0
      auto
      clamp(40px, 5vw, 56px);
    padding: 0 clamp(56px, 8vw, 92px);

    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  #final-experience .final-experience-text p {
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.72;
    color: rgba(237,233,224,.70);
  }

  #final-experience .final-experience-btn {
    order: 5;
    align-self: center;
    margin: 0 auto;
  }
}


/* ─── Stage P3: screen 27 image aspect-ratio frame + focal crop ─── */
/*
  Goal:
  make the image visually lower/cleaner without changing its scale
  and without cropping horizontal edges.

  Instead of svh-based height, use aspect-ratio frames.
  The image remains width:100%; height:auto.
*/

/* Desktop / laptop: keep split, but reduce visual height of right image */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {

  #final-experience .final-experience-image {
    align-self: center;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;

    aspect-ratio: 4 / 5;

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

    overflow: hidden;

    --fe-img-y: 7px;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    flex-shrink: 0;

    object-fit: initial;
    object-position: center center;

    transform: translateY(var(--fe-img-y));
    will-change: transform;
  }
}


/* Tablet landscape: controlled split image frame */
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #final-experience .final-experience-image {
    align-self: center;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;

    aspect-ratio: 4 / 5;

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

    overflow: hidden;

    --fe-img-y: -4%;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    flex-shrink: 0;

    object-fit: initial;
    object-position: center center;

    transform: translateY(var(--fe-img-y));
    will-change: transform;
  }
}


/* Tablet portrait: wide cinematic frame under title */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {

  #final-experience .final-experience-image {
    width: 100vw;
    max-width: none;

    height: auto;
    min-height: 0;
    max-height: none;

    /*
      Key fix:
      predictable wide frame instead of unstable svh-height.
      This makes the image shorter and more cinematic.
    */
    aspect-ratio: 16 / 9;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

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

    overflow: hidden;

    /*
      Slight upward focal shift:
      removes excessive empty top space.
      Does not scale the image.
    */
    --fe-img-y: -5%;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    flex-shrink: 0;

    object-fit: initial;
    object-position: center center;

    transform: translateY(var(--fe-img-y));
    will-change: transform;
  }
}


/* Mobile: slightly taller than tablet portrait, but still controlled */
@media (max-width: 760px) {

  #final-experience .final-experience-image {
    width: 100vw;
    max-width: none;

    height: auto;
    min-height: 0;
    max-height: none;

    /*
      Mobile needs a little more height than 16:9,
      otherwise the image becomes too much like a banner.
    */
    aspect-ratio: 16 / 10;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

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

    overflow: hidden;

    --fe-img-y: -5%;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    flex-shrink: 0;

    object-fit: initial;
    object-position: center center;

    transform: translateY(var(--fe-img-y));
    will-change: transform;
  }
}


/* Small mobile: keep a more portrait-friendly frame */
@media (max-width: 520px) {

  #final-experience .final-experience-image {
    aspect-ratio: 4 / 3;
    --fe-img-y: -5%;
  }
}


/* ─── Desktop control polish: minor issues after audit ─── */

/* Screen 02 · hero + Screen 08 · player + Screen 12 · musicians-gallery — short desktop (1366×768 etc.) */
@media (min-width: 961px) and (max-height: 820px) and (hover: hover) and (pointer: fine) {

  #hero .hero-inner {
    padding-top: clamp(88px, 12vh, 108px);
    padding-bottom: clamp(64px, 8vh, 86px);
  }
  #hero .overline { margin-bottom: 18px; }
  #hero .hero-name { margin-bottom: 24px; }
  #hero .hero-divider { margin-bottom: 20px; }
  #hero .hero-tagline { margin-bottom: 34px; line-height: 1.68; }

  #player {
    padding-top: clamp(64px, 8vh, 82px);
    padding-bottom: clamp(64px, 8vh, 82px);
  }
  #player .player-header { margin-bottom: clamp(34px, 5vh, 48px); }
  #player .track-col {
    padding-top: clamp(28px, 4vh, 34px);
    padding-bottom: clamp(26px, 4vh, 32px);
  }

  #musicians-gallery .mg-photo { max-height: 38vh; }
  #musicians-gallery .mg-photo img { object-fit: cover; object-position: center center; }
}

/* Screen 14 · reviews + Screen 25 · portfolio-map — medium-width desktop (≤1440px) */
@media (min-width: 961px) and (max-width: 1440px) and (hover: hover) and (pointer: fine) {

  #reviews .review-cards { column-gap: clamp(30px, 3vw, 42px); }
  #reviews .review-card { padding-left: 18px; }
  #reviews .review-card-text { font-size: clamp(14px, 1.04vw, 15.5px); line-height: 1.62; }

  #portfolio-map .pm-event-name,
  #portfolio-map .pm-partner-name,
  #portfolio-map .pm-upcoming-name {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.18;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  #portfolio-map .pm-event-type,
  #portfolio-map .pm-partner-role,
  #portfolio-map .pm-upcoming-ctx {
    font-size: clamp(10px, 0.7vw, 11.5px);
  }
  #portfolio-map .pm-grid { column-gap: 20px; }
}

/* Screen 26 · portfolio-quote — remove translateY risk on all desktop */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  #portfolio-quote {
    min-height: 100vh;
    height: auto;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  #portfolio-quote .portfolio-quote-inner {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
  }
}

/* ─── Tablet landscape V3: real centered wide rail ─── */
/*
  Goal:
  real visible change for tablet landscape.
  Previous rail repair was almost equal to 90vw and therefore did not change layout.
  This block replaces old tablet landscape control/rail passes.

  ——————————————————————————————————————————————————————————————
  KEY DIFFERENCE FROM OLD RAIL REPAIR:
  
  Old rail repair computed:
    --tl-rail: min(calc(100vw - var(--tl-pad) - var(--tl-pad)), 1160px)
    where --tl-pad ≈ 5vw → rail ≈ 100vw - 5vw - 5vw = 90vw
  
  New rail V3:
    --tl-rail: min(94vw, 1240px)
    Real width: at 1024px → 962px (vs old 922px)
                 at 1180px → 1109px (vs old 1062px)
                 at 1366px → 1240px (vs old 1160px)
  ——————————————————————————————————————————————————————————————
*/

@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  :root {
    --tl-rail: min(94vw, 1240px);
    --tl-rail-soft: min(92vw, 1180px);
  }

  /*
    Reset horizontal section padding for target sections.
    The rail itself owns the width and centering.
  */
  #philosophy,
  #player,
  #performance,
  #art,
  #egypt-case,
  #formats-list,
  #formats-integration,
  #why-argument,
  #portfolio,
  #portfolio-map,
  #portfolio-quote,
  #reviews {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
    Main centered rail.
    Real width is now 94vw, not mathematically equivalent to 90vw.
  */
  #philosophy .philosophy-inner,
  #player .player-header,
  #player .track-grid,
  #performance .perf-inner,
  #art .art-inner,
  #egypt-case .egypt-inner,
  #formats-list .formats-list-inner,
  #why-argument .why-argument-inner,
  #portfolio-map .pm-grid,
  #portfolio-quote .portfolio-quote-inner,
  #reviews .reviews-inner,
  #reviews .photo-carousel-wrap,
  #reviews .review-cards {
    width: var(--tl-rail) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
    Screen 20 has several separate inner rows.
    They must share one centered axis.
  */
  #formats-integration .fi-header,
  #formats-integration .fi-panels,
  #formats-integration .fi-cta {
    width: var(--tl-rail) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Screen 04 / #philosophy — grid by top rail ── */
  #philosophy {
    min-height: 100svh;
    align-items: center;
    justify-content: center;
  }

  #philosophy .philosophy-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
    align-items: center;
    gap: clamp(30px, 3.6vw, 48px);
  }

  #philosophy .philosophy-left,
  #philosophy .philosophy-right {
    min-width: 0;
  }

  #philosophy .philosophy-left {
    padding-right: 0;
  }

  #philosophy .philosophy-title {
    max-width: 460px;
    font-size: clamp(42px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: .035em;
  }

  #philosophy .philosophy-body {
    max-width: 540px;
    font-size: clamp(14.5px, 1.25vw, 16px);
    line-height: 1.7;
  }

  /* ── Screen 17 / #egypt-case ── */
  #egypt-case {
    min-height: 100svh;
    padding-top: clamp(58px, 7svh, 78px);
    padding-bottom: clamp(58px, 7svh, 78px);
  }

  #egypt-case .egypt-inner {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    gap: clamp(36px, 4vw, 58px);
    align-items: center;
  }

  #egypt-case .egypt-video {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  #egypt-case .egypt-copy {
    max-width: 440px;
    min-width: 0;
  }

  /* ── Screen 19 / #formats-list ── */
  #formats-list {
    min-height: 100svh;
    padding-top: clamp(58px, 7svh, 78px);
    padding-bottom: clamp(58px, 7svh, 78px);
  }

  #formats-list .formats-list-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #formats-list .format-line-media {
    max-width: none;
  }

  /* ── Screen 20 / #formats-integration ── */
  #formats-integration {
    min-height: 100svh;
    padding-top: clamp(58px, 7svh, 78px);
    padding-bottom: clamp(58px, 7svh, 78px);
  }

  #formats-integration .fi-heading {
    max-width: 760px;
  }

  #formats-integration .fi-desc {
    max-width: 400px;
  }

  /* ── Screen 23 / #why-argument ── */
  #why-argument {
    min-height: 100svh;
    padding-top: clamp(58px, 7svh, 78px);
    padding-bottom: clamp(58px, 7svh, 78px);
  }

  #why-argument .why-argument-list {
    width: 100%;
  }

  /* ── Screen 24 / #portfolio ── */
  #portfolio.portfolio-hero {
    min-height: 100svh;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }

  #portfolio .portfolio-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    min-height: 100svh;
  }

  #portfolio .portfolio-hero-copy {
    min-width: 0;
    justify-content: center;
    padding:
      clamp(64px, 8svh, 86px)
      clamp(26px, 3vw, 40px)
      clamp(60px, 8svh, 82px)
      0;
  }

  #portfolio .portfolio-title {
    max-width: 500px;
    font-size: clamp(36px, 3.8vw, 46px);
    line-height: 1.1;
    letter-spacing: .03em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-image {
    min-width: 0;
    min-height: 100svh;
  }

  #portfolio .portfolio-image img {
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center center;
  }

  /* ── Screen 25 / #portfolio-map ── */
  #portfolio-map {
    min-height: 100svh;
    padding-top: clamp(58px, 7svh, 78px);
    padding-bottom: clamp(58px, 7svh, 78px);
  }

  #portfolio-map .pm-event-name,
  #portfolio-map .pm-partner-name,
  #portfolio-map .pm-upcoming-name {
    line-height: 1.18;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* ── Screen 26 / #portfolio-quote ── */
  #portfolio-quote {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: clamp(58px, 7svh, 78px);
    padding-bottom: clamp(58px, 7svh, 78px);
  }
  
}

/* ─── Tablet landscape targeted fixes after visual QA ─── */
@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  /* ═══════════════════════════════════════════════════════════
     Task 1 — Screen 27 / #final-experience
     Grid alignment + heading strictly in 2 lines
     ═══════════════════════════════════════════════════════════ */
  #final-experience.final-experience {
    min-height: 100svh;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
  }

  #final-experience .final-experience-inner {
    width: min(94vw, 1240px);
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    align-items: center;
    gap: clamp(34px, 4vw, 58px);

    min-height: 100svh;
  }

  #final-experience .final-experience-copy {
    min-width: 0;
    max-width: 520px;
    padding-right: clamp(18px, 2vw, 30px);
  }

  #final-experience .final-experience-title {
    max-width: 520px;
    font-size: clamp(38px, 4.1vw, 52px);
    line-height: 1.08;
    letter-spacing: .035em;
  }

  #final-experience .final-experience-title span {
    display: block;
    white-space: nowrap;
  }

  #final-experience .final-experience-image {
    min-width: 0;
    width: 100%;
  }

  /* ═══════════════════════════════════════════════════════════
     Task 2 — Screen 25 / #portfolio-map
     Restore hover-like feedback for touch (CSS-only)
     Desktop animation is CSS transitions + :hover.
     On touch (hover: none, pointer: coarse) :hover never fires.
     Duplicate visual effects via :active which fires on tap.
     ═══════════════════════════════════════════════════════════ */
  #portfolio-map .pm-col:active {
    background: rgba(253,224,139,.024);
  }

  #portfolio-map .pm-col:active::before {
    opacity: 1;
  }

  #portfolio-map .pm-col:active::after {
    opacity: 1;
  }

  #portfolio-map .pm-col:active .pm-col-title,
  #portfolio-map .pm-col:active .pm-col-num {
    color: var(--gold-70);
  }

  #portfolio-map .pm-event:active .pm-event-name,
  #portfolio-map .pm-partner:active .pm-partner-name,
  #portfolio-map .pm-upcoming:active .pm-upcoming-name {
    color: var(--gold-70);
  }

  #portfolio-map .pm-event:active .pm-event-type,
  #portfolio-map .pm-partner:active .pm-partner-role,
  #portfolio-map .pm-upcoming:active .pm-upcoming-ctx {
    color: var(--text-65);
  }

  /* ═══════════════════════════════════════════════════════════
     Task 3 — Screen 10 / #art
     Fix heading overlap on right text — grid + font size
     ═══════════════════════════════════════════════════════════ */
  #art .art-header {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 48%);
    column-gap: clamp(36px, 4.2vw, 58px);
    align-items: start;
  }

  #art .art-left,
  #art .art-copy {
    min-width: 0;
  }

  #art .art-title {
    max-width: 520px;
    font-size: clamp(38px, 3.9vw, 50px);
    line-height: 1.08;
    letter-spacing: .025em;
  }

  #art .art-title-line {
    white-space: normal;
  }

  #art .art-copy {
    max-width: 460px;
    justify-self: end;
    margin-top: 0;
    padding-top: clamp(8px, 1.4svh, 18px);
  }

  #art .art-copy::before {
    left: -20px;
  }

  #art .art-desc {
    font-size: clamp(13.5px, 1.08vw, 15px);
    line-height: 1.66;
  }

  /* ═══════════════════════════════════════════════════════════
     Task 4 — Screen 06 / #live-text
     Image → title gap + title size matching screen 23
     ═══════════════════════════════════════════════════════════ */
  #live-text .live-mobile-image {
    margin-bottom: clamp(44px, 5.8vw, 68px);
  }

  #live-text .live-title {
    width: min(820px, 86vw);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(24px, 3.4svh, 34px);

    font-size: clamp(42px, 5.4vw, 60px);
    line-height: 1.1;
    letter-spacing: .04em;
    text-align: center;
  }

  #live-text .live-title-rule {
    margin-bottom: clamp(24px, 3.2svh, 34px);
  }

  /* ═══════════════════════════════════════════════════════════
     Task 5 — Screen 14 / #reviews
     Lift slide image ~15px via object-position without scale change
     ═══════════════════════════════════════════════════════════ */
  #reviews .photo-slide img {
    object-fit: cover;
    object-position: center calc(50% - 15px);
  }

  /* ═══════════════════════════════════════════════════════════
     Task 6 — Screen 19 / #formats-list
     Enlarge media zone — wider column, 16:9 aspect ratio
     ═══════════════════════════════════════════════════════════ */
  #formats-list .format-line {
    grid-template-columns: minmax(340px, 40%) minmax(0, 1fr);
    column-gap: clamp(46px, 5vw, 76px);
  }

  #formats-list .format-line-media {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }

  #formats-list .format-line-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ═══════════════════════════════════════════════════════════
     Task 7 — Screen 04 / #philosophy
     Tighter gap between heading and text, compact composition
     ═══════════════════════════════════════════════════════════ */
  #philosophy .philosophy-inner {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    column-gap: clamp(18px, 2.2vw, 28px);
  }

  #philosophy .philosophy-title {
    max-width: 520px;
    font-size: clamp(40px, 4.1vw, 52px);
    line-height: 1.08;
    letter-spacing: .035em;
  }

  #philosophy .philosophy-right {
    gap: clamp(18px, 2vw, 26px);
  }

  #philosophy .philosophy-body {
    max-width: 540px;
  }

  /* ── Screen 26 / #portfolio-quote ── */
  #portfolio-quote .portfolio-quote-inner {
    transform: none;
  }

  #portfolio-quote .portfolio-quote-text {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.36;
    text-wrap: balance;
  }
}

/* ─── Tablet landscape final fix: screen 24 desktop-like portfolio ─── */

@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #portfolio.portfolio-hero {
    width: 100%;
    min-height: 100svh;
    height: auto;
    padding: 0 !important;
    overflow: hidden;
    align-items: stretch;
  }

  #portfolio .portfolio-hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh;
    height: auto;
    margin: 0 !important;

    display: grid;
    grid-template-columns: 46% 54%;
    align-items: stretch;
    gap: 0;
  }

  #portfolio .portfolio-hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;

    padding:
      clamp(72px, 9svh, 96px)
      clamp(44px, 4.4vw, 56px)
      clamp(72px, 9svh, 96px)
      var(--col-pad);
  }

  #portfolio .portfolio-title {
    max-width: 620px;
    margin: 0;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 520px;
    margin-top: 20px;
    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    margin: 30px 0 0;
  }

  #portfolio .portfolio-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.82) brightness(.84);
    transform: none;
  }
}

/* ─── Tablet landscape final typography: main titles match screen 10 ─── */

@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  :root {
    --tl-main-title-size: clamp(38px, 3.9vw, 50px);
    --tl-main-title-line: 1.08;
    --tl-main-title-letter: .025em;
  }

  #identity .identity-headline,
  #live-text .live-title,
  #player .player-title,
  #performance .perf-title,
  #art .art-title,
  #formats-integration .fi-heading,
  #why-argument .why-argument-subtitle,
  #portfolio .portfolio-title,
  #final-experience .final-experience-title {
    font-family: var(--font-d);
    font-weight: 400;
    font-size: var(--tl-main-title-size) !important;
    line-height: var(--tl-main-title-line) !important;
    letter-spacing: var(--tl-main-title-letter) !important;
    color: var(--text-100);
  }

  #art .art-title-line {
    white-space: normal;
  }
}

/* ─── Tablet landscape final fix: screen 27 title in two lines ─── */

@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #final-experience .final-experience-title {
    max-width: 560px;
  }

  #final-experience .final-experience-title span {
    display: block;
    white-space: nowrap;
  }
}

/* ─── Tablet landscape final fix: screen 10 safe art header grid ─── */

@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #art .art-header {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 48%);
    column-gap: clamp(42px, 4.8vw, 64px);
    align-items: start;
  }

  #art .art-left,
  #art .art-copy {
    min-width: 0;
  }

  #art .art-title {
    max-width: 540px;
  }

  #art .art-copy {
    max-width: 470px;
    justify-self: end;
    margin-top: 0;
    padding-top: clamp(8px, 1.4svh, 18px);
  }

  #art .art-copy::before {
    left: -22px;
  }

  #art .art-desc {
    font-size: clamp(13.5px, 1.08vw, 15px);
    line-height: 1.66;
  }
}

/* ─── Portfolio map reveal motion: desktop + tablet landscape ─── */

@media (min-width: 961px) {

  #portfolio-map.pm-motion-ready .pm-col {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .75s cubic-bezier(.25,.46,.45,.94),
      transform .75s cubic-bezier(.25,.46,.45,.94),
      background .45s ease,
      border-color .45s ease;
  }

  #portfolio-map.pm-motion-ready.pm-inview .pm-col {
    opacity: 1;
    transform: translateY(0);
  }

  #portfolio-map.pm-motion-ready.pm-inview .pm-col:nth-child(1) {
    transition-delay: .04s;
  }

  #portfolio-map.pm-motion-ready.pm-inview .pm-col:nth-child(2) {
    transition-delay: .14s;
  }

  #portfolio-map.pm-motion-ready.pm-inview .pm-col:nth-child(3) {
    transition-delay: .24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-map.pm-motion-ready .pm-col {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Tablet landscape FINAL: screens 24 and 27 as full-bleed split scenes ─── */
/*
  Screens 24 and 27 are NOT rail sections.
  They must behave like desktop-like full-bleed split scenes:
  text on the left, image on the right edge of viewport.
*/

@media (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  /* Shared full-bleed split model */
  #portfolio.portfolio-hero,
  #final-experience.final-experience {
    width: 100%;
    min-height: 100svh;
    height: auto;
    padding: 0 !important;
    overflow: hidden;
    align-items: stretch;
  }

  #portfolio .portfolio-hero-inner,
  #final-experience .final-experience-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh;
    height: auto;
    margin: 0 !important;

    display: grid;
    align-items: stretch;
    gap: 0;
  }

  /*
    Screen 24:
    more balanced than desktop 46/54 on tablet landscape.
    This prevents heading from collapsing into 3 lines.
  */
  #portfolio .portfolio-hero-inner {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  }

  #portfolio .portfolio-hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;

    padding:
      clamp(64px, 8svh, 88px)
      clamp(30px, 3.2vw, 42px)
      clamp(64px, 8svh, 88px)
      clamp(64px, 6.4vw, 84px);
  }

  #portfolio .portfolio-title {
    max-width: 560px !important;
    margin: 0;
    font-size: clamp(36px, 3.8vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: .025em !important;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: nowrap;
  }

  #portfolio .portfolio-subtitle {
    max-width: 500px;
    margin-top: clamp(18px, 2.4svh, 22px);
    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    margin: clamp(24px, 3svh, 30px) 0 0;
  }

  #portfolio .portfolio-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.82) brightness(.84);
    transform: none;
  }


  /*
    Screen 27:
    must be full-bleed.
    Image must touch the right edge of viewport.
    Do NOT use width:min(94vw,1240px) here.
  */
  #final-experience .final-experience-inner {
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  }

  #final-experience .final-experience-copy {
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
      clamp(64px, 8svh, 88px)
      clamp(44px, 4.4vw, 58px)
      clamp(64px, 8svh, 88px)
      var(--col-pad);
  }

  #final-experience .final-experience-title {
    max-width: 620px !important;
    margin: 0;
    font-size: clamp(36px, 3.8vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: .025em !important;
  }

  #final-experience .final-experience-title span {
    display: block;
    white-space: nowrap;
  }

  #final-experience .final-experience-rule {
    width: 54px;
    margin: clamp(24px, 3svh, 30px) 0 clamp(26px, 3.2svh, 34px);
  }

  #final-experience .final-experience-text {
    max-width: 540px;
    margin-bottom: clamp(34px, 4svh, 44px);
  }

  #final-experience .final-experience-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
  }

  #final-experience .final-experience-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center center;
    transform: translateY(7px);
  }
}

/* ─── Screen 24 FINAL compact landscape repair ─── */
/*
  Screen 24 is a cinematic split scene, not a rail section.

  Problem fixed:
  - text was overflowing into the image;
  - image started too early and felt too large on tablet landscape;
  - touch-only media queries may not apply in desktop browser preview.

  This block applies to:
  1) real tablet landscape touch devices up to 1366px;
  2) compact landscape browser preview up to 1180px.
*/

@media
  (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
  (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #portfolio.portfolio-hero {
    --portfolio-nav-h: 64px;

    width: 100%;
    min-height: 100svh;
    height: 100svh;

    box-sizing: border-box;
    padding: var(--portfolio-nav-h) 0 0 !important;

    overflow: hidden;
    align-items: stretch;
    background: transparent;
  }

  /*
    Important:
    screen content should fit below fixed navigation.
    Inner height is viewport minus nav height.
  */
  #portfolio .portfolio-hero-inner {
    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - var(--portfolio-nav-h));
    min-height: calc(100svh - var(--portfolio-nav-h));
    margin: 0 !important;

    display: grid;
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    align-items: stretch;
    gap: 0;

    position: relative;
    z-index: 1;
  }

  /*
    Text column:
    more width than 50/50, otherwise title cannot fit.
  */
  #portfolio .portfolio-hero-copy {
    min-width: 0;
    max-width: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;

    padding:
      clamp(42px, 6svh, 64px)
      clamp(22px, 2.6vw, 32px)
      clamp(42px, 6svh, 64px)
      clamp(56px, 6vw, 76px);

    position: relative;
    z-index: 3;
    overflow: visible;
  }

  /*
    Title:
    must be 2 lines:
    Портфолио выступлений
    и партнёрств

    But it must NOT overflow into image.
  */
  #portfolio .portfolio-title {
    width: 100%;
    max-width: min(520px, 100%) !important;
    margin: 0;

    font-size: clamp(34px, 3.45vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: .025em !important;

    overflow: visible;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: nowrap;
  }

  #portfolio .portfolio-subtitle {
    max-width: 460px;
    margin-top: clamp(16px, 2.2svh, 22px);

    font-size: 10.5px;
    line-height: 1.35;
    letter-spacing: .20em;

    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    height: 1px;
    margin: clamp(22px, 3svh, 28px) 0 0;
  }

  /*
    Image column:
    smaller than before, starts later, touches right edge.
  */
  #portfolio .portfolio-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: calc(100svh - var(--portfolio-nav-h));

    margin: 0;
    overflow: hidden;
    background: #071426;

    z-index: 1;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: calc(100svh - var(--portfolio-nav-h));

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

    filter: saturate(.82) brightness(.84);
    transform: none;
  }

  /*
    Desktop-like darkening on the photo.
    This is critical: the image should enter the dark scene softly,
    not start as a hard bright rectangle.
  */
  #portfolio .portfolio-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        rgba(13,10,42,.94) 0%,
        rgba(13,10,42,.72) 24%,
        rgba(13,10,42,.34) 56%,
        rgba(13,10,42,.10) 100%
      ),
      linear-gradient(
        180deg,
        rgba(5,8,22,.12) 0%,
        transparent 42%,
        rgba(5,8,22,.20) 100%
      );
  }
}

/* ─── Screen 24 extra safety for very narrow landscape 961–1060px ─── */
@media (min-width: 961px) and (max-width: 1060px) and (orientation: landscape) {

  #portfolio .portfolio-hero-inner {
    grid-template-columns: minmax(0, 57%) minmax(0, 43%);
  }

  #portfolio .portfolio-title {
    font-size: clamp(32px, 3.35vw, 38px) !important;
    max-width: min(500px, 100%) !important;
  }

  #portfolio .portfolio-hero-copy {
    padding-left: clamp(48px, 5.4vw, 62px);
    padding-right: 22px;
  }
}

/* ─── Screen 24 FINAL v2: cinematic background scene ─── */
/*
  Screen 24 is not a rail section and not a mechanical 50/50 grid.
  Tablet landscape should feel like desktop:
  text on the left, image as a dark cinematic layer on the right,
  with a soft gradient transition.
*/

@media
  (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
  (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #portfolio.portfolio-hero {
    --portfolio-nav-h: 64px;

    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;

    padding: var(--portfolio-nav-h) 0 0 !important;
    overflow: hidden;

    display: block;
    background:
      radial-gradient(ellipse 54% 60% at 18% 50%, rgba(86,178,205,.035) 0%, transparent 70%),
      linear-gradient(180deg, #0D0A2A 0%, #071426 100%);
  }

  /*
    Inner is no longer a grid.
    It is a full scene wrapper.
  */
  #portfolio .portfolio-hero-inner {
    position: relative;
    z-index: 1;

    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - var(--portfolio-nav-h));
    min-height: calc(100svh - var(--portfolio-nav-h));

    margin: 0 !important;
    display: block !important;
  }

  /*
    Image becomes a cinematic background layer,
    not a rigid right grid column.
  */
  #portfolio .portfolio-image {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 62%;
    height: 100%;
    min-height: 0;

    margin: 0;
    overflow: hidden;
    background: #071426;
  }

  #portfolio .portfolio-image img {
    display: block;
    width: 100%;
    height: 100%;

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

    filter: saturate(.82) brightness(.82);
    transform: none;
  }

  /*
    The key visual fix:
    desktop-like darkening and dissolve into the left background.
    This removes the hard vertical seam.
  */
  #portfolio .portfolio-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        rgba(13,10,42,1) 0%,
        rgba(13,10,42,.94) 10%,
        rgba(13,10,42,.72) 25%,
        rgba(13,10,42,.38) 47%,
        rgba(13,10,42,.12) 72%,
        rgba(13,10,42,.04) 100%
      ),
      linear-gradient(
        180deg,
        rgba(5,8,22,.18) 0%,
        transparent 42%,
        rgba(5,8,22,.24) 100%
      );
  }

  /*
    Text is a foreground layer.
    It no longer competes with image column.
  */
  #portfolio .portfolio-hero-copy {
    position: relative;
    z-index: 3;

    width: min(52vw, 560px);
    max-width: 560px;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;

    padding:
      clamp(42px, 6svh, 64px)
      0
      clamp(42px, 6svh, 64px)
      clamp(56px, 6vw, 76px);

    overflow: visible;
  }

  #portfolio .portfolio-title {
    width: 100%;
    max-width: 560px !important;
    margin: 0;

    font-size: clamp(34px, 3.55vw, 43px) !important;
    line-height: 1.08 !important;
    letter-spacing: .025em !important;

    text-wrap: balance;
  }

  /*
    Do not force a long nowrap line if it harms composition.
    Let the title balance naturally inside the foreground layer.
  */
  #portfolio .portfolio-title span {
    display: inline;
    white-space: normal;
  }

  #portfolio .portfolio-title span + span::before {
    content: " ";
  }

  #portfolio .portfolio-subtitle {
    max-width: 460px;
    margin-top: clamp(16px, 2.2svh, 22px);

    font-size: 10.5px;
    line-height: 1.35;
    letter-spacing: .20em;

    text-align: left;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    height: 1px;
    margin: clamp(22px, 3svh, 28px) 0 0;
  }
}

/* ─── Screen 24 FINAL tablet landscape: title screen like 21 ─── */
/*
  Screen 24 on tablet landscape becomes a title-divider screen.
  No photo. No split. Similar logic to screen 21 / #why.
*/

@media
  (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
  (min-width: 961px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #portfolio.portfolio-hero {
    width: 100%;
    min-height: 100svh;
    height: 100svh;

    padding:
      calc(64px + clamp(42px, 7svh, 72px))
      var(--col-pad)
      clamp(64px, 9svh, 96px)
      var(--col-pad) !important;

    overflow: hidden;

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

    background:
      radial-gradient(
        ellipse 70% 60% at 50% 48%,
        rgba(253,224,139,.055) 0%,
        transparent 68%
      ),
      radial-gradient(
        circle at 18% 18%,
        rgba(78,96,165,.12),
        transparent 38%
      ),
      radial-gradient(
        circle at 84% 72%,
        rgba(86,178,205,.045),
        transparent 40%
      ),
      linear-gradient(
        180deg,
        #08142B 0%,
        #071426 55%,
        #070B1D 100%
      );
  }

  #portfolio.portfolio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        circle at 18% 20%,
        rgba(78,96,165,.13),
        transparent 38%
      ),
      radial-gradient(
        circle at 84% 72%,
        rgba(253,224,139,.04),
        transparent 36%
      );
  }

  /*
    Hide photo only on tablet landscape.
    Do not remove from HTML.
  */
  #portfolio .portfolio-image {
    display: none !important;
  }

  /*
    Inner becomes a centered title wrapper, not a grid.
  */
  #portfolio .portfolio-hero-inner {
    position: relative;
    z-index: 2;

    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
  }

  #portfolio .portfolio-hero-copy {
    width: min(920px, 100%);
    max-width: 920px;

    padding: 0 !important;
    margin: 0 auto;

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

    text-align: center;
  }

  /*
    Title follows the logic of screen 21:
    large centered chapter title.
  */
  #portfolio .portfolio-title {
    width: 100%;
    max-width: 920px !important;
    margin: 0 auto;

    font-family: var(--font-d);
    font-weight: 400;
    font-size: clamp(44px, 4.8vw, 68px) !important;
    line-height: 1.12 !important;
    letter-spacing: .04em !important;

    color: var(--text-100);
    text-align: center;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 100%;
    margin:
      clamp(22px, 3svh, 30px)
      auto
      0;

    font-family: var(--font-b);
    font-weight: 300;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .24em;
    text-transform: uppercase;

    color: rgba(253,224,139,.70);
    text-align: center;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    height: 1px;
    margin:
      clamp(26px, 3.4svh, 36px)
      auto
      0;

    background: rgba(253,224,139,.42);
  }
}

/* ─── Screen 24 FINAL narrow landscape safety 961–1060px ─── */
@media (min-width: 961px) and (max-width: 1060px) and (orientation: landscape) {

  #portfolio .portfolio-hero-copy {
    width: min(840px, 100%);
    max-width: 840px;
  }

  #portfolio .portfolio-title {
    font-size: clamp(40px, 4.4vw, 58px) !important;
    max-width: 840px !important;
  }

  #portfolio .portfolio-subtitle {
    letter-spacing: .21em;
  }
}

/* ─── Screen 06 FINAL tablet landscape: image + desktop-like split ─── */
/*
  Tablet landscape:
  keep image first,
  but restore desktop-like typography/composition below:
  left title/text/button | vertical line | right formats.
*/

@media
  (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
  (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  #live-image {
    display: none;
  }

  #live-text {
    min-height: auto;
    height: auto;
    padding: 0 0 clamp(72px, 8svh, 104px);
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;

    background:
      radial-gradient(ellipse 58% 52% at 76% 44%, rgba(86,178,205,.055) 0%, transparent 66%),
      linear-gradient(180deg, #071426 0%, #0A1028 52%, #071426 100%);
  }

  /*
    Main grid:
    image is first and spans all columns.
    Below image: desktop-like split.
  */
  #live-text .live-text-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns:
      minmax(0, 48%)
      1px
      minmax(0, 52%);
    grid-template-rows: auto auto auto auto auto;
    align-items: center;
    column-gap: 0;
    row-gap: 0;

    overflow: visible;
  }

  /*
    Keep left column children as independent grid items,
    so the image can stay first and the desktop split can be restored below.
  */
  #live-text .live-text-left {
    display: contents;
    padding: 0;
  }

  /*
    Image first, full viewport width.
  */
  #live-text .live-mobile-image {
    grid-column: 1 / -1;
    grid-row: 1;

    display: block;
    width: 100vw;
    max-width: none;
    margin: 0 0 clamp(64px, 8svh, 96px);
    padding: 0;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    overflow: hidden;
    background: #071426;
  }

  #live-text .live-mobile-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;

    object-fit: contain;
    object-position: center center;

    filter: saturate(.86) brightness(.82) contrast(1.02);
    transform: none;
  }

  #live-text .live-mobile-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(7,20,38,.10) 0%,
        transparent 24%,
        transparent 74%,
        rgba(7,20,38,.28) 100%
      );
  }

  /*
    Left desktop-like column below image.
  */
  #live-text .live-title {
    grid-column: 1;
    grid-row: 2;

    width: auto;
    max-width: 560px;
    margin:
      0
      clamp(38px, 4.8vw, 64px)
      clamp(26px, 3.2svh, 34px)
      clamp(56px, 7vw, 92px);

    padding: 0;

    text-align: left;
    font-size: clamp(42px, 4.8vw, 58px);
    line-height: 1.12;
    letter-spacing: .04em;
  }

  #live-text .live-title-rule {
    grid-column: 1;
    grid-row: 3;

    width: 36px;
    height: 1px;

    margin:
      0
      0
      clamp(22px, 3svh, 28px)
      clamp(56px, 7vw, 92px);

    background: rgba(253,224,139,.42);
  }

  #live-text .live-manifesto {
    grid-column: 1;
    grid-row: 4;

    width: auto;
    max-width: 520px;

    margin:
      0
      clamp(38px, 4.8vw, 64px)
      clamp(34px, 4svh, 44px)
      clamp(56px, 7vw, 92px);

    text-align: left;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.75;
    letter-spacing: .01em;
  }

  #live-text .btn {
    grid-column: 1;
    grid-row: 5;

    justify-self: start;
    margin:
      0
      0
      0
      clamp(56px, 7vw, 92px);
  }

  /*
    Restore vertical divider like desktop.
  */
  #live-text .live-text-line {
    grid-column: 2;
    grid-row: 2 / 6;

    display: block;
    width: 1px;
    min-height: clamp(320px, 44svh, 460px);
    align-self: stretch;

    background:
      linear-gradient(
        to bottom,
        rgba(253,224,139,.48) 0%,
        rgba(253,224,139,.06) 100%
      );
  }

  /*
    Right formats column like desktop.
  */
  #live-text .live-text-right {
    grid-column: 3;
    grid-row: 2 / 6;

    width: auto;
    max-width: none;
    margin: 0;

    padding:
      0
      clamp(56px, 7vw, 92px)
      0
      clamp(38px, 4.8vw, 64px);

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #live-text .live-formats-label {
    text-align: left;
    margin-bottom: 20px;

    font-size: 11px;
    letter-spacing: .30em;
  }

  #live-text .live-format-row {
    display: flex;
    align-items: baseline;
    gap: 20px;

    padding: clamp(15px, 2svh, 20px) 0;
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #live-text .live-format-row:first-of-type {
    border-top: 1px solid rgba(253,224,139,.10);
  }

  #live-text .live-format-num {
    font-size: 11px;
    min-width: 20px;
    padding-top: 5px;
  }

  #live-text .live-format-name {
    font-size: clamp(21px, 2.35vw, 30px);
    line-height: 1.2;
    letter-spacing: .02em;
  }
}

/* Safety for 961–1060px */
@media (min-width: 961px) and (max-width: 1060px) and (orientation: landscape) {

  #live-text .live-text-inner {
    grid-template-columns:
      minmax(0, 47%)
      1px
      minmax(0, 53%);
  }

  #live-text .live-title {
    font-size: clamp(38px, 4.4vw, 50px);
    margin-left: clamp(44px, 5.4vw, 62px);
    margin-right: clamp(28px, 3.4vw, 42px);
  }

  #live-text .live-title-rule,
  #live-text .live-manifesto,
  #live-text .btn {
    margin-left: clamp(44px, 5.4vw, 62px);
  }

  #live-text .live-manifesto {
    margin-right: clamp(28px, 3.4vw, 42px);
    font-size: clamp(14.5px, 1.35vw, 16px);
  }

  #live-text .live-text-right {
    padding-left: clamp(30px, 3.8vw, 44px);
    padding-right: clamp(44px, 5.4vw, 62px);
  }

  #live-text .live-format-name {
    font-size: clamp(19px, 2.15vw, 26px);
  }
}

/* ─── Chapter title unification: screens 11, 13, 16, 18, 21, 24 ─── */
/*
  Tablet landscape only.
  These screens are chapter-title / title-divider screens.
  Screen 11 (#musicians .musicians-title) is the reference.
  Screen 24 joins the same family — no longer an experimental title.
  Desktop, mobile, tablet portrait — untouched.
*/

@media
  (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
  (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  :root {
    --tl-chapter-title-size: clamp(46px, 4.6vw, 72px);
    --tl-chapter-title-line: 1.12;
    --tl-chapter-title-letter: .04em;
    --tl-chapter-title-max: 980px;
    --tl-chapter-title-space-after: clamp(24px, 3.2svh, 36px);
  }

  #musicians .musicians-title,
  #sensations .sens-title,
  #egypt .egypt-title,
  #formats .formats-main-title,
  #why .why-title-main,
  #portfolio .portfolio-title {
    font-family: var(--font-d) !important;
    font-weight: 400 !important;
    font-size: var(--tl-chapter-title-size) !important;
    line-height: var(--tl-chapter-title-line) !important;
    letter-spacing: var(--tl-chapter-title-letter) !important;
    color: var(--text-100) !important;

    max-width: var(--tl-chapter-title-max) !important;
    margin-left: auto;
    margin-right: auto;

    text-align: center !important;
  }

  /*
    Screen 24 title must follow the same chapter-title logic.
    It should not keep old portfolio split-title behavior on tablet landscape.
  */
  #portfolio .portfolio-title {
    width: 100%;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }
}

/* Chapter-title narrow safety: 961–1060px landscape */
@media (min-width: 961px) and (max-width: 1060px) and (orientation: landscape) {

  #musicians .musicians-title,
  #sensations .sens-title,
  #egypt .egypt-title,
  #formats .formats-main-title,
  #why .why-title-main,
  #portfolio .portfolio-title {
    font-size: clamp(40px, 4.4vw, 58px) !important;
    max-width: 860px !important;
  }
}

/* ─── Tablet landscape scroll-seam rhythm ─── */
/*
  Scroll groups need consistent vertical seams:
  08→09, 09→10, 19→20, 22→23.

  Do not add external margins between sections.
  Control the perceived seam through top padding of the next section.

  This block covers both real tablet landscape and browser preview.
*/

@media
  (min-width: 961px) and (max-width: 1180px) and (orientation: landscape),
  (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

  :root {
    --tl-scroll-seam: clamp(76px, 9svh, 96px);
    --tl-image-scroll-seam: clamp(88px, 10svh, 112px);
  }

  /*
    08 → 09
    Start screen 09 with the same premium scroll seam after player.
  */
  #performance {
    padding-top: var(--tl-scroll-seam);
  }

  /*
    09 → 10
    Screen 10 should begin with the same rhythm after performance.
  */
  #art {
    padding-top: var(--tl-scroll-seam);
  }

  /*
    19 → 20
    Formats list to integration block.
  */
  #formats-integration {
    padding-top: var(--tl-scroll-seam);
  }

  /*
    22 → 23
    Full-bleed image needs a slightly larger exhale before argument title.
  */
  #why-argument {
    padding-top: var(--tl-image-scroll-seam);
  }
}

/* ─── Stage TP-1: tablet portrait critical layout pass ─── */
/*
  Five screens need structural layout fixes on tablet portrait.
  Block stays at the end of css/styles.css.
  Uses simpler media query (no hover/pointer override) to catch
  ALL portrait tablets including desktop-browser preview.
  Existing TP blocks (with hover: none / pointer: coarse) are
  overridden by source-order since this block comes last.
*/

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {

  /* ============================================================
     Screen 06 / #live-text — portrait rhythm & CTA fix
     ============================================================
     Stack the 3-column grid to single column, hide vertical divider,
     give CTA proper button shape (not a random horizontal line).
     Portrait order: title → image → rule → manifesto → formats → CTA.
  */

  #live-text {
    padding: clamp(60px, 7vw, 88px) var(--col-pad) clamp(72px, 8vw, 104px);
  }

  #live-text .live-text-inner {
    display: flex !important;
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
  }

  /* Override existing TP max-width: none */
  #live-text .live-text-inner {
    max-width: 720px;
  }

  #live-text .live-text-left {
    width: 100%;
    padding-right: 0;
  }

  /* Hide vertical divider — no grid columns to separate */
  #live-text .live-text-line {
    display: none !important;
  }

  /* Formats become a block below left column */
  #live-text .live-text-right {
    width: 100%;
    max-width: 100% !important;
    padding: clamp(28px, 3.6vw, 40px) 0 0 !important;
    margin: 0 !important;
  }

  /* CTA button — proper shape, not a line */
  #live-text .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    min-width: 200px;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 0;
    margin-top: 8px;
  }


  /* ============================================================
     Screen 08 / #player — compact layout
     ============================================================
     Player header (60/40 grid) is too wide on portrait.
     Track grid (3 columns) makes each track too narrow.
     Fix: stack header vertically, smaller CD, one-column tracks
     with improved card rhythm.
  */

  #player {
    padding: 6vh var(--col-pad) 7vh;
  }

  /* Header — centered stack */
  #player .player-header {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 5vh;
  }

  #player .player-left {
    width: 100%;
    max-width: 640px;
    padding-right: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #player .player-overline {
    text-align: center;
  }

  #player .player-title {
    text-align: center;
    font-size: clamp(34px, 4.8vw, 50px);
  }

  #player .player-rule {
    margin-left: auto;
    margin-right: auto;
  }

  #player .player-subtitle {
    text-align: center;
    max-width: 520px;
  }

  /* CD — centered below header text, smaller */
  #player .player-cd-side {
    width: 100%;
    padding-left: 0;
    justify-content: center;
    margin-top: 4vh;
  }

  #player .player-cd-outer {
    width: clamp(140px, 16vw, 180px);
    height: clamp(140px, 16vw, 180px);
  }

  /* Track grid — single column with card rhythm */
  #player .track-grid {
    display: flex !important;
    flex-direction: column;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid rgba(253,224,139,.14);
  }

  #player .track-col {
    padding: 28px 24px 24px;
    border-left: none;
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col:first-child {
    border-left: none;
  }

  #player .track-col::before,
  #player .track-col::after {
    display: none;
  }

  #player .track-name {
    font-size: clamp(18px, 2.2vw, 22px);
    margin-bottom: 20px;
  }

  #player .track-desc {
    font-size: clamp(14px, 1.6vw, 15px);
    margin-bottom: 20px;
  }

  #player .waveform {
    height: 52px;
    margin-bottom: 20px;
  }


  /* ============================================================
     Screen 14 / #reviews — photo stabilization & card polish
     ============================================================
     Existing TP block (line 8471) handles 2-column cards.
     Add photo carousel stabilization and card width constraint
     here to avoid overcrowding the editorial columns at ~820px+.
  */

  /* Photo carousel — stable height, 2 slides visible */
  #reviews .photo-carousel-wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto clamp(32px, 4vw, 48px);
    overflow: hidden;
  }

  #reviews .photo-slide {
    height: clamp(300px, 36vh, 380px) !important;
    flex: 0 0 calc((100% - 20px) / 2);
  }

  /* Review cards — max width to prevent overstretch */
  #reviews .review-cards {
    max-width: 680px;
  }


  /* ============================================================
     Screen 17 / #egypt-case — structured vertical stack
     ============================================================
     Currently a 2-column grid (video | copy). On portrait, stack
     vertically: intro/title → video → case facts/text.
     Removes the split-section confusion.
  */

  #egypt-case.egypt-case {
    padding: clamp(64px, 7vh, 88px) var(--col-pad);
    min-height: auto;
  }

  #egypt-case .egypt-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
    gap: clamp(36px, 4.8vw, 52px);
  }

  /* Video first, then text */
  #egypt-case .egypt-video {
    order: 1;
    width: 100%;
    max-width: 340px;
  }

  #egypt-case .egypt-copy {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  #egypt-case .egypt-main-text {
    max-width: 100%;
  }


  /* ============================================================
     Screen 24 / #portfolio — chapter-title family
     ============================================================
     On tablet portrait, screen 24 becomes a title-divider screen
     (like screens 11, 13, 16, 18, 21). No image split.
     Reference: tablet landscape block at line 11446.
     Overrides the existing TP block at line 9437 (image-first stack).
  */

  #portfolio.portfolio-hero {
    width: 100%;
    min-height: 80svh;
    height: auto;
    padding:
      calc(48px + clamp(36px, 5svh, 56px))
      var(--col-pad)
      clamp(48px, 6svh, 72px)
      var(--col-pad);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
      radial-gradient(
        ellipse 70% 60% at 50% 48%,
        rgba(253,224,139,.055) 0%,
        transparent 68%
      ),
      radial-gradient(
        circle at 18% 18%,
        rgba(78,96,165,.12),
        transparent 38%
      ),
      radial-gradient(
        circle at 84% 72%,
        rgba(86,178,205,.045),
        transparent 40%
      ),
      linear-gradient(
        180deg,
        #08142B 0%,
        #071426 55%,
        #070B1D 100%
      );
  }

  /* Hide photo — chapter-title has no image split */
  #portfolio .portfolio-image {
    display: none !important;
  }

  /* Inner — centered title wrapper */
  #portfolio .portfolio-hero-inner {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #portfolio .portfolio-hero-copy {
    width: min(760px, 100%);
    max-width: 760px;
    padding: 0 !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Chapter-title size — follows .musicians-title logic */
  #portfolio .portfolio-title {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-d);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.12;
    letter-spacing: .04em;
    color: var(--text-100);
    text-align: center;
  }

  #portfolio .portfolio-title span {
    display: block;
    white-space: normal;
  }

  #portfolio .portfolio-subtitle {
    max-width: 100%;
    margin: clamp(20px, 2.6vw, 28px) auto 0;
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(253,224,139,.70);
    text-align: center;
  }

  #portfolio .portfolio-rule {
    width: 54px;
    height: 1px;
    margin: clamp(24px, 3vw, 32px) auto 0;
    background: rgba(253,224,139,.42);
  }
}

/* ─── Stage TP-1.1: tablet portrait hotfix after visual QA ─── */
/*
  Two regression fixes discovered during visual QA of Stage TP-1:

  1. Screen 06 / #live-text CTA button:
     Old tablet blocks (761-820px, 821-1100px no-orientation) set
     width: 100% / max-width: none on .live-text-left .btn which
     stretches the CTA across the full container. Stage TP-1 added
     inline-flex but didn't reset width inheritance.
     Fix: width: auto + max-width: max-content + center alignment.

  2. Screen 08 / #player CD visibility:
     @media (max-width: 860px) block (line 1485) sets
     .player-cd-side { display: none; } which fires at 768/820px.
     Stage TP-1 didn't add an explicit display override.
     Fix: display: flex !important to restore CD visibility.
*/

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {

  /* ── Screen 06 / #live-text: CTA button ── */
  /* Reset width/max-width from older tablet blocks (width: 100%) */

  #live-text .live-text-left .btn,
  #live-text .btn {
    width: auto !important;
    max-width: max-content !important;
    align-self: center;
    margin: clamp(28px, 3.5vw, 38px) auto 0 !important;
    padding: 14px 34px;
    min-width: 220px;
  }

  /* ── Screen 08 / #player: CD visibility ── */
  /* Override @media (max-width: 860px) display: none */

  #player .player-cd-side {
    display: flex !important;
  }

}

/* ─── Stage TP-2A: tablet portrait composition redesign — 08 / 19 / 20 / 23 / 25 ─── */
/*
  Premium editorial / cinematic tablet portrait recomposition for screens
  that currently look like long vertical lists/catalogues.

  Rules:
  - CSS-only; HTML and JS unchanged.
  - All overrides inside @media (orientation: portrait) with 761–1100px range.
  - Sub-range blocks (961–1100 / 761–960) for finer control.
  - Comes LAST in styles.css → overrides Stage TP-1 and all earlier TP blocks.
  - Desktop, mobile (≤760px), and tablet landscape are NOT touched.
*/

/* ── Screen 08 / #player ─ audio split: CD + compact player ── */

@media (min-width: 961px) and (max-width: 1100px) and (orientation: portrait) {

  /* ── Screen 08 / #player: two-column audio split ── */
  #player {
    padding: 6vh var(--col-pad) 7vh;
  }

  #player .player-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
    margin-bottom: 4vh;
  }

  /* Left column: overline + title + rule + subtitle */
  #player .player-left {
    width: 100%;
    max-width: 440px;
    padding-right: 24px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #player .player-overline {
    text-align: left;
    margin-bottom: 18px;
  }

  #player .player-title {
    text-align: left;
    font-size: clamp(32px, 3.8vw, 46px);
    margin-bottom: 18px;
  }

  #player .player-rule {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 18px;
  }

  #player .player-subtitle {
    text-align: left;
    max-width: 380px;
    font-size: clamp(14px, 1.3vw, 15px);
  }

  /* Right column: CD disc ─ visible, centered in its half */
  #player .player-cd-side {
    display: flex !important;
    width: 100%;
    padding-left: 0;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }

  #player .player-cd-outer {
    width: clamp(140px, 14vw, 180px);
    height: clamp(140px, 14vw, 180px);
  }

  /* Track grid ─ compact, below header, narrower width */
  #player .track-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid rgba(253,224,139,.14);
  }

  #player .track-col {
    padding: 22px 20px 20px;
    border-left: 1px solid rgba(253,224,139,.10);
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col:first-child {
    border-left: none;
  }

  #player .track-col:nth-child(2) {
    border-right: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col::before,
  #player .track-col::after {
    display: none;
  }

  #player .track-name {
    font-size: clamp(16px, 1.6vw, 19px);
    margin-bottom: 14px;
  }

  #player .track-desc {
    font-size: clamp(12px, 1.1vw, 13px);
    margin-bottom: 14px;
    line-height: 1.5;
  }

  #player .waveform {
    height: 44px;
    margin-bottom: 14px;
  }

  #player .track-bar-wrap {
    margin-top: auto;
  }

  #player .track-footer {
    padding-top: 6px;
  }

  /* ── Screen 19 / #formats-list: horizontal editorial rows ── */
  #formats-list .format-line {
    display: grid !important;
    grid-template-columns: 40% 1fr;
    column-gap: clamp(36px, 4vw, 56px);
    align-items: center;
    padding: clamp(34px, 4vh, 50px) 0;
  }

  #formats-list .format-line-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  #formats-list .format-line-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #formats-list .format-line-content {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }

  #formats-list .format-line-num {
    font-size: clamp(16px, 1.2vw, 20px);
    transform: translateY(4px);
  }

  #formats-list .format-line-label {
    font-size: clamp(20px, 2vw, 28px);
    max-width: 500px;
  }

  #formats-list .format-line-summary,
  #formats-list .format-line-title,
  #formats-list .format-line-desc {
    font-size: clamp(13px, 0.95vw, 14px);
    line-height: 1.7;
    margin-bottom: clamp(18px, 2vw, 24px);
    max-width: 520px;
  }

  #formats-list .format-line-specs {
    max-width: 520px;
  }

  #formats-list .format-line-spec {
    display: grid;
    grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0;
  }

  #formats-list .format-line-spec span {
    font-size: 9px;
    letter-spacing: .18em;
  }

  #formats-list .format-line-spec p {
    font-size: clamp(12px, 0.88vw, 13px);
    line-height: 1.55;
  }

  /* ── Screen 20 / #formats-integration: integration rows ── */
  #formats-integration .fi-panels {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
  }

  #formats-integration .fi-panel {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    gap: 0;
    padding: clamp(28px, 3.6vh, 40px) clamp(24px, 2.6vw, 36px);
    border-right: none;
    border-bottom: 1px solid var(--gold-20);
    align-items: start;
    position: relative;
  }

  #formats-integration .fi-panel:last-child {
    border-bottom: none;
  }

  /* Thin vertical line between left and right panel sections */
  #formats-integration .fi-panel::after {
    content: '';
    position: absolute;
    left: 34%;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--gold-20);
    pointer-events: none;
  }

  #formats-integration .fi-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-40) 30%, var(--gold) 55%, var(--gold-40) 80%, transparent 100%);
    opacity: 0;
    transition: opacity .5s ease;
  }

  #formats-integration .fi-panel:hover::before {
    opacity: 1;
  }

  /* Left: title + tag */
  #formats-integration .fi-title {
    font-size: clamp(20px, 2.2vw, 28px);
    margin-bottom: 16px;
    padding-right: 24px;
  }

  #formats-integration .fi-tag {
    margin-top: auto;
    font-size: var(--f-micro);
  }

  /* Right: description */
  #formats-integration .fi-desc {
    font-size: clamp(13px, 1vw, 14px);
    line-height: 1.7;
    padding-left: 24px;
  }

  #formats-integration .fi-rule {
    display: none;
  }

  #formats-integration .fi-cta {
    margin-top: clamp(36px, 4.6vh, 52px);
  }

  /* ── Screen 23 / #why-argument: argument sheet split ── */
  #why-argument .why-argument-mobile-image {
    display: none !important;
  }

  #why-argument .why-argument-inner {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    gap: clamp(36px, 4vw, 56px);
    align-items: start;
    max-width: none;
    margin: 0;
  }

  #why-argument .why-argument-header {
    margin-bottom: 0;
    text-align: left;
    align-items: flex-start;
    padding: 0;
    border: 0;
  }

  #why-argument .why-argument-subtitle {
    text-align: left;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.08;
    max-width: 400px;
  }

  #why-argument .why-argument-subtitle-line {
    display: block;
    white-space: normal;
  }

  #why-argument .why-argument-list {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
    margin: 0;
  }

  #why-argument .why-argument-item {
    padding: clamp(20px, 2.6vh, 32px) 0;
    border-bottom: 1px solid rgba(253,224,139,.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #why-argument .why-argument-item:last-child {
    border-bottom: none;
  }

  #why-argument .why-argument-item::before {
    display: none;
  }

  #why-argument .why-argument-title {
    font-size: clamp(18px, 1.6vw, 22px);
    margin-bottom: 0;
  }

  #why-argument .why-argument-text {
    font-size: clamp(13px, 1vw, 14px);
    line-height: 1.65;
    max-width: 560px;
  }

  #why-argument .why-cta {
    grid-column: 1 / 2;
    margin-top: clamp(28px, 3.6vh, 40px);
    display: flex;
    justify-content: flex-start;
  }

  /* ── Screen 25 / #portfolio-map: editorial index ── */
  #portfolio-map .pm-grid {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
  }

  #portfolio-map .pm-col {
    display: grid !important;
    grid-template-columns: 32% 1fr;
    gap: 0;
    padding: clamp(28px, 3.6vh, 40px) clamp(24px, 2.6vw, 36px);
    border-right: none;
    border-bottom: 1px solid var(--gold-20);
    position: relative;
    align-items: start;
  }

  #portfolio-map .pm-col:last-child {
    border-bottom: none;
  }

  #portfolio-map .pm-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-40) 30%, var(--gold) 55%, var(--gold-40) 80%, transparent 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }

  #portfolio-map .pm-col:hover::before {
    opacity: 1;
  }

  #portfolio-map .pm-col::after {
    display: none;
  }

  /* Left label area */
  #portfolio-map .pm-col-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0;
    padding-right: 20px;
    position: relative;
  }

  /* Vertical line between left label and right content */
  #portfolio-map .pm-col-header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--gold-20);
  }

  #portfolio-map .pm-col-num {
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--gold-40);
    margin-bottom: 2px;
  }

  #portfolio-map .pm-col-title {
    font-family: var(--font-d);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--text-80);
    line-height: 1.15;
  }

  /* Right content area */
  #portfolio-map .pm-event-list,
  #portfolio-map .pm-partners,
  #portfolio-map .pm-upcoming-list {
    padding-left: 20px;
  }

  #portfolio-map .pm-event,
  #portfolio-map .pm-partner,
  #portfolio-map .pm-upcoming {
    padding: 12px 0;
    gap: 4px;
  }

  #portfolio-map .pm-event-name,
  #portfolio-map .pm-partner-name,
  #portfolio-map .pm-upcoming-name {
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: .03em;
  }

  #portfolio-map .pm-event-type,
  #portfolio-map .pm-partner-role,
  #portfolio-map .pm-upcoming-ctx {
    font-size: clamp(11px, 0.8vw, 12px);
  }

  /* Thin divider between groups */
  #portfolio-map .pm-col {
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #portfolio-map .pm-col:last-child {
    border-bottom: none;
  }
}

/* ── Narrower tablet portrait: 761–960px ── */

@media (min-width: 761px) and (max-width: 960px) and (orientation: portrait) {

  /* ── Screen 08 / #player: desktop-like header + compact tracks ── */
  #player {
    padding: 5vh var(--col-pad) 6vh;
  }

  #player .player-header {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3.6vh;
  }

  #player .player-left {
    width: 100%;
    max-width: 520px;
    padding-right: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #player .player-overline {
    text-align: center;
    margin-bottom: 16px;
  }

  #player .player-title {
    text-align: center;
    font-size: clamp(30px, 4.4vw, 40px);
    margin-bottom: 16px;
  }

  #player .player-rule {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
  }

  #player .player-subtitle {
    text-align: center;
    max-width: 440px;
    font-size: clamp(13px, 1.5vw, 14px);
  }

  /* CD ─ visible, centered, compact */
  #player .player-cd-side {
    display: flex !important;
    width: 100%;
    padding-left: 0;
    justify-content: center;
    margin-top: 2.4vh;
  }

  #player .player-cd-outer {
    width: clamp(120px, 14vw, 150px);
    height: clamp(120px, 14vw, 150px);
  }

  /* Track grid ─ single column, compact cards */
  #player .track-grid {
    display: flex !important;
    flex-direction: column;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid rgba(253,224,139,.14);
  }

  #player .track-col {
    padding: 18px 20px 16px;
    border-left: none;
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col:first-child {
    border-left: none;
  }

  #player .track-col::before,
  #player .track-col::after {
    display: none;
  }

  #player .track-name {
    font-size: clamp(15px, 2vw, 17px);
    margin-bottom: 10px;
  }

  #player .track-desc {
    font-size: clamp(12px, 1.4vw, 13px);
    margin-bottom: 10px;
    line-height: 1.5;
  }

  #player .waveform {
    height: 38px;
    margin-bottom: 10px;
  }

  /* ── Screen 19 / #formats-list: centred one-column cards ── */
  #formats-list .formats-list-inner {
    max-width: 660px;
    margin: 0 auto;
  }

  #formats-list .format-line {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: clamp(28px, 3.6vh, 40px) 0;
    text-align: center;
  }

  #formats-list .format-line-media {
    max-width: 500px;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 20px;
  }

  #formats-list .format-line-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #formats-list .format-line-content {
    width: 100%;
    max-width: 500px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    text-align: left;
  }

  #formats-list .format-line-num {
    font-size: clamp(15px, 1.8vw, 18px);
    transform: translateY(3px);
  }

  #formats-list .format-line-label {
    font-size: clamp(18px, 2.4vw, 24px);
    max-width: 480px;
  }

  #formats-list .format-line-summary,
  #formats-list .format-line-title,
  #formats-list .format-line-desc {
    font-size: clamp(12px, 1.5vw, 13px);
    line-height: 1.7;
    margin-bottom: clamp(16px, 2.2vw, 22px);
    max-width: 480px;
  }

  #formats-list .format-line-specs {
    max-width: 480px;
  }

  #formats-list .format-line-spec {
    display: grid;
    grid-template-columns: minmax(100px, 0.28fr) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
  }

  #formats-list .format-line-spec span {
    font-size: 9px;
  }

  #formats-list .format-line-spec p {
    font-size: clamp(12px, 1.3vw, 13px);
    line-height: 1.55;
  }

  /* ── Screen 20 / #formats-integration: soft stack panels ── */
  #formats-integration .fi-panels {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
  }

  #formats-integration .fi-panel {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    gap: 0;
    padding: clamp(22px, 3vh, 32px) clamp(18px, 2.4vw, 28px);
    border-right: none;
    border-bottom: 1px solid var(--gold-20);
    align-items: start;
    position: relative;
  }

  #formats-integration .fi-panel:last-child {
    border-bottom: none;
  }

  /* Thin vertical line */
  #formats-integration .fi-panel::after {
    content: '';
    position: absolute;
    left: 34%;
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: var(--gold-20);
    pointer-events: none;
  }

  #formats-integration .fi-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-40) 30%, var(--gold) 55%, var(--gold-40) 80%, transparent 100%);
    opacity: 0;
    transition: opacity .5s ease;
  }

  #formats-integration .fi-panel:hover::before {
    opacity: 1;
  }

  #formats-integration .fi-title {
    font-size: clamp(17px, 2.2vw, 22px);
    margin-bottom: 12px;
    padding-right: 16px;
  }

  #formats-integration .fi-tag {
    margin-top: auto;
    font-size: 10px;
  }

  #formats-integration .fi-desc {
    font-size: clamp(12px, 1.4vw, 13px);
    line-height: 1.65;
    padding-left: 16px;
  }

  #formats-integration .fi-rule {
    display: none;
  }

  #formats-integration .fi-cta {
    margin-top: clamp(28px, 3.6vh, 40px);
  }

  /* ── Screen 23 / #why-argument: argument sheet stack ── */
  #why-argument .why-argument-mobile-image {
    display: none !important;
  }

  #why-argument .why-argument-inner {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    max-width: 660px;
    margin: 0 auto;
  }

  #why-argument .why-argument-header {
    text-align: center;
    align-items: center;
    margin-bottom: clamp(28px, 3.6vh, 40px);
    padding: 0;
    border: 0;
  }

  #why-argument .why-argument-subtitle {
    text-align: center;
    font-size: clamp(30px, 4.4vw, 42px);
    line-height: 1.08;
    max-width: 520px;
  }

  #why-argument .why-argument-subtitle-line {
    display: block;
    white-space: normal;
  }

  #why-argument .why-argument-list {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
    margin: 0;
  }

  #why-argument .why-argument-item {
    padding: clamp(16px, 2.2vh, 24px) 0;
    border-bottom: 1px solid rgba(253,224,139,.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #why-argument .why-argument-item:last-child {
    border-bottom: none;
  }

  #why-argument .why-argument-item::before {
    display: none;
  }

  #why-argument .why-argument-title {
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 0;
  }

  #why-argument .why-argument-text {
    font-size: clamp(12px, 1.4vw, 13px);
    line-height: 1.65;
    max-width: 540px;
  }

  #why-argument .why-cta {
    margin-top: clamp(24px, 3vh, 36px);
    display: flex;
    justify-content: center;
  }

  /* ── Screen 25 / #portfolio-map: editorial index stack ── */
  #portfolio-map .pm-grid {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
  }

  #portfolio-map .pm-col {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: clamp(22px, 3vh, 32px) clamp(18px, 2.4vw, 28px);
    border-right: none;
    border-bottom: 1px solid rgba(253,224,139,.10);
    position: relative;
  }

  #portfolio-map .pm-col:last-child {
    border-bottom: none;
  }

  #portfolio-map .pm-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-40) 30%, var(--gold) 55%, var(--gold-40) 80%, transparent 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }

  #portfolio-map .pm-col:hover::before {
    opacity: 1;
  }

  #portfolio-map .pm-col::after {
    display: none;
  }

  #portfolio-map .pm-col-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
  }

  #portfolio-map .pm-col-num {
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--gold-40);
    flex-shrink: 0;
  }

  #portfolio-map .pm-col-title {
    font-family: var(--font-d);
    font-weight: 400;
    font-size: clamp(22px, 3.2vw, 30px);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--text-80);
    line-height: 1.15;
  }

  #portfolio-map .pm-event-list,
  #portfolio-map .pm-partners,
  #portfolio-map .pm-upcoming-list {
    padding-left: 0;
  }

  #portfolio-map .pm-event,
  #portfolio-map .pm-partner,
  #portfolio-map .pm-upcoming {
    padding: 10px 0;
    gap: 4px;
  }

  #portfolio-map .pm-event-name,
  #portfolio-map .pm-partner-name,
  #portfolio-map .pm-upcoming-name {
    font-size: clamp(15px, 2vw, 18px);
    letter-spacing: .03em;
  }

  #portfolio-map .pm-event-type,
  #portfolio-map .pm-partner-role,
  #portfolio-map .pm-upcoming-ctx {
    font-size: clamp(10px, 1.2vw, 12px);
  }
}

/* ─── Stage TP-2A.1: tablet portrait composition correction after visual QA ─── */
/*
  Targeted overrides on top of Stage TP-2A for screens 08/19/20/23/25.

  What changed:
  - Screen 08: CD hidden on tablet portrait; two-column split (header + tracks) at 961+;
    compact single-column stack at 761-960.
  - Screen 20: micro vertical padding reduction only.
  - Screen 23: reinforced editorial split at 961+; left-aligned compact stack at 761-960.
  - Screen 25: stronger editorial index sizing at 961+; editorial feel at 761-960.
  - Screen 19: visual check only — not touched.
  - Screen 09: not touched.
*/

/* ════════════════════════════════════════════════════════════════════════════
   961–1100px portrait
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 961px) and (max-width: 1100px) and (orientation: portrait) {

  /* ── Screen 08 / #player: hide CD, two-column split ── */

  /* Hide CD disc — it consumes too much vertical height on tablet portrait */
  #player .player-cd-side {
    display: none !important;
  }

  /* Restructure #player as two-column grid: left = header, right = tracks */
  #player {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    gap: 0;
    align-items: start;
    padding: 5vh var(--col-pad) 6vh;
  }

  /* Left column: header — overline, title, rule, subtitle */
  #player .player-header {
    display: block !important;
    text-align: left;
    padding-right: 24px;
    margin-bottom: 0;
  }

  #player .player-left {
    width: 100%;
    max-width: 360px;
    padding-right: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #player .player-overline {
    text-align: left;
    margin-bottom: 12px;
  }

  #player .player-title {
    text-align: left;
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 12px;
  }

  #player .player-rule {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 12px;
  }

  #player .player-subtitle {
    text-align: left;
    max-width: 300px;
    font-size: clamp(12px, 1.1vw, 13px);
  }

  /* Right column: track grid — compact two-column */
  #player .track-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: none;
    margin: 0;
    width: 100%;
    border-top: 1px solid rgba(253,224,139,.14);
  }

  #player .track-col {
    padding: 16px 14px 14px;
    border-left: 1px solid rgba(253,224,139,.10);
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col:first-child {
    border-left: none;
  }

  #player .track-col:nth-child(2) {
    border-right: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col::before,
  #player .track-col::after {
    display: none;
  }

  #player .track-name {
    font-size: clamp(14px, 1.3vw, 16px);
    margin-bottom: 6px;
  }

  #player .track-desc {
    font-size: clamp(11px, 0.9vw, 12px);
    margin-bottom: 6px;
    line-height: 1.4;
  }

  #player .waveform {
    height: 34px;
    margin-bottom: 6px;
  }

  #player .track-bar-wrap {
    margin-top: auto;
  }

  #player .track-footer {
    padding-top: 3px;
  }

  #player .track-btn {
    width: 38px;
    height: 38px;
    padding: 0;
  }


  /* ── Screen 20 / #formats-integration: micro vertical padding reduction ── */

  #formats-integration .fi-panel {
    padding: clamp(20px, 2.6vh, 30px) clamp(20px, 2.2vw, 28px);
  }

  #formats-integration .fi-title {
    font-size: clamp(18px, 2vw, 24px);
    margin-bottom: 10px;
  }

  #formats-integration .fi-btn {
    padding: 14px 40px;
    font-size: 10px;
  }


  /* ── Screen 23 / #why-argument: reinforced editorial split ── */

  #why-argument .why-argument-inner {
    grid-template-columns: 30% 1fr;
    gap: clamp(40px, 4.6vw, 60px);
  }

  #why-argument .why-argument-header {
    text-align: left;
    align-items: flex-start;
  }

  #why-argument .why-argument-subtitle {
    font-size: clamp(26px, 3vw, 38px);
    max-width: 340px;
  }

  #why-argument .why-argument-list {
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
    margin: 0;
  }

  #why-argument .why-argument-item {
    padding: clamp(16px, 2vh, 24px) 0;
    border-bottom: 1px solid rgba(253,224,139,.08);
  }

  #why-argument .why-argument-item:last-child {
    border-bottom: none;
  }

  #why-argument .why-argument-title {
    font-size: clamp(15px, 1.3vw, 18px);
    margin-bottom: 0;
  }

  #why-argument .why-argument-text {
    font-size: clamp(12px, 0.9vw, 13px);
    line-height: 1.55;
    max-width: 520px;
  }

  #why-argument .why-cta {
    grid-column: 1 / 2;
    margin-top: clamp(22px, 2.8vh, 32px);
    display: flex;
    justify-content: flex-start;
  }


  /* ── Screen 25 / #portfolio-map: stronger editorial index ── */

  #portfolio-map .pm-grid {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
  }

  #portfolio-map .pm-col {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    gap: 0;
    padding: clamp(26px, 3.2vh, 36px) clamp(24px, 2.6vw, 36px);
    border-right: none;
    border-bottom: 1px solid rgba(253,224,139,.10);
    position: relative;
    align-items: start;
  }

  #portfolio-map .pm-col:last-child {
    border-bottom: none;
  }

  #portfolio-map .pm-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-40) 30%, var(--gold) 55%, var(--gold-40) 80%, transparent 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }

  #portfolio-map .pm-col:hover::before {
    opacity: 1;
  }

  #portfolio-map .pm-col::after {
    display: none;
  }

  /* Left label area */
  #portfolio-map .pm-col-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0;
    padding-right: 20px;
    position: relative;
  }

  /* Vertical line between left label and right content */
  #portfolio-map .pm-col-header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--gold-20);
  }

  #portfolio-map .pm-col-num {
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--gold-40);
    margin-bottom: 2px;
  }

  #portfolio-map .pm-col-title {
    font-family: var(--font-d);
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--text-80);
    line-height: 1.15;
  }

  /* Right content area */
  #portfolio-map .pm-event-list,
  #portfolio-map .pm-partners,
  #portfolio-map .pm-upcoming-list {
    padding-left: 20px;
  }

  #portfolio-map .pm-event,
  #portfolio-map .pm-partner,
  #portfolio-map .pm-upcoming {
    padding: 10px 0;
    gap: 3px;
  }

  #portfolio-map .pm-event-name,
  #portfolio-map .pm-partner-name,
  #portfolio-map .pm-upcoming-name {
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: .03em;
  }

  #portfolio-map .pm-event-type,
  #portfolio-map .pm-partner-role,
  #portfolio-map .pm-upcoming-ctx {
    font-size: clamp(12px, 0.9vw, 13px);
    color: var(--gold-40);
  }

  /* Thin divider between groups */
  #portfolio-map .pm-col {
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #portfolio-map .pm-col:last-child {
    border-bottom: none;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   761–960px portrait
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 761px) and (max-width: 960px) and (orientation: portrait) {

  /* ── Screen 08 / #player: hide CD, compact stack ── */

  /* Hide CD disc */
  #player .player-cd-side {
    display: none !important;
  }

  /* Compact overall padding */
  #player {
    padding: 4vh var(--col-pad) 5vh;
    display: flex !important;
    flex-direction: column;
  }

  /* Header — left-aligned, compact */
  #player .player-header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 2.6vh;
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #player .player-left {
    width: 100%;
    max-width: 500px;
    padding-right: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #player .player-overline {
    text-align: left;
    margin-bottom: 10px;
  }

  #player .player-title {
    text-align: left;
    font-size: clamp(26px, 3.8vw, 34px);
    margin-bottom: 10px;
  }

  #player .player-rule {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
  }

  #player .player-subtitle {
    text-align: left;
    max-width: 400px;
    font-size: clamp(12px, 1.3vw, 13px);
  }

  /* Track grid — single column, compact cards */
  #player .track-grid {
    display: flex !important;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid rgba(253,224,139,.14);
  }

  #player .track-col {
    padding: 12px 14px 10px;
    border-left: none;
    border-bottom: 1px solid rgba(253,224,139,.10);
  }

  #player .track-col:first-child {
    border-left: none;
  }

  #player .track-col::before,
  #player .track-col::after {
    display: none;
  }

  #player .track-name {
    font-size: clamp(13px, 1.6vw, 15px);
    margin-bottom: 5px;
  }

  #player .track-desc {
    font-size: clamp(11px, 1.1vw, 12px);
    margin-bottom: 5px;
    line-height: 1.4;
  }

  #player .waveform {
    height: 30px;
    margin-bottom: 5px;
  }

  #player .track-footer {
    padding-top: 3px;
  }

  #player .track-btn {
    width: 34px;
    height: 34px;
    padding: 0;
  }


  /* ── Screen 20 / #formats-integration: micro vertical padding reduction ── */

  #formats-integration .fi-panel {
    padding: clamp(18px, 2.4vh, 26px) clamp(16px, 2vw, 22px);
  }

  #formats-integration .fi-title {
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 8px;
  }

  #formats-integration .fi-btn {
    padding: 12px 32px;
    font-size: 10px;
  }


  /* ── Screen 23 / #why-argument: editorial stack, left-aligned ── */

  #why-argument .why-argument-mobile-image {
    display: none !important;
  }

  #why-argument .why-argument-inner {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    max-width: 620px;
    margin: 0 auto;
  }

  #why-argument .why-argument-header {
    text-align: left;
    align-items: flex-start;
    margin-bottom: clamp(24px, 3vh, 34px);
    padding: 0;
    border: 0;
  }

  #why-argument .why-argument-subtitle {
    text-align: left;
    font-size: clamp(26px, 3.8vw, 36px);
    line-height: 1.08;
    max-width: 480px;
  }

  #why-argument .why-argument-subtitle-line {
    display: block;
    white-space: normal;
  }

  #why-argument .why-argument-list {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
    margin: 0;
  }

  #why-argument .why-argument-item {
    padding: clamp(14px, 1.8vh, 20px) 0;
    border-bottom: 1px solid rgba(253,224,139,.08);
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #why-argument .why-argument-item:last-child {
    border-bottom: none;
  }

  #why-argument .why-argument-item::before {
    display: none;
  }

  #why-argument .why-argument-title {
    font-size: clamp(14px, 1.6vw, 17px);
    margin-bottom: 0;
  }

  #why-argument .why-argument-text {
    font-size: clamp(11px, 1.2vw, 12px);
    line-height: 1.55;
    max-width: 500px;
  }

  #why-argument .why-cta {
    margin-top: clamp(20px, 2.6vh, 30px);
    display: flex;
    justify-content: flex-start;
  }


  /* ── Screen 25 / #portfolio-map: editorial feel, left-aligned ── */

  #portfolio-map .pm-grid {
    display: flex !important;
    flex-direction: column;
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
  }

  #portfolio-map .pm-col {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    gap: 0;
    padding: clamp(20px, 2.6vh, 30px) clamp(16px, 2vw, 24px);
    border-right: none;
    border-bottom: 1px solid rgba(253,224,139,.10);
    position: relative;
    align-items: start;
  }

  #portfolio-map .pm-col:last-child {
    border-bottom: none;
  }

  #portfolio-map .pm-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-40) 30%, var(--gold) 55%, var(--gold-40) 80%, transparent 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }

  #portfolio-map .pm-col:hover::before {
    opacity: 1;
  }

  #portfolio-map .pm-col::after {
    display: none;
  }

  #portfolio-map .pm-col-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0;
    padding-right: 14px;
    position: relative;
  }

  /* Vertical line between left label and right content */
  #portfolio-map .pm-col-header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--gold-20);
  }

  #portfolio-map .pm-col-num {
    font-family: var(--font-b);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--gold-40);
    flex-shrink: 0;
  }

  #portfolio-map .pm-col-title {
    font-family: var(--font-d);
    font-weight: 400;
    font-size: clamp(20px, 3vw, 28px);
    letter-spacing: .04em;
    text-transform: none;
    color: var(--text-80);
    line-height: 1.15;
  }

  /* Right content area */
  #portfolio-map .pm-event-list,
  #portfolio-map .pm-partners,
  #portfolio-map .pm-upcoming-list {
    padding-left: 14px;
  }

  #portfolio-map .pm-event,
  #portfolio-map .pm-partner,
  #portfolio-map .pm-upcoming {
    padding: 8px 0;
    gap: 3px;
  }

  #portfolio-map .pm-event-name,
  #portfolio-map .pm-partner-name,
  #portfolio-map .pm-upcoming-name {
    font-size: clamp(15px, 2vw, 18px);
    letter-spacing: .03em;
  }

  #portfolio-map .pm-event-type,
  #portfolio-map .pm-partner-role,
  #portfolio-map .pm-upcoming-ctx {
    font-size: clamp(10px, 1.1vw, 12px);
    color: var(--gold-40);
  }
}