/* Shared mobile finishing layer — loaded after every page stylesheet. */
@media (max-width: 900px) {
  html,body{width:100%;max-width:100%;overflow-x:clip}
  body{-webkit-text-size-adjust:100%}
  .shell{width:calc(100% - 28px)!important;max-width:none!important;margin-inline:auto!important}
  main,section,article,figure,div{min-width:0}
  img,svg,video,canvas{max-width:100%;height:auto}
  .shell>header{min-height:70px;height:auto!important;padding:14px 0!important}
  .shell>main>.hero,.shell>.hero,.project-hero{grid-template-columns:minmax(0,1fr)!important;gap:34px!important;padding-top:48px!important;padding-bottom:52px!important}
  .section{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;padding-block:58px!important}
  .section-num,.section>.label{position:static!important;inset:auto!important}
  .feature,.copy,.copy-grid,.intro-grid,.capabilities,.principles,.role-grid,.project-meta{grid-template-columns:minmax(0,1fr)!important}
  .feature-copy,.feature-media,.section-body,.section-content{width:100%;max-width:none;min-width:0}
  .media img,.media-card img,.feature-media img,.project-hero-img img{width:100%;height:auto;object-fit:contain}
  .full-bleed-media{width:100%!important;margin-inline:0!important}
  .next{gap:24px;padding-block:48px!important}
  footer{gap:18px;flex-wrap:wrap}
}

@media (max-width: 700px) {
  body h1,.hero h1,.project-hero h1{font-size:clamp(48px,15vw,76px)!important;line-height:.88!important;letter-spacing:-.055em!important;max-width:100%!important}
  body h2,.section h2{font-size:clamp(34px,10vw,52px)!important;line-height:.96!important;letter-spacing:-.04em!important}
  body h3{font-size:clamp(25px,7vw,38px);line-height:1.02}
  .hero-copy,.lede{font-size:clamp(18px,5.5vw,24px)!important;line-height:1.32!important}
  .shell>main>.hero,.shell>.hero,.project-hero{padding-top:38px!important;padding-bottom:44px!important}
  .section{padding-block:48px!important}
  .grid2,.grid3,.grid4,.tiles,.stats,.work-grid,.media-pair,.media-triptych,.media-quad,.media-six,.media-portrait-grid,.onboarding-grid,.process-grid,.commerce-diagrams,.capability-cards,.recovery-actions{grid-template-columns:minmax(0,1fr)!important}
  .grid2,.grid3,.grid4,.tiles,.work-grid,.media-pair,.media-triptych,.media-quad,.media-six{gap:14px!important}
  .work-card,.card,.media-card,.feature,.process-item{width:100%;max-width:100%}
  .work-copy,.card-copy{padding:18px!important}
  .stats{border-top:1px solid var(--line,#292927)}
  .stat,.stat:not(:first-child){padding:20px 0!important;border-right:0!important;border-bottom:1px solid var(--line,#292927)}
  .stat:last-child{border-bottom:0}
  .exp,.job{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .exp p,.job p{grid-column:auto!important}
  .quote{padding-block:48px!important}
  .quote blockquote{font-size:clamp(30px,9vw,46px)!important}
  .next{align-items:center!important;padding-block:38px!important}
  .next h2{font-size:clamp(42px,13vw,68px)!important}
  .portrait{width:100%!important;max-width:520px;margin-inline:auto!important}
  .activity-metric{width:calc(100% - 32px)!important;margin:16px!important;grid-template-columns:110px minmax(0,1fr)!important;padding:18px!important}
  .activity-metric-ring{width:110px!important}.activity-metric-ring::before{width:82px!important}
  .activity-screen-stage{max-width:100%;-webkit-overflow-scrolling:touch}
  .companion-hero{min-height:420px!important}.companion-scenes{grid-template-columns:minmax(0,1fr)!important}
  .companion-moments figure{grid-template-columns:42% minmax(0,58%)!important;min-height:250px!important}
  .studio-credit{align-items:flex-start!important;gap:16px!important}.studio-logos{max-width:100%;flex-wrap:wrap!important}
  .contact-panel{width:100%!important;max-width:none!important}
  .contact-panel-main{padding:28px 20px!important}
  .contact-actions{grid-template-columns:minmax(0,1fr)!important}
  .carousel-track{gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .carousel-slide{min-width:min(84vw,420px)!important;scroll-snap-align:center}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .approach-panel,.research-flow,.monitoring-flow,.feedback-diagram,.journey-blueprint,.decision-blueprint,.commerce-phone-flow,.recovery-showcase{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
}

@media (max-width: 480px) {
  .shell{width:calc(100% - 22px)!important}
  body h1,.hero h1,.project-hero h1{font-size:clamp(44px,15.5vw,64px)!important}
  body h2,.section h2{font-size:clamp(32px,10.5vw,44px)!important}
  .section{padding-block:42px!important}
  .eyebrow,.section-num,.tag,.label,.caption{font-size:9px!important;line-height:1.5}
  .meta{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  footer{flex-direction:column;align-items:flex-start!important;padding-bottom:24px!important}
  .next{grid-template-columns:1fr auto!important}
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track{scroll-behavior:auto}
}