/* ================================================================
   RESPONSIVE — mobile-first overrides
   Breakpoints: 1280 / 1024 / 768 / 480 / 360
================================================================ */

/* ── 1280 ── */
@media(max-width:1280px){
  .section-head{ grid-template-columns:100px 1fr auto; gap:28px }
  .section-head h2{ font-size:clamp(28px,5.5vw,90px) }
  .timeline-row{ grid-template-columns:90px 180px 1fr auto; gap:20px }
  .inquiry-wrap{ gap:60px }
}

/* ── 1024 ── */
@media(max-width:1024px){
  :root{ --grid-size:60px }
  .nav ul{ display:none }
  .nav{ padding:14px 24px }

  /* hero */
  .hero{ padding:0 24px !important }
  .hero h1{ font-size:clamp(42px,10vw,130px) }
  .hero-stats{ grid-template-columns:repeat(3,1fr) }
  .hs-cell:nth-child(4),.hs-cell:nth-child(5){ grid-column:auto }
  .hero-sub{ grid-template-columns:1fr; gap:16px }

  /* about */
  .about-grid{ grid-template-columns:1fr; gap:36px }
  .counters{ grid-template-columns:repeat(2,1fr) }
  .timeline-row{ grid-template-columns:70px 1fr auto; gap:16px }
  .timeline-row p{ display:none }

  /* work */
  .wt-tabs{ gap:12px }
  .wt{ font-size:10px; padding:8px 14px }

  /* inquiry */
  .inquiry-wrap{ grid-template-columns:1fr; gap:48px }
  .inquiry-left .inq-headline{ font-size:clamp(28px,5vw,72px) }

  /* socials */
  .socials-grid{ grid-template-columns:1fr 1fr }

  /* gallery rows height */
  .g-tile{ height:clamp(100px,12vh,160px) }
}

/* ── 768 ── */
@media(max-width:768px){
  :root{ --grid-size:40px }

  /* typography scale-down */
  .section-head h2{ font-size:clamp(24px,7vw,64px) }
  .section-head{ grid-template-columns:1fr; gap:10px; padding-bottom:18px; margin-bottom:36px }
  .section-head .num{ display:inline-block }
  .section-head .meta{ text-align:left }

  section{ padding:80px 20px 40px }
  .gallery{ padding:80px 0 20px }
  .gallery .section-head{ padding-left:20px; padding-right:20px }
  .culture{ padding:80px 20px 40px }
  .socials{ padding:80px 20px 40px }
  .inquiry{ padding:80px 20px 40px }
  .hero{ padding:0 20px !important }

  /* hero */
  .hero h1{ font-size:clamp(38px,12vw,96px) }
  .hero-top{ font-size:9px }
  .hero-top .ht-right{ display:none }
  .hero-stats{ grid-template-columns:repeat(2,1fr) }
  .hs-cell:last-child{ grid-column:1/-1 }
  .hero-cta{ flex-direction:column; gap:8px }
  .btn{ width:100%; justify-content:center }

  /* about */
  .about-copy p{ font-size:clamp(15px,2.4vw,20px) }
  .about-copy .quote{ font-size:clamp(18px,3.5vw,30px) }
  .counters{ grid-template-columns:1fr 1fr }
  .timeline-row{ grid-template-columns:60px 1fr; gap:12px }
  .timeline-row .tag{ display:none }
  .timeline-row p{ display:none }

  /* work */
  .yt-grid{ grid-template-columns:1fr }
  .ig-grid{ grid-template-columns:1fr }
  .fb-grid{ max-width:100% }

  /* culture */
  .testi-grid{ grid-template-columns:1fr }

  /* socials */
  .socials-grid{ grid-template-columns:1fr }
  .social-card{ min-height:auto }
  .sc-photo{ height:240px }

  /* inquiry */
  .inq-row-2{ grid-template-columns:1fr }
  .inq-row-2 .inq-field:first-child{ padding-right:0 }
  .inquiry-left .inq-headline{ font-size:clamp(26px,6vw,56px) }
  .inq-submit{ flex-direction:column; align-items:flex-start }
  .btn-send{ width:100%; justify-content:center }

  /* gallery */
  .g-tile{ width:clamp(120px,28vw,180px); height:clamp(90px,11vh,140px) }
  .g-rows{ gap:10px }
}

/* ── 480 ── */
@media(max-width:480px){
  .hero h1{ font-size:clamp(34px,13vw,80px) }
  .hero-stats{ grid-template-columns:1fr 1fr }
  .hero-bio .bio-sub{ font-size:13px }

  .section-head h2{ font-size:clamp(22px,8vw,52px) }

  .counters{ grid-template-columns:1fr }
  .counter .num{ font-size:clamp(28px,8vw,52px) }

  .bg-text{ font-size:clamp(60px,20vw,180px) }

  .g-tile{ width:clamp(100px,26vw,160px); height:clamp(78px,10vh,120px) }
  .g-rows{ gap:8px }

  .inq-types{ gap:6px }
  .inq-chip{ padding:7px 11px; font-size:9px }

  footer{ padding:20px 20px; flex-direction:column; gap:10px; text-align:center }
}

/* ── 360 ── */
@media(max-width:360px){
  .hero h1{ font-size:clamp(30px,12.5vw,68px) }
  .hero-stats{ grid-template-columns:1fr }
  .hero-cta .btn{ font-size:10px; padding:12px 16px }
  .g-tile{ width:clamp(90px,24vw,140px) }
}

/* ── touch devices — no custom cursor ── */
@media(hover:none){
  .cursor, .cursor-ring{ display:none }
  .g-row:hover .g-track{ animation-play-state:running }
}

/* ── tall / landscape phone ── */
@media(max-height:500px){
  .hero h1{ font-size:clamp(28px,8vh,72px) }
  .hero-stats{ display:none }
  .hero-sub{ margin-top:12px }
  .g-tile{ height:clamp(70px,20vh,110px) }
}

/* ── Mobile social cards — full image visible ── */
@media(max-width:1024px){
  /* On mobile sections are natural flow, no fixed layers */
  section{
    position:relative !important;
    inset:unset !important;
    opacity:1 !important;
    pointer-events:all !important;
    transform:none !important;
    filter:none !important;
    overflow-y:visible !important;
    min-height:100svh;
    scroll-snap-align:start;
  }
  /* socials grid single column on mobile, full card visible */
  .social-card{
    min-height:auto !important;
    overflow:hidden !important;
  }
  .sc-photo{
    height:auto !important;
    aspect-ratio:4/3 !important;
  }
  .sc-img{
    position:static !important;
    width:100% !important;
    height:auto !important;
    object-fit:cover !important;
    display:block !important;
  }
  /* gallery rows on mobile */
  .g-rows{ overflow-x:hidden }
  .g-tile{
    width:clamp(130px,35vw,200px) !important;
    height:clamp(100px,25vw,160px) !important;
  }
  /* fix hero on mobile */
  .hero{
    overflow:hidden !important;
    padding:0 20px !important;
    min-height:100svh;
  }
}