/* ============================================================
   Mobile / all-device refinements  (loads LAST — overrides)
   ============================================================ */

/* ---- tablets & down ---- */
@media (max-width:820px){
  .sec-head{gap:20px;margin-bottom:40px}
  .sec-head > div{max-width:none}
  .sec-head .btn{align-self:flex-start}
}

/* ---- phones ---- */
@media (max-width:600px){
  /* hero */
  .hero{padding-top:clamp(104px,15vh,150px);padding-bottom:48px}
  .hero__lede{margin-bottom:28px}
  .hero__cta{width:100%;flex-direction:column;align-items:stretch;margin-bottom:44px}
  .hero__cta .btn{justify-content:center;width:100%}
  .hero__scroll{display:none}

  /* page hero (inner pages) */
  .phero{padding-top:clamp(116px,17vh,150px)}
  .phero__meta{gap:18px 26px}

  /* generic spacing trims */
  .sec-pad{padding-block:clamp(60px,12vw,90px)}
  .sec-head{margin-bottom:32px}

  /* primary CTAs: full-width, easy tap targets (min 48px) */
  .cta__btn,.cta .btn{width:100%;justify-content:center}
  .btn{padding:.95em 1.4em}

  /* narrative interlude — keep statements comfortable */
  .interlude__inner{height:60vh}
  .interlude__beat p{font-size:clamp(1.7rem,8vw,2.6rem);max-width:16ch}
  .interlude__eyebrow--fixed{top:11vh}
  .interlude__progress{bottom:7vh}

  /* showreel slider controls */
  .reelslider__arrow{width:42px;height:42px;font-size:1.5rem}

  /* footer */
  .foot__top{gap:32px 24px}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:10px}

  /* contact info type scale */
  .contact-info .ci a,.contact-info .ci span{font-size:1.15rem}

  /* keep marquee from feeling huge */
  .marquee__track span{font-size:clamp(1.2rem,5.5vw,1.8rem)}
}

/* ---- very small phones ---- */
@media (max-width:400px){
  :root{--pad:18px}
  .nav{padding-inline:18px}
  .nav__logo{height:26px}
  .stat{padding:26px}
}

/* ---- guard: media inside cards never overflows ---- */
img,image-slot,video,iframe{max-width:100%}
.wrap,section,header,footer{max-width:100%}

/* ---- larger tap targets for nav + footer links on touch ---- */
@media (hover:none){
  .nav__link{padding-block:8px}
  .foot__col a{padding-block:8px}
  .foot__social a{width:44px;height:44px}
}