/* JOY'S BOX V30 — remove standalone studio block + desktop-language motion on mobile */
:root{--v30-ease:cubic-bezier(.16,1,.3,1)}

/* The retained brand copy now belongs to the VISION / VALUES / MISSION scene. */
.manifesto__about-v30{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(150px,.34fr) minmax(0,.82fr) minmax(0,.82fr);
  gap:clamp(28px,5vw,86px);align-items:start;
  margin-top:clamp(54px,6vw,88px);padding-top:clamp(24px,2.6vw,36px);
  border-top:1px solid rgba(255,255,255,.16);
}
.manifesto__about-v30__label{display:flex;flex-direction:column;gap:10px;color:#d9bd72;font:700 8px/1 var(--sans);letter-spacing:.17em}
.manifesto__about-v30__label small{color:rgba(255,255,255,.42);font:700 7px/1 var(--sans);letter-spacing:.16em}
.manifesto__about-v30 p{max-width:52ch;margin:0;color:#aaa69d;font:500 13px/1.74 var(--sans)}
.manifesto__about-v30 p:first-of-type{color:#d7d2c8}

@media(max-width:900px){
  /* Keep desktop composition language instead of a different swipe-only mobile version. */
  .manifesto#about{padding:82px 18px 88px!important;overflow:hidden!important}
  .manifesto#about>.section-kicker{padding:0!important;margin-bottom:28px!important}
  .manifesto#about .manifesto__cards{
    display:grid!important;grid-template-columns:1fr!important;gap:14px!important;
    overflow:visible!important;padding:0!important;scroll-snap-type:none!important;
  }
  .manifesto#about .manifest-card{
    width:100%!important;max-width:none!important;flex:none!important;margin:0!important;
    height:68svh!important;min-height:480px!important;max-height:610px!important;
    scroll-snap-align:none!important;border-radius:18px!important;
  }
  .manifesto#about .manifest-card:last-child{margin-right:0!important}
  .manifesto#about .manifest-card__content{padding:22px!important}
  .manifesto#about .manifest-card__content h3{font-size:clamp(42px,11.4vw,58px)!important;line-height:.84!important}
  .manifesto#about .manifest-card__content p{max-width:35ch!important;font-size:11px!important}

  .manifesto__about-v30{
    grid-template-columns:1fr!important;gap:15px!important;
    margin-top:48px!important;padding-top:24px!important;
  }
  .manifesto__about-v30__label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}
  .manifesto__about-v30 p{font-size:12px!important;line-height:1.7!important;max-width:46ch}

  /* V30 mobile motion system: mirrors each desktop scene's direction/choreography.
     It is class-driven so it stays smooth on touch without continuous scroll-scrub work. */
  html.v30-mobile-motion .v30-copy,
  html.v30-mobile-motion .v30-card,
  html.v30-mobile-motion .v30-row,
  html.v30-mobile-motion .v30-logo{
    opacity:.001!important;
    transition:
      opacity var(--v30-dur,.72s) ease var(--v30-delay,0s),
      transform var(--v30-dur,.82s) var(--v30-ease) var(--v30-delay,0s),
      clip-path var(--v30-dur,.82s) var(--v30-ease) var(--v30-delay,0s)!important;
  }
  html.v30-mobile-motion .v30-copy{transform:translate3d(0,22px,0)!important}
  html.v30-mobile-motion .v30-card{transform:translate3d(var(--v30-x,0),var(--v30-y,38px),0) rotate(var(--v30-r,0deg)) scale(.992)!important}
  html.v30-mobile-motion .v30-row{transform:translate3d(var(--v30-x,18px),0,0)!important}
  html.v30-mobile-motion .v30-logo{transform:translate3d(0,14px,0) scale(.96)!important}
  html.v30-mobile-motion .v30-service{clip-path:inset(0 0 100% 0)!important;transform:none!important}

  html.v30-mobile-motion .v30-copy.v30-in,
  html.v30-mobile-motion .v30-card.v30-in,
  html.v30-mobile-motion .v30-row.v30-in,
  html.v30-mobile-motion .v30-logo.v30-in{
    opacity:1!important;transform:none!important;
  }
  html.v30-mobile-motion .v30-service.v30-in{clip-path:inset(0 0 0% 0)!important;opacity:1!important}

  /* Image settle reproduces the desktop image reveal without permanent scroll work. */
  html.v30-mobile-motion .v30-image img{
    transform:scale(1.055)!important;
    transition:transform 1.05s var(--v30-ease) var(--v30-delay,0s)!important;
  }
  html.v30-mobile-motion .v30-image.v30-in img{transform:scale(1)!important}

  /* Preserve section-specific personality on mobile. */
  html.v30-mobile-motion .manifest-card.v30-card:nth-child(1){--v30-x:-14px;--v30-y:44px;--v30-r:-.5deg}
  html.v30-mobile-motion .manifest-card.v30-card:nth-child(2){--v30-x:0px;--v30-y:58px;--v30-r:0deg}
  html.v30-mobile-motion .manifest-card.v30-card:nth-child(3){--v30-x:14px;--v30-y:44px;--v30-r:.5deg}

  html.v30-mobile-motion .process-panel.v30-card:nth-child(1){--v30-x:-18px;--v30-y:34px;--v30-r:-.55deg}
  html.v30-mobile-motion .process-panel.v30-card:nth-child(2){--v30-x:0px;--v30-y:54px;--v30-r:0deg}
  html.v30-mobile-motion .process-panel.v30-card:nth-child(3){--v30-x:18px;--v30-y:34px;--v30-r:.55deg}

  html.v30-mobile-motion .detail-fragment-v24.v30-card:nth-child(odd){--v30-x:-22px;--v30-y:26px;--v30-r:-.45deg}
  html.v30-mobile-motion .detail-fragment-v24.v30-card:nth-child(even){--v30-x:22px;--v30-y:20px;--v30-r:.45deg}

  html.v30-mobile-motion .showreel-card-v13.v30-card:nth-child(1){--v30-x:-20px;--v30-y:24px}
  html.v30-mobile-motion .showreel-card-v13.v30-card:nth-child(2){--v30-x:20px;--v30-y:24px}

  /* Restore subtle active light/scale feedback that existed on desktop. */
  .manifest-card.v30-active,.process-panel.v30-active,.archive-card.v30-active,.market-card.v30-active,.showreel-card-v13.v30-active{
    box-shadow:0 18px 42px rgba(0,0,0,.16)!important;
  }
  .manifest-card.v30-active img,.archive-card.v30-active>img,.market-card.v30-active img,.showreel-card-v13.v30-active img{
    transform:scale(1.025)!important;
  }

  /* Story keeps a cinematic sequence on mobile instead of feeling static. */
  .story-v2 .story-track{display:grid!important}
  .story-frame__media img{transition:transform 1.05s var(--v30-ease)!important}

  /* Client wall still uses a mobile grid, but now arrives with the same wall-build rhythm. */
  .client-chip-v23{transition:border-color .3s ease,background .3s ease!important}

  /* Contact is present in menu and footer navigation; footer remains easy to tap. */
  .footer-v17 nav a[href="#contact"]{color:#d9bd72!important}
}

@media(max-width:430px){
  .manifesto#about{padding-left:16px!important;padding-right:16px!important}
  .manifesto#about>.section-kicker{padding:0!important}
  .manifesto#about .manifest-card{min-height:470px!important}
  .manifesto__about-v30{margin-top:42px!important}
}

@media(prefers-reduced-motion:reduce){
  html.v30-mobile-motion .v30-copy,html.v30-mobile-motion .v30-card,html.v30-mobile-motion .v30-row,html.v30-mobile-motion .v30-logo,
  html.v30-mobile-motion .v30-image img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}