/* Explain: Layout utilities for the website's visual structure and styling. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 8rem);
    padding-bottom: clamp(4.5rem, 9vw, 8rem);
}

.hero-scrim {
    background: linear-gradient(180deg, rgba(24, 15, 11, 0.34) 0%, rgba(24, 15, 11, 0.62) 54%, rgba(24, 15, 11, 0.94) 100%);
}

.page-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 82% 0%, rgba(163, 38, 32, 0.10), transparent 34rem);
    padding-top: clamp(8rem, 14vw, 11rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.site-header {
    background: rgba(250, 246, 241, 0.82);
    backdrop-filter: blur(20px);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
    background: rgba(250, 246, 241, 0.96);
    box-shadow: 0 12px 40px rgba(51, 35, 27, 0.12);
}

.brand-mark {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}

.nav-link {
    position: relative;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.nav-link::after {
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    height: 2px;
    width: 0;
    background: var(--primary-color);
    content: "";
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%;
}

.nav-link.is-active {
    color: var(--primary-color);
}

.marquee {
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    animation: marquee 28s linear infinite;
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

.footer-link {
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--primary-color);
}