/* ==========================================================================
   Scepter Corporate — Responsive Spacing Overrides
   Loaded AFTER styles.css to refine spacing without modifying the original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTION PADDING — Standardize .pg-block variants across breakpoints
   -------------------------------------------------------------------------- */

/* Base (mobile-first, <576px) */
.pg-block,
.pg-block-banner,
.pg-block-grid,
.pg-block-slider,
.pg-block-5050 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* sm — 576px */
@media (min-width: 576px) {
    .pg-block,
    .pg-block-banner,
    .pg-block-grid,
    .pg-block-slider,
    .pg-block-5050 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* md — 768px */
@media (min-width: 768px) {
    .pg-block,
    .pg-block-banner,
    .pg-block-grid,
    .pg-block-slider,
    .pg-block-5050 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* lg — 992px */
@media (min-width: 992px) {
    .pg-block,
    .pg-block-banner,
    .pg-block-grid,
    .pg-block-slider,
    .pg-block-5050 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* xl — 1200px */
@media (min-width: 1200px) {
    .pg-block,
    .pg-block-banner,
    .pg-block-grid,
    .pg-block-slider,
    .pg-block-5050 {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}

/* xxl — 1400px */
@media (min-width: 1400px) {
    .pg-block,
    .pg-block-banner,
    .pg-block-grid,
    .pg-block-slider,
    .pg-block-5050 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* --------------------------------------------------------------------------
   2. FOOTER RESPONSIVE PADDING
   CSS handles all breakpoints — no utility classes needed on <footer>.
   More generous padding on larger screens for a spacious, professional feel.
   -------------------------------------------------------------------------- */

.footer {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
}

@media (min-width: 576px) {
    .footer {
        padding-top: 2.75rem !important;
        padding-bottom: 2.5rem !important;
    }
}

@media (min-width: 768px) {
    .footer {
        padding-top: 3.25rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (min-width: 992px) {
    .footer {
        padding-top: 4rem !important;
        padding-bottom: 3.5rem !important;
    }
}

@media (min-width: 1200px) {
    .footer {
        padding-top: 5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 1400px) {
    .footer {
        padding-top: 5.5rem !important;
        padding-bottom: 5rem !important;
    }
}

/* --------------------------------------------------------------------------
   2b. FOOTER COLUMN GRID — Better gutters & alignment at mobile breakpoint
   -------------------------------------------------------------------------- */

/* Mobile (2-column grid) — increase horizontal gutter for breathing room */
.footer .row.gy-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.75rem;
}

@media (min-width: 576px) {
    .footer .row.gy-4 {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 2rem;
    }
}

@media (min-width: 768px) {
    .footer .row.gy-4 {
        --bs-gutter-x: 2.25rem;
        --bs-gutter-y: 1.5rem;
    }
}

@media (min-width: 992px) {
    .footer .row.gy-4 {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 0;
    }
}

/* Footer column headings — consistent spacing */
.footer h6 {
    margin-bottom: 0.875rem;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .footer h6 {
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }
}

/* Footer link list items — tighter at mobile, roomier at desktop */
.footer .list-unstyled li {
    margin-bottom: 0.375rem;
}

@media (min-width: 768px) {
    .footer .list-unstyled li {
        margin-bottom: 0.5rem;
    }
}

/* Footer copyright HR — scale with footer size */
.footer hr {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .footer hr {
        margin-top: 2.5rem;
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .footer hr {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }
}

/* Social/Connect column — better vertical alignment at mobile */
@media (max-width: 991.98px) {
    .footer .col-12.col-lg-3 {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
}

/* --------------------------------------------------------------------------
   2c. NAVBAR OFFCANVAS — Improved mobile spacing
   -------------------------------------------------------------------------- */

/* Offcanvas body — more generous padding for mobile menu */
@media (max-width: 991.98px) {
    .offcanvas-nav {
        --zc-offcanvas-width: 280px;
    }

    .offcanvas-nav .offcanvas-header {
        padding: 1.25rem 1.5rem;
    }

    .offcanvas-nav .offcanvas-body {
        padding: 0.5rem 1.5rem 2rem;
    }

    /* Nav links — larger tap targets and spacing in offcanvas */
    .offcanvas-nav .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .offcanvas-nav .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    .offcanvas-nav .navbar-nav .nav-link {
        padding: 0.875rem 0.25rem;
        font-size: 1rem;
        letter-spacing: 0.01em;
    }
}

/* --------------------------------------------------------------------------
   2d. TOP-OF-CONTENT SPACING — Consistent clearance after fixed navbar
   -------------------------------------------------------------------------- */

/* The navbar is position:fixed — content needs top padding to clear it.
   Navbar height ≈ 4.75rem (per offcanvas transform offset). */
.main-content {
    padding-top: 4.75rem;
}

@media (min-width: 768px) {
    .main-content {
        padding-top: 5rem;
    }
}

@media (min-width: 1200px) {
    .main-content {
        padding-top: 5.25rem;
    }
}

/* Home page — hero-home handles its own clearance via hero row padding */
.hero-home + .main-content {
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   3. CONSISTENT VERTICAL RHYTHM — main content to footer spacing
   -------------------------------------------------------------------------- */

/* Ensure the last section before the footer has consistent bottom spacing */
main > section:last-child {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    main > section:last-child {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1200px) {
    main > section:last-child {
        margin-bottom: 2rem;
    }
}

/* Consistent spacing between adjacent sections */
main > section + section {
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    main > section + section {
        margin-top: 1rem;
    }
}

@media (min-width: 1200px) {
    main > section + section {
        margin-top: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   4. HOME HERO SECTION — Responsive layout refinements
   -------------------------------------------------------------------------- */

/* --- 4a. Announcement banner --- */
.hero-home .announcement {
    display: inline-block;
    background-color: rgba(0, 18, 80, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .hero-home .announcement {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        margin-bottom: 1.75rem;
    }
}

@media (min-width: 768px) {
    .hero-home .announcement {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 992px) {
    .hero-home .announcement {
        padding: 1rem 1.75rem;
        font-size: 1rem;
        margin-bottom: 2.25rem;
    }
}

/* --- 4b. Hero heading (h1) spacing at mobile/tablet --- */
.hero-home .display-1 {
    margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
    .hero-home .display-1 {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 768px) {
    .hero-home .display-1 {
        margin-bottom: 2rem;
    }
}

/* --- 4c. Subtitle paragraph — width constraints for optimal line length --- */
.hero-home .hero-content p.h5 {
    width: 90% !important;
    max-width: 36rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .hero-home .hero-content p.h5 {
        width: 80% !important;
        max-width: 38rem;
        line-height: 1.65;
    }
}

@media (min-width: 992px) {
    .hero-home .hero-content p.h5 {
        width: 65% !important;
        max-width: 40rem;
    }
}

@media (min-width: 1200px) {
    .hero-home .hero-content p.h5 {
        width: 50% !important;
        max-width: 42rem;
    }
}

@media (min-width: 1400px) {
    .hero-home .hero-content p.h5 {
        width: 45% !important;
        max-width: 42rem;
    }
}

/* --- 4d. Hero row padding refinement for mobile --- */
.hero-home .hero-centered .row {
    padding-top: 4.5rem;
    padding-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .hero-home .hero-centered .row {
        padding-top: 5rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .hero-home .hero-centered .row {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1200px) {
    .hero-home .hero-centered .row {
        padding-top: 7rem;
        padding-bottom: 3rem;
    }
}

/* --- 4e. Cloud animation images — prevent overflow on small screens --- */
.hero-cloud {
    max-width: 20rem;
}

@media (min-width: 576px) {
    .hero-cloud {
        max-width: 26rem;
    }
}

@media (min-width: 768px) {
    .hero-cloud {
        max-width: 32rem;
    }
}

@media (min-width: 992px) {
    .hero-cloud {
        max-width: 40rem;
    }
}

@media (min-width: 1200px) {
    .hero-cloud {
        max-width: 50rem;
    }
}

@media (min-width: 1400px) {
    .hero-cloud {
        max-width: 100%;
    }
}

/* ==========================================================================
   5. CONTENT PAGES — Section header row standardization
   ========================================================================== */

/* Consistent section-header bottom margin across all pages */
.section-header {
    margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
    .section-header {
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 768px) {
    .section-header {
        margin-bottom: 1rem;
    }
}

@media (min-width: 1200px) {
    .section-header {
        margin-bottom: 1.25rem;
    }
}

/* Standardize the gap between header row and subsequent content rows */
.pg-block-grid .row.gy-4 + .row {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .pg-block-grid .row.gy-4 + .row {
        margin-top: 2rem;
    }
}

@media (min-width: 1200px) {
    .pg-block-grid .row.gy-4 + .row {
        margin-top: 2.5rem;
    }
}

/* ==========================================================================
   6. SOLUTION CARD GRID — Tablet gutter & card spacing refinements
   ========================================================================== */

/* Refine column gutters at tablet (md–lg) for the 2-column card layout */
@media (min-width: 768px) {
    .pg-block-grid .row-cols-md-2 {
        --bs-gutter-x: 2rem;
    }
}

@media (min-width: 992px) {
    .pg-block-grid .row-cols-md-2 {
        --bs-gutter-x: 2.25rem;
    }
}

/* Tighten vertical gap between cards at tablet to avoid excessive whitespace */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .pg-block-grid .row.gy-5 {
        --bs-gutter-y: 2.5rem;
    }
}

/* Card icon/image spacing */
.pg-block-grid .col .img-fluid.mb-4 {
    margin-bottom: 1.25rem !important;
}

@media (min-width: 768px) {
    .pg-block-grid .col .img-fluid.mb-4 {
        margin-bottom: 1.5rem !important;
    }
}

/* Card heading spacing */
.pg-block-grid .col .h4 {
    margin-bottom: 0.75rem;
}

/* Card text — improve readability */
.pg-block-grid .col .text-secondary {
    line-height: 1.65;
}

/* ==========================================================================
   7. TECHNOLOGY 50/50 SPLIT LAYOUT — Text padding for mobile/tablet
   ========================================================================== */

/* Override inline p-4 at small screens for better breathing room */
.pg-block-5050 .row > [class*="col-lg-6"].d-flex {
    padding: 1.75rem 1.25rem !important;
}

@media (min-width: 576px) {
    .pg-block-5050 .row > [class*="col-lg-6"].d-flex {
        padding: 2rem 1.75rem !important;
    }
}

@media (min-width: 768px) {
    .pg-block-5050 .row > [class*="col-lg-6"].d-flex {
        padding: 2.5rem 2.25rem !important;
    }
}

/* lg+ — override inline px-lg-6/px-xl-7 for refined balance */
@media (min-width: 992px) {
    .pg-block-5050 .row > [class*="col-lg-6"].d-flex {
        padding: 2.5rem 3rem !important;
    }
}

@media (min-width: 1200px) {
    .pg-block-5050 .row > [class*="col-lg-6"].d-flex {
        padding: 3rem 4rem !important;
    }
}

@media (min-width: 1400px) {
    .pg-block-5050 .row > [class*="col-lg-6"].d-flex {
        padding: 3.5rem 4.5rem !important;
    }
}

/* 50/50 text content — improve paragraph readability */
.pg-block-5050 .row .col-lg-6 p {
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* 50/50 heading spacing */
.pg-block-5050 .row .col-lg-6 h3 {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .pg-block-5050 .row .col-lg-6 h3 {
        margin-bottom: 1.25rem;
    }
}

/* Alternate row visual separation (subtle) */
.pg-block-5050 .row + .row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   8. TEXT-HEAVY SECTIONS — Consistent breathing room
   ========================================================================== */

/* Banner sections with .h3 paragraph text — line height & spacing */
.pg-block-banner .h3,
.pg-block-banner .h4 {
    line-height: 1.55;
}

@media (min-width: 576px) {
    .pg-block-banner .h3,
    .pg-block-banner .h4 {
        line-height: 1.6;
    }
}

@media (min-width: 768px) {
    .pg-block-banner .h3,
    .pg-block-banner .h4 {
        line-height: 1.65;
    }
}

/* Content text columns — constrain width for readability on wide screens */
.pg-block-banner .col-xl-9 {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .pg-block-banner .col-xl-9 {
        padding-top: 0.75rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 1200px) {
    .pg-block-banner .col-xl-9 {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }
}

/* Additional top/bottom breathing room for single-section content pages */
.pg-block-banner + .pg-block-banner {
    margin-top: 0;
}

/* bg-septer-fades wrapper — ensure it doesn't collapse inner padding */
.bg-septer-fades > .pg-block-banner:first-child {
    padding-top: 2.5rem;
}

@media (min-width: 768px) {
    .bg-septer-fades > .pg-block-banner:first-child {
        padding-top: 3.5rem;
    }
}

@media (min-width: 1200px) {
    .bg-septer-fades > .pg-block-banner:first-child {
        padding-top: 5rem;
    }
}

/* ==========================================================================
   9. BALLOON-LAUNCH INTERSTITIAL — Proper responsive scaling
   ========================================================================== */

/* Smooth min-height scaling across breakpoints instead of jump from 50vh to 85vh */
#balloon-launch {
    min-height: 30vh;
    position: relative;
    overflow: hidden;
}

@media (min-width: 576px) {
    #balloon-launch {
        min-height: 40vh;
    }
}

@media (min-width: 768px) {
    #balloon-launch {
        min-height: 50vh;
    }
}

@media (min-width: 992px) {
    #balloon-launch {
        min-height: 65vh;
    }
}

@media (min-width: 1200px) {
    #balloon-launch {
        min-height: 75vh;
    }
}

@media (min-width: 1400px) {
    #balloon-launch {
        min-height: 85vh;
    }
}

/* Background image — ensure full coverage and proper scaling */
#balloon-launch .pg-block-bgimg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ==========================================================================
   10. TEAM PAGE — Slider/carousel section spacing & slide padding
   ========================================================================== */

/* Reduce the large mb-5 gap between section header and carousel */
#team > .container-xxl.mb-5 {
    margin-bottom: 1.5rem !important;
}

@media (min-width: 576px) {
    #team > .container-xxl.mb-5 {
        margin-bottom: 2rem !important;
    }
}

@media (min-width: 768px) {
    #team > .container-xxl.mb-5 {
        margin-bottom: 2.5rem !important;
    }
}

@media (min-width: 1200px) {
    #team > .container-xxl.mb-5 {
        margin-bottom: 3rem !important;
    }
}

/* Slide figure (z-blockquote) — improve internal spacing */
.pg-block-slider .z-blockquote {
    padding: 1.5rem 1rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .pg-block-slider .z-blockquote {
        padding: 2rem 1.5rem;
        max-width: 44rem;
    }
}

@media (min-width: 768px) {
    .pg-block-slider .z-blockquote {
        padding: 2.5rem 2rem;
        max-width: 48rem;
    }
}

@media (min-width: 992px) {
    .pg-block-slider .z-blockquote {
        padding: 2.5rem 2.5rem;
        max-width: 52rem;
    }
}

@media (min-width: 1200px) {
    .pg-block-slider .z-blockquote {
        padding: 3rem 3rem;
        max-width: 56rem;
    }
}

/* Blockquote header (image + name + title) — spacing refinement */
.pg-block-slider .blockquote-header {
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .pg-block-slider .blockquote-header {
        margin-bottom: 1.5rem;
    }
}

/* Author image — consistent sizing */
.pg-block-slider .blockquote-author-img {
    margin-bottom: 0.75rem;
}

/* Author name spacing */
.pg-block-slider .blockquote-author {
    margin-bottom: 0.25rem;
}

/* Blockquote text — readability */
.pg-block-slider .blockquote p {
    line-height: 1.7;
    font-size: 0.9375rem;
}

@media (min-width: 576px) {
    .pg-block-slider .blockquote p {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .pg-block-slider .blockquote p {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}

/* Carousel controls — spacing below slides */
.pg-block-slider .glide__controls {
    margin-top: 1.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 576px) {
    .pg-block-slider .glide__controls {
        margin-top: 2rem;
    }
}

@media (min-width: 768px) {
    .pg-block-slider .glide__controls {
        margin-top: 2.5rem;
        padding-bottom: 0.75rem;
    }
}

/* Glide bullets — spacing between arrows and bullets */
.pg-block-slider .glide__bullets {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .pg-block-slider .glide__bullets {
        margin-top: 1.25rem;
    }
}

/* ==========================================================================
   11. CAREERS PAGE — Vertical presence & CTA spacing
   ========================================================================== */

/* Give the careers section a minimum height so it doesn't feel sparse */
#career.pg-block-banner {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 576px) {
    #career.pg-block-banner {
        min-height: 55vh;
    }
}

@media (min-width: 768px) {
    #career.pg-block-banner {
        min-height: 60vh;
    }
}

@media (min-width: 1200px) {
    #career.pg-block-banner {
        min-height: 65vh;
    }
}

/* Reduce the large mb-5 gap between section header and content */
#career > .container-xxl.mb-5 {
    margin-bottom: 1.5rem !important;
}

@media (min-width: 576px) {
    #career > .container-xxl.mb-5 {
        margin-bottom: 2rem !important;
    }
}

@media (min-width: 768px) {
    #career > .container-xxl.mb-5 {
        margin-bottom: 2.5rem !important;
    }
}

/* Careers content container — center and constrain width */
#career .pg-block-container {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    #career .pg-block-container {
        max-width: 48rem;
    }
}

@media (min-width: 1200px) {
    #career .pg-block-container {
        max-width: 52rem;
    }
}

/* Careers body text — readability */
#career .pg-block-container p {
    line-height: 1.7;
    font-size: 1rem;
}

@media (min-width: 768px) {
    #career .pg-block-container p {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}

/* CTA button — better top spacing */
#career .btn-pill {
    margin-top: 1rem;
}

@media (min-width: 576px) {
    #career .btn-pill {
        margin-top: 1.5rem;
    }
}

