/* ==========================================================================
   PROJECT PLANNER SPECIFIC STYLES (PLANNER.HTML)
   ========================================================================== */

#project-planner {
    padding: var(--space-48) 0 var(--space-64);
    position: relative;
    z-index: 10;
}

#project-planner .container {
    max-width: min(80%, 1200px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.planner-page-hero {
    padding-top: 140px;
    padding-bottom: 30px;
    text-align: center;
}

.planner-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.planner-hero-sub {
    margin: 12px auto 0;
    max-width: 680px;
    font-size: 0.95rem;
}