/*
 * GTA-mimic homepage — layout. Spec: raJayoux-design/docs/implementation-masterbook.md, Figma page 98:2.
 * Desktop (>= 1024 px) is the 1440 x 2240 Figma frame 107:13, built at its own px coordinates and
 * scaled as a whole (site.js sets `zoom`; the stepped media queries below are the no-JS fallback).
 * Mobile (< 1024 px) is the 390 frame 137:356 as a single fluid column.
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-gutter); color: var(--text-on-gutter); }
body {
  margin: 0;
  background: var(--surface-gutter);
  color: var(--text-on-gutter);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: var(--space-8) var(--space-12);
  background: var(--c-hud-yellow); color: var(--c-ink);
  font: 700 16px/1 var(--font-ui); text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 16px; box-shadow: var(--focus-ring); outline: none; }

/* Overhangs (Scene B's bike, tilted phone) may run into the page margin on wide screens but never
   widen the page: clip at the window edge, not at the 1440 layout edge. */
html, body { overflow-x: clip; }

/* ---------- shared surfaces ---------- */
/* GTA vignette: transparent to 62 % of the radius, ink 55 % at the edge (Figma: a box 1.2x the tile). */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 62%, rgb(0 0 0 / 0.55) 100%);
}

/* site.js toggles this for one frame to restart the hero cycle with every layer in step */
.hero.cycle-restart, .hero.cycle-restart * { animation: none !important; }

