html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%}
.work-img img,.work-img video,
.h-card-img img,.h-card-img video{height:100%}

@media (max-width:1024px){
  .section{padding:110px var(--pad)}
  .statement{padding:140px var(--pad)}
  .cta{padding:140px var(--pad)}
  .about{padding:100px 0}
  .process{padding:110px var(--pad) 180px}
  .stack-card{padding:48px;gap:40px}
}

@media (max-width:768px){
  :root{--pad:20px}

  .section{padding:80px var(--pad)}
  .section-label{margin-bottom:32px}
  .statement{padding:100px var(--pad)}
  .statement-text{max-width:100%}
  .cta{padding:110px var(--pad)}
  .about{padding:80px 0}
  .about-blocks{gap:56px}
  .testimonials{padding:90px var(--pad)}
  .process{padding:90px var(--pad) 140px}

  .hero{padding:14px;gap:14px;min-height:100svh}
  .hero-panel{padding:24px 20px;border-radius:18px}
  .panel-mid{padding:16px 0;max-width:100%}
  .panel-brand{max-width:100%}
  .panel-brand img{max-width:70%}
  .panel-scroll{display:none}

  .marquee{padding:18px 0}
  .stat{padding:40px 20px}

  .stack-card{padding:28px 22px}
  .stack-card:nth-child(1),
  .stack-card:nth-child(2),
  .stack-card:nth-child(3),
  .stack-card:nth-child(4){top:80px}
}

@media (max-width:480px){
  .hero-panel{padding:20px 16px}
  .panel-logo img{height:26px}
  .panel-brand img{max-width:82%}
  .hero-strip{justify-content:flex-start;gap:12px}

  .statement{padding:80px var(--pad)}
  .statement-text{font-size:clamp(26px,8vw,40px)}

  .section{padding:64px var(--pad)}
  .section-title{max-width:100%}

  .service{padding:24px 0}
  .service:hover{padding:24px 0}

  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:32px 16px}
  .stat-num{font-size:clamp(44px,15vw,72px)}

  .testimonial{padding:28px 22px}

  .cta{padding:90px var(--pad)}
  .cta-button{padding:18px 28px;font-size:12px}

  .footer{padding:56px var(--pad) 28px}
  .footer-inner{grid-template-columns:1fr;gap:32px}

  /* Work grid — tighten spacing on small phones */
  .work-grid{gap:24px}
  .work-title{font-size:clamp(18px,5vw,24px)}
  .work-meta{flex-wrap:wrap;gap:8px}
  .work-year{font-size:14px}

  /* Ensure video never overflows the card */
  .work-item .work-img video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* ── Drop heavy effects on small / touch (performance) ── */
@media (max-width:768px),(hover:none){
  .hero-grain{display:none}
  .hero-bg::after{display:none}
  .hero-panel::after{display:none}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .hero-grain,.hero-bg::after,
  .hero-panel::before,.hero-panel::after,
  .marquee-track{animation:none!important}
}


/* ═══════════════════════════════════════════════════════════
   WORK GRID FIX (mobile)
   - stop parallax sideways shift (overflow)
   - images + video fill their aspect-ratio frame correctly
═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  #work{overflow:hidden}
  .work-grid{
    width:100%;
    max-width:100%;
    margin:0 auto;
    gap:32px;
  }

  /* disable JS parallax transforms so nothing shifts off-screen */
  .work-item,
  [data-parallax],
  [data-svc-parallax]{transform:none!important}

  /* stack every card full-width */
  .work-item{grid-column:1/13!important;margin-top:0!important}

  /* give the frame a solid 4/3 aspect ratio */
  .work-item .work-img{
    aspect-ratio:4/3!important;
    height:auto!important;         /* let aspect-ratio drive height  */
    clip-path:none!important;      /* skip the reveal clip on mobile  */
    overflow:hidden;
    position:relative;             /* keep the absolute-fill children */
  }

  /* images: absolute fill, cover crop — this is the standard pattern  */
  .work-item .work-img img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
  }

  /* video: same absolute fill + cover crop                            */
  .work-item .work-img video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
  }
}