/* ==========================================================
   SERVICE PAGE LAYOUT
========================================================== */

.service-page{

    flex:1;

    display:flex;

    flex-direction:column;


}

.service-page .container{

    width:min(1280px,92%);

}
/* ==========================================================
   SERVICE HERO
========================================================== */

.service-page .service-hero{

    position:relative;

    width:100%;

    height:40vh;

    min-height:340px;

    max-height:700px;

    overflow:hidden;

    flex-shrink:0;

}

.service-page .hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.service-page .hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.service-page .hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.45)
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    padding:20px;

}

.service-page .service-label{

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:12px;

    opacity:.9;

}

.service-page .hero-overlay h1{

    font-size:3rem;

    margin-bottom:15px;

}

.service-page .hero-overlay p{

    max-width:700px;

    line-height:1.8;

    font-size:1.05rem;

}


/* ==========================================================
   SERVICE DIVIDER
========================================================== */

.service-page .service-title-bar{

    height:52px;

    background:#b52025;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}
.service-page .service-title h2{

    margin:0;

    font-size:1.65rem;

    font-weight:700;

    letter-spacing:.8px;

    color:#fff;

}
.service-page .service-arrow{

    background:none;

    border:none;

    color:#fff;

    font-size:1.8rem;

    cursor:pointer;

    transition:.25s;

}

.service-page .service-arrow:hover{

    transform:scale(1.15);

}


/* ==========================================================
   SERVICE CONTENT
========================================================== */

.service-page .service-content{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding: 30px 0;

}

/* ==========================================================
   GRID
========================================================== */

.service-page .service-grid{

    display:grid;

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

    align-items:stretch;

    gap:35px;

    margin:0;

}


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

.service-page .service-card{

    min-height:430px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

}

.service-page .service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.18);

}


/* ==========================================================
   CARD IMAGE
========================================================== */

.service-page .card-image{

    height:180px;

    background:#d5d5d5;

    overflow:hidden;

}

.service-page .card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.service-page .service-card:hover .card-image img{

    transform:scale(1.05);

}


/* ==========================================================
   CARD CONTENT
========================================================== */

.service-page .card-content{

    flex:1;

    padding:28px 28px 42px;

}

.service-page .card-content h3{

    color:#132c58;

    margin-bottom:15px;

}

.service-page .card-content p{

    color:#666;

    line-height:1.8;

}


/* ==========================================================
   MODAL
========================================================== */

.service-page .service-viewer{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.72);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

    backdrop-filter:blur(6px);

}

.service-page .service-viewer.active{

    opacity:1;

    visibility:visible;

}

.service-page .service-modal{

    background:#fff;

    width:min(1200px,94%);

    max-height:92vh;

    overflow-y:auto;

    border-radius:22px;

    padding:40px;

    transform:scale(.9);

    transition:.35s;

    position:relative;

}

.service-page .service-viewer.active .service-modal{

    transform:scale(1);

}

.service-page .service-close{

    position:absolute;

    right:22px;

    top:15px;

    font-size:34px;

    border:none;

    background:none;

    cursor:pointer;

    color:#666;

}

.service-page .service-close:hover{

    color:#c1121f;

}

.service-page #serviceTitle{

    color:#132c58;

    margin-bottom:25px;

}

.service-page #serviceBody{

    color:#555;

    line-height:1.9;

}


/* ==========================================================
   SERVICE FORM
========================================================== */

.service-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}


.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    font-weight:600;

    color:#132c58;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #d9d9d9;

    border-radius:12px;

    font-size:15px;

    transition:.25s;

    background:#fff;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#c1121f;

    box-shadow:0 0 0 4px rgba(193,18,31,.10);

}

.form-group textarea{

    resize:vertical;

    min-height:140px;

}

.service-submit{

    margin-top:10px;

    padding:15px;

    border:none;

    border-radius:14px;

    background:#c1121f;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.service-submit:hover{

    background:#9b0d18;

    transform:translateY(-2px);

}


/* ==========================================================
   MODAL IMAGE
========================================================== */

