.area-detail-hero{
    position:relative;
    padding:140px 0 70px;
    overflow:hidden;
    background:#07162d;
}

.area-detail-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.area-detail-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.area-detail-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(90deg, rgba(4,12,25,.9), rgba(4,12,25,.68), rgba(4,12,25,.42));
}

.area-detail-hero-container{
    position:relative;
    z-index:3;
    max-width:1180px;
}

.area-breadcrumb{
    display:flex;
    align-items:center;
    gap:.7rem;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
    color:rgba(255,255,255,.7);
    font-size:.9rem;
}

.area-breadcrumb a{
    color:rgba(255,255,255,.78);
}

.area-breadcrumb strong{
    color:#fff;
}

.area-eyebrow{
    display:inline-block;
    margin-bottom:1rem;
    color:var(--color-accent);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.area-detail-hero h1{
    font-size:clamp(2.4rem,5vw,4rem);
    line-height:1.08;
    color:#fff;
    margin-bottom:1.2rem;
    max-width:720px;
}

.area-detail-hero p{
    color:rgba(255,255,255,.82);
    font-size:1.08rem;
    line-height:1.8;
    max-width:640px;
}

.area-detail-section{
    padding:80px 0;
    background:#f8fafc;
}

.area-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) 360px;
    gap:3rem;
    align-items:start;
}

.area-main{
    display:grid;
    gap:2rem;
}

.area-content-card,
.area-services-card,
.area-process-card,
.area-faq-card,
.nearby-areas-card,
.sidebar-card,
.sidebar-cta-card{
    background:#fff;
    border-radius:26px;
    padding:2.4rem;
    box-shadow:0 20px 55px rgba(15,23,42,.08);
    border:1px solid rgba(15,23,42,.06);
}

.area-main-image{
    width:100%;
    max-height:420px;
    object-fit:cover;
    border-radius:20px;
    margin-bottom:2rem;
}

.content-formatted{
    line-height:1.85;
    font-size:1.08rem;
    color:#334155;
}

.content-formatted h2,
.content-formatted h3{
    color:#0f172a;
    margin-top:2rem;
    margin-bottom:1rem;
}

.content-formatted p{
    margin-bottom:1.4rem;
}

.content-formatted ul{
    margin-left:1.5rem;
    margin-bottom:1.5rem;
}

.content-formatted li{
    margin-bottom:.6rem;
}

.section-mini-header{
    margin-bottom:2rem;
}

.section-mini-header span{
    color:var(--color-accent);
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.8rem;
}

.section-mini-header h2{
    margin-top:.5rem;
    font-size:2rem;
    color:#0f172a;
}

.area-service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}

.area-service-grid div{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:1rem;
    border-radius:18px;
    background:#f8fafc;
    color:#334155;
    font-weight:700;
}

.area-service-grid i{
    color:var(--color-accent);
    font-size:1.25rem;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.2rem;
}

.process-item{
    padding:1.5rem;
    border-radius:20px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.06);
}

.process-item strong{
    display:inline-block;
    color:var(--color-accent);
    font-size:1.35rem;
    margin-bottom:.8rem;
}

.process-item h3{
    margin-bottom:.5rem;
    color:#0f172a;
}

.process-item p{
    color:#64748b;
    line-height:1.7;
}

.area-sidebar{
    position:sticky;
    top:110px;
    display:grid;
    gap:1.5rem;
}

.sidebar-card h3,
.sidebar-cta-card h3{
    margin-bottom:1.4rem;
    color:#0f172a;
}

.sidebar-area-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:.75rem;
}

.sidebar-area-list a{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:1rem;
    border-radius:16px;
    background:#f8fafc;
    color:#334155;
    font-weight:700;
    transition:.25s ease;
}

.sidebar-area-list a:hover{
    background:var(--color-primary);
    color:#fff;
}

.all-areas-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin-top:1.3rem;
    color:var(--color-primary);
    font-weight:800;
}

.sidebar-cta-card{
    background:var(--gradient-primary);
    color:#fff;
}

.sidebar-cta-card h3{
    color:#fff;
}

.sidebar-cta-card p{
    color:rgba(255,255,255,.85);
    line-height:1.7;
    margin-bottom:1.5rem;
}

.sidebar-phone-btn{
    width:100%;
    justify-content:center;
    background:#fff;
    color:var(--color-primary);
    margin-bottom:1rem;
}

.sidebar-form-btn{
    width:100%;
    justify-content:center;
    background:rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
}

@media(max-width:1100px){
    .area-detail-layout{
        grid-template-columns:1fr;
    }

    .area-sidebar{
        position:static;
    }
}

