/* ==========================================================
   EMERGENCY SUPPORT PAGE REDESIGN
   Scoped under .oxy-redesign (loaded alongside about-redesign.css)
========================================================== */

.legacy-emergency-page{display:none!important}

.oxy-redesign .oxy-hero--emergency{background:linear-gradient(160deg,rgba(43,36,34,.86),rgba(43,36,34,.72)),url('../images/backgrounds/Industrial Ventilation.jpeg') center/cover}

/* ---------- Hero badge with pulse dot ---------- */

.oxy-redesign .oxy-emergency-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 18px 9px 14px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#f0cfc8;
    font-size:12.5px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.oxy-pulse-dot{
    position:relative;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#4ade80;
    flex-shrink:0;
}

.oxy-pulse-dot:before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:#4ade80;
    opacity:.55;
    animation:oxyPulse 1.8s ease-out infinite;
}

@keyframes oxyPulse{
    0%{transform:scale(.5);opacity:.6}
    100%{transform:scale(2.1);opacity:0}
}

.oxy-redesign .oxy-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:8px;
}

/* ---------- Buttons ---------- */

.oxy-redesign .oxy-btn--emergency{
    background:#fff;
    color:var(--oxy-brand-dark);
}

.oxy-redesign .oxy-btn--emergency:hover{
    background:#f2e7e3;
    transform:translateY(-2px);
}

.oxy-redesign .oxy-btn--whatsapp{
    background:#25D366;
    color:#fff;
}

.oxy-redesign .oxy-btn--whatsapp:hover{
    background:#1ebe5b;
    transform:translateY(-2px);
}

.oxy-redesign .oxy-cta-modern .oxy-cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
}

.oxy-redesign .oxy-cta-modern .oxy-cta-actions .oxy-btn{
    margin-top:0;
}

.oxy-redesign .oxy-emergency-tag{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:1.3px;
    text-transform:uppercase;
    margin-bottom:14px;
}

/* ---------- Intro + stats strip ---------- */

.oxy-redesign .oxy-emergency-intro{
    max-width:820px;
    margin:0 auto 40px;
    text-align:center;
    color:var(--oxy-muted);
    font-size:15.5px;
    line-height:1.8;
}

.oxy-redesign .oxy-emergency-stats{
    max-width:1000px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid var(--oxy-line);
    border-radius:12px;
    overflow:hidden;
    background:var(--oxy-paper);
}

.oxy-redesign .oxy-emergency-stats>div{
    padding:24px 20px;
    text-align:center;
    border-right:1px solid var(--oxy-line);
    transition:background .3s ease;
}

.oxy-redesign .oxy-emergency-stats>div:last-child{
    border-right:0;
}

.oxy-redesign .oxy-emergency-stats>div:hover{
    background:var(--oxy-wash);
}

.oxy-redesign .oxy-emergency-stats span{
    display:block;
    color:var(--oxy-brand);
    font-size:11.5px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.oxy-redesign .oxy-emergency-stats strong{
    display:block;
    color:var(--oxy-ink);
    font-size:15.5px;
}

/* ---------- Responsive ---------- */

@media(max-width:767px){
    .oxy-redesign .oxy-emergency-stats{
        grid-template-columns:1fr 1fr;
    }
    .oxy-redesign .oxy-emergency-stats>div{
        border-right:1px solid var(--oxy-line);
        border-bottom:1px solid var(--oxy-line);
    }
    .oxy-redesign .oxy-emergency-stats>div:nth-child(2n){
        border-right:0;
    }
    .oxy-redesign .oxy-hero-actions{
        flex-direction:column;
    }
    .oxy-redesign .oxy-hero-actions .oxy-btn{
        width:100%;
    }
}