/* ==========================================================
   BRITISH MIDLAND VIRTUAL
   BASE.CSS
   Global Design System
   Cleaned & Consolidated
========================================================== */


/* ==========================================================
   01. RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bm-cream);

    color:var(--bm-blue);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

svg{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul,
ol{

    list-style:none;

}

button,
input,
textarea,
select{

    font:inherit;

}

button{

    border:0;

    background:none;

    cursor:pointer;

}


/* ==========================================================
   02. DESIGN TOKENS
========================================================== */

:root{

    /* ------------------------------------------------------
       BRAND
    ------------------------------------------------------ */

    --bm-blue:#001A3A;
    --bm-blue-light:#032553;
    --bm-blue-dark:#00112A;

    --bm-red:#D02823;
    --bm-red-dark:#B51F1B;

    --bm-cream:#F8F3EE;
    --bm-white:#FFFFFF;


    /* ------------------------------------------------------
       TEXT
    ------------------------------------------------------ */

    --text:#44556B;
    --text-light:#7A8699;
    --text-muted:#A0A8B5;


    /* ------------------------------------------------------
       BORDERS
    ------------------------------------------------------ */

    --border:#E5E8ED;
    --border-dark:rgba(0,26,58,.12);


    /* ------------------------------------------------------
       CONTAINERS
    ------------------------------------------------------ */

    --container:1280px;
    --container-wide:1500px;
    --container-narrow:900px;


    /* ------------------------------------------------------
       RADIUS
    ------------------------------------------------------ */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius:18px;
    --radius-lg:26px;
    --radius-xl:34px;
    --radius-pill:999px;


    /* ------------------------------------------------------
       SHADOWS
    ------------------------------------------------------ */

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.06);

    --shadow:
        0 20px 45px rgba(0,0,0,.10);

    --shadow-lg:
        0 35px 90px rgba(0,0,0,.16);

    --shadow-xl:
        0 50px 120px rgba(0,0,0,.22);


    /* ------------------------------------------------------
       TRANSITIONS
    ------------------------------------------------------ */

    --transition-fast:.18s ease;
    --transition:.28s ease;
    --transition-slow:.45s ease;

}


/* ==========================================================
   03. TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--bm-blue);

    font-weight:700;

    line-height:1.15;

    letter-spacing:-.025em;

}

h1{

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

}

h2{

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

}

h3{

    font-size:1.7rem;

}

h4{

    font-size:1.1rem;

}

p{

    color:var(--text);

}

strong{

    font-weight:700;

}


/* ==========================================================
   04. LAYOUT SYSTEM
========================================================== */

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

.container-wide{

    width:min(95%,var(--container-wide));

    margin-inline:auto;

}

.container-narrow{

    width:min(90%,var(--container-narrow));

    margin-inline:auto;

}

.container-fluid{

    width:100%;

    padding-inline:40px;

}

.narrow{

    width:min(90%,760px);

    margin-inline:auto;

}

section{

    padding:130px 0;

}

section:first-of-type{

    padding-top:0;

}


/* ==========================================================
   05. SITE HEADER
========================================================== */

.site-header{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease;

}

.site-header.scrolled{

    position:fixed;

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

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

}


/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:96px;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:auto;

    height:60px;

    transition:transform var(--transition);

}

.logo:hover img{

    transform:scale(1.03);

}


/* ==========================================================
   NAVIGATION LINKS
========================================================== */

.nav-links{

    display:flex;

    align-items:center;

    gap:36px;

}

.nav-links a{

    position:relative;

    display:inline-flex;

    align-items:center;

    padding:10px 0;

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

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:
        color var(--transition),
        opacity var(--transition);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:2px;

    width:100%;
    height:2px;

    background:var(--bm-red);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform var(--transition);

}

.nav-links a:hover{

    color:#ffffff;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    transform:scaleX(1);

}

.nav-links a.active{

    color:#ffffff;

}


/* ==========================================================
   NAV CTA
========================================================== */

.nav-cta a{

    padding:12px 24px;

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

    border-radius:var(--radius-pill);

}

.nav-cta a::after{

    display:none;

}