@media(max-width:768px){
    .area-detail-hero{
        padding:120px 0 55px;
    }

    .area-detail-section{
        padding:60px 0;
    }

    .area-content-card,
.area-services-card,
.area-process-card,
.area-faq-card,
.nearby-areas-card,
.sidebar-card,
.sidebar-cta-card{
        padding:1.5rem;
        border-radius:22px;
    }

    .area-service-grid,
    .process-grid{
        grid-template-columns:1fr;
    }

    .section-mini-header h2{
        font-size:1.6rem;
    }
}
/* FAQ */

.faq-list{
    display:grid;
    gap:1rem;
}

.faq-list details{
    background:#f8fafc;
    border-radius:18px;
    padding:1.1rem 1.3rem;
    border:1px solid rgba(15,23,42,.06);
}

.faq-list summary{
    cursor:pointer;
    font-weight:800;
    color:#0f172a;
}

.faq-list p{
    margin-top:1rem;
    color:#64748b;
    line-height:1.7;
}

/* NEARBY AREAS */

.nearby-areas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
}

.nearby-area-item{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:1rem 1.2rem;
    border-radius:18px;
    background:#f8fafc;
    color:#334155;
    font-weight:700;
    transition:.25s ease;
}

.nearby-area-item:hover{
    background:var(--color-primary);
    color:#fff;
    transform:translateY(-2px);
}

@media(max-width:768px){

    .nearby-areas-grid{
        grid-template-columns:1fr;
    }

}

.area-detail-hero{
    position:relative;
    min-height:430px;
    padding:125px 0 70px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#071731;
}

.area-detail-hero-bg{
    position:absolute;
    inset:0;
}

.area-detail-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.area-detail-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(7,23,49,.95) 0%,
        rgba(7,23,49,.82) 45%,
        rgba(7,23,49,.42) 100%
    ),
    linear-gradient(
        180deg,
        rgba(7,23,49,.28) 0%,
        rgba(7,23,49,.82) 100%
    );
}

.area-detail-hero-container{
    position:relative;
    z-index:2;
}

.area-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:28px;
    color:rgba(255,255,255,.72);
    font-size:.92rem;
}

.area-breadcrumb a{
    color:rgba(255,255,255,.84);
}

.area-breadcrumb a:hover{
    color:var(--color-accent);
}

.area-breadcrumb strong{
    color:#fff;
}

.area-eyebrow{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding:9px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
    backdrop-filter:blur(12px);
}

.area-detail-hero h1{
    color:#fff;
    font-size:clamp(3rem,5vw,5rem);
    line-height:.95;
    letter-spacing:-.05em;
    margin-bottom:22px;
    max-width:820px;
}
.area-detail-hero h1 strong {
    color: var(--color-accent);
}

.area-detail-hero p{
    max-width:700px;
    color:rgba(255,255,255,.84);
    font-size:1.05rem;
    line-height:1.8;
}

.area-detail-section{
    padding:90px 0;
    background:linear-gradient(180deg,#F8FAFC 0%,#fff 100%);
}

.area-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:34px;
    align-items:start;
}

.area-main{
    display:grid;
    gap:28px;
}

.area-content-card,
.area-services-card,
.area-process-card,
.area-faq-card,
.nearby-areas-card,
.sidebar-card,
.sidebar-cta-card{
    background:#fff;
    border-radius:30px;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 20px 55px rgba(11,43,94,.08);
    transition: .3s ease;
}
.area-content-card:hover,
.area-services-card:hover,
.area-process-card:hover,
.area-faq-card:hover,
.nearby-areas-card:hover{
    box-shadow:0 28px 70px rgba(11,43,94,.12);
}

.area-content-card{
    overflow:hidden;
}

.area-main-image{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
}

.content-formatted{
    padding:42px;
    line-height:1.9;
    font-size:1.05rem;
    color:var(--color-text-main);
}

.content-formatted h2,
.content-formatted h3{
    margin-top:2.5rem;
    margin-bottom:1rem;
    color:var(--color-primary);
}

.content-formatted p{
    margin-bottom:1.5rem;
}

.content-formatted ul,
.content-formatted ol{
    margin-left:1.5rem;
    margin-bottom:1.5rem;
}

.content-formatted li{
    margin-bottom:.7rem;
}

.content-formatted img{
    max-width:100%;
    height:auto;
    border-radius:24px;
    margin:2rem 0;
}

.section-mini-header{
    margin-bottom:28px;
}

