/* CCG Contract & Commercial Operations — page-specific styles
   Extracted from current style.css in original cascade order.
   Keep style.css unchanged during the first test. */


/* ==========================================
   CONTRACT BASICS MODAL
   ========================================== */

.basics-modal-overlay{
    display:none !important;
    position:fixed;
    inset:0;

    background:rgba(16,25,43,0.58);

    z-index:500;

    padding:40px 20px;

    overflow-y:auto;
}

.basics-modal-overlay.open{
    display:block !important;
}

.basics-modal{
    position:relative;

    max-width:900px;
    margin:0 auto;

    background:#fff;

    border-radius:8px;

    box-shadow:0 24px 70px rgba(16,25,43,0.35);

    overflow:hidden;
}


/* CLOSE BUTTON */

.basics-modal-close{
    position:absolute;

    top:14px;
    right:18px;

    z-index:5;

    border:none;
    background:none;

    color:#7f8898;

    font-size:30px;
    line-height:1;

    cursor:pointer;
}

.basics-modal-close:hover{
    color:#fff;
}


/* TAB BAR */

.basics-modal-tabs{
    display:flex;
    flex-wrap:wrap;

    background:var(--navy);

    padding:0 52px 0 24px;
}

.basics-tab-btn{
    border:none;
    border-bottom:3px solid transparent;

    background:none;

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

    font-family:'Assistant', sans-serif;
    font-size:15px;
    font-weight:600;

    padding:20px 16px;

    cursor:pointer;

    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.basics-tab-btn:hover{
    color:#fff;
}

.basics-tab-btn.active{
    color:#fff;
    border-bottom-color:var(--accent);
}


/* MODAL BODY */

.basics-modal-body{
    padding:38px 38px 44px;

    max-height:72vh;
    overflow-y:auto;
}

.basics-panel{
    display:none;
}

.basics-panel.active{
    display:block;
}


/* INTRO TEXT */

.content-intro{
    margin:0 0 30px;

    font-size:18px;
    line-height:1.65;

    color:var(--ink);
}


/* CONTENT CARDS */

.topic-block{
    background:#f5f7fa;

    border:1px solid var(--line);
    border-left:4px solid var(--accent);

    border-radius:0 5px 5px 0;

    padding:22px 24px;

    margin-bottom:18px;
}

.topic-block h4{
    margin:0 0 10px;

    font-family:'Lora', serif;

    font-size:20px;
    font-weight:600;

    color:var(--navy);
}

.topic-block p{
    margin:0;

    font-size:16px;
    line-height:1.65;

    color:var(--ink-soft);
}


/* DRAFTING LIST */

.drafting-list{
    columns:2;
    column-gap:32px;

    list-style:none;

    margin:16px 0 0;
    padding:0;
}

.drafting-list li{
    position:relative;

    padding:6px 0 6px 18px;

    break-inside:avoid;

    font-size:15px;

    color:var(--ink-soft);
}

.drafting-list li::before{
    content:"\2013";

    position:absolute;
    left:0;

    color:var(--accent);
}


/* QUOTE */

.pull-quote{
    margin:30px 0 18px;

    padding:8px 0 8px 20px;

    border-left:3px solid var(--blue);

    font-family:'Lora', serif;
    font-style:italic;

    font-size:19px;
    line-height:1.55;

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

.basics-closing{
    margin:0;

    font-size:16px;
    line-height:1.6;

    color:var(--ink-soft);
}


/* MOBILE */

@media (max-width:700px){

    .basics-modal-overlay{
        padding:20px 12px;
    }

    .basics-modal-tabs{
        padding:0 44px 0 10px;
    }

    .basics-tab-btn{
        font-size:13px;
        padding:15px 10px;
    }

    .basics-modal-body{
        padding:28px 22px 32px;
    }

    .drafting-list{
        columns:1;

    }

}


/* FAMILIAR SECTION - TEXT SIZE
   ========================================== */

.contract-ops-page .familiar-band-inner{
    max-width:1180px;
}

.contract-ops-page .pain-list{
    gap:22px 58px;
}

.contract-ops-page .pain-list li{
    font-size:20px;
    line-height:1.55;
}

/* ==========================================
   CONTRACT PAGE — SIDEBAR SECTION SPACING
   ========================================== */

.page-grid .sidebar h4 {
    margin: 0 0 16px;
    line-height: 1.2;
}

/* Give the second sidebar heading breathing room */
.page-grid .sidebar .side-list + h4 {
    margin-top: 32px;
    margin-bottom: 16px;
}

/* ==========================================
   CONTRACT PAGE — HOW JLG HELPS SPACING
   ========================================== */

.contract-main h2 {
    margin-top: 42px;
}

/* ==========================================
   HOW JLG HELPS — TOP SPACING
   ========================================== */

.section-heading {
    margin-top: 48px;
    margin-bottom: 0;
}

/* ==========================================
   CONTRACT PAGE
   SERVICES INCLUDE / TYPICAL ENGAGEMENTS
   ========================================== */

.contract-ops-page .two-col-lists{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    margin-top:60px;
    padding-top:48px;

    border-top:1px solid var(--line);
}


/* HEADINGS */

.contract-ops-page .list-block h3{
    margin:0 0 22px;

    font-size:24px;
    font-weight:600;
    line-height:1.25;

    color:var(--navy);
}


/* LISTS */

.contract-ops-page .check-list{
    list-style:none;
    margin:0;
    padding:0;
}

.contract-ops-page .check-list li{
    position:relative;

    padding:12px 0 12px 30px;

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

    font-size:17px;
    line-height:1.5;

    color:var(--ink-soft);
}

.contract-ops-page .check-list li:last-child{
    border-bottom:none;
}


/* BLUE CHECKMARK */

.contract-ops-page .check-list li::before{
    content:"\2713";

    position:absolute;
    left:0;
    top:12px;

    color:var(--blue);

    font-size:17px;
    font-weight:700;
}


/* MOBILE */

@media (max-width:760px){

    .contract-ops-page .two-col-lists{
        grid-template-columns:1fr;
        gap:40px;
    }

}




/* =========================================================
   CONTRACT & COMMERCIAL OPERATIONS — FAMILIAR SECTION
   Match Information Operations sizing
========================================================= */

.contract-ops-page .familiar-band h2{
    font-size:40px !important;
    line-height:1.2 !important;
}

.contract-ops-page .pain-list li{
    font-size:20px !important;
    line-height:1.55 !important;
}

/* =========================================================
   CONTRACT & COMMERCIAL OPERATIONS — MAIN CONTENT SIZING
   Match Information Operations
========================================================= */


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

.contract-ops-page .sidebar{
    width:100% !important;
}

.contract-ops-page .sidebar h4{
    font-size:25px !important;
    line-height:1.2;
    margin-bottom:16px !important;
}


/* Sidebar rows */
.contract-ops-page .side-list li{
    min-height:62px !important;
}

.contract-ops-page .side-list a{
    font-size:18px !important;
    line-height:1.25;
    padding:18px 18px !important;
}


/* Info "i" column */
.contract-ops-page .tip-toggle{
    width:52px !important;
    min-width:52px !important;
    font-size:21px !important;
}


/* ==========================================
   MAIN CONTENT
========================================== */

.contract-ops-page .main-content{
    width:100% !important;
    min-width:0;
}

.contract-ops-page .main-content .lead{
    font-size:22px !important;
    line-height:1.55 !important;
    max-width:100% !important;
}


/* How JLG Helps heading */
.contract-ops-page .section-heading{
    font-size:35px !important;
    margin-top:54px !important;
}


/* ==========================================
   FOUR HOW-JLG-HELPS CARDS
========================================== */

.contract-ops-page .steps{
    width:100% !important;

    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;

    gap:24px !important;
}

.contract-ops-page .step{
    min-width:0 !important;
    min-height:300px !important;

    padding:30px 28px !important;
}

.contract-ops-page .step-label{
    font-size:22px !important;
}

.contract-ops-page .step p{
    font-size:17px !important;
    line-height:1.55 !important;

    margin-top:18px !important;
}


/* =========================================================
   CONTRACT & COMMERCIAL — SIDEBAR POPUPS
========================================================= */

.contract-ops-page .side-tip{
    width:380px !important;
    max-width:380px !important;

    padding:22px 24px !important;

    font-family:'Assistant', sans-serif !important;
    font-size:16px !important;
    line-height:1.55 !important;

    border-left:4px solid #364E69 !important;

    border-radius:6px !important;

    box-shadow:0 12px 32px rgba(15,27,45,0.14) !important;
}

/* =========================================================
   CONTRACT PAGE — SERVICES / TYPICAL ENGAGEMENTS
   ========================================================= */

/* Section headings */
.contract-ops-page .list-block h3{
    font-family:'Lora', serif !important;
    font-size:29px !important;
    line-height:1.2 !important;

    margin-bottom:30px !important;
}


/* Individual list items */
.contract-ops-page .check-list li{
    font-family:'Assistant', sans-serif !important;
    font-size:17px !important;
    line-height:1.5 !important;

    padding-top:18px !important;
    padding-bottom:18px !important;
}


/* Checkmarks */
.contract-ops-page .check-list li::before{
    font-size:22px !important;
}

/* =========================================================
   CONTRACT BASICS MODAL — FINAL SIZING
   ALL FOUR TABS
   ========================================================= */


/* Overall modal box */
.basics-modal{
    width:min(1000px, 92vw) !important;
    max-width:1000px !important;
}


/* ==========================================
   TOP TAB BAR
   ========================================== */

.basics-modal-tabs{
    width:100% !important;
}

.basics-tab-btn{
    font-family:'Assistant', sans-serif !important;

    font-size:17px !important;
    font-weight:700 !important;

    padding:18px 20px !important;

    line-height:1.25 !important;
}


/* ==========================================
   MODAL CONTENT AREA
   ========================================== */

.basics-modal-body{
    padding:34px 38px 40px !important;
}


/* Intro paragraph at top of each tab */
.basics-modal .content-intro{
    font-family:'Assistant', sans-serif !important;

    font-size:19px !important;
    line-height:1.6 !important;

    margin-bottom:26px !important;
}


/* ==========================================
   INDIVIDUAL TOPIC BOXES
   ========================================== */

.basics-modal .topic-block{
    padding:22px 26px !important;

    margin-bottom:18px !important;
}


/* Agreement / Consideration / Clarity / etc. */
.basics-modal .topic-block h4{
    font-family:'Lora', serif !important;

    font-size:23px !important;
    line-height:1.3 !important;

    margin-bottom:8px !important;
}


/* Topic descriptions */
.basics-modal .topic-block p{
    font-family:'Assistant', sans-serif !important;

    font-size:18px !important;
    line-height:1.6 !important;
}


/* Lists inside Harnessing Our Strengths */
.basics-modal .drafting-list{
    font-family:'Assistant', sans-serif !important;

    font-size:17px !important;
    line-height:1.6 !important;

    margin-top:14px !important;
}


/* Pull quote in Harnessing Our Strengths */
.basics-modal .pull-quote{
    font-family:'Lora', serif !important;

    font-size:19px !important;
    line-height:1.55 !important;

    margin-top:24px !important;
}


/* =========================================================
   DIGITAL TRANSFORMATION READINESS — FINAL SIZING


    justify-content:center !important;
}

/* =========================================================
   CONTRACT & COMMERCIAL OPERATIONS — HERO BACKGROUND IMAGE
   ========================================================= */

.contract-hero{
    position:relative !important;
    overflow:hidden !important;

    background-color:#364E69 !important;

    background-image:
        url("assets/images/jlg-hero-contract-commercial.png") !important;

    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
}


/* Dark overlay — matches Information Operations treatment */
.contract-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:rgba(15,27,45,0.78);

    pointer-events:none;
}


/* Keep hero content above background overlay */
.contract-hero > *{
    position:relative;
    z-index:1;
}

/* =========================================================


   CONTRACT & COMMERCIAL OPERATIONS — HERO
   ========================================================= */

.contract-hero{
    position:relative;

    min-height:610px;

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

    overflow:hidden;

    background:#1D2952;

    padding:
        54px
        32px
        36px;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.contract-hero-bg{
    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;
}


.contract-hero-bg img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    display:block;
}


/* =========================================================
   NAVY LEGIBILITY / EDGE BLENDING
   ========================================================= */

.contract-hero-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:

        /* CENTER — clean text area */
        radial-gradient(
            ellipse at center,
            rgba(29,41,82,.68) 0%,
            rgba(29,41,82,.54) 30%,
            rgba(29,41,82,.24) 52%,
            rgba(29,41,82,.06) 75%,
            transparent 100%
        ),

        /* TOP — protects logo / menu */
        linear-gradient(
            180deg,
            rgba(29,41,82,.58) 0%,
            rgba(29,41,82,.16) 22%,
            transparent 38%
        ),

        /* LEFT EDGE */
        linear-gradient(
            90deg,
            rgba(29,41,82,.28) 0%,
            transparent 24%
        ),

        /* RIGHT EDGE */
        linear-gradient(
            270deg,
            rgba(29,41,82,.30) 0%,
            transparent 24%
        );
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.contract-hero-content{
    position:relative;

    z-index:2;

    width:min(900px, 92%);

    margin:0 auto;

    text-align:center;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.contract-breadcrumb{
    display:flex;

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

    flex-wrap:wrap;

    gap:7px;

    margin-bottom:24px;

    font-family:'Assistant', sans-serif;

    font-size:13px;
    font-weight:600;

    color:#D4A017;
}


.contract-breadcrumb a,
.contract-breadcrumb span{
    color:#D4A017;
}


.contract-breadcrumb a{
    text-decoration:none;

    transition:
        color .22s ease,
        text-shadow .22s ease;
}


/* =========================================================
   HEADLINE
   ========================================================= */

.contract-hero h1{
    max-width:940px;

    margin:
        0
        auto
        24px;

    font-family:'Lora', serif;

    font-size:clamp(38px, 3.5vw, 58px);

    font-weight:600;

    line-height:1.07;

    color:#FFFFFF;

    text-shadow:
        0 3px 18px rgba(0,0,0,.22);
}


/* =========================================================
   LEDE
   ========================================================= */

.contract-hero-lede{
    max-width:760px;

    margin:
        0
        auto
        34px;

    font-family:'Assistant', sans-serif;

    font-size:17px;

    line-height:1.62;

    color:rgba(244,241,232,.90);
}


/* =========================================================
   BUTTON ROW
   ========================================================= */

.contract-hero-actions{
    display:flex;

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

    flex-wrap:wrap;

    gap:16px;
}


/* =========================================================
   BUTTON BASE
   ========================================================= */

.contract-hero-btn{
    position:relative;

    overflow:hidden;

    display:inline-flex;

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

    min-height:54px;

    padding:
        0
        28px;

    border-radius:4px;

    font-family:'Assistant', sans-serif;

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

    text-decoration:none;

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


/* PRIMARY */

.contract-hero-btn-primary{
    background:linear-gradient(
        120deg,
        #F0DEAE 0%,
        #D4A017 55%,
        #8A650F 100%
    );

    color:#1D2952;

    box-shadow:
        0 5px 18px rgba(212,160,23,.24);
}

/* =========================================================
   CONTRACT HERO — PRIMARY BUTTON GLEAM
   ========================================================= */

.contract-hero-btn-primary::before{
    content:"";

    position:absolute;

    top:-50%;
    left:-75%;

    width:45%;
    height:200%;

    opacity:0;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(240,222,174,.08) 20%,
        rgba(240,222,174,.82) 45%,
        rgba(255,244,195,1) 52%,
        rgba(240,222,174,.42) 68%,
        transparent 100%
    );

    transform:skewX(-20deg);

    pointer-events:none;
}

.contract-hero-btn-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 6px rgba(240,222,174,.34),
        0 0 16px rgba(212,160,23,.30),
        0 9px 24px rgba(19,27,53,.24);
}

.contract-hero-btn-primary:hover::before{
    opacity:1;

    animation:
        contractHeroButtonGleam
        .75s
        ease-out
        1;
}


@keyframes contractHeroButtonGleam{

    0%{
        left:-75%;
        opacity:0;
    }

    10%{
        opacity:1;
    }

    90%{
        opacity:1;
    }

    100%{
        left:135%;
        opacity:0;
    }

}

/* SECONDARY */

.contract-hero-btn-secondary{
    background:rgba(29,41,82,.22);

    color:#FFFFFF;

    border:
        1px solid
        rgba(244,241,232,.48);

    backdrop-filter:blur(3px);
}


.contract-hero-btn-secondary:hover{
    color:#F0DEAE;

    border-color:#D4A017;

    transform:translateY(-2px);

    box-shadow:
        0 0 12px rgba(212,160,23,.16);
}


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

@media (max-width:800px){

    .contract-hero{
        min-height:600px;

        padding:
            105px
            24px
            70px;
    }

    .contract-hero h1{
        font-size:
            clamp(
                36px,
                8vw,
                54px
            );
    }

    .contract-hero-lede{
        font-size:16px;
    }

}


@media (max-width:520px){

    .contract-hero-actions{
        flex-direction:column;

        align-items:stretch;
    }

    .contract-hero-btn{
        width:100%;
    }

}

/* =========================================================
   CONTRACT HERO — CCG COLOR WASH + SOFT FADE
   ========================================================= */

.contract-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:

        /* CENTER — brand-colored text zone */
        radial-gradient(
            ellipse at center,
            rgba(29,41,82,.76) 0%,
            rgba(29,41,82,.62) 30%,
            rgba(29,41,82,.34) 52%,
            rgba(29,41,82,.12) 72%,
            transparent 100%
        ),

        /* FULL HERO — subtle Midnight Royal tint */
        linear-gradient(
            180deg,
            rgba(29,41,82,.18) 0%,
            rgba(29,41,82,.28) 50%,
            rgba(29,41,82,.22) 100%
        ),

        /* TOP EDGE */
        linear-gradient(
            180deg,
            rgba(29,41,82,.70) 0%,
            rgba(29,41,82,.24) 18%,
            transparent 34%
        ),

        /* LEFT EDGE */
        linear-gradient(
            90deg,
            rgba(29,41,82,.38) 0%,
            rgba(29,41,82,.10) 20%,
            transparent 34%
        ),

        /* RIGHT EDGE */
        linear-gradient(
            270deg,
            rgba(29,41,82,.38) 0%,
            rgba(29,41,82,.10) 20%,
            transparent 34%
        );

    opacity:0;

    animation:
        contractHeroOverlayIn
        1.1s
        ease-out
        forwards;
}


