/* ==========================================================
   BRITISH MIDLAND VIRTUAL
   FLEET PAGE
========================================================== */


/* ==========================================================
   FLEET HERO
========================================================== */

.fleet-hero {

    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--bm-blue);

}

.fleet-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.fleet-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,26,58,.92) 0%,
            rgba(0,26,58,.72) 42%,
            rgba(0,26,58,.20) 100%
        );

}

.fleet-hero-content {

    position: relative;

    z-index: 2;

    padding-top: 100px;
    padding-bottom: 100px;

    max-width: 1200px;

}

.fleet-hero-content .section-kicker {

    color: #ffffff;

}

.fleet-hero-content h1 {

    max-width: 720px;

    margin: 18px 0 25px;

    color: #ffffff;

    font-size: clamp(3rem,6vw,5.8rem);

    line-height: .98;

    letter-spacing: -.055em;

}

.fleet-hero-content p {

    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.82);

    font-size: 1.15rem;

    line-height: 1.8;

}


/* ==========================================================
   FLEET INTRODUCTION
========================================================== */

.fleet-intro {

    position: relative;

    padding: 110px 0 100px;

    text-align: center;

    background: #ffffff;

}

.fleet-intro::after {

    content: "";

    display: block;

    width: 90px;
    height: 4px;

    margin: 55px auto 0;

    background: var(--bm-red);

}

.fleet-intro .container {

    max-width: 850px;

}

.fleet-intro h2 {

    margin: 16px 0 25px;

    color: var(--bm-blue);

    font-size: clamp(2.4rem,4vw,4rem);

    line-height: 1.05;

    letter-spacing: -.045em;

}

.fleet-intro p {

    margin: 0;

    color: #526985;

    font-size: 1.05rem;

    line-height: 1.85;

}


/* ==========================================================
   CLASS SECTION BASE
========================================================== */

.fleet-class {

    position: relative;

    padding: 110px 0 120px;

}

.fleet-class::before {

    content: "";

    display: block;

    width: 100%;
    height: 10px;

    position: absolute;

    top: 0;
    left: 0;

    background: var(--bm-blue);

}

.fleet-class-heading {

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

}

.fleet-class-label {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--bm-red);

    font-size: .82rem;

    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;

}

.fleet-class-heading h2 {

    margin: 0 0 22px;

    color: var(--bm-blue);

    font-size: clamp(2.4rem,4vw,4.2rem);

    line-height: 1.02;

    letter-spacing: -.045em;

}

.fleet-class-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: #526985;

    font-size: 1.05rem;

    line-height: 1.8;

}


/* ==========================================================
   BEATING HEART CLASS
========================================================== */

.beating-heart-class {

    background: #f5f7fa;

}

.beating-heart-class .fleet-class-heading {

    position: relative;

    padding-top: 15px;

}

.beating-heart-class .fleet-class-heading::before {

    content: "BEATING HEART CLASS";

    display: block;

    width: max-content;

    margin: 0 auto 28px;

    padding: 12px 24px;

    background: var(--bm-blue);

    color: #ffffff;

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;

}


/* ==========================================================
   STANDARD AIRCRAFT CARDS
========================================================== */

.aircraft-card {

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    min-height: 520px;

    margin-bottom: 45px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(0,26,58,.08);

    border-radius: 24px;

    box-shadow:
        0 18px 50px rgba(0,26,58,.08);

}

.aircraft-card:last-child {

    margin-bottom: 0;

}

.aircraft-image {

    min-height: 520px;

    overflow: hidden;

}

.aircraft-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}

.aircraft-card:hover .aircraft-image img {

    transform: scale(1.035);

}

.aircraft-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 65px;

}

.aircraft-class {

    display: block;

    margin-bottom: 14px;

    color: var(--bm-red);

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

}

.aircraft-content h3 {

    margin: 0 0 22px;

    color: var(--bm-blue);

    font-size: clamp(2.2rem,3vw,3.4rem);

    line-height: 1;

    letter-spacing: -.04em;

}

.aircraft-content p {

    margin: 0 0 32px;

    color: #526985;

    line-height: 1.8;

}

.aircraft-specs {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 18px;

    padding: 24px 0;

    margin-bottom: 25px;

    border-top: 1px solid rgba(0,26,58,.10);

    border-bottom: 1px solid rgba(0,26,58,.10);

}

.aircraft-specs div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.aircraft-specs strong {

    color: var(--bm-blue);

    font-size: 1.05rem;

}

.aircraft-specs span {

    color: #7b8797;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .10em;

    text-transform: uppercase;

}

