/*
 * body, html — Global base reset for the entire site.
 * Sets the font family, removes default margins/padding, ensures a white
 * background, enables smooth font rendering, and hides any horizontal
 * overflow caused by full-width sections or wide content.
 */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    color: #333;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
}

/*
 * .hide-desktop — Utility class that hides an element on desktop viewports.
 * Applied to elements that should only appear on mobile; hidden by default
 * and revealed inside the mobile media query below.
 */
.hide-desktop { display: none !important; }

/*
 * @media (max-width: 768px) — Mobile breakpoint adjustments for visibility utilities.
 * Hides elements marked as desktop-only and reveals elements marked as
 * desktop-hidden, switching the layout to the mobile-appropriate versions.
 */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .hide-desktop { display: flex !important; }
}