.mobile-system-static,
.mobile-back-to-start,
.mobile-scroll-cue {
  display: none;
}

@media (max-width: 1023px), (max-height: 680px), (max-aspect-ratio: 4/3), (min-aspect-ratio: 5/2) {
  :root {
    --mobile-gutter: clamp(20px, 5.5vw, 40px);
    --mobile-sky: url('/assets/variant-c/mobile-sky.webp');
    --mobile-clearance: env(safe-area-inset-bottom, 0px);
    --muted: #334c5b;
  }

  html { scroll-padding-bottom: var(--mobile-clearance); }
  html, body { min-width:0; }
  html, body, main { background: #d8e8f1; }
  body { overflow: visible; overflow-wrap:anywhere; }
  main { padding-bottom: var(--mobile-clearance); }

  .opening-stage,
  .opening-window,
  .camera-track,
  .chapter-panel,
  .story-canvas {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
    will-change: auto;
    background: transparent;
  }

  .opening-window { isolation: auto; }
  .is-complete .camera-track { transform: none; }
  .sky-panel, .story-scroller { display: none; }
  /* Keep mobile photographs crisp: no composited sky or water overlays. */
  .cloud-shader, .opening-water { display: none; }

  .landing-visual {
    position: relative;
    inset: auto;
    height: calc(100svh - var(--mobile-clearance));
    min-height: 490px;
    z-index: 1;
    clip-path: none;
    pointer-events: auto;
    background: #b9d9ea;
  }

  .landing-visual .scene-media {
    height: 200%;
    transform: translateY(-50%);
  }

  .landing-visual .tall-scene img { object-position: center bottom; filter: none; }
  .landing-visual .landing-lockup {
    --lockup-width: min(86vw, 620px);
    top: 0;
    height: 100%;
    justify-content: flex-start;
    padding: clamp(140px, 23svh, 240px) 20px 0;
    gap: 12px;
  }
  .landing-lockup img { width: var(--lockup-width); }
  .landing-lockup p {
    max-width: none;
    font-size: calc(var(--lockup-width) / 21);
    line-height: 1.18;
  }
  .mobile-opening .landing-visual .scene-media {
    animation: mobile-sky-pan 2.1s cubic-bezier(.45,.05,.2,1) 1.1s both;
  }
  .mobile-opening .landing-lockup { animation: mobile-logo-in .8s ease .2s both; }

  .build-page-label {
    top: calc(18px + env(safe-area-inset-top, 0px));
    left: var(--mobile-gutter);
    min-width: 0;
    padding: 7px 10px;
    font-size: .625rem;
    letter-spacing: .09em;
    transform: none;
    box-shadow: none;
    z-index: 5;
  }
  .landing-visual .build-page-label { top: 20px; }
  .mobile-scroll-cue {
    display: block;
    position: absolute;
    bottom: 22px;
    width: 100%;
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: .75rem;
    letter-spacing: .07em;
    text-shadow: 0 1px 4px #14242d;
  }

  .story-scene {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none;
    clip-path: none;
    pointer-events: auto;
    background: #d8e8f1 var(--mobile-sky) center / cover;
    will-change: auto;
    scroll-margin-top: 0;
  }

  .network-label { font-size: .75rem; font-weight: 650; letter-spacing: .01em; }
  .commerce-scene, .system-scene { padding: 82px var(--mobile-gutter) 58px; }
  .commerce-scene { display: flex; flex-direction: column; }
  .commerce-copy { order: 0; }
  .commerce-phone-film { order: 1; }
  .commerce-copy,
  .system-heading,
  .system-scene.panel-system .system-heading,
  .system-scene.panel-system.is-active .system-heading {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 610px;
    margin-inline: auto;
    transform: none;
  }
  .commerce-copy h1, .system-scene.panel-system .system-heading h2 {
    max-width: 18ch;
    margin: 22px 0 0;
    font-size: clamp(2.25rem, 8.8vw, 3.8rem);
    font-weight: 550;
    line-height: 1.05;
    letter-spacing: -.045em;
  }
  .commerce-copy > p:last-child,
  .system-heading > p:last-child {
    display: block;
    max-width: 46ch;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  .commerce-sky, .system-sky, .numbered-sky, .people-background { display: none; }
  .commerce-phone-film, .system-phone-film {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 610px;
    height: auto;
    margin: 36px auto 0;
    min-height: 590px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .commerce-scene.panel-intro .intro-phone-hero {
    position: relative;
    inset: auto;
    height: 590px;
    overflow: visible;
  }
  .commerce-scene.panel-intro .intro-phone-orbit {
    top: 8px;
    left: 50%;
    width: min(270px, 72vw);
    transform: translateX(-50%);
  }
  .commerce-phone-fallback { object-fit: contain; object-position: 62% center; }
  .system-scene .system-phone-film > .system-motion-story {
    position: relative;
    display: grid;
    place-items: start center;
    inset: auto;
    height: 590px;
    padding: 8px 0 0;
    overflow: visible;
  }
  .system-scene .system-motion-story .system-motion-phone-wrap {
    position: relative;
    inset: auto;
    width: min(270px, 72vw);
    height: auto;
    aspect-ratio: 9 / 19.42;
    transform: none;
  }
  .system-scene .system-motion-glow,
  .system-scene .system-motion-floor,
  .system-scene .system-motion-shadow { display: none; }
  .mobile-system-static {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 16px;
    width: min(270px, 72vw);
    min-height: 550px;
    margin: 0 auto;
    padding: 40px 18px 24px;
    border: 5px solid #fff;
    border-radius: 34px;
    color: #14242d;
    background: #f9fbfc;
    box-shadow: 0 15px 28px #28485630;
  }
  .mobile-phone-notch { position:absolute; top:8px; left:38%; width:24%; height:13px; border-radius:20px; background:#14242d; }
  .mobile-system-static p { margin:0; font-size: .875rem; line-height:1.45; }
  .mobile-system-static strong { font-size: .875rem; }
  .mobile-system-static img { width:100%; height:165px; object-fit:cover; border-radius:12px; }
  .mobile-phone-query { padding:12px; border-radius:12px; background:#e8edf3; }
  .has-original-motion .mobile-system-static { display: none; }
  .system-signals {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 610px;
    margin: 32px auto 0;
    gap: 0;
  }
  .system-signals li { grid-template-columns:28px 1fr; gap:12px; padding:22px 0; border-top:1px solid #24485826; }
  .system-signals li > span { color:#334c5b; font-size:.75rem; padding-top:4px; }
  .system-signals strong { font-size:1.125rem; }
  .system-signals p { display:block; margin-top:8px; font-size:1rem; line-height:1.5; }

  .exterior-scene { height: min(88vw, 660px); min-height: 320px; overflow:hidden; }
  .exterior-scene .scene-fill img { object-position:35% center; }
  .network-corner { top:auto; bottom:24px; left:var(--mobile-gutter); font-size:.8125rem; }
  .access-scene {
    --kiosk-depth-shadow: drop-shadow(3px 6px 4px rgba(28, 24, 21, 0.2))
      drop-shadow(12px 16px 14px rgba(28, 24, 21, 0.26));
    height:min(130vw, 800px); min-height:500px; overflow:hidden;
  }
  .access-scene-background { object-position:51% center; }
  .access-scene-background { width:100%; }
  .access-scene .access-kiosk,
  .access-scene .access-kiosk-fallback {
    width:min(88vw, 490px);
    max-height:92%;
    bottom:22px;
    left:50%;
  }
  .access-scene .access-kiosk::before { display:none; }
  .access-scene .access-kiosk { opacity:1; transform:translateX(-50%); animation:none; }

  .numbered-scene {
    --art-ratio: 1448 / 1086;
    --art-position: 51% center;
    padding:0 0 58px;
    display:flex;
    flex-direction:column;
  }
  [data-scene="section-002"] { --art-ratio:1672 / 941; --art-position:50% center; }
  [data-scene="section-003"] { --art-ratio:878 / 928; --art-position:50% center; }
  [data-scene="section-004"] { --art-ratio:1920 / 1066; }
  /* Art stays full width, with fully readable copy below it from first paint. */
  .numbered-visual {
    position:relative;
    order:0;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:var(--art-ratio);
    margin:0 auto;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    will-change:auto;
  }
  .numbered-visual > img { object-fit:contain; object-position:var(--art-position); }
  .numbered-scene-wide .numbered-visual > img { object-fit:contain; }
  .numbered-copy, .numbered-scene-wide .numbered-copy {
    position:relative;
    inset:auto;
    display:block;
    order:1;
    width:100%;
    max-width:680px;
    padding:18px var(--mobile-gutter) 0;
    margin:0 auto;
    opacity:1;
    transform:none;
    will-change:auto;
  }
  .numbered-copy .network-label { margin-bottom:22px; }
  .section-number { margin:0; font-size:5rem; line-height:.88; text-shadow:none; letter-spacing:-.07em; }
  .numbered-copy h2, .numbered-scene-wide .numbered-copy h2 {
    max-width:22ch;
    margin:22px 0 0;
    font-size:clamp(1.875rem, 7.7vw, 2.6rem);
    font-weight:550;
    line-height:1.1;
    letter-spacing:-.04em;
  }
  .section-detail, .section-proof { max-width:48ch; font-size:1.0625rem; line-height:1.55; }
  .section-detail { margin-top:24px; }
  .section-proof { margin-top:20px; font-weight:600; }
  .numbered-scene-wide .numbered-visual { margin-top:96px; }

  .people-scene { padding:88px var(--mobile-gutter) 64px; }
  .people-network, .people-scene > h2 { position:relative; inset:auto; }
  .people-network { color:var(--ink); font-size:.75rem; }
  .people-scene > h2 { margin:22px 0 36px; font-size:clamp(2.8rem,12vw,5rem); letter-spacing:-.06em; color:#102834; text-shadow:none; }
  .team-grid, .advisors-grid {
    position:relative;
    inset:auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,max(9rem,calc((100% - 16px) / 2))),1fr));
    gap:32px 16px;
    max-width:760px;
    margin:0 auto;
  }
  .person-card, .person-card:nth-child(5), .advisor-card, .advisor-card:nth-child(7) { grid-column:auto; text-align:left; }
  /* Equal full-column frames. Never fit portraits into smaller, uneven boxes. */
  .person-card img, .advisor-card img { width:100%; height:auto; aspect-ratio:1 / 1; border-radius:12px; object-fit:cover; object-position:center top; }
  .person-card h3, .advisor-card h3 { margin:12px 0 0; font-size:1rem; line-height:1.3; text-transform:none; letter-spacing:-.015em; }
  .person-card p, .advisor-card p { display:block; max-width:none; margin:6px 0 0; font-size:.875rem; line-height:1.45; font-weight:400; color:var(--muted); }

  .opening-window > .story-navigation,
  .opening-window > .opening-control { display:none; }
  .mobile-back-to-start {
    position:fixed;
    z-index:600;
    top:max(10px,env(safe-area-inset-top,0px));
    right:max(16px,env(safe-area-inset-right,0px));
    bottom:auto;
    left:auto;
    display:flex;
    flex:none;
    max-width:135px;
    min-width:112px;
    min-height:44px;
    padding:0 16px;
    border:0;
    border-radius:999px;
    color:#183745;
    font-size:.75rem;
    letter-spacing:0;
    line-height:1.25;
    justify-content:center;
    text-align:center;
    background:transparent;
    opacity:1;
    box-shadow:none;
    backdrop-filter:none;
  }
  .mobile-back-to-start::before { border-color:#1c3f5024; background:#ffffff70; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  @media (hover: hover) {
    .mobile-back-to-start:hover:not(:disabled)::before { border-color:#1c3f5040; background:#1c3f5012; }
  }
  .mobile-animation-paused *, .mobile-animation-paused *::before, .mobile-animation-paused *::after,
  .mobile-motion-paused .story-scene *, .mobile-motion-paused .story-scene *::before, .mobile-motion-paused .story-scene *::after { animation-play-state:paused !important; }
  @keyframes mobile-sky-pan { from { transform:translateY(0); } to { transform:translateY(-50%); } }
  @keyframes mobile-logo-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
}

/* Tablets and desktop windows in flow mode get two readable columns. */
@media (min-width: 701px) {
  .mobile-ready .numbered-scene {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:40px;
    padding:100px max(32px,calc((100vw - 1280px) / 2)) 70px;
  }
  .mobile-ready .numbered-copy { grid-area:1 / 1; padding:0; container-type:inline-size; }
  /* Square desktop windows size type to the actual column, including the
     narrower column beside the laptop. Phone typography keeps its own scale. */
  .mobile-ready .section-number { font-size:clamp(5rem,24cqi,10rem); }
  .mobile-ready .numbered-copy h2 { max-width:100%; font-size:clamp(2rem,9.6cqi,4rem); }
  .mobile-ready .section-detail, .mobile-ready .section-proof { font-size:clamp(1.0625rem,3.6cqi,1.375rem); }
  .mobile-ready .numbered-visual { grid-area:1 / 2; margin:0; border-radius:24px; }
  .mobile-ready .team-grid, .mobile-ready .advisors-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    max-width:1100px;
    gap:32px 24px;
  }
  .mobile-ready .people-scene { padding-inline:max(32px,calc((100vw - 1280px) / 2)); }
}

@media (max-width: 359px) {
  :root { --mobile-gutter:18px; }
  .team-grid, .advisors-grid { grid-template-columns:1fr; max-width:260px; }
  .commerce-copy h1, .system-heading h2 { font-size:2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-opening .landing-visual .scene-media { animation:none; transform:translateY(-50%); }
  .mobile-ready .numbered-copy { opacity:1; }
}