.service-page .modal-image{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:16px;

    display:block;

    margin-bottom:25px;

}


/* ==========================================================
   MODAL NEWS
========================================================== */

.service-page #serviceBody ul{

    margin-top:18px;

    padding-left:22px;

}

.service-page #serviceBody li{

    margin-bottom:10px;

    color:#555;

}

/* ==========================================================
   NEWS MODE MODAL
========================================================== */

.service-page .service-modal.news-mode{

    width:min(1280px,94vw);
    max-width:1280px;

    padding:28px 30px 30px;

}


/* ==========================================================
   NEWS PREVIEW WRAPPER
========================================================== */

.service-page .modal-news-preview{

    position:relative;

    width:100%;

    margin-top:18px;

    border-radius:22px;

    overflow:hidden;

    background:#0d1420;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 50px rgba(0,0,0,.16),
        inset 0 0 0 1px rgba(255,255,255,.03);

}


/* ==========================================================
   NEWS PREVIEW IMAGE
========================================================== */

.service-page .modal-news-image{

    display:block;

    width:100%;
    height:auto;

}


/* ==========================================================
   NEWS PREVIEW BADGE
========================================================== */

.service-page .modal-news-badge{

    position:absolute;

    top:18px;
    right:18px;

    padding:10px 14px;

    background:rgba(8,12,20,.78);

    color:#fff;

    font-size:12px;
    font-weight:700;

    letter-spacing:.3px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

}


/* ==========================================================
   NEWS MODE MOBILE
========================================================== */

@media (max-width:768px){

    .service-page .service-card{

        min-height:0;

    }

    .service-page .card-content{

        padding:24px 24px 34px;

    }

    .service-page .service-modal.news-mode{

        width:96vw;

        padding:22px 14px 16px;

    }

    .service-page .modal-news-preview{

        margin-top:14px;

        border-radius:16px;

    }

    .service-page .modal-news-badge{

        top:12px;
        right:12px;

        padding:8px 12px;

        font-size:11px;

    }

}


/* ==========================================================
   PDF VIEWER
========================================================== */

.service-page #pdfViewerContainer{

    display:none;

    width:100%;
    max-width:1200px;

    margin:0 auto;

}


/* ==========================================================
   PDF MODE — MODAL LAYOUT
========================================================== */

.service-page .service-modal.pdf-mode{

    width:min(1280px,94vw);
    height:92vh;
    max-height:92vh;

    display:flex;
    flex-direction:column;

    padding:28px 32px 20px;

    overflow:hidden;

}

.service-page .service-modal.pdf-mode #serviceTitle{

    flex-shrink:0;

    margin-bottom:18px;

}

.service-page .service-modal.pdf-mode #pdfViewerContainer{

    flex:1;

    min-height:0;

    display:flex !important;
    flex-direction:column;

}


/* ==========================================================
   PDF DISPLAY AREA
========================================================== */

.service-page .pdf-canvas-area{

    flex:1;

    width:100%;
    min-height:0;

    display:flex;

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

    overflow:auto;

    padding:20px 18px 28px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;

    background:linear-gradient(
        145deg,
        #303236,
        #202226
    );

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.18),
        0 14px 35px rgba(0,0,0,.16);

    overscroll-behavior:contain;
    scrollbar-gutter:stable;

    touch-action:pan-x pan-y;

    -webkit-overflow-scrolling:touch;

    user-select:none;

}

/* ==========================================================
   PDF PAGE
========================================================== */

.service-page #pdfCanvas{

    display:block;

    width:auto;
    max-width:100%;

    height:auto;

    margin:0 auto;

    background:#fff;

    border-radius:5px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.14),
    0 18px 42px rgba(0,0,0,.28);

}


/* ==========================================================
   CUSTOM SCROLLBAR
========================================================== */

.service-page .pdf-canvas-area::-webkit-scrollbar{

    width:12px;
    height:12px;
}

.service-page .pdf-canvas-area::-webkit-scrollbar-track{

    background:#25272a;

    border-radius:20px;

}