@keyframes contractHeroOverlayIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.contract-hero-bg img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    display:block;

    opacity:.88;

    animation:
        contractHeroImageIn
        1s
        ease-out
        forwards;
}


@keyframes contractHeroImageIn{

    from{
        opacity:.60;
        transform:scale(1.015);
    }

    to{
        opacity:.88;
        transform:scale(1);
    }

}

/* =========================================================
   CONTRACT HERO — LIFECYCLE MOTION
   ========================================================= */

.contract-lifecycle-motion{
    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    overflow:hidden;
}


/* =========================================================
   TRAVELING GOLD PULSE
   ========================================================= */

.contract-pulse{
    position:absolute;

    top:51.2%;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#F0DEAE;

    box-shadow:
        0 0 4px rgba(255,244,195,.95),
        0 0 9px rgba(212,160,23,.88),
        0 0 18px rgba(212,160,23,.52);

    opacity:0;
}


/* LEFT:
   document → handshake → disappear into center
*/
.contract-pulse-left{
    left:8%;

    animation:
        contractPulseLeft
        8s
        ease-in-out
        infinite;
}


/* RIGHT:
   emerge → admin → renewal → analytics
*/
.contract-pulse-right{
    left:52%;

    animation:
        contractPulseRight
        8s
        ease-in-out
        infinite;
}


