/* ============================================
   FREEQUOTEPRO - SERVICE DETAILS NAVIGATION
   ============================================ */

.page-single-post .fqp-service-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 34px;
    padding-top: 32px;
    border-top: 1px solid rgba(11, 49, 91, 0.12);
}

/* Navigation cards */

.page-single-post .fqp-service-nav-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 180px;
    gap: 22px;
    overflow: hidden;

    padding: 28px 30px;

    border: 1px solid rgba(40, 124, 184, 0.24);
    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f1f7fc 55%,
        #eaf4fc 100%
    );

    box-shadow:
        0 14px 32px rgba(11, 49, 91, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    text-decoration: none;

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

/* Soft decorative glow */

.page-single-post .fqp-service-nav-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -95px;
    right: -65px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(40, 124, 184, 0.12),
        transparent 72%
    );

    pointer-events: none;
}

/* Labels and arrows */

.page-single-post .fqp-service-nav-label {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #287cb8;
}

.page-single-post .fqp-service-nav-label i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: rgba(255, 130, 28, 0.12);
    color: #ff821c;

    transition:
        background 300ms ease,
        color 300ms ease,
        transform 300ms ease;
}

/* Text content */

.page-single-post .fqp-service-nav-content {
    position: relative;
    z-index: 2;
}

.page-single-post .fqp-service-nav-content h3 {
    margin: 0 0 10px;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #0b315b;

    transition: color 300ms ease;
}

.page-single-post .fqp-service-nav-content p {
    margin: 0;

    max-width: 310px;

    font-size: 14px;
    line-height: 1.65;
    color: #526b80;
}

/* Background icons */

.page-single-post .fqp-service-nav-decoration {
    position: absolute;
    right: 20px;
    bottom: 15px;
    z-index: 1;

    font-size: 75px;
    line-height: 1;
    color: rgba(40, 124, 184, 0.065);

    pointer-events: none;
}

/* Next service alignment */

.page-single-post .fqp-service-nav-next {
    align-items: flex-end;
    text-align: right;
}

.page-single-post .fqp-service-nav-next
.fqp-service-nav-content p {
    margin-left: auto;
}

.page-single-post .fqp-service-nav-next
.fqp-service-nav-decoration {
    right: auto;
    left: 20px;
}

/* Hover effects */

@media (hover: hover) and (pointer: fine) {

    .page-single-post a.fqp-service-nav-card:hover {
        transform: translateY(-5px);

        border-color: rgba(255, 130, 28, 0.7);

        box-shadow:
            0 20px 40px rgba(11, 49, 91, 0.14),
            0 0 0 1px rgba(255, 130, 28, 0.10);
    }

    .page-single-post a.fqp-service-nav-card:hover
    .fqp-service-nav-content h3 {
        color: #287cb8;
    }

    .page-single-post a.fqp-service-nav-card:hover
    .fqp-service-nav-label i {
        background: #ff821c;
        color: #ffffff;
    }

    .page-single-post a.fqp-service-nav-prev:hover
    .fqp-service-nav-label i {
        transform: translateX(-4px);
    }

    .page-single-post a.fqp-service-nav-next:hover
    .fqp-service-nav-label i {
        transform: translateX(4px);
    }
}

/* Keyboard accessibility */

.page-single-post .fqp-service-nav-card:focus-visible {
    outline: 3px solid #ff821c;
    outline-offset: 4px;
}

/* Tablet */

@media (max-width: 991px) {

    .page-single-post .fqp-service-navigation {
        gap: 16px;
    }

    .page-single-post .fqp-service-nav-card {
        padding: 24px;
    }

    .page-single-post .fqp-service-nav-content h3 {
        font-size: 20px;
    }
}

/* Mobile */