.service-page .pdf-canvas-area::-webkit-scrollbar-thumb{

    background:#777b82;

    border:2px solid #25272a;
    border-radius:20px;

}

.service-page .pdf-canvas-area::-webkit-scrollbar-thumb:hover{

    background:#9499a1;

}


/* ==========================================================
   PDF TOOLBAR
========================================================== */

.service-page .pdf-toolbar{

    flex-shrink:0;

    width:min(620px,100%);

    display:grid;

    grid-template-columns:
        minmax(130px,1fr)
        minmax(140px,auto)
        minmax(130px,1fr);

    align-items:center;

    gap:14px;

    margin:16px auto 0;

    padding:11px 13px;

    background:#f5f6f8;

    border:1px solid #e1e4e8;
    border-radius:16px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

}


/* ==========================================================
   TOOLBAR BUTTONS
========================================================== */

.service-page .pdf-toolbar button{

    width:100%;

    padding:11px 18px;

    border:none;
    border-radius:10px;

    background:#c1121f;

    color:#fff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease;

    box-shadow:0 7px 16px rgba(193,18,31,.18);

}

.service-page .pdf-toolbar button:hover:not(:disabled){

    background:#9b0d18;

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(193,18,31,.24);

}

.service-page .pdf-toolbar button:active:not(:disabled){

    transform:translateY(0);

}

.service-page .pdf-toolbar button:disabled{

    background:#e7a4a9;

    color:rgba(255,255,255,.9);

    cursor:not-allowed;

    box-shadow:none;

}


/* ==========================================================
   PAGE INFORMATION
========================================================== */

.service-page #pdfPageInfo{

    min-width:140px;

    padding:10px 16px;

    text-align:center;

    color:#132c58;

    font-size:14px;
    font-weight:800;

    background:#fff;

    border:1px solid #dde1e6;
    border-radius:10px;

}


/* ==========================================================
   BACK BUTTON
========================================================== */

.service-page .pdf-back-button{

    flex-shrink:0;

    display:block;

    width:max-content;
    min-width:180px;

    margin:14px auto 0;

    padding:11px 22px;

}


/* ==========================================================
   MODAL BODY LOCK
========================================================== */

body.modal-open{

    overflow:hidden;

}


/* ==========================================================
   RESPONSIVE PDF VIEWER
========================================================== */

@media (max-width:768px){

    .service-page .service-modal.pdf-mode{

        width:96vw;
        height:92vh;

        padding:22px 14px 14px;

    }

    .service-page .pdf-canvas-area{

        padding:12px 8px;

        border-radius:12px;

    }

    .service-page .pdf-toolbar{

        grid-template-columns:1fr 1fr;

        gap:10px;

        padding:10px;

    }

    .service-page #pdfPageInfo{

        grid-column:1 / -1;
        grid-row:1;

        width:100%;

    }

}

/* ==========================================================================
   KORNET EXPRESS — GLOBAL SERVICES MOBILE CLEANUP
   ==========================================================================
   This section is intentionally appended to the bottom of Services.css so it
   safely refines the existing six-page Services system without rebuilding it.

   GREY EDIT GUIDE:
   Search "SERVICES MOBILE — EDIT HERE" in VS Code.

   QUICK EDIT MAP:
   01 — Shared visual polish
   02 — Tablet grid
   03 — Mobile Hero
   04 — Mobile title/navigation bar
   05 — Mobile cards
   06 — Mobile modal and form
   07 — Mobile PDF viewer
   08 — Small-phone refinements
========================================================================== */


/* ==========================================================================
   01 — SHARED VISUAL POLISH
   --------------------------------------------------------------------------
   Keeps the existing design while making spacing, borders and touch states
   feel more deliberate.
========================================================================== */

.service-page {
    --service-red: #c1121f;
    --service-red-dark: #980e18;
    --service-blue: #071d49;
    --service-blue-mid: #132c58;
    --service-surface: #ffffff;
    --service-page-bg: #f4f6f9;
    --service-line: rgba(7, 29, 73, 0.10);
    --service-shadow: rgba(7, 29, 73, 0.12);

    background:
        radial-gradient(
            circle at 8% 24%,
            rgba(193, 18, 31, 0.045),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(7, 29, 73, 0.055),
            transparent 28%
        ),
        var(--service-page-bg);
}

