/* ==========================================================
   SERVICE AREA
========================================================== */

.service-area-section{
    background:#f5f5f3;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:96px 0;
    font-family:Inter,Arial,sans-serif;
}

.service-area-section *{
    box-sizing:border-box;
}

.service-area-wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:460px 560px;
    column-gap:200px;
    align-items:center;
    justify-content:center;
}

/* ==========================================================
   LEFT COLUMN
========================================================== */

.service-area-content{
    width:100%;
    max-width:470px;
}

.service-area-section .label{
    margin:0;
    color:#ff8901;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
    font-weight:700;
}

.service-area-section h2{
    margin:10px 0 0;
    font-family:Poppins,Arial,sans-serif;
    font-size:35px;
    font-weight:700;
    line-height:1.06;
    letter-spacing:-0.03em;
    color:#000762;
    max-width:400px;
}

.service-area-section .desc{
    margin:22px 0 30px;
    color:#55597a;
    font-size:15px;
    line-height:1.6;
    max-width:440px;
    white-space:nowrap;
}

/* ==========================================================
   PILLS
========================================================== */

.pills{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    width:100%;
}

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#fff;
    border:1px solid #e6e6e0;
    border-radius:9999px;
    padding:10px 16px;
    cursor:pointer;
    color:#000762;
    font-size:14px;
    font-weight:600;
    transition:.25s;
    box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 8px 18px rgba(0,0,0,.06);
    white-space:nowrap;
}

.pill svg{
    width:14px;
    height:14px;
    color:#ff8901;
}

.pill:hover{
    border-color:#ff8901;
    color:#ff8901;
    transform:translateY(-2px);
}

.pill:hover svg{
    color:#ff8901;
}

.pill.active{
    background:#ff8901;
    border-color:#ff8901;
    color:#fff;
}

.pill.active svg{
    color:#fff;
}

/* ==========================================================
   MAP
========================================================== */

.map-column{
    width:100%;
}

.mapbox{
    position:relative;
    width:100%;
    aspect-ratio:1.22;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    border:none;
    box-shadow:
        0 18px 50px rgba(0,0,0,.08);
}

#serviceMap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
}

.tag{
    position:absolute;
    top:24px;
    right:24px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    border-radius:999px;
    padding:8px 12px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    color:#666;
    z-index:5;
}

.badge{
    position:absolute;
    left:24px;
    bottom:24px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);
    border-radius:14px;
    padding:11px 16px;
    font-size:14px;
    font-weight:600;
    color:#000762;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    z-index:5;
}

/* ==========================================================
   GOOGLE MAP
========================================================== */

.gm-style{
    border-radius:24px;
}

.gm-style img{
    max-width:none;
}

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

@media (max-width:1024px){

.service-area-wrap{
grid-template-columns:1fr;
gap:48px;
padding:0 24px;
max-width:640px;
column-gap:48px;
}

.service-area-content{
max-width:none;
}

.service-area-section h2{
font-size:52px;
max-width:100%;
}

.service-area-section .desc{
white-space:normal;
max-width:100%;
}

.pills{
grid-template-columns:repeat(4,1fr);
}

}

@media (max-width:768px){

.service-area-section{
padding:72px 0;
}

.service-area-section h2{
font-size:42px;
}

.service-area-section .desc{
font-size:17px;
}

.mapbox{
aspect-ratio:1/1;
}

.pills{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:600px){

.service-area-section{
padding:56px 0;
}

.service-area-wrap{
padding:0 16px;
gap:32px;
}

.service-area-section h2{
font-size:36px;
}

.pill{
width:100%;
justify-content:flex-start;
padding:10px 14px;
font-size:13px;
}

.pills{
grid-template-columns:1fr;
width:100%;
gap:10px;
}

.tag{
top:16px;
right:16px;
padding:6px 10px;
font-size:10px;
}

.badge{
left:16px;
bottom:16px;
padding:9px 12px;
font-size:13px;
}

}

/* ==========================================================
   ASTRA CONTENT CONTAINER OVERRIDE
========================================================== */

.entry-content[data-ast-blocks-layout] > .service-area-section{
    max-width:none !important;
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
}