@media (max-width: 575px) {

    .page-single-post .fqp-service-navigation {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 25px;
        padding-top: 25px;
    }

    .page-single-post .fqp-service-nav-card {
        min-height: 155px;
        padding: 22px;
        gap: 16px;
        border-radius: 18px;
    }

    .page-single-post .fqp-service-nav-content h3 {
        font-size: 19px;
    }

    .page-single-post .fqp-service-nav-content p {
        font-size: 13px;
    }

    .page-single-post .fqp-service-nav-decoration {
        font-size: 60px;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .page-single-post .fqp-service-nav-card,
    .page-single-post .fqp-service-nav-label i,
    .page-single-post .fqp-service-nav-content h3 {
        transition: none;
    }

    .page-single-post a.fqp-service-nav-card:hover,
    .page-single-post .fqp-service-nav-label i {
        transform: none;
    }
}


/* ==========================================
   FREEQUOTEPRO - SERVICE DETAILS
   Scoped to the exact HTML structure
   ========================================== */

.page-single-post.fqp-service-details {
    --sd-primary: var(--primary-color, #0B2F58);
    --sd-blue: var(--text-color, #2576B3);
    --sd-orange: var(--accent-color, #EE7F1E);
    --sd-white: #FFFFFF;
    --sd-muted: #52677D;
    --sd-border: #DFE8F0;

    padding: 65px 0 85px;
    background: var(--sd-white);
    font-family: var(--default-font, "Inter", sans-serif);
}

.page-single-post.fqp-service-details *,
.page-single-post.fqp-service-details *::before,
.page-single-post.fqp-service-details *::after {
    box-sizing: border-box;
}

/* ==========================================
   MAIN COLUMN
   ========================================== */

.page-single-post.fqp-service-details
.fqp-service-main {
    min-width: 0;
}

.page-single-post.fqp-service-details
.fqp-service-main .post-image {
    margin: 0 0 28px;
}

.page-single-post.fqp-service-details
.fqp-service-main .post-image figure {
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
}

.page-single-post.fqp-service-details
.fqp-service-main .post-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* Remove template article width restrictions */

.page-single-post.fqp-service-details
.fqp-service-main .post-content,
.page-single-post.fqp-service-details
.fqp-service-main .post-entry {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Titles */

.page-single-post.fqp-service-details
.fqp-service-main .post-entry h2 {
    margin: 0 0 18px;
    color: var(--sd-primary);
    font-family: var(--accent-font, "Ubuntu", sans-serif);
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.3;
}

.page-single-post.fqp-service-details
.fqp-service-main .post-entry h3 {
    margin: 0 0 13px;
    color: var(--sd-primary);
    font-family: var(--accent-font, "Ubuntu", sans-serif);
    font-size: clamp(19px, 1.8vw, 23px);
    font-weight: 700;
    line-height: 1.35;
}

.page-single-post.fqp-service-details
.fqp-service-main .post-entry p {
    margin: 0 0 18px;
    color: var(--sd-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}

.page-single-post.fqp-service-details
.fqp-service-content-block {
    margin-top: 32px;
}

/* ==========================================
   ROOFING PROJECT LIST
   ========================================== */

.page-single-post.fqp-service-details
.fqp-service-checklist {
    display: flex;
    flex-direction: column;
    gap: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-single-post.fqp-service-details
.fqp-service-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: #344B63;
    font-size: 15px;
    line-height: 1.6;
    list-style: none;
}

.page-single-post.fqp-service-details
.fqp-service-checklist li::before {
    content: none;
}

.page-single-post.fqp-service-details
.fqp-service-checklist li i {
    flex-shrink: 0;
    margin-top: 4px;
    color: #189C65;
    font-size: 16px;
}

/* ==========================================
   FORM AVAILABILITY NOTE
   ========================================== */

.page-single-post.fqp-service-details
.fqp-service-info-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
    padding: 20px 22px;
    border: 1px solid #CFDFEC;
    border-radius: 15px;
    background: #F0F7FC;
}

.page-single-post.fqp-service-details
.fqp-service-info-note > i {
    flex-shrink: 0;
    margin-top: 5px;
    color: var(--sd-blue);
    font-size: 20px;
}

.page-single-post.fqp-service-details
.fqp-service-info-note p {
    margin: 0;
    color: #445E75;
    font-size: 14px;
    line-height: 1.7;
}

.page-single-post.fqp-service-details
.fqp-service-info-note strong {
    color: var(--sd-primary);
}

/* ==========================================
   SIDEBAR WRAPPER
   ========================================== */

.page-single-post.fqp-service-details
.fqp-details-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* ==========================================
   OUR SERVICES CARD
   ========================================== */

.page-single-post.fqp-service-details
.fqp-details-services-card {
    padding: 26px 23px;
    border: 1px solid var(--sd-border);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow:
        0 14px 35px rgba(11, 47, 88, 0.07);
}

.page-single-post.fqp-service-details
.fqp-details-services-card > h2 {
    margin: 0;
    color: var(--sd-primary);
    font-family: var(--accent-font, "Ubuntu", sans-serif);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.page-single-post.fqp-service-details
.fqp-details-divider {
    height: 1px;
    margin: 20px 0 14px;
    background: #E5EDF3;
}

/* Service links */

.page-single-post.fqp-service-details
.fqp-details-services-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-single-post.fqp-service-details
.fqp-details-services-list li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-single-post.fqp-service-details
.fqp-details-services-list li::before {
    content: none;
}

.page-single-post.fqp-service-details
.fqp-details-services-list a,
.page-single-post.fqp-service-details
.fqp-details-services-list li.active > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #344B63;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: none;
    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
}

.page-single-post.fqp-service-details
.fqp-details-services-list i {
    flex-shrink: 0;
    color: #7F96AA;
    font-size: 12px;
}

.page-single-post.fqp-service-details
.fqp-details-services-list li.active > span {
    border-color: #D2E4F3;
    background: #EAF4FC;
    color: var(--sd-primary);
    font-weight: 700;
}

.page-single-post.fqp-service-details
.fqp-details-services-list li.active i {
    color: var(--sd-orange);
}

.page-single-post.fqp-service-details
.fqp-details-services-list a:hover {
    background: #F0F7FC;
    color: var(--sd-primary);
}

/* View All Services */

.page-single-post.fqp-service-details
.fqp-details-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 19px 12px 2px;
    border-top: 1px solid #E5EDF3;
    color: var(--sd-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.page-single-post.fqp-service-details
.fqp-details-view-all i {
    color: var(--sd-orange);
}

.page-single-post.fqp-service-details
.fqp-details-view-all:hover {
    color: var(--sd-blue);
}

/* ==========================================
   CONTACT US CTA
   ========================================== */

.page-single-post.fqp-service-details
.fqp-details-contact-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 30px 25px;
    border-radius: 20px;
    background: linear-gradient(
        145deg,
        #10394F 0%,
        var(--sd-primary) 70%,
        #16476C 100%
    );
    box-shadow:
        0 18px 40px rgba(11, 47, 88, 0.17);
}

.page-single-post.fqp-service-details
.fqp-details-contact-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    top: -120px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255,255,255,.15),
        transparent 70%
    );
    pointer-events: none;
}

.page-single-post.fqp-service-details
.fqp-details-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 13px;
    background: rgba(238,127,30,.15);
    color: var(--sd-orange);
    font-size: 24px;
}

.page-single-post.fqp-service-details
.fqp-details-contact-card h2 {
    margin: 0 0 16px;
    color: #FFFFFF;
    font-family: var(--accent-font, "Ubuntu", sans-serif);
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.3;
}

.page-single-post.fqp-service-details
.fqp-details-contact-card p {
    margin: 0 0 25px;
    color: #E0EAF4;
    font-size: 14px;
    line-height: 1.75;
}

.page-single-post.fqp-service-details
.fqp-details-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 47px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 40px;
    background: var(--sd-orange);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 250ms ease,
        transform 250ms ease;
}