.service-page .service-hero {
    isolation: isolate;
}

.service-page .hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7, 18, 39, 0.18) 0%,
            rgba(7, 18, 39, 0.38) 56%,
            rgba(7, 18, 39, 0.64) 100%
        );
}

.service-page .hero-overlay h1 {
    text-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.30);
}

.service-page .service-title-bar {
    min-height: 56px;
    height: auto;

    background:
        linear-gradient(
            100deg,
            var(--service-red-dark) 0%,
            var(--service-red) 56%,
            #ab1620 100%
        );
}

.service-page .service-arrow {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 50%;

    line-height: 1;
}

.service-page .service-arrow:hover,
.service-page .service-arrow:focus-visible {
    background:
        rgba(255, 255, 255, 0.13);

    outline: none;
}

.service-page .service-content {
    background: transparent;
}

.service-page .service-card {
    position: relative;

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

    box-shadow:
        0 12px 32px
        rgba(7, 29, 73, 0.08);
}

.service-page .service-card::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--service-red),
            var(--service-blue)
        );

    opacity: 0;

    transition:
        opacity .28s ease;
}

.service-page .service-card:hover::after,
.service-page .service-card:focus-visible::after {
    opacity: 1;
}

.service-page .service-card:focus-visible {
    outline:
        3px solid
        rgba(193, 18, 31, 0.20);

    outline-offset: 4px;
}

.service-page .service-viewer {
    padding: 18px;
}

.service-page .service-modal {
    border:
        1px solid
        rgba(255, 255, 255, 0.78);

    box-shadow:
        0 34px 100px
        rgba(0, 0, 0, 0.30);
}

.service-page .service-close {
    z-index: 4;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--service-blue);

    background: #f3f5f8;

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

    border-radius: 50%;

    line-height: 1;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.service-page .service-close:hover,
.service-page .service-close:focus-visible {
    color: #ffffff;

    background: var(--service-red);

    outline: none;

    transform: rotate(90deg);
}

.service-page #serviceTitle {
    padding-right: 54px;

    line-height: 1.18;
}


/* ==========================================================================
   PREVENT DESKTOP HOVER EFFECTS FROM STICKING ON TOUCH DEVICES
========================================================================== */

@media (hover: none) {

    .service-page .service-card:hover {
        transform: none;

        box-shadow:
            0 12px 32px
            rgba(7, 29, 73, 0.08);
    }

    .service-page .service-card:hover .card-image img {
        transform: none;
    }

}


/* ==========================================================================
   02 — SERVICES MOBILE — EDIT HERE: TABLET GRID
========================================================================== */

@media (min-width: 769px) and (max-width: 1100px) {

    .service-page .service-content {
        align-items: flex-start;

        padding:
            42px 0 68px;
    }

    .service-page .service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px;
    }

    .service-page .service-card {
        min-height: 390px;
    }

    .service-page .service-card:last-child {
        grid-column: 1 / -1;

        width:
            min(100%, calc(50% - 12px));

        justify-self: center;
    }

}


/* ==========================================================================
   03 — SERVICES MOBILE — EDIT HERE: MOBILE HERO
========================================================================== */