@media (min-width: 768px) {
    #career .btn-pill {
        margin-top: 2rem;
        padding: 0.75rem 2.5rem;
    }
}

@media (min-width: 1200px) {
    #career .btn-pill {
        margin-top: 2.5rem;
        padding: 0.875rem 3rem;
    }
}

/* ==========================================================================
   12. CONTACT PAGE — CTA vertical centering & button spacing
   ========================================================================== */

/* Give the contact section strong vertical presence */
#contact.pg-block-banner {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 576px) {
    #contact.pg-block-banner {
        min-height: 55vh;
    }
}

@media (min-width: 768px) {
    #contact.pg-block-banner {
        min-height: 60vh;
    }
}

@media (min-width: 1200px) {
    #contact.pg-block-banner {
        min-height: 65vh;
    }
}

/* Contact content container — center + constrain */
#contact .pg-block-container {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    #contact .pg-block-container {
        max-width: 44rem;
    }
}

@media (min-width: 1200px) {
    #contact .pg-block-container {
        max-width: 48rem;
    }
}

/* Contact body text */
#contact .contact-body {
    line-height: 1.7;
    font-size: 1.0625rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    #contact .contact-body {
        font-size: 1.125rem;
        margin-bottom: 1.75rem;
    }
}

@media (min-width: 768px) {
    #contact .contact-body {
        font-size: 1.1875rem;
        line-height: 1.75;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1200px) {
    #contact .contact-body {
        font-size: 1.25rem;
        margin-bottom: 2.5rem;
    }
}

