/* Explain: Structural layout utilities for the geometric one-page profile */
.section-pad {
    padding-bottom: clamp(5rem, 10vw, 9rem);
    padding-top: clamp(5rem, 10vw, 9rem);
}

.site-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 1.1rem clamp(1rem, 3vw, 2rem);
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 60;
}

.site-header a,
.site-header nav {
    pointer-events: auto;
}

.hero-stage {
    min-height: 60vh;
    overflow: hidden;
    padding-bottom: clamp(2rem, 4vw, 4rem);
    padding-top: clamp(8rem, 13vw, 11rem);
    position: relative;
}

.hero-stage::before {
    background: var(--slate-color);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    content: "";
    height: 44vw;
    max-height: 38rem;
    min-height: 18rem;
    opacity: 0.1;
    position: absolute;
    right: 0;
    top: 0;
    width: 48vw;
}

.hero-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 4.5rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.92fr);
    position: relative;
}

.hero-copy {
    align-self: end;
    display: grid;
    gap: 1.75rem;
    min-width: 0;
}

.hero-support {
    display: grid;
    gap: 1.75rem;
    grid-column: 1;
    min-width: 0;
}

.hero-visual {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: center;
    position: relative;
    width: min(100%, 42rem);
}

.schedule-panel {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -3rem;
    max-width: 56rem;
    width: min(56rem, 100%);
}

.mindset-section,
.success-section {
    position: relative;
}

.mindset-section::after {
    background: var(--accent-color);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    content: "";
    height: 13rem;
    opacity: 0.16;
    position: absolute;
    right: 4vw;
    top: 3rem;
    transform: rotate(90deg);
    width: 13rem;
    z-index: -1;
}

.pathway-section {
    background: var(--slate-color);
    color: white;
    overflow: hidden;
    position: relative;
}

.pathway-section::before {
    background: rgba(255, 140, 0, 0.22);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    content: "";
    height: 34rem;
    position: absolute;
    right: -10rem;
    top: -6rem;
    transform: rotate(24deg);
    width: 34rem;
}

.pathway-head {
    max-width: 58rem;
    position: relative;
    z-index: 1;
}

.pathway-track {
    display: grid;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.meet-section {
    background:
        linear-gradient(105deg, rgba(47, 79, 79, 0.08), transparent 45%),
        var(--background-color);
    padding-bottom: clamp(6rem, 10vw, 10rem);
}

.footer-cut {
    background: var(--slate-color);
    clip-path: polygon(0 1.5rem, 1.5rem 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-support,
    .hero-visual {
        grid-column: auto;
        grid-row: auto;
    }

    .hero-visual {
        justify-self: center;
        max-width: 38rem;
        width: min(100%, 38rem);
    }

    .schedule-panel {
        justify-self: stretch;
        margin-top: 0;
        max-width: none;
    }
}

@media (max-width: 900px) {
    .site-header {
        align-items: center;
        gap: 0.7rem;
        padding: 0.75rem;
    }

    .brand-lockup span:last-child {
        display: none;
    }

    .brand-lockup {
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        height: 3.4rem;
        justify-content: center;
        padding: 0;
        width: 3.4rem;
    }

    .brand-mark {
        background: var(--accent-color);
    }
}

@media (max-width: 480px) {
    .section-pad {
        padding-bottom: 4.5rem;
        padding-top: 4.5rem;
    }

    .hero-stage {
        padding-bottom: 6rem;
        padding-top: 6.25rem;
    }

    .hero-grid {
        gap: 1.45rem;
    }

    .hero-copy,
    .hero-support {
        gap: 1.15rem;
    }

    .hero-visual {
        max-width: 22rem;
    }

    .triangle-signal-one {
        right: 0.2rem;
        top: 2rem;
    }

    .triangle-signal-two {
        left: 0.4rem;
    }
}