/* ==========================================================
   SPECTRA SERVICE DETAILS PAGE
========================================================== */

.service-details-page {
    --service-navy: #123058;
    --service-dark: #001b3c;

    --service-green: #15803d;
    --service-green-dark: #146c36;

    --service-green-light: #ecfdf5;

    --service-bg: #f8fafc;
    --service-border: #e2e8f0;

    --service-text: #1e293b;
    --service-muted: #64748b;

    background: #ffffff;
}


/* ==========================================================
   HEADER
========================================================== */

.service-details-page .site-header {
    position: absolute;

    top: 16px;
    left: 0;

    width: 100%;

    z-index: 1000;
}


.service-details-page .site-header.header-sticky {
    position: fixed;

    top: 10px;
}



/* ==========================================================
   SERVICE BANNER
========================================================== */

.service-banner {
    position: relative;

    width: 100%;
    height: 410px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--service-dark);
}


.service-banner-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.service-banner-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 27, 60, 0.78),
            rgba(0, 27, 60, 0.48),
            rgba(0, 27, 60, 0.64)
        );
}


.service-banner-content {
    position: relative;

    z-index: 4;

    width: min(90%, 900px);

    margin-top: 55px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


.service-breadcrumb {
    margin-bottom: 14px;

    padding: 6px 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid rgba(255,255,255,0.22);

    border-radius: 40px;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(7px);

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;
}


.service-breadcrumb a {
    color: #86efac;
}


.service-breadcrumb strong {
    color: #ffffff;
}


.service-banner-label {
    margin-bottom: 12px;

    color: #86efac;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.service-banner h1 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.1;

    letter-spacing: -0.04em;

    font-weight: 800;
}


.service-banner-content > p {
    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,0.88);

    font-size: 15px;
}



/* ==========================================================
   SHARED LABEL
========================================================== */

.service-small-label {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 5px 11px;

    border: 1px solid #bbf7d0;

    border-radius: 40px;

    background: #f0fdf4;

    color: var(--service-green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.service-small-label > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--service-green);
}



/* ==========================================================
   SERVICE INTRODUCTION
========================================================== */

.service-introduction {
    padding: 95px 0 110px;

    background: #ffffff;
}


.service-introduction-grid {
    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: 70px;

    align-items: center;
}


.service-intro-content {
    grid-column: span 6;
}


.service-intro-content h2 {
    max-width: 620px;

    margin: 17px 0 20px;

    color: var(--service-navy);

    font-size: clamp(29px, 3vw, 40px);

    line-height: 1.18;

    letter-spacing: -0.035em;
}


.service-intro-paragraphs {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.service-intro-paragraphs p {
    margin: 0;

    color: var(--service-muted);

    font-size: 14px;

    line-height: 1.8;
}



/* ==========================================================
   HIGHLIGHTS
========================================================== */

.service-highlights {
    margin-top: 28px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 13px;
}


.service-highlight {
    padding: 16px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    border: 1px solid #e2e8f0;

    border-radius: 9px;

    background: #f8fafc;
}


.service-highlight-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background: #dcfce7;

    color: var(--service-green);
}


.service-highlight-icon .material-symbols-outlined {
    font-size: 17px;
}


.service-highlight h3 {
    margin: 0 0 3px;

    color: var(--service-navy);

    font-size: 12px;

    font-weight: 700;
}


.service-highlight p {
    margin: 0;

    color: var(--service-muted);

    font-size: 9px;

    line-height: 1.55;
}



/* ==========================================================
   SERVICE IMAGES
========================================================== */

.service-image-composition {
    position: relative;

    grid-column: span 6;

    padding: 0 0 50px 25px;
}


.service-image-main {
    width: 100%;

    height: 445px;

    overflow: hidden;

    border-radius: 13px;

    background: #e2e8f0;

    box-shadow:
        0 18px 45px rgba(18,48,88,0.13);
}


.service-image-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.service-image-secondary {
    position: absolute;

    left: -25px;
    bottom: 0;

    width: 52%;
    height: 210px;

    overflow: hidden;

    border: 5px solid #ffffff;

    border-radius: 11px;

    background: #e2e8f0;

    box-shadow:
        0 18px 40px rgba(18,48,88,0.18);
}


.service-image-secondary img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* ==========================================================
   SHARED SECTION HEADING
========================================================== */

.service-section-heading {
    max-width: 650px;

    margin-bottom: 45px;
}


.service-section-heading.centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;
}