.nav-cta a:hover{

    background:#ffffff;

    color:var(--bm-blue);

}


/* ==========================================================
   06. GLOBAL HERO
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--bm-blue);

    color:#ffffff;

}

.hero-image{

    position:absolute;

    inset:0;

    z-index:1;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(0,26,58,.90) 0%,
            rgba(0,26,58,.70) 40%,
            rgba(0,26,58,.25) 100%
        );

}


/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-content{

    position:relative;
    z-index:10;

    width:100%;
    max-width:900px;

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

    margin-left:auto;
    margin-right:auto;

    text-align:left;

}


/* ==========================================================
   HERO KICKER
========================================================== */

.hero-kicker{

    display:inline-block;

    margin-bottom:22px;

    color:var(--bm-red);

    font-size:.80rem;

    font-weight:700;

    letter-spacing:.24em;

    text-transform:uppercase;

}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero h1{

    max-width:880px;

    color:#ffffff;

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

    line-height:1.12;

    font-weight:700;

    letter-spacing:-.025em;

    margin-bottom:30px;

    text-shadow:
        0 6px 22px rgba(0,0,0,.30);

    text-wrap:balance;

}


/* ==========================================================
   HERO DIVIDER
========================================================== */

.hero-divider{

    width:80px;

    height:4px;

    margin:32px 0;

    background:var(--bm-red);

    border-radius:999px;

}


/* ==========================================================
   HERO COPY
========================================================== */

.hero-copy{

    max-width:650px;

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

    font-size:1.05rem;

    line-height:1.8;

    text-align:left;

}


/* ==========================================================
   HERO BUTTONS
========================================================== */

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:40px;

}

.hero-buttons .primary-button,
.hero-buttons .secondary-button{

    min-width:220px;

}


/* ==========================================================
   CENTRED HERO
========================================================== */

.hero-center{

    text-align:center;

    justify-content:center;

}

.hero-center .hero-content{

    margin-inline:auto;

    text-align:center;

}

.hero-center .hero-divider{

    margin-inline:auto;

}

.hero-center .hero-copy{

    margin-inline:auto;

    text-align:center;

}

.hero-center .hero-buttons{

    justify-content:center;

}


/* ==========================================================
   HERO SIZE MODIFIERS
========================================================== */

.hero-sm{

    min-height:650px;

}

.hero-xl{

    min-height:110vh;

}


/* ==========================================================
   PAGE HERO
========================================================== */

.page-hero{

    padding-top:180px;

    padding-bottom:110px;

    background:
        linear-gradient(
            180deg,
            var(--bm-blue),
            var(--bm-blue-light)
        );

    color:#ffffff;

    text-align:center;

}

.page-hero h1{

    max-width:1000px;

    margin:0 auto 28px;

    color:#ffffff;

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

    line-height:1.05;

}

.page-hero p{

    max-width:760px;

    margin-inline:auto;

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

    line-height:1.9;

}


/* ==========================================================
   07. BUTTON SYSTEM
========================================================== */

.primary-button,
.secondary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:220px;

    height:60px;

    padding:0 34px;

    border-radius:var(--radius-pill);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.02em;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.primary-button{

    background:var(--bm-red);

    color:#ffffff;

    border:2px solid var(--bm-red);

    box-shadow:
        0 12px 28px rgba(208,40,35,.28);

}

.primary-button:hover{

    background:var(--bm-red-dark);

    border-color:var(--bm-red-dark);

    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(208,40,35,.38);

}


/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.secondary-button{

    background:transparent;

    color:#ffffff;

    border:2px solid rgba(255,255,255,.95);

}

.secondary-button:hover{

    background:#ffffff;

    color:var(--bm-blue);

    border-color:#ffffff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(255,255,255,.18);

}


/* ==========================================================
   SECONDARY BLUE VARIANT
========================================================== */

.secondary-button.blue{

    border-color:var(--bm-blue);

    color:var(--bm-blue);

}

.secondary-button.blue:hover{

    background:var(--bm-blue);

    color:#ffffff;

    border-color:var(--bm-blue);

}


/* ==========================================================
   BUTTON ICONS / ACTIVE
========================================================== */

