/* ==========================================================================
   Responsive layer — 1440 / 1280 / 1024 / 768 / 480 / 375
   ========================================================================== */

/* ≤1280 — laptop */
@media (max-width: 1280px) {
  .header-phone { display: none; }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .footer-grid .footer-contact-col { grid-column: 1 / -1; }
  .footer-grid .footer-contact-col ul { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.75rem 2.5rem; }
  .callout--1 { left: -2%; }
  .callout--2 { right: -2%; }
}

/* ≤1024 — tablet landscape: switch to drawer navigation */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }

  .primary-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; margin: 0;
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem var(--gutter) 2rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0.25s;
  }
  .nav-open .primary-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link { width: 100%; justify-content: space-between; padding: 1.05rem 0.25rem; border-radius: 0; font-size: 1.08rem; font-weight: 700; color: var(--secondary); }
  .nav-link:hover, .nav-item:focus-within > .nav-link { background: none; }
  .dropdown {
    position: static; transform: none; min-width: 0; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0.75rem;
    grid-template-columns: 1fr; opacity: 1; visibility: visible; display: none;
  }
  .dropdown::before { display: none; }
  .nav-item.is-open > .dropdown { display: grid; transform: none; }
  .dropdown a { padding: 0.65rem 0.5rem; }
  .mobile-cta { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
  .mobile-cta .btn { width: 100%; }
  .mobile-cta .muted { font-size: 0.9rem; text-align: center; margin: 0.25rem 0 0; }

  .hero-grid, .split, .split--wide-left, .page-hero--split .container { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; }
  .hero-visual { max-width: 760px; margin-inline: auto; width: 100%; }

  .grid-4, .integrations { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }

  .bento > *, .bento .b-half { grid-column: span 6; }
  .bento .b-wide { grid-column: span 12; }

  .explorer { grid-template-columns: 1fr; }
  .explorer-tabs {
    position: static; display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 0.35rem;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .explorer-tabs::-webkit-scrollbar { display: none; }
  .explorer-tab { width: auto; flex: none; white-space: nowrap; scroll-snap-align: start; }

  .callout { position: static; max-width: none; }
  .showcase-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }

  .carousel-track { grid-auto-columns: calc((100% - 1.25rem) / 2); }
  .faq-layout, .contact-layout { grid-template-columns: 1fr; }
  .faq-layout .section-head { position: static; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start; }
  .feature-group { grid-template-columns: 1fr; gap: 1.5rem; }
  .module-grid { grid-template-columns: 1fr; }
  .service-card--featured { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ≤768 — tablet portrait */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .bento .b-half, .bento .b-wide { grid-column: span 12; }
  .bento > * { grid-column: span 6; }
  .bento-feature { grid-template-columns: 1fr; }
  .bento-feature .bf-media > img { max-width: 300px; }
  .explorer-panel { grid-template-columns: 1fr; }
  .explorer-panel .module-art { order: -1; max-width: 260px; aspect-ratio: 1.3; width: 100%; margin-inline: auto; }
  .showcase-callouts { grid-template-columns: 1fr; }
  .hero-visual { padding-left: 0.5rem; }
  .hero-visual .fc-1 { right: 0; }
  .service-card--featured { grid-template-columns: 1fr; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-contact-col ul { grid-template-columns: 1fr; }
}

/* ≤640 */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .integrations { grid-template-columns: 1fr; }
  .bento > * { grid-column: span 12; }
  .carousel-track { grid-auto-columns: 88%; }
  .form-grid { grid-template-columns: 1fr; }
  .module-card { grid-template-columns: 1fr; }
  .module-card .module-art { max-width: 140px; }
  .feature-items { grid-template-columns: 1fr; }
  .integrations { grid-template-columns: 1fr 1fr; }
  .integration { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

/* ≤480 — phones */
@media (max-width: 480px) {
  .logo-text small { display: none; }
  .btn-row .btn { flex: 1 1 100%; }
  .hero-proof { flex-direction: column; gap: 0.6rem; }
  .hero-visual { padding: 1rem 0 3.5rem; }
  .hero-visual::before { inset: 10% -12% 6% 6%; }
  .hero-visual .fc-1 { top: -0.5rem; right: 0; left: auto; font-size: 0.78rem; padding: 0.55rem 0.75rem 0.55rem 0.55rem; }
  .hero-visual .fc-1 .icon-badge { width: 32px; height: 32px; }
  .hero-visual .fc-2 { display: none; }
  .hero-phone { right: -0.25rem; bottom: 0; width: 36%; }
  .stats-band { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; padding: 1.75rem 1.25rem; }
  .stat { padding-left: 0.9rem; }
  .stat-label { font-size: 0.85rem; }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .client-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-grid .footer-contact-col { grid-column: 1 / -1; }
  .contact-item { padding: 0.8rem; gap: 0.75rem; }
  .contact-item .icon-badge { width: 40px; height: 40px; }
  .contact-item span { font-size: 0.93rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .numbered > li { grid-template-columns: 44px 1fr; }
  .numbered > li::before { width: 44px; height: 44px; }
  .explorer-panel { padding: 1.25rem; }
  .media-frame--tall { aspect-ratio: 4 / 3.6; }
  .media-badge { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: 0.65rem 0.75rem; font-size: 0.8rem; }
  .media-badge .icon-badge { display: none; }
}

/* ≤375 — small phones */
@media (max-width: 375px) {
  .integrations { grid-template-columns: 1fr; }
  .integration { flex-direction: row; align-items: center; }
  .stat-num { font-size: 2rem; }
}

/* ≥1440 — large desktop */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}