/* ===== Responsive additions (all pages) ===== */
html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; }

/* Mobile menu button + drawer */
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  background: #fff; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: #000; border-radius: 2px; position: relative; transition: transform .25s, background .25s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; z-index: 60;
  border-bottom: 1px solid rgba(0,0,0,.1); box-shadow: 0 12px 24px rgba(0,0,0,.12);
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: 14px 24px; font-family: Poppins, sans-serif; font-weight: 500; font-size: 15px;
  color: #111; border-top: 1px solid rgba(0,0,0,.06);
}
.mobile-nav a.active { font-weight: 600; color: #0060AA; background: #f4f8fc; }

header.w-full { position: relative; }
header nav ul a { white-space: nowrap; }
@media (max-width: 1023px) {
  header.w-full { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
  header nav.hidden { display: none !important; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

@media (max-width: 767px) {

  /* Top bar: tidy on phones */
  .w-full.bg-\[\#000000\].text-white.py-2\.5 { padding-left: 1rem; padding-right: 1rem; gap: .5rem; }
  .w-full.bg-\[\#000000\].text-white.py-2\.5 > div:first-child { gap: .5rem; justify-content: center; text-align: center; }

  /* Hero: show the whole banner instead of cropping it */
  section:has(> #bgSlider) { min-height: 0 !important; aspect-ratio: 1944 / 809; }
  #cardsTrack { display: none; }
  section:has(> #bgSlider) > .absolute.z-30 { bottom: .5rem; right: .75rem; left: .75rem; gap: .5rem; }
  section:has(> #bgSlider) > .absolute.z-30 button { width: 2rem; height: 2rem; }
}
@media (max-width: 479px) {
  section:has(> #bgSlider) > .absolute.z-30 > div:first-child { display: none; }
  section:has(> #bgSlider) > .absolute.z-30 { justify-content: flex-end; }
}
/* Tablet: keep hero cards from covering the banner copy */
@media (min-width: 768px) and (max-width: 1023px) {
  section:has(> #bgSlider) { min-height: 0 !important; aspect-ratio: 1944 / 809; }
  #cardsTrack { display: none; }
}