/* ── WIDE SCREENS (≥1180px) ────────────────────── */
@media(min-width:1440px){
  .hero-grid{gap:96px}
}

/* ── RESPONSIVE ────────────────────────────────── */
@media(max-width:960px){
  /* Tighten nav-link padding on tablet so 6 links + logo don't crowd
     the header. Full padding returns at ≥961px where there's room. */
  .nav-link{padding:6px 10px;font-size:var(--fs-sm)}
  .nav-links{gap:2px}
  /* Hero switches from aspect-ratio landscape to a stacked photo + text
     column. --hero-text-lift controls how far the text block overlaps
     into the bottom of the photo, which is faded to transparent by the
     mask-image below. Both the photo margin and the text z-index are
     derived from a single knob so a change here only touches one
     variable instead of two coordinated values. */
  .hero{aspect-ratio:auto;padding-top:0;min-height:auto;display:block;--hero-text-lift:100px}
  .hero-photo-bleed{position:relative;width:100%;height:68vh;min-height:480px;inset:auto;margin-bottom:calc(-1 * var(--hero-text-lift))}
  .hero-photo-bleed::before,.hero-photo-bleed::after{display:none}
  .hero-photo-img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.3) 85%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.3) 85%,transparent 100%);object-position:center 20%}
  .hero-grid{grid-template-columns:1fr;gap:20px;padding:8px 0 60px;position:relative;z-index:10}
  .hero-text{grid-column:1;align-items:center;text-align:center}
  .hero-tagline{margin-left:auto;margin-right:auto}
  .hero-socials{justify-content:center;margin-bottom:24px}
  .hero-ctas{justify-content:center}
  .about-photo-main{margin-bottom:8px}
  .journey-cols{grid-template-columns:1fr;gap:36px}
  .case{grid-template-columns:1fr;gap:32px}
  .case-meta{position:static}
  .case-title{font-size:30px}
}
@media(max-width:640px){
  .nav{height:60px}
  .nav-links .nav-link{display:none}
  /* Bump the burger button to 44×44 (Apple/Google minimum tap size). */
  .nav-menu-btn{width:44px;height:44px}

  /* Bump project card round buttons to 44×44 on mobile.
     Desktop keeps 36-40px because mouse users don't need the padding. */
  .case-btn-icon,.case-btn-view{width:44px;height:44px;min-width:44px;min-height:44px}

  .about-photo-main{max-width:280px}
  .case-title{font-size:26px}
  .case-thumbs{grid-template-columns:repeat(3,1fr);gap:6px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .journey-card{padding:22px 20px}
  .drawer-header,.drawer-body{padding-left:24px;padding-right:24px}
  /* Compact vertical padding too so the drawer opens without wasting
     a whole viewport of top space on phone. */
  .drawer-header{padding-top:26px;padding-bottom:20px}
  .drawer-body{padding-top:26px;padding-bottom:36px}

  /* Events list — stack date above content */
  .ev-row{grid-template-columns:1fr;row-gap:6px;column-gap:0;padding:20px 6px}
  .ev-row-date{padding-top:0}

  /* Contact socials — 3-col compact icon+name on mobile */
  .contact-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .social-card{grid-template-columns:1fr;grid-template-rows:auto auto;column-gap:0;row-gap:8px;padding:16px 8px;text-align:center;justify-items:center}
  .social-handle{display:none}
  .social-arrow{display:none}
  .social-name{font-size:var(--fs-base)}
}

/* Landscape phone (very short viewport) — the mobile hero uses
   height:68vh + min-height:480px which overflows a 375-393px tall
   landscape viewport. Trim the photo height so the hero fits
   without forcing extra scroll before the name is visible. */
@media(orientation:landscape) and (max-height:500px){
  .hero-photo-bleed{height:88vh;min-height:0;max-height:340px}
  .hero{--hero-text-lift:64px}
}