/* =========================================================
   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; }

  /* ===== HERO: full-bleed video is handled in style.css (.hero--video,
     .hero-video-bg, .hero-video-desktop/.hero-video-mobile). Only the
     text/button layout is tuned here. ===== */
  .hero--video .hero-title {
    margin-top: 0 !important;
  }

  /* ===== HERO MOBILE: Text & Buttons Layout ===== */
  .hero-sub {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
  }
  .hero-sub .lead {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }
}

/* ---------- 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; }
  .showreel-stats{ grid-template-columns: 1fr; }
  .container{ padding-inline: 18px; }
  .page-hero{ padding-top: 110px; padding-bottom: 32px; }

  /* Even smaller buttons for tiny screens */
  .hero-actions .btn {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
}

/* ---------- Mobile header: thin & minimal ---------- */
@media (max-width: 900px){
    /* Transparent over the hero so the video shows through untouched */
    .site-header{
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        border-bottom: 1px solid transparent;
        transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    }
    /* Once the page is scrolled, drop in a thin white bar below the
       logo & hamburger so the header reads clearly over page content */
    .site-header.is-scrolled{
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(14px);
        box-shadow: 0 2px 14px rgba(24,24,24,0.06);
        border-bottom: 1px solid var(--line);
    }
    .header-inner{
        padding: 14px var(--gutter) !important;
    }
    .logo img{
        height: 30px !important;
    }
    /* Escape the header's own stacking context (z-index:900) so the
       toggle/close button always renders above the mobile-nav overlay
       (z-index:1100), instead of being trapped behind it. */
    .nav-toggle{
        position: fixed;
        top: 14px;
        right: var(--gutter);
    }
    .nav-toggle span{
        height: 2px;
        width: 26px;
        background: #ffffff;
    }
    .site-header.is-scrolled .nav-toggle span{
        background: var(--ink);
    }
    /* The toggle sits above the mobile-nav overlay (z-index 1200) — once
       the menu is open it's always drawn on the light menu background,
       so force it dark for contrast no matter the scroll state. */
    .nav-toggle.is-open span{
        background: var(--ink) !important;
    }
}

/* ---------- Mobile nav: nicely sized & user-friendly ---------- */
@media (max-width: 900px) {
  .mobile-nav {
    padding: 90px 24px 28px !important;
  }
  .mobile-nav-links a {
    font-size: 30px !important;
    padding: 12px 0 !important;
    line-height: 1.25 !important;
    gap: 12px !important;
  }
}

/* Tighter on large phones so all 8 links + footer fit without scrolling */
@media (max-width: 620px) {
  .mobile-nav {
    padding: 80px 20px 22px !important;
  }
  .mobile-nav-links a {
    font-size: 25px !important;
    padding: 9px 0 !important;
  }
  .mobile-nav-tag { display:none; }
}

/* On very small phones */
@media (max-width: 420px) {
  .mobile-nav {
    padding: 74px 16px 18px !important;
  }
  .mobile-nav-links a {
    font-size: 21px !important;
    padding: 7px 0 !important;
    gap: 10px !important;
  }
  .mobile-nav-links a::before{ font-size:11px !important; }
  .mobile-nav-social a{ width:32px !important; height:32px !important; }
}

/* Mobile video zoom to crop YouTube's baked-in black bars */
@media (max-width: 768px) {
    .hero-video-mobile iframe {
        transform: translate(-50%, -50%) scale(1.25) !important;
        /* Increase scale (1.3, 1.4) if black bars still visible */
    }
}



/* Note: desktop/mobile hero video show-hide + fill/crop rules live in
   style.css (.hero-video-desktop / .hero-video-mobile). */