html, body {
    overflow-x: clip;
    width: 100%;
    position: relative;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-px);
    width: 100%;
    box-sizing: border-box;
}

.site-main {
    padding-top: 84px; /* Matches fixed header height */
}

.section {
    padding: clamp(var(--space-12), 10vw, var(--space-24)) 0;
}

.grid {
    display: grid;
    gap: var(--grid-gap);
}

/* Responsive Grid System */
.grid-2, .grid-3, .grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
}

@media (min-width: 640px) {
    .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Utilities */
.bg-white { background-color: white !important; }
.bg-surface { background-color: var(--color-surface) !important; }

.section-header {
    margin-bottom: clamp(var(--space-8), 6vw, var(--space-16));
}

.center-aligned {
    text-align: center;
}

.max-w-800 { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Margin & Padding Helpers */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

@media (max-width: 768px) {
    .container {
        padding: 0 var(--container-sm);
    }
}

/* Visibility Utilities */
.hide-mobile {
    @media (max-width: 768px) { display: none !important; }
}

.hide-desktop {
    @media (min-width: 769px) { display: none !important; }
}