.fleet-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: max-content;

    padding: 15px 25px;

    border-radius: 999px;

    background: var(--bm-red);

    color: #ffffff;

    text-decoration: none;

    font-size: .9rem;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;

}

.fleet-button:hover {

    background: #b9201c;

    transform: translateY(-2px);

}


/* ==========================================================
   PIONEER CLASS
========================================================== */

.pioneer-class {

    background: #ffffff;

}

.pioneer-class::before {

    height: 14px;

    background: var(--bm-blue);

}

.pioneer-class .fleet-class-heading {

    padding-top: 10px;

}

.pioneer-class .fleet-class-heading::before {

    content: "PIONEER CLASS";

    display: block;

    width: max-content;

    margin: 0 auto 28px;

    padding: 12px 24px;

    background: var(--bm-blue);

    color: #ffffff;

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;

}

.aircraft-card-flagship {

    border: 2px solid rgba(0,26,58,.12);

    box-shadow:
        0 25px 70px rgba(0,26,58,.12);

}

.aircraft-card-flagship .aircraft-content {

    padding: 70px;

}


/* ==========================================================
   PIONEER CLASS NOTE
========================================================== */

.fleet-class-note {

    margin-top: 65px;

    padding: 70px;

    text-align: center;

    background: var(--bm-blue);

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0,26,58,.15);

}

.fleet-class-note .section-kicker {

    color: #ffffff;

}

.fleet-class-note h3 {

    margin: 15px 0 20px;

    color: #ffffff;

    font-size: clamp(2rem,3vw,3rem);

    line-height: 1.05;

    letter-spacing: -.035em;

}

.fleet-class-note p {

    max-width: 680px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.72);

    line-height: 1.8;

}

.fleet-class-note .primary-button {

    display: inline-flex;

}


/* ==========================================================
   FOUNDRY CLASS
========================================================== */

.foundry-class {

    position: relative;

    padding: 120px 0;

    background: #f5f7fa;

}

.foundry-class::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 14px;

    background: var(--bm-blue);

}

.foundry-heading {

    max-width: 780px;

    margin: 0 auto 65px;

    text-align: center;

}

.foundry-heading .fleet-class-label {

    display: inline-block;

    padding: 12px 24px;

    margin-bottom: 25px;

    background: var(--bm-blue);

    color: #ffffff;

}

.foundry-heading h2 {

    margin: 0 0 20px;

    color: var(--bm-blue);

    font-size: clamp(2.5rem,4vw,4rem);

    line-height: 1.03;

    letter-spacing: -.045em;

}

.foundry-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: #526985;

    line-height: 1.8;

}


/* ==========================================================
   FOUNDRY GRID
========================================================== */

.foundry-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 45px;

}


/* ==========================================================
   FOUNDRY AIRCRAFT CARDS
   Styled to match the main fleet cards
========================================================== */

.foundry-card {

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(0,26,58,.08);

    border-radius: 24px;

    box-shadow:
        0 18px 50px rgba(0,26,58,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.foundry-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 24px 60px rgba(0,26,58,.12);

}

.foundry-card-content {

    display: flex;

    flex-direction: column;

    height: 100%;

    padding: 0 0 40px;

    text-align: center;

}


/* ==========================================================
   FOUNDRY STATUS
========================================================== */

.foundry-status {

    position: absolute;

    top: 22px;
    left: 22px;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 9px 18px;

    background: rgba(0,26,58,.88);

    border: 1px solid rgba(255,255,255,.45);

    border-radius: 999px;

    color: #ffffff;

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;

}

.foundry-card-content {

    position: relative;

}


/* ==========================================================
   FOUNDRY AIRCRAFT IMAGE
========================================================== */

.foundry-aircraft-image {

    width: 100%;

    height: 270px;

    overflow: hidden;

}

.foundry-aircraft-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}

.foundry-card:hover
.foundry-aircraft-image img {

    transform: scale(1.035);

}


/* ==========================================================
   FOUNDRY CONTENT
========================================================== */

.foundry-card h3 {

    margin: 30px 35px 16px;

    color: var(--bm-blue);

    font-size: clamp(2rem,3vw,2.8rem);

    line-height: 1;

    letter-spacing: -.04em;

}

.foundry-card p {

    margin: 0 auto;

    max-width: 560px;

    padding: 0 35px;

    color: #526985;

    line-height: 1.8;

}


/* ==========================================================
   FOUNDRY SPECIFICATIONS
========================================================== */

.foundry-specs {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    margin: 30px 35px 0;

    padding: 24px 0;

    border-top:
        1px solid rgba(0,26,58,.10);

    border-bottom:
        1px solid rgba(0,26,58,.10);

}

