/* ============================================================
   RESPONSIVE REFINEMENTS
   Component-level breakpoints live beside each component in
   style.css. This file holds cross-cutting layout tuning.
   ============================================================ */

/* Large desktops — let the hero breathe a touch more */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; }
  .hero { min-height: 720px; }
}

/* Tablet landscape */
@media (max-width: 1080px) {
  :root { --nav-h: 76px; }
  .hero-slide__content { max-width: 720px; }
}

/* Tablet portrait */
@media (max-width: 860px) {
  .cta-band__actions { flex-direction: row; flex-wrap: wrap; }
  .quote-card blockquote { font-size: var(--fs-sub); }
}

/* Phones */
@media (max-width: 620px) {
  :root { --section-y: clamp(3.5rem, 3rem + 4vw, 5rem); }
  .hero-slide__actions { flex-direction: column; align-items: stretch; }
  .hero-slide__actions .btn { width: 100%; }
  .hero-slide h1 { max-width: 100%; }
  .btn { width: 100%; }
  .nav__cta .btn--gold { display: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .to-top { right: 14px; bottom: 14px; }
  .wa-float { left: 14px; bottom: 14px; }
}

/* Very small phones */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .stat__num { font-size: 2.1rem; }
}

/* Print — collapse to a clean document */
@media print {
  .topbar, .nav, .hero__ui, .to-top, .wa-float, .preloader, .newsletter { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}