.service-section-heading h2 {
    margin: 15px 0 8px;

    color: var(--service-navy);

    font-size: clamp(27px, 3vw, 37px);

    line-height: 1.2;

    letter-spacing: -0.035em;
}


.service-section-heading p {
    margin: 0;

    color: var(--service-muted);

    font-size: 13px;

    line-height: 1.7;
}



/* ==========================================================
   CAPABILITIES
========================================================== */

.service-capabilities-section {
    padding: 90px 0;

    background: #f8fafc;

    border-top: 1px solid #eef2f7;

    border-bottom: 1px solid #eef2f7;
}


.service-capabilities-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


.service-capability-card {
    min-height: 170px;

    padding: 24px;

    border: 1px solid var(--service-border);

    border-radius: 11px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.service-capability-card:hover {
    transform: translateY(-4px);

    border-color: #cbd5e1;

    box-shadow:
        0 12px 30px rgba(18,48,88,0.07);
}


.service-capability-icon {
    width: 39px;
    height: 39px;

    margin-bottom: 18px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background: #ecfdf5;

    color: var(--service-green);
}


.service-capability-icon .material-symbols-outlined {
    font-size: 19px;
}


.service-capability-card h3 {
    margin: 0 0 8px;

    color: var(--service-navy);

    font-size: 15px;
}


.service-capability-card p {
    margin: 0;

    color: var(--service-muted);

    font-size: 11px;

    line-height: 1.65;
}



/* ==========================================================
   APPROACH
========================================================== */

.service-approach-section {
    padding: 95px 0;

    background: #ffffff;
}


.service-approach-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;
}


.service-approach-card {
    position: relative;

    min-height: 245px;

    padding: 25px;

    border-right: 1px solid #e2e8f0;
}


.service-approach-card:last-child {
    border-right: 0;
}


.service-approach-number {
    display: block;

    margin-bottom: 25px;

    color: #dbe4ef;

    font-family: "Plus Jakarta Sans", sans-serif;

    font-size: 31px;

    font-weight: 800;
}


.service-approach-card h3 {
    margin: 0 0 11px;

    color: var(--service-navy);

    font-size: 15px;

    line-height: 1.4;
}


.service-approach-card p {
    margin: 0 0 20px;

    color: var(--service-muted);

    font-size: 11px;

    line-height: 1.7;
}


.service-approach-footer {
    position: absolute;

    left: 25px;
    bottom: 22px;

    color: var(--service-green);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}



/* ==========================================================
   QUOTE SECTION
========================================================== */

.service-quote-section {
    padding: 95px 0;

    background: #f8fafc;

    border-top: 1px solid #eef2f7;
}


.service-quote-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.85fr);

    gap: 70px;

    align-items: center;
}



/* ==========================================================
   CONTACT SIDE
========================================================== */

.service-contact-info h2 {
    max-width: 520px;

    margin: 17px 0 16px;

    color: var(--service-navy);

    font-size: clamp(28px, 3vw, 38px);

    line-height: 1.2;

    letter-spacing: -0.035em;
}


.service-contact-info > p {
    max-width: 540px;

    margin: 0 0 30px;

    color: var(--service-muted);

    font-size: 13px;

    line-height: 1.75;
}


.service-direct-contact {
    max-width: 480px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.service-direct-contact > a {
    padding: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    border: 1px solid #e2e8f0;

    border-radius: 9px;

    background: #ffffff;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}


.service-direct-contact > a:hover {
    transform: translateX(3px);

    border-color: #bbf7d0;
}


.service-contact-icon {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 8px;

    background: #eff6ff;

    color: var(--service-navy);
}


.service-contact-icon.whatsapp {
    background: #dcfce7;

    color: var(--service-green);
}


.service-contact-icon .material-symbols-outlined {
    font-size: 19px;
}


.service-direct-contact small {
    display: block;

    margin-bottom: 2px;

    color: #94a3b8;

    font-size: 8px;

    font-weight: 800;
}


.service-direct-contact strong {
    color: var(--service-navy);

    font-size: 13px;
}



/* ==========================================================
   QUOTE CARD
========================================================== */

.service-quote-card {
    padding: 36px;
    border: 1px solid #28425d;
    border-radius: 24px;
    background: #001b3c;
    color: #ffffff;
    min-width: 0;
}

.service-quote-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -1px;
}

.service-quote-card > p {
    margin: 0 0 24px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.5;
}

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

.service-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    grid-column: 1 / -1;
}