/* =========================================================
   LEFT TRAVEL — EARLIER FADE
   ========================================================= */

@keyframes contractPulseLeft{

    0%{
        left:7%;
        opacity:0;
        transform:scale(.75);
    }

    5%{
        opacity:1;
    }

    18%{
        left:14%;
        transform:scale(1);
    }

    31%{
        left:27%;
        opacity:1;
    }

    /* continuously travel AND fade — no stopping point */
    45%{
        left:36%;
        opacity:0;
        transform:scale(.75);
    }

    100%{
        left:36%;
        opacity:0;
    }

}


/* =========================================================
   RIGHT TRAVEL
   ========================================================= */

@keyframes contractPulseRight{

    0%,
    48%{
        left:55%;
        opacity:0;
        transform:scale(.75);
    }

    53%{
        opacity:1;
    }

    64%{
        left:69%;
        transform:scale(1);
    }

    76%{
        left:81%;
    }

    88%{
        left:91%;
        opacity:1;
    }

    94%{
        left:95%;
        opacity:0;
        transform:scale(.75);
    }

    100%{
        opacity:0;
    }

}


/* =========================================================
   ICON HALOS
   ========================================================= */

.contract-node{
    position:absolute;

    top:51.2%;

    width:82px;
    height:82px;

    border-radius:50%;

    transform:
        translate(-50%, -50%);

    opacity:0;

    border:
        1px solid
        rgba(212,160,23,.18);

    box-shadow:
        0 0 18px rgba(212,160,23,.10),
        inset 0 0 16px rgba(240,222,174,.04);
}


/* Match these to the painted icons */
.contract-node-document{
    left:14%;
    animation:contractNodeOne 8s ease-in-out infinite;
}

.contract-node-handshake{
    left:27%;
    animation:contractNodeTwo 8s ease-in-out infinite;
}

.contract-node-admin{
    left:69%;
    animation:contractNodeThree 8s ease-in-out infinite;
}

.contract-node-renewal{
    left:81%;
    animation:contractNodeFour 8s ease-in-out infinite;
}

.contract-node-analytics{
    left:91%;
    animation:contractNodeFive 8s ease-in-out infinite;
}


/* =========================================================
   SEQUENTIAL NODE BREATHING
   ========================================================= */

@keyframes contractNodeOne{

    0%,8%,24%,100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.94);
    }

    14%,18%{
        opacity:.42;
        transform:translate(-50%,-50%) scale(1.06);
    }

}


@keyframes contractNodeTwo{

    0%,20%,38%,100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.94);
    }

    27%,32%{
        opacity:.42;
        transform:translate(-50%,-50%) scale(1.06);
    }

}


@keyframes contractNodeThree{

    0%,56%,72%,100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.94);
    }

    62%,67%{
        opacity:.42;
        transform:translate(-50%,-50%) scale(1.06);
    }

}


@keyframes contractNodeFour{

    0%,68%,84%,100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.94);
    }

    74%,79%{
        opacity:.42;
        transform:translate(-50%,-50%) scale(1.06);
    }

}


@keyframes contractNodeFive{

    0%,80%,96%,100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.94);
    }

    86%,91%{
        opacity:.42;
        transform:translate(-50%,-50%) scale(1.06);
    }

}

/* =========================================================
   CONTRACTS — DOES THIS SOUND FAMILIAR
   ========================================================= */

.contract-familiar{
    background:#FFFFFF;

    padding:
        92px
        32px
        96px;
}


.contract-familiar-inner{
    width:min(1220px, 100%);

    margin:0 auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.contract-familiar-heading{
    max-width:820px;

    margin:
        0
        auto
        58px;

    text-align:center;
}


.contract-section-eyebrow{
    margin-bottom:12px;

    font-family:'Assistant', sans-serif;

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

    letter-spacing:.20em;

    text-transform:uppercase;

    color:#D4A017;
}


.contract-familiar-heading h2{
    margin:0;

    font-family:'Lora', serif;

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

    font-weight:600;

    line-height:1.12;

    color:#1D2952;
}


.contract-heading-rule{
    width:84px;
    height:2px;

    margin:
        20px
        auto
        22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D4A017,
            #8A650F,
            transparent
        );
}


.contract-familiar-heading p{
    margin:0;

    font-family:'Assistant', sans-serif;

    font-size:16px;

    line-height:1.65;

    color:#4E5360;
}


/* =========================================================
   TWO-COLUMN ISSUE GRID
   ========================================================= */

.contract-familiar-grid{
    display:grid;

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

    column-gap:76px;
}


/* =========================================================
   ISSUE
   ========================================================= */

.contract-familiar-item{
    position:relative;

    display:grid;

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

    gap:20px;

    min-height:145px;

    padding:
        28px
        16px
        28px
        4px;

    border-bottom:
        1px solid
        rgba(29,41,82,.14);

    transition:
        background-color .25s ease,
        padding-left .25s ease;
}


/* faint contract-register hover */
.contract-familiar-item:hover{
    padding-left:14px;

    background:
        linear-gradient(
            90deg,
            rgba(244,241,232,.72),
            rgba(244,241,232,.15),
            transparent
        );
}


/* =========================================================
   NUMBER
   ========================================================= */

.contract-familiar-number{
    padding-top:2px;

    font-family:'Lora', serif;

    font-size:24px;
    font-weight:600;

    color:#D4A017;
}


/* =========================================================
   COPY
   ========================================================= */

.contract-familiar-copy h3{
    margin:
        0
        0
        10px;

    font-family:'Lora', serif;

    font-size:23px;
    font-weight:600;

    line-height:1.2;

    color:#1D2952;
}


.contract-familiar-copy p{
    margin:0;

    font-family:'Assistant', sans-serif;

    font-size:15.5px;

    line-height:1.58;

    color:#4E5360;
}


