/* Mobile opening: content and product stay in flow as copy or text size grows. */
@media (max-width:700px) {
  .hero {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:100svh;
    max-height:none;
    padding:112px 0 56px;
  }
  .hero .hero-ambient { background:none; }
  .hero .hero-copy {
    order:0;
    width:100%;
    padding:0 var(--pad);
    opacity:1;
  }
  .hero .hero-copy .intro-animate { animation:none; }
  .hero h1 {
    font-size:clamp(40px,10.5vw,48px);
    line-height:1.1;
    margin-top:18px;
    letter-spacing:-.055em;
  }
  .hero-description { margin-top:18px;line-height:1.7; }
  .hero-actions { margin-top:22px;gap:22px;align-items:center; }
  .hero-actions .button { min-height:50px;padding:14px 18px; }
  .hero .hero-scene.photo-mode,
  .hero .hero-scene:not(.photo-mode) {
    order:1;
    position:relative;
    inset:auto;
    flex:none;
    width:100%;
    height:clamp(230px,66.667vw,320px);
    margin:12px 0 0;
    overflow:hidden;
    opacity:1;
  }
  .hero .hero-scene.photo-mode .hero-fallback {
    object-fit:contain;
    object-position:center;
    transform:none;
    translate:none;
    scale:1;
    transform-origin:center;
    animation:mobile-profile-push 12s ease-in-out infinite alternate;
  }
  .hero .hero-scene.photo-mode.paused .hero-fallback { animation-play-state:paused; }
  .hero .scene-vignette {
    background:linear-gradient(180deg,#090a0c 0%,transparent 15%,transparent 82%,#090a0c 100%);
  }
  .hero .hero-scene-controls {
    order:2;
    position:relative;
    inset:auto;
    margin:0 var(--pad) 14px;
    min-height:44px;
    gap:6px;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
  }
  .hero .hero-scene-controls .live-indicator { margin-right:auto; }
  .hero .hero-scene.photo-mode ~ .hero-scene-controls #hero-reset { display:none; }
  .hero .hero-bottom {
    order:3;
    position:relative;
    inset:auto;
    height:auto;
    min-height:48px;
    margin:0 var(--pad);
    padding:10px 0;
    gap:0;
  }
  .hero .hero-bottom>span { display:none; }
  .hero .scroll-link { min-height:28px; }
  @keyframes mobile-profile-push { from{scale:1}to{scale:1.035} }
}
@media (max-width:360px) {
  .hero { padding-top:104px; }
  .hero h1 { font-size:36px; }
  .hero-description { margin-top:16px; }
  .hero-actions { margin-top:18px;gap:18px; }
}
@media (max-width:700px) and (max-height:700px) {
  .hero { padding-top:98px; }
  .hero h1 { font-size:clamp(36px,9.5vw,42px);margin-top:12px; }
  .hero-description { margin-top:12px;line-height:1.6; }
  .hero-actions { margin-top:14px; }
  .hero-actions .button { min-height:46px;padding:11px 18px; }
  .hero .hero-scene.photo-mode,
  .hero .hero-scene:not(.photo-mode) { height:clamp(200px,52vw,240px);margin-top:8px; }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce) {
  .hero .hero-scene.photo-mode .hero-fallback { animation:none;scale:1; }
}