.page-single-post.fqp-service-details
.fqp-details-contact-btn:hover {
    background: var(--sd-orange);
    color: #FFFFFF;
    transform: translateY(-3px);
}

/* ==========================================
   PREVIOUS / NEXT SERVICES
   ========================================== */

.page-single-post.fqp-service-details
.fqp-service-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
    padding-top: 30px;
    border-top: 1px solid #DBE5EF;
}

.page-single-post.fqp-service-details
.fqp-service-nav-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    min-height: 165px;
    padding: 26px;
    border: 1px solid #D1E3F1;
    border-radius: 19px;
    background: linear-gradient(
        135deg,
        #FFFFFF 0%,
        #F1F7FC 55%,
        #E4F1FA 100%
    );
    box-shadow:
        0 12px 30px rgba(11,47,88,.07);
    text-decoration: none;
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.page-single-post.fqp-service-details
.fqp-service-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sd-blue);
    font-size: 13px;
    font-weight: 700;
}

.page-single-post.fqp-service-details
.fqp-service-nav-label i {
    color: var(--sd-orange);
}

.page-single-post.fqp-service-details
.fqp-service-nav-content h3 {
    margin: 0 0 9px;
    color: var(--sd-primary);
    font-family: var(--accent-font, "Ubuntu", sans-serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.page-single-post.fqp-service-details
.fqp-service-nav-content p {
    margin: 0;
    max-width: 350px;
    color: var(--sd-muted);
    font-size: 13px;
    line-height: 1.65;
}

.page-single-post.fqp-service-details
.fqp-service-nav-next {
    align-items: flex-end;
    text-align: right;
}

.page-single-post.fqp-service-details
.fqp-service-nav-next p {
    margin-left: auto;
}

/* ==========================================
   INTERACTIONS
   ========================================== */

@media (hover: hover) and (pointer: fine) {
    .page-single-post.fqp-service-details
    a.fqp-service-nav-card:hover {
        transform: translateY(-4px);
        border-color: var(--sd-orange);
        box-shadow:
            0 20px 38px rgba(11,47,88,.13);
    }
}

.page-single-post.fqp-service-details
a:focus-visible {
    outline: 3px solid var(--sd-orange);
    outline-offset: 4px;
}

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

@media (max-width: 991px) {
    .page-single-post.fqp-service-details {
        padding: 55px 0 70px;
    }

    .page-single-post.fqp-service-details
    .fqp-details-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 767px) {
    .page-single-post.fqp-service-details {
        padding: 40px 0 60px;
    }

    .page-single-post.fqp-service-details
    .fqp-details-sidebar {
        display: flex;
        flex-direction: column;
    }

    .page-single-post.fqp-service-details
    .fqp-service-navigation {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 35px;
    }

    .page-single-post.fqp-service-details
    .fqp-service-nav-card {
        min-height: 145px;
        padding: 22px;
    }
}

@media (max-width: 575px) {
    .page-single-post.fqp-service-details
    .fqp-details-services-card,
    .page-single-post.fqp-service-details
    .fqp-details-contact-card {
        padding: 23px 19px;
    }

    .page-single-post.fqp-service-details
    .fqp-service-nav-content h3 {
        font-size: 19px;
    }

    .page-single-post.fqp-service-details
    .fqp-service-info-note {
        padding: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-single-post.fqp-service-details
    .fqp-details-services-list a,
    .page-single-post.fqp-service-details
    .fqp-details-contact-btn,
    .page-single-post.fqp-service-details
    .fqp-service-nav-card {
        transition: none;
    }

    .page-single-post.fqp-service-details
    .fqp-details-contact-btn:hover,
    .page-single-post.fqp-service-details
    a.fqp-service-nav-card:hover {
        transform: none;
    }
}

/* Featured photo: iPhone-inspired glass bezel, scoped to service details only. */
@property --fqp-detail-glass-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 225deg;
}

.page-single-post.fqp-service-details .fqp-service-main .post-image {
    --sd-glass-gap: 8px;
    --sd-glass-radius: 30px;
    position: relative;
    isolation: isolate;
    padding: var(--sd-glass-gap);
    border: 1px solid rgba(119, 157, 189, .32);
    border-radius: var(--sd-glass-radius);
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .96),
            rgba(225, 239, 250, .38) 28%,
            rgba(148, 184, 212, .24) 56%,
            rgba(255, 255, 255, .92)),
        rgba(238, 246, 252, .62);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow:
        0 28px 52px -28px rgba(11, 47, 88, .45),
        0 10px 24px -16px rgba(11, 47, 88, .26),
        0 0 0 1px rgba(255, 255, 255, .88),
        inset 0 1px 1px rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(11, 47, 88, .14);
    transition: box-shadow 450ms ease;
}

