/* =======================================================
   KiraEdu Homepage
======================================================= */

.home-hero{
    width:100vw;
    min-height:720px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background:
        linear-gradient(rgba(2,6,23,.62),rgba(2,6,23,.82)),
        none;
    background-size:cover;
    background-position:center;
    color:#fff7d6;
    display:flex;
    align-items:center;
    padding:90px 0;
}

.home-image-band{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    min-height:520px;
    color:white;
    display:flex;
    align-items:center;
    padding:80px 0;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.home-hero-inner,
.home-section,
.home-image-band > div{
    width:min(100% - 48px, 1280px);
    margin-inline:auto;
}
.home-soft .home-section-header,
.home-soft .home-course-grid,
.home-testimonials .home-section-header,
.home-testimonials .home-testimonial-grid{
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
   
}

.home-hero-copy{
    max-width:780px;
    animation:fadeUp .8s ease both;
}

.home-eyebrow{
    background:rgba(212,175,55,.18);
    color:#facc15;
}

.home-eyebrow.dark{
    background:var(--ke-gold-soft);
    color:var(--ke-gold-dark);
}

.home-hero h1{
    font-family:var(--font-heading);
    font-size:76px;
    line-height:.98;
    letter-spacing:-.055em;
    margin:0 0 24px;
    color:#dbeafe;

}

.home-hero p{
    max-width:650px;
    color:#dbeafe;
    font-size:20px;
    line-height:1.75;
    margin:0;
}

.home-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
}

.home-section{
    padding:92px 0;
}

.home-section-header{
    max-width:780px;
    margin:0 auto 44px;
    text-align:center;
}

.home-section-header h2{
    color:#0f172a;
    font-family:var(--font-heading);
    font-size:48px;
    line-height:1.1;
    letter-spacing:-.04em;
    margin:0 0 14px;
}

.home-section-header p{
    color:#475569;
    font-size:17px;
    line-height:1.7;
    margin:0;
}

.home-path-grid,
.home-feature-grid,
.home-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:22px;
}

.home-path-card,
.home-feature-grid div,
.home-testimonial-grid div,
.home-empty{
    background:white;
    border:1px solid #e2e8f0;
    border-radius:30px;
    padding:30px;
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    transition:.25s ease;
    animation:fadeUp .7s ease both;
}

