/* =========================================
   Hero Section
========================================= */
.main-page {
    background-color: var(--color-cream);
    min-height: calc(100vh - 300px);
}

.hero-section {
    background-color: var(--color-dark-teal);
    color: var(--color-white);
    padding: 4rem 0;
    text-align: center;
    border-bottom: 4px solid var(--color-gold);
    margin-bottom: 3rem;
}

.hero-section .page-title {
    font-size: 2.5rem;
    color: var(--color-gold);
    margin-bottom: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.hero-section .page-subtitle {
    font-size: 1.05rem;
    color: var(--color-cream-dark);
    opacity: 0.9;
}