/* =========================================================
   G&B D'ALEXA
   STYLE.CSS
   ========================================================= */

:root{

    --navy:#0b1f4d;
    --navy-deep:#071433;

    --red:#d2242d;
    --gold:#f2a93b;

    --sand:#f8f5ee;
    --white:#ffffff;

    --ink:#12203f;

    --line:rgba(11,31,77,.14);

    --max:1180px;

    --shadow-soft:0 18px 50px rgba(7,20,51,.12);
    --shadow-card:0 16px 40px rgba(7,20,51,.10);

}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

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

    color:var(--ink);

    background:var(--sand);

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

}


img{
    max-width:100%;
    display:block;
}


a{
    color:inherit;
}


h1,
h2,
h3{

    font-family:'Fraunces',serif;

    margin:0;

    line-height:1.05;

}


.wrap{

    max-width:var(--max);

    margin:auto;

    padding:0 24px;

}


section{
    position:relative;
}


/* =========================================================
   BOTONES
   ========================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.55em;

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

    font-weight:700;

    font-size:.95rem;

    padding:.9em 1.5em;

    border-radius:100px;

    text-decoration:none;

    border:2px solid transparent;

    transition:.2s ease;

    white-space:nowrap;

}


.btn:hover{

    transform:translateY(-2px);

}


.btn-primary{

    background:#25D366;

    color:#fff;

    box-shadow:0 8px 20px -6px rgba(37,211,102,.55);

}


.btn-primary:hover{

    box-shadow:0 12px 24px -6px rgba(37,211,102,.65);

}


.btn-ghost{

    background:transparent;

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

    color:#fff;

}


.btn-ghost:hover{

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

}


.btn-dark{

    background:var(--navy);

    color:#fff;

}


/* =========================================================
   HEADER
   ========================================================= */

header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:50;

    background:rgba(7,20,51,.72);

    backdrop-filter:blur(10px);

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

    transition:.25s ease;

}


header.scrolled{

    background:rgba(7,20,51,.95);

    box-shadow:0 10px 30px rgba(0,0,0,.14);

}


.nav{

    max-width:var(--max);

    margin:auto;

    padding:12px 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.brand{

    display:flex;

    align-items:center;

    gap:.6em;

    text-decoration:none;

}


.brand img{

    height:44px;

    width:auto;

    border-radius:8px;

}


.brand-text{

    font-family:'Fraunces',serif;

    color:#fff;

    font-weight:700;

    font-size:1.05rem;

    line-height:1.15;

}


.brand-text small{

    display:block;

    font-family:'IBM Plex Mono',monospace;

    font-size:.6rem;

    letter-spacing:.1em;

    color:var(--gold);

    text-transform:uppercase;

}


.navlinks{

    display:flex;

    align-items:center;

    gap:28px;

    list-style:none;

    margin:0;

    padding:0;

}


.navlinks a{

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

    text-decoration:none;

    font-size:.88rem;

    font-weight:600;

    transition:.15s ease;

}


.navlinks a:hover{

    color:#fff;

}


.nav-cta{

    display:flex;

    align-items:center;

    gap:14px;

}


.burger{

    display:none;

    background:none;

    border:0;

    color:#fff;

    font-size:1.5rem;

    cursor:pointer;

}


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

.hero{

    min-height:100svh;

    display:flex;

    align-items:flex-end;

    background:

    linear-gradient(
        180deg,
        rgba(7,20,51,.55),
        rgba(7,20,51,.55) 40%,
        rgba(7,20,51,.92)
    ),

    url('../images/hero-bg.jpg')

    center center / cover no-repeat;

    padding:150px 0 70px;

}


.hero-inner{

    max-width:var(--max);

    margin:auto;

    padding:0 24px;

    width:100%;

}


.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:.6em;

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

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

    color:#fff;

    padding:.5em 1em;

    border-radius:100px;

    font-family:'IBM Plex Mono',monospace;

    font-size:.72rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:24px;

    backdrop-filter:blur(8px);

}


.hero-badge .dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--gold);

    animation:pulse 1.8s infinite;

}


@keyframes pulse{

    0%,100%{opacity:1}

    50%{opacity:.3}

}


.hero h1{

    color:#fff;

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

    font-weight:700;

    max-width:15ch;

}


.hero h1 em{

    font-style:normal;

    color:var(--gold);

}