.primary-button i,
.secondary-button i{

    font-size:1rem;

}

.primary-button:active,
.secondary-button:active{

    transform:translateY(0);

}


/* ==========================================================
   08. SECTION HEADINGS
========================================================== */

.section-kicker,
.section-label{

    display:inline-block;

    margin-bottom:22px;

    color:var(--bm-red);

    font-size:.86rem;

    font-weight:800;

    letter-spacing:.24em;

    text-transform:uppercase;

}

.section-heading{

    max-width:900px;

    margin:0 0 26px;

    color:var(--bm-blue);

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

    font-weight:800;

    line-height:1.08;

    letter-spacing:-.03em;

}

.section-intro{

    max-width:820px;

    margin:0 0 70px;

    color:var(--text);

    font-size:1.12rem;

    line-height:1.95;

}

.section-center{

    text-align:center;

}

.section-center h2{

    margin-inline:auto;

}

.section-center .section-intro{

    margin-inline:auto;

}


/* ==========================================================
   SECTION DIVIDERS
========================================================== */

.red-line,
.hero-line{

    width:80px;

    height:4px;

    margin:30px 0;

    background:var(--bm-red);

    border-radius:999px;

}

.title-line{

    width:72px;

    height:4px;

    margin:0 0 34px;

    background:var(--bm-red);

    border-radius:999px;

}


/* ==========================================================
   09. COMPONENT LIBRARY — CARDS
========================================================== */

.card{

    position:relative;

    overflow:hidden;

    padding:40px;

    background:var(--bm-white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:var(--bm-red);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.card:hover::before{

    transform:scaleX(1);

}


/* ==========================================================
   FEATURE CARD
========================================================== */

.feature-card{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    overflow:hidden;

    background:#ffffff;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.feature-card img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.feature-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:60px;

}


/* ==========================================================
   PANEL
========================================================== */

.panel{

    padding:35px;

    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}


/* ==========================================================
   GLASS
========================================================== */

.glass{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius);

}

.glass-dark{

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

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius);

}


/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:var(--radius-pill);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.badge-red{

    background:var(--bm-red);

    color:#ffffff;

}

.badge-blue{

    background:var(--bm-blue);

    color:#ffffff;

}

.badge-light{

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

    color:var(--bm-blue);

}

.badge-success{

    background:#E8F8EE;

    color:#1F8B4C;

}

.badge-warning{

    background:#FFF6E5;

    color:#B37A00;

}


/* ==========================================================
   CHIP
========================================================== */

.chip{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

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

    color:var(--bm-blue);

    border-radius:var(--radius-pill);

    font-weight:600;

}


/* ==========================================================
   ICON CIRCLE
========================================================== */

.icon-circle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin-bottom:24px;

    background:var(--bm-red);

    color:#ffffff;

    border-radius:50%;

    font-size:1.8rem;

}


/* ==========================================================
   CALLOUT
========================================================== */

.callout{

    margin:24px 0;

    padding:28px 32px;

    background:rgba(208,40,35,.06);

    border-left:5px solid var(--bm-red);

    border-radius:0 var(--radius) var(--radius) 0;

}

.callout h3{

    margin-bottom:12px;

}

.callout p{

    color:var(--text);

}


/* ==========================================================
   10. STATISTICS
========================================================== */

.stats-grid{

    display:grid;

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

    gap:28px;

}

.stat{

    position:relative;

    padding:35px;

    background:#ffffff;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow-sm);

}

.stat-number{

    display:block;

    margin-bottom:12px;

    color:var(--bm-blue);

    font-size:2.5rem;

    font-weight:800;

}

.stat-label{

    color:var(--text);

    font-size:.85rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ==========================================================
   11. TABLES
========================================================== */

.table-wrap{

    width:100%;

    overflow-x:auto;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}

table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

}

th{

    padding:18px;

    background:var(--bm-blue);

    color:#ffffff;

    text-align:left;

}

td{

    padding:18px;

    border-bottom:1px solid var(--border);

}

tbody tr:hover{

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

}


/* ==========================================================
   12. FORMS
========================================================== */

