/* ===========================================================
   responsive.css — mobile-first refinements
   Most layout uses fluid clamp(); these are breakpoint fixes.
   Emphasis on phones (majority of visitors).
   =========================================================== */

/* Scroll-reveal animation hooks */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-reveal="left"] { transform: translateX(-30px); }
[data-reveal][data-reveal="right"] { transform: translateX(30px); }
[data-reveal].in[data-reveal="left"],
[data-reveal].in[data-reveal="right"] { transform: none; }

/* Hero load stagger */
.hero [data-stagger] {
  opacity: 0;
  transform: translateY(20px);
  animation: rise .9s var(--ease) forwards;
}
.hero [data-stagger="1"]{ animation-delay: .05s; }
.hero [data-stagger="2"]{ animation-delay: .15s; }
.hero [data-stagger="3"]{ animation-delay: .25s; }
.hero [data-stagger="4"]{ animation-delay: .35s; }
.hero [data-stagger="5"]{ animation-delay: .45s; }
.hero-visual { opacity: 0; animation: rise 1.1s var(--ease) .3s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero [data-stagger], .hero-visual { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Tablet / ≤980px ---------- */
@media (max-width: 980px) {
  /* Once the two-column splits stack, a sideways entrance has nothing
     to slide in from and its pre-reveal offset pokes past the viewport
     edge. Rise vertically instead. */
  [data-reveal][data-reveal="left"], [data-reveal][data-reveal="right"],
  [data-rise][data-rise="left"], [data-rise][data-rise="right"] { transform: translate3d(0, 24px, 0); }
  [data-reveal].in[data-reveal="left"], [data-reveal].in[data-reveal="right"],
  [data-rise].in[data-rise="left"], [data-rise].in[data-rise="right"] { transform: none; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .programs-grid,
  .testi-grid,
  .price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .steps.lined .step::after { display: none; }
  .price.featured { transform: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Nav drawer ----------
   Six links plus the CTA crowd the bar well before phone widths,
   so the drawer takes over at 1040px. Everything else that changes
   on small screens stays on the 720px breakpoint below. */
@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .4rem;
    background: var(--paper);
    padding: 5rem 2rem 2rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
  }
  body.nav-open .nav-links { transform: translateX(0); }
  .nav-links a:not(.btn) { font-family: var(--font-display); font-size: 1.5rem; padding-block: .5rem; }
  .nav-links a::after { display: none; }
  .nav-links .btn { font-size: 1.05rem; white-space: nowrap; margin-top: 1rem; width: 100%; }

  /* dim overlay */
  body.nav-open::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(22,39,30,.4);
    z-index: 99;
    backdrop-filter: blur(2px);
  }
  .site-header { z-index: 101; }
  .nav-links { z-index: 102; }
  .nav-toggle { z-index: 103; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1rem; }
  .programs-grid,
  .testi-grid,
  .price-grid,
  .steps { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .form-grid .two { grid-template-columns: minmax(0, 1fr); }
  .bmi-inputs { grid-template-columns: minmax(0, 1fr); }

  .hero-badge--tl { left: 2%; }
  .hero-badge--br { right: 2%; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  :root { --pad-x: 1.1rem; }
  .hero-badge { padding: .7rem .85rem; }
  .hero-badge b { font-size: 1.1rem; }
  .brand .brand-name { font-size: 1.18rem; }
  .cta-band { border-radius: 24px; }
}

/* larger screens: cap line lengths nicely already handled by clamp */
@media (min-width: 1500px) {
  :root { --maxw: 1320px; }
}