/* ============================================================
   Switchboard — Shared responsive rules (loaded after page CSS)
   Breakpoints (desktop-first):
     ≤1280  · large tablet / small laptop
     ≤1024  · tablet landscape
     ≤860   · tablet portrait
     ≤640   · phone landscape / large phone
     ≤420   · phone (375 baseline)
   ============================================================ */

/* ----- universal base hardening so the page never overflows ----- */
/* NOTE: do NOT put overflow on html/body — it breaks position:sticky on the nav.
   Instead, clip horizontal overflow inside .page (which lives BELOW the sticky nav).
   .page is full-bleed so section backgrounds reach the viewport edges on wide screens.
   Section *content* is capped by each section's own inner wrapper (.svc-hero__inner,
   .hero__inner, .deal__head, etc.) which already set max-widths between 1080–1280px. */
.page { max-width: none !important; width: 100%; overflow-x: clip; margin: 0 auto; }
img, svg, video { max-width: 100%; height: auto; }

/* ----- global button system (used by nav + hero CTAs + everywhere) ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  border: 1.5px solid var(--ink, #000);
  background: transparent;
  color: var(--ink, #000);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--ink, #000); color: var(--cream, #faf7f1); }
.btn--primary {
  background: var(--blue, #3478f6);
  color: #fff;
  border-color: var(--blue, #3478f6);
}
.btn--primary:hover { background: #2d68d1; border-color: #2d68d1; color: #fff; }
.btn--primary-green {
  background: #2f6320;
  color: #fff;
  border-color: #2f6320;
}
.btn--primary-green:hover { background: #244c19; border-color: #244c19; color: #fff; }
.btn--secondary {
  background: transparent;
  color: var(--ink, #000);
  border-color: var(--ink, #000);
}
.btn--secondary:hover { background: var(--ink, #000); color: var(--cream, #faf7f1); }
.btn--sm { height: 44px; padding: 10px 18px; font-size: 14px; }

/* ============================================================ */
/* ≤ 1280 px — keep desktop layout; pull side padding inward */
/* ============================================================ */
@media (max-width: 1280px) {
  .hero { padding-left: 32px; padding-right: 32px; }
  .ops, .build, .services, .roi, .compare, .depts, .contact, .faq {
    padding-left: 48px;
    padding-right: 48px;
  }
  .familiar { padding-left: 48px; padding-right: 48px; }
  .nav { padding-left: 24px; padding-right: 24px; }
  .foot { padding-left: 24px; padding-right: 24px; }
}

