/*
 * Guest home — landing "ram" (02 §7, Р15, В29): the depo0/?tpl=ram template of the demo album
 * ported block by block (view/landings/ram/*.php, js/pages/home/*.js). One file per page bundle:
 * the CSS of every block is concatenated here, scoped by [data-page="home2"] (01 §6.3).
 *
 * Owner edits (02 §7) applied here:
 *   - the shared background stays visible: blocks have no underlay unless one is asked for
 *     (--home-panel, transparent by the owner's decision of 2026-11-01);
 *   - blok31: no light ground, covers may fly over other elements; the about panel is narrower and
 *     90 % opaque; the full cover is positioned statically (object-position, В29);
 *   - blok7 (FAQ) fits one screen; blok44 has no underlay and is one screen high;
 *   - blok8 has no text part, the banner sits on the footer, its light reaches the footer.
 * The home footer (layers: floor of covers, veil, DEPO word, shade, content) is styled at the end
 * for body[data-footer="home"] (the footer is outside <main>).
 *
 * Fonts (OFL, self-hosted, CSP font-src 'self'): Archivo latin is preloaded with the page bundle
 * (fonts/pages/home-archivo.woff2); the rest lives in fonts/landing/ram/.
 */
@layer page {
  /* ── fonts ─────────────────────────────────────────────────────────────────────────────── */
  @font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
    src: url("/demo51/fonts/pages/home-archivo.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
    src: url("/demo51/fonts/landing/ram/archivo-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("/demo51/fonts/landing/ram/bricolage.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("/demo51/fonts/landing/ram/bricolage-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/demo51/fonts/landing/ram/instrument-serif.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/demo51/fonts/landing/ram/instrument-serif-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/demo51/fonts/landing/ram/lato-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/demo51/fonts/landing/ram/lato-400-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/demo51/fonts/landing/ram/lato-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/demo51/fonts/landing/ram/lato-700-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Red Hat Display"; font-style: normal; font-weight: 500 900; font-display: swap;
    src: url("/demo51/fonts/landing/ram/redhat-display.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Red Hat Display"; font-style: normal; font-weight: 500 900; font-display: swap;
    src: url("/demo51/fonts/landing/ram/redhat-display-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Red Hat Text"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/demo51/fonts/landing/ram/redhat-text.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Red Hat Text"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/demo51/fonts/landing/ram/redhat-text-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* ── keyframes (top level of the layer, not nested) ───────────────────────────────────── */
  @keyframes h15-rise { from { opacity: 0; translate: 0 22%; } }
  @keyframes h15-iris { from { opacity: 0; scale: 0.6; } }
  @keyframes h15-settle { from { opacity: 0; scale: 1.6; } }
  @keyframes h15-fade { from { opacity: 0; translate: 0 14px; } }
  @keyframes h15-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes home-floor {
    from { transform: rotateX(var(--fh-tilt)) translate3d(0, 0, 0); }
    to { transform: rotateX(var(--fh-tilt)) translate3d(0, calc(-33.333% - var(--fh-gap) / 3), 0); }
  }

  /* ── the page ground is the shared background (.dp-bg): a body background would cover it ─ */
  body:has(> #page[data-page="home2"]) { color-scheme: dark; }

  [data-page="home2"] {
    /* no underlay on blocks unless asked for (owner, 2026-11-01) */
    --home-panel: transparent;
    --home-clear: transparent;

    /* depo0 colours (css/colors.css of the template) */
    --d0-ground: #18171a; --d0-ink: #f2f0ea; --d0-soft: #b9b6ae; --d0-mute: #7d7a74;
    --d0-faq-ground: var(--home-panel); --d0-faq-ink: #f2f0ea; --d0-faq-line: rgb(255 255 255 / 0.16); --d0-faq-sign: #ffb500;
    --h15-ground: #0b1a12; --h15-field: #10261a; --h15-ink: #eef0ea; --h15-soft: #b8c3b9; --h15-yellow: #ffb500;
    --k-ground: #0c110f; --k-ink: #f1ebe0; --k-soft: #b4afa3; --k-warm: #ffcf94; --k-yellow: #ffb500; --k-dark: #0c110f;
    --s-ink: #edeae3; --s-soft: #c9c6bf; --s-deep: #13321f; --s-green: #469a58; --s-yellow: #ffb500; --s-on-deep: #edeae3;
    --h20-ink: #eeeee4; --h20-soft: #b9bfae; --h20-green: #469a58; --h20-yellow: #ffb500; --h20-dark: #0c1811; --h20-ground-3: #173022;
    /* fonts (css/fonts.css of the template) */
    --d0-font-text: "Lato", system-ui, sans-serif;
    --d0-font-display: "Schibsted Grotesk", "Lato", system-ui, sans-serif;
    --h15-font: "Archivo", "Lato", system-ui, sans-serif;
    --k-serif: "Instrument Serif", Georgia, serif;
    --k-sans: "Lato", system-ui, sans-serif;
    --s-font: "Bricolage Grotesque", "Lato", system-ui, sans-serif;
    --h20-display: "Red Hat Display", "Lato", system-ui, sans-serif;
    --h20-text: "Red Hat Text", "Lato", system-ui, sans-serif;

    &.dp-slot { background: transparent; color: var(--d0-ink); }

    /* ═══ blok1 — Through the lens ═══════════════════════════════════════════════════════ */
    .h15-lens {
      --h15-edge: clamp(16px, 3.4vw, 56px);
      --h15-ease: cubic-bezier(.2, .7, .1, 1);
      --h15-banner: url("/demo51/img/landing/ram/banner-1920.webp");
      /* hello: edit the look of this block here */
      --hello-font: var(--dp-font-brand);
      --hello-word-font: var(--dp-font-brand);
      --hello-ink: var(--h15-ink);
      --hello-accent: #ffb500;
      --hello-letters-fallback: #24402c;
      --hello-o-hole: 0.18em; /* = O_RADIUS in lens.js */
      --hello-word-weight: 700;
      --hello-word-tracking: 0;
      --hello-word-size: min(28.5vw, 44svh);
      --hello-top-gap: clamp(14px, 3.5vh, 40px);
      --hello-word-shift: -0.126em; /* the glyph bearings push the word right; this centres the ink */
      --hello-word-line: 0.86;
      --hello-title-gap: clamp(2px, 1vh, 12px);
      --hello-map-title-size: clamp(18px, 2vw, 30px);
      --hello-map-title-gap: clamp(20px, 4.5vh, 52px);
      --hello-map-width: 720px;
      --hello-bottom-gap: clamp(12px, 2.4vh, 28px);
      --hello-intro-time: 1200ms;
      --hello-map-item-size: clamp(18px, 1.7vw, 24px);
      --hello-map-ink: var(--hello-accent);
      --hello-map-hover: var(--hello-ink);
      --hello-map-eye: clamp(120px, 12vw, 210px);
      --hello-map-item-narrow: clamp(12px, 3.7vw, 18px);
      --hello-slogan-size-narrow: min(5.6vw, 46px);
      --hello-word-size-narrow: min(33vw, 36svh);
      --hello-word-extra-bold: 0.02em; /* the font stops at 700: a stroke makes the letters heavier */
      --hello-slogan-display: block;
      --hello-slogan-size: 46px;
      --hello-slogan-weight: 700;
      --hello-slogan-tracking: 0.04em;
      --hello-slogan-transform: uppercase;
      --hello-lead-display: none;
      --hello-lead-size: clamp(18px, 1.4vw, 21px);
      --h15-lens-screens: 3.3;
      position: relative; color: var(--hello-ink); font-family: var(--hello-font); font-size: 18px; line-height: 1.5; overflow-x: clip;
      /* pulled up under the sticky site header: it opens the page (as in the source) */
      margin-top: calc(-1 * var(--dp-hdr));
    }
    .h15-lens :where(*) { color: inherit; }
    .h15-lens .h15-h2, .h15-what .h15-h2 {
      margin: 0; font: 800 clamp(42px, 6.2vw, 108px)/0.92 var(--h15-font); font-stretch: 112%;
      letter-spacing: -0.035em; text-wrap: balance;
    }
    .h15-lens__stage { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
    .h15-lens.h15-motion { height: calc(var(--h15-lens-screens) * 100vh); height: calc(var(--h15-lens-screens) * 100svh); }
    .h15-motion .h15-lens__stage { position: sticky; top: 0; }
    .h15-lens__scene {
      position: absolute; inset: 0; z-index: 0;
      clip-path: circle(var(--r, 0px) at var(--cx, 78%) var(--cy, 52%));
      will-change: clip-path;
    }
    .h15-lens__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 42%; will-change: transform; }
    .h15-lens__front {
      position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto 1fr auto;
      padding: calc(var(--dp-hdr) + var(--hello-top-gap)) var(--h15-edge) var(--hello-bottom-gap);
    }
    .h15-lens__title { margin: 0; align-self: start; display: grid; justify-items: center; gap: var(--hello-title-gap); }
    .h15-word {
      display: flex; align-items: baseline; justify-content: center;
      font: var(--hello-word-weight) var(--hello-word-size)/var(--hello-word-line) var(--hello-word-font); letter-spacing: var(--hello-word-tracking);
      position: relative; will-change: transform; margin-left: var(--hello-word-shift);
    }
    .h15-word__piece {
      /* the padding keeps glyph overhangs inside the box the photo is clipped to; O_PAD in lens.js */
      display: inline-block; padding-inline: 0.04em; margin-inline: -0.04em; color: transparent;
      -webkit-text-stroke: var(--hello-word-extra-bold) transparent;
      background: var(--hello-letters-fallback) var(--h15-banner) 42% 50% / cover no-repeat;
      -webkit-background-clip: text; background-clip: text;
    }
    /* fills the oval counter of the glyph up to a round opening; placed by lens.js */
    .h15-word__hole {
      display: none; position: absolute; width: 0.44em; height: 0.66em; border-radius: 50%;
      background: var(--hello-letters-fallback) var(--h15-banner) 42% 50% / cover no-repeat;
      -webkit-mask: radial-gradient(circle var(--hello-o-hole) at center, transparent 99%, #000 100%);
      mask: radial-gradient(circle var(--hello-o-hole) at center, transparent 99%, #000 100%);
    }
    .h15-lens__slogan {
      display: var(--hello-slogan-display);
      font: var(--hello-slogan-weight) var(--hello-slogan-size)/1.1 var(--hello-font);
      letter-spacing: var(--hello-slogan-tracking); text-transform: var(--hello-slogan-transform); color: var(--hello-accent);
    }
    .h15-map { position: relative; align-self: stretch; display: flex; flex-direction: column; min-height: 0; margin: var(--hello-map-title-gap) auto 0; width: min(100%, var(--hello-map-width)); text-align: center; font-family: var(--hello-font); color: var(--hello-map-ink); }
    .h15-map__title { flex: none; margin: 0 0 clamp(6px, 1.2vh, 14px); font-size: var(--hello-map-title-size); font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
    .h15-map__list { position: relative; flex: 1; min-height: calc(var(--hello-map-eye) * 1.1); }
    .h15-map__eye { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: var(--hello-map-eye); height: auto; }
    /* the roles sit on a ring around the logo (a pentagon, its point at the bottom of the screen) */
    .h15-map__item { position: absolute; white-space: nowrap; }
    .h15-map__item--tl { left: 26%; top: 4%; translate: -50% 0; }
    .h15-map__item--tr { left: 74%; top: 4%; translate: -50% 0; }
    .h15-map__item--l { left: 6%; top: 58%; translate: 0 -50%; }
    .h15-map__item--r { right: 6%; top: 58%; translate: 0 -50%; }
    .h15-map__item--b { left: 50%; bottom: 0; translate: -50% 0; }
    .h15-lens .h15-map__item { font-size: var(--hello-map-item-size); line-height: 1.2; text-transform: uppercase; color: var(--hello-map-ink); text-decoration: none; }
    .h15-lens a.h15-map__item { transition: color 200ms ease; }
    .h15-lens a.h15-map__item:hover { color: var(--hello-map-hover); }
    .h15-lens a.h15-map__item:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
    .h15-lens__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 48px; }
    .h15-lens__lead { display: var(--hello-lead-display); margin: 0; max-width: 46ch; font-family: var(--hello-font); font-size: var(--hello-lead-size); }
    .h15-lens__statement { position: relative; z-index: 2; padding: clamp(72px, 9vw, 140px) var(--h15-edge); }
    .h15-lens__statement p { margin: 28px 0 0; max-width: 44ch; font-size: clamp(18px, 1.4vw, 21px); }
    .h15-lens__statement .h15-h2 { max-width: 11ch; }
    /* until lens.js has the font and the photos measured nothing of the hello block shows (no jumps) */
    html[data-eye] & .h15-lens:not(.is-set) :is(.h15-lens__title, .h15-lens__scene, .h15-map) { visibility: hidden; }
    /* without the scene (no JS, reduced motion): the word is one screen, the statement follows */
    .h15-lens:not(.h15-motion) .h15-lens__stage { height: auto; min-height: 0; }
    .h15-lens:not(.h15-motion) .h15-lens__front { position: relative; min-height: 100vh; min-height: 100svh; }
    .h15-motion .h15-lens__statement {
      position: absolute; left: 0; bottom: 0; width: min(100%, 860px); background: none;
      padding: 0 var(--h15-edge) clamp(40px, 10vh, 120px); opacity: 0; visibility: hidden;
    }
    @media (max-width: 700px) {
      .h15-lens { font-size: 17px; }
      .h15-lens__foot { gap: 18px; }
    }
    @media (max-width: 700px), (max-aspect-ratio: 5 / 6) {
      .h15-word { font-size: var(--hello-word-size-narrow); }
      .h15-lens { --hello-slogan-size: var(--hello-slogan-size-narrow); --hello-map-item-size: var(--hello-map-item-narrow); }
    }
    @media (prefers-reduced-motion: no-preference) {
      /* one intro per session (lens.js): the word rides out from under the menu, the map settles */
      .h15-lens.is-intro .h15-lens__title, .h15-lens.is-intro .h15-lens__scene { translate: 0 var(--hello-intro-word); }
      .h15-lens.is-intro .h15-map__title { translate: 0 var(--hello-intro-map); }
      .h15-lens.is-intro .h15-map__list { opacity: 0; }
      .h15-lens.is-play :is(.h15-lens__title, .h15-lens__scene, .h15-map__title) { transition: translate var(--hello-intro-time) var(--h15-ease); }
      .h15-lens.is-play .h15-map__list { transition: opacity 600ms ease calc(var(--hello-intro-time) * 0.6); }
    }

    /* ═══ blok2 — Your role, in focus ══════════════════════════════════════════════════════ */
    .h15-what {
      --h15-edge: clamp(16px, 3.4vw, 56px);
      --h15-ease: cubic-bezier(.2, .7, .1, 1);
      color: var(--h15-ink); font-family: var(--h15-font); font-size: 18px; line-height: 1.5; overflow-x: clip;
      padding: clamp(96px, 11vw, 190px) 0 clamp(80px, 9vw, 150px); background: var(--home-clear);
    }
    .h15-what :where(*) { color: inherit; }
    .h15-what .h15-wrap { width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 var(--h15-edge); }
    .h15-what ul { list-style: none; margin: 0; padding: 0; }
    .h15-what .h15-btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
      border-radius: 999px; background: var(--h15-yellow); color: #14130f; text-decoration: none;
      font: 700 16px/1 var(--h15-font); font-stretch: 105%;
      transition: background 220ms ease, transform 160ms ease, color 220ms ease;
    }
    .h15-what .h15-btn:hover { background: var(--h15-ink); }
    .h15-what .h15-btn:active { transform: scale(0.96); }
    .h15-what .h15-link {
      display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--h15-font);
      text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
      text-decoration-color: var(--h15-yellow); transition: color 200ms ease, text-underline-offset 200ms ease;
    }
    .h15-what .h15-link:hover { color: var(--h15-yellow); text-underline-offset: 10px; }
    .h15-what :is(a, button, input):focus-visible { outline: 3px solid var(--h15-yellow); outline-offset: 4px; }
    .h15-what__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 120px); align-items: center; }
    .h15-what__text .h15-h2 { max-width: 13ch; }
    .h15-what__lead { margin: 28px 0 0; max-width: 40ch; font-size: clamp(18px, 1.4vw, 21px); }
    .h15-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
    .h15-role {
      min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgb(238 240 234 / 0.32);
      background: none; color: var(--h15-ink); font: 600 16px/1 var(--h15-font); cursor: pointer;
      transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 160ms ease;
    }
    .h15-role:hover { border-color: var(--h15-ink); }
    .h15-role:active { transform: scale(0.96); }
    .h15-role[aria-pressed="true"] { background: var(--h15-ink); border-color: var(--h15-ink); color: var(--h15-ground); }
    .h15-dial { margin-top: 44px; max-width: 520px; }
    .h15-dial__label { display: block; }
    .h15-dial__row { display: flex; justify-content: space-between; align-items: baseline; font: 600 16px/1.2 var(--h15-font); color: var(--h15-soft); }
    .h15-dial__value { font: 800 clamp(28px, 2.6vw, 44px)/1 var(--h15-font); font-stretch: 112%; color: var(--h15-yellow); font-variant-numeric: tabular-nums; }
    .h15-dial__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 10px 0 0; background: none; cursor: pointer; }
    .h15-dial__range::-webkit-slider-runnable-track { height: 2px; background: rgb(238 240 234 / 0.35); border-radius: 2px; }
    .h15-dial__range::-moz-range-track { height: 2px; background: rgb(238 240 234 / 0.35); border-radius: 2px; }
    .h15-dial__range::-webkit-slider-thumb {
      -webkit-appearance: none; width: 30px; height: 30px; margin-top: -14px; border-radius: 50%;
      background: var(--h15-ground); border: 3px solid var(--h15-yellow); box-shadow: inset 0 0 0 6px var(--h15-ground), inset 0 0 0 20px var(--h15-yellow);
      transition: transform 160ms ease;
    }
    .h15-dial__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--h15-yellow); border: 3px solid var(--h15-ground); }
    .h15-dial__range:active::-webkit-slider-thumb { transform: scale(1.15); }
    .h15-dial__ticks { display: flex; justify-content: space-between; margin: 2px 9px 0; font: 500 15px/1 var(--h15-font); color: var(--h15-soft); font-variant-numeric: tabular-nums; }
    .h15-dial__ticks span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
    .h15-gives { margin-top: 40px; max-width: 46ch; }
    .h15-gives[hidden] { display: none; }
    .h15-gives__title { margin: 0 0 14px; font: 700 21px/1.2 var(--h15-font); }
    .h15-gives li { position: relative; padding: 6px 0 6px 28px; }
    .h15-gives li::before { content: ""; position: absolute; left: 2px; top: 0.95em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--h15-yellow); }
    .h15-motion .h15-gives:not([hidden]) li { animation: h15-up 600ms var(--h15-ease) both; }
    .h15-motion .h15-gives li:nth-child(2) { animation-delay: 80ms; }
    .h15-motion .h15-gives li:nth-child(3) { animation-delay: 160ms; }
    .h15-what__frame {
      --ap: 35.5%; position: relative; aspect-ratio: 4 / 5; max-height: 88svh; width: 100%; justify-self: center;
      border-radius: 6px; overflow: hidden; background: var(--h15-field);
    }
    /* the rim of the aperture: a hairline where the opening ends */
    .h15-what__frame::before {
      content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(var(--ap) * 2.2638); aspect-ratio: 1;
      translate: -50% -50%; border-radius: 50%; border: 1px solid rgb(255 181 0 / 0.55); pointer-events: none;
      transition: width 750ms var(--h15-ease), opacity 400ms ease;
    }
    .h15-what__frame.is-wide::before { opacity: 0; }
    /* 02 §7: another background photo; scaled past the blur so its edges leave no stripes */
    .h15-what__ghost {
      position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%;
      filter: grayscale(1) brightness(0.32) blur(3px); transform: scale(1.12); opacity: 0.7;
    }
    .h15-what__stops { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; transition: opacity 500ms ease; }
    .h15-what__stops circle { fill: none; stroke: rgb(238 240 234 / 0.22); stroke-width: 1px; vector-effect: non-scaling-stroke; }
    .h15-what__frame.is-wide .h15-what__stops { opacity: 0; }
    .h15-what__img {
      position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; opacity: 0;
      clip-path: circle(var(--ap) at 50% 50%); transition: clip-path 750ms var(--h15-ease), opacity 0ms linear 380ms;
    }
    .h15-what__img[data-ap-img="0"] { object-position: 72% 40%; }
    .h15-what__img.is-on { opacity: 1; transition: clip-path 750ms var(--h15-ease), opacity 0ms; }
    .h15-what__cap {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px;
      padding: 80px clamp(18px, 2.4vw, 36px) clamp(18px, 2.4vw, 32px);
      background: linear-gradient(transparent, rgb(6 18 11 / 0.72));
      opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity 400ms ease, translate 600ms var(--h15-ease);
    }
    .h15-what__frame.is-wide .h15-what__cap, .h15-what:not(.h15-motion) .h15-what__cap { opacity: 1; translate: 0 0; pointer-events: auto; }
    .h15-what__name { font: 800 clamp(30px, 3.4vw, 56px)/0.95 var(--h15-font); font-stretch: 112%; letter-spacing: -0.03em; }
    .h15-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 56px); margin-top: clamp(80px, 9vw, 150px); }
    .h15-way__title { margin: 0 0 10px; font: 800 clamp(26px, 2.4vw, 40px)/1 var(--h15-font); font-stretch: 112%; letter-spacing: -0.025em; }
    .h15-way p { margin: 0 0 6px; max-width: 32ch; color: var(--h15-soft); }
    .h15-what.h15-motion [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity 700ms ease, translate 900ms var(--h15-ease); }
    .h15-what.h15-motion [data-reveal].is-in { opacity: 1; translate: 0 0; }
    .h15-motion .h15-way:nth-child(2) { transition-delay: 90ms; }
    .h15-motion .h15-way:nth-child(3) { transition-delay: 180ms; }
    .h15-motion .h15-way:nth-child(4) { transition-delay: 270ms; }
    @media (max-width: 1100px) { .h15-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 900px) {
      .h15-what__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
      .h15-what__text { display: contents; }
      .h15-what__text .h15-h2 { order: 1; }
      .h15-what__lead { order: 2; }
      .h15-what__frame { order: 3; max-height: none; max-width: 560px; margin-top: 36px; justify-self: start; }
      .h15-dial { order: 4; margin-top: 28px; width: 100%; max-width: 560px; justify-self: start; }
      .h15-roles { order: 5; margin-top: 28px; }
      .h15-gives { order: 6; }
    }
    @media (max-width: 700px) {
      .h15-what { font-size: 17px; }
      .h15-ways { grid-template-columns: minmax(0, 1fr); }
      .h15-role { padding: 0 16px; }
    }

    /* ═══ blok22 — Everyone on the call sheet ══════════════════════════════════════════════ */
    .h17-roles {
      --k-edge: clamp(16px, 3.4vw, 56px);
      --k-ease: cubic-bezier(.2, .7, .15, 1);
      color: var(--k-ink); font-family: var(--k-sans); overflow-x: clip;
      padding: clamp(120px, 13vw, 220px) 0 clamp(96px, 11vw, 180px); background: var(--home-panel);
    }
    .h17-roles :where(*), .h17-mags :where(*), .h17-join :where(*) { color: inherit; }
    :is(.h17-roles, .h17-mags) ul { list-style: none; margin: 0; padding: 0; }
    :is(.h17-roles, .h17-mags) .h17-wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--k-edge); }
    :is(.h17-roles, .h17-mags) .h17-title { margin: 0; font: 400 clamp(40px, 5vw, 88px)/1 var(--k-serif); letter-spacing: -0.02em; text-wrap: balance; }
    .h17-roles .h17-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
    .h17-roles .h17-head p { margin: 0; max-width: 38ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }
    .h17-roles .h17-link {
      display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--k-sans);
      text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
      text-decoration-color: rgb(255 207 148 / 0.6); transition: color 200ms ease, text-decoration-color 200ms ease;
    }
    .h17-roles .h17-link:hover { color: var(--k-warm); text-decoration-color: var(--k-warm); }
    :is(.h17-roles, .h17-mags, .h17-join) :is(a, button):focus-visible { outline: 2px solid var(--k-warm); outline-offset: 3px; }
    .h17-roles__set { display: grid; gap: 56px; }
    .h17-role { position: relative; scroll-margin-top: var(--dp-hdr); }
    .h17-roles { scroll-margin-top: var(--dp-hdr); }
    .h17-role__pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #050706; }
    .h17-role__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
    .h17-role:first-child .h17-role__pic img { object-position: 70% 40%; }
    .h17-role__dim { filter: grayscale(1) brightness(0.3); }
    .h17-role__lit { transition: opacity 1100ms ease, transform 1400ms var(--k-ease); }
    .h17-role__name { margin: 20px 0 0; font: 400 clamp(32px, 3.1vw, 46px)/1 var(--k-serif); letter-spacing: -0.015em; }
    .h17-role__name button { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
    .h17-role__body ul { display: grid; gap: 10px; margin: 18px 0 14px; }
    .h17-role__body li { position: relative; padding-left: 22px; max-width: 40ch; font: 400 18px/1.5 var(--k-sans); color: #d6d0c4; }
    .h17-role__body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--k-warm); opacity: 0.85; }
    .h17-js .h17-role__lit { opacity: 0; }
    .h17-js .h17-role.is-lit .h17-role__lit { opacity: 1; }
    @media (min-width: 900px) {
      .h17-js .h17-roles__set { display: flex; gap: 10px; height: min(78vh, 780px); min-height: 560px; }
      .h17-js .h17-role { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 2px; transition: flex-grow 900ms var(--k-ease); }
      .h17-js .h17-role.is-open { flex-grow: 4.4; }
      .h17-js .h17-role__pic { position: absolute; inset: 0; aspect-ratio: auto; }
      .h17-js .h17-role__pic::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(5 7 6 / 0.85)); }
      .h17-js .h17-role__lit { transform: scale(1.06); }
      .h17-js .h17-role.is-lit .h17-role__lit { opacity: 0; }
      .h17-js .h17-role.is-open .h17-role__lit { opacity: 1; transform: none; }
      .h17-js .h17-role__name { position: absolute; inset: 0; margin: 0; }
      .h17-js .h17-role__name button { position: absolute; inset: 0; z-index: 1; }
      .h17-js .h17-role__name button span {
        position: absolute; left: 20px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg);
        white-space: nowrap; transition: color 300ms ease;
      }
      .h17-js .h17-role:not(.is-open) .h17-role__name button:hover span { color: var(--k-warm); }
      .h17-js .h17-role__body {
        position: absolute; left: 96px; right: 28px; bottom: 26px; z-index: 2; pointer-events: none;
        opacity: 0; visibility: hidden; transform: translate3d(0, 16px, 0);
        transition: opacity 400ms ease, transform 600ms var(--k-ease), visibility 0s 400ms;
      }
      .h17-js .h17-role.is-open .h17-role__body {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
        transition: opacity 700ms ease 450ms, transform 900ms var(--k-ease) 450ms, visibility 0s;
      }
      .h17-js .h17-role__body ul { margin-top: 0; min-width: 30ch; }
    }
    @media (max-width: 899px) { .h17-roles .h17-head { grid-template-columns: minmax(0, 1fr); } }

    /* ═══ blok23 — Magazines on DEPO ═══════════════════════════════════════════════════════ */
    .h17-mags {
      --k-edge: clamp(16px, 3.4vw, 56px);
      --k-ease: cubic-bezier(.2, .7, .15, 1);
      color: var(--k-ink); font-family: var(--k-sans); overflow-x: clip;
      padding: clamp(110px, 12vw, 200px) 0 clamp(96px, 10vw, 170px); background: var(--home-clear);
    }
    .h17-mags__side > p { margin: 22px 0 0; max-width: 38ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }
    .h17-mags__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px clamp(32px, 5vw, 96px); align-items: start; }
    .h17-mags__side { position: sticky; top: calc(var(--dp-hdr) + 40px); }
    .h17-mags .h17-mags__names { display: grid; margin-top: 36px; }
    .h17-mag {
      display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 48px; padding: 6px 0;
      background: none; border: 0; cursor: pointer; text-align: left; color: var(--k-soft);
      font: 400 clamp(24px, 2vw, 30px)/1.15 var(--k-serif); transition: color 260ms ease, transform 400ms var(--k-ease);
    }
    .h17-mag::before {
      content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%;
      background: rgb(255 255 255 / 0.18); transition: background 300ms ease, box-shadow 300ms ease;
    }
    .h17-mag__count { margin-left: auto; font: 400 15px/1 var(--k-sans); color: var(--k-soft); font-variant-numeric: tabular-nums; }
    .h17-mag:hover { color: var(--k-ink); transform: translateX(6px); }
    .h17-mag.is-on { color: var(--k-ink); }
    .h17-mag.is-on::before { background: var(--k-warm); box-shadow: 0 0 12px var(--k-warm); }
    .h17-mags .h17-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .h17-wall a { position: relative; display: block; overflow: hidden; border-radius: 2px; background: #050706; }
    .h17-wall img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--k-ease); }
    .h17-wall a:hover img { transform: scale(1.05); }
    .h17-wall__shade { position: absolute; inset: 0; background: rgb(6 9 8 / 0.86); opacity: 0; transition: opacity 600ms ease; }
    .h17-wall.is-filtered .h17-wall__item:not(.is-match) .h17-wall__shade { opacity: 1; }
    .h17-wall.is-filtered .h17-wall__item.is-match img { transform: scale(1.02); }
    @media (max-width: 1199px) { .h17-mags .h17-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
    @media (max-width: 899px) {
      .h17-mags__grid { grid-template-columns: minmax(0, 1fr); }
      .h17-mags__side { position: static; }
      .h17-mags .h17-mags__names { display: flex; gap: 6px 20px; flex-wrap: wrap; }
      .h17-mags__names li { flex: none; }
      .h17-mag { width: auto; font-size: 24px; }
      .h17-mag__count { display: none; }
      .h17-mags .h17-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    }

    /* ═══ blok31 — The Wall assembles ══════════════════════════════════════════════════════ */
    .h18-seq {
      --s-edge: clamp(16px, 3vw, 48px);
      --s-ease: cubic-bezier(.2, .7, .2, 1);
      --fs-hero: clamp(50px, 8.2vw, 140px);
      --fs-h2: clamp(40px, 5.4vw, 92px);
      --fs-text: clamp(18px, 1.25vw, 21px);
      --fs-small: 15px;
      --cols: 10; --rows: 3; --gap: 8px; --tools-h: 128px;
      position: relative; color: var(--s-ink); font-family: var(--s-font); font-optical-sizing: auto;
      background: var(--home-clear); /* 02 §7: no light ground */
    }
    .h18-seq :where(*) { color: inherit; }
    .h18-seq :is(ul, figure) { margin: 0; padding: 0; list-style: none; }
    .h18-seq img { display: block; }
    .h18-seq :is(a, button):focus-visible { outline: 3px solid var(--s-yellow); outline-offset: 3px; }
    .h18-title { margin: 0; font: 800 var(--fs-h2)/0.94 var(--s-font); letter-spacing: -0.045em; text-wrap: balance; }
    .h18-btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px;
      border: 0; border-radius: 999px; background: var(--s-green); color: #fff; cursor: pointer; text-decoration: none;
      font: 700 17px/1 var(--s-font); letter-spacing: -0.01em;
      transition: background 220ms ease, color 220ms ease, transform 160ms var(--s-ease);
    }
    .h18-btn:hover { background: var(--s-yellow); color: #14130f; }
    .h18-btn:active { transform: scale(0.96); }
    .h18-link {
      display: inline-flex; align-items: center; min-height: 44px; font: 700 17px/1.2 var(--s-font);
      text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
      text-decoration-color: var(--s-yellow); transition: color 200ms ease, text-underline-offset 200ms ease;
    }
    .h18-link:hover { color: var(--s-yellow); text-underline-offset: 4px; }
    .h18-stage {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "intro intro" "space space" "tools tools" "full about";
    }
    .h18-intro { grid-area: intro; padding: clamp(56px, 8vw, 120px) var(--s-edge) 48px; text-align: center; display: grid; justify-items: center; }
    .h18-hero { margin: 0; max-width: 11ch; font: 800 var(--fs-hero)/0.9 var(--s-font); letter-spacing: -0.05em; text-wrap: balance; }
    .h18-lead { margin: 28px 0 0; max-width: 40ch; font: 400 var(--fs-text)/1.5 var(--s-font); }
    .h18-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 34px; }
    .h18-space { grid-area: space; display: grid; place-items: center; padding: 0 var(--s-edge); }
    .h18-wall { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); width: 100%; max-width: 1600px; }
    .h18-c { position: relative; aspect-ratio: 4 / 5; background: rgb(255 255 255 / 0.06); }
    .h18-c a { display: block; width: 100%; height: 100%; }
    .h18-c img { width: 100%; height: 100%; object-fit: cover; }
    .h18-c.is-out { opacity: 0.2; transition: opacity 500ms ease; }
    .h18-tools { grid-area: tools; display: grid; justify-items: center; gap: 14px; padding: 28px var(--s-edge) 56px; text-align: center; }
    .h18-tools p { margin: 0; font: 500 var(--fs-small)/1.4 var(--s-font); color: var(--s-soft); }
    .h18-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .h18-chip {
      min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
      background: rgb(255 255 255 / 0.1); color: var(--s-ink); font: 700 var(--fs-small)/1 var(--s-font);
      transition: background 200ms ease, color 200ms ease, transform 160ms var(--s-ease);
    }
    .h18-chip:hover { background: rgb(255 255 255 / 0.2); }
    .h18-chip:active { transform: scale(0.95); }
    .h18-chip[aria-pressed="true"] { background: var(--s-green); color: #fff; }
    .h18-full { grid-area: full; position: relative; min-height: 70vh; overflow: hidden; background: var(--s-deep); }
    /* static positioning of the full cover (В29): keep heads in frame */
    .h18-full img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 18%; }
    .h18-about {
      grid-area: about; display: flex; flex-direction: column; justify-content: center; gap: 20px;
      padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 72px); background: rgb(19 50 31 / 0.9); color: var(--s-on-deep);
    }
    .h18-about .h18-title { font-size: clamp(40px, 4.4vw, 76px); margin-bottom: 8px; }
    .h18-about p { margin: 0; max-width: 40ch; font: 400 var(--fs-text)/1.5 var(--s-font); }
    .h18-about__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 4px; }
    .h18-about .h18-about__credit { font-size: var(--fs-small); color: #c4cfc5; margin-top: 12px; }
    /* the pinned 3D scene (.h18-motion, js) */
    .h18-seq.h18-motion { height: var(--seq-len, 640svh); }
    .h18-seq.h18-motion .h18-stage {
      /* 02 §7: the stage is the whole screen (top 0, not under the header), so flying covers are
         cut only at the screen edges, never in the middle of it; the space itself is not clipped */
      display: block; position: sticky; top: 0; height: 100svh;
      overflow: clip; --stage-h: 100svh;
    }
    .h18-seq.h18-motion .h18-intro {
      position: absolute; inset: 0 0 var(--tools-h); z-index: 3; padding: 0 var(--s-edge);
      align-content: center; pointer-events: none;
    }
    .h18-seq.h18-motion .h18-intro a { pointer-events: auto; }
    .h18-seq.h18-motion .h18-space { position: absolute; inset: 0 0 var(--tools-h); z-index: 1; padding: 0; perspective: 1100px; }
    .h18-seq.h18-motion .h18-wall {
      width: min(calc(100vw - 2 * var(--s-edge)), calc((var(--stage-h) - var(--tools-h) - 32px) * var(--cols) / var(--rows) * 0.8));
      max-width: none; transform-style: preserve-3d;
    }
    .h18-seq.h18-motion .h18-c { backface-visibility: hidden; opacity: 0; background: none; }
    .h18-seq.h18-motion .is-ready .h18-c { opacity: 1; }
    .h18-seq.h18-motion .h18-c.is-out { transition: none; }
    .h18-seq.h18-motion .h18-tools {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--tools-h);
      align-content: start; padding: 4px var(--s-edge) 0; opacity: 0; visibility: hidden;
    }
    .h18-seq.h18-motion .h18-full { position: absolute; inset: 0; z-index: 5; min-height: 0; opacity: 0; visibility: hidden; }
    /* 02 §7: narrower from the right once the stage is ready, 90 % opaque */
    .h18-seq.h18-motion .h18-about {
      position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(560px, 40%);
      transform: translate3d(101%, 0, 0);
    }
    @media (max-width: 1100px) { .h18-seq { --cols: 6; --rows: 5; --gap: 6px; } }
    @media (max-width: 899px) {
      .h18-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "space" "tools" "full" "about"; }
      .h18-full { min-height: 0; aspect-ratio: 4 / 5; }
      .h18-seq.h18-motion .h18-full { aspect-ratio: auto; }
      .h18-seq.h18-motion .h18-about { top: auto; left: 0; width: auto; max-height: 84%; overflow: hidden; transform: translate3d(0, 101%, 0); padding: 32px var(--s-edge) 28px; gap: 14px; }
      .h18-seq.h18-motion .h18-about .h18-title { font-size: 40px; margin-bottom: 0; }
      .h18-seq.h18-motion .h18-about p { font-size: 16px; }
      .h18-seq.h18-motion .h18-about__links { gap: 0 20px; }
      .h18-seq.h18-motion .h18-about .h18-about__credit { margin-top: 0; }
    }
    @media (max-width: 575px) {
      .h18-seq { --cols: 5; --rows: 6; --gap: 5px; --tools-h: 120px; }
      .h18-lead { margin-top: 20px; font-size: 17px; }
      .h18-actions { margin-top: 24px; }
      .h18-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + 2 * var(--s-edge)); margin: 0 calc(-1 * var(--s-edge)); padding: 0 var(--s-edge); scrollbar-width: none; }
      .h18-chip { flex: none; }
      .h18-tools p { max-width: 30ch; }
    }

    /* ═══ blok7 — FAQ (fits one screen, 02 §7) ═════════════════════════════════════════════ */
    .d0-faq {
      --faq-edge: clamp(16px, 3.4vw, 56px);
      --faq-dur: 420ms;
      --faq-ease: cubic-bezier(.2, .7, .1, 1);
      --faq-sign: 22px;
      --faq-num: 64px;
      position: relative; display: grid; align-items: center; min-height: 100svh;
      padding: clamp(32px, 6vh, 72px) 0;
      color: var(--d0-faq-ink); background: var(--d0-faq-ground); font-family: var(--d0-font-text);
    }
    .d0-faq__wrap {
      display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px);
      width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 var(--faq-edge);
    }
    .d0-faq__head { align-self: start; }
    .d0-faq__kicker { margin: 0 0 18px; color: var(--d0-faq-sign); font: 700 13px/1 var(--d0-font-text); letter-spacing: 0.24em; text-transform: uppercase; }
    .d0-faq__title { margin: 0; font: 900 clamp(44px, min(6.4vw, 11vh), 112px)/0.9 var(--d0-font-display); letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; }
    .d0-faq__lead { max-width: 30ch; margin: 28px 0 0; color: var(--d0-soft); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; }
    .d0-faq__list { border-top: 1px solid var(--d0-faq-line); }
    .d0-faq__item { border-bottom: 1px solid var(--d0-faq-line); }
    .d0-faq__toggle {
      display: grid; grid-template-columns: var(--faq-num) 1fr var(--faq-sign); align-items: center; gap: 12px;
      padding: clamp(10px, 1.7vh, 24px) 0; cursor: pointer; list-style: none;
      font: 700 clamp(18px, min(1.7vw, 3vh), 28px)/1.2 var(--d0-font-display); letter-spacing: -0.01em;
      transition: color var(--faq-dur) var(--faq-ease);
    }
    .d0-faq__toggle::-webkit-details-marker { display: none; }
    .d0-faq__toggle:hover, .d0-faq__item[open] > .d0-faq__toggle { color: var(--d0-faq-sign); }
    .d0-faq__toggle:focus-visible { outline: 2px solid var(--d0-faq-sign); outline-offset: 4px; border-radius: 4px; }
    .d0-faq__num { color: var(--d0-mute); font: 500 14px/1 var(--d0-font-text); letter-spacing: 0.08em; }
    .d0-faq__sign { position: relative; width: var(--faq-sign); height: var(--faq-sign); }
    .d0-faq__sign::before, .d0-faq__sign::after {
      content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px;
      background: currentColor; transition: transform var(--faq-dur) var(--faq-ease);
    }
    .d0-faq__sign::after { transform: rotate(90deg); }
    .d0-faq__item[open] .d0-faq__sign::after { transform: rotate(0deg); }
    .d0-faq__a {
      max-width: 62ch; margin: 0; padding: 0 var(--faq-sign) clamp(14px, 2vh, 28px) calc(var(--faq-num) + 12px);
      color: var(--d0-soft); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55;
    }
    /* answers from the /faq page (В46) are HTML and may be long: the block still fits one screen */
    .d0-faq__a { max-height: 26vh; overflow-y: auto; overscroll-behavior: contain; }
    .d0-faq__a > p, .d0-faq__a > ul, .d0-faq__a > ol { margin: 0 0 0.7em; }
    .d0-faq__a ul, .d0-faq__a ol { padding-left: 1.2em; }
    .d0-faq__a a, .d0-faq__note a { color: var(--dp-yellow, #ffb500); }
    .d0-faq__note { margin: 20px 0 0; color: var(--d0-mute); font-size: 14px; line-height: 1.5; }
    @supports selector(::details-content) {
      .d0-faq { interpolate-size: allow-keywords; }
      .d0-faq__item::details-content {
        block-size: 0; overflow: clip;
        transition: block-size var(--faq-dur) var(--faq-ease), content-visibility var(--faq-dur) allow-discrete;
      }
      .d0-faq__item[open]::details-content { block-size: auto; }
    }
    @media (max-width: 899px) {
      .d0-faq { --faq-num: 40px; min-height: 0; padding: clamp(64px, 10vw, 120px) 0; }
      .d0-faq__wrap { grid-template-columns: minmax(0, 1fr); }
      .d0-faq__a { padding-right: 0; }
    }

    /* ═══ blok44 — There is a place for you here (no underlay, one screen, 02 §7) ══════════ */
    .h20-join {
      --h20-fs-2: clamp(36px, 4.3vw, 72px);
      --h20-fs-5: 18px;
      --h20-edge: clamp(16px, 3vw, 48px);
      --h20-ease: cubic-bezier(.2, .7, .2, 1);
      position: relative; z-index: 0; overflow: hidden; display: grid; place-items: center;
      min-height: 100svh; padding: clamp(64px, 8vh, 120px) var(--h20-edge);
      font-family: var(--h20-text); background: var(--home-clear); color: var(--h20-ink);
    }
    .h20-join :where(*) { color: inherit; }
    .h20-join ul { list-style: none; margin: 0; padding: 0; }
    .h20-join .h20-body { margin: 0; max-width: 46ch; font: 500 var(--h20-fs-5)/1.55 var(--h20-text); color: var(--h20-soft); }
    .h20-join .h20-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }
    .h20-join .h20-btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px;
      border-radius: 999px; background: var(--h20-yellow); color: var(--h20-dark); text-decoration: none;
      font: 700 17px/1 var(--h20-display); letter-spacing: 0.005em;
      transition: background 220ms ease, color 220ms ease, transform 160ms ease;
    }
    .h20-join .h20-btn:hover { background: var(--h20-ink); }
    .h20-join .h20-btn:active { transform: scale(0.96); }
    .h20-join :is(a, button):focus-visible { outline: 3px solid var(--h20-yellow); outline-offset: 4px; border-radius: 999px; }
    .h20-join__ring { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 48px; max-width: 760px; }
    .h20-join__face { width: 64px; }
    .h20-join__face img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
    .h20-join__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 24px; text-align: center; max-width: 620px; margin: 0 auto; }
    .h20-join__title { margin: 0; font: 900 var(--h20-fs-2)/0.96 var(--h20-display); letter-spacing: -0.04em; text-wrap: balance; }
    .h20-join.h20-ringed { place-items: center; }
    .h20-join.h20-ringed .h20-join__ring { position: absolute; inset: 0; display: block; margin: 0; max-width: none; }
    .h20-join.h20-ringed .h20-join__face { position: absolute; left: 0; top: 0; width: var(--jf-w, 88px); will-change: transform; }
    .h20-join.h20-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 900ms var(--h20-ease); transition-delay: var(--rd, 0ms); }
    .h20-join.h20-js [data-reveal].is-in { opacity: 1; transform: none; }
    @media (max-width: 767px) {
      .h20-join { --h20-fs-5: 17px; }
      .h20-join__inner { max-width: 236px; }
      .h20-join .h20-join__title { font-size: 31px; }
      .h20-join .h20-body { font-size: 16px; }
    }

    /* ═══ blok8 — the banner under the key light, right on the footer ══════════════════════ */
    .h17-join {
      --h17-join-min-h: 0px;
      --h17-join-rig-ratio: 1920 / 640;
      --h17-join-rig-ratio-phone: 4 / 5;
      --tint: #ffab5e; --spill: #ffc488;
      position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
      min-height: var(--h17-join-min-h); padding: 0; color: var(--k-ink); background: var(--home-clear);
    }
    .h17-join .h17-rig {
      --kx: 42cqw; --ky: 50cqh; --d-soft: 56cqw; --d-hard: 36cqw;
      position: relative; margin: 0; overflow: hidden; container-type: size; background: #080b0a;
      flex: 1 0 auto; width: 100%; aspect-ratio: var(--h17-join-rig-ratio);
    }
    .h17-join .h17-rig img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 42% 50%; }
    .h17-join .h17-rig__dim { position: absolute; inset: 0; filter: grayscale(0.9) brightness(0.22) contrast(1.1); }
    .h17-join .h17-key {
      --d: var(--d-soft);
      position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
      transform: translate3d(var(--kx), var(--ky), 0); will-change: transform;
      -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.25) 80%, transparent);
      mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.25) 80%, transparent);
      transition: opacity 700ms ease;
    }
    .h17-join .h17-key--hard {
      --d: var(--d-hard); opacity: 0;
      -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 97%);
      mask-image: radial-gradient(closest-side, #000 84%, transparent 97%);
    }
    .h17-join .h17-key__in {
      position: absolute; left: calc(var(--d) / 2); top: calc(var(--d) / 2); width: 100cqw; height: 100cqh;
      transform: translate3d(calc(-1 * var(--kx)), calc(-1 * var(--ky)), 0); will-change: transform;
    }
    .h17-join .h17-key--soft img { filter: saturate(1.05) brightness(1.04); }
    .h17-join .h17-key--hard img { filter: contrast(1.2) saturate(1.15) brightness(1.06); }
    .h17-join .h17-key__tint { position: absolute; inset: 0; background-color: var(--tint); mix-blend-mode: soft-light; opacity: 0.6; transition: background-color 900ms ease; }
    .h17-join .h17-spill {
      position: absolute; left: 0; top: 0; z-index: -1; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
      pointer-events: none; color: var(--spill); opacity: 0.1;
      background: radial-gradient(closest-side, currentColor, transparent);
      transform: translate3d(var(--sx, 66vw), var(--sy, 36vh), 0); will-change: transform;
    }
    @media (max-width: 899px) {
      .h17-join .h17-rig { aspect-ratio: var(--h17-join-rig-ratio-phone); --kx: 42cqw; --d-soft: 150cqw; --d-hard: 90cqw; }
    }

    /* ── reduced motion: everything static (01 §6.4.1) ───────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      :is(.h15-lens, .h15-what, .h17-roles, .h17-mags, .h18-seq, .d0-faq, .h20-join, .h17-join) :is(*, *::before, *::after) {
        transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important;
      }
      .h20-join.h20-js [data-reveal] { opacity: 1; transform: none; transition: none; }
    }
  }

  /* ═══ footer_home — the home footer (shell footer, outside <main>) ════════════════════════
     Layers bottom to top: 1. floor of covers (filled by js/pages/home.js), 2. veil (::before),
     3. the DEPO word, 4. shade (::after), 5. the footer content. Where the light of blok8 shines
     (--fl-x/--fl-y, set by js/pages/home/rig.js) the veil and the shade turn transparent. */
  :is(body[data-footer="home"], body:has(> #page[data-page="home2"])) .dp-footer {
    --fh-tilt: 58deg; --fh-cols: 10; --fh-gap: 10px; --fh-speed: 120s; --fh-plane-w: 130%; --fh-perspective: 900px;
    --fh-word-size: 32vw;
    --fl-x: -9999px; --fl-y: -9999px; --fl-r: clamp(180px, 22vw, 360px);
    --fl-mask: radial-gradient(circle var(--fl-r) at var(--fl-x) var(--fl-y), transparent 0, rgb(0 0 0 / 0.15) 45%, #000 100%);
    position: relative; isolation: isolate; overflow: hidden; background: none; color: #c9c6bf;
    padding-bottom: calc(clamp(64px, 8vw, 106px) + env(safe-area-inset-bottom));

    &::before, &::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: var(--fl-mask); mask-image: var(--fl-mask); }
    &::before { z-index: 1; background: rgb(24 23 26 / 0.1); }
    &::after { z-index: 3; background: linear-gradient(180deg, rgb(24 23 26 / 0.55) 0%, rgb(24 23 26 / 0.55) 60%, rgb(24 23 26 / 0.4) 100%); }
    .dp-footer__inner, .dp-footer__base { position: relative; z-index: 4; }
    .dp-footer__floor {
      display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden;
      perspective: var(--fh-perspective); perspective-origin: 50% 0;
    }
    .dp-footer__plane {
      display: grid; grid-template-columns: repeat(var(--fh-cols), minmax(0, 1fr)); gap: var(--fh-gap);
      width: var(--fh-plane-w); margin-left: calc((100% - var(--fh-plane-w)) / 2);
      transform-origin: 50% 0; transform: rotateX(var(--fh-tilt));
      animation: home-floor var(--fh-speed) linear infinite;
    }
    .dp-footer__plane img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
    .dp-footer__floor.is-paused .dp-footer__plane { animation-play-state: paused; }
    .dp-footer__word {
      display: block; position: absolute; left: 50%; bottom: 0; z-index: 2; margin: 0; pointer-events: none; user-select: none;
      transform: translate(-50%, 8%); white-space: nowrap; text-align: center;
      font: 900 var(--fh-word-size)/0.72 "Schibsted Grotesk", system-ui, sans-serif; letter-spacing: -0.07em;
      color: rgb(242 240 234 / 0.9);
    }
    @media (max-width: 899px) { --fh-plane-w: 260%; --fh-word-size: 38vw; }
    @media (prefers-reduced-motion: reduce) { .dp-footer__plane { animation: none; } }
  }
}