.hero p{

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

    font-size:clamp(1rem,1.6vw,1.2rem);

    max-width:46ch;

    margin:22px 0 34px;

    line-height:1.6;

}


.hero-ctas{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:44px;

}


.hero-ctas .btn-primary{

    min-width:210px;

}


.hero-stats{

    display:grid;

    grid-template-columns:repeat(4,auto);

    gap:0;

    max-width:780px;

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

    padding-top:26px;

}


.hero-stats div{

    padding:0 28px;

    border-right:1px solid rgba(255,255,255,.14);

}


.hero-stats div:first-child{

    padding-left:0;

}


.hero-stats div:last-child{

    border-right:0;

}


.hero-stats span{

    display:block;

    font-family:'Fraunces',serif;

    font-size:1.7rem;

    color:#fff;

    font-weight:700;

}


.hero-stats small{

    font-family:'IBM Plex Mono',monospace;

    font-size:.66rem;

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

    text-transform:uppercase;

}


/* =========================================================
   RUTAS
   ========================================================= */

.route{

    background:var(--navy-deep);

    padding:56px 0 64px;

    overflow:hidden;

}


.route-track{

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

    max-width:var(--max);

    margin:auto;

    padding:18px 24px 0;

}


.route-track::before{

    content:"";

    position:absolute;

    left:24px;
    right:24px;

    top:27px;

    height:2px;

    background:

    repeating-linear-gradient(
        90deg,
        rgba(242,169,59,.6) 0 10px,
        transparent 10px 20px
    );

}


.stop{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    flex:1;

}


.stop .node{

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--navy-deep);

    border:2px solid var(--gold);

    display:flex;

    align-items:center;

    justify-content:center;

}


.stop.active .node{

    background:var(--gold);

}


.stop .node i{

    width:6px;

    height:6px;

    background:var(--navy-deep);

    border-radius:50%;

}


.stop.active .node i{

    display:none;

}


.stop span{

    font-family:'IBM Plex Mono',monospace;

    font-size:.68rem;

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

    text-transform:uppercase;

    text-align:center;

}


/* =========================================================
   TITULOS
   ========================================================= */

.eyebrow{

    font-family:'IBM Plex Mono',monospace;

    font-size:.72rem;

    letter-spacing:.16em;

    text-transform:uppercase;

    font-weight:600;

    color:var(--red);

    display:flex;

    align-items:center;

    gap:.5em;

}


.eyebrow::before{

    content:"";

    width:22px;

    height:2px;

    background:var(--red);

}


.sec-head{

    max-width:640px;

    margin-bottom:52px;

}


.sec-head h2{

    font-size:clamp(1.8rem,3.4vw,2.6rem);

    font-weight:600;

    margin-top:14px;

    color:var(--navy);

}


.sec-head p{

    margin-top:16px;

    font-size:1.02rem;

    line-height:1.7;

    color:#44507a;

}


/* =========================================================
   NOSOTROS
   ========================================================= */

.about{

    padding:110px 0 90px;

    background:#f8f5ee;

}


.about-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:64px;

    align-items:center;

}


.about-copy h2{

    font-size:clamp(1.8rem,3.4vw,2.6rem);

    font-weight:600;

    color:var(--navy);

    margin-top:14px;

}


.about-copy p{

    font-size:1.02rem;

    line-height:1.75;

    color:#33406b;

    margin:20px 0;

}


.quote{

    border-left:3px solid var(--red);

    padding-left:20px;

    margin:26px 0;

    font-family:'Fraunces',serif;

    font-style:italic;

    font-size:1.15rem;

    color:var(--navy);

}


.about-media{

    position:relative;

}


.about-media img{

    border-radius:16px;

    box-shadow:0 30px 60px -20px rgba(11,31,77,.35);

    transition:.5s ease;

}


.about-media:hover img{

    transform:translateY(-4px);

}


.about-media .tag{

    position:absolute;

    bottom:-22px;

    left:-22px;

    background:#fff;

    border-radius:14px;

    padding:16px 20px;

    box-shadow:0 20px 40px -16px rgba(11,31,77,.3);

    display:flex;

    align-items:center;

    gap:12px;

    max-width:230px;

}


.tag .num{

    font-family:'Fraunces',serif;

    font-size:1.8rem;

    font-weight:700;

    color:var(--red);

}