/* subtle gold accent appears on hover */
.contract-familiar-item::before{
    content:"";

    position:absolute;

    left:0;
    top:24%;

    width:2px;
    height:52%;

    background:#D4A017;

    transform:scaleY(0);

    transform-origin:center;

    transition:
        transform .25s ease;

    border-radius:99px;
}


.contract-familiar-item:hover::before{
    transform:scaleY(1);
}


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

@media (max-width:860px){

    .contract-familiar-grid{
        grid-template-columns:1fr;

        column-gap:0;
    }

}


@media (max-width:600px){

    .contract-familiar{
        padding:
            72px
            22px
            76px;
    }

    .contract-familiar-heading{
        margin-bottom:40px;
    }

    .contract-familiar-item{
        grid-template-columns:
            44px
            minmax(0,1fr);

        gap:14px;

        min-height:0;

        padding:
            24px
            8px
            24px
            2px;
    }

    .contract-familiar-number{
        font-size:20px;
    }

    .contract-familiar-copy h3{
        font-size:21px;
    }

}

/* =========================================================
   CONTRACT LIFECYCLE
   ========================================================= */

.contract-lifecycle{
    position:relative;

    background:#FFFFFF;

    padding:
        96px
        32px
        104px;
}


.contract-lifecycle-inner{
    width:min(1240px, 100%);

    margin:0 auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.contract-lifecycle-heading{
    max-width:820px;

    margin:
        0
        auto
        68px;

    text-align:center;
}


.contract-lifecycle-heading h2{
    margin:0;

    font-family:'Lora', serif;

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

    font-weight:600;

    line-height:1.12;

    color:#1D2952;
}


.contract-lifecycle-heading p{
    max-width:760px;

    margin:
        22px
        auto
        0;

    font-family:'Assistant', sans-serif;

    font-size:16px;

    line-height:1.65;

    color:#4E5360;
}


/* =========================================================
   LIFECYCLE RAIL
   ========================================================= */

.contract-lifecycle-rail{
    position:relative;

    display:grid;

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

    gap:34px;

    padding-top:8px;
}


/* main line */
.contract-lifecycle-line{
    position:absolute;

    top:40px;
    left:10%;
    right:10%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            rgba(212,160,23,.22),
            #D4A017 18%,
            #D4A017 82%,
            rgba(212,160,23,.22)
        );

    z-index:0;
}


/* =========================================================
   STAGES
   ========================================================= */

.contract-stage{
    position:relative;

    z-index:1;

    text-align:center;

    padding:
        0
        10px;
}


