/**
 * CUTIS Theme — Global layout utilities
 * Site-wide helper classes, meant to be applied directly in markup
 * (not component-specific styling). Loaded before all other component
 * stylesheets so they can rely on these without redeclaring them.
 */

/* ------------------------------------------------------------------ */
/* Box-sizing reset — without this, any rule combining width/max-width */
/* with its own padding/border renders wider than intended (padding/   */
/* border get added on top of the specified width under the browser's */
/* default content-box model). This exact bug pattern has independently */
/* caused two overflow incidents (.service-hero__stats, then           */
/* .service-intro__callout) — resetting it globally here prevents a    */
/* third. Loaded before every other stylesheet, so nothing needs to    */
/* opt in.                                                             */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Section vertical rhythm — apply to every section's outer wrapper    */
/* (Hero, Introduction, and all future sections) for consistent        */
/* top/bottom spacing across the site.                                 */
/* ------------------------------------------------------------------ */
.section-padding {
    padding: 80px 0;
}

@media (max-width: 1199px) {
    .section-padding {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .section-padding {
        padding: 40px 0;
    }
}