/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

/* ----- Tablet ----- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-visual { min-height: 380px; margin-top: 40px; order: 2; margin-bottom: 0 !important; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .works-gallery { grid-template-columns: repeat(2, 1fr); }
  .video-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Tablet: compact the brand lockup so it doesn't crowd the nav ----- */
@media (max-width: 1180px) {
  .brand-tagline, .brand-subtag { display: none; }
  .brand-mark { width: 34px; height: 30px; }
  .hero { padding-top: calc(var(--nav-h) - 28px); }
}

/* ----- Mobile nav becomes a drawer ----- */
@media (max-width: 860px) {
  #site-nav { padding: 14px 16px; justify-content: space-between; }
  #nav-list {
    position: fixed; top: 76px; left: 16px; right: 16px;
    flex-direction: column; gap: 2px; padding: 14px;
    background: var(--c-void-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }
  #nav-list.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  #nav-list a { display: block; padding: 14px 16px; margin: 0; }
  #nav-list a::after { display: none; }
  #nav-list a.is-active { background: var(--c-surface-strong); border-radius: var(--radius-s); }
  #nav-burger { display: flex; }
  .nav-actions { order: 3; }
  #palette-trigger span { display: none; }
  #palette-trigger::after { content: "\2318"; }
  #palette-trigger { width: 38px; }
  .nav-cta { display: none; }
  #site-nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
}

/* nav-burger animated to X when menu open */
#site-nav.is-menu-open #nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#site-nav.is-menu-open #nav-burger span:nth-child(2) { opacity: 0; }
#site-nav.is-menu-open #nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ----- Small mobile ----- */
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--nav-h) - 14px); }
  .hero-badge { font-size: 0.64rem; padding: 8px 14px; text-align: center; }
  .hero-heading { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-desc { max-width: 100%; }
  .portrait-frame { width: 78%; height: min(70vw, 460px); }
  .portrait-ground-glow { width: 80%; }

  .about-pillars { gap: 12px; }
  .pillar { padding: 20px; }

  .works-gallery { grid-template-columns: 1fr; }
  .video-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .services-grid { grid-template-columns: 1fr; }

  .section { padding: 64px 0; }
  .section-title { margin-bottom: 32px; }

  .tool-card-inner { width: 108px; padding: 16px 10px; gap: 8px; }
  .tool-icon { width: 36px; height: 36px; font-size: 0.74rem; }
  .tool-name { font-size: 0.66rem; }
  .tools-track { gap: 14px; animation-duration: 26s; }

  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .video-gallery { grid-template-columns: 1fr; }
}

/* Disable heavy cursor/trail effects + reduce particle density on touch devices */
@media (hover: none) and (pointer: coarse) {
  #cursor-glow, .trail-dot { display: none !important; }
}