.contract-stage-marker{
    width:66px;
    height:66px;

    margin:
        0
        auto
        24px;

    display:flex;

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

    border-radius:50%;

    background:#1D2952;

    border:
        2px solid
        #D4A017;

    box-shadow:
        0 0 0 7px #FFFFFF,
        0 8px 22px rgba(29,41,82,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.contract-stage-marker span{
    font-family:'Lora', serif;

    font-size:18px;
    font-weight:600;

    color:#F0DEAE;
}


.contract-stage:hover .contract-stage-marker{
    transform:translateY(-4px);

    box-shadow:
        0 0 0 7px #FFFFFF,
        0 0 20px rgba(212,160,23,.20),
        0 12px 24px rgba(29,41,82,.12);
}


.contract-stage h3{
    margin:
        0
        0
        14px;

    font-family:'Lora', serif;

    font-size:25px;
    font-weight:600;

    color:#1D2952;
}


.contract-stage p{
    margin:0;

    font-family:'Assistant', sans-serif;

    font-size:15px;

    line-height:1.65;

    color:#565B67;
}


/* =========================================================
   RETURN / RENEWAL LOOP
   ========================================================= */

.contract-lifecycle-return{
    position:absolute;

    left:18%;
    right:18%;
    bottom:-48px;

    height:42px;

    border:
        1px solid
        rgba(29,41,82,.18);

    border-top:0;

    border-radius:
        0
        0
        80px
        80px;

    text-align:center;
}


.contract-lifecycle-return::before{
    content:"";

    position:absolute;

    right:-5px;
    top:-3px;

    width:9px;
    height:9px;

    border-top:2px solid #D4A017;
    border-right:2px solid #D4A017;

    transform:rotate(-45deg);
}


.contract-lifecycle-return span{
    position:relative;

    top:27px;

    padding:
        0
        14px;

    background:#FFFFFF;

    font-family:'Assistant', sans-serif;

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

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#8A650F;
}


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

@media (max-width:900px){

    .contract-lifecycle-rail{
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        row-gap:56px;
    }

    .contract-lifecycle-line,
    .contract-lifecycle-return{
        display:none;
    }

}


@media (max-width:560px){

    .contract-lifecycle{
        padding:
            74px
            22px
            80px;
    }

    .contract-lifecycle-rail{
        grid-template-columns:1fr;

        gap:42px;
    }

    .contract-stage{
        max-width:420px;

        margin:0 auto;
    }

}

/* =========================================================
   LIFECYCLE STAGE — ACTIVE SEQUENCE
   ========================================================= */

.contract-stage{
    transition:
        transform .35s ease,
        opacity .35s ease;
}

.contract-stage-marker{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.contract-stage h3{
    transition:
        color .35s ease,
        transform .35s ease;
}


/* 01 */
.contract-stage-1{
    animation:
        contractStageOne
        10.5s
        ease-in-out
        infinite;
}

/* 02 */
.contract-stage-2{
    animation:
        contractStageTwo
        10.5s
        ease-in-out
        infinite;
}

/* 03 */
.contract-stage-3{
    animation:
        contractStageThree
        10.5s
        ease-in-out
        infinite;
}

/* 04 */
.contract-stage-4{
    animation:
        contractStageFour
        10.5s
        ease-in-out
        infinite;
}

@keyframes contractStageOne{

    0%,3%,16%,100%{
        transform:translateY(0);
    }

    6%,12%{
        transform:translateY(-7px);
    }

}


@keyframes contractStageTwo{

    0%,24%,38%,100%{
        transform:translateY(0);
    }

    28%,34%{
        transform:translateY(-7px);
    }

}


@keyframes contractStageThree{

    0%,46%,60%,100%{
        transform:translateY(0);
    }

    50%,56%{
        transform:translateY(-7px);
    }

}


@keyframes contractStageFour{

    0%,68%,84%,100%{
        transform:translateY(0);
    }

    72%,80%{
        transform:translateY(-7px);
    }

}

/* =========================================================
   RENEW • AMEND • RENEGOTIATE — AUTOMATIC GOLD GLEAM
   ========================================================= */

.contract-lifecycle-return span{
    background-image:
        linear-gradient(
            110deg,
            #8A650F 0%,
            #D4A017 28%,
            #F0DEAE 46%,
            #FFFFFF 50%,
            #F0DEAE 54%,
            #D4A017 72%,
            #8A650F 100%
        );

    background-size:260% 100%;
    background-position:100% 50%;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:
        contractReturnGleam
        13.2s
        ease-in-out
        infinite;
}


@keyframes contractReturnGleam{

    0%{
        background-position:100% 50%;

        filter:
            drop-shadow(
                0 0 0
                rgba(212,160,23,0)
            );
    }

    45%{
        filter:
            drop-shadow(
                0 0 2px
                rgba(212,160,23,.10)
            );
    }

    58%{
        background-position:0% 50%;

        filter:
            drop-shadow(
                0 0 5px
                rgba(212,160,23,.30)
            );
    }

    72%{
        filter:
            drop-shadow(
                0 0 2px
                rgba(212,160,23,.12)
            );
    }

    100%{
        background-position:-100% 50%;

        filter:
            drop-shadow(
                0 0 0
                rgba(212,160,23,0)
            );
    }

}

.contract-lifecycle-return span{
    position:relative;
    z-index:2;
}

.contract-lifecycle-return span::before{
    content:"";

    position:absolute;
    z-index:-1;

    top:50%;
    left:-12px;
    right:-12px;

    height:22px;

    transform:translateY(-50%);

    background:#FFFFFF;
}

@keyframes contractReturnGleam{

    0%{
        background-position:100% 50%;
        filter:drop-shadow(0 0 0 rgba(212,160,23,0));
    }

    15%{
        filter:drop-shadow(0 0 0 rgba(212,160,23,0));
    }

    55%{
        filter:drop-shadow(0 0 4px rgba(212,160,23,.28));
    }

    85%{
        background-position:0% 50%;
        filter:drop-shadow(0 0 1px rgba(212,160,23,.08));
    }

    100%{
        background-position:0% 50%;
        filter:drop-shadow(0 0 0 rgba(212,160,23,0));
    }
}

/* =========================================================
   CONTRACT & COMMERCIAL OPERATIONS — SERVICE NAVIGATOR
   ========================================================= */

.contract-services{
    position:relative;

    padding:
        94px
        32px
        104px;

    background:#FFFFFF;
}

.contract-services-inner{
    width:min(1240px, 100%);
    margin:0 auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.contract-services-heading{
    max-width:850px;

    margin:
        0
        auto
        58px;

    text-align:center;
}

.contract-services-eyebrow{
    display:block;

    margin-bottom:14px;

    font-family:'Assistant', sans-serif;
    font-size:12px;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    color:#D4A017;
}

.contract-services-heading h2{
    margin:0;

    font-family:'Lora', serif;

    font-size:clamp(36px, 3.8vw, 50px);
    font-weight:600;

    line-height:1.14;

    color:#1D2952;
}

.contract-services-heading .contract-heading-rule{
    margin:
        20px
        auto
        22px;
}

.contract-services-heading p{
    max-width:760px;

    margin:0 auto;

    font-family:'Assistant', sans-serif;
    font-size:17px;

    line-height:1.65;

    color:#4A4A50;
}


/* =========================================================
   SIX SERVICE TABS
   ========================================================= */

.contract-service-nav{
    display:grid;

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

    gap:14px;

    margin-bottom:22px;
}

.contract-service-tab{
    position:relative;

    display:grid;

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

    gap:12px;

    align-items:center;

    min-height:94px;

    padding:
        20px
        22px;

    border:
        1px solid
        rgba(212,160,23,.10);

    border-radius:3px;

    background:#1D2952;

    color:#F4F1E8;

    text-align:left;

    cursor:pointer;

    overflow:hidden;

    box-shadow:
        0 7px 18px
        rgba(29,41,82,.07);

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


/* subtle navy variation */
.contract-service-tab::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.035) 50%,
            transparent 80%
        );

    opacity:0;

    transition:opacity .3s ease;

    pointer-events:none;
}


.contract-service-tab:hover{
    transform:translateY(-4px);

    border-color:
        rgba(212,160,23,.38);

    box-shadow:
        0 13px 26px
        rgba(29,41,82,.14);
}

.contract-service-tab:hover::after{
    opacity:1;
}


/* NUMBER */

.contract-service-number{
    position:relative;
    z-index:2;

    font-family:'Lora', serif;

    font-size:17px;
    font-weight:600;

    color:#D4A017;
}


/* TITLE */

.contract-service-title{
    position:relative;
    z-index:2;

    font-family:'Assistant', sans-serif;

    font-size:16px;
    font-weight:650;

    line-height:1.28;

    color:#F4F1E8;
}


/* ARROW */

.contract-service-arrow{
    position:relative;
    z-index:2;

    font-size:23px;
    line-height:1;

    color:rgba(244,241,232,.38);

    transition:
        transform .25s ease,
        color .25s ease;
}

.contract-service-tab:hover .contract-service-arrow{
    transform:translateX(3px);

    color:#E0C77F;
}


/* =========================================================
   ACTIVE SERVICE TAB
   ========================================================= */

.contract-service-tab.is-active{
    border-color:
        rgba(212,160,23,.55);

    background:
        linear-gradient(
            115deg,
            #26345F 0%,
            #1D2952 48%,
            #182243 100%
        );

    box-shadow:
        0 11px 28px
        rgba(29,41,82,.15);
}

.contract-service-tab.is-active::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:4px;

    background:
        linear-gradient(
            180deg,
            #F0DEAE,
            #D4A017,
            #8A650F
        );
}

.contract-service-tab.is-active .contract-service-arrow{
    color:#D4A017;

    transform:translateX(3px);
}


/* =========================================================
   SERVICE DETAIL PANEL
   ========================================================= */

.contract-service-panels{
    position:relative;
}

.contract-service-panel{
    display:none;

    position:relative;

    padding:
        42px
        46px
        44px;

    overflow:hidden;

    border:
        1px solid
        rgba(29,41,82,.09);

    border-radius:3px;

    background:#F4F1E8;

    box-shadow:
        0 13px 34px
        rgba(29,41,82,.07);
}

.contract-service-panel.is-active{
    display:block;

    animation:
        contractServiceReveal
        .32s
        ease
        both;
}


@keyframes contractServiceReveal{

    from{
        opacity:0;
        transform:translateY(7px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* giant decorative number */

/* =========================================================
   SERVICE PANEL — DECORATIVE SYMBOL WATERMARK
   ========================================================= */

.contract-service-panel::after{
    position:absolute;

    right:34px;
    top:-22px;

    font-family:'Lora', serif;

    font-size:138px;
    font-weight:400;

    line-height:1;

    color:rgba(212,160,23,.055);

    pointer-events:none;

    z-index:0;
}


/* 01 — CONTRACT LIFECYCLE MANAGEMENT */
.contract-service-panel[data-panel="lifecycle"]::after{
    content:"↻";
}


/* 02 — CONTRACT DRAFTING SUPPORT */
.contract-service-panel[data-panel="drafting"]::after{
    content:"✎";
}


/* 03 — CONTRACT REVIEW & ANALYSIS */
.contract-service-panel[data-panel="review"]::after{
    content:"✓";
}


/* 04 — CONTRACT ADMINISTRATION */
.contract-service-panel[data-panel="administration"]::after{
    content:"☷";
}


/* 05 — COMMERCIAL OPERATIONS SUPPORT */
.contract-service-panel[data-panel="commercial"]::after{
    content:"⇄";
}


/* 06 — CONTRACT ANALYTICS */
.contract-service-panel[data-panel="analytics"]::after{
    content:"▥";
}


/* small number */

.contract-service-panel-number{
    display:block;

    margin-bottom:10px;

    font-family:'Assistant', sans-serif;

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

    letter-spacing:.18em;

    color:#D4A017;
}


/* panel title */

.contract-service-panel h3{
    position:relative;
    z-index:1;

    margin:
        0
        0
        15px;

    font-family:'Lora', serif;

    font-size:clamp(27px, 3vw, 34px);
    font-weight:600;

    line-height:1.15;

    color:#1D2952;
}


/* description */

.contract-service-panel > p{
    position:relative;
    z-index:1;

    max-width:900px;

    margin:
        0
        0
        30px;

    font-family:'Assistant', sans-serif;

    font-size:16px;

    line-height:1.68;

    color:#4A4A50;
}


/* =========================================================
   THREE DETAIL ITEMS
   ========================================================= */

.contract-service-details{
    position:relative;
    z-index:1;

    display:grid;

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

    gap:14px;
}

.contract-service-details > div{
    padding:
        19px
        20px;

    background:
        rgba(255,255,255,.64);

    border:
        1px solid
        rgba(29,41,82,.07);

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

.contract-service-details > div:hover{
    transform:translateY(-2px);

    border-color:
        rgba(212,160,23,.20);

    box-shadow:
        0 8px 18px
        rgba(29,41,82,.06);
}

.contract-service-details span{
    display:block;

    margin-bottom:8px;

    font-family:'Lora', serif;

    font-size:15px;
    font-weight:600;

    color:#D4A017;
}

.contract-service-details p{
    margin:0;

    font-family:'Assistant', sans-serif;

    font-size:14px;

    line-height:1.55;

    color:#4A4A50;
}


/* =========================================================
   CONTRACT BASICS — ELEVATED CARD LAUNCHER
   ========================================================= */

.contract-basics-launcher{
    margin-top:62px;

    padding:
        48px
        0
        10px;

    position:relative;
}


/* =========================================================
   HEADING
   ========================================================= */

.contract-basics-heading{
    margin-bottom:32px;

    text-align:center;
}

.contract-basics-eyebrow{
    display:block;

    margin-bottom:8px;

    font-family:'Assistant', sans-serif;

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

    letter-spacing:.20em;

    text-transform:uppercase;

    color:#D4A017;
}

.contract-basics-heading h3{
    margin:0;

    font-family:'Lora', serif;

    font-size:30px;
    font-weight:600;

    color:#1D2952;
}


/* =========================================================
   FOUR BASICS CARDS
   ========================================================= */

.contract-basics-links{
    display:grid;

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

    gap:16px;
}


.contract-basics-link{
    position:relative;

    min-height:145px;

    padding:
        24px
        22px
        22px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;

    text-align:left;

    border:
        1px solid
        rgba(29,41,82,.10);

    border-top:
        3px solid
        #D4A017;

    border-radius:3px;

    background:#F4F1E8;

    color:#1D2952;

    cursor:pointer;

    overflow:hidden;

    box-shadow:
        0 8px 20px
        rgba(29,41,82,.06);

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


/* subtle shine layer */
.contract-basics-link::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:-55%;

    width:38%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(240,222,174,.28),
            transparent
        );

    transform:skewX(-18deg);

    transition:left .55s ease;

    pointer-events:none;
}


/* arrow */
.contract-basics-link::after{
    content:"→";

    position:absolute;

    right:20px;
    bottom:18px;

    font-family:'Assistant', sans-serif;

    font-size:18px;

    color:#D4A017;

    transition:
        transform .25s ease,
        color .25s ease;
}


/* number */
.contract-basics-link span{
    display:block;

    margin-bottom:16px;

    font-family:'Lora', serif;

    font-size:18px;
    font-weight:600;

    color:#D4A017;
}


/* =========================================================
   HOVER
   ========================================================= */

.contract-basics-link:hover{
    transform:translateY(-5px);

    border-color:
        rgba(212,160,23,.32);

    box-shadow:
        0 14px 30px
        rgba(29,41,82,.11);
}

.contract-basics-link:hover::before{
    left:120%;
}

.contract-basics-link:hover::after{
    transform:translateX(4px);

    color:#8A650F;
}


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

@media (max-width:900px){

    .contract-basics-links{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

@media (max-width:560px){

    .contract-basics-links{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   CONTRACT BASICS — CARD TEXT
   ========================================================= */

.contract-basics-link strong{
    display:block;

    padding-right:28px;

    font-family:'Lora', serif;

    font-size:18px;
    font-weight:600;

    line-height:1.3;

    color:#1D2952;
}


.contract-basics-link small{
    display:block;

    margin-top:10px;

    padding-right:28px;

    font-family:'Assistant', sans-serif;

    font-size:13px;
    font-weight:400;

    line-height:1.45;

    color:#666A73;
}

/* =========================================================
   CCG CONTRACT BASICS MODAL — FINAL REDESIGN
   ========================================================= */


/* =========================================================
   OVERLAY
   ========================================================= */

.basics-modal-overlay{
    padding:
        34px
        22px !important;

    background:
        rgba(19,27,53,.72) !important;

    backdrop-filter:
        blur(5px);
}


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

.basics-modal{
    width:min(1100px, 94vw) !important;
    max-width:1100px !important;

    margin:0 auto !important;

    overflow:hidden !important;

    background:#F4F1E8 !important;

    border:
        1px solid
        rgba(212,160,23,.28) !important;

    border-radius:5px !important;

    box-shadow:
        0 28px 80px rgba(19,27,53,.38),
        0 0 0 1px rgba(240,222,174,.05) !important;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.basics-modal-tabs{
    position:relative;

    display:grid !important;

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

    width:100% !important;

    padding:
        0
        58px
        0
        18px !important;

    background:#1D2952 !important;

    border-bottom:
        1px solid
        rgba(240,222,174,.15);
}


/* Individual tab */

.basics-tab-btn{
    position:relative;

    min-height:66px;

    display:flex;

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

    padding:
        16px
        14px !important;

    border:0 !important;

    background:transparent !important;

    color:
        rgba(244,241,232,.62) !important;

    font-family:
        'Assistant',
        sans-serif !important;

    font-size:15px !important;
    font-weight:700 !important;

    line-height:1.25 !important;

    text-align:center;

    cursor:pointer;

    transition:
        color .25s ease,
        background .25s ease;
}


/* Hover */

.basics-tab-btn:hover{
    color:#F0DEAE !important;

    background:
        rgba(52,63,104,.28) !important;
}


/* Active tab */

.basics-tab-btn.active{
    color:#FFFFFF !important;

    background:
        linear-gradient(
            180deg,
            rgba(52,63,104,.42),
            rgba(29,41,82,0)
        ) !important;
}


/* Gold active indicator */

.basics-tab-btn.active::after{
    content:"";

    position:absolute;

    left:18%;
    right:18%;

    bottom:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #F0DEAE,
            #D4A017,
            #F0DEAE,
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(212,160,23,.20);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.basics-modal-close{
    top:16px !important;
    right:18px !important;

    width:34px;
    height:34px;

    display:flex;

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

    padding:0 !important;

    border:
        1px solid
        transparent !important;

    border-radius:50%;

    background:
        transparent !important;

    color:
        rgba(244,241,232,.55) !important;

    font-family:
        'Assistant',
        sans-serif !important;

    font-size:27px !important;
    font-weight:300;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}


.basics-modal-close:hover{
    color:#F0DEAE !important;

    border-color:
        rgba(212,160,23,.35) !important;

    background:
        rgba(212,160,23,.06) !important;

    transform:rotate(90deg);
}


/* =========================================================
   BODY
   ========================================================= */

.basics-modal-body{
    max-height:72vh !important;

    overflow-y:auto;

    padding:
        46px
        48px
        52px !important;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F9F7F1 54%,
            #F4F1E8 100%
        ) !important;
}


/* =========================================================
   PANEL CHANGE
   ========================================================= */

.basics-panel{
    display:none;
}


.basics-panel.active{
    display:block;

    animation:
        ccgBasicsReveal
        .32s
        ease
        both;
}


@keyframes ccgBasicsReveal{

    from{
        opacity:0;
        transform:translateY(7px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

.basics-modal .content-intro{
    max-width:900px;

    margin:
        0
        0
        34px !important;

    padding-bottom:26px;

    border-bottom:
        1px solid
        rgba(29,41,82,.09);

    color:#343F68 !important;

    font-family:
        'Assistant',
        sans-serif !important;

    font-size:18px !important;

    line-height:1.65 !important;
}


/* =========================================================
   TOPIC CARDS
   ========================================================= */

.basics-modal .topic-block{
    position:relative;

    overflow:hidden;

    margin:
        0
        0
        18px !important;

    padding:
        26px
        28px
        27px !important;

    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid
        rgba(29,41,82,.09) !important;

    border-left:0 !important;

    border-radius:3px !important;

    box-shadow:
        0 6px 18px
        rgba(29,41,82,.035);

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


/* Gold vertical accent */

.basics-modal .topic-block::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(
            180deg,
            #F0DEAE 0%,
            #D4A017 50%,
            #8A650F 100%
        );
}


/* Hover */

.basics-modal .topic-block:hover{
    transform:
        translateY(-3px);

    border-color:
        rgba(212,160,23,.18) !important;

    box-shadow:
        0 12px 27px
        rgba(29,41,82,.08);
}


/* =========================================================
   TOPIC TITLES
   ========================================================= */

.basics-modal .topic-block h4{
    margin:
        0
        0
        9px !important;

    color:#1D2952 !important;

    font-family:
        'Lora',
        serif !important;

    font-size:23px !important;
    font-weight:600 !important;

    line-height:1.25 !important;
}


/* =========================================================
   TOPIC COPY
   ========================================================= */

.basics-modal .topic-block p{
    margin:0 !important;

    color:#555B6B !important;

    font-family:
        'Assistant',
        sans-serif !important;

    font-size:17px !important;

    line-height:1.62 !important;
}


/* =========================================================
   DRAFTING / DETAIL LISTS
   ========================================================= */

.basics-modal .drafting-list{
    columns:2;

    column-gap:38px;

    margin:
        18px
        0
        0 !important;

    padding:0;

    list-style:none;
}


.basics-modal .drafting-list li{
    position:relative;

    break-inside:avoid;

    padding:
        7px
        0
        7px
        20px;

    color:#555B6B !important;

    font-family:
        'Assistant',
        sans-serif !important;

    font-size:16px !important;

    line-height:1.5 !important;
}


.basics-modal .drafting-list li::before{
    content:"";

    position:absolute;

    left:0;
    top:15px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#D4A017;

    box-shadow:
        0 0 7px
        rgba(212,160,23,.18);
}


/* =========================================================
   PULL QUOTE
   ========================================================= */

.basics-modal .pull-quote{
    margin:
        30px
        0
        22px !important;

    padding:
        22px
        26px !important;

    border-left:
        4px solid
        #D4A017 !important;

    background:
        rgba(224,199,127,.10);

    color:#1D2952 !important;

    font-family:
        'Lora',
        serif !important;

    font-size:20px !important;

    font-style:italic;

    line-height:1.55 !important;
}


/* =========================================================
   CLOSING TEXT
   ========================================================= */

.basics-modal .basics-closing{
    margin:0;

    color:#555B6B !important;

    font-family:
        'Assistant',
        sans-serif !important;

    font-size:16px !important;

    line-height:1.6 !important;
}


/* =========================================================
   SCROLLBAR — SUBTLE CCG TREATMENT
   ========================================================= */

.basics-modal-body::-webkit-scrollbar{
    width:8px;
}


.basics-modal-body::-webkit-scrollbar-track{
    background:#F4F1E8;
}


.basics-modal-body::-webkit-scrollbar-thumb{
    background:
        rgba(52,63,104,.38);

    border-radius:10px;
}


.basics-modal-body::-webkit-scrollbar-thumb:hover{
    background:
        rgba(212,160,23,.55);
}


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

@media (max-width:760px){

    .basics-modal-overlay{
        padding:
            14px
            10px !important;
    }

    .basics-modal{
        width:100% !important;
    }

    .basics-modal-tabs{
        grid-template-columns:
            repeat(2,1fr);

        padding:
            0
            42px
            0
            8px !important;
    }

    .basics-tab-btn{
        min-height:54px;

        padding:
            12px
            8px !important;

        font-size:13px !important;
    }

    .basics-modal-body{
        padding:
            30px
            22px
            36px !important;
    }

    .basics-modal .content-intro{
        font-size:16px !important;
    }

    .basics-modal .topic-block{
        padding:
            22px
            21px
            23px !important;
    }

    .basics-modal .topic-block h4{
        font-size:21px !important;
    }

    .basics-modal .topic-block p{
        font-size:16px !important;
    }

    .basics-modal .drafting-list{
        columns:1;
    }

}

/* =========================================================
   CONTRACTS — CONVERGING GRADIENT DIVIDER
   ========================================================= */

.ccg-converge-divider{
    width:100%;
    max-width:930px;
    height:28px;

    /* MORE SPACE ABOVE + BELOW */
    margin:
        115px
        auto
        46px;

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

    overflow:visible;
}


/* =========================================================
   BASE NAVY LINES
   ========================================================= */

.ccg-converge-line{
    position:relative;

    flex:1;

    height:2px;

    overflow:hidden;

    background:#1D2952;
}


/* =========================================================
   GLEAM LAYER
   ========================================================= */

.ccg-converge-line::after{
    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 30%,
            #8A650F 41%,
            #D4A017 46%,
            #F0DEAE 50%,
            #D4A017 54%,
            #8A650F 59%,
            transparent 70%,
            transparent 100%
        );

    background-size:220% 100%;

    pointer-events:none;
}


/* =========================================================
   LEFT SIDE
   outside → center
   ========================================================= */

.ccg-converge-divider.is-visible
.ccg-converge-left::after{

    animation:
        ccgDividerLeftGleam
        1.55s
        ease-out
        1
        forwards;
}


@keyframes ccgDividerLeftGleam{

    0%{
        opacity:0;
        background-position:110% 50%;
    }

    12%{
        opacity:1;
    }

    82%{
        opacity:1;
    }

    100%{
        opacity:0;
        background-position:-10% 50%;
    }

}


/* =========================================================
   RIGHT SIDE
   outside → center
   ========================================================= */

.ccg-converge-divider.is-visible
.ccg-converge-right::after{

    animation:
        ccgDividerRightGleam
        1.55s
        ease-out
        1
        forwards;
}


@keyframes ccgDividerRightGleam{

    0%{
        opacity:0;
        background-position:-10% 50%;
    }

    12%{
        opacity:1;
    }

    82%{
        opacity:1;
    }

    100%{
        opacity:0;
        background-position:110% 50%;
    }

}


/* =========================================================
   CENTER GOLD DIAMOND
   ========================================================= */

.ccg-converge-center{
    position:relative;

    width:9px;
    height:9px;

    flex:
        0
        0
        9px;

    margin:
        0
        11px;

    background:#D4A017;

    transform:
        rotate(45deg)
        scale(1);

    box-shadow:
        0 0 0 4px
        rgba(212,160,23,.08);
}


/* diamond reacts ONCE when gleams arrive */

.ccg-converge-divider.is-visible
.ccg-converge-center{

    animation:
        ccgDividerDiamond
        .52s
        ease-out
        1.08s
        1;
}


@keyframes ccgDividerDiamond{

    0%,
    100%{
        transform:
            rotate(45deg)
            scale(1);

        box-shadow:
            0 0 0 4px
            rgba(212,160,23,.08);
    }

    50%{
        transform:
            rotate(45deg)
            scale(1.28);

        background:#F0DEAE;

        box-shadow:
            0 0 8px
            rgba(212,160,23,.45),
            0 0 18px
            rgba(240,222,174,.25);
    }

}

/* =========================================================
   CONTRACT DIVIDER — SCROLL-ACTIVATED GLEAM
   ========================================================= */

.contract-section-divider .divider-line{
    position:relative;
    height:2px;
    overflow:hidden;

    /* resting navy line */
    background:#1D2952;
}


/* animated gradient layer */
.contract-section-divider .divider-line::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            #1D2952 0%,
            #1D2952 25%,
            #8A650F 40%,
            #D4A017 48%,
            #F0DEAE 50%,
            #D4A017 52%,
            #8A650F 60%,
            #1D2952 75%,
            #1D2952 100%
        );

    background-size:300% 100%;

    opacity:0;
}


/* LEFT LINE:
   gleam travels from far left → diamond
*/
.contract-section-divider.is-visible
.divider-line:first-child::after{
    opacity:1;

    animation:
        dividerGleamLeft
        1.6s
        ease-out
        1
        forwards;
}


/* RIGHT LINE:
   gleam travels from far right → diamond
*/
.contract-section-divider.is-visible
.divider-line:last-child::after{
    opacity:1;

    animation:
        dividerGleamRight
        1.6s
        ease-out
        1
        forwards;
}


@keyframes dividerGleamLeft{

    0%{
        background-position:100% 0;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        background-position:0% 0;
        opacity:0;
    }
}


@keyframes dividerGleamRight{

    0%{
        background-position:0% 0;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        background-position:100% 0;
        opacity:0;
    }
}

.contract-section-divider.is-visible .divider-diamond{
    animation:
        dividerDiamondPulse
        .65s
        ease-out
        1.15s
        1;
}

@keyframes dividerDiamondPulse{

    0%,
    100%{
        transform:rotate(45deg) scale(1);
        box-shadow:none;
    }

    50%{
        transform:rotate(45deg) scale(1.18);

        box-shadow:
            0 0 8px rgba(212,160,23,.45),
            0 0 16px rgba(240,222,174,.25);
    }
}

/* =========================================================
   CONTRACTS — ENGAGEMENT SCOPE
   ========================================================= */

.contract-scope{
    padding:
        92px
        32px
        98px;

    background:#FFFFFF;
}

.contract-scope-inner{
    width:min(1180px, 100%);
    margin:0 auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.contract-scope-heading{
    max-width:820px;

    margin:
        0
        auto
        48px;

    text-align:center;
}

.contract-scope-eyebrow{
    display:block;

    margin-bottom:10px;

    font-family:'Assistant', sans-serif;

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

    letter-spacing:.2em;
    text-transform:uppercase;

    color:#D4A017;
}

.contract-scope-heading h2{
    margin:0;

    font-family:'Lora', serif;

    font-size:clamp(34px, 3.7vw, 46px);
    font-weight:600;

    line-height:1.15;

    color:#1D2952;
}

.contract-scope-rule{
    width:86px;
    height:2px;

    margin:
        19px
        auto
        20px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D4A017,
            #F0DEAE,
            #D4A017,
            transparent
        );
}

.contract-scope-heading p{
    max-width:760px;

    margin:0 auto;

    font-family:'Assistant', sans-serif;

    font-size:16px;

    line-height:1.65;

    color:#555B6B;
}


/* =========================================================
   SPLIT PANEL
   ========================================================= */

.contract-scope-grid{
    position:relative;

    display:grid;

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

    gap:0;

    border:
        1px solid
        rgba(29,41,82,.11);

    background:#FCFBF8;

    box-shadow:
        0 12px 32px
        rgba(29,41,82,.06);
}


/* center divider */

.contract-scope-grid::before{
    content:"";

    position:absolute;

    top:32px;
    bottom:32px;
    left:50%;

    width:1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(29,41,82,.26),
            #D4A017,
            rgba(29,41,82,.26),
            transparent
        );

    transform:translateX(-50%);
}


/* =========================================================
   COLUMNS
   ========================================================= */

.contract-scope-column{
    padding:
        40px
        42px
        34px;
}

.contract-scope-column-heading{
    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:24px;
}

.contract-scope-column-heading > span{
    font-family:'Lora', serif;

    font-size:15px;
    font-weight:600;

    color:#D4A017;
}

.contract-scope-column-heading h3{
    margin:0;

    font-family:'Lora', serif;

    font-size:28px;
    font-weight:600;

    color:#1D2952;
}


/* =========================================================
   LIST
   ========================================================= */

.contract-scope-list{
    margin:0;
    padding:0;

    list-style:none;
}

.contract-scope-list li{
    display:grid;

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

    gap:12px;

    align-items:start;

    padding:
        15px
        0;

    border-bottom:
        1px solid
        rgba(29,41,82,.08);

    font-family:'Assistant', sans-serif;

    font-size:15px;

    line-height:1.55;

    color:#4A4A50;

    transition:
        padding-left .22s ease,
        color .22s ease;
}

.contract-scope-list li:last-child{
    border-bottom:0;
}


/* Gold/navy check */

.contract-scope-check{
    display:flex;

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

    width:20px;
    height:20px;

    margin-top:1px;

    border:
        1px solid
        rgba(212,160,23,.55);

    border-radius:50%;

    background:#1D2952;

    color:#F0DEAE;

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

    line-height:1;
}


/* subtle interaction */

.contract-scope-list li:hover{
    padding-left:5px;

    color:#1D2952;
}


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

@media (max-width:780px){

    .contract-scope-grid{
        grid-template-columns:1fr;
    }

    .contract-scope-grid::before{
        display:none;
    }

    .contract-scope-column + .contract-scope-column{
        border-top:
            1px solid
            rgba(29,41,82,.11);
    }

}

@media (max-width:560px){

    .contract-scope{
        padding:
            72px
            20px
            80px;
    }

    .contract-scope-column{
        padding:
            32px
            24px
            36px;
    }

}

/* =========================================================
   CONTRACT SCOPE — MIDNIGHT PANEL
   ========================================================= */

.contract-scope-grid{

    border:
        1px solid
        rgba(212,160,23,.22);

    background:
        linear-gradient(
            135deg,
            #182342 0%,
            #1D2952 48%,
            #202F59 100%
        );

    box-shadow:
        0 18px 42px
        rgba(19,27,53,.16);
}


/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.contract-scope-column-heading h3{
    color:#F4F1E8;
}

.contract-scope-column-heading > span{
    color:#D4A017;
}


/* =========================================================
   LIST TEXT
   ========================================================= */

.contract-scope-list li{

    color:
        rgba(244,241,232,.82);

    border-bottom:
        1px solid
        rgba(244,241,232,.10);
}


/* Hover becomes brighter rather than navy */

.contract-scope-list li:hover{

    padding-left:5px;

    color:#FFFFFF;
}


/* =========================================================
   CHECKMARKS
   ========================================================= */

.contract-scope-check{

    border:
        1px solid
        rgba(212,160,23,.75);

    background:
        rgba(212,160,23,.10);

    color:#F0DEAE;

    box-shadow:
        inset 0 0 0 1px
        rgba(240,222,174,.06);
}


/* =========================================================
   CENTER DIVIDER
   ========================================================= */

.contract-scope-grid::before{

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(224,199,127,.18) 12%,
            rgba(212,160,23,.72) 50%,
            rgba(224,199,127,.18) 88%,
            transparent 100%
        );
}

/* =========================================================
   CONTRACTS — RELATED SERVICES TRANSITION
   ========================================================= */

.related-services-contracts{
    background:
        linear-gradient(
            180deg,
            #F7F8FB 0%,
            #FFFFFF 46%,
            #F4F1E8 100%
        );
}

.related-services-contracts .related-service-card{
    background:#FCFBF8;
}

/* =========================================================
   CONTRACTS — RELATED SERVICES BACKGROUND
   ========================================================= */

.contract-related-services{
    background:
        linear-gradient(
            180deg,
            #F5F7FB 0%,
            #FFFFFF 48%,
            #F4F1E8 100%
        );
}

/* =========================================================
   CONTRACT LIFECYCLE — SOFT GRADIENT BACKGROUND
   ========================================================= */

.contract-lifecycle{
    background:
        linear-gradient(
            180deg,
            #F5F7FB 0%,
            #FFFFFF 48%,
            #F4F1E8 100%
        );
}

/* =========================================================
   CONTRACT BASICS — FULL WIDTH GRADIENT BAND
   ========================================================= */

.contract-basics-band{
    width:100%;

    background:
        linear-gradient(
            180deg,
            #F5F7FB 0%,
            #FFFFFF 48%,
            #F4F1E8 100%
        );
}

.contract-basics-launcher{
    width:min(1240px, calc(100% - 64px));
    margin:0 auto;

    padding:
        48px
        0
        58px;

    position:relative;
}

/* =========================================================
   CONTRACT DIVIDER — CENTER BETWEEN SECTIONS
   ========================================================= */

.ccg-converge-divider{
    width:min(1240px, calc(100% - 64px));

    margin:
        85px
        auto;

    position:relative;
}

/* =========================================================
   CONTRACT DIVIDER — TIGHT TRANSITION
   ========================================================= */

.ccg-converge-divider{
    width:min(1240px, calc(100% - 64px));

    margin:
        45px
        auto
        45px;

    position:relative;
}

.contract-services{
    padding-bottom:0;
}

/* =========================================================
   BUSINESS OPS — MATCH PRIMARY BUTTON ANIMATION
   ========================================================= */



/* =========================================================
   CONTRACT HERO — MOBILE FULL ARTWORK BAND
   ========================================================= */

@media (max-width:650px){

    .contract-hero{
        position:relative !important;

        min-height:540px !important;

        padding:
            108px
            18px
            34px !important;

        background:#101D3D !important;

        overflow:hidden !important;
    }


    /* =====================================================
       FULL CONTRACT ARTWORK
       ===================================================== */

    .contract-hero-bg{
        position:absolute !important;

        left:0 !important;
        right:0 !important;

        top:105px !important;

        width:100% !important;
        height:365px !important;

        overflow:hidden !important;

        z-index:0 !important;
    }

    .contract-hero-bg img{
        display:block !important;

        width:100% !important;
        height:100% !important;

        object-fit:contain !important;
        object-position:center center !important;

        transform:none !important;
    }


    /* Keep the normal dark treatment across the hero */
    .contract-hero-overlay{
        position:absolute !important;
        inset:0 !important;

        z-index:1 !important;
    }


    /* CONTENT */
    .contract-hero-content{
        position:relative !important;
        z-index:3 !important;

        width:96% !important;
        max-width:none !important;
    }


    /* BREADCRUMB */
    .contract-breadcrumb{
        margin-bottom:16px !important;

        font-size:11px !important;
        line-height:1.3 !important;
    }


    /* HEADLINE */
    .contract-hero h1{
        max-width:100% !important;

        margin:
            0
            auto
            18px !important;

        font-size:34px !important;
        line-height:1.02 !important;
    }


    /* SUPPORTING COPY */
    .contract-hero-lede{
        max-width:100% !important;

        margin:
            0
            auto
            22px !important;

        font-size:14px !important;
        line-height:1.48 !important;
    }


    /* BUTTONS */
    .contract-hero-actions{
        width:100% !important;

        flex-direction:column !important;

        gap:9px !important;
    }

    .contract-hero-btn{
        width:100% !important;

        min-height:46px !important;

        padding:0 16px !important;

        font-size:13px !important;
    }

}

/* =========================================================
   DIGITAL HERO — MOBILE SHIFT IMAGE TO SHOW MORE BRIDGE
   ========================================================= */



/* =========================================================
   CONTRACT SERVICES — MOBILE NAVIGATION
   Stack all six capability tabs vertically
   ========================================================= */

@media (max-width:650px){

    .contract-services{
        padding:
            68px
            20px
            78px !important;
    }

    .contract-service-nav{
        display:grid !important;
        grid-template-columns:1fr !important;

        gap:10px !important;

        width:100% !important;
        margin-bottom:22px !important;
    }

    .contract-service-tab{
        width:100% !important;
        min-width:0 !important;

        min-height:70px !important;

        grid-template-columns:
            34px
            minmax(0,1fr)
            18px !important;

        gap:12px !important;

        padding:
            14px
            18px !important;
    }

    .contract-service-number{
        font-size:15px !important;
    }

    .contract-service-title{
        font-size:15px !important;
        line-height:1.3 !important;
    }

    .contract-service-arrow{
        font-size:20px !important;
    }

    .contract-service-panels{
        width:100% !important;
        min-width:0 !important;
    }

    .contract-service-panel{
        width:100% !important;
        min-width:0 !important;

        padding:
            30px
            20px
            32px !important;
    }

    .contract-service-details{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

}

/* =========================================================
   PUBLIC SECTOR — MOBILE
   Hide support arrows
   ========================================================= */


/* ========================================================= */

.contract-hero-title-main,
.contract-hero-title-accent{
    display:block;
}

.contract-hero-title-accent{
    margin-top:6px;

    font-style:italic;
    font-weight:500;

    background:linear-gradient(
        90deg,
        #F0DEAE 0%,
        #D4A017 45%,
        #E0C77F 72%,
        #BC8810 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    padding-bottom:.10em;
}