/* Soft refraction stays behind the bezel, never over the photograph. */
.page-single-post.fqp-service-details .fqp-service-main .post-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -7px;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 8% 12%, rgba(40, 124, 184, .30), transparent 58%),
        radial-gradient(ellipse at 96% 88%, rgba(238, 127, 30, .22), transparent 52%);
    filter: blur(14px);
    opacity: .55;
    pointer-events: none;
    transition: opacity 450ms ease;
}

/* Fallback edge highlights also work without composite-mask support. */
.page-single-post.fqp-service-details .fqp-service-main .post-image::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, .95),
        inset 0 -2px 3px rgba(11, 47, 88, .12),
        inset 0 0 0 1px rgba(255, 255, 255, .8);
    pointer-events: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .page-single-post.fqp-service-details .fqp-service-main .post-image::after {
        padding: calc(var(--sd-glass-gap) - 1px);
        background: conic-gradient(from var(--fqp-detail-glass-angle, 225deg),
            rgba(255, 255, 255, .12),
            rgba(255, 255, 255, 1) 12%,
            rgba(134, 184, 221, .34) 27%,
            rgba(255, 255, 255, .08) 42%,
            rgba(238, 127, 30, .38) 58%,
            rgba(255, 255, 255, .98) 67%,
            rgba(172, 207, 233, .30) 82%,
            rgba(255, 255, 255, .12));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        transition: --fqp-detail-glass-angle 800ms cubic-bezier(.25, 1, .5, 1);
    }
}

