/* Full-width hero image with a left-side readability overlay. */
.olivia-page-loader {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}

.olivia-page-loader img {
    width: min(17rem, 75vw);
    height: auto;
}

.olivia-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.olivia-brand img {
    display: block;
    width: clamp(10rem, 16vw, 14rem);
    height: auto;
}

.olivia-header { background: var(--olivia-navy); box-shadow: 0 2px 20px rgba(0, 0, 0, .2); }
.olivia-navigation > a:not(.olivia-button) { color: #e4f1ee; }
.olivia-navigation > a:not(.olivia-button):hover { color: #86e2d0; }
.olivia-menu-toggle { color: #fff; }

.olivia-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(34rem, 52vw, 43rem);
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 5.5rem 0;
    background: var(--olivia-pale);
}

.olivia-hero-background,
.olivia-hero-background::after {
    position: absolute;
    inset: 0;
}

.olivia-hero-background {
    z-index: -2;
    background: linear-gradient(135deg, #eaf8f5, #d4eee8);
}

.olivia-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.olivia-hero-background::after {
    content: '';
    z-index: 1;
    background: linear-gradient(90deg, rgba(5, 39, 48, .91) 0%, rgba(5, 39, 48, .78) 42%, rgba(5, 39, 48, .28) 67%, rgba(5, 39, 48, .06) 100%);
}

.olivia-hero-grid {
    display: block;
}

.olivia-hero-content {
    width: min(100%, 42rem);
    color: #fff;
}

.olivia-hero .olivia-eyebrow,
.olivia-hero h1,
.olivia-hero h1 span,
.olivia-hero-content > p:not(.olivia-eyebrow) {
    color: #fff;
}

.olivia-hero h1 span { color: #86e2d0; }
.olivia-hero-content > p:not(.olivia-eyebrow) { max-width: 38rem; color: #eef9f7; }
.olivia-hero .olivia-button-outline { border-color: #fff; color: #fff !important; }
.olivia-hero .olivia-button-outline:hover { background: #fff; color: var(--olivia-teal) !important; }
.olivia-hero-dot { background: rgba(255, 255, 255, .55); }
.olivia-hero-dot.is-active { background: #fff; }

/* Video backdrop for the about section, with a calm contrast overlay. */
.olivia-about {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--olivia-navy);
}

.olivia-about-video {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.olivia-about::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 39, 48, .92), rgba(5, 39, 48, .74));
}

.olivia-about .olivia-eyebrow,
.olivia-about h2,
.olivia-about h2 span,
.olivia-about > div > div > p:not(.olivia-eyebrow) {
    color: #fff;
}

.olivia-about h2 span { color: #86e2d0; }
.olivia-about .olivia-button-outline { border-color: #fff; color: #fff !important; }
.olivia-about .olivia-button-outline:hover { background: #fff; color: var(--olivia-teal) !important; }
.olivia-about .olivia-stats > div { background: rgba(255, 255, 255, .94); }
.olivia-about-visual { background: rgba(212, 238, 232, .16); border: 1px solid rgba(255, 255, 255, .25); }

/* Services background image with a soft layer for content contrast. */
.olivia-services {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff;
}

.olivia-services::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(rgba(5, 39, 48, .82), rgba(5, 39, 48, .72)), url('../images/bgj.png') center / cover no-repeat;
}

.olivia-services .olivia-service-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: rgba(249, 250, 252, .96); text-align: left; }
.olivia-services .olivia-service-feature { height: 13.5rem; background: #e6f3f0; overflow: hidden; }
.olivia-services .olivia-service-feature img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; }
.olivia-services .olivia-service-feature i { display: grid; place-items: center; width: 100%; height: 100%; color: var(--olivia-teal); font-size: 3.25rem; }
.olivia-services .olivia-service-feature.is-missing-image::after { content: '\f0f0'; display: grid; place-items: center; width: 100%; height: 100%; color: var(--olivia-teal); font: 3.25rem/1 'Font Awesome 6 Free'; font-weight: 900; }
.olivia-services .olivia-service-card:hover .olivia-service-feature img { transform: scale(1.05); }
.olivia-services .olivia-service-card-content { display: flex; flex: 1; flex-direction: column; padding: 1.35rem 1.5rem 1.5rem; }
.olivia-services .olivia-service-card h3 { margin: 0 0 .55rem; }
.olivia-services .olivia-service-card p { margin: 0; }
.olivia-services .olivia-section-heading h2 { color: #fff; }
.olivia-services .olivia-section-heading p { color: #d6ece8; }

.olivia-about-us { background: #f4f8f7; }
.olivia-about-us-grid { display: grid; grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr); gap: 4rem; align-items: center; }
.olivia-about-us h2 { margin: 0; color: var(--olivia-navy); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.2; }
.olivia-about-us h2 span { color: var(--olivia-teal); }
.olivia-about-us p:not(.olivia-eyebrow) { color: var(--olivia-muted); font-size: 1.05rem; margin: 1rem 0; }
.olivia-about-us-mark { display: grid; place-items: center; min-height: 19rem; background: linear-gradient(135deg, #d9f0eb, #bde1d8); border-radius: 2rem; }
.olivia-about-us-mark i { font-size: clamp(6rem, 12vw, 10rem); color: var(--olivia-teal); opacity: .7; }

/* Services page: use the landing page's warm, teal visual language. */
.olivia-services-page { background: var(--olivia-page); }
.olivia-services-page .container { width: min(1200px, calc(100% - 3rem)); margin: auto; padding: 0; }
.olivia-navigation .is-active { color: var(--olivia-teal); font-weight: 700; }
.olivia-services-page .page-header {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
    background: linear-gradient(90deg, rgba(5, 39, 48, .9), rgba(5, 39, 48, .62)), url('../images/bgj.png') center / cover no-repeat;
}
.olivia-services-page .page-header-content { text-align: left; }
.olivia-services-page .page-header-content h1 { font-family: inherit; font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1.08; }
.olivia-services-page .page-header-content h1 span { color: #86e2d0; }
.olivia-services-page .page-header-content p { max-width: 38rem; }
.olivia-services-page .page-header-breadcrumb { justify-content: flex-start; }
.olivia-services-page .services-section { padding: 5rem 0; background: #fff; }
.olivia-services-page .services-toolbar { border: 1px solid #dcebe7; border-radius: 1rem; background: #f8fcfb; box-shadow: none; }
.olivia-services-page .services-search { background: #fff; border-color: #dcebe7; }
.olivia-services-page .services-search:focus-within { border-color: var(--olivia-teal); box-shadow: 0 0 0 3px rgba(10, 126, 107, .12); }
.olivia-services-page .services-filter select { border-color: #dcebe7; border-radius: .7rem; color: var(--olivia-ink); }
.olivia-services-page .view-btn { border-color: #dcebe7; color: var(--olivia-teal); }
.olivia-services-page .view-btn.active { background: var(--olivia-teal); border-color: var(--olivia-teal); }
.olivia-services-page .services-count { color: var(--olivia-muted); }
.olivia-services-page .services-grid.grid-view { gap: 1.5rem; }
.olivia-services-page .service-card { border: 1px solid #dcebe7; border-radius: 0; box-shadow: none; overflow: hidden; }
.olivia-services-page .service-card:hover { border-color: #9ccfc4; box-shadow: 0 16px 38px rgba(10, 126, 107, .14); }
.olivia-services-page .service-image,
.olivia-services-page .service-image-placeholder { height: 15rem; border-radius: 0; }
.olivia-services-page .service-image img { border-radius: 0; }
.olivia-services-page .service-list-image { border-radius: 0; }
.olivia-services-page .service-body { padding: 1.5rem; }
.olivia-services-page .service-title { color: var(--olivia-navy); }
.olivia-services-page .service-description, .olivia-services-page .service-meta { color: var(--olivia-muted); }
.olivia-services-page .service-category-tag, .olivia-services-page .service-list-category { background: var(--olivia-teal); }
.olivia-services-page .btn-primary { background: var(--olivia-teal); border-color: var(--olivia-teal); }
.olivia-services-page .btn-primary:hover { background: var(--olivia-teal-dark); border-color: var(--olivia-teal-dark); }
.olivia-services-page .btn-outline { border-color: var(--olivia-teal); color: var(--olivia-teal); }
.olivia-services-page .btn-outline:hover { background: var(--olivia-teal); color: #fff; }
.olivia-services-page .cta-section { padding: 5rem 0; background: linear-gradient(135deg, var(--olivia-navy), #0f5360); }
.olivia-services-page .cta-content h2 { font-family: inherit; }

@media (max-width: 800px) {
    .olivia-navigation { background: var(--olivia-navy); border-top-color: rgba(255, 255, 255, .14); }
    .olivia-navigation > a:not(.olivia-button) { color: #e4f1ee; }
    .olivia-services-page .page-header { padding: 4rem 0; }
    .olivia-services-page .page-header-content { text-align: center; }
    .olivia-services-page .page-header-breadcrumb { justify-content: center; }
}

/* Service detail page aligned with the landing page. */
.olivia-service-detail-page .container { width: min(1200px, calc(100% - 3rem)); margin: auto; padding: 0; }
.olivia-service-detail-page .breadcrumb-section { background: #f4f8f7; border-color: #dcebe7; }
.olivia-service-detail-page .breadcrumb li a, .olivia-service-detail-page .service-meta-item i { color: var(--olivia-teal); }
.olivia-service-detail-page .service-detail-section { padding: 5rem 0; background: #fff; }
.olivia-service-detail-page .service-detail-wrapper { gap: 4rem; }
.olivia-service-detail-page .service-detail-content { padding-right: 0; }
.olivia-service-detail-page .service-category-badge { border-radius: .35rem; background: #e6f3f0; color: var(--olivia-teal); }
.olivia-service-detail-page .service-detail-title { color: var(--olivia-navy); font-family: inherit; font-size: clamp(2.4rem, 4vw, 3.6rem); }
.olivia-service-detail-page .service-meta { border-color: #dcebe7; }
.olivia-service-detail-page .description-content { color: var(--olivia-muted); }
.olivia-service-detail-page .btn-primary { background: var(--olivia-teal); border-color: var(--olivia-teal); }
.olivia-service-detail-page .btn-primary:hover { background: var(--olivia-teal-dark); border-color: var(--olivia-teal-dark); }
.olivia-service-detail-page .btn-outline { border-color: var(--olivia-teal); color: var(--olivia-teal); }
.olivia-service-detail-page .btn-outline:hover { background: var(--olivia-teal); color: #fff; }
.olivia-service-detail-page .service-image-card, .olivia-service-detail-page .service-image-card img { border-radius: 0; }
.olivia-service-detail-page .sidebar-card { border-color: #dcebe7; border-radius: 0; box-shadow: none; }
.olivia-service-detail-page .sidebar-card h3 { color: var(--olivia-navy); }
.olivia-service-detail-page .quick-info { border-top: 3px solid var(--olivia-teal); }
.olivia-service-detail-page .book-card { background: #f4f8f7; }
.olivia-service-detail-page .emergency-card { background: var(--olivia-navy); }
.olivia-service-detail-page .related-services { padding: 5rem 0; background: #f4f8f7; }
.olivia-service-detail-page .section-header h2 { font-family: inherit; color: var(--olivia-navy); }
.olivia-service-detail-page .section-header h2 span, .olivia-service-detail-page .section-tag { color: var(--olivia-teal); }
.olivia-service-detail-page .related-service-card { border-radius: 0; border-color: #dcebe7; box-shadow: none; }
.olivia-service-detail-page .related-service-card > img { border-radius: 0; }
.olivia-service-detail-page .cta-section { background: linear-gradient(135deg, var(--olivia-navy), #0f5360); }

@media (max-width: 800px) {
    .olivia-service-detail-page .service-detail-section, .olivia-service-detail-page .related-services { padding: 4rem 0; }
}

@media (max-width: 800px) {
    .olivia-hero {
        min-height: 38rem;
        padding: 4rem 0;
    }

    .olivia-hero-background::after {
        background: linear-gradient(90deg, rgba(5, 39, 48, .88), rgba(5, 39, 48, .62));
    }

    .olivia-about::before { background: rgba(5, 39, 48, .8); }
    .olivia-about-us-grid { grid-template-columns: 1fr; gap: 2rem; }
    .olivia-about-us-mark { min-height: 13rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .olivia-reveal {
        opacity: 0;
        transform: translateY(2rem);
        transition: opacity 650ms ease, transform 650ms ease;
    }

    .olivia-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .olivia-reveal .olivia-service-card,
    .olivia-reveal .olivia-stats > div,
    .olivia-reveal .olivia-contact-info,
    .olivia-reveal .olivia-contact-form {
        transition-delay: var(--reveal-delay, 0ms);
    }
}
