/* ══════════════════════════════════════════════════
   RESPONSIVE
   Breakpoint overrides for class-based layout. Literal px values,
   not --bp-* tokens — CSS custom properties can't be used as the
   comparison value inside @media queries. Loaded last so it wins
   on source order at equal specificity. Tiers match the source
   design system's own scale: 1440 / 1280 / 1024 / 768 / 375.
   ══════════════════════════════════════════════════ */

@media (max-width:1024px){ /* 1024px · tablet landscape */
  /* header: swap nav+cta for burger button */
  .site-header__nav,
  .site-header__cta{ display:none; }
  .site-header__burger{ display:flex; }
}

@media (min-width:1025px){
  /* mobile menu overlay is only ever reachable via the burger, which is
     already hidden above this width — this is just a defense-in-depth
     guard (e.g. resizing the window back to desktop while it's open). */
  .site-mobile-menu{ display:none !important; }
}

@media (max-width:768px){ /* 768px · tablet portrait */
  /* hero: full-width content column (no left-half split on small screens) */
  .site-hero__content{ width:100%; }
}