.service-form-group:has(#servicePropertyType),
.service-form-group:has(#serviceRequirement) {
    grid-column: auto;
}

.service-form-group label {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
}

.required-mark { color: #22c55e; }

.service-form-group input,
.service-form-group select,
.service-form-group textarea {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 15px;
    border: 1px solid #39516b;
    border-radius: 13px;
    outline: 0;
    background: #1b334f;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    color-scheme: dark;
}

.service-form-group select { background: #00152d; }
.service-form-group input::placeholder,
.service-form-group textarea::placeholder { color: #94a3b8; opacity: 1; }
.service-form-group textarea { min-height: 90px; resize: vertical; }

.service-form-group input:focus,
.service-form-group select:focus,
.service-form-group textarea:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}

.service-whatsapp-submit {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 0;
    border-radius: 13px;
    background: #15803d;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.service-whatsapp-submit:hover { background: #166534; }
.service-whatsapp-icon { display: flex; }
.service-whatsapp-icon svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 1024px), (pointer: coarse) {
    .service-form-group input,
    .service-form-group select,
    .service-form-group textarea { font-size: 16px; }
}

@media (max-width: 420px) {
    .service-form-group:has(#servicePropertyType),
    .service-form-group:has(#serviceRequirement) { grid-column: 1 / -1; }
    .service-quote-card h3 { font-size: 26px; }
}

/* ==========================================================
   RELATED SERVICES
========================================================== */

.related-services-section {
    padding: 90px 0;

    background: #ffffff;
}


.related-services-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


.related-service-card {
    overflow: hidden;

    border: 1px solid #e2e8f0;

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 4px 18px rgba(18,48,88,0.035);
}


.related-service-image {
    height: 190px;

    overflow: hidden;
}


.related-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}


.related-service-card:hover img {
    transform: scale(1.045);
}


.related-service-content {
    padding: 20px;
}


.related-service-content h3 {
    margin: 0 0 8px;

    color: var(--service-navy);

    font-size: 15px;
}


.related-service-content p {
    margin: 0 0 15px;

    color: var(--service-muted);

    font-size: 10px;

    line-height: 1.6;
}


.related-service-content a {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--service-green);

    font-size: 10px;

    font-weight: 700;
}


.related-service-content a .material-symbols-outlined {
    font-size: 14px;
}



/* ==========================================================
   FINAL CTA
========================================================== */

.service-final-cta-section {
    padding: 0 0 90px;

    background: #ffffff;
}


.service-final-cta {
    min-height: 190px;

    padding: 38px 44px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    border-radius: 13px;

    background:
        linear-gradient(
            110deg,
            #001b3c,
            #123058
        );

    box-shadow:
        0 14px 34px rgba(0,27,60,0.15);
}


.service-final-cta > div:first-child {
    max-width: 650px;
}


.service-final-cta > div:first-child > span {
    color: #86efac;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.service-final-cta h2 {
    margin: 8px 0;

    color: #ffffff;

    font-size: 26px;
}


.service-final-cta p {
    margin: 0;

    color: #cbd5e1;

    font-size: 10px;

    line-height: 1.65;
}


.service-final-actions {
    display: flex;

    gap: 10px;

    flex-shrink: 0;
}


.service-final-primary,
.service-final-secondary {
    min-height: 43px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 6px;

    font-size: 10px;

    font-weight: 700;
}


.service-final-primary {
    background: var(--service-green);

    color: #ffffff;
}


.service-final-secondary {
    border: 1px solid rgba(255,255,255,0.30);

    background: rgba(255,255,255,0.08);

    color: #ffffff;
}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .service-introduction-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .service-intro-content,
    .service-image-composition {
        grid-column: auto;
    }


    .service-image-composition {
        max-width: 700px;

        width: 100%;

        margin: auto;
    }


    .service-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .service-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .service-approach-card:nth-child(2) {
        border-right: 0;
    }


    .service-approach-card {
        border-bottom: 1px solid #e2e8f0;
    }


    .service-quote-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .service-quote-card {
        max-width: 650px;
    }

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .service-banner {
        height: 350px;
    }


    .service-banner h1 {
        font-size: 37px;
    }


    .service-introduction {
        padding: 70px 0 85px;
    }


    .service-highlights {
        grid-template-columns: 1fr;
    }


    .service-image-main {
        height: 350px;
    }


    .service-image-secondary {
        left: 10px;

        width: 58%;
        height: 160px;
    }


    .service-capabilities-section,
    .service-approach-section,
    .service-quote-section,
    .related-services-section {
        padding: 70px 0;
    }


    .service-capabilities-grid {
        grid-template-columns: 1fr;
    }


    .service-approach-grid {
        grid-template-columns: 1fr;
    }


    .service-approach-card {
        min-height: auto;

        padding: 25px 0 55px;

        border-right: 0;

        border-bottom: 1px solid #e2e8f0;
    }


    .service-approach-footer {
        left: 0;
    }


    .service-quote-card {
        padding: 25px 20px;
    }


    .related-services-grid {
        grid-template-columns: 1fr;
    }


    .service-final-cta {
        padding: 30px 24px;

        flex-direction: column;

        align-items: flex-start;
    }


    .service-final-actions {
        width: 100%;

        flex-direction: column;
    }


    .service-final-primary,
    .service-final-secondary {
        width: 100%;
    }

}
/* Gallery shown only for the Painting service. */
.painting-gallery-section[hidden] { display: none; }
.painting-gallery-section { padding: 70px 0; background: #f7f9fc; }
.painting-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.painting-gallery-grid a { display: block; overflow: hidden; border-radius: 14px; background: #e2e8f0; }
.painting-gallery-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s ease; }
.painting-gallery-grid a:hover img { transform: scale(1.03); }
.painting-gallery-grid a:focus-visible { outline: 3px solid #15803d; outline-offset: 4px; }
@media (max-width: 900px) { .painting-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .painting-gallery-grid { grid-template-columns: 1fr; } .painting-gallery-section { padding: 45px 0; } }
@media (prefers-reduced-motion: reduce) { .painting-gallery-grid img { transition: none; } }
.service-photo-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 70px 80px 32px; border: 0; background: transparent; color: white; }
.service-photo-viewer::backdrop {
    background: rgba(18, 48, 88, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.service-photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.service-photo-viewer figure { margin: 0; max-width: 100%; text-align: center; }
.service-photo-viewer img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100dvh - 155px); object-fit: contain; margin: auto; border-radius: 8px; }
.service-photo-viewer figcaption { margin-top: 14px; font-size: 16px; color: #d1fae5; }
.service-photo-viewer button { position: absolute; width: 48px; height: 48px; border: 1px solid #86efac; border-radius: 50%; background: #15803d; color: white; cursor: pointer; font-size: 24px; display: grid; place-items: center; }
.service-photo-viewer button:hover { background: #166534; }
.service-photo-viewer button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.service-photo-viewer .photo-close { right: 20px; top: 16px; font-size: 34px; }
.service-photo-viewer .photo-prev { left: 16px; top: calc(50% - 24px); }
.service-photo-viewer .photo-next { right: 16px; top: calc(50% - 24px); }
@media (max-width: 600px) { .service-photo-viewer { padding: 76px 12px 100px; } .service-photo-viewer img { max-height: calc(100dvh - 220px); } .service-photo-viewer .photo-prev, .service-photo-viewer .photo-next { top: auto; bottom: 24px; } .service-photo-viewer .photo-prev { left: calc(50% - 64px); } .service-photo-viewer .photo-next { right: calc(50% - 64px); } }

/* Sections exclusive to Fabrication. */
#fabricationSections[hidden] { display: none; }
#fabricationSections .fabrication-capabilities, #fabricationSections .fabrication-showcase { padding: 70px 0; }
#fabricationSections .fabrication-capabilities, #fabricationSections .fabrication-showcase:last-child { background: #f7f9fc; }
#fabricationSections .fabrication-capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
#fabricationSections .fabrication-capability { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: white; }
#fabricationSections .fabrication-capability > img { width: 100%; height: 280px; object-fit: cover; display: block; }
#fabricationSections .fabrication-capability > div { padding: 28px; }
#fabricationSections .fabrication-capability .material-symbols-outlined { color: #15803d; margin-bottom: 12px; }
#fabricationSections .fabrication-capability h3 { color: #123058; font-size: 24px; margin-bottom: 10px; }
#fabricationSections .fabrication-capability h4 { color: #15803d; font-size: 17px; margin-bottom: 14px; }
#fabricationSections .fabrication-capability p { color: #64748b; line-height: 1.75; }
@media(max-width:700px) { #fabricationSections .fabrication-capability-grid { grid-template-columns: 1fr; } #fabricationSections .fabrication-capabilities, #fabricationSections .fabrication-showcase { padding: 45px 0; } }

#fabricationSections a.fabrication-capability { display: block; color: inherit; text-decoration: none; cursor: pointer; }
#fabricationSections a.fabrication-capability:hover { border-color: #15803d; }
#fabricationSections a.fabrication-capability:focus-visible { outline: 3px solid #15803d; outline-offset: 4px; }
#fabricationSections .fabrication-showcase { scroll-margin-top: 110px; }