/* JOY'S BOX V36 — mobile polish on top of V35.
   Desktop V30 remains untouched. */
:root{--v36-ease:cubic-bezier(.16,1,.3,1);--v36-gold:#d8bb6b}

@media(max-width:900px){
  /* HERO — remove the bright raw-image flash on refresh. Keep one exposure from first paint
     until the WebGL frame takes over. */
  html.v36-mobile .hero-v11__media{background:#0b0b0a!important}
  html.v36-mobile .hero-v11__media>img,
  html.v36-mobile body.is-loading .hero-v11__media>img{
    filter:blur(7px) saturate(.84) brightness(.70)!important;
    transform:none!important;
    transition:opacity .24s linear,filter .72s var(--v36-ease)!important;
  }
  html.v36-mobile body.is-ready .hero-v11__media:not(.is-webgl-ready)>img{
    filter:blur(0) saturate(.92) brightness(.90)!important;
  }
  html.v36-mobile .hero-v11__media.is-webgl-ready>img{opacity:0!important}
  html.v36-mobile .hero-v11__media.is-webgl-ready .hero-v15__webgl{opacity:1!important}

  /* MILESTONES — landscape cards, much closer to the desktop visual proportion. */
  html.v36-mobile .story-v2 .story-pin{min-height:560px!important}
  html.v36-mobile .story-frame{
    flex:0 0 87vw!important;width:87vw!important;height:auto!important;min-height:0!important;max-height:none!important;
    aspect-ratio:1.42 / 1!important;border-radius:18px!important;
  }
  html.v36-mobile .story-frame__top{left:16px!important;right:16px!important;top:15px!important;font-size:6px!important}
  html.v36-mobile .story-frame__copy{
    left:16px!important;right:16px!important;bottom:18px!important;
    grid-template-columns:.92fr 1.08fr!important;gap:15px!important;align-items:end!important;
  }
  html.v36-mobile .story-frame__copy>strong{font-size:clamp(66px,21.5vw,92px)!important;line-height:.62!important}
  html.v36-mobile .story-frame[data-year="2023-2024"] .story-frame__copy>strong{font-size:clamp(52px,16.5vw,72px)!important}
  html.v36-mobile .story-frame__copy small{font-size:6px!important;margin-bottom:7px!important}
  html.v36-mobile .story-frame__copy h3{font-size:clamp(27px,7.7vw,36px)!important;line-height:.82!important}
  html.v36-mobile .story-frame__note{font-size:5px!important;right:16px!important;bottom:9px!important;opacity:.72!important}
  html.v36-mobile .story-progress{bottom:14px!important}

  /* SERVICES MARQUEES — restore continuous motion instead of a manual horizontal scroller. */
  html.v36-mobile .services-v3 .portfolio-rail{overflow:hidden!important}
  html.v36-mobile .portfolio-marquee{overflow:hidden!important;scrollbar-width:none!important}
  html.v36-mobile .portfolio-marquee .marquee__inner{
    display:flex!important;width:max-content!important;min-width:max-content!important;gap:20px!important;padding-right:0!important;
    animation:v36Marquee 28s linear infinite!important;transform:translate3d(0,0,0);will-change:transform;
  }
  html.v36-mobile .portfolio-marquee.marquee--reverse .marquee__inner{animation-direction:reverse!important;animation-duration:32s!important}
  html.v36-mobile .portfolio-marquee span{font-size:clamp(35px,10vw,48px)!important}
  html.v36-mobile .portfolio-marquee i{font-size:13px!important}
  @keyframes v36Marquee{to{transform:translate3d(-50%,0,0)}}

  /* FROM IDEA TO OPEN DOORS — deliberately NOT another sticky card deck.
     Panels arrive as alternating cinematic curtains while a slim progress spine fills. */
  html.v36-mobile .process-triptych{overflow:hidden!important;padding-bottom:88px!important}
  html.v36-mobile .process-triptych__intro{margin-bottom:46px!important}
  html.v36-mobile .process-triptych__intro h2{transform:none!important}
  html.v36-mobile .process-triptych__grid{
    display:block!important;position:relative!important;overflow:visible!important;padding-left:15px!important;
    --v36-process-progress:0;
  }
  html.v36-mobile .process-triptych__grid::before,
  html.v36-mobile .process-triptych__grid::after{
    content:"";position:absolute;left:1px;top:4px;bottom:4px;width:1px;pointer-events:none;
  }
  html.v36-mobile .process-triptych__grid::before{background:rgba(12,12,10,.14)}
  html.v36-mobile .process-triptych__grid::after{
    background:linear-gradient(180deg,#b38d32,#d8bb6b);transform:scaleY(var(--v36-process-progress));transform-origin:top;
    box-shadow:0 0 14px rgba(179,141,50,.22);
  }
  html.v36-mobile .process-panel,
  html.v36-mobile .process-panel--lift{
    position:relative!important;top:auto!important;height:min(112vw,510px)!important;min-height:410px!important;max-height:510px!important;
    margin:0 0 24px!important;border-radius:18px!important;z-index:auto!important;
    opacity:var(--v36-process-opacity,.15)!important;filter:none!important;
    clip-path:inset(0 var(--v36-process-cut,88%) 0 0 round 18px)!important;
    transform:translate3d(var(--v36-process-x,46px),var(--v36-process-y,24px),0) rotate(var(--v36-process-r,1.2deg)) scale(var(--v36-process-scale,.985))!important;
    transform-origin:center!important;transition:none!important;box-shadow:0 20px 48px rgba(36,26,8,.12)!important;
  }
  html.v36-mobile .process-panel:nth-child(even){
    clip-path:inset(0 0 0 var(--v36-process-cut,88%) round 18px)!important;
  }
  html.v36-mobile .process-panel img{
    transform:translate3d(var(--v36-process-img-x,0px),0,0) scale(var(--v36-process-img-scale,1.08))!important;
    filter:saturate(.84) contrast(1.02)!important;transition:none!important;
  }
  html.v36-mobile .process-panel__copy{opacity:var(--v36-process-copy,.1)!important;transform:translate3d(0,var(--v36-process-copy-y,18px),0)!important;transition:none!important}
  html.v36-mobile .process-panel__number{opacity:var(--v36-process-copy,.1)!important}

  /* GUEST JOURNEY — immersive sticky map. The map owns the scene while each audience
     chapter scrolls over it and the actual SVG route draws beneath the active card. */
  html.v36-mobile .journey{
    display:block!important;position:relative!important;overflow:visible!important;min-height:0!important;
    padding:92px 16px 22svh!important;isolation:isolate;
  }
  html.v36-mobile .journey__copy{position:relative!important;z-index:6!important;padding-bottom:10px!important}
  html.v36-mobile .journey__copy .headline{font-size:clamp(52px,14vw,72px)!important;line-height:.82!important;max-width:96%!important}
  html.v36-mobile .journey__copy>p{max-width:90%!important}
  html.v36-mobile .journey__map{
    position:sticky!important;top:74px!important;z-index:1!important;width:calc(100% + 20px)!important;height:72svh!important;min-height:520px!important;
    margin:24px -10px 0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:24px!important;overflow:hidden!important;opacity:1!important;
    background:
      radial-gradient(circle at 55% 34%,rgba(216,187,107,.10),transparent 34%),
      radial-gradient(circle at 28% 74%,rgba(129,72,148,.18),transparent 42%),
      linear-gradient(180deg,#11100f,#090909 72%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 26px 70px rgba(0,0,0,.28);
  }
  html.v36-mobile .journey__map::after{
    content:"AUDIENCE JOURNEY";position:absolute;left:17px;top:16px;color:rgba(255,255,255,.48);
    font:700 6px/1 var(--sans);letter-spacing:.18em;pointer-events:none;
  }
  html.v36-mobile .journey__map svg{width:112%!important;max-width:none!important;height:auto!important;max-height:94%!important;transform:translate3d(-4%,0,0) scale(1.02)!important;overflow:visible!important}
  html.v36-mobile .journey-path{stroke-width:8!important;filter:url(#glow)!important}
  html.v36-mobile .journey-path--shadow{stroke-width:23!important;opacity:.8!important}
  html.v36-mobile .journey-dot{opacity:.18!important}
  html.v36-mobile .journey-dot.is-waypoint-active{opacity:1!important;filter:drop-shadow(0 0 13px rgba(216,187,107,.9))!important}
  html.v36-mobile .journey-list{
    position:relative!important;z-index:4!important;margin:-57svh 0 0!important;padding:0 0 5svh!important;list-style:none!important;
  }
  html.v36-mobile .journey-list li{
    position:relative!important;min-height:55svh!important;width:88%!important;margin:0 0 0 auto!important;padding:calc(55svh - 126px) 16px 18px!important;
    display:grid!important;grid-template-columns:28px 1fr!important;gap:5px 10px!important;align-content:end!important;
    border:0!important;background:none!important;opacity:.28!important;isolation:isolate;
    transition:opacity .32s ease!important;
  }
  html.v36-mobile .journey-list li::after{
    display:block!important;content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:112px!important;
    z-index:-1!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;
    background:linear-gradient(135deg,rgba(22,21,19,.90),rgba(12,12,12,.68))!important;
    box-shadow:0 16px 46px rgba(0,0,0,.22)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
    transform:translate3d(0,10px,0) scale(.97)!important;opacity:.52!important;transition:transform .42s var(--v36-ease),opacity .32s ease,border-color .32s ease!important;
  }
  html.v36-mobile .journey-list li.is-waypoint-active{opacity:1!important;padding-left:16px!important;background:none!important}
  html.v36-mobile .journey-list li.is-waypoint-active::after{
    transform:none!important;opacity:1!important;border-color:rgba(216,187,107,.42)!important;
  }
  html.v36-mobile .journey-list li b{grid-column:1!important;grid-row:1 / span 2!important;font-size:8px!important;padding-top:3px!important;color:var(--v36-gold)!important}
  html.v36-mobile .journey-list li span{grid-column:2!important;font-size:25px!important;line-height:.9!important}
  html.v36-mobile .journey-list li small{grid-column:2!important;font-size:9.5px!important;line-height:1.35!important;color:#aaa79f!important}
}

@media(max-width:430px){
  html.v36-mobile .story-frame{flex-basis:88vw!important;width:88vw!important;aspect-ratio:1.38 / 1!important}
  html.v36-mobile .journey__map{height:70svh!important;min-height:500px!important}
  html.v36-mobile .journey-list{margin-top:-55svh!important}
}

@media(prefers-reduced-motion:reduce){
  html.v36-mobile .portfolio-marquee .marquee__inner{animation:none!important}
  html.v36-mobile .process-panel{clip-path:none!important;transform:none!important;opacity:1!important}
  html.v36-mobile .process-panel__copy,html.v36-mobile .process-panel__number{opacity:1!important;transform:none!important}
}