.tag .txt{

    font-size:.76rem;

    color:#5a648c;

    line-height:1.3;

}


.values{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:34px;

}


.chip{

    font-family:'IBM Plex Mono',monospace;

    font-size:.74rem;

    background:var(--sand);

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

    color:var(--navy);

    padding:.6em 1em;

    border-radius:100px;

    font-weight:600;

}


/* =========================================================
   SERVICIOS
   ========================================================= */

.services{

    background:#fff;

    padding:100px 0;

}


.svc-grid{

    display:grid;

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

    gap:1px;

    background:var(--line);

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

    border-radius:22px;

    overflow:hidden;

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

}


/* =========================================================
   ICONOS GRANDES
   ========================================================= */

.svc{

    background:#fff;

    padding:34px 24px 38px;

    min-height:280px;

    position:relative;

    transition:.25s ease;

}


.svc:hover{

    background:var(--sand);

    transform:translateY(-4px);

}


.svc .ic{

    width:76px;

    height:76px;

    border-radius:20px;

    background:var(--navy);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    font-size:2.35rem;

    line-height:1;

    box-shadow:0 12px 25px rgba(11,31,77,.22);

    transition:.25s ease;

}


.svc:hover .ic{

    transform:scale(1.08) rotate(-3deg);

    background:var(--red);

}


.svc h3{

    font-size:1.08rem;

    font-weight:600;

    color:var(--navy);

    margin-bottom:10px;

}


.svc p{

    font-size:.85rem;

    color:#5a648c;

    line-height:1.55;

    margin:0;

}


/* =========================================================
   CARACTERISTICAS
   ========================================================= */

.feature-strip{

    margin-top:64px;

    display:grid;

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

    gap:34px;

}


.feature-strip > div{

    display:flex;

    gap:16px;

    align-items:flex-start;

}


.feature-strip .ic{

    flex:0 0 auto;

    width:58px;

    height:58px;

    border-radius:16px;

    background:rgba(210,36,45,.1);

    color:var(--red);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.75rem;

    box-shadow:0 8px 18px rgba(210,36,45,.1);

    transition:.25s ease;

}


.feature-strip > div:hover .ic{

    transform:scale(1.1);

    background:var(--red);

    color:#fff;

}


.feature-strip h4{

    font-size:.92rem;

    font-weight:700;

    color:var(--navy);

    margin:0 0 4px;

}


.feature-strip p{

    font-size:.8rem;

    color:#5a648c;

    margin:0;

    line-height:1.5;

}


/* =========================================================
   FLOTA
   ========================================================= */

.fleet{

    padding:110px 0 90px;

    background:

    radial-gradient(
        circle at 10% 10%,
        rgba(242,169,59,.10),
        transparent 24%
    ),

    #f8f5ee;

}


.fleet-cover{

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 30px 60px -24px rgba(11,31,77,.35);

    margin-bottom:26px;

}


.fleet-cover img{

    width:100%;

}


.fleet-grid{

    display:grid;

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

    gap:22px;

}


.fleet-card{

    border-radius:16px;

    overflow:hidden;

    position:relative;

    box-shadow:0 20px 40px -20px rgba(11,31,77,.3);

    background:#071433;

}


.fleet-card img{

    height:280px;

    width:100%;

    object-fit:cover;

    transition:.5s ease;

}


.fleet-card:hover img{

    transform:scale(1.06);

}


.fleet-card .cap{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    background:linear-gradient(
        0deg,
        rgba(7,20,51,.92),
        transparent
    );

    padding:24px 20px 20px;

    color:#fff;

}


.fleet-card .cap span{

    font-family:'IBM Plex Mono',monospace;

    font-size:.66rem;

    color:var(--gold);

    text-transform:uppercase;

}


.fleet-card .cap h4{

    font-family:'Fraunces',serif;

    font-size:1.25rem;

    margin:.2em 0 0;

}


/* =========================================================
   STORY
   ========================================================= */

.story{

    background:

    radial-gradient(
        circle at 90% 10%,
        rgba(242,169,59,.16),
        transparent 28%
    ),

    var(--navy);

    padding:100px 0;

    color:#fff;

}


.story-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:60px;

    align-items:center;

}


.story-media img{

    border-radius:18px;

    box-shadow:0 30px 70px -20px rgba(0,0,0,.5);

}


.story .eyebrow{

    color:var(--gold);

}