.home-path-card{
    min-height:260px;
    color:#0f172a;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.home-path-card:hover,
.home-feature-grid div:hover,
.home-testimonial-grid div:hover{
    transform:translateY(-7px);
    box-shadow:0 28px 70px rgba(15,23,42,.14);
}

.home-path-card span,
.home-feature-grid span{
    font-size:42px;
}

.home-path-card h3,
.home-feature-grid h3{
    color:#0f172a;
    font-size:25px;
    margin:18px 0 10px;
    font-family:var(--font-heading);
}

.home-path-card p,
.home-feature-grid p,
.home-testimonial-grid p{
    color:#64748b;
    line-height:1.65;
    margin:0;
}

.home-path-card.featured{
    background:#0f172a;
    color:white;
}

.home-path-card.featured h3{
    color:white;
}

.home-path-card.featured p{
    color:#cbd5e1;
}

.home-image-band{
    min-height:520px;
    color:white;
    display:flex;
    align-items:center;
    padding:80px 0;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.home-image-band div > *{
    max-width:620px;
}

.band-one{
    background:
        linear-gradient(90deg,rgba(2,6,23,.86),rgba(2,6,23,.44)),
        none;
    background-size:cover;
    background-position:center;
}

.band-two{
    background:
        linear-gradient(90deg,rgba(2,6,23,.86),rgba(2,6,23,.42)),
        none;
    background-size:cover;
    background-position:center;
}

.home-image-band span{
    display:block;
    color:#bfdbfe;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:16px;
}

.home-image-band h2{
    font-family:var(--font-heading);
    font-size:52px;
    line-height:1.05;
    margin:0 0 18px;
    color:#dbeafe;

}

.home-image-band p{
    color:#dbeafe;
    font-size:18px;
    line-height:1.75;
    margin:0 0 28px;
}

.home-soft{
    max-width:none;
    background:#f8fafc;
}

.home-course-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:24px;
}

.home-experience{
    background:white;
}

.home-testimonials{
    background:#f8fafc;
    max-width:none;
}

.home-testimonial-grid strong{
    display:block;
    color:#0f172a;
    font-size:22px;
    line-height:1.35;
    margin-bottom:12px;
    font-family:var(--font-heading);
}

.home-testimonial-grid span{
    display:block;
    color:#f59e0b;
    margin-top:16px;
    font-weight:900;
}

.home-final-cta{
    background:
        radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 30%),
        linear-gradient(135deg,#2563eb,#1d4ed8);
        color:#dbeafe;
        text-align:center;
        padding:105px 0;
}

.home-final-cta span{
    display:block;
    color:#bfdbfe;
    text-transform:uppercase;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    margin-bottom:14px;
}

.home-final-cta h2{
    font-family:var(--font-heading);
    font-size:52px;
    line-height:1.08;
    margin:0 0 14px;
    color:#dbeafe;

}

.home-final-cta p{
    color:#dbeafe;
    font-size:18px;
    margin:0 0 28px;
}

.home-empty{
    grid-column:1/-1;
    text-align:center;
}

/* =======================================================
   Hero Slider Animation
======================================================= */

.hero-slide{
    opacity:0;
    transform:translateY(30px);
    transition:all .6s ease;
}

.hero-show{
    opacity:1;
    transform:translateY(0);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:1320px){
    .home-hero-inner,
    .home-section,
    .home-image-band > div,
    .home-soft .home-section-header,
    .home-soft .home-course-grid,
    .home-testimonials .home-section-header,
    .home-testimonials .home-testimonial-grid{
        width:calc(100% - 32px);
    }
}

@media(max-width:900px){
    .home-hero{
        min-height:auto;
        padding:86px 0;
    }

    .home-hero h1{
        font-size:54px;
    }

    .home-image-band{
        background-attachment:scroll;
    }
}

@media(max-width:650px){
    .home-hero{
        padding:72px 0;
    }

    .home-hero h1{
        font-size:42px;
        letter-spacing:-.04em;
    }

    .home-hero p{
        font-size:17px;
    }

    .home-actions{
        flex-direction:column;
    }

    .home-actions .btn{
        width:100%;
    }

    .home-section{
        padding:62px 0;
    }

    .home-section-header{
        text-align:left;
    }

    .home-section-header h2,
    .home-image-band h2,
    .home-final-cta h2{
        font-size:34px;
    }

    .home-path-card{
        min-height:220px;
    }

    .home-image-band{
        min-height:auto;
        padding:72px 0;
    }

    .home-final-cta{
        padding:78px 16px;
    }
}


/* =======================================================
   KiraEdu Homepage Mobile Storefront
======================================================= */

.home-program-item{
    min-width:0;
}

.home-band-content{
    position:relative;
    z-index:2;
}

.home-view-all,
.home-swipe-hint,
.home-mobile-scroll-cue{
    display:none;
}


/* =======================================================
   TABLET
======================================================= */

@media(max-width:900px){

    .home-feature-grid,
    .home-testimonial-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* =======================================================
   MOBILE
======================================================= */

@media(max-width:620px){

    /* -----------------------------------------------
       Global homepage spacing
    ------------------------------------------------ */

    .home-section{
        padding:42px 0;
    }

    .home-section-header{
        width:calc(100% - 28px);
        margin:0 auto 22px;
        text-align:left;
    }

    .home-section-header h2{
        max-width:330px;
        margin:7px 0 0;
        font-size:29px;
        line-height:1.04;
        letter-spacing:-.045em;
    }

    .home-section-header p{
        max-width:330px;
        margin:12px 0 0;
        font-size:13px;
        line-height:1.55;
    }

    .home-eyebrow{
        font-size:10px;
        letter-spacing:.13em;
    }


    /* -----------------------------------------------
       Hero
    ------------------------------------------------ */

    .home-hero{
        min-height:74svh;
        padding:86px 0 54px;
        align-items:flex-end;
        background-position:58% center;
    }

    .home-hero-inner{
        width:calc(100% - 30px);
        margin-inline:auto;
    }

    .home-hero-copy{
        max-width:340px;
    }

    .home-hero-copy h1{
        margin:10px 0 16px;
        font-size:clamp(42px,12vw,55px);
        line-height:.92;
        letter-spacing:-.06em;
    }

    .home-hero-copy p{
        max-width:315px;
        margin:0 0 24px;
        font-size:14px;
        line-height:1.55;
    }

    .home-actions{
        width:100%;
    }

    .home-actions .btn{
        width:100%;
        min-height:52px;
        justify-content:center;
    }

    .home-mobile-scroll-cue{
        position:absolute;
        right:16px;
        bottom:15px;

        display:inline-flex;
        align-items:center;
        gap:8px;

        color:rgba(255,255,255,.82);
        font-size:10px;
        font-weight:800;
        letter-spacing:.08em;
        text-decoration:none;
        text-transform:uppercase;
    }

    .home-mobile-scroll-cue i{
        font-size:9px;
    }


    /* -----------------------------------------------
       Featured programs
    ------------------------------------------------ */

    .home-programs{
        padding:40px 0 30px;
        overflow:hidden;
    }

    .home-programs-heading{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:16px;
    }

    .home-programs-heading > div{
        min-width:0;
    }

    .home-programs-heading h2{
        max-width:265px;
    }

    .home-view-all{
        display:inline-flex;
        align-items:center;
        gap:6px;
        flex-shrink:0;

        padding-bottom:3px;

        color:#9a7109;
        font-size:11px;
        font-weight:850;
        text-decoration:none;
    }

    .home-view-all i{
        font-size:9px;
    }

    .home-course-grid.home-program-scroll{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:14px;

        width:100%;
        max-width:none;
        margin:0;
        padding:4px 14px 18px;

        overflow-x:auto !important;
        overflow-y:visible;

        scroll-snap-type:x proximity;
        scroll-padding-inline:14px;
        scroll-behavior:smooth;

        overscroll-behavior-x:auto;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
        touch-action:pan-y pinch-zoom;
    }

    .home-course-grid.home-program-scroll::-webkit-scrollbar{
        display:none;
    }

    .home-program-item{
        flex:0 0 78vw;
        width:78vw;
        min-width:248px;
        max-width:320px;

        scroll-snap-align:start;
        scroll-snap-stop:normal;
    }

    .home-program-item .course-card{
        width:100%;
        height:100%;
        min-height:0;
        border-radius:20px;
        box-shadow:0 13px 30px rgba(15,23,42,.09);
    }

    .home-program-item .course-card-image,
    .home-program-item .course-image{
        height:142px;
    }

    .home-program-item .course-card-body{
        padding:16px;
    }

    .home-program-item .course-card h3{
        font-size:18px;
        line-height:1.1;
    }

    .home-program-item .course-card p{
        display:-webkit-box;
        min-height:0;
        overflow:hidden;

        font-size:11px;
        line-height:1.5;

        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .home-program-item .course-card .btn{
        min-height:42px;
        font-size:11px;
    }

    .home-swipe-hint{
        display:flex;
        align-items:center;
        gap:8px;

        width:calc(100% - 28px);
        margin:3px auto 0;

        color:#7b8494;
        font-size:10px;
        font-weight:700;
    }

    .home-swipe-hint span{
        width:28px;
        height:3px;
        border-radius:999px;
        background:#d0a929;
    }

    .home-swipe-hint p{
        margin:0;
        font-size:10px;
    }


    /* -----------------------------------------------
       Career statement
    ------------------------------------------------ */

    .home-career-band{
        min-height:390px;
        padding:48px 18px;
        background-position:center;
    }

    .home-career-band::before{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(
            180deg,
            rgba(4,10,23,.26),
            rgba(4,10,23,.86)
        );
    }

    .home-career-band > div{
        width:100%;
        margin-top:auto;
    }

    .home-career-band span{
        font-size:10px;
        letter-spacing:.12em;
    }

    .home-career-band h2{
        max-width:330px;
        margin:8px 0 14px;
        font-size:34px;
        line-height:1;
        letter-spacing:-.045em;
    }

    .home-career-band p{
        max-width:310px;
        margin:0;
        font-size:13px;
        line-height:1.6;
    }


    /* -----------------------------------------------
       Compact benefits
    ------------------------------------------------ */

    .home-experience{
        padding:42px 0;
    }

    .home-feature-grid.home-mobile-mini-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;

        width:calc(100% - 28px);
        margin-inline:auto;
    }

    .home-feature-card{
        display:block;
        min-width:0;
        padding:16px 13px;

        border:1px solid #e9e3d7;
        border-radius:17px;

        background:#fff;
        box-shadow:0 8px 22px rgba(15,23,42,.055);
    }

    .home-feature-icon{
        width:36px;
        height:36px;

        display:grid;
        place-items:center;

        margin-bottom:12px;
        border-radius:12px;

        background:#fff5cc;
        color:#9a7109;

        font-size:14px;
    }

    .home-feature-card h3{
        margin:0;
        color:#111827;
        font-size:13px;
        line-height:1.2;
    }

    .home-feature-card p{
        margin:6px 0 0;
        color:#6b7280;
        font-size:10px;
        line-height:1.45;
    }


    /* -----------------------------------------------
       Testimonials
    ------------------------------------------------ */

    .home-testimonials{
        padding:42px 0;
        background:#f7f6f2;
    }

    .home-testimonial-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;

        width:calc(100% - 28px);
        margin-inline:auto;
    }

    .home-testimonial-card{
        min-width:0;
        padding:17px 14px;

        border:1px solid #e7e2d7;
        border-radius:17px;

        background:#fff;
        box-shadow:none;
    }

    .home-testimonial-stars{
        margin-bottom:10px;
        color:#c39412;
        font-size:10px;
        letter-spacing:.05em;
    }

    .home-testimonial-card strong{
        display:block;
        color:#111827;
        font-size:12px;
        line-height:1.35;
    }

    .home-testimonial-card p{
        margin:8px 0 0;
        color:#6b7280;
        font-size:10px;
        line-height:1.5;
    }


    /* -----------------------------------------------
       Final CTA
    ------------------------------------------------ */

    .home-final-cta{
        width:calc(100% - 24px);
        margin:12px auto 24px;
        padding:34px 20px;

        border-radius:24px;
        text-align:left;
    }

    .home-final-cta-inner{
        max-width:340px;
        margin:0;
    }

    .home-final-cta span{
        font-size:10px;
        letter-spacing:.12em;
    }

    .home-final-cta h2{
        max-width:310px;
        margin:8px 0 12px;
        font-size:32px;
        line-height:1;
        letter-spacing:-.045em;
    }

    .home-final-cta p{
        max-width:300px;
        margin:0 0 21px;
        font-size:13px;
        line-height:1.55;
    }

    .home-final-cta .btn{
        width:100%;
        min-height:50px;
        justify-content:center;
    }

}


/* =======================================================
   VERY SMALL PHONES
======================================================= */

@media(max-width:360px){

    .home-hero-copy h1{
        font-size:39px;
    }

    .home-program-item{
        flex-basis:84vw;
        width:84vw;
    }

    .home-feature-grid.home-mobile-mini-grid,
    .home-testimonial-grid{
        gap:8px;
    }

    .home-feature-card,
    .home-testimonial-card{
        padding:14px 11px;
    }

    .home-section-header h2{
        font-size:27px;
    }

}

/* =======================================================
   Mobile Program Rail Safety Overrides
======================================================= */

@media(max-width:620px){

    .home-programs{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .home-program-item > *,
    .home-program-item .course-card,
    .home-program-item .ke-course-card{
        width:100%;
        max-width:100%;
    }

    .home-program-item .course-card:hover,
    .home-program-item .ke-course-card:hover{
        transform:none;
    }
}


/* =========================================================
   FEATURED PROGRAMS — MOBILE TOUCH FIX
   Horizontal card swiping remains available while normal
   vertical page scrolling is allowed through the card rail.
========================================================= */

@media (max-width: 900px) {

    .home-program-scroll {
        overflow-x: auto !important;
        overflow-y: visible;

        /*
         Allow the browser to determine whether the user's
         gesture is horizontal card navigation or vertical
         page scrolling.
        */
        touch-action: pan-x pan-y;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
    }

    .home-program-item,
    .home-program-item .course-card,
    .home-program-item .ke-course-card {
        touch-action: pan-x pan-y;
    }
}


/* =========================================================
   FEATURED PROGRAMS — FINAL MOBILE RAIL
   Preserve horizontal swipe carousel while allowing the
   document to scroll vertically from anywhere on the cards.
========================================================= */

@media (max-width: 900px) {

    .home-course-grid.home-program-scroll {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100%;
        max-width: 100%;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity;
        scroll-padding-inline: 14px;

        overscroll-behavior-x: auto;
        overscroll-behavior-y: auto;

        /*
         Let the browser distinguish vertical page scrolling
         from horizontal carousel swiping naturally.
        */
        touch-action: auto;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-course-grid.home-program-scroll::-webkit-scrollbar {
        display: none;
    }

    .home-program-item {
        flex: 0 0 78vw !important;
        width: 78vw !important;
        min-width: 248px !important;
        max-width: 320px !important;

        scroll-snap-align: start;
        scroll-snap-stop: normal;

        touch-action: auto;
    }

    .home-program-item > *,
    .home-program-item .course-card,
    .home-program-item .ke-course-card {
        width: 100%;
        max-width: 100%;
        touch-action: auto;
    }
}


/* =========================================================
   FEATURED PROGRAMS — AUTHORITATIVE MOBILE LAYOUT
========================================================= */

@media (max-width: 900px) {

    /* Horizontal program rail */
    .home-course-grid.home-program-scroll {
        display: flex !important;
        flex-flow: row nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        gap: 14px !important;
        padding: 4px 14px 18px !important;

        scroll-snap-type: x proximity;
        scroll-padding-inline: 14px;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        /* horizontal swipe + normal vertical document scroll */
        touch-action: pan-x pan-y !important;
    }

    .home-course-grid.home-program-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Individual cards MUST NOT stack as grid rows */
    .home-course-grid.home-program-scroll > .home-program-item {
        display: block !important;

        flex: 0 0 min(82vw, 320px) !important;

        width: min(82vw, 320px) !important;
        min-width: min(82vw, 320px) !important;
        max-width: 320px !important;

        scroll-snap-align: start;

        touch-action: pan-x pan-y !important;
    }

    .home-program-item > .ke-course-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
    }


    /* -----------------------------------------------------
       CARD META
       Modules | Instructor | Career-focused
       Always remain horizontal on mobile.
    ----------------------------------------------------- */

    .home-program-item .ke-course-meta {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;

        padding-top: 12px !important;
        gap: 0 !important;
    }

    .home-program-item .ke-course-meta span {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 0 !important;
        min-height: 46px !important;

        padding: 5px 3px !important;

        border-right: 1px solid rgba(15, 23, 42, .08) !important;
        border-bottom: 0 !important;

        text-align: center;
        font-size: 8px;
        line-height: 1.2;
    }

    .home-program-item .ke-course-meta span:last-child {
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    .home-program-item .ke-course-meta i {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .home-program-item .ke-course-meta b {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}


/* Slightly wider cards on very small phones */
@media (max-width: 420px) {

    .home-course-grid.home-program-scroll > .home-program-item {
        flex-basis: 86vw !important;
        width: 86vw !important;
        min-width: 86vw !important;
        max-width: 310px !important;
    }

}


/* =========================================================
   KiraEdu — HOMEPAGE IMAGE FINAL
   hero.jpg  = primary homepage hero
   hero2.jpg = career statement band
========================================================= */


/* ---------------------------------------------------------
   MAIN HERO
--------------------------------------------------------- */

.home-hero {
    position: relative;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 8, 20, .82) 0%,
            rgba(3, 8, 20, .64) 42%,
            rgba(3, 8, 20, .28) 72%,
            rgba(3, 8, 20, .18) 100%
        ),
        none !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ---------------------------------------------------------
   CAREER BAND
--------------------------------------------------------- */

.home-career-band.band-one {
    position: relative;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 8, 20, .78) 0%,
            rgba(3, 8, 20, .58) 48%,
            rgba(3, 8, 20, .24) 100%
        ),
        none !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/*
   The image itself already has its controlled gradient.
   Prevent the older mobile pseudo-element from adding
   another heavy tint over hero2.jpg.
*/
.home-career-band::before {
    display: none !important;
}


/* Keep career content above background */
.home-career-band > div {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MOBILE IMAGE TREATMENT
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       HERO
       Darkest behind copy at bottom; image remains visible.
    ----------------------------------------------------- */

    .home-hero {
        min-height: 74svh;

        background-image:
            linear-gradient(
                180deg,
                rgba(3, 8, 20, .20) 0%,
                rgba(3, 8, 20, .30) 34%,
                rgba(3, 8, 20, .66) 68%,
                rgba(3, 8, 20, .90) 100%
            ),
            none !important;

        /*
           Slightly favor the subject while preserving
           enough image around it on narrow displays.
        */
        background-position: 54% center !important;

        background-size: cover !important;
        background-attachment: scroll !important;
    }


    /* -----------------------------------------------------
       CAREER
    ----------------------------------------------------- */

    .home-career-band.band-one {
        min-height: 410px;

        background-image:
            linear-gradient(
                180deg,
                rgba(3, 8, 20, .14) 0%,
                rgba(3, 8, 20, .26) 38%,
                rgba(3, 8, 20, .68) 72%,
                rgba(3, 8, 20, .90) 100%
            ),
            none !important;

        background-position: center center !important;
        background-size: cover !important;
        background-attachment: scroll !important;

        display: flex;
        align-items: flex-end;
    }

    .home-career-band::before {
        display: none !important;
        content: none !important;
    }

    .home-career-band > div {
        position: relative;
        z-index: 2;
        margin-top: auto;
    }
}


/* Extra narrow phones */
@media (max-width: 420px) {

    .home-hero {
        background-position: 55% center !important;
    }

    .home-career-band.band-one {
        background-position: 50% center !important;
    }

}


/* =========================================================
   HOMEPAGE HERO / CAREER — READABILITY OVERLAYS
========================================================= */

.home-hero,
.home-career-band {
    position: relative;
    isolation: isolate;
}

/* Actual tint layer */
.home-hero::before,
.home-career-band::before {
    content: "" !important;
    display: block !important;

    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;
}

/* Hero — strongest where the copy lives */
.home-hero::before {
    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 20, .82) 0%,
            rgba(3, 8, 20, .67) 38%,
            rgba(3, 8, 20, .34) 70%,
            rgba(3, 8, 20, .18) 100%
        );
}

/* Career section */
.home-career-band::before {
    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 20, .76) 0%,
            rgba(3, 8, 20, .55) 48%,
            rgba(3, 8, 20, .24) 100%
        );
}

/* Content must sit above tint */
.home-hero > *,
.home-career-band > * {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   MOBILE
   Copy sits lower, therefore tint becomes bottom-weighted.
--------------------------------------------------------- */

@media (max-width: 650px) {

    .home-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(3, 8, 20, .18) 0%,
                rgba(3, 8, 20, .28) 30%,
                rgba(3, 8, 20, .65) 65%,
                rgba(3, 8, 20, .92) 100%
            );
    }

    .home-career-band::before {
        background:
            linear-gradient(
                180deg,
                rgba(3, 8, 20, .16) 0%,
                rgba(3, 8, 20, .30) 34%,
                rgba(3, 8, 20, .70) 70%,
                rgba(3, 8, 20, .92) 100%
            );
    }

}