.section-mini-header span{
    display:inline-block;
    margin-bottom:12px;
    color:var(--color-accent);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-mini-header h2{
    font-size:2rem;
    line-height:1.2;
}

.area-services-card,
.area-process-card,
.area-faq-card,
.nearby-areas-card{
    padding:36px;
}

.area-service-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.area-service-item-link:hover {
    transform:translateY(-3px);
    background:#fff !important;
    box-shadow:0 18px 40px rgba(11,43,94,.08);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.process-item{
    padding:28px;
    border-radius:26px;
    background:#F8FAFC;
}

.process-item strong{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:18px;
    background:rgba(0,163,255,.10);
    color:var(--color-accent);
    font-size:1.1rem;
    margin-bottom:18px;
}

.process-item h3{
    margin-bottom:10px;
    font-size:1.2rem;
}

.process-item p{
    color:var(--color-text-muted);
    line-height:1.75;
}

.faq-list{
    display:grid;
    gap:16px;
}

.faq-list details{
    border-radius:22px;
    border:1px solid rgba(15,23,42,.08);
    overflow:hidden;
    background:#fff;
    transition:.3s ease;
}
.faq-list details[open]{
    box-shadow:0 18px 40px rgba(11,43,94,.08);
}

.faq-list summary{
    cursor:pointer;
    list-style:none;
    padding:22px 24px;
    font-weight:700;
    color:var(--color-primary);
    position:relative;
}

.faq-list summary::-webkit-details-marker{
    display:none;
}
.faq-list summary::after{
    content:"+";
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    font-size:1.5rem;
    color:var(--color-accent);
    transition:.3s ease;
}
.faq-list details[open] summary::after{
    transform:translateY(-50%) rotate(45deg);
}

.faq-list details p{
    padding:0 24px 24px;
    color:var(--color-text-muted);
    line-height:1.8;
}

.nearby-areas-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.nearby-area-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    border-radius:20px;
    background:#F8FAFC;
    color:var(--color-primary);
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}

.nearby-area-item i{
    color:var(--color-accent);
    font-size:1.25rem;
}

.nearby-area-item:hover{
    background:var(--color-primary);
    color:#fff;
    transform:translateY(-3px);
}
.nearby-area-item:hover i{
    color:#fff;
}

.area-sidebar{
    position:sticky;
    top:110px;
    display:grid;
    gap:20px;
}

.sidebar-card{
    padding:28px;
}

.sidebar-card h3{
    font-size:1.4rem;
    margin-bottom:20px;
}

.sidebar-area-list{
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.sidebar-area-list a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 16px;
    border-radius:18px;
    background:#F8FAFC;
    color:var(--color-primary);
    font-weight:700;
    text-decoration:none;
    transition:.25s ease;
}

.sidebar-area-list a i{
    color:var(--color-accent);
}

.sidebar-area-list a:hover{
    background:var(--color-primary);
    color:#fff;
    transform:translateX(4px);
}
.sidebar-area-list a:hover i{
    color:#fff;
}

.all-areas-link{
    margin-top:20px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--color-accent);
    font-weight:800;
    text-decoration:none;
}

.sidebar-cta-card{
    padding:30px;
    background:linear-gradient(135deg,#071731,#0B2B5E);
    color:#fff;
}

.sidebar-cta-card h3{
    color:#fff;
    margin-bottom:14px;
}

.sidebar-cta-card p{
    color:rgba(255,255,255,.78);
    line-height:1.8;
    margin-bottom:22px;
}

.sidebar-phone-btn,
.sidebar-form-btn{
    width:100%;
    min-height:52px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-weight:800;
    transition:.3s ease;
}

.sidebar-phone-btn{
    background:var(--color-accent);
    color:#fff;
    margin-bottom:12px;
}
.sidebar-phone-btn:hover{
    transform:translateY(-3px);
}

.sidebar-form-btn{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
}
.sidebar-form-btn:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-3px);
}

@media(max-width:992px){
    .area-detail-layout{ grid-template-columns:1fr; }
    .area-sidebar{ position:relative; top:auto; }
}

@media(max-width:768px){
    .area-detail-hero{ min-height:360px; padding:110px 0 55px; }
    .area-detail-hero h1{ font-size:clamp(2.4rem,11vw,4rem); }
    .area-detail-hero p{ font-size:1rem; }
    .area-detail-section{ padding:60px 0; }
    .area-main-image{ height:240px; }
    .content-formatted{ padding:26px; font-size:1rem; }
    .area-services-card, .area-process-card, .area-faq-card, .nearby-areas-card, .sidebar-card, .sidebar-cta-card{ padding:24px; border-radius:24px; }
    .area-service-grid, .process-grid, .nearby-areas-grid{ grid-template-columns:1fr; }
    .faq-list summary{ padding-right:58px; }
}