.page-single-post.fqp-service-details .fqp-service-main .post-image figure {
    position: relative;
    z-index: 1;
    border-radius: calc(var(--sd-glass-radius) - var(--sd-glass-gap));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .78),
        0 5px 14px -10px rgba(11, 47, 88, .35);
}

/* Replace the template's full-photo hover wash with a clear inner glass lip. */
.page-single-post.fqp-service-details .fqp-service-main .post-image figure::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background: none;
    transform: none;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .65),
        inset 0 0 0 1px rgba(255, 255, 255, .24);
    pointer-events: none;
    transition: none;
}

@media (hover: hover) and (pointer: fine) {
    .page-single-post.fqp-service-details .fqp-service-main .post-image:hover {
        box-shadow:
            0 32px 58px -28px rgba(11, 47, 88, .48),
            0 12px 28px -18px rgba(11, 47, 88, .30),
            0 0 0 1px rgba(255, 255, 255, 1),
            inset 0 1px 2px rgba(255, 255, 255, 1);
    }

    .page-single-post.fqp-service-details .fqp-service-main .post-image:hover::before {
        opacity: .85;
    }

    .page-single-post.fqp-service-details .fqp-service-main .post-image:hover::after {
        --fqp-detail-glass-angle: 255deg;
    }
}

@media (max-width: 767px) {
    .page-single-post.fqp-service-details .fqp-service-main .post-image {
        --sd-glass-gap: 6px;
        --sd-glass-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-single-post.fqp-service-details .fqp-service-main .post-image,
    .page-single-post.fqp-service-details .fqp-service-main .post-image::before,
    .page-single-post.fqp-service-details .fqp-service-main .post-image::after,
    .page-single-post.fqp-service-details .fqp-service-main .post-image figure,
    .page-single-post.fqp-service-details .fqp-service-main .post-image img {
        animation: none !important;
        transition: none !important;
    }

    /* The shared reveal script writes transforms inline; keep this photo still. */
    .page-single-post.fqp-service-details .fqp-service-main .post-image figure,
    .page-single-post.fqp-service-details .fqp-service-main .post-image img {
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* Reusable shell: scoped semantics, unavailable labels, and accessibility fixes. */
/* Visible by default; shared GSAP can still apply its normal reveal transforms. */
.page-single-post.fqp-service-details .post-image .reveal {
    visibility: visible;
}


.page-single-post.fqp-service-details .fqp-details-services-list li:not(.active) > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #344B63;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.page-single-post.fqp-service-details .fqp-details-contact-btn,
.page-single-post.fqp-service-details .fqp-details-contact-btn:hover {
    color: var(--sd-primary);
}

.page-single-post.fqp-service-details a:focus-visible {
    outline-color: var(--sd-primary);
}

.page-single-post.fqp-service-details .fqp-details-contact-btn:focus-visible,
.fqp-service-detail-page .page-header .breadcrumb a:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 4px;
}

.fqp-service-detail-page .page-header-box h1,
.fqp-service-detail-page .breadcrumb {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.fqp-service-detail-page .breadcrumb {
    justify-content: flex-start;
    row-gap: 6px;
}

.page-single-post.fqp-service-details .fqp-service-image-fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 1;
    padding: 24px;
    border-radius: calc(var(--sd-glass-radius) - var(--sd-glass-gap));
    background: #F0F7FC;
    color: var(--sd-primary);
    text-align: center;
}

.page-single-post.fqp-service-details .fqp-service-image-fallback p {
    margin: 0;
}

@media (max-width: 767px) {
    .page-single-post.fqp-service-details .fqp-service-image-fallback {
        aspect-ratio: 1 / .7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fqp-service-detail-page .page-header {
        background-attachment: scroll !important;
    }

    /* Shared GSAP writes inline character transforms. Override only this page's hero. */
    .fqp-service-detail-page .page-header h1,
    .fqp-service-detail-page .page-header h1 * {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Keep tablet sidebar cards at their natural heights without changing mobile flex sizing. */
@media (min-width: 768px) and (max-width: 991px) {
    .page-single-post.fqp-service-details .fqp-details-sidebar {
        align-items: start;
    }
}

/* Unavailable neighbors retain the card surface without link affordances. */
.page-single-post.fqp-service-details .fqp-service-nav-preview {
    cursor: default;
    transition: none;
}

.page-single-post.fqp-service-details .fqp-service-nav-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--sd-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* Context for the existing sidebar card; retain its established item styling. */
.page-single-post.fqp-service-details .fqp-details-services-card .fqp-details-group-label {
    margin: 8px 0 0;
    color: var(--sd-muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}