/* ==========================================================================
   RESPONSIVE OVERRIDES
   Mobile-first base lives in styles.css; this file layers breakpoint
   adjustments so every viewport from 320px to ultrawide gets an
   intentional layout, not just a shrunk desktop.
   ========================================================================== */

/* ---- show/hide nav modes ---- */
.nav-desktop{ display:none; }
.menu-toggle{ display:flex; }
/* the icon+number phone link is redundant next to the CALL NOW button
   and hamburger at narrow widths — keep the header from overcrowding */
.nav-call{ display:none; }

@media (min-width: 860px){
  .nav-desktop{ display:flex; }
  .menu-toggle{ display:none; }
  .nav-mobile{ display:none; }
  .nav-call{ display:flex; }
}

/* ---- small phones (<=380px): tighten hero + buttons stack ---- */
@media (max-width: 380px){
  :root{ --gutter: 1.1rem; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .cta-contacts{ flex-direction:column; align-items:center; }
  .hero-coords{ display:none; }
}

/* ---- header: the tagline sub-line is the first thing to go when the
   brand + call button + hamburger can't all fit one row ---- */
@media (max-width: 479px){
  .brand-mark{ height: 4rem; }
  .btn.btn-solid.magnetic span{ white-space:nowrap; }
  .site-header .btn{ padding-inline: 1.1em; font-size:.74rem; }
}

/* ---- phones generally (<640px) ---- */
@media (max-width: 639px){
  .hero{ min-height: 100vh; align-items:flex-end; }
  .hero-capabilities{ gap: 1rem 1.6rem; }
  .services-grid{ grid-template-columns: 1fr; }
  .service-card{ aspect-ratio: 4/5; }

  .svc-row .grid{ grid-template-columns: 1fr; }
  .svc-row.flip .grid{ direction: ltr; }
  .svc-media{ order:-1; }

  .about-intro{ grid-template-columns: 1fr; }
  .about-feature{ min-height: 70vh; }
  .about-feature .feat-content{ max-width:none; }
  .about-feature.flip{ justify-content:flex-start; }

  .contact-grid{ grid-template-columns: 1fr; }
  .contact-info{ position:static; }
  .form-row{ grid-template-columns: 1fr; }

  .footer-top{ grid-template-columns: 1fr 1fr; gap:2rem 1.2rem; }
  .footer-brand{ grid-column: 1/-1; }

  .story-sticky{ align-items:flex-start; padding-top: 6.5rem; }
  .story-progress{ display:none; }

  /* decorative scroll cue can collide with the wrapped capabilities
     list at narrow widths — it's not needed once phones get this narrow */
  .hero-scroll{ display:none; }

  .marquee span.word{ font-size: clamp(1.1rem, 7vw, 1.6rem); }
}

/* ---- tablets (640–1023px) ---- */
@media (min-width: 640px) and (max-width: 1023px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand{ grid-column: 1/-1; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .approach-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---- laptops / small desktop (1024–1279px) ---- */
@media (min-width: 1024px) and (max-width: 1279px){
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ---- ultrawide (>=1800px): cap line-length, add breathing room ---- */
@media (min-width: 1800px){
  :root{ --maxw: 1520px; }
  .hero h1{ font-size: clamp(3.4rem, 6vw, 7.5rem); }
}

/* ---- landscape phones: avoid hero overflow ---- */
@media (max-height: 500px) and (orientation: landscape){
  .hero{ min-height: 120vh; }
  .hero-scroll{ display:none; }
}

/* ---- fine pointer only: keep hover-only affordances off touch ---- */
@media (hover: none){
  .service-card .card-link{ opacity:1; transform:none; }
  .btn::before{ display:none; }
  .btn:hover{ color: var(--text); border-color: var(--line-strong); }
}