/* ============================================
   SCOPED SERVICE DETAIL HERO (PREMIUM)
   Mirrors Home Banner alignment & breakpoints
   ============================================ */

.page-service-detail .service-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #001F5F;
    /* Precise padding-top to sit under the sticky nav safely */
    /* padding-top: 132px; */
    display: flex;
    align-items: flex-end; /* Aligns text to the bottom */
    height: 70vh;
    min-height: 450px;
    max-height: 650px;
}

/* --- Background System --- */
.page-service-detail .banner-background-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-service-detail .bg-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Optional slight zoom effect */
    transform: scale(1.05);
    transition: transform 1.5s ease-out;
}

.page-service-detail .service-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Premium dark-to-light overlay */
    background: linear-gradient(
        to top,
        rgba(0, 31, 95, 0.98) 0%,
        rgba(0, 31, 95, 0.7) 40%,
        rgba(0, 31, 95, 0.2) 70%,
        rgba(0, 31, 95, 0) 100%
    );
    z-index: 2;
}

/* --- Alignment Grid (Crucial for Logo Alignment) --- */
.page-service-detail .service-content-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    /* Base matching .banner-content-grid */
    padding: 0 60px;
    padding-bottom: 60px;
}

.page-service-detail .service-hero-content {
    max-width: 1170px;
}

/* --- Typography & Elements --- */
.page-service-detail .service-headline-luxury {
    font-size: 48px; /* Mirrors .hero-headline-luxury */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0;
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page-service-detail .luxury-breadcrumb {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(248, 205, 0, 0.2);
    border-radius: 50px;
    margin-bottom: 24px;
}

.page-service-detail .luxury-breadcrumb ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.page-service-detail .luxury-breadcrumb ul li {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-service-detail .luxury-breadcrumb ul li a {
    color: #fff;
    transition: color 0.3s ease;
}

.page-service-detail .luxury-breadcrumb ul li a:hover,
.page-service-detail .luxury-breadcrumb ul li a.active {
    color: #F8CD00;
}

.page-service-detail .luxury-breadcrumb ul li a.active {
    pointer-events: none;
}

/* Override old breadcrumb slash */
.page-service-detail .luxury-breadcrumb ul li::before {
    display: none;
}
.page-service-detail .luxury-breadcrumb ul li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.3);
    position: relative;
}

/* ============================================
   EXACT BREAKPOINT MAPPING FOR RESPONSIVENESS
   ============================================ */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .page-service-detail .service-content-grid { padding: 0 80px; padding-bottom: 80px; }
    .page-service-detail .service-headline-luxury { font-size: 48px; }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .page-service-detail .service-content-grid { padding: 0 50px; padding-bottom: 70px; }
    .page-service-detail .service-headline-luxury { font-size: 48px; }
}

/* Laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .page-service-detail .service-hero-section { padding-top: 84px; height: 60vh; min-height: 400px; }
    .page-service-detail .service-content-grid { padding: 0 40px; padding-bottom: 50px; }
    .page-service-detail .service-headline-luxury { font-size: 36px; }
    .page-service-detail .luxury-breadcrumb ul li { font-size: 12px; }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .page-service-detail .service-hero-section { padding-top: 72px; height: 60vh; min-height: 380px; }
    .page-service-detail .service-content-grid { padding: 0 30px; padding-bottom: 40px; }
    .page-service-detail .service-headline-luxury { font-size: 36px; }
    .page-service-detail .luxury-breadcrumb { padding: 8px 18px; margin-bottom: 20px;}
    .page-service-detail .luxury-breadcrumb ul li { font-size: 12px; }
}

/* Tablet Portrait (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .page-service-detail .service-hero-section { padding-top: 72px; height: 40vh; min-height: 350px; }
    .page-service-detail .service-content-grid { padding: 0 24px; padding-bottom: 30px; }
    .page-service-detail .service-headline-luxury { font-size: 32px; }
    .page-service-detail .luxury-breadcrumb { padding: 6px 16px; margin-bottom: 15px;}
}

/* Mobile Landscape (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    .page-service-detail .service-hero-section { padding-top: 72px; height: 40vh; min-height: 320px; }
    .page-service-detail .service-content-grid { padding: 0 20px; padding-bottom: 30px; }
    .page-service-detail .service-headline-luxury { font-size: 28p; }
    .page-service-detail .luxury-breadcrumb ul li { font-size: 11px; }
}

/* Small Mobile (375px - 479px) */
@media (min-width: 375px) and (max-width: 479px) {
    .page-service-detail .service-hero-section { padding-top: 72px; min-height: 300px; }
    .page-service-detail .service-content-grid { padding: 0 18px; padding-bottom: 25px; }
    .page-service-detail .service-headline-luxury { font-size: 40px; }
    .page-service-detail .luxury-breadcrumb { padding: 5px 14px; margin-bottom: 12px;}
}

/* Extra Small Mobile (< 375px) */
@media (max-width: 374px) {
    .page-service-detail .service-hero-section { padding-top: 72px; min-height: 280px; }
    .page-service-detail .service-content-grid { padding: 0 16px; padding-bottom: 20px; }
    .page-service-detail .service-headline-luxury { font-size: 36px; }
    .page-service-detail .luxury-breadcrumb ul li { font-size: 10px; }
}

/* ============================================
   SCOPED SERVICE DETAIL CONTENT ALIGNMENT
   Ensures text perfectly aligns with the title
   ============================================ */

/* Reset the bottom padding inherited from the hero grid */
.page-service-detail .service-detail-body .service-content-grid {
    padding-bottom: 0;
}

/* Control the reading width and vertical spacing */
.page-service-detail .service-detail-content-inner {
    /* Prevents the text from stretching too wide on massive screens */
    max-width: 900px;
    margin-top: 60px;
    margin-bottom: 80px;
}

/* Make images inside the content area look premium */
.page-service-detail .content-single img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 31, 95, 0.08);
    margin: 40px 0;
}

/* Larger top spacing for desktop */
/* @media (min-width: 992px) {
    .page-service-detail .service-detail-content-inner {
        margin-top: 100px;
        margin-bottom: 120px;
    }
} */

/* Responsive spacing for smaller screens */
@media (max-width: 767px) {
    .page-service-detail .service-detail-content-inner {
        margin-top: 40px;
        margin-bottom: 60px;
    }
    .page-service-detail .content-single img {
        margin: 25px 0;
    }
}