@media (max-width: 768px) {

    .service-page .container {
        width:
            min(100% - 28px, 1280px);
    }

    .service-page .service-hero {
        /*
           EDIT HERE — phone Hero height.
        */
        height:
            clamp(
                285px,
                48vh,
                390px
            );

        min-height: 285px;
        max-height: none;
    }

    .service-page .hero-overlay {
        justify-content: flex-end;

        align-items: flex-start;

        padding:
            34px
            22px;

        text-align: left;

        background:
            linear-gradient(
                180deg,
                rgba(7, 18, 39, 0.08) 0%,
                rgba(7, 18, 39, 0.20) 42%,
                rgba(7, 18, 39, 0.82) 100%
            );
    }

    .service-page .service-label {
        margin-bottom: 8px;

        font-size: .76rem;
        letter-spacing: .14em;
    }

    .service-page .hero-overlay h1 {
        margin: 0;

        /*
           EDIT HERE — phone service-name size.
        */
        font-size:
            clamp(
                2.05rem,
                10vw,
                3rem
            );

        line-height: 1.02;
    }


    /* ======================================================================
       04 — SERVICES MOBILE — EDIT HERE: TITLE / PREVIOUS / NEXT BAR
    ====================================================================== */

    .service-page .service-title-bar {
        min-height: 84px;

        display: grid;

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

        gap: 7px;

        padding:
            10px
            8px;

        box-shadow:
            0 7px 20px
            rgba(7, 29, 73, 0.18);
    }

    .service-page .service-title {
        min-width: 0;
    }

    .service-page .service-title h2 {
        margin: 0;

        /*
           EDIT HERE — mobile company-value statement size.
        */
        font-size:
            clamp(
                .84rem,
                3.65vw,
                1rem
            );

        line-height: 1.38;
        letter-spacing: .02em;

        text-align: center;
        text-wrap: balance;
    }

    .service-page .service-arrow {
        width: 42px;
        height: 42px;

        font-size: 1.35rem;

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

        border:
            1px solid
            rgba(255, 255, 255, 0.13);
    }


    /* ======================================================================
       05 — SERVICES MOBILE — EDIT HERE: CARDS
    ====================================================================== */

    .service-page .service-content {
        min-height: 0;

        align-items: flex-start;

        padding:
            34px 0 58px;
    }

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

        gap: 18px;
    }

    .service-page .service-card {
        min-height: 0;

        border-radius: 18px;
    }

    .service-page .card-image {
        /*
           EDIT HERE — phone card-image height.
        */
        height: 168px;
    }

    .service-page .card-content {
        padding:
            22px
            22px
            28px;
    }

    .service-page .card-content h3 {
        margin-bottom: 10px;

        font-size: 1.18rem;
        line-height: 1.25;
    }

    .service-page .card-content p {
        margin: 0;

        font-size: .94rem;
        line-height: 1.68;
    }


    /* ======================================================================
       06 — SERVICES MOBILE — EDIT HERE: MODAL AND FORM
    ====================================================================== */

    .service-page .service-viewer {
        align-items: center;

        padding:
            max(10px, env(safe-area-inset-top))
            10px
            max(10px, env(safe-area-inset-bottom));
    }

    .service-page .service-modal {
        width: 100%;

        max-height:
            calc(
                100dvh -
                20px -
                env(safe-area-inset-top) -
                env(safe-area-inset-bottom)
            );

        padding:
            25px
            18px
            20px;

        border-radius: 20px;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }

    .service-page .service-close {
        top: 10px;
        right: 10px;

        width: 40px;
        height: 40px;

        font-size: 28px;
    }

    .service-page #serviceTitle {
        margin:
            4px 0 20px;

        padding-right: 45px;

        font-size:
            clamp(
                1.45rem,
                6.6vw,
                2rem
            );
    }

    .service-page #serviceBody {
        font-size: .96rem;
        line-height: 1.72;
    }

    .service-page .modal-image {
        height:
            clamp(
                190px,
                52vw,
                280px
            );

        margin-bottom: 20px;

        border-radius: 14px;
    }

    .service-form {
        gap: 17px;
    }

    .service-form h3 {
        margin-bottom: 0;

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

    .service-form p {
        margin-top: -6px;
    }

    .form-group {
        gap: 7px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        /*
           16px prevents unwanted automatic zoom on iPhone.
        */
        min-height: 48px;

        padding:
            13px
            14px;

        font-size: 16px;

        border-radius: 11px;
    }

    .form-group textarea {
        min-height: 125px;
    }

    .service-submit {
        width: 100%;

        min-height: 49px;

        margin-top: 4px;
    }

    .service-page .service-modal.news-mode {
        width: 100%;

        padding:
            24px
            14px
            16px;
    }

    .service-page .modal-news-preview {
        margin-top: 10px;
    }


    /* ======================================================================
       07 — SERVICES MOBILE — EDIT HERE: PDF VIEWER
    ====================================================================== */

    .service-page .service-modal.pdf-mode {
        width: 100%;

        height:
            calc(
                100dvh -
                20px -
                env(safe-area-inset-top) -
                env(safe-area-inset-bottom)
            );

        max-height: none;

        padding:
            22px
            12px
            12px;
    }

    .service-page .service-modal.pdf-mode #serviceTitle {
        margin-bottom: 14px;
    }

    .service-page .pdf-canvas-area {
        min-height: 0;

        padding:
            10px
            7px
            18px;

        border-radius: 12px;
    }

    .service-page .pdf-toolbar {
        width: 100%;

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

        gap: 8px;

        margin-top: 10px;
        padding: 8px;

        border-radius: 13px;
    }

    .service-page .pdf-toolbar button {
        min-height: 43px;

        padding:
            10px
            9px;

        font-size: .82rem;
    }

    .service-page #pdfPageInfo {
        grid-column: 1 / -1;
        grid-row: 1;

        width: 100%;
        min-width: 0;

        padding:
            9px
            10px;
    }

    .service-page .pdf-back-button {
        width: 100%;
        min-width: 0;

        margin-top: 10px;
    }

}