/* ---------- hero motion keyframes (6 s of 7 s = 85.714 %, 6.5 s = 92.857 %) ---------- */
@keyframes cycle-sky {
  0% { transform: none; }
  85.714%, 92.857% { transform: translateX(-60px); }
  92.858%, 100% { transform: none; }
}
@keyframes cycle-bike {
  0% { transform: none; }
  85.714%, 92.857% { transform: translateX(-72px); }
  92.858%, 100% { transform: none; }
}
@keyframes cycle-breakout {
  0% { transform: none; }
  85.714%, 92.857% { transform: translate(-84px, -16px); }
  92.858%, 100% { transform: none; }
}
@keyframes cycle-subject {
  0% { transform: none; opacity: 1; }
  85.714% { transform: translate(-28px, -16px) scale(1.0442, 1.0449); opacity: 1; }
  92.857% { transform: translate(-28px, -16px) scale(1.0442, 1.0449); opacity: 0; }
  92.858% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes cycle-dip {
  0%, 85.714% { opacity: 0; }
  92.857% { opacity: 1; }
  100% { opacity: 0; }
}
/* ---------- two-scene cycle A → B (14 s): A 0–7 s, B 7–14 s; scenes swap under full black ----------
   6 s = 42.857 %, 6.5 s = 46.429 %, 7 s = 50 %, 13 s = 92.857 %, 13.5 s = 96.429 % */
@keyframes cycle2-sky {
  0% { transform: none; }
  42.857%, 46.429% { transform: translateX(-60px); }
  46.43%, 100% { transform: none; }
}
@keyframes cycle2-bike {
  0% { transform: none; }
  42.857%, 46.429% { transform: translateX(-72px); }
  46.43%, 100% { transform: none; }
}
@keyframes cycle2-breakout {
  0% { transform: none; }
  42.857%, 46.429% { transform: translate(-84px, -16px); }
  46.43%, 100% { transform: none; }
}
@keyframes cycle2-subject {
  0% { transform: none; opacity: 1; }
  42.857% { transform: translate(-28px, -16px) scale(1.0442, 1.0449); opacity: 1; }
  46.429% { transform: translate(-28px, -16px) scale(1.0442, 1.0449); opacity: 0; }
  46.43%, 96.429% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes cycle2-dip {
  0%, 42.857% { opacity: 0; }
  46.429% { opacity: 1; }
  50%, 92.857% { opacity: 0; }
  96.429% { opacity: 1; }
  100% { opacity: 0; }
}
/* Scene B (165:955 Start → 165:991 End): ~5 % push-in on the background, subject grows from its bottom-left */
@keyframes cycle2-scene-b {
  0%, 46.428% { opacity: 0; }
  46.43%, 96.428% { opacity: 1; }
  96.43%, 100% { opacity: 0; }
}
@keyframes cycle2-sky-b {
  0%, 50% { transform: none; }
  92.857%, 96.429% { transform: translate(-38px, -21px) scale(1.05263); }
  96.43%, 100% { transform: none; }
}
@keyframes cycle2-subject-b {
  0%, 46.43% { transform: none; opacity: 0; }
  50% { transform: none; opacity: 1; }
  92.857% { transform: translate(-6px, -24px) scale(1.0504, 1.05); opacity: 1; }
  96.429% { transform: translate(-6px, -24px) scale(1.0504, 1.05); opacity: 0; }
  96.43%, 100% { transform: none; opacity: 0; }
}
/* ---------- mobile poster motion (< 1024 px): same 7 s rhythm, push-ins sized for a phone ---------- */
@keyframes m-sky {
  0% { transform: none; }
  85.714%, 92.857% { transform: scale(1.05); }
  92.858%, 100% { transform: none; }
}
@keyframes m-subject {
  0% { transform: none; opacity: 1; }
  85.714% { transform: translate(-6px, -10px) scale(1.035); opacity: 1; }
  92.857% { transform: translate(-6px, -10px) scale(1.035); opacity: 0; }
  92.858% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes m2-sky {
  0% { transform: none; }
  42.857%, 46.429% { transform: scale(1.05); }
  46.43%, 100% { transform: none; }
}
@keyframes m2-subject {
  0% { transform: none; opacity: 1; }
  42.857% { transform: translate(-6px, -10px) scale(1.035); opacity: 1; }
  46.429% { transform: translate(-6px, -10px) scale(1.035); opacity: 0; }
  46.43%, 96.429% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes m2-sky-b {
  0%, 50% { transform: none; }
  92.857%, 96.429% { transform: scale(1.05); }
  96.43%, 100% { transform: none; }
}
@keyframes m2-subject-b {
  0%, 46.43% { transform: none; opacity: 0; }
  50% { transform: none; opacity: 1; }
  92.857% { transform: translate(4px, -8px) scale(1.04); opacity: 1; }
  96.429% { transform: translate(4px, -8px) scale(1.04); opacity: 0; }
  96.43%, 100% { transform: none; opacity: 0; }
}
@keyframes enter-card    { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes enter-subject { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes enter-logo    { from { opacity: 0; translate: 14px -7px; scale: 1.045; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ============================================================
   DESKTOP COMPOSITION (>= 1024 px)
   ============================================================ */
@media (min-width: 1024px) {
  .stage {
    position: relative;
    width: 1440px;
    height: 2240px;
    margin: 0 auto;
    zoom: 0.711;                     /* no-JS fallback steps; site.js sets the exact value */
  }
}
@media (min-width: 1152px) { .stage { zoom: 0.8; } }
@media (min-width: 1280px) { .stage { zoom: 0.888; } }
@media (min-width: 1366px) { .stage { zoom: 0.948; } }
@media (min-width: 1440px) { .stage { zoom: 1; } }

@media (min-width: 1024px) {
  .m-topbar, .poster-corner { display: none; }

  /* ---------- hero card (110:2) ---------- */
  .hero-card {
    position: absolute; left: 52px; top: 40px; width: 1344px; height: 768px;
    clip-path: polygon(18px 32px, 1320px 0, 1344px 768px, 0 746px);
    background: var(--c-vi-night);
  }
  .hero-card .vignette {
    background: radial-gradient(ellipse 58% 58% at 50% 50%, transparent 62%, rgb(0 0 0 / 0.55) 100%);
  }
  .hero-layer { position: absolute; }
  .hero-layer picture, .hero-layer img { width: 100%; height: 100%; }
  .hero-layer img { object-fit: cover; }
  .hero-sky { left: -10px; top: -23px; width: 1424px; height: 814px; }   /* cycle Start (165:847): oversized for the pan */
  .hero-bike { left: 122px; top: 454px; width: 600px; height: 400px; }
  .hero-bike img { transform: scaleX(-1); }          /* approved art faces left; parked facing the panel */
  .hero-dip { position: absolute; inset: 0; background: var(--c-ink); opacity: 0; pointer-events: none; }
  .hero-edge {
    position: absolute; left: 52px; top: 40px; width: 1344px; height: 768px;
    overflow: visible; fill: none; stroke: var(--c-white); stroke-width: var(--stroke-edge);
    pointer-events: none;
  }

  /* Break-out (110:6): above the card, below every tile and all UI. */
  .hero-breakout {
    position: absolute; left: 0; top: 0; width: 760px; height: 980px;
    clip-path: polygon(50px 55px, 740px 45px, 740px 980px, 30px 980px, 40px 808px);
    pointer-events: none;
  }
  .hero-subject { left: 90px; top: 110px; width: 520px; height: 780px; transform-origin: 0 0; }

  /* Pause control for the cycle (WCAG 2.2.2) — top-left of the card, clear of the subject's head. */
  .cycle-toggle {
    position: absolute; left: 88px; top: 84px; z-index: 6;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; cursor: pointer;
    color: var(--c-white); opacity: 0.8;
    transition: opacity var(--motion-quick) linear, background-color var(--motion-quick) linear;
  }
  .cycle-toggle svg { width: 14px; height: 14px; fill: currentColor; }
  .cycle-toggle:hover, .cycle-toggle:focus-visible { opacity: 1; background: var(--c-white); color: var(--c-ink); }
  .cycle-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .cycle-toggle .i-play, .hero.is-paused .cycle-toggle .i-pause { display: none; }
  .hero.is-paused .cycle-toggle .i-play { display: block; }

  /* ---------- loading-screen cycle, Scene A (165:847 → 165:883 → 165:919) ----------
     7 s loop: 0–6 s linear move Start→End · 6–6.5 s dip to black (subject fades with it)
     · layers snap back to Start under black · 6.5–7 s dip back in. UI never moves or fades. */
  @media (prefers-reduced-motion: no-preference) {
    .hero-sky, .hero-bike, .hero-breakout, .hero-subject, .hero-dip {
      animation-duration: calc(var(--motion-scene) + 2 * var(--motion-dip));
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    .hero-sky       { animation-name: cycle-sky; }
    .hero-bike      { animation-name: cycle-bike; }
    .hero-breakout  { animation-name: cycle-breakout; }
    .hero-subject   { animation-name: cycle-subject; }
    .hero-dip       { animation-name: cycle-dip; }
    .hero.is-paused :is(.hero-sky, .hero-bike, .hero-breakout, .hero-subject, .hero-dip) { animation-play-state: paused; }

    /* entrance (157:1273): Start → Settled, 0.6 s ease-out, once (site.js adds .is-entered);
       uses translate/scale/opacity so it composes with the cycle's transform. Story panel: no entrance. */
    .hero:not(.is-entered) :is(.hero-card, .hero-edge, .hero-nav) { animation: enter-card var(--motion-settle) ease-out both; }
    .hero:not(.is-entered) .hero-breakout {
      animation: cycle-breakout calc(var(--motion-scene) + 2 * var(--motion-dip)) linear infinite,
                 enter-subject var(--motion-settle) ease-out both;
    }
    .hero:not(.is-entered) .hero-logo { animation: enter-logo var(--motion-settle) ease-out both; }
  }
  .hero-logo { transform-origin: 0 0; }
  /* ---------- Scene B layers (static = hidden; shown only by the A → B cycle) ---------- */
  .hero-scene-b { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .hero-sky-b { left: -40px; top: -23px; width: 1425px; height: 814px; transform-origin: 0 0; }
  .hero-breakout-b {
    position: absolute; left: 0; top: 0; width: 760px; height: 980px; pointer-events: none;
    clip-path: polygon(-600px 60px, 740px 45px, 740px 980px, -600px 980px);   /* open to the left: the bike may run into the page margin */
  }
  .hero-subject-b { left: -120px; top: 200px; width: 675px; height: 680px; opacity: 0; transform-origin: 0 0; }
  @media (prefers-reduced-motion: no-preference) {
    .hero.cycle-ab :is(.hero-sky, .hero-bike, .hero-breakout, .hero-subject, .hero-dip, .hero-scene-b, .hero-sky-b, .hero-subject-b) {
      animation-duration: calc(2 * (var(--motion-scene) + 2 * var(--motion-dip)));
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    .hero.cycle-ab .hero-sky       { animation-name: cycle2-sky; }
    .hero.cycle-ab .hero-bike      { animation-name: cycle2-bike; }
    .hero.cycle-ab .hero-breakout  { animation-name: cycle2-breakout; }
    .hero.cycle-ab .hero-subject   { animation-name: cycle2-subject; }
    .hero.cycle-ab .hero-dip       { animation-name: cycle2-dip; }
    .hero.cycle-ab .hero-scene-b   { animation-name: cycle2-scene-b; }
    .hero.cycle-ab .hero-sky-b     { animation-name: cycle2-sky-b; }
    .hero.cycle-ab .hero-subject-b { animation-name: cycle2-subject-b; }
    .hero.is-paused :is(.hero-scene-b, .hero-sky-b, .hero-subject-b) { animation-play-state: paused; }
  }
  .hero.no-cycle .cycle-toggle { display: none; }
  @media (prefers-reduced-motion: reduce) { .cycle-toggle { display: none; } }

  /* ---------- story panel (110:9) ---------- */
  .story {
    position: absolute; left: 560px; top: 228px; width: 800px; height: 386px; z-index: 4;
    display: flex; color: var(--c-white);
  }
  .story-text {
    width: 520px; flex: none; padding: var(--space-32);
    display: flex; flex-direction: column; gap: var(--space-16);
  }
  .story-status {
    display: flex; align-items: center; gap: var(--space-6);
    font: 400 15px/1.1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--c-hud-green); white-space: pre;
  }
  .status-dot { width: 10px; height: 10px; flex: none; fill: var(--c-hud-green); }
  .story-inset { display: block; width: 280px; flex: none; align-self: stretch; }
  .story-inset img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- nav strip (110:25) ---------- */
  .hero-nav {
    position: absolute; left: 560px; top: 751px; width: 800px; height: 46px; z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-16);
    padding: var(--space-8) var(--space-12);
    background: linear-gradient(to right, transparent 0%, var(--c-scrim) 45%, var(--c-scrim) 100%);
  }

  /* Past the hero the same strip pins to the top, full scrim. */
  .hero-nav.is-stuck {
    position: fixed; left: 0; right: 0; top: 0; width: auto; z-index: 50;
    padding-right: calc(max(0px, (100vw - 1440px) / 2) + 80px + var(--space-12));
    background: var(--c-scrim);
    -webkit-backdrop-filter: blur(var(--blur-backdrop)); backdrop-filter: blur(var(--blur-backdrop));
  }

  /* ---------- logotype (110:21) — above the nav ---------- */
  .hero-logo { position: absolute; left: 30px; top: 507px; width: 373px; height: 268px; z-index: 6; }
  .hero-wordmark { position: absolute; left: -5.68px; top: 0; width: 384.42px; height: 235.47px; }
  .hero-plate { position: absolute; left: 0; top: 233px; width: 369px; height: 33px; }

  /* ---------- collage tiles: bounding box + cut-line polygon (local coords) ---------- */
  .tile {
    position: absolute;
    left: var(--x); top: var(--y); width: var(--w); height: var(--h);
    clip-path: var(--clip);
    overflow: hidden;
  }
  .tile-bg { position: absolute; inset: 0; background: var(--c-vi-night); }

  .tile--resonova   { --x: 0px;    --y: 886px;  --w: 860px; --h: 641px; --clip: polygon(0 24px, 860px 0, 797px 641px, 0 626px); }
  .tile--presage    { --x: 823px;  --y: 870px;  --w: 617px; --h: 460px; --clip: polygon(37px 16px, 617px 0, 617px 460px, 0 396px); }
  .tile--moto       { --x: 797px;  --y: 1266px; --w: 353px; --h: 268px; --clip: polygon(26px 0, 335px 32px, 353px 268px, 0 261px); }
  .tile--dashcam    { --x: 1132px; --y: 1298px; --w: 308px; --h: 242px; --clip: polygon(0 0, 308px 32px, 308px 242px, 18px 236px); }
  .tile--experience { --x: 0px;    --y: 1512px; --w: 505px; --h: 393px; --clip: polygon(0 0, 505px 10px, 486px 353px, 0 393px); }
  .tile--tools      { --x: 483px;  --y: 1522px; --w: 506px; --h: 454px; --clip: polygon(22px 0, 479px 9px, 506px 454px, 0 402px); }
  .tile--xr         { --x: 470px;  --y: 1924px; --w: 530px; --h: 236px; --clip: polygon(13px 0, 519px 52px, 530px 236px, 0 236px); }
  .tile--about      { --x: 0px;    --y: 1865px; --w: 486px; --h: 295px; --clip: polygon(0 40px, 486px 0, 470px 295px, 0 295px); }
  .tile--contact    { --x: 962px;  --y: 1531px; --w: 478px; --h: 629px; --clip: polygon(0 0, 478px 9px, 478px 629px, 38px 629px); }

  /* tile content */
  .tile-art { position: absolute; inset: 0; overflow: hidden; }
  .tile-art img { position: absolute; max-width: none; }
  /* Figma image crops (245:43, 253:38, 260:5) */
  .art--resonova img { left: -28.6%;  top: 0;       width: 128.6%;  height: 114.98%; }
  .art--presage img  { left: -8.75%;  top: -13.04%; width: 136.95%; height: 122.39%; }
  .art--about img    { left: -10.49%; top: -6.78%;  width: 123.46%; height: 135.59%; }
  .tile-panel { position: absolute; }
  .tile--resonova .tile-panel   { left: 32px; top: 128px; }
  .tile--presage .tile-panel    { left: 48px; top: 32px; width: 300px; }
  .tile--moto .tile-panel       { left: 24px; top: 121px; width: 250px; }
  .tile--dashcam .tile-panel    { left: 22px; top: 47px;  width: 250px; }
  .tile--experience .tile-panel { left: 36px; top: 20px;  width: 440px; }
  .tile--tools .tile-panel      { left: 48px; top: 89px;  width: 410px; }
  .tile--xr .tile-panel         { left: 40px; top: 61px;  width: 380px; }
  .tile--about .tile-panel      { left: 24px; top: 90px;  width: 300px; }
  .tile--contact .tile-panel    { left: 60px; top: 163px; width: 360px; }

  /* The real app is the Resonova subject (245:962): 277 x 600, tilted, breaking out of the tile top.
     Built at component size (160 x 346) and scaled 1.731, so bezel/border/radius/shadow scale with it. */
  .device--resonova {
    position: absolute; z-index: 3;
    left: 599.3px; top: 981.9px; width: 160px; height: 346px;
    padding: 3px; border-width: 3px; border-radius: 22px;
    box-shadow: 6px 6px 0 var(--c-ink);
    transform: rotate(4deg) scale(1.73125);
  }

  /* Gutters (111:8): one overlay strokes every cut line — 12 px ink + 6 px theme centre line. */
  .gutters {
    position: absolute; left: -6px; top: 0; width: 1452px; height: 2240px; z-index: 2;
    clip-path: inset(0 6px);                     /* gutters stop at the layout edge */
    fill: none; pointer-events: none; overflow: visible;
  }
  .gutters-ink { stroke: var(--c-ink); stroke-width: 12; }
  .gutters-theme { stroke: var(--surface-gutter); stroke-width: 6; }

  /* "SELECTED WORK" plate (122:78) */
  .work-plate { position: absolute; left: 24px; top: 880px; z-index: 5; }

  /* ---------- footer (y 2184) ---------- */
  .site-footer {
    position: absolute; left: 36px; right: 88px; top: 2184px; height: 36px;
    display: flex; align-items: center; justify-content: space-between;
    color: var(--text-on-gutter);
  }
  .shortcuts-toggle { position: absolute; left: 524px; top: 0; width: 231px; height: 36px; }
}

/* ============================================================
   SHARED (all widths)
   ============================================================ */
.tile-bg { background: var(--c-vi-night); }
.tile--placeholder .tile-bg { background: var(--c-vi-night); }   /* art pending (asset register) */

/* Experience — GTA pause menu (134:250) */
.pause-menu { display: flex; flex-direction: column; gap: var(--space-4); }
.pm-header { display: flex; align-items: flex-end; gap: var(--space-8); color: var(--c-white); text-transform: uppercase; }
.pm-title { flex: 1 0 0; min-width: 1px; font: 700 48px/0.95 var(--font-ui); }
.pm-meta {
  display: flex; flex-direction: column; text-align: right; white-space: nowrap;
  font: 600 13px/1.15 var(--font-ui); letter-spacing: 0.08em;
}
.pm-tabs { display: flex; gap: var(--space-2); }
.pm-tabs .pause-tab { flex: 1 0 0; min-width: 1px; }
.pm-detail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-12); color: var(--c-white); }
.pm-mission { width: 204px; height: auto; margin-left: -2px; }

/* Tools — GTA menu (107:147) */
.gta-menu { display: flex; flex-direction: column; }
.gm-banner {
  margin: 0; padding: var(--space-16); background: var(--c-player); color: var(--c-white);
  font: 700 28px/1 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase;
}
.gm-sub {
  padding: var(--space-8) var(--space-16); background: var(--c-ink); color: var(--c-hud-yellow);
  font: 700 15px/1.1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
}

/* XR + Contact copy blocks (107:136, 107:164) */
.tile-copy { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; color: var(--c-white); }
.tile-copy > * { margin: 0; }

/* Presage details dialog */
.details-dialog {
  width: min(560px, calc(100vw - 32px)); padding: var(--space-24);
  border: var(--stroke-edge) solid var(--c-white); color: var(--c-white);
}
.details-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.details-dialog .dd-head { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-16); }
.details-dialog .dd-head > * { margin: 0; }
.details-dialog .dd-list .mr-value { text-align: left; }
.details-dialog .actions { margin-top: var(--space-16); }

.shortcuts-toggle {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-4) var(--space-12); color: var(--c-white); white-space: nowrap;
}

/* Shortcuts off → hide the letter key caps (D / C / E); ↵ still means Enter. */
.shortcuts-off .key--shortcut { display: none; }

/* ============================================================
   MOBILE COMPOSITION (< 1024 px) — Figma 137:356 (390 frame), fluid; tablets centred at 640 max.
   Tiles stack and overlap by 26 px along alternating angled cuts; each tile is inset 6 px at its
   cut lines so the page background shows through as the 12 px gutter (Figma 137:557).
   ============================================================ */
@media (max-width: 1023.98px) {
  .stage { max-width: 640px; margin: 0 auto; }

  /* top bar (137:580) */
  .m-topbar {
    position: sticky; top: 0; z-index: 40; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 16px; max-width: 640px; margin: 0 auto;
  }
  .m-logo {
    color: var(--c-white); text-decoration: none;
    font: 700 15px/1.1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
  }
  .m-phone {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-8) var(--space-12); border: 0; cursor: pointer;
    background: var(--c-player); color: var(--c-white);
    font: 700 15px/1.1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
  }
  .m-phone svg { width: 18px; height: 18px; fill: currentColor; }
  .m-logo:focus-visible, .m-phone:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* desktop-only pieces */
  .hero-edge, .hero-bike, .hero-nav, .gutters,
  .story-inset, .shortcuts-toggle, .pm-meta, .tile--resonova .ip-detail { display: none; }

  /* shared tile geometry */
  .tile { position: relative; overflow: hidden; margin-top: -26px; }
  .cut-a { clip-path: polygon(6px 6px, calc(100% - 6px) 32px, calc(100% - 6px) calc(100% - 32px), 6px calc(100% - 6px)); }
  .cut-b { clip-path: polygon(6px 32px, calc(100% - 6px) 6px, calc(100% - 6px) calc(100% - 6px), 6px calc(100% - 32px)); }
  .tile--contact { clip-path: polygon(6px 6px, calc(100% - 6px) 32px, calc(100% - 6px) calc(100% - 6px), 6px calc(100% - 6px)); }
  .tile-bg, .vignette { position: absolute; inset: 0; }
  .vignette { background: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 60%, rgb(0 0 0 / 0.55) 100%); }
  .tile-art { position: absolute; inset: 0; }
  .tile-art picture, .tile-art img { width: 100%; height: 100%; }
  .tile-art img { object-fit: cover; }
  .tile-panel { position: relative; margin: 0 16px; width: auto; }
  .tile .info-panel, .tile .help-text { width: auto; }

  /* hero poster (137:357) — static on mobile (no cycle) */
  .hero { position: relative; padding-top: 518px; }
  .hero-card, .hero-breakout {
    position: absolute; left: 0; right: 0; top: 0; height: 544px; overflow: hidden;
    clip-path: polygon(6px 6px, calc(100% - 6px) 6px, calc(100% - 6px) calc(100% - 32px), 6px calc(100% - 6px));
  }
  .hero-card { background: var(--c-ink); }
  .hero-layer { position: absolute; }
  .hero-sky { inset: 0; }
  .hero-sky picture, .hero-sky img { width: 100%; height: 100%; }
  .hero-sky img { object-fit: cover; object-position: 100% 50%; }
  .hero-subject { left: calc(50% - min(51.28%, 200px)); top: 30px; width: min(102.56%, 400px); height: 620px; }
  .hero-subject picture, .hero-subject img { width: 100%; height: 100%; }
  .hero-subject img { object-fit: cover; object-position: 50% 0; }
  .poster-corner {
    position: absolute; top: 16px; z-index: 3; margin: 0;
    display: flex; align-items: center; gap: var(--space-6);
    font: 600 13px/1.15 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-white);
  }
  .poster-corner--left { left: 16px; }
  .poster-corner--right { right: 16px; color: var(--c-hud-green); font-family: var(--font-body); font-weight: 400; }
  .poster-corner .status-dot { width: 10px; height: 10px; fill: var(--c-hud-green); }
  .hero-logo { position: absolute; left: 16px; top: 231.5px; width: min(calc(100% - 32px), 358px); z-index: 3; }
  .hero-wordmark { display: block; width: 104.18%; height: auto; margin-left: -1.54%; }
  .hero-plate { display: flex; width: 100%; margin-top: -2px; padding: 3.88px 7.76px; font-size: min(24.25px, calc((100vw - 48px) / 14.2)); border-width: 1.455px; }

  /* story tile (137:369) — actions come before the copy on mobile */
  .story {
    position: relative; display: block; min-height: 512px; padding: 40px 0 80px; z-index: 1;
    background: var(--c-vi-night);
    clip-path: polygon(6px 32px, calc(100% - 6px) 6px, calc(100% - 6px) calc(100% - 6px), 6px calc(100% - 32px));
  }
  .story-text {
    display: flex; flex-direction: column; gap: var(--space-12);
    margin: 0 16px; padding: var(--space-16);
    background: var(--c-scrim);
    -webkit-backdrop-filter: blur(var(--blur-backdrop)); backdrop-filter: blur(var(--blur-backdrop));
  }
  .story-text > * { margin: 0; }
  .story-status { order: 1; display: flex; align-items: flex-start; gap: var(--space-6); white-space: pre-wrap;
    font: 400 15px/1.1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-hud-green); }
  .story-status .status-dot { width: 10px; height: 10px; flex: none; margin-top: 3px; fill: var(--c-hud-green); }
  .story-text .actions { order: 2; }
  .story-text [data-i18n="storyP1"] { order: 3; }
  .story-text [data-i18n="storyP2"] { order: 4; font-size: 13px; opacity: var(--opacity-secondary); }

  /* main column */
  main { position: relative; }
  .work-plate { position: absolute; left: 16px; top: -30px; z-index: 5; margin: 0; }
  .work-feature { position: relative; }

  /* per-tile heights + panel offsets (137:389 … 137:544) */
  .tile--resonova   { min-height: 700px; padding: 251px 0 74px; }
  .tile--presage    { min-height: 592px; padding: 246px 0 64px; }
  .tile--moto       { min-height: 260px; padding: 79px 0 54px; }
  .tile--dashcam    { min-height: 312px; padding: 131px 0 54px; }
  .tile--experience { min-height: 450px; padding: 48px 0 82px; }
  .tile--tools      { min-height: 422px; padding: 48px 0 71px; }
  .tile--xr         { min-height: 230px; padding: 49px 0 54px; }
  .tile--about      { min-height: 352px; padding: 143px 0 54px; }
  .tile--contact    { min-height: 410px; padding: 56px 0 61px; }
  .art--resonova img { object-position: 86% 50%; }
  .art--presage img  { object-position: 66% 50%; }
  .art--about img    { object-position: 100% 40%; }

  /* the app breaks out of the Resonova tile's top-right (144:633): 160 x 346 device, scale .64, 5deg */
  .device--resonova {
    position: absolute; z-index: 3; top: -38px; right: -8.25px;
    width: 160px; height: 346px; transform: rotate(5deg) scale(0.64);
  }

  .notification { width: 100%; max-width: 340px; }

  /* footer (137:585) */
  .site-footer {
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 16px 40px; color: var(--text-on-gutter);
  }
  .site-footer .t-menu { font: 600 13px/1.15 var(--font-ui); letter-spacing: 0.08em; }
  .tile--xr .actions { display: none; }     /* Figma 137:531: help text only on mobile */
  /* ---------- poster motion (Scene A → B), mirrors the desktop cycle ---------- */
  .hero-dip { position: absolute; inset: 0; background: var(--c-ink); opacity: 0; pointer-events: none; }
  .hero-scene-b { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .hero-sky-b { inset: 0; }
  .hero-sky-b picture, .hero-sky-b img { width: 100%; height: 100%; }
  .hero-sky-b img { object-fit: cover; object-position: 22% 50%; }
  .hero-breakout-b {
    position: absolute; left: 0; right: 0; top: 0; height: 544px; overflow: hidden; pointer-events: none;
    clip-path: polygon(6px 6px, calc(100% - 6px) 6px, calc(100% - 6px) calc(100% - 32px), 6px calc(100% - 6px));
  }
  .hero-subject-b {
    left: calc(50% - min(52%, 210px)); width: min(104%, 420px); height: auto; aspect-ratio: 969 / 976;
    top: auto; bottom: 4px; opacity: 0; transform-origin: 0 100%;
  }
  .hero-subject-b picture, .hero-subject-b img { width: 100%; height: 100%; }
  .hero-sky, .hero-sky-b { transform-origin: 70% 50%; }
  .hero-subject { transform-origin: 50% 100%; }
  .cycle-toggle {
    position: absolute; right: 16px; top: 40px; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; color: var(--c-white); cursor: pointer;
  }
  .cycle-toggle svg { width: 14px; height: 14px; fill: currentColor; }
  .cycle-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .cycle-toggle .i-play, .hero.is-paused .cycle-toggle .i-pause { display: none; }
  .hero.is-paused .cycle-toggle .i-play { display: block; }
  @media (prefers-reduced-motion: reduce) { .cycle-toggle { display: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .hero-sky, .hero-subject, .hero-dip {
      animation-duration: calc(var(--motion-scene) + 2 * var(--motion-dip));
      animation-iteration-count: infinite; animation-timing-function: linear;
    }
    .hero-sky     { animation-name: m-sky; }
    .hero-subject { animation-name: m-subject; }
    .hero-dip     { animation-name: cycle-dip; }
    .hero.cycle-ab :is(.hero-sky, .hero-subject, .hero-dip, .hero-scene-b, .hero-sky-b, .hero-subject-b) {
      animation-duration: calc(2 * (var(--motion-scene) + 2 * var(--motion-dip)));
      animation-iteration-count: infinite; animation-timing-function: linear;
    }
    .hero.cycle-ab .hero-sky       { animation-name: m2-sky; }
    .hero.cycle-ab .hero-subject   { animation-name: m2-subject; }
    .hero.cycle-ab .hero-dip       { animation-name: cycle2-dip; }
    .hero.cycle-ab .hero-scene-b   { animation-name: cycle2-scene-b; }
    .hero.cycle-ab .hero-sky-b     { animation-name: m2-sky-b; }
    .hero.cycle-ab .hero-subject-b { animation-name: m2-subject-b; }
    .hero.is-paused :is(.hero-sky, .hero-subject, .hero-dip, .hero-scene-b, .hero-sky-b, .hero-subject-b) { animation-play-state: paused; }
  }
}

/* iFruit phone menu (137:1772) — slides up */
.ifruit {
  width: 300px; height: 560px; max-height: calc(100dvh - 32px); padding: 7px;
  margin: auto auto 48px;
  background: var(--c-ink); color: var(--c-white);
  border: var(--stroke-edge) solid var(--c-white); border-radius: var(--radius-device);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.6);
  overflow: hidden;
}
.ifruit[open] { animation: ifruit-up var(--motion-slide) ease-out; }
.ifruit::backdrop { background: var(--c-scrim); }
@keyframes ifruit-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.if-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: var(--radius-key);
  background: linear-gradient(to bottom, var(--c-player), #050a2e);
}
.if-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0; }
.if-time { font: 700 15px/1.1 var(--font-ui); letter-spacing: 0.04em; }
.if-brand { font: 600 13px/1.15 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.if-grid {
  display: grid; grid-template-columns: repeat(3, 68px); justify-content: space-between;
  row-gap: 14px; padding: 29px 22px 0;
}
.if-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; color: var(--c-white); cursor: pointer; text-decoration: none;
  font: 600 13px/1.15 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.if-icon {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: var(--radius-plate); color: var(--c-white);
}
.if-icon svg { width: 30px; height: 30px; fill: currentColor; }
.if-icon--blue { background: var(--c-player); }
.if-icon--yellow { background: var(--c-hud-yellow); color: var(--c-ink); }
.if-icon--plum { background: var(--c-vi-plum); }
.if-icon--soft { background: var(--c-ink-soft); }
.if-app:hover .if-icon, .if-app:focus .if-icon { background: var(--c-white); color: var(--c-ink); box-shadow: var(--focus-ring); }
.if-app:focus { outline: none; }
.if-mark { position: absolute; left: 50%; top: 372px; width: 94px; height: auto; transform: translateX(-50%); pointer-events: none; }
.if-prompts {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: flex-end; gap: var(--space-16); padding: var(--space-8);
  background: var(--c-scrim);
  font: 700 15px/1.1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
}
.if-close { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.if-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }