/* impact-stats-offset.css
   Adds a bounded offset when a hero is present to prevent excessive overlap
   and keep spacing neat across breakpoints. Loaded after main.css.
*/
:root{
  --impact-offset: clamp(32px, 6vh, 100px);
}

/* Apply padding when hero is present. Use sibling combinators to scope. */
.nl-hero + main .impact-stats,
.nl-hero + .impact-stats,
.hero__slider-wrap + .impact-stats {
  padding-top: var(--impact-offset);
}

/* Tighter offsets on medium viewports */
@media (max-width: 1024px) {
  :root{ --impact-offset: clamp(32px, 6vh, 100px); }
}

@media (max-width: 768px) {
  :root{ --impact-offset: clamp(32px, 6vh, 100px); }
}

@media (max-width: 480px) {
  :root{ --impact-offset: clamp(24px, 6vh, 48px); }
}

/* Ensure impact-stats internal padding isn't doubled by existing rules */
.our-become.impact-stats {
  /* If both classes present, don't use the giant negative margins; adjust locally */
  margin-top: calc(-1 * clamp(60px, 10vh, 120px));
}