/* ==========================================================================
   08 — SERVICES MOBILE — EDIT HERE: SMALL PHONES
========================================================================== */

@media (max-width: 430px) {

    .service-page .container {
        width:
            min(100% - 22px, 1280px);
    }

    .service-page .service-hero {
        height:
            clamp(
                265px,
                43vh,
                340px
            );

        min-height: 265px;
    }

    .service-page .hero-overlay {
        padding:
            28px
            18px;
    }

    .service-page .service-title-bar {
        min-height: 80px;

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

        padding:
            9px
            6px;
    }

    .service-page .service-arrow {
        width: 38px;
        height: 38px;
    }

    .service-page .service-title h2 {
        font-size:
            clamp(
                .78rem,
                3.55vw,
                .91rem
            );
    }

    .service-page .card-image {
        height: 150px;
    }

    .service-page .card-content {
        padding:
            20px
            19px
            25px;
    }

    .service-page .service-modal {
        padding:
            23px
            15px
            17px;

        border-radius: 17px;
    }

    .service-page .modal-news-badge {
        max-width:
            calc(100% - 24px);

        white-space: normal;

        text-align: center;
    }

}


/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================================== */

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

    .service-page .service-card,
    .service-page .card-image img,
    .service-page .service-modal,
    .service-page .service-close,
    .service-page .service-arrow {
        transition: none;
    }

}

/* ==========================================================================
   SERVICES MODAL SCROLL POSITION FIX
   --------------------------------------------------------------------------
   Keep this block at the absolute bottom of Services.css.

   The shared modal is reused for long forms, PDFs, About content and News.
   Chrome's scroll anchoring can preserve or adjust the old bottom position
   when dynamic content such as hCaptcha is inserted.

   SERVICES MODAL SCROLL — EDIT HERE
========================================================================== */

.service-page .service-modal {
    /*
       Do not let asynchronously inserted content move the modal's
       internal scroll position.
    */
    overflow-anchor: none;

    /*
       Keep opening/reset behavior immediate rather than animated.
    */
    scroll-behavior: auto;

    /*
       Prevent scrollbar appearance from shifting modal content.
    */
    scrollbar-gutter: stable;
}

.service-page #serviceBody,
.service-page .service-form,
.service-page .service-form-captcha {
    overflow-anchor: none;
}

.service-page .service-viewer {
    overscroll-behavior: contain;
}

@media (max-width: 768px) {

    .service-page .service-modal {
        /*
           Keep touch scrolling inside the modal without transferring
           momentum to the page behind it.
        */
        overscroll-behavior-y: contain;
    }

}