/*
 * The navigation is fixed, so reserve space for it before the hero begins.
 * This applies at every screen size: otherwise the desktop hero badge can
 * appear underneath the logo/navigation bar.
 */
.hero {
    align-items: flex-start;
    min-height: 100vh;
    padding: 120px 0 80px;
}

.hero-badge {
    margin-top: 0;
}

/* Add careers without forcing a fixed number of cards per row. */
.join-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Align every career call-to-action at the base of its equal-height card. */
.join-card {
    display: flex;
    flex-direction: column;
}

.join-card .applyBtn {
    margin-top: auto;
}

/* Keep the Careers heading visible when opened from the administrator link. */
.join-us {
    scroll-margin-top: 120px;
}