/* Contact showcase section (home) */
.contact-showcase{
    padding:26px 0 84px;
    background:radial-gradient(circle at top right,#dff6fb 0%,#f7fbff 45%,#edf3fb 100%);
}

.contact-switcher{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.contact-switcher-btn{
    border:none;
    border-radius:999px;
    background:#ffffff;
    color:#0f172a;
    padding:14px 22px;
    font-size:15px;
    font-weight:800;
    box-shadow:0 12px 28px rgba(15,23,42,.08);
    transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.contact-switcher-btn:hover,
.contact-switcher-btn:focus{
    background:#e6f8fc;
    color:#0891b2;
}

.contact-switcher-btn.active{
    background:linear-gradient(135deg,#0f172a 0%,#0c4a6e 52%,#0891b2 100%);
    color:#ffffff;
    box-shadow:0 16px 32px rgba(8,145,178,.24);
}

.contact-shell{
    background:#ffffff;
    border-radius:28px;
    padding:20px;
    box-shadow:0 20px 45px rgba(15,23,42,.10);
}

.contact-placeholder{
    min-height:420px;
    border-radius:24px;
    background:linear-gradient(135deg,#0f172a 0%,#0c4a6e 52%,#0891b2 100%);
    color:#ffffff;
    padding:36px 28px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
}

.contact-placeholder-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.14);
    font-size:26px;
    margin-bottom:18px;
}

.contact-placeholder h2{
    font-size:clamp(30px,4vw,42px);
    line-height:1.1;
    font-weight:800;
    margin-bottom:14px;
    color:#ffffff;
}

.contact-placeholder p{
    max-width:620px;
    font-size:17px;
    line-height:1.8;
    color:rgba(255,255,255,.88);
    margin-bottom:0;
}

.contact-hero{
    background:linear-gradient(135deg,#0f172a 0%,#0c4a6e 52%,#0891b2 100%);
    border-radius:24px;
    padding:28px;
    color:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.contact-kicker{
    display:inline-block;
    width:max-content;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    margin-bottom:18px;
}

.contact-hero h2{
    font-size:clamp(30px,4vw,44px);
    line-height:1.1;
    font-weight:800;
    margin-bottom:12px;
    color:#ffffff;
}

.contact-hero p{
    color:rgba(255,255,255,.9);
    font-size:clamp(16px,1.4vw,19px);
    max-width:520px;
}

.contact-cta-row{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.contact-cta-row .btn-outline-light{
    border:2px solid rgba(255,255,255,.65);
    color:#ffffff;
}

.contact-cta-row .btn-outline-light:hover{
    background:rgba(255,255,255,.14);
    color:#ffffff;
}

.contact-grid{
    display:grid;
    gap:12px;
    grid-template-columns:1fr 1fr;
}

.contact-tile{
    background:#f8fbff;
    border:1px solid #d8e9f7;
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.contact-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#00bcd4;
    color:#ffffff;
    font-size:18px;
    margin-bottom:12px;
}

.contact-tile h3{
    font-size:20px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:8px;
}

.contact-tile p,
.contact-tile a{
    color:#334155;
    text-decoration:none;
    margin-bottom:0;
}

.contact-tile a:hover{
    color:#0284c7;
}

@media(max-width:991px){
    .contact-showcase{
        padding:20px 0 72px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-hero h2{
        font-size:32px;
    }
}

@media(max-width:768px){
    .contact-showcase{
        padding:16px 0 62px;
    }

    .contact-switcher{
        gap:10px;
        margin-bottom:18px;
    }

    .contact-switcher-btn{
        width:100%;
        text-align:center;
    }

    .contact-shell{
        padding:14px;
        border-radius:20px;
    }

    .contact-placeholder{
        min-height:320px;
        padding:24px 20px;
    }

    .contact-hero{
        padding:20px;
    }

    .contact-hero h2{
        font-size:28px;
    }

    .contact-hero p{
        font-size:16px;
    }

    .contact-cta-row .btn{
        width:100%;
    }
}