/* Contact CTA wrapper — proper spacing from text */
#contact .contact-cta {
    margin-top: 1rem;
    padding-top: 0.5rem;
}

@media (min-width: 576px) {
    #contact .contact-cta {
        margin-top: 1.25rem;
    }
}

@media (min-width: 768px) {
    #contact .contact-cta {
        margin-top: 1.5rem;
        padding-top: 0.75rem;
    }
}

/* Contact CTA button — generous sizing */
#contact .contact-cta .btn-pill {
    padding: 0.625rem 2rem;
}

@media (min-width: 768px) {
    #contact .contact-cta .btn-pill {
        padding: 0.75rem 2.5rem;
        font-size: 1.0625rem;
    }
}

@media (min-width: 1200px) {
    #contact .contact-cta .btn-pill {
        padding: 0.875rem 3rem;
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   13. TEAM/CAREERS/CONTACT — Consistent vertical rhythm with header/footer
   ========================================================================== */

/* Wrapper div (bg-septer-fade-start) — ensure it fills available space
   so single-section pages push the footer down properly */
.bg-septer-fade-start {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Make main-content a flex column so the wrapper can grow */
.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Body flex layout — push footer to bottom on sparse pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .main-content,
body > main {
    flex-grow: 1;
}

/* Section header inside careers — reduce default mb-5 */
#career .section-header {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #career .section-header {
        margin-bottom: 2rem;
    }
}

/* Contact section header — spacing to content below */
#contact .section-header {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    #contact .section-header {
        margin-bottom: 2rem;
    }
}

@media (min-width: 1200px) {
    #contact .section-header {
        margin-bottom: 2.5rem;
    }
}