/* ── /index2: the logo as a live eye (view/landings/ram2, js/pages/home2/lens.js) ──────────────────────
   html[data-eye]: boot = only the closed eye on the background, run = header and footer come in,
   done = everything in place. No attribute (no JS, reduced motion): the static layout of the home block. */
@layer page {
  html:not([data-eye]) .eye2 { display: none; }
  html[data-eye] [data-page="home2"] .h15-map__eye { visibility: hidden; }
  /* the layout of the scene from the first paint, before the module adds .h15-motion */
  html[data-eye] [data-page="home2"] .h15-lens:not(.h15-motion) { height: calc(var(--h15-lens-screens) * 100svh); }
  html[data-eye] [data-page="home2"] .h15-lens:not(.h15-motion) .h15-lens__stage { position: sticky; top: 0; height: 100svh; min-height: 620px; }
  html[data-eye] [data-page="home2"] .h15-lens:not(.h15-motion) .h15-lens__front { position: absolute; min-height: 0; }
  html[data-eye] [data-page="home2"] .h15-lens:not(.h15-motion) .h15-lens__statement { position: absolute; opacity: 0; visibility: hidden; }
  [data-page="home2"] .eye2 {
    --eye-big: min(75svh, 41vw);
    position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--eye-big); aspect-ratio: 1;
    margin: calc(var(--eye-big) / -2) 0 0 calc(var(--eye-big) / -2); pointer-events: none;
    transform-origin: 50% 50%; will-change: transform;
  }
  [data-page="home2"] .eye2__svg { display: block; width: 100%; height: 100%; overflow: visible; }
  @media (max-width: 700px), (max-aspect-ratio: 5 / 6) {
    [data-page="home2"] .eye2 { --eye-big: min(62vw, 60svh); }
  }
  [data-page="home2"] .h15-map__item, [data-page="home2"] .h15-map__title { will-change: transform, opacity; }

  html[data-eye="boot"] .dp-header, html[data-eye="boot"] .dp-footer { opacity: 0; pointer-events: none; }
  html[data-eye="boot"] [data-page="home2"] :is(.h15-map__title, .h15-map__item) { opacity: 0; }
  html:is([data-eye="boot"], [data-eye="run"]) [data-page="home2"] .dp-slot__in > :not(.h15-lens) { visibility: hidden; }
  html[data-eye="run"] .dp-header, html[data-eye="run"] .dp-footer { animation: eye2-in 800ms ease both; }
  @keyframes eye2-in { from { opacity: 0; } }

  /* the logo in the header while it is a live eye: the same box as the picture */
  .dp-header__brand svg { display: block; width: auto; height: calc(var(--dp-hdr) - 18px); max-height: 54px; aspect-ratio: 1000 / 690; }
  @media (max-width: 1199px) {
    .dp-header__brand svg { height: min(38px, calc(var(--dp-hdr) - 10px)); max-height: none; }
  }

  /* second screen: the green underlay under the text (owner, 2026-11-01) */
  [data-page="home2"] .h15-motion .h15-lens__statement {
    background: var(--h15-field);
    padding: clamp(28px, 5vh, 56px) var(--h15-edge);
  }
}