/* ========================================
   SERVICE DETAIL PAGE
   Minimal new CSS only. All components
   (btn, service-card, why-card, process-card,
   section, eyebrow, section-title, etc.)
   are inherited from existing CSS files.
   ======================================== */

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
    padding: .75rem 0;
    background: var(--soft);
    border-bottom: 1px solid var(--line)
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
    color: var(--muted)
}

.breadcrumb-list a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500
}

.breadcrumb-list a:hover {
    text-decoration: underline
}

.breadcrumb-sep {
    color: var(--line);
    font-size: .75rem;
    user-select: none
}

.breadcrumb-list [aria-current="page"] {
    color: var(--text);
    font-weight: 600
}

/* ── Service Detail Hero (tighter than page-hero) ────────────────────────── */
.service-detail-hero {
    background: #eef8ff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center
}

.service-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #eef8ff 0%, #eef8ff 34%, rgba(238,248,255,.88) 50%, rgba(238,248,255,.05) 100%);
    z-index: -1
}

.service-detail-hero .page-hero-media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 55%;
    z-index: -2
}

.service-detail-hero .page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.service-detail-hero .container {
    padding-block: 4rem
}

.service-detail-hero .hero-content {
    max-width: 580px
}

.service-detail-hero h1 {
    max-width: 580px;
    color: #092d59;
    font-family: var(--head);
    font-size: clamp(2rem, 1rem + 3.5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: .4rem 0 1rem
}

.service-detail-hero h1 span {
    color: var(--blue)
}

.service-detail-hero .hero-copy {
    color: #365372;
    max-width: 540px;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.7
}

.service-detail-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

/* ── Overview section — 2-col layout ────────────────────────────────────── */
.sd-overview-grid {
    display: grid;
    gap: 3rem;
    align-items: center
}

.sd-overview-img {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.sd-overview-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block
}

.sd-overview-copy .section-title {
    text-align: left;
    margin-bottom: 1rem
}

.sd-overview-copy p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem
}

/* ── Features grid — reuses .why-card, just 3-col on desktop ─────────────── */
.features-grid {
    display: grid;
    gap: 1rem
}

@media(min-width:600px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1000px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* ── Related services strip ──────────────────────────────────────────────── */
.related-grid {
    display: grid;
    gap: 1.1rem
}

@media(min-width:600px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1000px) {
    .related-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(min-width:900px) {
    .sd-overview-grid {
        grid-template-columns: minmax(0,46%) minmax(0,1fr);
        gap: 4rem
    }
}

@media(max-width:899px) {
    .service-detail-hero .page-hero-media {
        width: 100%;
        opacity: .25
    }

    .service-detail-hero::before {
        background: rgba(238,248,255,.92)
    }

    .service-detail-hero {
        min-height: 460px
    }
}

@media(max-width:599px) {
    .service-detail-hero {
        min-height: 500px
    }

    .service-detail-hero .container {
        padding-block: 3.5rem
    }
}