/* ==========================================================================
   Responsive overrides
   ========================================================================== */

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

/* ---------- Tablet / small desktop ---------- */
@media (max-width: 1100px) {
  .editorial-split { grid-template-columns: 1fr; }
  .editorial-media { aspect-ratio: 16/9; }
  .service-explorer { grid-template-columns: 1fr; }
  .service-visual { min-height: 320px; order: -1; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .project-card:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .masonry { column-count: 2; }
  .hiw-track { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .hiw-line { display: none; }
}

/* ---------- Nav breakpoint ----------
   Five nav items + phone link + CTA button need real room; switching to the
   hamburger menu well before things get cramped avoids mid-word wrapping
   and layout breakage in the header. */
@media (max-width: 1280px) {
  .primary-nav ul, .header-actions .btn-ghost-call { display: none; }
  .nav-toggle { display: block; }
  .header-actions { gap: 0.8rem; }
}

/* Belt-and-suspenders: never let nav/phone text wrap mid-word, even if the
   header is ever squeezed within the breakpoint above. */
.primary-nav a, .btn-ghost-call, .hero-call { white-space: nowrap; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --header-h: 76px; }
  .hero { min-height: 100svh; align-items: flex-end; }
  .hero-content { padding-bottom: 7.5rem; }
  .hero-cta-row { gap: 1rem; }
  .service-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .project-card:nth-child(1), .project-card:nth-child(4) { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .masonry { column-count: 1; }
  .form-row, .pb-field-row { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .hiw-track { grid-template-columns: 1fr; }
  .pb-progress .pb-step-tab { font-size: 0.65rem; padding-inline: 0.2rem; }
  .selector-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .fab-menu a span { display: inline; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .season-panel.is-active { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .h-display { font-size: clamp(2.1rem, 11vw, 3rem); }
  .btn { padding: 0.9rem 1.5rem; font-size: 0.88rem; }
  .pb-option-grid { grid-template-columns: 1fr; }
}

/* ---------- Short viewports (landscape phones, short laptop windows) ----------
   Hero content is bottom-aligned inside a 100svh, overflow:hidden section —
   on short-but-wide screens, trim vertical padding/spacing and drop the
   scroll indicator so the headline never gets clipped at the top. */
@media (max-height: 700px) {
  .hero-content { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 2.5rem; }
  .hero-sub { margin-top: 0.8rem; }
  .hero-cta-row { margin-top: 1.4rem; }
  .hero-stats { margin-top: 1.4rem; }
  .scroll-indicator { display: none; }
}

/* ---------- Ultra-wide ---------- */
@media (min-width: 2000px) {
  html { font-size: 18px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .fab-contact, .mobile-nav, .scroll-progress, .preloader, .grain-overlay, .cursor-dot, .cursor-ring { display: none !important; }
}