.story .eyebrow::before{

    background:var(--gold);

}


.story h2{

    color:#fff;

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

    font-weight:600;

    margin-top:14px;

}


.story p{

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

    line-height:1.75;

    margin-top:18px;

}


/* =========================================================
   COBERTURA
   ========================================================= */

.coverage{

    background:#f8f5ee;

    padding:90px 0;

}


.cov-grid{

    display:grid;

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

    gap:20px;

}


.cov-card{

    background:#fff;

    border-radius:16px;

    padding:28px;

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

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

    position:relative;

    overflow:hidden;

    transition:.2s ease;

}


.cov-card:hover{

    transform:translateY(-5px);

}


.cov-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:var(--gold);

}


.cov-card .flag{

    font-size:2.4rem;

    display:block;

    margin-bottom:14px;

}


.cov-card h4{

    font-family:'Fraunces',serif;

    font-size:1.15rem;

    color:var(--navy);

    margin:0 0 8px;

}


.cov-card p{

    font-size:.86rem;

    color:#5a648c;

    line-height:1.55;

    margin:0;

}


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

.cta{

    position:relative;

    background:

    radial-gradient(
        circle at 10% 20%,
        rgba(255,255,255,.12),
        transparent 28%
    ),

    radial-gradient(
        circle at 90% 80%,
        rgba(7,20,51,.18),
        transparent 35%
    ),

    var(--red);

    padding:90px 0;

    overflow:hidden;

}


.cta-inner{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:680px;

    margin:auto;

}


.cta-eyebrow{

    color:#fff;

    justify-content:center;

}


.cta h2{

    color:#fff;

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

}


.cta p{

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

    margin:18px 0 34px;

    font-size:1.05rem;

}


.cta-btns{

    display:flex;

    gap:16px;

    justify-content:center;

    flex-wrap:wrap;

}


/* =========================================================
   CONTACTO
   ========================================================= */

.contact-grid{

    max-width:var(--max);

    margin:60px auto 0;

    padding:0 24px;

    display:grid;

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

    gap:22px;

}


.contact-card{

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

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

    border-radius:16px;

    padding:26px;

    color:#fff;

    backdrop-filter:blur(4px);

    transition:.2s ease;

}


.contact-card:hover{

    transform:translateY(-4px);

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

}


/* ICONOS DE CONTACTO GRANDES */

.contact-icon{

    width:58px;

    height:58px;

    border-radius:16px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.9rem;

    margin-bottom:18px;

}


.contact-card h4{

    font-size:.78rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-family:'IBM Plex Mono',monospace;

    opacity:.75;

    margin:0 0 8px;

}


.contact-card a,
.contact-card .val{

    font-family:'Fraunces',serif;

    font-size:1.15rem;

    font-weight:600;

    text-decoration:none;

    color:#fff;

}


.social-card{

    display:flex;

    flex-direction:column;

}


.social-row{

    display:flex;

    gap:10px;

    margin-top:6px;

}


.social-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:var(--navy)!important;

    border-radius:10px;

    padding:.7em .9em;

    font-weight:700;

    font-size:.82rem;

    text-decoration:none;

    flex:1;

}


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

footer{

    background:var(--navy-deep);

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

    padding:50px 0 30px;

}


.foot-grid{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:24px;

}


.foot-brand{

    display:flex;

    align-items:center;

    gap:12px;

}


.foot-brand img{
    height:70px;
    width:auto;
    border-radius:10px;
}

@media (max-width:600px){

    .foot-brand img{
        height:58px;
    }

}


.foot-brand span{

    font-family:'Fraunces',serif;

    color:#fff;

    font-weight:600;

}


.foot-social{

    display:flex;

    gap:12px;

}


.foot-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:var(--navy);

    font-weight:800;

}


.foot-bottom{

    margin-top:34px;

    padding-top:24px;

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

    font-size:.78rem;

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

}


/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */

.float-wa{

    position:fixed;

    bottom:22px;

    right:22px;

    z-index:60;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border:3px solid rgba(255,255,255,.9);

    box-shadow:0 10px 26px rgba(37,211,102,.6);

    animation:waPulse 2.4s infinite;

}


.float-wa span{

    color:#fff;

    font-size:2rem;

}