/* ============================================================ */
/* ≤ 1024 px — tablet landscape: shrink headline scale, tighten gaps */
/* ============================================================ */
@media (max-width: 1024px) {
  /* Section padding: lower the top/bottom modestly */
  .hero { padding-top: 64px; padding-bottom: 88px; }
  .ops, .build, .services, .roi, .compare, .depts, .contact { padding-top: 120px; padding-bottom: 120px; }
  .familiar { padding-top: 120px; padding-bottom: 120px; }
  .faq { padding-top: 110px; padding-bottom: 110px; }

  /* Headline scale */
  .hero__title { font-size: clamp(38px, 5.2vw, 56px); }
  .h1 { font-size: clamp(40px, 6vw, 64px); }
  .h2, .contact__title { font-size: clamp(32px, 4.6vw, 44px); }

  /* ROI: stack at 1024 (was 1100) */
  .roi__grid { grid-template-columns: 1fr; }
  .roi__left { border-right: none; border-bottom: 2px solid #000; }
}

/* ============================================================ */
/* ≤ 860 px — tablet portrait: collapse 2-cols, hide chrome flourishes */
/* ============================================================ */
@media (max-width: 860px) {
  /* Nav: collapse to just logo + primary CTA. Drawer pattern lives below. */
  .nav { padding: 14px 20px; }
  .nav__links { display: none; }
  .nav__cta .btn--secondary { display: none; }
  .nav__cta .btn--primary { height: 40px; padding: 0 16px; font-size: 14px; }

  /* Hero: stack copy/visual */
  .hero { padding: 56px 24px 80px; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__title { max-width: none; }
  .hero__copy { padding-right: 0; }
  .hero__sub { max-width: none; }
  .hero__visual { max-width: 640px; margin: 0 auto; }

  /* Section padding */
  .section,
  .ops, .closing, .build, .compare, .work, .depts, .phases, .contact, .faq, .familiar, .roi, .services {
    padding-top: 88px;
    padding-bottom: 88px;
    padding-left: 28px;
    padding-right: 28px;
  }

  /* Headlines */
  .hero__title { font-size: clamp(34px, 6vw, 44px); }
  .h1 { font-size: clamp(36px, 6vw, 48px); }
  .h2, .contact__title, .closing__quote { font-size: clamp(28px, 5vw, 36px); }
  .roi__title { font-size: 32px; }

  /* Familiar — stack */
  .familiar__row { flex-direction: column; height: auto; gap: 12px; }
  .fpanel, .fpanel.is-open { flex-basis: auto; }

  /* Ops — stack */
  .ops__layout { grid-template-columns: 1fr; }
  .testimonial { grid-template-columns: 1fr; }
  .testimonial__photo { min-height: 160px; }

  /* Build / Tiers */
  .build__layout { grid-template-columns: 1fr; gap: 32px; }
  .build__col-left { gap: 32px; align-items: center; text-align: center; }
  .build__col-right { gap: 32px; align-items: center; text-align: center; }
  .build__arrow { display: none; }
  .tiers { grid-template-columns: 1fr; gap: 16px; }
  .tiers-timeline { display: none; } /* stacked layout — timeline doesn't apply */

  /* Compare */
  .compare__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-grid { min-width: 880px; }

  /* Services / Phases */
  .services__grid { grid-template-columns: 1fr; gap: 16px; }
  .services__connector { display: none; }

  /* Depts / dx-stack reasonable spacing already exists; nothing to add at 860. */

  /* ROI inner cells */
  .roi__left, .roi__right { padding: 32px 24px; }
  .roi-eq__salary, .roi-eq__chip { font-size: 44px; }
  .roi-out__num { font-size: 44px; }

  /* FAQ stack */
  .faq__layout { grid-template-columns: 1fr; gap: 32px; }

  /* Contact form: full-width fields */
  .form-grid { grid-template-columns: 1fr; }

  /* Footer */
  .foot { padding: 48px 20px 32px; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .foot__nav { flex-direction: column; gap: 24px; align-items: flex-start; }

  /* ----- Service pages ----- */
  .svc-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .svc-hero__art { height: auto; min-height: 320px; }
  .svc-stack { grid-template-columns: 1fr; gap: 20px; }
  .svc-pillars { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .svc-fit { grid-template-columns: 1fr; gap: 16px; }
  .svc-related { grid-template-columns: 1fr; gap: 16px; }
  .svc-deck { grid-template-columns: 1fr; gap: 16px; }
  .svc-fit__center, .svc-fit__highlight { transform: none; }

  /* ----- Resources page ----- */
  .res-hero__top { grid-template-columns: 1fr; gap: 24px; }
  .res-cats { grid-template-columns: repeat(2, 1fr); }
  .res-grid { grid-template-columns: 1fr; gap: 16px; }
  .res-hero, .res-section, .res-nl, .res-action, .res-cta { padding-left: 28px; padding-right: 28px; }
}

/* ============================================================ */
/* ≤ 640 px — phone landscape / large phone */
/* ============================================================ */
@media (max-width: 640px) {
  .hero { padding: 44px 20px 64px; }
  .hero__title { font-size: 30px; line-height: 1.08; }
  .hero__sub { font-size: 16px; }
  .hero__buttons .btn { padding: 12px 18px; font-size: 14px; }
  .hero__buttons { gap: 8px; }

  .h2, .contact__title, .closing__quote { font-size: clamp(26px, 7vw, 32px); }

  /* Section padding shrinks more aggressively */
  .section,
  .ops, .closing, .build, .compare, .work, .depts, .phases, .contact, .faq, .familiar, .roi, .services {
    padding-top: 64px;
    padding-bottom: 64px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Trust marquee — keep compact, but allow label to sit above */
  .trust { flex-direction: column; align-items: stretch; }
  .trust__label { padding: 18px 20px; border-right: none; border-bottom: 1px solid var(--rule); text-align: center; }

  /* Build cards */
  .tiers { gap: 12px; }
  .tier { padding: 24px 18px; }
  .tier-title { font-size: 22px; }

  /* ROI */
  .roi__left, .roi__right { padding: 24px 18px; }
  .roi-eq__salary, .roi-eq__chip { font-size: 36px; }
  .roi-out__num { font-size: 36px; }
  .roi-slider__input { font-size: 14px; }

  /* Contact card */
  .contact__card { padding: 24px 20px; }

  /* FAQ items */
  .faq__list { gap: 8px; }

  /* Footer collapses to 1 col on phones */
  .foot__cols { grid-template-columns: 1fr; gap: 24px; }
  .foot { padding: 40px 20px 24px; }

  /* Service pages */
  .svc-hero { padding: 56px 20px 64px; }
  .svc-hero__title { font-size: clamp(28px, 7vw, 36px); }
  .svc-pillars { grid-template-columns: 1fr; }
  .svc-section { padding-left: 20px; padding-right: 20px; }

  /* Resources */
  .res-cats { grid-template-columns: 1fr; }
  .res-hero, .res-section, .res-nl, .res-action, .res-cta {
    padding-left: 20px; padding-right: 20px;
  }

  /* Departments interactive */
  .dx-stack { padding: 20px 14px; gap: 10px; border-radius: 16px; }
}

/* ============================================================ */
/* ≤ 420 px — small phone (375 baseline) */
/* ============================================================ */
@media (max-width: 420px) {
  .nav { padding: 12px 16px; }
  .nav__logo img { height: 22px; }

  .hero { padding: 36px 16px 56px; }
  .hero__title { font-size: 28px; }
  .hero__buttons { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .hero__buttons .btn { width: 100%; justify-content: center; }
  .hero__stage-card { padding: 14px; border-radius: 14px; }
  .hero__phase-pill { font-size: 12px; height: 40px; }

  .section,
  .ops, .closing, .build, .compare, .work, .depts, .phases, .contact, .faq, .familiar, .roi, .services {
    padding-top: 52px;
    padding-bottom: 52px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .h2, .contact__title { font-size: 26px; }

  .tier { padding: 20px 16px; }
  .tier-title { font-size: 20px; }

  /* Cards/text scales */
  body { font-size: 15px; }
}

/* ============================================================ */
/* Reduced motion respect (defensive — animations are heavy) */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}