/* QSTI Services page — shared palette and header live in qsti-home.css */
:root {
    --service-red: #FF0000;
    --service-dark-red: #930707;
    --service-nav-red: #A90D0D;
    --service-navy: #040F28;
    --service-gold: #FDBE33;
    --service-light: #F4F6F8;
}
html { scroll-behavior: smooth; scroll-padding-top: 150px; }

/* Original QSTI Services page-header banner retained from the supplied page. */
.service-page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 38px 16px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(rgba(255, 55, 55, .62), rgba(255, 55, 55, .48)), url("../img/service-header.jpg") center center / cover no-repeat;
    border-top: 3px dotted rgba(255,255,255,.45);
}
.service-page-header-content { position: relative; z-index: 1; }
.service-page-header h1 {
    margin: 0 0 3px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: clamp(2.25rem, 4vw, 3.1rem);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}
.service-page-header p {
    margin: 0;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: clamp(.95rem, 1.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}
.service-page-header p span { color: #111; }

/* Sticky bar sits directly below the shared 76px site navigation. */
.service-shortcuts {
    position: sticky;
    top: 76px;
    z-index: 1020;
    padding: 15px 0;
    background: rgba(244, 246, 248, .98);
    border-bottom: 1px solid rgba(4, 15, 40, .08);
    box-shadow: 0 5px 14px rgba(4, 15, 40, .06);
    backdrop-filter: blur(8px);
}
.service-shortcuts-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.service-shortcuts-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--service-red);
    border-radius: 11px;
    background: var(--service-dark-red);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.service-shortcuts-list a:hover,
.service-shortcuts-list a:focus-visible {
    background: var(--service-red);
    color: #fff;
    transform: translateY(-1px);
}
.service-shortcuts-list a:focus-visible { outline: 3px solid var(--service-gold); outline-offset: 2px; }
.section-title { margin: 0; color: var(--service-navy); font-family: Roboto, sans-serif; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -.025em; }
.service-jump-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 178px;
    height: 100%;
    padding: 23px;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #fff;
    color: var(--service-navy);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(4,15,40,.045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.service-jump-card:hover { transform: translateY(-4px); border-color: rgba(169,13,13,.45); box-shadow: 0 14px 30px rgba(4,15,40,.10); color: var(--service-dark-red); }
.service-jump-card > span:nth-child(2) { max-width: 190px; padding-right: 12px; font-weight: 800; line-height: 1.4; }
.service-jump-card > .bi-arrow-right { position: absolute; right: 20px; bottom: 22px; color: var(--service-dark-red); }
.service-jump-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 18px; border-radius: 7px; background: #fff0f0; color: var(--service-dark-red); font-size: 1.35rem; }
.service-section { padding: 58px 0; background: var(--service-light); scroll-margin-top: 150px; }
.service-section-alt { background: #fff; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 32px; }
.section-heading-row > div { flex: 1 1 50%; }
.section-heading-row > p { max-width: 440px; margin: 0 0 5px; color: #606a7a; line-height: 1.75; }
.service-detail-card { margin-top: 22px; overflow: hidden; border: 1px solid #e7eaf0; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(4,15,40,.055); }
.service-detail-copy { position: relative; padding: clamp(25px, 4vw, 45px); }
.service-number { display: inline-block; margin-bottom: 13px; color: var(--service-dark-red); font-size: .76rem; font-weight: 900; letter-spacing: .14em; }
.service-detail-copy h3, .investigation-copy h3, .monitoring-panel h3, .foundation-panel h3, .service-intro-panel h3 { margin-bottom: 15px; color: var(--service-navy); font-family: Roboto, sans-serif; font-size: 1.55rem; font-weight: 800; }
.service-detail-copy p, .investigation-copy p, .service-intro-panel p, .monitoring-panel p, .foundation-panel p { color: #5d6676; line-height: 1.8; }
.service-image-wrap { min-height: 300px; padding: 15px; display: flex; align-items: center; justify-content: center; background: #f8f9fb; }
.service-image-wrap > img { display: block; width: 100%; height: 100%; max-height: 410px; object-fit: contain; border-radius: 5px; }
.service-image-stack { flex-direction: column; gap: 12px; }
.service-image-stack > img { height: auto; max-height: 250px; flex: 1 1 auto; }
.service-detail-copy h4 { margin: 23px 0 10px; color: var(--service-navy); font-size: 1rem; font-weight: 800; }
.service-check-list { padding-left: 0; list-style: none; }
.service-check-list li { position: relative; margin: 0 0 9px; padding-left: 25px; color: #5d6676; line-height: 1.65; }
.service-check-list li::before { content: "\F26A"; position: absolute; left: 0; top: 1px; color: var(--service-dark-red); font-family: "bootstrap-icons"; font-weight: 700; }
.service-intro-panel { padding: clamp(23px, 3.5vw, 36px); border-left: 4px solid var(--service-gold); border-radius: 0 8px 8px 0; background: var(--service-light); }
.investigation-card { overflow: hidden; border: 1px solid #e7eaf0; border-radius: 9px; background: #fff; box-shadow: 0 8px 25px rgba(4,15,40,.05); }
.investigation-image { height: 260px; padding: 14px; background: #f7f8fa; }
.investigation-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.investigation-copy { padding: 25px; }
.supporting-site-image { display: block; width: 100%; max-height: 390px; object-fit: contain; padding: 12px; border-radius: 9px; background: var(--service-light); }
.monitoring-panel { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; padding: clamp(25px, 4vw, 48px); border: 1px solid #e7eaf0; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(4,15,40,.05); }
.monitoring-icon, .foundation-icon { display: grid; place-items: center; width: 70px; height: 70px; flex: 0 0 auto; border-radius: 10px; background: #fff0f0; color: var(--service-dark-red); font-size: 2rem; }
.foundation-panel { display: flex; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; padding: clamp(28px, 4.5vw, 54px); border-radius: 10px; background: var(--service-navy); }
.foundation-panel-content { max-width: 760px; }
.foundation-panel h3 { margin-top: 22px; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.foundation-panel p { color: rgba(255,255,255,.78); }
.foundation-icon { width: 58px; height: 58px; background: var(--service-gold); color: var(--service-navy); font-size: 1.7rem; }
.foundation-panel-art { display: flex; align-items: center; gap: 15px; color: rgba(253,190,51,.8); font-size: clamp(2rem, 5vw, 4rem); }
.foundation-panel-art .bi-arrow-down-up { font-size: 1.5rem; }
.service-quote-section { padding: 75px 0; background: #f4f6f8; }
.quote-mark { height: 54px; color: var(--service-dark-red); font-family: Georgia, serif; font-size: 5.5rem; line-height: 1; }
.quote-text { max-width: 850px; margin: 16px auto 18px; color: var(--service-navy); font-family: Roboto, sans-serif; font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 600; line-height: 1.7; }
.quote-attribution { color: var(--service-dark-red); font-weight: 800; }
.service-cta { padding: 55px 0; background: #fff; }
.service-cta h2 { margin: 0 0 10px; color: var(--service-navy); font-family: Roboto, sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; }
.service-cta p { color: #606a7a; line-height: 1.7; }
.service-cta-button { flex: 0 0 auto; }
@media (max-width: 767.98px) {
    .service-page-header { min-height: 185px; padding: 34px 12px; background-position: 55% center; }
    .service-page-header p { max-width: 700px; margin-inline: auto; }
    .service-shortcuts { top: 70px; padding: 10px 0; }
    .service-shortcuts-list { gap: 7px; }
    .service-shortcuts-list a { flex: 1 1 calc(50% - 7px); padding: 8px 9px; font-size: .82rem; }
    html { scroll-padding-top: 138px; }
    .service-section { scroll-margin-top: 138px; }
    .service-section { padding: 54px 0; }
    .section-heading-row { display: block; }
    .section-heading-row > p { margin-top: 15px; }
    .service-image-wrap { min-height: 220px; }
    .service-image-wrap > img { max-height: 300px; }
    .monitoring-panel { grid-template-columns: 1fr; gap: 20px; }
    .foundation-panel { display: block; }
    .foundation-panel-art { margin-top: 30px; justify-content: flex-start; }
    .service-quote-section { padding: 55px 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}