@keyframes waPulse{

    0%,100%{

        box-shadow:
        0 10px 26px rgba(37,211,102,.6),
        0 0 0 0 rgba(37,211,102,.32);

    }

    50%{

        box-shadow:
        0 10px 30px rgba(37,211,102,.7),
        0 0 0 12px rgba(37,211,102,0);

    }

}


/* =========================================================
   ANIMACIONES
   ========================================================= */

.reveal{

    opacity:0;

    transform:translateY(24px);

    transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.in{

    opacity:1;

    transform:none;

}


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

.mobile-wa{

    display:none;

}


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

@media(max-width:960px){

    .svc-grid{

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

    }

}


@media(max-width:900px){

    .navlinks{

        position:fixed;

        top:70px;

        left:0;
        right:0;

        background:var(--navy-deep);

        flex-direction:column;

        align-items:flex-start;

        padding:24px;

        gap:18px;

        transform:translateY(-130%);

        transition:.3s ease;

    }


    .navlinks.open{

        transform:translateY(0);

    }


    .burger{

        display:block;

    }


    .nav-cta .btn-ghost{

        display:none;

    }


    .about-grid{

        grid-template-columns:1fr;

    }


    .about-media{

        order:-1;

    }


    .story-grid{

        grid-template-columns:1fr;

    }


    .story-media{

        order:-1;

    }


    .contact-grid{

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

    }

}


@media(max-width:860px){

    .fleet-grid{

        grid-template-columns:1fr;

    }


    .feature-strip{

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

    }


    .cov-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:700px){

    .nav{

        padding:10px 18px;

    }


    .brand img{

        height:40px;

    }


    .brand-text{

        font-size:.95rem;

    }


    .hero{

        min-height:760px;

        padding:125px 0 45px;

    }


    .hero h1{

        font-size:clamp(2.35rem,11vw,3.4rem);

    }


    .hero p{

        font-size:.98rem;

        margin:18px 0 26px;

    }


    .hero-ctas{

        gap:10px;

        margin-bottom:32px;

    }


    .hero-ctas .btn{

        width:100%;

    }


    .hero-stats{

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

    }


    .hero-stats div{

        padding:14px 12px!important;

        border-bottom:1px solid rgba(255,255,255,.14);

    }


    .hero-stats div:nth-child(2n){

        border-right:0;

    }


    .hero-stats div:nth-child(n+3){

        border-bottom:0;

    }


    .route{

        padding:48px 0 54px;

    }


    .route-track{

        flex-wrap:wrap;

        row-gap:28px;

    }


    .route-track::before{

        display:none;

    }


    .stop{

        flex:0 0 30%;

    }


    .about,
    .fleet{

        padding:78px 0 70px;

    }


    .services{

        padding:76px 0;

    }


    .story,
    .coverage{

        padding:76px 0;

    }


    .cta{

        padding:76px 0;

    }


    .sec-head{

        margin-bottom:34px;

    }


    .contact-grid{

        grid-template-columns:1fr;

        margin-top:40px;

    }


    .float-wa{

        width:58px;

        height:58px;

        bottom:18px;

        right:18px;

    }


    .mobile-wa{

        display:flex;

        position:fixed;

        left:14px;

        right:88px;

        bottom:18px;

        z-index:59;

        min-height:54px;

        align-items:center;

        justify-content:center;

        gap:9px;

        border-radius:999px;

        background:#25D366;

        color:#fff;

        text-decoration:none;

        font-weight:800;

        box-shadow:0 10px 28px rgba(0,0,0,.18);

    }

}


@media(max-width:560px){

    .svc-grid{

        grid-template-columns:1fr;

    }


    /* ICONOS AÚN MÁS GRANDES EN CELULAR */

    .svc .ic{

        width:82px;

        height:82px;

        font-size:2.6rem;

    }


    .svc{

        min-height:260px;

    }


    .feature-strip{

        grid-template-columns:1fr;

    }


    .feature-strip .ic{

        width:64px;

        height:64px;

        font-size:1.9rem;

    }

}


@media(max-width:420px){

    .nav-cta .btn-primary{

        display:none;

    }


    .brand-text small{

        font-size:.52rem;

    }


    .hero-badge{

        font-size:.62rem;

    }


    .hero-stats small{

        font-size:.58rem;

    }

}


::selection{

    background:var(--gold);

    color:var(--navy-deep);

}


:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:3px;

}


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

    *{

        animation:none!important;

        transition:none!important;

    }

}