/* ==========================================================================
   RESPONSIVE OVERRIDES
   Desktop-first components collapse gracefully; mobile keeps full polish
   with lighter-weight motion (handled in JS via matchMedia).
   ========================================================================== */

/* ---------- ≤1180px : navigation collapses, sticky columns loosen ---------- */
@media (max-width: 1180px){
  .nav-primary__list{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .nav-cta .btn{ padding: 1rem; }
  .nav-cta .btn .btn__arrow{ margin:0; }

  .service-index__visual{ display:none; }
  .services-nav{ position: static; flex-direction:row; overflow-x:auto; gap:.5rem; padding-bottom:.5rem; }
  .services-nav a{ white-space:nowrap; }
  .services-layout{ grid-template-columns: 1fr; }
  .contact-info{ position:static; }
}

/* ---------- ≤1024px : primary two-column sections stack ---------- */
@media (max-width: 1024px){
  :root{ --header-h: 80px; }

  .intro-split,
  .feature-band,
  .about-hero-grid,
  .contact-layout{ grid-template-columns: minmax(0,1fr); }
  .feature-band--rev .feature-band__media,
  .feature-band--rev .feature-band__body{ order:0; }
  .feature-band__media{ aspect-ratio: 16/10; }

  .intro-split__media{ max-width: 420px; margin-inline:auto; width:100%; }
  .intro-split__badge{ left: 1rem; bottom:-1.2rem; }

  .process__list{ grid-template-columns: repeat(2,1fr); row-gap: 2.4rem; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .value-strip{ grid-template-columns: 1fr; }
  .scenario-grid{ grid-template-columns: repeat(2,1fr); }

  .service-detail__head{ grid-template-columns: 1fr; }
  .service-detail__grid{ grid-template-columns: 1fr; }

  .footer__top{ grid-template-columns: 1fr 1fr; row-gap: 2.6rem; }

  .impact-card{ grid-column: span 6 !important; aspect-ratio: 4/3 !important; }
}

/* ---------- ≤768px : tablet / mobile shared rules ---------- */
@media (max-width: 768px){
  :root{ --section-pad: 4.2rem; --gutter: 1.35rem; }

  .hero{ align-items: flex-end; min-height: 100svh; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
  .hero__actions .btn span{ display:inline; }

  .process__list{ grid-template-columns: 1fr; }
  .scenario-grid{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }

  .collab-step{ grid-template-columns: 1fr; gap:.8rem; }

  .contact-form__grid{ grid-template-columns: minmax(0,1fr); }

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

  .service-index__row{ grid-template-columns: 50px 1fr auto; }
  .service-index__meta{ display:none; }

  .back-to-top{ width:44px; height:44px; }

  .cursor-dot, .cursor-ring{ display:none; }
}

/* ---------- ≤430px : large phones ---------- */
@media (max-width: 430px){
  .brand__tag{ display:none; }
  .hero__tags{ gap: 1.2rem; }
  .intro-split__badge{ position: static; margin-top: 1rem; max-width:none; }
  .quote-block p{ font-size: 1.5rem; }
}

/* ---------- ≤375px : small phones ---------- */
@media (max-width: 375px){
  :root{ --gutter: 1.1rem; }
  .btn{ padding: .95rem 1.5rem; font-size:.86rem; }
  .brand__seal{ width:44px; height:44px; }
}

/* ---------- Large desktop refinement ---------- */
@media (min-width: 1920px){
  :root{ --container: 1480px; }
}

/* ---------- Touch devices: drop hover-only affordances ---------- */
@media (hover: none){
  .cursor-dot, .cursor-ring{ display:none; }
  .card:hover{ transform:none; }
}