/* =========================================================
   RESPONSIVE
   Breakpoints: 1180 (small desktop) . 1024 (tablet landscape)
   . 768 (tablet portrait) . 620 (large phone) . 420 (small phone)
   ========================================================= */

/* ---------- Small desktop / large tablet ---------- */
@media (max-width: 1180px){
  .services-grid{ grid-template-columns: repeat(4,1fr); }
  .service-card, .service-card.is-large, .service-card.is-small{ grid-column: span 2; }
  .quality-cards, .testimonial-grid, .blog-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(3,1fr); }
  .logo-wall{ grid-template-columns: repeat(3,1fr); }
  .contact-layout{ grid-template-columns: 1fr; gap:50px; }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child{ grid-column: span 3; }
  .split, .story-split{ grid-template-columns: 1fr; gap:40px; }
  .blog-featured{ grid-template-columns: 1fr; }
  .blog-featured .blog-body{ padding: 34px; }
  .work-grid, .quality-grid, .services-grid-new, .videos-grid, .film-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- Tablet landscape ---------- */
@media (max-width: 1024px){
  .section{ padding: clamp(44px, 7vw, 84px) 0; }
  .page-hero{ padding-top: 130px; padding-bottom: 44px; }
  .hero{ padding-top: 120px; padding-bottom: 60px; }
  .showreel-grid{ grid-template-columns: 1fr; gap:24px; }
  .showreel-stats{ grid-template-columns: repeat(4,1fr); gap:20px; }
  .team-grid{ grid-template-columns: repeat(3,1fr); gap:20px; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 900px){
  .main-nav, .header-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .hide-mobile{ display:none; }
  .show-mobile{ display:initial; }

  .masonry{ column-count: 2; }
  .quality-cards, .testimonial-grid, .blog-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .logo-wall{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:34px; }
  .footer-grid .footer-col:last-child{ grid-column: span 2; }
  .hero-sub{ flex-direction:column; align-items:flex-start; gap:24px; }
  .form-grid{ grid-template-columns: 1fr; }
  .showreel-stats{ grid-template-columns: repeat(2,1fr); gap:28px 20px; }
  .cursor-dot{ display:none; }

  .work-grid, .quality-grid, .services-grid-new, .videos-grid, .film-grid{ grid-template-columns: 1fr 1fr; gap:20px; }
  .story-split{ gap:32px; }
}

/* ---------- Tablet / large phone tuning ---------- */
@media (max-width: 768px){
  .page-hero{ padding-top: 120px; padding-bottom: 40px; }
  .site-footer{ padding-top: clamp(40px, 8vw, 64px); }
  .footer-cta{ padding-bottom: 40px; }
  h1{ font-size: clamp(40px, 8vw, 64px); }
  h2{ font-size: clamp(30px, 6vw, 44px); }
  .team-grid{ gap:16px; }
}

/* ---------- Large phone ---------- */
@media (max-width: 620px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-card, .service-card.is-large, .service-card.is-small{ grid-column: span 1; aspect-ratio: 4/3.4; }
  .masonry{ column-count: 1; }
  .team-grid, .logo-wall{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-grid .footer-col:last-child{ grid-column: span 1; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .mobile-nav a{ font-size:32px; }
  .scroller-item{ min-width: 260px; }
  .filter-row{ gap:8px; }
  .filter-pill{ padding:10px 18px; font-size:11px; }
  h1{ font-size: clamp(42px, 12vw, 80px); }

  .work-grid, .quality-grid, .services-grid-new, .videos-grid, .film-grid{ grid-template-columns: 1fr; gap:20px; }
  .showreel-stats{ grid-template-columns: 1fr 1fr; gap:24px 16px; }
  .section{ padding: clamp(36px, 9vw, 64px) 0; }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px){
  .team-grid{ grid-template-columns: 1fr; }
  .logo-wall{ grid-template-columns: 1fr 1fr !important; }  /* ← Forces 2 columns */
  .showreel-stats{ grid-template-columns: 1fr; }
  .container{ padding-inline: 18px; }
  .page-hero{ padding-top: 110px; padding-bottom: 32px; }
}

/* ---------- Mobile header: thin & minimal ---------- */
@media (max-width: 900px){
    .site-header,
    .site-header.is-scrolled{
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }
    .header-inner{
        padding: 12px var(--gutter) !important;
    }
    .logo img{
        height: 30px !important;
    }
    .nav-toggle span{
        height: 2px;
        width: 26px;
        background: #ffffff;
    }
    .site-header.is-scrolled .nav-toggle span{
        background: var(--ink);
    }
}

/* ---------- Mobile nav: compact & tight ---------- */
@media (max-width: 900px) {
  .mobile-nav {
    gap: 4px !important;          /* Reduce gap between links */
    padding: 20px 24px !important; /* Tighter padding */
  }

  .mobile-nav a {
    font-size: 22px !important;    /* Smaller than 32px */
    padding: 6px 0 !important;     /* Minimal vertical padding */
    line-height: 1.3 !important;   /* Tighter line height */
    letter-spacing: -0.3px;        /* Slightly tighter */
  }
}

/* Even tighter on small phones */
@media (max-width: 620px) {
  .mobile-nav a {
    font-size: 20px !important;
    padding: 4px 0 !important;
  }
  .mobile-nav {
    gap: 2px !important;
    padding: 16px 20px !important;
  }
}

/* On very small phones */
@media (max-width: 420px) {
  .mobile-nav a {
    font-size: 18px !important;
    padding: 3px 0 !important;
  }
  .mobile-nav {
    gap: 0px !important;
    padding: 12px 16px !important;
  }
}