@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/Onest-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/Onest-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/Onest-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
     VIDEOJA® — home — Tilda T123 fragment
     Everything scoped under #videoja-app. No global html/body rules.
     Desktop values are carried over 1:1 from the approved DC source.
     Mobile ( < 760px ) is a deliberately separate implementation.
     ========================================================================== */

  #videoja-app { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0;
    overflow-x: clip; background: #060607; color: #F0EEE8; -webkit-font-smoothing: antialiased;
    font-family: Onest, system-ui, sans-serif;
    --vh: 100svh;              /* mobile: replaced with a measured px value */
    --pad: clamp(24px, 5vw, 96px);
    --padc: clamp(24px, 5vw, 104px);
    --ink: #F0EEE8;
    --gold: #C98A3D;
  }
  #videoja-app *, #videoja-app *::before, #videoja-app *::after { box-sizing: border-box; }
  #videoja-app ::selection { background: #C98A3D; color: #060607; }
  #videoja-app ::-webkit-scrollbar { display: none; }

  #videoja-app a { color: rgba(240,238,232,0.5); text-decoration: none; transition: color .35s ease; }
  #videoja-app a:hover { color: #F0EEE8; }

  #videoja-app .vj-root { position: relative; width: 100%; max-width: 100%; min-width: 0; }

  /* device gating ---------------------------------------------------------- */
  #videoja-app .vj-m { display: none !important; }
  @media (max-width: 759px) {
    #videoja-app .vj-d { display: none !important; }
    #videoja-app .vj-m { display: block !important; }
    #videoja-app .vj-m.vj-mflex { display: flex !important; }
  }

  #videoja-app .vj-hov:hover { color: #F0EEE8 !important; }
  #videoja-app .vj-hovb:hover { border-color: rgba(240,238,232,0.7) !important; }
  #videoja-app .vj-hovq:hover { color: rgba(240,238,232,0.72) !important; }

  /* ---------------------------------------------------------------- HERO -- */
  #videoja-app .vj-hero { position: relative; height: 240vh; background: #060607; color: #F0EEE8; }
  #videoja-app .vj-hero-sticky { position: sticky; top: 0; height: var(--vh); overflow: hidden; background: #060607; }
  #videoja-app .vj-head { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: clamp(22px, 3.4vh, 38px) var(--padc) 0; }
  #videoja-app .vj-mark { font-size: 12.5px; letter-spacing: 0.3em; font-weight: 500; text-transform: uppercase; }
  #videoja-app .vj-reg { font-size: 8px; vertical-align: super; letter-spacing: 0; }
  #videoja-app .vj-nav { display: flex; gap: clamp(20px, 2.8vw, 44px); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; }
  #videoja-app .vj-nav-m { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; }

  #videoja-app .vj-hero-name-d { position: absolute; left: var(--padc); top: clamp(96px, 16svh, 168px); z-index: 12; line-height: 0.78; white-space: nowrap; }
  #videoja-app .vj-hero-name-d > div { font-size: clamp(64px, 12.8vw, 236px); font-weight: 500; letter-spacing: -0.05em; }
  #videoja-app .vj-hero-first-d { position: absolute; right: var(--padc); bottom: clamp(128px, 21svh, 214px); z-index: 30; text-align: right; }
  #videoja-app .vj-hero-first-d > div { font-size: clamp(28px, 4.3vw, 76px); font-weight: 300; letter-spacing: 0.22em; line-height: 0.9; color: rgba(240,238,232,0.86); }
  #videoja-app .vj-hero-name-m { position: absolute; left: 24px; right: 24px; top: 92px; z-index: 30; line-height: 0.82; }
  #videoja-app .vj-hero-name-m .vj-n1 { font-size: 16vw; font-weight: 500; letter-spacing: -0.05em; }
  #videoja-app .vj-hero-name-m .vj-n2 { font-size: 6.6vw; font-weight: 300; letter-spacing: 0.2em; margin-top: 12px; color: rgba(240,238,232,0.84); }

  #videoja-app .vj-stage-wrap { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
  #videoja-app .vj-stage { display: block; width: min(120vh, 104vw); height: calc(var(--vh) * 0.80); margin-left: 9vw; margin-top: calc(var(--vh) * 0.04); pointer-events: none; }

  #videoja-app .vj-hero-copy { position: absolute; left: var(--padc); bottom: clamp(72px, 13svh, 124px); z-index: 35; max-width: 20ch; }
  #videoja-app .vj-hero-copy p { margin: 0; font-size: clamp(13px, 1.02vw, 15px); line-height: 1.55; font-weight: 300; color: rgba(240,238,232,0.48); text-wrap: pretty; }
  #videoja-app .vj-hero-loc { position: absolute; left: var(--padc); bottom: clamp(28px, 5svh, 48px); z-index: 35; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,238,232,0.26); }
  #videoja-app .vj-hero-err { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 25; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,238,232,0.3); }

  #videoja-app .vj-annot { position: fixed; left: 0; top: 0; z-index: 42; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
  #videoja-app .vj-annot-btn { display: flex; align-items: center; gap: 16px; padding: 10px 0; border: 0; background: none; color: rgba(240,238,232,0.78); font-family: inherit; cursor: pointer; pointer-events: auto; transition: color .4s ease; }
  #videoja-app .vj-annot-line { display: block; width: 92px; height: 1px; background: linear-gradient(to left, rgba(240,238,232,0.46), rgba(240,238,232,0.04)); }
  #videoja-app .vj-annot-tx { white-space: nowrap; font-size: 10px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; }
  #videoja-app .vj-annot-btn-m { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 20px 14px; border: 0; background: none; color: rgba(240,238,232,0.8); font-family: inherit; cursor: pointer; pointer-events: auto; }
  #videoja-app .vj-annot-line-m { display: block; width: 1px; height: 26px; background: linear-gradient(to top, rgba(240,238,232,0.42), rgba(240,238,232,0.04)); }

  #videoja-app .vj-cursor { position: fixed; left: 0; top: 0; z-index: 60; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid rgba(240,238,232,0.5); border-radius: 50%; background: rgba(6,6,7,0.32); backdrop-filter: blur(2px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,238,232,0.92); }

  /* fullscreen viewers ----------------------------------------------------- */
  #videoja-app .vj-view { display: none; position: fixed; inset: 0; z-index: 200; background: #040405; opacity: 0; transition: opacity .5s ease; }
  #videoja-app .vj-view-box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
    transition: left .7s cubic-bezier(.2,.75,.15,1), top .7s cubic-bezier(.2,.75,.15,1), width .7s cubic-bezier(.2,.75,.15,1), height .7s cubic-bezier(.2,.75,.15,1); }
  #videoja-app .vj-view-box > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #040405; }
  #videoja-app .vj-ctl { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3.6vh, 38px) clamp(20px, 4vw, 56px); display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); font-family: Onest, system-ui, sans-serif; color: #F0EEE8; opacity: 0; transition: opacity .6s ease .15s; background: linear-gradient(to top, rgba(4,4,5,0.72), rgba(4,4,5,0)); }
  #videoja-app .vj-ctl-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(240,238,232,0.28); border-radius: 50%; background: none; color: #F0EEE8; font-family: inherit; font-size: 11px; cursor: pointer; transition: border-color .3s ease; }
  #videoja-app .vj-ctl-bar { flex: 1; padding: 14px 0; cursor: pointer; }
  #videoja-app .vj-ctl-track { position: relative; height: 1px; background: rgba(240,238,232,0.2); }
  #videoja-app .vj-ctl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #C98A3D; }
  #videoja-app .vj-ctl-time { flex: none; font-size: 10.5px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: rgba(240,238,232,0.6); }
  #videoja-app .vj-ctl-tx { flex: none; padding: 0; border: 0; background: none; color: rgba(240,238,232,0.72); font-family: inherit; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: color .3s ease; }
  @media (max-width: 759px) {
    #videoja-app .vj-ctl { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 12px; flex-wrap: wrap; }
    #videoja-app .vj-ctl-time { font-size: 10px; letter-spacing: 0.12em; }
    #videoja-app .vj-ctl-tx { font-size: 10px; letter-spacing: 0.16em; min-height: 44px; display: flex; align-items: center; }
    #videoja-app .vj-ctl-btn { width: 44px; height: 44px; }
  }

  /* ------------------------------------------------------- SELECTED WORK -- */
  #videoja-app .vj-work { position: relative; background: #060607; color: #F0EEE8; padding: 13vh 0 24vh; }
  #videoja-app .vj-work-index { position: absolute; left: clamp(18px, 2.2vw, 40px); top: 0; bottom: 0; width: 30px; z-index: 30; pointer-events: none; }
  #videoja-app .vj-work-index > div { position: sticky; top: 50svh; display: flex; flex-direction: column; gap: 12px; font-size: 9.5px; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
  #videoja-app .vj-work-index span { color: rgba(240,238,232,0.16); transition: color .5s ease; }
  #videoja-app .vj-work-index span.is-on { color: #C98A3D; }
  @media (max-width: 1059px) { #videoja-app .vj-work-index { display: none; } }

  #videoja-app .vj-work-head { position: relative; padding: 0 var(--pad) 0 clamp(24px, 5.6vw, 108px); }
  #videoja-app .vj-eyebrow { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(20px, 3.4vh, 40px); }
  #videoja-app .vj-eyebrow .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.34); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-eyebrow .r { display: block; width: clamp(36px, 5vw, 84px); height: 1px; background: rgba(240,238,232,0.16); }
  #videoja-app .vj-eyebrow .t { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.34); }
  #videoja-app .vj-work-h2 { margin: 0; font-size: 14vw; font-weight: 500; line-height: 0.84; letter-spacing: -0.05em; max-width: 100%; overflow-wrap: normal; }

  #videoja-app .vj-cap { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
  #videoja-app .vj-cap .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-cap .k { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.3); }

  #videoja-app .vj-media { position: relative; overflow: hidden; background: #0B0B0C; cursor: none; }
  /* REAL poster layer: a DOM <img> under every preview. It is painted from the
     first layout and is never hidden; the <video> above it stays transparent
     until a decoded frame has actually been presented (see frameGate()).
     A preview that fails to load simply leaves this image in place.         */
  #videoja-app .vj-poster-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; display: block;
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; filter: brightness(0.84); }
  #videoja-app .vj-media > video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; filter: brightness(0.84); transition: opacity .38s ease, filter .8s ease; }
  #videoja-app .vj-media > video.vj-frame-ready { opacity: 1; }
  @media (max-width: 759px) { #videoja-app .vj-media { cursor: pointer; } }

  /* reveal primitives */
  #videoja-app [data-reveal="rise"] { opacity: 0; transform: translateY(22px); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.75,.15,1); }
  #videoja-app [data-reveal="crop"] { opacity: 0; clip-path: inset(0 0 20% 0); transition: opacity 1.2s ease, clip-path 1.4s cubic-bezier(.2,.75,.15,1), transform 1.1s cubic-bezier(.2,.75,.15,1); }
  #videoja-app [data-reveal].is-in { opacity: 1 !important; transform: translateY(0); clip-path: inset(0 0 0 0) !important; }
  #videoja-app [data-reveal="crop"].is-in { transform: none; }

  /* 01 &#8212; &#1042;&#1050;&#1059;&#1057;&#1042;&#1048;&#1051;&#1051; */
  #videoja-app .vj-a1 { position: relative; margin-top: clamp(90px, 16vh, 190px); padding: 0 var(--pad); }
  #videoja-app .vj-m1 { z-index: 1; margin-left: auto; width: 70vw; aspect-ratio: 16 / 9; }
  #videoja-app .vj-t1wrap { position: relative; z-index: 2; margin-top: clamp(28px, 4vh, 56px); pointer-events: none; line-height: 0.86; }
  #videoja-app .vj-t1 { font-size: clamp(38px, 5.2vw, 100px); font-weight: 500; letter-spacing: -0.045em; }

  /* 02 &#8212; &#1050;&#1054;&#1056;&#1055;&#1054;&#1056;&#1040;&#1058;&#1048;&#1042;&#1053;&#1067;&#1045; &#1052;&#1045;&#1056;&#1054;&#1055;&#1056;&#1048;&#1071;&#1058;&#1048;&#1071; / COREXP  (layout class .vj-a2 kept) */
  #videoja-app .vj-a2 { position: relative; margin-top: clamp(150px, 26vh, 300px); padding: 0 var(--pad); overflow: hidden; }
  #videoja-app .vj-a2-eyebrow { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 30px); margin-bottom: clamp(22px, 3.4vh, 46px); }
  #videoja-app .vj-a2-eyebrow .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-a2-eyebrow .r { display: block; width: clamp(40px, 8vw, 140px); height: 1px; background: rgba(240,238,232,0.16); }
  #videoja-app .vj-a2-eyebrow .b { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(240,238,232,0.62); }
  #videoja-app .vj-t2wrap { position: relative; z-index: 3; pointer-events: none; }
  #videoja-app .vj-t2 { font-size: clamp(38px, 5.7vw, 116px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.82; }
  #videoja-app .vj-t2 .l2 { display: block; padding-left: clamp(0px, 6vw, 130px); color: rgba(240,238,232,0.9); }
  #videoja-app .vj-m2 { z-index: 1; margin: clamp(34px, 5vh, 78px) auto 0 0; width: 62vw; aspect-ratio: 16 / 9; }
  #videoja-app .vj-a2-foot { position: relative; z-index: 3; margin-top: clamp(20px, 2.8vh, 36px); display: flex; align-items: center; gap: 18px; }
  #videoja-app .vj-a2-foot .r { display: block; width: 40px; height: 1px; background: rgba(201,138,61,0.7); }
  #videoja-app .vj-a2-foot .t { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.3); }

  /* 03 &#8212; &#1042;&#1045;&#1056;&#1058;&#1048;&#1050;&#1040;&#1051;&#1068;&#1053;&#1067;&#1049; &#1050;&#1054;&#1053;&#1058;&#1045;&#1053;&#1058;  (layout class .vj-a3 kept)
     four portrait films: DIXI leads and is the tallest, three supporting
     films follow with a restrained stagger &#8212; not an equal-column grid.   */
  #videoja-app .vj-a3 { position: relative; margin-top: clamp(150px, 26vh, 300px); padding: 0 var(--pad); overflow: hidden; }
  #videoja-app .vj-ghost { position: absolute; left: clamp(24px, 4vw, 70px); top: 18vh; z-index: 0; pointer-events: none; font-size: 19vw; font-weight: 500; letter-spacing: -0.055em; line-height: 0.8; color: rgba(240,238,232,0.055); white-space: nowrap; }
  #videoja-app .vj-a3-head { position: relative; z-index: 3; display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); margin-bottom: clamp(50px, 9vh, 110px); flex-wrap: wrap; }
  #videoja-app .vj-a3-head .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-a3-head .h { font-size: clamp(22px, 2.3vw, 44px); font-weight: 500; letter-spacing: -0.03em; }
  #videoja-app .vj-a3-head .m { font-size: 9.5px; letter-spacing: 0.24em; color: rgba(240,238,232,0.28); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-row { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, 2.2vw, 40px); }
  #videoja-app .vj-cell { flex: 0 0 auto; }
  #videoja-app .vj-v1 { width: 24vw; margin-top: 0; }
  #videoja-app .vj-v2 { width: 18.5vw; margin-top: 9vh; }
  #videoja-app .vj-v3 { width: 19.5vw; margin-top: 3vh; }
  #videoja-app .vj-v4 { width: 18vw; margin-top: 12vh; }
  #videoja-app .vj-vm { width: 100%; }
  #videoja-app .vj-vm1 { height: min(calc(var(--vh) * 0.70), 44vw); }
  #videoja-app .vj-vm2 { height: min(calc(var(--vh) * 0.52), 34vw); }
  #videoja-app .vj-vm3 { height: min(calc(var(--vh) * 0.56), 36vw); }
  #videoja-app .vj-vm4 { height: min(calc(var(--vh) * 0.50), 33vw); }
  #videoja-app .vj-vm > video, #videoja-app .vj-vm > .vj-poster-layer { filter: brightness(0.76); }
  #videoja-app .vj-lab { position: relative; z-index: 4; margin-top: 18px; min-height: 44px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.62); }
  #videoja-app .vj-lab .q { color: rgba(240,238,232,0.38); }

  /* 04 &#8212; &#1052;&#1045;&#1063;&#1058;&#1040;&#1051;&#1051;&#1048;&#1054;&#1053; &#215; &#1040;&#1042;&#1058;&#1054;&#1056;&#1040;&#1044;&#1048;&#1054; */
  #videoja-app .vj-a4 { position: relative; margin-top: clamp(150px, 26vh, 300px); }
  #videoja-app .vj-a4-head { position: relative; z-index: 2; padding: 0 clamp(24px, 4vw, 60px); pointer-events: none; }
  #videoja-app .vj-a4-headin { display: flex; align-items: baseline; gap: 16px; line-height: 0.84; }
  #videoja-app .vj-a4-headin .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-t4 { font-size: clamp(34px, 4.6vw, 92px); font-weight: 500; letter-spacing: -0.048em; }
  #videoja-app .vj-m4 { z-index: 1; margin: clamp(-30px, -3vh, -10px) auto 0; width: 90vw; aspect-ratio: 16 / 9; clip-path: inset(0 12% 0 12%); }
  #videoja-app .vj-t4b { position: relative; z-index: 2; margin-top: clamp(26px, 4vh, 54px); padding: 0 clamp(24px, 4vw, 60px); text-align: right; font-size: clamp(20px, 2.4vw, 46px); font-weight: 300; letter-spacing: 0.02em; color: rgba(240,238,232,0.82); }

  /* 05 &#8212; &#1062;&#1045;&#1053;&#1058;&#1056;&#1040;&#1051;&#1068;&#1053;&#1067;&#1049; &#1056;&#1067;&#1053;&#1054;&#1050; */
  #videoja-app .vj-a5 { position: relative; margin-top: clamp(170px, 28vh, 320px); padding: 0 var(--pad); }
  #videoja-app .vj-a5-head { position: relative; z-index: 3; pointer-events: none; line-height: 0.86; }
  #videoja-app .vj-t5 { font-size: clamp(40px, 5.9vw, 118px); font-weight: 500; letter-spacing: -0.05em; color: #F0EEE8; }
  /* Onest &#1049;/&#1025; accents rise to 0.918em above the baseline (caps: 0.707em). With
     line-height 0.84-0.86 the breve sits ~0.15em ABOVE the line box and is cut
     by any layer/overflow bound (WebKit clips glyph overflow of composited,
     transformed reveal layers). Grow the box upward, cancel it with a negative
     margin: layout and position stay identical, the whole glyph is inside.  */
  #videoja-app .vj-t5, #videoja-app .vj-ai-word, #videoja-app .vj-aim-word { padding-top: 0.2em; margin-top: -0.2em; }
  #videoja-app .vj-m5 { z-index: 1; margin: clamp(28px, 4.5vh, 64px) 0 0 auto; width: 70vw; aspect-ratio: 16 / 9; clip-path: inset(0 0 18% 0); }
  #videoja-app .vj-t5wrap { position: relative; z-index: 3; margin-top: clamp(30px, 4.5vh, 64px); padding-left: clamp(0px, 8vw, 170px); pointer-events: none; line-height: 0.86; }
  #videoja-app .vj-t5b-row { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
  #videoja-app .vj-t5b-row .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-t5b-row .r { display: block; width: 40px; height: 1px; background: rgba(201,138,61,0.7); }

  /* ----------------------------------------------------------- AI CONTENT - */
  #videoja-app .vj-ai { position: relative; background: #060607; color: #F0EEE8; }
  #videoja-app .vj-ai-silence { height: 26vh; }
  #videoja-app .vj-ai-intro { position: relative; padding: 0 var(--pad); }
  #videoja-app .vj-ai-introrow { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  #videoja-app .vj-ai-introrow .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-ai-introrow .t { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.34); }
  #videoja-app .vj-ai-introrow .r { display: block; width: clamp(36px, 5vw, 84px); height: 1px; background: rgba(240,238,232,0.16); }
  #videoja-app .vj-ai-introrow .q { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.26); }
  #videoja-app .vj-ai-sub { margin-top: clamp(16px, 2.4vh, 28px); font-size: clamp(11px, 0.86vw, 13px); font-weight: 300; letter-spacing: 0.02em; color: rgba(240,238,232,0.4); }
  #videoja-app .vj-ai-scene { position: relative; height: 285vh; margin-top: 12vh; }
  #videoja-app .vj-ai-sticky { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
  #videoja-app .vj-ai-word { position: absolute; z-index: 6; pointer-events: none; font-size: 8.6vw; font-weight: 500; letter-spacing: -0.055em; line-height: 0.84; white-space: nowrap; }
  #videoja-app .vj-ai-w1 { left: var(--pad); top: clamp(28px, 6svh, 64px); }
  #videoja-app .vj-ai-w2 { right: var(--pad); bottom: clamp(56px, 10svh, 108px); }
  #videoja-app .vj-frag { position: absolute; z-index: 2; overflow: hidden; background: #08080A; }
  /* V2: every fragment and the unified frame carry the ai_poster <img> BELOW
     the live layer. The canvas (or fallback video) stays transparent until the
     source has presented a real decoded frame (.vj-live / .vj-frame-ready),
     then crossfades in. A late or failed source simply leaves the poster.   */
  #videoja-app .vj-frag > .vj-frag-poster { right: auto; bottom: auto; object-fit: cover; filter: none; }
  #videoja-app .vj-frag > canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .38s ease; }
  #videoja-app .vj-frag.vj-live > canvas { opacity: 1; }
  #videoja-app .vj-frag > video { display: none; position: absolute; left: 0; top: 0; z-index: 1; max-width: none; opacity: 0; transition: opacity .38s ease; }
  #videoja-app .vj-frag > video.vj-frame-ready { opacity: 1; }
  #videoja-app .vj-ai-unibox { position: absolute; left: 43vw; top: 9svh; width: 25vw; height: 82svh; z-index: 3; overflow: hidden; background: #08080A; opacity: 0; cursor: none; }
  #videoja-app .vj-ai-unibox > .vj-poster-layer { filter: none; }
  #videoja-app .vj-ai-unibox > video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .38s ease; }
  #videoja-app .vj-ai-unibox > video.vj-frame-ready { opacity: 1; }
  #videoja-app .vj-ai-cap { position: absolute; left: 0; top: 0; z-index: 7; opacity: 0; pointer-events: none; display: flex; flex-direction: column; gap: 14px; white-space: nowrap; }
  #videoja-app .vj-ai-cap .a { display: flex; align-items: baseline; gap: 12px; font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,238,232,0.34); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-ai-cap .b { font-size: 13px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,238,232,0.72); }
  #videoja-app .vj-ai-cap .c { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,238,232,0.26); }
  #videoja-app .vj-ai-annot { position: absolute; left: 0; top: 0; z-index: 8; opacity: 0; }
  #videoja-app .vj-ai-annot button { display: flex; align-items: center; gap: 14px; padding: 8px 0; border: 0; background: none; color: rgba(240,238,232,0.78); font-family: inherit; cursor: pointer; transition: color .4s ease; }
  #videoja-app .vj-ai-annot .r { display: block; width: 74px; height: 1px; background: linear-gradient(to right, rgba(240,238,232,0.06), rgba(240,238,232,0.46)); }
  #videoja-app .vj-ai-annot .t { white-space: nowrap; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
  #videoja-app .vj-stagelabel { position: absolute; left: var(--pad); bottom: clamp(22px, 4svh, 40px); z-index: 9; display: flex; align-items: center; gap: 12px; pointer-events: none; }
  #videoja-app .vj-stagelabel .d { display: block; width: 5px; height: 5px; background: #C98A3D; }
  #videoja-app .vj-stagelabel .t { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,238,232,0.52); font-variant-numeric: tabular-nums; }

  /* AI mobile &#8212; ONE coherent portrait film: WORD / 9:16 frame / WORD.
     A single flex stack centred in the sticky stage; the two words overlap the
     frame edges editorially and stay fully opaque for the whole scene.      */
  #videoja-app .vj-aim { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 4; }
  #videoja-app .vj-aim-stack { position: absolute; left: 0; right: 0; top: 48%; display: flex; flex-direction: column; align-items: center;
    -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); will-change: transform; }
  #videoja-app .vj-aim-frame { --aw: min(64vw, calc(var(--vh) * 0.3038)); position: relative; z-index: 1; flex: none;
    width: var(--aw); height: calc(var(--aw) * 1.7778); overflow: visible; background: #08080A; cursor: pointer;
    -webkit-transform: translateZ(0); transform: translateZ(0); transform-origin: 50% 50%; will-change: transform; }
  #videoja-app .vj-aim-frame > .vj-poster-layer { filter: none; }
  #videoja-app .vj-aim-frame > video { position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .38s ease; }
  #videoja-app .vj-aim-frame > video.vj-frame-ready { opacity: 1; }
  #videoja-app .vj-aim-shade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background: #060607; opacity: 0.18; pointer-events: none; }
  /* V2 mobile FRAGMENTS -> ALIGN -> MERGE: three bands of the SAME poster
     (one cached image, CSS clip + translate only). While .is-frag is set the
     frame base (poster / film / shade) is hidden so the gaps between the bands
     read as gaps; it is enabled only once the bands are pixel-aligned over it.
     The film never blinks: its frame-gated fade happens under the bands.   */
  /* V3: each band is a FIXED overflow:hidden wrapper, one third of the frame
     (+0.5px overlap against seams), holding the full-frame poster offset by
     its own third. Geometry is static CSS (from --aw); scroll only writes
     translate3d on the wrapper. No clip-path, no size/position animation.
     The container opacity is scroll-driven (no transition); .is-late adds a
     short fade only when the film becomes ready after the merge point.   */
  #videoja-app .vj-aim-bands { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; opacity: 1; }
  #videoja-app .vj-aim-bands.is-late { transition: opacity .32s ease; }
  #videoja-app .vj-aim-band { position: absolute; left: 0; width: 100%; overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  #videoja-app .vj-aim-band.b0 { top: 0; height: calc(var(--aw) * 0.59259 + 0.5px); }
  #videoja-app .vj-aim-band.b1 { top: calc(var(--aw) * 0.59259 - 0.5px); height: calc(var(--aw) * 0.59259 + 1px); }
  #videoja-app .vj-aim-band.b2 { top: calc(var(--aw) * 1.18519 - 0.5px); height: calc(var(--aw) * 0.59259 + 0.5px); }
  #videoja-app .vj-aim-band > img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: calc(var(--aw) * 1.7778); max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
  #videoja-app .vj-aim-band.b1 > img { top: calc(var(--aw) * -0.59259 + 0.5px); }
  #videoja-app .vj-aim-band.b2 > img { top: calc(var(--aw) * -1.18519 + 0.5px); }
  #videoja-app .vj-aim-band > span { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #060607; opacity: 0.2; }
  #videoja-app .vj-aim-frame.is-frag { background: transparent; }
  #videoja-app .vj-aim-frame.is-frag > .vj-poster-layer, #videoja-app .vj-aim-frame.is-frag > .vj-aim-shade { opacity: 0; }
  #videoja-app .vj-aim-frame.is-frag > video, #videoja-app .vj-aim-frame.is-frag > video.vj-frame-ready { opacity: 0; transition: none; }
  #videoja-app .vj-aim-word { position: relative; z-index: 3; flex: none; pointer-events: none; font-size: 10.4vw; font-weight: 500; letter-spacing: -0.05em; line-height: 0.84; white-space: nowrap;
    text-shadow: 0 0 28px rgba(6,6,7,0.35); will-change: transform; }
  #videoja-app .vj-aim-w1 { align-self: flex-start; margin-left: 20px; margin-bottom: -0.36em; }
  #videoja-app .vj-aim-w2 { align-self: flex-end; margin-right: 20px; margin-top: -0.36em; padding-top: 0; }
  #videoja-app .vj-aim-cta { flex: none; margin-top: 14px; display: flex; justify-content: center; }
  #videoja-app .vj-aim-cta button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 18px; border: 0; background: none; color: rgba(240,238,232,0.86); font-family: inherit; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; }
  #videoja-app .vj-aim-cta .r { display: block; width: 34px; height: 1px; background: rgba(240,238,232,0.4); }
  @media (max-width: 759px) {
    #videoja-app .vj-aim { display: block; }
    #videoja-app .vj-frag, #videoja-app .vj-ai-unibox, #videoja-app .vj-ai-cap, #videoja-app .vj-ai-annot, #videoja-app .vj-ai-word { display: none !important; }
  }

  /* -------------------------------------------------------------- CONTACT - */
  #videoja-app .vj-contact { position: relative; background: #060607; color: #F0EEE8; }
  #videoja-app .vj-c-silence { height: 4vh; }
  #videoja-app .vj-c-scene { position: relative; height: 190vh; }
  #videoja-app .vj-c-sticky { position: sticky; top: 0; height: var(--vh); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--padc); }
  #videoja-app .vj-c-mark { position: absolute; left: var(--padc); top: clamp(70px, 13svh, 130px); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  #videoja-app .vj-c-mark .n { font-size: 10px; letter-spacing: 0.24em; color: rgba(240,238,232,0.42); font-variant-numeric: tabular-nums; }
  #videoja-app .vj-c-mark .t { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.34); }
  #videoja-app .vj-c-mark .r { display: block; width: clamp(36px, 5vw, 84px); height: 1px; background: rgba(240,238,232,0.16); }
  #videoja-app .vj-c-mark .q { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.22); }
  #videoja-app .vj-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  #videoja-app .vj-c-h1 { font-size: clamp(80px, 13.4vw, 224px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
  #videoja-app .vj-c-h2 { margin-top: 1.4vw; font-size: clamp(103px, 17.4vw, 293px); font-weight: 500; letter-spacing: -0.055em; line-height: 1; }
  #videoja-app .vj-strip { height: calc(0.333333em + 0.5px); margin-bottom: -0.5px; overflow: hidden; position: relative; opacity: 0; will-change: transform; }
  #videoja-app .vj-strip:last-child { margin-bottom: 0; }
  #videoja-app .vj-strip > div { position: absolute; left: 0; white-space: nowrap; line-height: 1; }
  #videoja-app .vj-strip.b0 > div { top: 0em; }
  #videoja-app .vj-strip.b1 > div { top: -0.333333em; }
  #videoja-app .vj-strip.b2 > div { top: -0.666667em; }
  #videoja-app .vj-c-reg { position: absolute; left: var(--padc); bottom: clamp(48px, 9svh, 96px); display: flex; align-items: center; gap: 12px; opacity: 0; }
  #videoja-app .vj-c-reg .d { display: block; width: 5px; height: 5px; background: #C98A3D; }
  #videoja-app .vj-c-reg .t { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,238,232,0.52); font-variant-numeric: tabular-nums; }

  #videoja-app .vj-c-body { padding: 0 var(--padc); }
  #videoja-app .vj-c-line { margin-top: clamp(70px, 14vh, 160px); height: 1px; transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.2,.75,.15,1); background: linear-gradient(to right, #C98A3D, rgba(201,138,61,0.5) 34%, rgba(201,138,61,0.06) 78%, rgba(240,238,232,0)); }
  #videoja-app .vj-c-line.is-in { transform: scaleX(1); }
  #videoja-app .vj-c-rail { display: flex; flex-direction: column; gap: clamp(20px, 3.4vh, 44px); margin-top: clamp(44px, 8vh, 96px); }
  #videoja-app .vj-c-link { position: relative; display: grid; grid-template-columns: minmax(88px, 11vw) 1fr auto; align-items: baseline; gap: clamp(20px, 3vw, 52px); padding: clamp(22px, 3.2vh, 40px) 0; }
  #videoja-app .vj-c-link .cat { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,238,232,0.3); transition: color .4s ease; }
  #videoja-app .vj-c-link .val { display: block; font-weight: 300; letter-spacing: -0.015em; transition: transform .7s cubic-bezier(.2,.75,.15,1); overflow-wrap: anywhere; }
  #videoja-app .vj-c-mail .val { font-size: clamp(22px, 3vw, 50px); }
  #videoja-app .vj-c-tg .val { font-size: clamp(24px, 3.2vw, 54px); }
  #videoja-app .vj-c-link .arw { justify-self: end; color: #C98A3D; font-size: clamp(14px, 1.4vw, 22px); display: inline-block; transition: transform .55s cubic-bezier(.2,.75,.15,1), color .4s ease; }
  #videoja-app .vj-c-link .hr { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(240,238,232,0.13); }
  #videoja-app .vj-c-link .u { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #C98A3D; transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.2,.75,.15,1); }
  #videoja-app a.vj-c-link { color: #F0EEE8; }
  #videoja-app a.vj-c-link:hover .u { transform: scaleX(1); }
  #videoja-app a.vj-c-link:hover .arw { transform: translate(7px, -7px); }
  #videoja-app a.vj-c-link:hover .val { transform: translateX(10px); }
  #videoja-app a.vj-c-link:hover .cat { color: rgba(240,238,232,0.62); }
  #videoja-app .vj-c-meta { margin-top: clamp(56px, 10vh, 110px); display: grid; grid-template-columns: minmax(88px, 11vw) 1fr auto; align-items: baseline; gap: clamp(20px, 3vw, 52px); }
  #videoja-app .vj-c-meta .cat { font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(240,238,232,0.24); }
  #videoja-app .vj-c-meta .val { font-size: clamp(14px, 1.25vw, 20px); font-weight: 300; letter-spacing: 0.01em; color: rgba(240,238,232,0.42); }
  #videoja-app .vj-c-credit { margin-top: clamp(80px, 15vh, 170px); display: flex; flex-direction: column; gap: 26px; }
  #videoja-app .vj-c-hr { height: 1px; background: rgba(240,238,232,0.09); }
  #videoja-app .vj-c-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; padding-top: 26px; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.34); }
  #videoja-app .vj-c-foot .a { font-weight: 500; letter-spacing: 0.3em; color: rgba(240,238,232,0.6); }
  #videoja-app .vj-c-foot .b { text-align: center; }
  #videoja-app .vj-c-foot .c { text-align: right; }
  #videoja-app .vj-c-tail { padding: clamp(24px, 4vh, 44px) 0 clamp(30px, 6vh, 64px); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.2); }
  #videoja-app .vj-c-tail .left { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
  #videoja-app .vj-c-tail a { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,238,232,0.3); }
  #videoja-app .vj-c-top { padding: 10px 0; border: 0; background: none; font-family: inherit; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(240,238,232,0.42); cursor: pointer; transition: color .35s ease; }

  /* ======================================================================== */
  /*  MOBILE  ( < 760px ) &#8212; separate implementation                            */
  /* ======================================================================== */
  @media (max-width: 759px) {
    #videoja-app { --pad: 22px; --padc: 22px; }

    /* HERO &#8212; the pinned distance is expressed in the SAME unit as the
       sticky (--vh, measured px). With 118vh (= large viewport on iOS) vs a
       sticky of the small viewport, the section and its sticky disagreed and
       progress (based on innerHeight) ended before the pin released.       */
    #videoja-app .vj-hero { height: calc(var(--vh) * 1.20); }
    #videoja-app .vj-hero-copy { bottom: 54px; }
    #videoja-app .vj-hero-loc { bottom: 20px; }
    /* The 134vw stage overflows its grid wrapper: the implicit track grows
       to fit and starts at x=0, so "place-items: center" never centred it &#8212;
       its middle sat at 67vw (&#8776;17vw right of centre). Placement is now
       explicit: rectangle centred on the viewport (-17vw), plus one small
       compositional nudge for the front-3/4 pose. Single tuning knob:
       --vj-cam-mx. Raycast / annotation / sensor-expand all read
       getBoundingClientRect, so they follow automatically.               */
    #videoja-app .vj-stage { width: 134vw; height: calc(var(--vh) * 0.455); justify-self: start;
      margin-left: calc(-17vw + var(--vj-cam-mx, 7vw)); margin-top: calc(var(--vh) * 0.205);
      pointer-events: none !important; touch-action: pan-y pinch-zoom;
      -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

    /* SELECTED WORK &#8212; compact pacing, nothing wider than the viewport */
    #videoja-app .vj-work { padding: 1vh 0 4vh; }
    #videoja-app .vj-work-head { padding: 0 var(--pad); }
    #videoja-app .vj-eyebrow { margin-bottom: 16px; }
    #videoja-app .vj-work-h2 { font-size: 15.5vw; }

    #videoja-app .vj-a1 { margin-top: 4vh; }
    #videoja-app .vj-m1 { width: 100%; margin-left: 0; }
    #videoja-app .vj-t1wrap { margin-top: 3.4vh; }
    #videoja-app .vj-t1 { font-size: 11vw; }

    #videoja-app .vj-a2 { margin-top: 5vh; }
    #videoja-app .vj-a2-eyebrow { margin-bottom: 18px; gap: 14px; }
    #videoja-app .vj-t2 { font-size: 10.4vw; }
    #videoja-app .vj-t2 .l2 { padding-left: 10vw; }
    #videoja-app .vj-m2 { width: 100%; margin: 3.4vh 0 0; }
    #videoja-app .vj-a2-foot { margin-top: 16px; gap: 14px; }

    #videoja-app .vj-a3 { margin-top: 6vh; }
    #videoja-app .vj-ghost { left: -6vw; top: 13vh; font-size: 30vw; }
    #videoja-app .vj-a3-head { margin-bottom: 3.6vh; gap: 12px; }
    /* one line with its index at 390 and 430: 12.53em x 6.2vw + 30px < content width */
    #videoja-app .vj-a3-head .h { font-size: 6.2vw; white-space: nowrap; }
    #videoja-app .vj-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px;
      width: calc(100% + var(--pad) * 2); margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
      padding: 0 var(--pad) 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; overscroll-behavior-y: auto;
      touch-action: pan-x pan-y pinch-zoom; }
    #videoja-app .vj-cell { flex: 0 0 72vw; width: 72vw; max-width: 72vw; margin-top: 0; scroll-snap-align: center; }
    #videoja-app .vj-vm { height: 118vw; }
    #videoja-app .vj-lab { margin-top: 14px; min-height: 34px; }

    #videoja-app .vj-a4 { margin-top: 6vh; }
    #videoja-app .vj-a4-head { padding: 0 var(--pad); }
    #videoja-app .vj-t4 { font-size: 9.4vw; }
    #videoja-app .vj-m4 { width: 100%; margin: 3.4vh 0 0; }
    #videoja-app .vj-t4b { margin-top: 3.4vh; padding: 0 var(--pad); text-align: left; font-size: 6.4vw; }

    #videoja-app .vj-a5 { margin-top: 6vh; }
    #videoja-app .vj-t5 { font-size: 11.6vw; }
    #videoja-app .vj-m5 { width: 100%; margin: 4vh 0 0; }
    #videoja-app .vj-t5wrap { margin-top: 3.4vh; padding-left: 0; }

    /* AI &#8212; V3: the pinned stage is only as tall as its content (words +
       portrait + CTA + stage label) and is pinned CENTRED in the viewport, so
       when it releases, Contact follows right after the CTA instead of after
       ~30vh of empty sticky. Stage height is static CSS (--aim-h, from --aw
       and the word metrics: 2 x 0.48em of 10.4vw + 58px CTA + 62px padding).
       Scene = 1.2 x --vh in total (was 2.1): pinned distance = scene - stage. */
    #videoja-app .vj-ai-silence { height: 1.5vh; }
    #videoja-app .vj-ai-scene { height: calc(var(--vh) * 1.12); margin-top: 1.5vh; }
    #videoja-app .vj-ai-sticky { --aw: min(64vw, calc(var(--vh) * 0.3038));
      --aim-h: calc(var(--aw) * 1.7778 + 9.984vw + 120px);
      height: var(--aim-h); top: calc((var(--vh) - var(--aim-h)) / 2); box-sizing: border-box; }
    #videoja-app .vj-aim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
    #videoja-app .vj-aim-stack { top: 18px; -webkit-transform: none; transform: none; }
    #videoja-app .vj-stagelabel { left: 20px; bottom: 10px; }

    /* CONTACT &#8212; deterministic: strips only translate, opacity never animates */
    #videoja-app .vj-c-silence { height: 0; }
    #videoja-app .vj-c-scene { height: calc(var(--vh) * 1.22); }
    #videoja-app .vj-c-sticky { justify-content: flex-start; padding-top: calc(var(--vh) * 0.20); padding-bottom: calc(var(--vh) * 0.05); }
    #videoja-app .vj-c-mark { top: calc(var(--vh) * 0.035); gap: 12px; }
    #videoja-app .vj-c-h1 { font-size: 19vw; }
    /* V2: mobile amplitude 0.85 x desktop offsets (was 0.52): max shifts
       -1.36vw / +1.19vw stay inside the 22px side padding at 390 and 430 */
    #videoja-app .vj-c-h2 { margin-top: 2vw; font-size: 21vw; }
    #videoja-app .vj-strip { opacity: 1; height: calc(0.333333em + 1px); margin-bottom: -1px; }
    #videoja-app .vj-strip:last-child { margin-bottom: 0; }
    #videoja-app .vj-c-reg { bottom: calc(var(--vh) * 0.05); opacity: 1; }
    #videoja-app .vj-c-line { margin-top: 3vh; }
    #videoja-app .vj-c-rail { gap: 22px; margin-top: 3vh; }
    #videoja-app .vj-c-link, #videoja-app .vj-c-meta { grid-template-columns: 1fr auto; gap: 12px; }
    #videoja-app .vj-c-link { padding: 16px 0; }
    #videoja-app .vj-c-link .cat, #videoja-app .vj-c-meta .cat { grid-column: 1 / -1; }
    #videoja-app .vj-c-mail .val { font-size: clamp(15px, 4.7vw, 21px); }
    #videoja-app .vj-c-tg .val { font-size: clamp(17px, 5.4vw, 24px); }
    #videoja-app .vj-c-link .arw { font-size: 13px; }
    #videoja-app .vj-c-meta { margin-top: 7vh; }
    #videoja-app .vj-c-meta .val { font-size: 15px; }
    #videoja-app .vj-c-credit { margin-top: 10vh; gap: 18px; }
    #videoja-app .vj-c-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
    #videoja-app .vj-c-foot .b, #videoja-app .vj-c-foot .c { text-align: left; }
    #videoja-app .vj-c-tail { padding: 18px 0 26px; }
    #videoja-app .vj-c-top { min-height: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #videoja-app [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  }