/* Joy's Box V78 — iOS-stable mobile polish */
@media (max-width:900px){
  html,body{background:#050505!important;overscroll-behavior-y:none!important}
  body{touch-action:pan-y pinch-zoom!important;-webkit-overflow-scrolling:touch}
  html.v78-mobile body.is-loading{overflow:visible!important;position:static!important;height:auto!important}

  /* Browser/header chrome should start genuinely dark over the hero. */
  .hero-v11,.hero-v11__media{background:#050505!important}

  /* ==============================================================
     SERVICES MARQUEE — one CSS compositor owner, no competing WAAPI.
     ============================================================= */
  html.v78-mobile .portfolio-marquee{
    overflow:hidden!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:auto!important;
  }
  html.v78-mobile .portfolio-marquee .marquee__inner{
    display:flex!important;
    align-items:center!important;
    gap:20px!important;
    width:max-content!important;
    min-width:max-content!important;
    padding:0!important;
    transform:translate3d(0,0,0)!important;
    animation:v78Ticker 30s linear infinite!important;
    animation-play-state:running!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
  }
  html.v78-mobile .portfolio-marquee.marquee--reverse .marquee__inner{
    animation-name:v78TickerReverse!important;
    animation-duration:34s!important;
  }
  html.v78-mobile .portfolio-marquee span{flex:none!important;white-space:nowrap!important;font-size:clamp(35px,10vw,48px)!important}
  html.v78-mobile .portfolio-marquee i{flex:none!important;font-size:13px!important}
  @keyframes v78Ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @keyframes v78TickerReverse{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

  /* ==============================================================
     THE WORK BEHIND THE EXPERIENCE — full-bleed film chapters.
     No side cards, no rising cards, no sticky/pinned scene.
     ============================================================= */
  .services-v52{padding:82px 0 0!important;overflow:hidden!important;background:#0b0b0a!important}
  .services-v52__head{padding:0 20px!important;margin-bottom:36px!important}
  .services-v52 .cap-v52{display:none!important}
  .work-v78{position:relative;display:block;width:100%;margin:0;padding:0}
  .work-v78__scene{
    position:relative;
    width:100%;
    height:74svh;
    min-height:520px;
    max-height:720px;
    margin:0;
    overflow:hidden;
    background:#111;
    isolation:isolate;
    content-visibility:auto;
    contain-intrinsic-size:100vw 620px;
  }
  .work-v78__scene+.work-v78__scene{border-top:1px solid rgba(255,255,255,.08)}
  .work-v78__scene img{
    position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;
    filter:saturate(.86) contrast(1.04) brightness(.72);
    transform:translate3d(0,var(--v78-work-y,0%),0) scale(var(--v78-work-scale,1.07));
    transform-origin:center center;
    will-change:transform;
    backface-visibility:hidden;
  }
  .work-v78__scene::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.78) 100%),linear-gradient(90deg,rgba(0,0,0,.24),transparent 58%);
  }
  .work-v78__copy{
    position:absolute;z-index:2;left:20px;right:20px;bottom:24px;color:#f4f1e9;
    opacity:var(--v78-work-copy,1);
    transform:translate3d(0,var(--v78-work-copy-y,0px),0);
    will-change:transform,opacity;
  }
  .work-v78__meta{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:15px;color:rgba(255,255,255,.66);font:700 7px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
  .work-v78__copy h3{max-width:9ch;margin:0;font:600 clamp(48px,13.5vw,66px)/.78 var(--cond);letter-spacing:-.045em;text-transform:uppercase}
  .work-v78__copy p{max-width:33ch;margin:17px 0 0;color:rgba(255,255,255,.72);font:500 11px/1.58 var(--sans)}
  .services-v52 .portfolio-rail{margin:0!important;padding-top:34px!important}

  /* ==============================================================
     PROJECT ARCHIVE — remove the Safari-crashing 8-layer sticky deck.
     Keep the same imagery/copy in a stable native-flow gallery.
     ============================================================= */
  html.v35-mobile .work-archive{overflow:hidden!important;padding:84px 18px 92px!important}
  html.v35-mobile .archive-stack{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;overflow:visible!important}
  html.v35-mobile .archive-card{
    position:relative!important;top:auto!important;z-index:auto!important;
    width:100%!important;height:118vw!important;min-height:430px!important;max-height:590px!important;
    margin:0!important;border-radius:16px!important;overflow:hidden!important;
    opacity:1!important;filter:none!important;transform:none!important;box-shadow:none!important;
    contain:layout paint!important;content-visibility:auto;contain-intrinsic-size:100% 520px;
  }
  html.v35-mobile .archive-card>img{
    width:100%!important;height:100%!important;object-fit:cover!important;
    transform:scale(1.025)!important;filter:none!important;will-change:auto!important;backface-visibility:hidden!important;
  }
  html.v35-mobile .archive-card::after{opacity:.12!important}

  /* Keep mobile browser chrome visually joined to the hero. */
  .site-header.header-v14:not(.is-light){background:linear-gradient(180deg,rgba(5,5,5,.30),rgba(5,5,5,0))!important}
}

@media (max-width:430px){
  .work-v78__scene{height:72svh;min-height:500px}
  html.v35-mobile .archive-card{height:124vw;min-height:420px}
}

@media (prefers-reduced-motion:reduce){
  html.v78-mobile .portfolio-marquee .marquee__inner{animation:none!important}
  .work-v78__scene img,.work-v78__copy{transform:none!important;opacity:1!important}
}