.foundry-specs div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.foundry-specs strong {

    color: var(--bm-blue);

    font-size: 1.05rem;

}

.foundry-specs span {

    color: #7b8797;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .10em;

    text-transform: uppercase;

}


/* ==========================================================
   FOUNDRY BUTTON
========================================================== */

.foundry-card .fleet-button {

    margin: 30px auto 0;

}


/* ==========================================================
   FLEET PHILOSOPHY
========================================================== */

.fleet-philosophy {

    position: relative;

    padding: 120px 0;

    text-align: center;

    background: #ffffff;

    border-top:
        1px solid rgba(0,26,58,.08);

}

.fleet-philosophy .container {

    max-width: 850px;

}

.fleet-philosophy::before {

    content: "";

    display: block;

    width: 80px;
    height: 4px;

    margin: 0 auto 45px;

    background: var(--bm-red);

}

.fleet-philosophy h2 {

    margin: 15px 0 25px;

    color: var(--bm-blue);

    font-size: clamp(2.5rem,4vw,4rem);

    line-height: 1.03;

    letter-spacing: -.045em;

}

.fleet-philosophy p {

    margin: 0 auto;

    color: #526985;

    font-size: 1.05rem;

    line-height: 1.85;

}


/* ==========================================================
   JOIN SECTION
========================================================== */

.join-home {

    padding: 110px 0;

    text-align: center;

    background: #f5f7fa;

    border-top:
        1px solid rgba(0,26,58,.08);

}

.join-home .container {

    max-width: 850px;

}

.join-home h2 {

    margin: 15px 0 25px;

    color: var(--bm-blue);

    font-size: clamp(2.7rem,4vw,4rem);

    line-height: 1.03;

    letter-spacing: -.045em;

}

.join-home p {

    max-width: 700px;

    margin: 0 auto 35px;

    color: #526985;

    line-height: 1.8;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1000px) {

    .aircraft-card {

        grid-template-columns: 1fr;

    }

    .aircraft-image {

        min-height: 380px;

    }

    .aircraft-content {

        padding: 50px;

    }

    .aircraft-card-flagship .aircraft-content {

        padding: 50px;

    }

    .foundry-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

}


@media (max-width: 800px) {

    .fleet-hero {

        min-height: 540px;

    }

    .fleet-hero-content {

        padding-top: 80px;
        padding-bottom: 80px;

    }

    .fleet-class {

        padding: 90px 0 100px;

    }

    .fleet-class-heading {

        margin-bottom: 50px;

    }

    .aircraft-image {

        min-height: 300px;

    }

    .aircraft-content {

        padding: 40px;

    }

    .aircraft-content h3 {

        font-size: 2.5rem;

    }

    .foundry-class {

        padding: 90px 0 100px;

    }

    .foundry-heading {

        margin-bottom: 50px;

    }

    .foundry-aircraft-image {

        height: 230px;

    }

    .fleet-class-note {

        padding: 50px 35px;

    }

    .fleet-philosophy {

        padding: 90px 0;

    }

    .join-home {

        padding: 90px 0;

    }

}


@media (max-width: 600px) {

    .fleet-hero-content h1 {

        font-size: 3rem;

    }

    .fleet-hero-content p {

        font-size: 1rem;

    }

    .fleet-intro {

        padding: 80px 0;

    }

    .fleet-class {

        padding: 80px 0 90px;

    }

    .fleet-class-heading h2 {

        font-size: 2.5rem;

    }

    .aircraft-image {

        min-height: 230px;

    }

    .aircraft-content {

        padding: 32px 25px;

    }

    .aircraft-content h3 {

        font-size: 2.2rem;

    }

    .aircraft-specs {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .foundry-aircraft-image {

        height: 200px;

    }

    .foundry-card h3 {

        font-size: 2.2rem;

        margin-left: 25px;
        margin-right: 25px;

    }

    .foundry-card p {

        padding: 0 25px;

    }

    .foundry-specs {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-left: 25px;
        margin-right: 25px;

    }

    .fleet-class-note {

        padding: 40px 25px;

    }

    .fleet-class-note h3 {

        font-size: 2.2rem;

    }

}


@media (max-width: 420px) {

    .fleet-hero {

        min-height: 500px;

    }

    .fleet-hero-content {

        padding-top: 65px;
        padding-bottom: 65px;

    }

    .fleet-hero-content h1 {

        font-size: 2.6rem;

    }

    .foundry-status {

        top: 15px;
        left: 15px;

        padding: 8px 14px;

        font-size: .65rem;

    }

    .fleet-button {

        padding: 13px 21px;

    }

}