.form-group{

    margin-bottom:24px;

}

label{

    display:block;

    margin-bottom:8px;

    color:var(--bm-blue);

    font-size:.9rem;

    font-weight:700;

}

input,
textarea,
select{

    width:100%;

    padding:14px 16px;

    background:#ffffff;

    color:var(--bm-blue);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    outline:none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}

textarea{

    min-height:140px;

    resize:vertical;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--bm-red);

    box-shadow:
        0 0 0 3px rgba(208,40,35,.10);

}


/* ==========================================================
   13. ALERTS
========================================================== */

.alert{

    margin:24px 0;

    padding:18px 24px;

    border-radius:var(--radius);

}

.alert-info{

    background:#EAF3FF;

    color:#114A82;

}

.alert-success{

    background:#EAF8EF;

    color:#1D7C3D;

}

.alert-warning{

    background:#FFF7E5;

    color:#9A6900;

}

.alert-danger{

    background:#FFECEC;

    color:#A32020;

}


/* ==========================================================
   14. LOADING
========================================================== */

.loading{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

}

.spinner{

    width:28px;

    height:28px;

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

    border-top-color:var(--bm-red);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   15. FOOTER
========================================================== */

.site-footer{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #001A3A,
            #00132F
        );

    color:#ffffff;

}

.site-footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.04),
            transparent 45%
        );

    pointer-events:none;

}

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:70px;

    padding:90px 0;

}

.footer-brand{

    max-width:420px;

}

.footer-brand img{

    width:220px;

    margin-bottom:28px;

    transition:opacity var(--transition);

}

.footer-brand img:hover{

    opacity:.92;

}

.footer-brand p{

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

    font-size:1rem;

    line-height:1.9;

}

.site-footer h4{

    margin-bottom:24px;

    color:#ffffff;

    font-size:.88rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.site-footer ul{

    margin:0;

    padding:0;

}

.site-footer li{

    margin-bottom:16px;

}

.site-footer li:last-child{

    margin-bottom:0;

}

.site-footer a{

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

    transition:
        color var(--transition),
        padding-left var(--transition);

}

.site-footer a:hover{

    color:#ffffff;

    padding-left:8px;

}


/* ==========================================================
   FOOTER SOCIALS
========================================================== */

.footer-social{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:26px;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    padding:0;

    background:rgba(255,255,255,.06);

    border-radius:50%;

}

.footer-social a:hover{

    padding-left:0;

    background:rgba(255,255,255,.14);

    transform:translateY(-3px);

}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom{

    position:relative;

    z-index:2;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:30px 0;

}

.footer-bottom p{

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

    font-size:.9rem;

}

.footer-legal{

    display:flex;

    gap:25px;

}

.footer-legal a{

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

}


/* ==========================================================
   16. UTILITY CLASSES
========================================================== */

.w-100{

    width:100%;

}

.max-600{

    max-width:600px;

}

.max-760{

    max-width:760px;

}

.max-900{

    max-width:900px;

}

.max-1200{

    max-width:1200px;

}


/* ==========================================================
   TEXT UTILITIES
========================================================== */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-white{

    color:#ffffff;

}

.text-blue{

    color:var(--bm-blue);

}

.text-red{

    color:var(--bm-red);

}

.text-muted{

    color:var(--text-light);

}


/* ==========================================================
   DISPLAY UTILITIES
========================================================== */

.hidden{

    display:none !important;

}

.visible{

    display:block !important;

}

.overflow-hidden{

    overflow:hidden;

}

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}


/* ==========================================================
   SPACING UTILITIES
========================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

.pt-0{padding-top:0;}
.pb-0{padding-bottom:0;}


/* ==========================================================
   17. EFFECTS
========================================================== */

a,
button,
.card,
.panel,
.feature-card,
.primary-button,
.secondary-button{

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        opacity var(--transition);

}

.hover-lift{

    transition:transform .28s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:transform .28s ease;

}

.hover-scale:hover{

    transform:scale(1.03);

}

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:transform .5s ease;

}

.image-hover:hover img{

    transform:scale(1.06);

}

.fade{

    opacity:.82;

    transition:opacity .3s ease;

}

.fade:hover{

    opacity:1;

}


/* ==========================================================
   SHADOW UTILITIES
========================================================== */

.shadow-none{

    box-shadow:none;

}

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

.shadow-xl{

    box-shadow:var(--shadow-xl);

}


/* ==========================================================
   18. RESPONSIVE — LARGE TABLETS
========================================================== */

@media(max-width:1100px){

    .feature-card{

        grid-template-columns:1fr;

    }

    .feature-content{

        padding:45px;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

}


/* ==========================================================
   RESPONSIVE — TABLETS
========================================================== */

@media(max-width:992px){

    .hero-content{

        max-width:760px;

    }

    .stats-grid{

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

    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media(max-width:768px){

    section{

        padding:90px 0;

    }

    .container,
    .container-wide,
    .container-narrow{

        width:94%;

    }

    .container-fluid{

        padding-inline:20px;

    }


    /* ------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------ */

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2.2rem;

    }

    h3{

        font-size:1.5rem;

    }


    /* ------------------------------------------------------
       NAVIGATION
    ------------------------------------------------------ */

    .navbar{

        min-height:82px;

    }

    .logo img{

        height:52px;

    }

    .nav-links{

        gap:18px;

    }

    .nav-links a{

        font-size:.72rem;

        letter-spacing:.08em;

    }

    .nav-cta a{

        padding:9px 16px;

    }


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

    .hero{

        min-height:90vh;

    }

    .hero-content{

        max-width:100%;

        margin-inline:auto;

        padding-top:180px;

        padding-bottom:70px;

        text-align:center;

    }

    .hero-kicker{

        margin-bottom:20px;

        font-size:.76rem;

        letter-spacing:.20em;

    }

    .hero h1{

        max-width:100%;

        font-size:3.2rem;

        line-height:1.08;

        letter-spacing:-.025em;

        text-align:center;

    }

    .hero-divider{

        margin:30px auto;

    }

    .hero-copy{

        max-width:600px;

        margin-inline:auto;

        font-size:1rem;

        line-height:1.75;

        text-align:center;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        justify-content:center;

    }

    .hero-buttons .primary-button,
    .hero-buttons .secondary-button{

        width:100%;

        max-width:320px;

    }


    /* ------------------------------------------------------
       PAGE HERO
    ------------------------------------------------------ */

    .page-hero{

        padding-top:150px;

        padding-bottom:90px;

    }

    .page-hero h1{

        font-size:3rem;

    }


    /* ------------------------------------------------------
       CARDS
    ------------------------------------------------------ */

    .card{

        padding:28px;

    }

    .feature-content{

        padding:35px;

    }


    /* ------------------------------------------------------
       TABLES
    ------------------------------------------------------ */

    table{

        display:block;

        overflow-x:auto;

    }


    /* ------------------------------------------------------
       STATS
    ------------------------------------------------------ */

    .stats-grid{

        grid-template-columns:1fr;

    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .footer-brand{

        margin-inline:auto;

    }

    .footer-brand img{

        margin:0 auto 24px;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom-content{

        flex-direction:column;

        gap:14px;

        text-align:center;

    }

    .footer-legal{

        justify-content:center;

        flex-wrap:wrap;

    }

}


/* ==========================================================
   RESPONSIVE — SMALL MOBILE
========================================================== */

@media(max-width:480px){

    .container,
    .container-wide,
    .container-narrow{

        width:92%;

    }

    .nav-links{

        gap:12px;

    }

    .nav-links a{

        font-size:.65rem;

    }

    .nav-cta{

        display:none;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .stats-grid{

        gap:20px;

    }

}


/* ==========================================================
   19. ACCESSIBILITY
========================================================== */

:focus-visible{

    outline:3px solid var(--bm-red);

    outline-offset:3px;

}

::selection{

    background:var(--bm-red);

    color:#ffffff;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   20. PRINT
========================================================== */

@media print{

    .site-header,
    .site-footer,
    .hero-buttons,
    .primary-button,
    .secondary-button{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

}


/* ==========================================================
   END OF BASE.CSS
========================================================== */