/* Crown & Compass Global — Information Operations page styles
   Extracted from the current global stylesheet in original cascade order.
   Keep style.css unchanged during the first live test. */

/*
Theme Name: Crown & Compass Global
Author: Crown & Compass Global
Description: Custom WordPress theme for Crown & Compass Global Business Operations website.
Version: 1.0
Text Domain: crown-and-compass-global
*/



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








/* CLOSE BUTTON */






/* TAB BAR */










/* MODAL BODY */








/* INTRO TEXT */




/* CONTENT CARDS */








/* DRAFTING LIST */








/* QUOTE */






/* MOBILE */











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















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













/* =========================
   DIAGNOSTIC / WHERE DO YOU NEED HELP
   ========================= */











/* Three HORIZONTAL rows */


/* Text left — button right */




/* Blue button */





/* MOBILE */


/* =========================
   BUSINESS OPERATIONS SERVICES
   Reference-style wider layout
   ========================= */






























/* TABLET */



/* MOBILE */


/* =========================
   PRIVACY / TRUST BAND
   Wider reference layout
   ========================= */



















/* =========================
   STATISTICS BAND
   ========================= */











/* Little orange line under each headline */





/* TABLET */



/* MOBILE */


/* =========================
   FLOATING CONSULTATION CTA
   ========================= */













/* =========================
   GLOBAL SITE FOOTER
   ========================= */








/* =========================
   FOOTER TYPOGRAPHY
   ========================= */








/* =========================
   COMPANY / LOGO COLUMN
   ========================= */










/* =========================
   CONTACT COLUMN
   ========================= */








/* =========================
   SERVICES COLUMN
   ========================= */








/* =========================
   NEWSLETTER
   ========================= */
















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






/* ==================================================
   JLG GLOBAL TYPOGRAPHY SCALE
   Larger typography to match reference design
   ================================================== */


/* ---------- NAVIGATION ---------- */




/* ---------- HERO ---------- */






/* ---------- SECTION HEADINGS ---------- */




/* ---------- SECTION INTRO TEXT ---------- */




/* ---------- WHERE DO YOU NEED HELP ---------- */






/* ---------- SERVICE CARDS ---------- */










/* ---------- PRIVACY / TRUST SECTION ---------- */






/* ---------- STATISTICS ---------- */






/* ---------- FLOATING CTA ---------- */




/* ==================================================
   FOOTER TYPOGRAPHY
   ================================================== */


















/* ---------- MOBILE TYPOGRAPHY ---------- */



/* ==================================================
   JLG REFERENCE TYPOGRAPHY — FINAL SCALE
   Match original THG reference proportions
   ================================================== */


/* HEADER / NAV */






/* HEADER LOGO / JLG TEXT */




/* HERO EYEBROW */




/* HERO MAIN HEADLINE */




/* MAIN SECTION HEADINGS */




/* LITTLE LINE UNDER SECTION HEADINGS */




/* SECTION INTRO COPY */




/* ==================================================
   WHERE DO YOU NEED HELP
   ================================================== */








/* ==================================================
   SERVICE CARDS
   ================================================== */










/* ==================================================
   TRUST SECTION
   ================================================== */






/* ==================================================
   STATS
   ================================================== */






/* ==================================================
   FLOATING CONSULTATION BUTTON
   ================================================== */




/* ==================================================
   FOOTER — SCALE EVERYTHING UP TOO
   ================================================== */


















/* ==================================================
   MOBILE — DON'T LET DESKTOP SIZES GET RIDICULOUS
   ================================================== */



/* Wider content proportions to match reference */











/* =========================
   SERVICES SECTION HEADER
   Match reference layout
   ========================= */







/* =========================
   HERO HEADLINE WIDTH / WRAPPING
   Match reference proportions
   ========================= */





/* More breathing room under hero headline */


/* Center the hero content vertically */


/* ==========================================
   HEADER / NAVIGATION — MATCH CCG REFERENCE
   ========================================== */

/* Make the whole header taller */


/* Header inner container */


/* JLG circle */


/* JLG text beside circle */


/* Navigation links */


/* More breathing room between nav links */


/* ==========================================
   FINAL HEADER / NAV SIZE
   Bigger navigation + no active blue line
   ========================================== */

/* Make header taller */


/* Navigation container */


/* ALL navigation links */


/* REMOVE blue line from current/active page */


/* Remove underline if it was created with ::after */


/* Make JLG brand larger too */




/* ==========================================
   FINAL NAVBAR OVERRIDE
   ========================================== */



/* JLG brand area */


/* Circle JLG mark */


/* Navigation container */


/* ACTUAL navigation links */


/* Remove active blue underline */


/* In case underline was created with a pseudo-element */


/* ==========================================
   NAVIGATION FONT
   ========================================== */



/* ==========================================
   NAVIGATION HOVER UNDERLINE
   ========================================== */





/* Expand line on hover */


/* ==========================================
   SECTION HEADING BLUE DIVIDERS
   ========================================== */

/* Where Do You Need Help? */


/* ==========================================
   BLUE SECTION DIVIDER LINES
   ========================================== */





/* ==========================================
   INFORMATION OPERATIONS HERO
   ========================================== */

.info-ops-hero{
    position:relative;

    min-height:390px;

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

    text-align:center;

    padding:80px 24px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(47,111,176,0.35),
            transparent 40%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(47,111,176,0.25),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #0c1524 0%,
            #16233c 55%,
            #10192b 100%
        );
}


/* Grid / dark overlay */
.info-ops-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(16,25,43,0.55),
            rgba(16,25,43,0.78)
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 0 1px,
            transparent 1px 64px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.035) 0 1px,
            transparent 1px 64px
        );
}


.info-ops-hero-inner{
    position:relative;
    z-index:1;

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

    margin:0 auto;
}


.info-ops-eyebrow{
    margin-bottom:18px;

    color:#9db6d8;

    font-family:"Montserrat", sans-serif;
    font-size:16px;
    font-weight:700;

    letter-spacing:0.18em;
    text-transform:uppercase;
}


.info-ops-hero h1{
    max-width:940px;

    margin:0 auto;

    color:#fff;

    font-family:"Lora", serif;
    font-size:56px;
    font-weight:600;

    line-height:1.1;

    text-align:center;
}


/* MOBILE */
@media (max-width:700px){

    .info-ops-hero{
        min-height:auto;
        padding:70px 22px;
    }

    .info-ops-eyebrow{
        font-size:14px;
    }

    .info-ops-hero h1{
        font-size:38px;
    }
}

/* ==========================================
   INFORMATION OPERATIONS
   DOES THIS SOUND FAMILIAR?
   ========================================== */
















/* MOBILE */


/* ==========================================
   INFORMATION OPERATIONS MAIN CONTENT
   ========================================== */

.info-ops-content{
    background:#fff;
}


/* TWO-COLUMN LAYOUT */




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



















/* INFO BUTTON */







/* TOOLTIP */







/* ==========================================
   RIGHT-SIDE CONTENT
   ========================================== */
















/* ==========================================
   ASSESS / ORGANIZE / GOVERN / SUSTAIN
   ========================================== */













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






/* ==========================================
   INFORMATION OPERATIONS
   DOES THIS SOUND FAMILIAR?
   ========================================== */
















/* MOBILE */


/* ==========================================
   INFORMATION OPERATIONS
   MAIN CONTENT — FINAL SCALE / SPACING
   ========================================== */

.info-ops-content{
    padding: 90px 24px 100px;
}

.info-ops-content .page-grid{
    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 70px;

    align-items: start;
}


/* SIDEBAR */

.info-ops-content .sidebar h4{
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 18px;
}

.info-ops-content .side-list li{
    min-height: 58px;
}

.info-ops-content .side-list li > a{
    font-size: 16px;
    line-height: 1.3;
    padding: 18px 16px;
}


/* RIGHT SIDE EYEBROW */

.info-ops-content .eyebrow-label{
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 18px;
}


/* INTRODUCTION */

.info-ops-content .lead{
    font-size: 20px;
    line-height: 1.65;
    max-width: 880px;
    margin-bottom: 55px;
}


/* HOW JLG HELPS */

.info-ops-content .how-jlg-heading{
    font-size: 34px;
    line-height: 1.2;
    margin: 0;
}

.info-ops-content .main-content > .rule{
    width: 70px;
    height: 3px;
    margin: 20px 0 32px;
}


/* FOUR CARDS */

.info-ops-content .steps{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.info-ops-content .step{
    padding: 28px 24px 30px;
    min-height: 230px;
}

.info-ops-content .step-label{
    font-size: 20px;
}

.info-ops-content .step p{
    font-size: 16px;
    line-height: 1.55;
    margin-top: 16px;
}


/* TABLET / MOBILE */

@media (max-width: 1000px){

    .info-ops-content .page-grid{
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .info-ops-content .steps{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 650px){

    .info-ops-content{
        padding: 65px 20px 75px;
    }

    .info-ops-content .steps{
        grid-template-columns: 1fr;
    }

    .info-ops-content .lead{
        font-size: 18px;
    }

}

/* ==========================================
   INFORMATION OPERATIONS
   ALIGNMENT / WIDTH POLISH
   ========================================== */

.info-ops-content .page-grid{
    max-width:1380px;
    margin:0 auto;
    padding-left:40px;
    padding-right:40px;

    grid-template-columns:320px minmax(0, 1fr);
    gap:80px;
}

.info-ops-content .main-content{
    max-width:920px;
}

.info-ops-content .lead{
    max-width:900px;
}

.info-ops-content .steps{
    width:100%;
}

.info-ops-content .step{
    min-width:0;
}

/* Give the whole section a little more vertical balance */
.info-ops-content{
    padding-top:100px;
    padding-bottom:120px;
}

/* ==========================================
   INFORMATION OPERATIONS
   ALIGNMENT / WIDTH POLISH
   ========================================== */

.info-ops-content .page-grid{
    max-width:1380px;
    margin:0 auto;
    padding-left:40px;
    padding-right:40px;

    grid-template-columns:320px minmax(0, 1fr);
    gap:80px;
}

.info-ops-content .main-content{
    max-width:920px;
}

.info-ops-content .lead{
    max-width:900px;
}

.info-ops-content .steps{
    width:100%;
}

.info-ops-content .step{
    min-width:0;
}

/* Give the whole section a little more vertical balance */
.info-ops-content{
    padding-top:100px;
    padding-bottom:120px;
}

/* ==========================================
   STATS BAND — CLEAN WIDE VERSION
   ========================================== */















/* ==========================================
   INFORMATION OPERATIONS
   FINAL REFERENCE LAYOUT
   ========================================== */

.info-ops-content{
    padding:90px 40px 110px;
}

.info-ops-content .page-grid{
    width:92%;
    max-width:1500px;

    margin:0 auto;
    padding:0;

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

    column-gap:90px;

    align-items:start;
}


/* LEFT SIDEBAR */

.info-ops-content .sidebar{
    width:100%;
}

.info-ops-content .sidebar h4{
    font-size:24px;
    line-height:1.15;

    margin:0 0 20px;
}

.info-ops-content .side-list{
    width:100%;
}

.info-ops-content .side-list li > a{
    font-size:17px;
    padding:18px 20px;
}


/* RIGHT CONTENT */

.info-ops-content .main-content{
    width:100%;
    max-width:none;
}

.info-ops-content .eyebrow-label{
    font-size:15px;
    margin-bottom:18px;
}

.info-ops-content .lead{
    width:100%;
    max-width:none;

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

    margin:0;
}


/* HOW JLG HELPS */

.info-ops-content .how-jlg-heading{
    margin-top:58px;

    font-size:35px;
    line-height:1.2;
}

.info-ops-content .main-content > .rule{
    margin:20px 0 34px;
}


/* FOUR PROCESS CARDS */

.info-ops-content .steps{
    width:100%;

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

    gap:26px;
}

.info-ops-content .step{
    width:100%;
    min-width:0;
    min-height:245px;

    padding:30px 26px;
}

.info-ops-content .step-label{
    font-size:21px;
}

.info-ops-content .step p{
    font-size:17px;
    line-height:1.6;

    margin-top:16px;
}


/* TABLET */

@media (max-width:1100px){

    .info-ops-content .page-grid{
        width:94%;
        grid-template-columns:1fr;
        row-gap:50px;
    }

    .info-ops-content .steps{
        grid-template-columns:repeat(2, 1fr);
    }
}


/* MOBILE */

@media (max-width:650px){

    .info-ops-content{
        padding:65px 22px 75px;
    }

    .info-ops-content .page-grid{
        width:100%;
    }

    .info-ops-content .steps{
        grid-template-columns:1fr;
    }
}

/* ==========================================
   CONTRACT & COMMERCIAL OPERATIONS
   FAMILIAR SECTION - TEXT SIZE
   ========================================== */







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



/* Give the second sidebar heading breathing room */


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



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



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




/* HEADINGS */




/* LISTS */








/* BLUE CHECKMARK */




/* MOBILE */



/* ==========================================
   DIGITAL TRANSFORMATION READINESS
   FAMILIAR SECTION
   ========================================== */













/* ==========================================
   DIGITAL TRANSFORMATION READINESS
   FAMILIAR SECTION — MATCH REFERENCE
   ========================================== */






/* TOP INTRO — narrower so it wraps like reference */






/* HEADING */






/* TWO-COLUMN BULLETS */






/* MOBILE */



/* ==========================================
   DIGITAL READINESS — FONT SIZE BOOST
   ========================================== */

/* Intro sentence */


/* Main heading */


/* Bullet text */


/* ==========================================
   DIGITAL READINESS — SPREAD BULLETS OUT
   ========================================== */





/* DIGITAL READINESS — KEEP INTRO ON ONE LINE */





/* ==================================================
   JLG GLOBAL TYPOGRAPHY SYSTEM
   ================================================== */


/* ==========================================
   BODY / GENERAL COPY — ASSISTANT
   ========================================== */




/* Body copy specifically */



/* ==========================================
   ALL HEADINGS — LORA
   ========================================== */




/* Small/card/sidebar headings */



/* Hero headings */

.info-ops-hero h1{
    font-family:"Lora", serif !important;
}


/* ==========================================
   HEADER / NAVIGATION — MONTSERRAT
   ========================================== */




/* ==========================================
   FLOATING CONSULTATION CTA — MONTSERRAT
   ========================================== */




/* ==========================================
   ENTIRE FOOTER — MONTSERRAT
   ========================================== */



/* ==========================================
   DIGITAL READINESS — BRIDGE CALLOUT RESTORE
   ========================================== */



/* ==================================================
   JLG GLOBAL TYPOGRAPHY — SIZE ADJUSTMENT
   ================================================== */

/* BODY COPY — ASSISTANT */





/* MAJOR PAGE HEADINGS */









/* SIDEBAR HEADINGS */



/* SIDEBAR ITEMS */



/* FOUR PROCESS CARDS */





/* PRIVACY / TRUST CARDS */





/* STATS BAND */





/* DOES THIS SOUND FAMILIAR */



/* MAIN SERVICE PAGE COPY */



/* CALLOUT / BRIDGE STATEMENTS */


/* ==========================================
   PRIVACY / TRUST CARDS — LARGER TYPOGRAPHY
   ========================================== */





/* ==========================================
   PRIVACY / TRUST CARDS — WIDER LAYOUT
   ========================================== */











/* ==========================================
   LANDING PAGE — LARGER SERVICE CARD COPY
   ========================================== */

/* Intro/tagline inside each service card */


/* Main description inside service cards */


/* Orange check-list items */



/* ==========================================
   WHERE DO YOU NEED HELP — LARGER COPY
   ========================================== */

/* Description on the left side of each row */


/* Blue destination buttons */


/* ==========================================
   LANDING PAGE — FINAL SUPPORTING TEXT SIZES
   ========================================== */

/* Not sure where to start?... */



/* Three focused service areas, one partner... */



/* BUSINESS OPERATIONS eyebrow */


/* ==========================================
   GLOBAL BLUE DIVIDER LINES — LONGER
   ========================================== */


.info-ops-content .main-content > .rule{
    width:90px !important;
}

/* ==========================================
   FINAL FLOATING CONSULTATION SIZE
   ========================================== */







/* ==========================================
   FINAL STATS BAND HEIGHT + DIVIDERS
   ========================================== */







/* ==========================================
   SERVICE CARDS — TIGHTER VERTICAL SPACING
   ========================================== */

/* Reduce overall top/bottom padding inside cards */


/* Tighten heading → italic tagline */


/* Tighten tagline → description */


/* Tighten description → checklist */


/* Slightly tighten space between checklist items */


/* Keep button from having excessive space above it */


/* ==========================================
   FOOTER — NEWSLETTER SIZE REFINEMENT
   ========================================== */

/* Newsletter heading */


/* Email field */


/* Subscribe button */


/* Copyright */


/* ==========================================
   FOOTER — CLEAN / COMPACT FINAL LAYOUT
   ========================================== */

/* Overall footer spacing */



/* Smaller logo block */



/* Company paragraph — biggest height saver */



/* Social icons closer to company copy */



/* Footer column headings */



/* Shorter lines under headings */



/* Contact information */





/* What We Do links */



/* Newsletter heading */



/* Newsletter row */







/* Copyright */


/* ==================================================
   JLG FOOTER — REDESIGN
   ================================================== */







/* ==========================================
   ALL FOOTER TYPOGRAPHY
   ========================================== */




/* ==========================================
   COMPANY COLUMN
   ========================================== */















/* ==========================================
   SMALL COLUMN HEADERS
   ========================================== */







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










/* ==========================================
   WHAT WE DO
   ========================================== */







/* ==========================================
   NEWSLETTER
   ========================================== */
















/* HOVER */



/* CLICK / PRESSED */



/* ==========================================
   SECOND CONSULTATION CTA
   ========================================== */










/* ==========================================
   COPYRIGHT BOTTOM BAR
   ========================================== */




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






/* ==========================================
   NEWSLETTER EMAIL ROW — FINAL ALIGNMENT
   ========================================== */




/* EMAIL */





/* SUBSCRIBE BUTTON */



/* HOVER */



/* PRESSED */


/* ==========================================
   FOOTER — FINAL TEXT + DIVIDER ALIGNMENT
   ========================================== */


/* JUSTIFY COMPANY BLURB */




/* ==========================================
   MATCH ALL COLUMN HEADER DIVIDERS
   ========================================== */

/* Make these three columns use the full
   available width of their grid column */




/* Keep all three section labels consistent */




/* Make every divider line identical */



/* ==================================================
   FOOTER HEADINGS — CENTER + PERFECTLY ALIGNED RULES
   ================================================== */

/* The three footer section headings */



/* The three lines directly underneath */


/* ==========================================
   STATS BAND — SITEWIDE GRAY BACKGROUND
   ========================================== */



/* ==================================================
   STATS BAND — BODY TEXT OFF-WHITE
   ================================================== */





/* KEEP STAT HEADINGS PURE WHITE */


/* ==================================================
   STATS BAND — VERTICAL DIVIDERS
   ================================================== */





/* ==================================================
   DIAGNOSTIC BUTTONS — JLG BLUE
   ================================================== */





/* =========================================================
   JLG BUSINESS OPERATIONS — HERO BACKGROUND IMAGE
   ========================================================= */



/* =========================================================
   SERVICE PAGE HEROES — MATCH LANDING PAGE
   ========================================================= */

.info-ops-hero{
    background:
        linear-gradient(
            rgba(15, 27, 45, 0.62),
            rgba(15, 27, 45, 0.62)
        ),
        url("assets/images/jlg-world-map.png") center center / cover no-repeat !important;

    color:#ffffff;
}


/* Small uppercase service label */
.info-ops-eyebrow{
    color:#a9bdd6 !important;
}


/* Main hero headline */
.info-ops-hero h1{
    color:#ffffff !important;
    font-family:"Lora", serif !important;
}

/* =========================================================
   FAMILIAR SECTION — TYPOGRAPHY
   ========================================================= */

/* Section heading */


/* Bullet text */


/* Keep the bullet itself proportional */


/* =========================================================
   INFORMATION OPERATIONS — MAIN CONTENT PROPORTIONS
   ========================================================= */

/* Overall section width */
.info-ops-content .page-grid{
    width:92% !important;
    max-width:1500px !important;

    margin:0 auto;

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

    column-gap:70px !important;

    align-items:start;
}


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

.info-ops-content .sidebar{
    width:100% !important;
}

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


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

.info-ops-content .side-list a{
    font-size:18px !important;
    line-height:1.25;

    padding:18px 18px !important;
}


/* Info "i" column */
.info-ops-content .tip-toggle{
    width:52px !important;
    min-width:52px !important;

    font-size:21px !important;
}


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

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

.info-ops-content .main-content .lead{
    font-size:22px !important;
    line-height:1.55 !important;

    max-width:100% !important;
}


/* How JLG Helps heading */
.info-ops-content .section-heading{
    font-size:40px !important;
    margin-top:54px !important;
}


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

.info-ops-content .steps{
    width:100% !important;

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

    gap:24px !important;
}

.info-ops-content .step{
    min-width:0 !important;
    min-height:300px !important;

    padding:30px 28px !important;
}

.info-ops-content .step-label{
    font-size:22px !important;
}

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

    margin-top:18px !important;
}

/* =========================================================
   INFORMATION OPERATIONS — SIDEBAR POPUPS
   ========================================================= */

.info-ops-content .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 & COMMERCIAL OPERATIONS — FAMILIAR SECTION
   Match Information Operations sizing
========================================================= */





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


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






/* Sidebar rows */





/* Info "i" column */



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






/* How JLG Helps heading */



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










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



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

/* Section headings */



/* Individual list items */



/* Checkmarks */


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


/* Overall modal box */



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






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




/* Intro paragraph at top of each tab */



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




/* Agreement / Consideration / Clarity / etc. */



/* Topic descriptions */



/* Lists inside Harnessing Our Strengths */



/* Pull quote in Harnessing Our Strengths */



/* =========================================================
   DIGITAL TRANSFORMATION READINESS — FINAL SIZING
   Match Information Operations + Contract Operations
========================================================= */


/* =========================================================
   DOES THIS SOUND FAMILIAR
========================================================= */






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






/* Sidebar rows */





/* Info "i" column */



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




/* Main introduction paragraph */



/* =========================================================
   BRIDGE / GARBAGE-IN-GARBAGE-OUT CALLOUT
========================================================= */




/* =========================================================
   HOW JLG HELPS
========================================================= */




/* Four cards */





/* Assess / Clean / Prepare / Validate */



/* Card body text */



/* =========================================================
   DIGITAL READINESS — SIDEBAR POPUPS
========================================================= */



/* ==========================================
DIGITAL READINESS — BRIDGE STATEMENT
========================================== */










/* Filled logos */




/* ==================================================
   FOOTER SOCIALS — CENTER UNDER COMPANY BLURB
   ================================================== */





/* =========================================================
   JLG HERO BACKGROUND COLOR — SITEWIDE
   ========================================================= */


.info-ops-hero{
    background-color: #364E69 !important;
}

/* =========================================================
   HERO OVERLAY — LIGHTER JLG BLUE, NO GRID
========================================================= */




.info-ops-hero{
    background-color:#364E69 !important;
}

/* =========================================================
   JLG FOOTER — FULL-WIDTH SKYLINE
   ========================================================= */




/* Full-width skyline behind footer content */



/* Keep all footer information ABOVE the skyline */



/* Existing decorative overlay stays behind content too */


/* =========================================================
   HEADER — JLG LOGO
   ========================================================= */





/* =========================================================
   FOOTER — JLG LOGO ALIGNMENT
   ========================================================= */











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




/* Dark overlay — matches Information Operations treatment */



/* Keep hero content above background overlay */


/* =========================================================
   DIGITAL TRANSFORMATION READINESS — HERO BACKGROUND
========================================================= */







/* =========================================================
   CCG BUSINESS OPERATIONS — HERO CONTENT / POSITION
   ========================================================= */




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








/* =========================
   BUSINESS OPERATIONS LABEL
   ========================= */




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




/* =========================
   HERO SUPPORTING COPY
   ========================= */




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




/* Shared button */



/* =========================
   GOLD PRIMARY BUTTON
   ========================= */






/* =========================
   SECONDARY OUTLINE BUTTON
   ========================= */






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



/* =========================================================
   CCG HERO BREADCRUMB — GOLD
   ========================================================= */




/* Current page */



/* HOME LINK */



/* RADIANT GOLD SHIMMER ON HOVER */





/* =========================================================
   CCG FLOATING CONSULTATION TAB
   GOLD / CHAMPAGNE ANIMATED GRADIENT
   ========================================================= */




/* Arrow */



/* HOVER */



/* Optional soft shine sweep */






/* Keep the actual text above the shine layer */


/* =========================================================
   CCG HERO — ROTATING GLOBE LAYER
   ========================================================= */




/* Actual 3D globe */



/* Make Globe.GL canvas fill our container */



/* Hero copy always stays above globe */



/* Dark veil so the globe never competes with the copy */



/* Responsive sizing */





/* =========================================================
   CCG HEADER — STEP 1
   TRANSPARENT LOGO + HAMBURGER
   ========================================================= */






/* Logo */






/* Hamburger */






/* GOLD HOVER */










/* WordPress admin bar */





/* =========================================================
   CCG HEADER — CLEANUP
   ========================================================= */

/* 1. REMOVE BOTTOM LINE */



/* 2. HAMBURGER — NO MOVEMENT, ONLY GOLD HOVER */





/* Kill the staggered movement completely */



/* 3. MAKE LOGO MUCH BIGGER */



/* Give the larger logo enough vertical room */


/* =========================================================
   CCG HEADER — FINAL POSITIONING OVERRIDE
   ========================================================= */






/* =========================================================
   LOGO
   ========================================================= */






/* =========================================================
   HAMBURGER
   ========================================================= */




/* Hamburger lines */




/* =========================================================
   HAMBURGER HOVER — COLOR ONLY
   NO MOVEMENT
   ========================================================= */





/* =========================================================
   CCG HEADER — SIZE REFINEMENT
   ========================================================= */

/* LOGO: smaller and tucked back into the corner */





/* HEADER POSITIONING */



/* HAMBURGER: smaller + tighter */



/* All three lines exactly the same */



/* Hover = gold glow ONLY */


/* Move only the logo farther left */




/* =========================================
   CCG LOGO — GOLD GLOW HOVER
   ========================================= */





/* =========================================
   CCG MENU — GOLD GLOW HOVER
   ========================================= */





/* =========================================
   CCG GLOBE — LIGHT / GLOW TREATMENT
   ========================================= */



/* =========================================================
   BUSINESS OPERATIONS — DIAGNOSTIC SECTION
   CCG COLOR REFRESH
   ========================================================= */


/* SECTION BACKGROUND */




/* HEADING */




/* GOLD GRADIENT RULE */




/* INTRO TEXT */




/* =========================================================
   DIAGNOSTIC ROWS
   ========================================================= */




/* ROW TEXT */




/* =========================================================
   ROW HOVER
   Subtle lift — same visual language as our other cards
   ========================================================= */




/* =========================================================
   SERVICE BUTTONS
   ========================================================= */




/* =========================================================
   BUTTON HOVER — GOLD TEXT + GLOW
   ========================================================= */



/* =========================================
   DIAGNOSTIC BUTTONS — MIDNIGHT ROYAL
   ========================================= */



/* GOLD REFLECTION */



/* SWEEP THE REFLECTION ACROSS ON HOVER */



/* =========================================
   DIAGNOSTIC BUTTON — GOLD TEXT + ONE-WAY GLEAM
   ========================================= */




/* Gold light strip — stays hidden off left */



/* Hover state */



/* Run gleam ONLY forward */





/* =========================================================
   BUSINESS OPERATIONS — SERVICE CARDS
   CCG COLOR + HOVER REFRESH
   ========================================================= */


/* SECTION HEADING */




/* GOLD GRADIENT RULE */




/* SECTION SUBCOPY */




/* =========================================================
   SERVICE CARDS
   ========================================================= */




/* CARD HOVER */




/* CARD HEADINGS */




/* ITALIC SUBHEAD / TAGLINE */




/* BODY TEXT */




/* CHECKMARKS */




/* =========================================================
   SERVICE CARD BUTTONS
   EXACT SAME MIDNIGHT + GLEAM TREATMENT
   ========================================================= */




/* GLEAM STRIP */




/* HOVER */




/* ONE-WAY GLEAM */






/* =========================================================
   GLOBAL TRUST / VALUE CARDS
   Privacy-First, AI-Assisted, Human-Approved
   Reusable across all pages
   ========================================================= */

/* Section heading */



/* Gold gradient divider under heading */



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




/* Subtle card lift */



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




/* =========================================================
   CARD BODY COPY
   ========================================================= */



/* =========================================================
   GOLD GRADIENT TOP STRIP
   ========================================================= */







/* =========================================================
   GLOBAL STATS / CREDIBILITY BAND
   Reusable across all pages
   ========================================================= */




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




/* =========================================================
   EACH STAT
   ========================================================= */




/* Soft fading vertical separators */



/* =========================================================
   MAIN STAT NUMBER / HEADING
   ========================================================= */




/* =========================================================
   GOLD GRADIENT RULE
   ========================================================= */




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




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






/* =========================================================
   FOOTER — GLOBAL TYPOGRAPHY
   ========================================================= */

/* All normal footer writing = Assistant */


/* Keep existing heading fonts as-is */










/* =========================================================
   FOOTER — FINAL BACKGROUND RESET
   ========================================================= */



/* =========================================================
   REMOVE OLD FOOTER SKYLINE
   ========================================================= */



/* =========================================================
   NEW CCG FOOTER SKYLINE
   ========================================================= */











/* =========================================================
   FOOTER — LOWER CONTENT INTO SKYLINE
   ========================================================= */




/* Move copyright lower too */


/* =========================================
   FOOTER HEADINGS — GOLD
   ========================================= */



/* =========================================
   FOOTER SUBSCRIBE BUTTON
   GOLD + ONE-WAY GLEAM
   ========================================= */




/* Gleam strip */



/* Hover */



/* One-way gleam */















/* =========================================================
   CCG FOOTER — FINAL MASTER OVERRIDE
   DO NOT ADD OLDER FOOTER RULES BELOW THIS BLOCK
   ========================================================= */


/* =========================================================
   FOOTER SHELL
   ========================================================= */




/* Kill old pseudo-element skylines permanently */



/* =========================================================
   FOUR-COLUMN FOOTER GRID
   ========================================================= */




/* =========================================================
   COLUMN 1 — LARGE LOGO
   REMOVE LOGO FROM NORMAL GRID HEIGHT
   ========================================================= */




/* Logo link is positioned independently */



/* Actual logo */



/* =========================================================
   COLUMN 2 — COMPANY
   ========================================================= */










/* =========================================================
   SOCIAL ICONS
   ========================================================= */













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




/* Gold/faint divider underneath */



/* =========================================================
   WHAT WE DO
   ========================================================= */










/* Current page */



/* =========================================================
   THE COMPASS
   ========================================================= */







/* Email + button row */



/* Email field */






/* =========================================================
   SUBSCRIBE — GOLD GLEAM
   ========================================================= */




/* Gleam */












/* =========================================================
   REQUEST CONSULTATION
   ========================================================= */







/* =========================================================
   SKYLINE
   THIS IS A BACKGROUND LAYER — NOT ITS OWN SECTION
   ========================================================= */







/* =========================================================
   COPYRIGHT
   ========================================================= */




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






/* =========================================================
   CCG FULLSCREEN NAVIGATION — MASTER
   ========================================================= */




/* OPEN STATE */



/* =========================================================
   INNER PANEL
   ========================================================= */




/* =========================================================
   NAVIGATION LINKS
   ========================================================= */







/* LITTLE NUMBERS */



/* BIG PAGE NAME */



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







/* GOLD UNDERSCORE / LIGHT TRAIL */







/* =========================================================
   ACTIVE PAGE
   ========================================================= */







/* =========================================================
   MENU FOOTER
   ========================================================= */




/* CONSULTATION LINK */







/* =========================================================
   HAMBURGER ABOVE OVERLAY
   ========================================================= */




/* =========================================================
   HAMBURGER → X
   ========================================================= */
















/* =========================================================
   PREVENT PAGE SCROLL WHEN MENU IS OPEN
   ========================================================= */




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



/* =========================================================
   CCG FULLSCREEN NAV — FINAL POLISH
   ========================================================= */


/* =========================================================
   1. SMOOTH SLIDE-IN / SLIDE-OUT
   ========================================================= */







/* =========================================================
   2. SPREAD MENU ITEMS OUT MORE
   ========================================================= */







/* =========================================================
   3. NO AUTOMATIC CURRENT-PAGE HIGHLIGHT
   Footer keeps that behavior — menu does NOT.
   ========================================================= */







/* Remove permanent underline from current page */



/* But current page STILL gets the normal hover effect */









/* =========================================================
   4. REQUEST A CONSULTATION — GOLD GLEAM
   ========================================================= */




/* Moving light strip */



/* Hover glow */



/* One-way gleam */





/* =========================================================
   NAV — LOWER BOTTOM DIVIDER
   ========================================================= */







/* =========================================================
   INFORMATION OPERATIONS — HERO
   ========================================================= */

.info-ops-hero{
    position:relative;

    min-height:610px;

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

    overflow:hidden;

    background:#1D2952;

    padding:
        90px
        32px
        60px;
}


/* =========================================================
   BACKGROUND ARTWORK
   ========================================================= */

.info-ops-hero-bg{
    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;
}


.info-ops-hero-bg img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

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

    display:block;
}


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

.info-ops-hero-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:
        radial-gradient(
            circle at center,
            rgba(29,41,82,.22) 0%,
            rgba(29,41,82,.36) 34%,
            rgba(29,41,82,.08) 66%,
            rgba(29,41,82,.02) 100%
        );
}


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

.info-ops-hero-content{
    position:relative;

    z-index:2;

    width:min(820px, 92%);

    margin:0 auto;

    text-align:center;
}


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

.info-ops-breadcrumb{
    display:flex;

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

    flex-wrap:wrap;

    gap:7px;

    margin-bottom:18px;

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

    font-size:13px;

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


/* =========================================================
   INFO OPS BREADCRUMB — MATCH BUSINESS OPERATIONS
   ========================================================= */

.info-ops-breadcrumb{
    color:#D4A017 !important;
}


/* EVERYTHING in breadcrumb stays gold */
.info-ops-breadcrumb a,
.info-ops-breadcrumb span{
    color:#D4A017 !important;
}


/* Clickable breadcrumb pieces */
.info-ops-breadcrumb a{
    position:relative;

    display:inline-block;

    font-weight:600;

    text-decoration:none !important;

    background:#D4A017;
    background-clip:text;
    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}


/* One-way gleam across the WORDS */
.info-ops-breadcrumb a:hover{
    background:
        linear-gradient(
            110deg,
            #D4A017 0%,
            #D4A017 32%,
            #F4F1E8 47%,
            #F0DEAE 53%,
            #D4A017 68%,
            #D4A017 100%
        );

    background-size:250% 100%;

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

    -webkit-text-fill-color:transparent;

    animation:
        infoBreadcrumbGleam
        .65s
        ease-out
        1;
}


@keyframes infoBreadcrumbGleam{

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

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

}


/* =========================================================
   EYEBROW
   ========================================================= */

.info-ops-eyebrow{
    margin-bottom:18px;

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

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

    letter-spacing:.20em;

    text-transform:uppercase;

    color:#D4A017;
}


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

.info-ops-hero h1{
    margin:
        0
        auto
        22px;

    max-width:900px;

    font-family:"Lora", serif;

    font-size:clamp(42px, 5vw, 68px);

    font-weight:600;

    line-height:1.08;

    color:#FFFFFF;

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


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

.info-ops-lede{
    max-width:720px;

    margin:
        0
        auto
        34px;

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

    font-size:17px;

    line-height:1.6;

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


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

.info-ops-hero-actions{
    display:flex;

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

    flex-wrap:wrap;

    gap:16px;
}


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

.info-ops-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 — GOLD
   ========================================================= */

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

    color:#1D2952;

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


/* Gleam */
.info-ops-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;
}


.info-ops-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);
}


.info-ops-btn-primary:hover::before{
    opacity:1;

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


@keyframes infoOpsHeroGleam{

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

    10%{
        opacity:1;
    }

    90%{
        opacity:1;
    }

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

}


/* =========================================================
   SECONDARY — OUTLINE
   ========================================================= */

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

    color:#FFFFFF;

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

    backdrop-filter:
        blur(3px);
}


.info-ops-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){

    .info-ops-hero{
        min-height:600px;

        padding:
            110px
            24px
            70px;
    }

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

    .info-ops-lede{
        font-size:16px;
    }

}


@media (max-width:520px){

    .info-ops-hero-actions{
        flex-direction:column;

        align-items:stretch;
    }

    .info-ops-btn{
        width:100%;
    }

}

/* =========================================================
   INFORMATION OPS HERO — SOFTEN BACKGROUND ARTWORK
   ========================================================= */

.info-ops-hero-bg{
    opacity:.50;
}


/* Darken/fade the artwork around edges + behind text */
.info-ops-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        /* LEFT EDGE — helps CCG logo stay readable */
        linear-gradient(
            90deg,
            rgba(29,41,82,.88) 0%,
            rgba(29,41,82,.55) 10%,
            rgba(29,41,82,.15) 25%,
            transparent 38%
        ),

        /* RIGHT EDGE — keeps hamburger / CTA area calmer */
        linear-gradient(
            270deg,
            rgba(29,41,82,.72) 0%,
            rgba(29,41,82,.34) 10%,
            transparent 28%
        ),

        /* CENTER — gives headline clean breathing room */
        radial-gradient(
            ellipse at center,
            rgba(29,41,82,.74) 0%,
            rgba(29,41,82,.58) 30%,
            rgba(29,41,82,.28) 52%,
            rgba(29,41,82,.08) 72%,
            transparent 100%
        ),

        /* TOP EDGE — protects header/logo */
        linear-gradient(
            180deg,
            rgba(29,41,82,.72) 0%,
            rgba(29,41,82,.22) 16%,
            transparent 32%
        );
}

/* =========================================================
   INFO OPS — ANIMATION LAYER FIX
   ========================================================= */

/* Static artwork at bottom */
.info-ops-hero .info-ops-hero-bg{
    position:absolute !important;
    inset:0 !important;

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

    z-index:0 !important;
}


/* Dark/legibility treatment above artwork */
.info-ops-hero .info-ops-hero-overlay{
    position:absolute !important;
    inset:0 !important;

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

    z-index:1 !important;

    pointer-events:none !important;
}


/* THIS is the missing piece */
.info-ops-hero .info-ops-flow{
    position:absolute !important;
    inset:0 !important;

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

    z-index:2 !important;

    overflow:hidden !important;

    pointer-events:none !important;
}

/* =========================================================
   INFO OPS — SHIFT COMPLETE PARTICLE SYSTEM UP
   ========================================================= */

.info-ops-hero .info-ops-flow{
    transform:translateY(-28px) !important;
}

/* =========================================================
   INFO OPS FLOW — RESPONSIVE CANVAS
   Prevents paths from being clipped on narrow screens
   ========================================================= */


/* HALF-SCREEN / SMALL DESKTOP */
@media (max-width:1200px){

    .info-ops-hero .info-ops-flow{
        /*
           Give the particle paths their ORIGINAL coordinate
           space instead of clipping them to viewport width.
        */
        width:1980px !important;
        max-width:none !important;

        overflow:visible !important;

        /*
           Then shrink that full 1980px animation canvas
           to fit the narrower hero.
        */
        transform:
            translateY(-28px)
            scaleX(.55) !important;

        transform-origin:left center !important;
    }

}


/* Around your half-screen size */
@media (max-width:1000px){

    .info-ops-hero .info-ops-flow{
        transform:
            translateY(-28px)
            scaleX(.47) !important;
    }

}


/* TABLET */
@media (max-width:800px){

    .info-ops-hero .info-ops-flow{
        width:1980px !important;

        transform:
            translateY(-22px)
            scaleX(.39)
            scaleY(.92) !important;

        transform-origin:left center !important;

        opacity:.82;
    }

}


/* MOBILE */
@media (max-width:600px){

    .info-ops-hero .info-ops-flow{
        width:1980px !important;

        transform:
            translateY(-16px)
            scaleX(.29)
            scaleY(.82) !important;

        transform-origin:left center !important;

        opacity:.65;
    }

}

/* Actual hero writing/buttons remain above animation */
.info-ops-hero .info-ops-hero-content{
    position:relative !important;

    z-index:3 !important;
}

/* =========================================================
   INFO OPS — FLOW PARTICLES FOLLOWING PAINTED STREAMS
   ========================================================= */

.info-ops-flow .flow-particle{
    position:absolute;
    top:0;
    left:0;

    display:block;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#D4A017;

    opacity:0;

    box-shadow:
        0 0 5px rgba(240,222,174,.95),
        0 0 11px rgba(212,160,23,.72),
        0 0 19px rgba(212,160,23,.32);

    offset-distance:0%;
        offset-rotate:0deg;

    animation:
        infoOpsFollowPath
        10s
        linear
        infinite;

    will-change:offset-distance, opacity;
}


/* =========================================================
   FINAL TIGHTENING — INFORMATION FLOW PATHS
   ========================================================= */

/* PATH A — UPPER OUTER */

.flow-particle-1,
.flow-particle-5,
.flow-particle-9{
    offset-path:path("M -60 160 C 220 175, 430 225, 650 260 C 820 285, 980 294, 1110 292 C 1210 290, 1280 265, 1345 215 C 1420 155, 1510 115, 1600 100 C 1730 82, 1850 80, 1980 78");
}


/* PATH B — UPPER INNER */

.flow-particle-2,
.flow-particle-6,
.flow-particle-10{
    offset-path:path("M -60 255 C 230 265, 450 295, 670 312 C 850 323, 990 325, 1110 324 C 1210 323, 1285 308, 1350 275 C 1425 235, 1510 198, 1600 182 C 1730 164, 1850 162, 1980 160");
}


/* PATH C — CENTER / PINCH */

.flow-particle-3,
.flow-particle-7,
.flow-particle-11,
.flow-particle-13{
    offset-path:path("M -60 365 C 260 365, 480 358, 700 352 C 880 348, 1010 347, 1120 347 C 1220 347, 1295 346, 1360 344 C 1460 342, 1580 340, 1700 340 C 1810 340, 1900 340, 1980 340");
}


/* PATH D — LOWER INNER */

.flow-particle-4,
.flow-particle-8,
.flow-particle-12{
    offset-path:path("M -60 470 C 230 455, 450 420, 670 390 C 850 365, 990 357, 1110 356 C 1210 355, 1285 370, 1350 402 C 1425 440, 1510 478, 1600 495 C 1730 515, 1850 518, 1980 520");
}


/* PATH E — LOWER OUTER */

.flow-particle-14,
.flow-particle-15,
.flow-particle-16{
    offset-path:path("M -60 555 C 220 530, 430 470, 650 415 C 820 375, 980 360, 1080 358 C 1160 360, 1225 372, 1285 402 C 1360 440, 1440 495, 1530 535 C 1640 582, 1780 590, 1980 594");
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes infoOpsFollowPath{

    0%{
        offset-distance:0%;
        opacity:0;
        transform:scale(.65);
    }

    8%{
        opacity:.28;
    }

    38%{
        opacity:.55;
    }

    58%{
        opacity:.95;
        transform:scale(1);
    }

    82%{
        opacity:.7;
    }

    100%{
        offset-distance:100%;
        opacity:0;
        transform:scale(.6);
    }

}


/* =========================================================
   DIFFERENT SPEEDS / DELAYS
   ========================================================= */

.flow-particle-1{
    animation-duration:9.2s;
    animation-delay:-1s;
}

.flow-particle-2{
    animation-duration:10.8s;
    animation-delay:-5s;
}

.flow-particle-3{
    animation-duration:8.7s;
    animation-delay:-3s;

    background:#F0DEAE;
}

.flow-particle-4{
    animation-duration:11.6s;
    animation-delay:-7s;
}

.flow-particle-5{
    animation-duration:12.4s;
    animation-delay:-9s;

    width:3px;
    height:3px;
}

.flow-particle-6{
    animation-duration:9.8s;
    animation-delay:-4s;

    background:#E0C77F;
}

.flow-particle-7{
    animation-duration:13s;
    animation-delay:-10s;

    width:4px;
    height:4px;
}

.flow-particle-8{
    animation-duration:10.3s;
    animation-delay:-6s;
}

.flow-particle-9{
    animation-duration:14s;
    animation-delay:-12s;

    width:3px;
    height:3px;
}

.flow-particle-10{
    animation-duration:11.2s;
    animation-delay:-8s;
}

.flow-particle-11{
    animation-duration:9.5s;
    animation-delay:-2s;

    background:#F4F1E8;
}

.flow-particle-12{
    animation-duration:13.4s;
    animation-delay:-11s;
}

.flow-particle-13{
    animation-duration:12s;
    animation-delay:-5.5s;

    width:3px;
    height:3px;

    background:#E0C77F;
}

.flow-particle-14{
    animation-duration:14.5s;
    animation-delay:-9.5s;
}

/* =========================================================
   INFORMATION OPERATIONS
   DOES THIS SOUND FAMILIAR?
   ========================================================= */

.info-signs{
    position:relative;

    background:#FFFFFF;

    padding:
        65px
        32px
        100px;

    scroll-margin-top:90px;
}

.info-signs-inner{
    width:min(1180px, 100%);

    margin:0 auto;
}


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

.info-signs-heading{
    max-width:760px;

    margin:
        0
        auto
        52px;

    text-align:center;
}


.info-signs-eyebrow{
    display:block;

    margin-bottom:12px;

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

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

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#D4A017;
}


.info-signs-heading h2{
    margin:0;

    font-family:"Lora", serif;

    font-size:clamp(34px, 4vw, 48px);
    font-weight:600;

    line-height:1.15;

    color:#1D2952;
}


.info-signs-rule{
    width:120px;
    height:3px;

    margin:
        20px
        auto
        22px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #E0C77F 20%,
            #D4A017 50%,
            #E0C77F 80%,
            transparent 100%
        );
}


.info-signs-heading p{
    max-width:700px;

    margin:0 auto;

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

    font-size:17px;

    line-height:1.65;

    color:#4A4A50;
}


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

.info-signs-grid{
    display:grid;

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

    gap:24px;
}


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

.info-sign-card{
    position:relative;

    overflow:hidden;

    min-height:270px;

    padding:
        34px
        34px
        32px;

    background:#F4F1E8;

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

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

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


/* GOLD STRIP */
.info-sign-card-top{
    position:absolute;

    top:0;
    left:0;
    right:0;

    height:5px;

    background:
        linear-gradient(
            90deg,
            #8A650F 0%,
            #D4A017 42%,
            #F0DEAE 72%,
            #D4A017 100%
        );
}


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

.info-sign-card-header{
    display:flex;

    align-items:baseline;

    gap:17px;
}


.info-sign-number{
    flex:0 0 auto;

    font-family:"Lora", serif;

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

    line-height:1;

    color:#D4A017;
}


.info-sign-card h3{
    margin:0;

    font-family:"Lora", serif;

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

    color:#1D2952;
}


/* Small fading line underneath category */
.info-sign-card-rule{
    height:1px;

    margin:
        19px
        0
        24px;

    background:
        linear-gradient(
            90deg,
            rgba(212,160,23,.72) 0%,
            rgba(224,199,127,.38) 45%,
            transparent 100%
        );
}


/* =========================================================
   PAIN POINTS
   ========================================================= */

.info-sign-points{
    display:flex;

    flex-direction:column;

    gap:19px;
}


.info-sign-point{
    display:grid;

    grid-template-columns:
        10px
        1fr;

    gap:12px;

    align-items:start;
}


.info-sign-dot{
    width:6px;
    height:6px;

    margin-top:9px;

    border-radius:50%;

    background:#D4A017;

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


.info-sign-point p{
    margin:0;

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

    font-size:16px;

    line-height:1.55;

    color:#34343A;
}


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

.info-sign-card:hover{
    transform:
        translateY(-6px);

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

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


/* =========================================================
   SMOOTH HERO → SECTION SCROLL
   ========================================================= */




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

@media (max-width:800px){

    .info-signs{
        padding:
            72px
            24px
            80px;
    }

    .info-signs-grid{
        grid-template-columns:1fr;
    }

    .info-sign-card{
        min-height:0;
    }

}


@media (max-width:520px){

    .info-signs{
        padding:
            62px
            20px
            68px;
    }

    .info-sign-card{
        padding:
            30px
            24px
            28px;
    }

    .info-sign-number{
        font-size:29px;
    }

    .info-sign-card h3{
        font-size:22px;
    }

}

/* =========================================================
   INFORMATION OPERATIONS — HOW WE WORK
   ========================================================= */

.info-how-we-work{
    background:#FFFFFF;

    padding:
        80px
        32px
        95px;
}


.info-how-inner{
    width:min(1240px, 100%);

    margin:0 auto;
}


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

.info-how-heading{
    max-width:800px;

    margin:
        0
        auto
        68px;

    text-align:center;
}


.info-how-eyebrow{
    display:block;

    margin-bottom:12px;

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

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

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#D4A017;
}


.info-how-heading h2{
    margin:0;

    font-family:"Lora", serif;

    font-size:clamp(34px, 4vw, 48px);
    font-weight:600;

    line-height:1.15;

    color:#1D2952;
}


.info-how-rule{
    width:120px;
    height:3px;

    margin:
        20px
        auto
        22px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #E0C77F 20%,
            #D4A017 50%,
            #E0C77F 80%,
            transparent 100%
        );
}


.info-how-heading p{
    max-width:720px;

    margin:0 auto;

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

    font-size:17px;

    line-height:1.65;

    color:#4A4A50;
}


/* =========================================================
   PROCESS WRAPPER
   ========================================================= */

.info-how-process{
    position:relative;

    display:grid;

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

    gap:36px;
}


/* =========================================================
   CONNECTING LINE
   ========================================================= */

.info-how-line{
    position:absolute;

    top:34px;

    left:12.5%;
    right:12.5%;

    height:2px;

    z-index:0;

    background:
        linear-gradient(
            90deg,
            rgba(224,199,127,.22) 0%,
            #D4A017 20%,
            #E0C77F 50%,
            #D4A017 80%,
            rgba(224,199,127,.22) 100%
        );
}


/* little moving gleam */
.info-how-line::after{
    content:"";

    position:absolute;

    top:-2px;
    left:0;

    width:90px;
    height:6px;

    opacity:.55;

    filter:blur(2px);

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

    animation:
        infoHowLineGleam
        5.5s
        ease-in-out
        infinite;
}


@keyframes infoHowLineGleam{

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

    12%{
        opacity:.55;
    }

    88%{
        opacity:.55;
    }

    100%{
        left:calc(100% - 90px);
        opacity:0;
    }

}


/* =========================================================
   INDIVIDUAL STEP
   ========================================================= */

.info-how-step{
    position:relative;

    z-index:1;

    text-align:center;

    padding:
        0
        10px;

    transition:
        transform .28s ease;
}


.info-how-step:hover{
    transform:translateY(-5px);
}


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

.info-how-node{
    width:68px;
    height:68px;

    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 24px rgba(29,41,82,.12);

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


.info-how-node span{
    font-family:"Lora", serif;

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

    color:#F0DEAE;
}


.info-how-step:hover .info-how-node{
    transform:scale(1.07);

    background:#24345F;

    box-shadow:
        0 0 0 7px #FFFFFF,
        0 0 16px rgba(212,160,23,.22),
        0 10px 28px rgba(29,41,82,.14);
}


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

.info-how-step h3{
    margin:
        0
        0
        14px;

    font-family:"Lora", serif;

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

    color:#1D2952;
}


.info-how-step p{
    max-width:260px;

    margin:0 auto;

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

    font-size:16px;

    line-height:1.6;

    color:#4A4A50;
}


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

@media (max-width:900px){

    .info-how-process{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            52px
            34px;
    }

    .info-how-line{
        display:none;
    }

}


@media (max-width:560px){

    .info-how-we-work{
        padding:
            65px
            20px
            75px;
    }

    .info-how-heading{
        margin-bottom:50px;
    }

    .info-how-process{
        grid-template-columns:1fr;

        gap:44px;
    }

}

/* =========================================================
   INFORMATION OPERATIONS — GOLD SECTION DIVIDER
   ========================================================= */

.info-section-divider{
    position:relative;

    width:100%;
    height:1px;

    background:#FFFFFF;

    overflow:visible;
}


/* Main soft gold line */
.info-section-divider::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:min(760px, 70%);
    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,160,23,.08) 12%,
        rgba(212,160,23,.32) 32%,
        rgba(224,199,127,.68) 50%,
        rgba(212,160,23,.32) 68%,
        rgba(212,160,23,.08) 88%,
        transparent 100%
    );

    animation:
        infoDividerPulse
        4s
        ease-in-out
        infinite;
}


/* Very soft glow underneath */
.info-section-divider::after{
    content:"";

    position:absolute;

    top:-3px;
    left:50%;

    width:min(500px, 48%);
    height:7px;

    transform:translateX(-50%);

    background:radial-gradient(
        ellipse at center,
        rgba(212,160,23,.16) 0%,
        rgba(212,160,23,.06) 45%,
        transparent 75%
    );

    filter:blur(3px);

    animation:
        infoDividerGlow
        4s
        ease-in-out
        infinite;
}


/* Tiny traveling highlight */
.info-section-divider span{
    position:absolute;

    z-index:2;

    top:-1px;
    left:calc(50% - 300px);

    width:65px;
    height:3px;

    opacity:0;

    border-radius:100%;

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

    filter:blur(.5px);

    animation:
        infoDividerTravel
        6s
        ease-in-out
        infinite;
}


@keyframes infoDividerPulse{

    0%,100%{
        opacity:.42;
    }

    50%{
        opacity:.9;
    }

}


@keyframes infoDividerGlow{

    0%,100%{
        opacity:.25;
        transform:translateX(-50%) scaleX(.92);
    }

    50%{
        opacity:.75;
        transform:translateX(-50%) scaleX(1.08);
    }

}


@keyframes infoDividerTravel{

    0%{
        left:calc(50% - 300px);
        opacity:0;
    }

    15%{
        opacity:.75;
    }

    50%{
        opacity:1;
    }

    85%{
        opacity:.75;
    }

    100%{
        left:calc(50% + 235px);
        opacity:0;
    }

}

/* =========================================================
   INFORMATION OPERATIONS — SERVICE EXPLORER
   ========================================================= */

.info-service-explorer{
    background:#FFFFFF;

    padding:
        72px
        32px
        100px;
}


.info-service-inner{
    width:min(1240px, 100%);

    margin:0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.info-service-intro{
    max-width:900px;

    margin:
        0
        auto
        54px;

    text-align:center;
}


.info-service-eyebrow{
    display:block;

    margin-bottom:11px;

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

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

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#D4A017;
}


.info-service-intro h2{
    margin:0;

    font-family:"Lora", serif;

    font-size:clamp(34px, 4vw, 48px);

    font-weight:600;

    line-height:1.15;

    color:#1D2952;
}


.info-service-rule{
    width:120px;
    height:3px;

    margin:
        20px
        auto
        22px;

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


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

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

    font-size:17px;

    line-height:1.7;

    color:#4A4A50;
}


/* =========================================================
   TWO-COLUMN EXPLORER
   ========================================================= */

.info-service-layout{
    display:grid;

    grid-template-columns:
        minmax(280px, .78fr)
        minmax(0, 1.65fr);

    gap:34px;

    align-items:stretch;
}


/* =========================================================
   LEFT NAV
   ========================================================= */

.info-service-nav{
    display:flex;

    flex-direction:column;

    background:#1D2952;

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

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


.info-service-tab{
    position:relative;

    display:grid;

    grid-template-columns:
        38px
        1fr
        20px;

    align-items:center;

    gap:13px;

    width:100%;

    min-height:72px;

    padding:
        0
        20px;

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

    background:transparent;

    color:#F4F1E8;

    text-align:left;

    cursor:pointer;

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


.info-service-tab:last-child{
    border-bottom:0;
}


.info-service-tab-number{
    font-family:"Lora", serif;

    font-size:16px;

    color:#D4A017;
}


.info-service-tab-title{
    font-family:"Assistant", sans-serif;

    font-size:16px;
    font-weight:600;
}


.info-service-tab-arrow{
    font-family:"Assistant", sans-serif;

    font-size:24px;

    line-height:1;

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

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


/* ACTIVE + HOVER */

.info-service-tab:hover{
    background:
        rgba(52,63,104,.58);

    padding-left:24px;
}


.info-service-tab:hover .info-service-tab-arrow{
    color:#E0C77F;

    transform:translateX(3px);
}


.info-service-tab.is-active{
    background:linear-gradient(
        90deg,
        rgba(212,160,23,.16),
        rgba(52,63,104,.58)
    );

    color:#FFFFFF;
}


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

    position:absolute;

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

    width:4px;

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


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

    transform:translateX(3px);
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.info-service-panels{
    position:relative;

    min-height:510px;
}


.info-service-panel{
    display:none;

    min-height:100%;

    padding:
        46px
        48px;

    background:#F4F1E8;

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

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


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

    animation:
        infoServicePanelIn
        .38s
        ease
        both;
}


@keyframes infoServicePanelIn{

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

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

}


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

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

    margin-bottom:10px;

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

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

    letter-spacing:.18em;

    color:#D4A017;
}


.info-service-panel h3{
    margin:0;

    font-family:"Lora", serif;

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

    font-weight:600;

    color:#1D2952;
}


.info-service-panel-rule{
    width:100%;
    height:1px;

    margin:
        20px
        0
        24px;

    background:linear-gradient(
        90deg,
        rgba(212,160,23,.72),
        rgba(224,199,127,.28),
        transparent
    );
}


.info-service-panel > p{
    max-width:720px;

    margin:
        0
        0
        32px;

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

    font-size:17px;

    line-height:1.7;

    color:#424248;
}


/* =========================================================
   OUTCOMES
   ========================================================= */

.info-service-outcomes{
    display:grid;

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

    gap:16px;
}


.info-service-outcomes > div{
    min-height:165px;

    padding:
        23px
        21px;

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

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


.info-service-outcomes span{
    display:block;

    margin-bottom:13px;

    font-family:"Lora", serif;

    font-size:18px;

    color:#D4A017;
}


.info-service-outcomes p{
    margin:0;

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

    font-size:15px;

    line-height:1.55;

    color:#414147;
}


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

@media (max-width:900px){

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

    .info-service-nav{
        display:grid;

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

    .info-service-tab:nth-child(odd){
        border-right:
            1px solid
            rgba(244,241,232,.10);
    }

    .info-service-panels{
        min-height:0;
    }

}


@media (max-width:650px){

    .info-service-explorer{
        padding:
            62px
            20px
            75px;
    }

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

    .info-service-tab:nth-child(odd){
        border-right:0;
    }

    .info-service-panel{
        padding:
            34px
            26px;
    }

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

    .info-service-outcomes > div{
        min-height:0;
    }

}

/* =========================================================
   INFORMATION OPERATIONS — RELATED SERVICES
   ========================================================= */

.info-related-services{
    background:#FFFFFF;

    padding:
        78px
        32px
        92px;
}


.info-related-inner{
    width:min(1100px, 100%);

    margin:0 auto;
}


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

.info-related-heading{
    text-align:center;

    margin-bottom:48px;
}


.info-related-heading h2{
    margin:0;

    font-family:"Lora", serif;

    font-size:clamp(34px, 4vw, 46px);

    font-weight:600;

    color:#1D2952;
}


.info-related-rule{
    width:110px;
    height:3px;

    margin:
        20px
        auto
        0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #E0C77F 22%,
            #D4A017 50%,
            #8A650F 78%,
            transparent 100%
        );
}


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

.info-related-grid{
    display:grid;

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

    gap:24px;
}


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

.info-related-card{
    position:relative;

    overflow:hidden;

    display:block;

    min-height:220px;

    padding:
        30px
        30px
        28px;

    background:#F4F1E8;

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

    text-decoration:none;

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

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


/* Gold top accent */
.info-related-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

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


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

.info-related-kicker{
    display:block;

    margin-bottom:13px;

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

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

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#8A650F;
}


.info-related-card h3{
    margin:
        0
        0
        14px;

    font-family:"Lora", serif;

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

    color:#1D2952;
}


.info-related-card p{
    margin:
        0
        0
        26px;

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

    font-size:16px;

    line-height:1.6;

    color:#4A4A50;
}


.info-related-link{
    display:inline-flex;

    align-items:center;

    gap:6px;

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

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

    color:#1D2952;

    transition:
        color .22s ease,
        gap .22s ease;
}


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

.info-related-card:hover{
    transform:translateY(-5px);

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

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


.info-related-card:hover .info-related-link{
    color:#D4A017;

    gap:10px;
}


/* subtle gleam across top accent */
.info-related-card::after{
    content:"";

    position:absolute;

    top:0;
    left:-35%;

    width:28%;
    height:4px;

    opacity:0;

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

    pointer-events:none;
}


.info-related-card:hover::after{
    opacity:1;

    animation:
        infoRelatedGleam
        .72s
        ease-out
        1;
}


@keyframes infoRelatedGleam{

    from{
        left:-35%;
    }

    to{
        left:115%;
    }

}


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

@media (max-width:760px){

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

}


@media (max-width:520px){

    .info-related-services{
        padding:
            62px
            20px
            72px;
    }

    .info-related-card{
        padding:
            28px
            24px
            26px;
    }

}

/* =========================================================
   INFO OPS SERVICE NAV — EVENLY FILL FULL HEIGHT
   ========================================================= */

.info-service-nav{
    display:flex !important;
    flex-direction:column !important;

    height:100% !important;
}


.info-service-tab{
    flex:1 1 0 !important;

    min-height:0 !important;

    display:grid !important;
    align-items:center !important;
}

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




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







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




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




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










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




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




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




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




/* PRIMARY */



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










/* SECONDARY */







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






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











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




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




/* LEFT:
   document → handshake → disappear into center
*/



/* RIGHT:
   emerge → admin → renewal → analytics
*/



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




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




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




/* Match these to the painted icons */











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















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







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
















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




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




/* faint contract-register hover */



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




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







/* subtle gold accent appears on hover */






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






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







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










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




/* main line */



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



















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










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






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








/* 01 */


/* 02 */


/* 03 */


/* 04 */













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












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






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












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






/* subtle navy variation */








/* NUMBER */




/* TITLE */




/* ARROW */






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








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











/* giant decorative number */

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




/* 01 — CONTRACT LIFECYCLE MANAGEMENT */



/* 02 — CONTRACT DRAFTING SUPPORT */



/* 03 — CONTRACT REVIEW & ANALYSIS */



/* 04 — CONTRACT ADMINISTRATION */



/* 05 — COMMERCIAL OPERATIONS SUPPORT */



/* 06 — CONTRACT ANALYTICS */



/* small number */




/* panel title */




/* description */




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












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




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








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







/* subtle shine layer */



/* arrow */



/* number */



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








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





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






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


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




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




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




/* Individual tab */




/* Hover */




/* Active tab */




/* Gold active indicator */




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







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




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










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




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




/* Gold vertical accent */




/* Hover */




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




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




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










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




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




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













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



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




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




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




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







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







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




/* diamond reacts ONCE when gleams arrive */






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




/* animated gradient layer */



/* LEFT LINE:
   gleam travels from far left → diamond
*/



/* RIGHT LINE:
   gleam travels from far right → diamond
*/












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






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












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




/* center divider */




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










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








/* Gold/navy check */




/* subtle interaction */




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





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




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






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




/* Hover becomes brighter rather than navy */




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




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



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





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



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



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





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



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





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




/* gleam layer */



/* hover */



/* one clean pass */





/* =========================================================
   DIGITAL TRANSFORMATION READINESS — HERO UPGRADE
   ========================================================= */




/* EYEBROW */




/* MAIN HEADLINE */




/* SUPPORTING COPY */




/* BUTTON ROW */




/* =========================================================
   GOLD HERO BUTTON
   Same visual family as sibling Business Operations pages
   ========================================================= */







/* =========================================================
   OUTLINE BUTTON
   ========================================================= */







/* =========================================================
   SMOOTH ANCHOR MOVEMENT
   ========================================================= */




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



/* =========================================================
   DIGITAL HERO — MATCH GOLD BUTTON ANIMATION
   ========================================================= */




/* moving shine */




/* hover */




/* shine sweeps across ON hover */



/* =========================================================
   DIGITAL HERO — CCG BRAND COLOR WASH
   MATCH INFO OPS + CONTRACTS
   ========================================================= */




/* Full branded overlay over the EXISTING hero artwork */



/* Keep all hero copy/buttons above the color wash */
/* =========================================================
   DIGITAL HERO — CCG BRAND COLOR WASH
   MATCH INFO OPS + CONTRACTS
   ========================================================= */




/* Full branded overlay over the EXISTING hero artwork */



/* Keep all hero copy/buttons above the color wash */


/* =========================================================
   DIGITAL HERO — SOFT EDGE VIGNETTE
   ========================================================= */



/* =========================================================
   DIGITAL HERO — NEW BACKGROUND ARTWORK
   ========================================================= */




/* IMAGE LAYER */






/* =========================================================
   CCG COLOR / LEGIBILITY OVERLAY
   ========================================================= */




/* HERO CONTENT ABOVE IMAGE */



/* ==========================================
   DIGITAL TRANSFORMATION HERO — IMAGE TUNING
   ========================================== */







/* =========================================================
   DIGITAL HERO — ACTUAL IMAGE ZOOM OUT
   ========================================================= */





/* =========================================================
   DIGITAL HERO — SHOW MORE OF BACKGROUND ARTWORK
   ========================================================= */



/* =========================================================
   DIGITAL HERO — SVG ROAD STREAMS
   ========================================================= */




/* SVG fills hero exactly */



/* =========================================================
   BASE PATH
   Invisible except for animated dash
   ========================================================= */




/* =========================================================
   THREE STREAM VARIATIONS
   ========================================================= */










/* =========================================================
   STREAM MOTION
   ========================================================= */



























/* =========================================================
   DIGITAL HERO — HALF-SCREEN / NARROW DESKTOP FIX
   DOES NOT AFFECT FULL SCREEN
   ========================================================= */





/* =========================================================
   DIGITAL TRANSFORMATION READINESS — READINESS CHECK
   ========================================================= */







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



















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




/* =========================================================
   DIAGNOSTIC ITEM
   ========================================================= */




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




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




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







/* =========================================================
   CLOSING STATEMENT
   ========================================================= */










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






/* =========================================================
   DIGITAL READINESS — LUXURY GOLD GLEAM
   ========================================================= */






/* =========================================================
   DIGITAL CAPABILITIES — SECTION
   ========================================================= */







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
















/* =========================================================
   SELECTOR NAV
   ========================================================= */

























/* =========================================================
   READINESS PANEL
   ========================================================= */










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
















/* =========================================================
   CURRENT → PREPARATION → READY
   ========================================================= */

























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






/* =========================================================
   DIGITAL TRANSFORMATION — READINESS METHOD
   ========================================================= */




/* very soft blue atmosphere */






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
















/* =========================================================
   PATHWAY
   ========================================================= */




/* =========================================================
   MUTED BASE TRACK
   ========================================================= */




/* =========================================================
   GOLD PROGRESS TRACK
   ========================================================= */




/* glowing leading edge */



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




/* =========================================================
   MARKERS
   ========================================================= */







/* =========================================================
   STAGE LABEL
   ========================================================= */







/* =========================================================
   ACTIVE STAGE
   ========================================================= */










/* =========================================================
   ANIMATION
   ========================================================= */













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






/* =========================================================
   BUSINESS OPERATIONS FAMILY — HERO BREADCRUMB
   ========================================================= */










/* subtle polished hover */



/* animated gold line enters underneath */








/* =========================================================
   DIGITAL HERO — BREADCRUMB CLEAN OVERRIDE
   ========================================================= */




/* REMOVE THE LINE UNDERNEATH COMPLETELY */




/* DIVIDERS */




/* =========================================================
   GOLD TEXT + MOVING GLEAM
   ========================================================= */




/* =========================================================
   CLEAN SWEEP ACROSS THE WORDS
   ========================================================= */




/* KEEP HOVER QUIET */



/* =========================================================
   DIGITAL READINESS — RELATED SERVICES
   ========================================================= */



/* =========================================================
   CONTACT US PAGE — HERO
   ========================================================= */




/* subtle edge fade / depth */







/* =========================================================
   INNER CONTENT
   ========================================================= */




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






/* reuse sitewide hover gleam */



/* =========================================================
   EYEBROW
   ========================================================= */




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




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




/* =========================================================
   SMALL GOLD ACCENT UNDER HERO COPY
   ========================================================= */




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




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



/* =========================================================
   CONTACT HERO — LIVE CONVERGING PATH ANIMATION
   ========================================================= */




/* =========================================================
   CURVED PATHS
   ========================================================= */




/* LEFT SIDE */








/* RIGHT SIDE */








/* =========================================================
   CURVE MOVEMENT
   ========================================================= */




/* =========================================================
   SMALL GOLD NODES
   ========================================================= */




/* LEFT NODES */






/* RIGHT NODES */






/* =========================================================
   NODE PULSE
   ========================================================= */




/* =========================================================
   VERY SOFT CENTER FADE
   Keeps animation away from headline
   ========================================================= */




/* =========================================================
   KEEP HERO COPY ABOVE MOTION
   ========================================================= */




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





/* =========================================================
   CONTACT HERO — LIVE NETWORK OVERLAY
   ========================================================= */




/* =========================================================
   MOVING GOLD TRACES
   ========================================================= */




/* LEFT SIDE */
























/* =========================================================
   LEFT TRACE MOVEMENT
   ========================================================= */










/* =========================================================
   RIGHT TRACE MOVEMENT
   ========================================================= */










/* =========================================================
   PULSING GOLD NODES
   ========================================================= */
















/* =========================================================
   KEEP COPY ABOVE NETWORK
   ========================================================= */













/* LEFT-SIDE NODE PULSES */










/* RIGHT-SIDE NODE PULSES */









/* =========================================================
   CONTACT — START THE CONVERSATION
   ========================================================= */




/* two-column composition */




/* =========================================================
   LEFT
   ========================================================= */



















/* =========================================================
   RIGHT PANEL
   ========================================================= */




/* giant ghost number */
















/* tiny ambient gold glow */




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



/* =========================================================
   CONTACT FORM SECTION — FINAL TWO-COLUMN LAYOUT
   ========================================================= */







/* =========================================================
   LEFT SIDE
   ========================================================= */

/* =========================================================
   LEFT SIDE
   ========================================================= */




/* LOGO */







/* DIRECT CONTACT CARD */






















/* =========================================================
   RIGHT SIDE — FORM CARD
   ========================================================= */




/* FORM INTRO */
















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






/* =========================================================
   FLUENT FORMS — CCG CONTACT PAGE STYLING
   ========================================================= */

/* whole form */



/* FIELD SPACING */



/* LABELS */



/* required asterisk */



/* =========================================================
   TEXT INPUTS / EMAIL / TEXTAREA
   ========================================================= */




/* placeholder */



/* FOCUS STATE */



/* TEXTAREAS */



/* =========================================================
   RADIO + CHECKBOX OPTIONS
   ========================================================= */




/* option text */



/* radio + checkbox base */



/* radio shape */



/* checkbox shape */



/* selected radio */



/* selected checkbox */



/* checkbox check mark */



/* hover */



/* =========================================================
   FIELD GROUPS WITH RADIO / CHECKBOX LISTS
   ========================================================= */




/* add a little breathing room after question label */



/* =========================================================
   CCG CONSULTATION SUBMIT BUTTON
   ========================================================= */




/* OUR OWN TEXT LAYER */


/* =========================================================
   FLUENT FORMS — SUBMIT LOADING STATE
   ========================================================= */





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




/* ACTUAL MOVING GLEAM ACROSS THE WORDS */



/* MOVES THE BRIGHT BAND ACROSS THE LETTERS */



/* =========================================================
   VALIDATION ERRORS
   ========================================================= */




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



/* =========================================================
   CONTACT — WHAT HAPPENS NEXT
   ========================================================= */







/* heading */













/* =========================================================
   PROCESS PATH
   ========================================================= */




/* connecting line */




/* cards */




/* number circles */









/* Step number hover pop */





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



/* =========================================================
   FLUENT FORMS — SUCCESS MESSAGE
   ========================================================= */




/* small success accent */



/* any paragraphs Fluent Forms inserts */


/* =========================================================
   RADIO / CHECKBOX — IMMEDIATE SELECTED STATE
   ========================================================= */







/* make state changes repaint immediately */


/* =========================================================
   ABOUT PAGE — HERO
   ========================================================= */




/* HERO */




/* =========================================================
   HERO INNER
   ========================================================= */




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
















/* CTA */









/* =========================================================
   ABOUT HERO — BACKGROUND ART
   ========================================================= */









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
















/* =========================================================
   ABOUT — WHAT WE BELIEVE
   ========================================================= */




/* Subtle architectural line */







/* -----------------------------------------
   LEFT SIDE
   ----------------------------------------- */










/* Small gold architectural detail */




/* -----------------------------------------
   RIGHT SIDE
   ----------------------------------------- */













/* The emotional pivot */




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






/* ==========================================
   ABOUT — BELIEF CALLOUT EMPHASIS
   ========================================== */





/* ==========================================
   ABOUT — BELIEF COMPASS ART
   ========================================== */






/* ORBIT RINGS */










/* CENTRAL COMPASS */










/* DIAGONAL POINTS */












/* CENTER */




/* ORBITING GOLD POINTS */










/* SUBTLE ROTATION */




/* ACCESSIBILITY */





/* =========================================================
   ABOUT — HOW WE WORK
   ========================================================= */







/* HEADING */
















/* PATH */







/* STEP */




/* GOLD PROCESS NODES */




/* subtle metallic sheen */




/* NAVY NUMBERS */




/* HOVER */







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






/* =========================================================
   ABOUT US — HOW WE WORK
   FINAL TEXT COLOR OVERRIDE
   ========================================================= */




/* SECTION INTRO */










/* STEP HEADINGS */




/* STEP BODY COPY */




/* GOLD NODES */




/* NAVY NUMBERS */




/* CONNECTING LINE */



/* =========================================================
   ABOUT US — BRAND SIGNATURE
   ========================================================= */




/* faint top/bottom transition lines */











/* EACH STATEMENT */




/* middle line gets gold italic emphasis */




/* subtle hover lift */







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



/* =========================================================
   ABOUT SIGNATURE — IDLE BACKGROUND MOTION
   ========================================================= */








/* LARGE NAVIGATION RINGS */










/* DRIFT */




/* LITTLE GOLD NODES */











/* VERY SOFT BREATHING LIGHT */







/* ACCESSIBILITY */



/* =========================================================
   ABOUT SIGNATURE — BRIGHTER GOLD + BLUE MOTION
   ========================================================= */




/* =========================================================
   NAVIGATION RINGS
   ========================================================= */




/* GOLD OUTER RING */




/* BLUE RING */




/* GOLD + BLUE INNER RING */







/* =========================================================
   FLOATING NODES
   ========================================================= */




/* GOLD NODE */




/* BLUE NODE */







/* =========================================================
   CENTRAL GOLD + BLUE BREATHING GLOW
   ========================================================= */







/* =========================================================
   REDUCED MOTION
   ========================================================= */



/* =========================================================
   ABOUT US — OUR FOUNDER
   ========================================================= */









/* =========================================================
   LEFT — FOUNDER SEAL
   ========================================================= */













/* LinkedIn hover label */







/* =========================================================
   RIGHT — COPY
   ========================================================= */
















/* Final principle callout */







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






/* =========================================================
   FOUNDER SIGNATURE STAMP
   ========================================================= */







/* hover */




/* LinkedIn micro-label */








/* =========================================================
   FOUNDER EMBOSSED SIGNATURE STAMP
   ========================================================= */





/* =========================================================
   HOVER — DEEPEN THE EMBOSS
   ========================================================= */







/* =========================================================
   LINKEDIN LABEL
   ========================================================= */








/* =========================================================
   FOUNDER EMBOSSED STAMP — CENTERED ABOVE NAME
   ========================================================= */
























/* =========================================================
   FOUNDER SECTION — STOP ALL IDLE MOTION
   ========================================================= */





/* ==========================================
   FOUNDER STAMP — FINAL OVERRIDE
   ========================================== */







/* Kill any image hover animation too */








/* ==========================================
   FOUNDER SECTION — FINAL POSITION / HEIGHT
   ========================================== */





/* ==========================================
   FOUNDER STAMP — COMPLETELY STATIC
   ========================================== */






/* KEEP OUR FINAL POSITIONING */







/* ==========================================
   FOUNDER CLOSING STATEMENT
   ========================================== */




/* SMALL GOLD LABEL */




/* MAIN CLOSING THOUGHT */




/* EACH THOUGHT GETS ITS OWN LINE */




/* GOLD EMPHASIS ON THE FINAL LINE */







/* First two statements */


/* Final founder principle */


/* =========================================================
   PUBLIC SECTOR SERVICES
   HERO
========================================================= */




/* HERO */




/* INNER WIDTH */




/* COPY AREA */



/* BREADCRUMB */





/* HOME BREADCRUMB — GOLD TEXT SWEEP */




/* sweep ONLY when hovered */






/* EYEBROW */




/* HEADING */




/* BODY COPY */




/* BUTTON ROW */




/* BOTH BUTTONS */




/* PRIMARY */






/* SECONDARY */






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






/* =========================================================
   PUBLIC SECTOR HERO — COLOR GRADE + EDGE FADE
========================================================= */




/* Soft edge vignette around ALL sides */




/* keep actual hero content above overlays */











/* =========================================================
   PUBLIC SECTOR HERO — SUBTLE BACKGROUND DRIFT
   ========================================================= */






/* Accessibility */


/* =========================================================
   PUBLIC SECTOR
   WHAT EFFECTIVE GOVERNMENT OPERATIONS REQUIRE
   ========================================================= */




/* =========================================================
   INNER CONTAINER
   ========================================================= */




/* =========================================================
   INTRO
   ========================================================= */













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




/* =========================================================
   EACH REQUIREMENT ROW
   ========================================================= */




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




/* =========================================================
   VERTICAL GOLD DIVIDER
   ========================================================= */




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










/* =========================================================
   VERY FAINT "DOCUMENT / BLUEPRINT" DETAIL
   ========================================================= */




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













/* =========================================================
   LITTLE TOP ARCHITECTURAL ACCENT
   Gives the section a Public Sector identity
   ========================================================= */




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




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



/* =========================================================
   PUBLIC SECTOR — BUSINESS OPERATIONS FOR GOVERNMENT
========================================================= */




/* subtle background structure */







/* =========================================================
   INTRO
========================================================= */










/* GOLD TEXT — BASE STATE */




/* Run the shine when JS adds this class */










/* =========================================================
   CAPABILITY STACK
========================================================= */




/* =========================================================
   EACH FEATURE BLOCK
========================================================= */




/* alternate direction */






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







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










/* small signature line */




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







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













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







/* =========================================================
   HOVER — VERY SUBTLE
========================================================= */




/* =========================================================
   THIN GOLD THREAD THROUGH SECTION
========================================================= */







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




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



/* =========================================================
   PUBLIC SECTOR — WHO WE SUPPORT
   DISTINCT 2x2 ECOSYSTEM MATRIX
========================================================= */




/* INNER */




/* =========================================================
   TOP INTRO — FULL WIDTH
========================================================= */
















/* =========================================================
   2x2 MATRIX
========================================================= */




/* CENTER VERTICAL DIVIDER */




/* CENTRAL COMPASS POINT */




/* =========================================================
   EACH QUADRANT
========================================================= */




/* horizontal divider between rows */




/* =========================================================
   NUMBERS
========================================================= */




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







/* =========================================================
   ARROW
========================================================= */




/* =========================================================
   SUBTLE INTERNAL ACCENT
========================================================= */




/* very faint document-line texture */




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
















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




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






/* 01 — top left */



/* 02 — top right */



/* 03 — bottom left */



/* 04 — bottom right */


/* =========================================================
   PUBLIC SECTOR SUPPORT MATRIX — TRUE CENTER CROSS
========================================================= */

/* Remove the old per-card horizontal borders */



/* Create ONE true horizontal center divider */


/* CENTER HORIZONTAL DIVIDER — does not consume a pseudo-element */


/* =========================================================
   WHO WE SUPPORT — FINAL CENTER ALIGNMENT
========================================================= */

/* Make the upper + lower halves exactly equal */



/* Put the hover accent directly on the quadrant edge */



/* Move TOP arrows slightly closer to the center line */

/* 01 */



/* 02 */


/* =========================================================
   PUBLIC SECTOR — DESIGNED TO WORK WITHIN YOUR ENVIRONMENT
========================================================= */




/* INNER */




/* =========================================================
   INTRO
========================================================= */













/* =========================================================
   FOUR PRINCIPLES
========================================================= */




/* EACH PRINCIPLE */







/* NUMBER */




/* HEADING */




/* BODY */




/* =========================================================
   GOLD TOP ACCENT
========================================================= */




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







/* =========================================================
   SUBTLE BACKGROUND LINEWORK
========================================================= */







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













/* CTA BUTTON */







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




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



/* =========================================================
   PUBLIC SECTOR FINAL CTA — GOLD HOVER GLEAM
========================================================= */




/* actual gleam strip */



/* keep text + arrow above shine */



/* hover */





/* =========================================================
   PUBLIC SECTOR HERO PRIMARY BUTTON — GOLD HOVER GLEAM
========================================================= */













/* =========================================================
   HOME PAGE HERO
========================================================= */




/* =========================================================
   SLIDE STACK
========================================================= */










/* =========================================================
   OVERLAY / COLOR GRADE
========================================================= */




/* subtle vignette */




/* =========================================================
   HERO INNER
========================================================= */




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
















/* =========================================================
   HERO BUTTONS
========================================================= */







/* PRIMARY */







/* GOLD GLEAM */













/* SECONDARY */







/* =========================================================
   FIVE-SLIDE NAVIGATION
========================================================= */







/* =========================================================
   NAV ITEM
========================================================= */













/* NUMBER */




/* LABEL */




/* =========================================================
   PROGRESS LINE
========================================================= */







/* the JS will restart this each time a slide becomes active */







/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */




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




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




/* =========================================================
   REDUCED MOTION
========================================================= */



/* =========================================================
   HOME HERO — SIZE REFINEMENT
========================================================= */






/* smaller overall copy block */




/* smaller heading */




/* slightly smaller eyebrow */




/* slightly smaller paragraph */




/* slightly tighter buttons */




/* =========================================================
   BACK THE ARTWORK UP A LITTLE
========================================================= */





/* =========================================================
   HOME — IDENTITY STATEMENT
========================================================= */




/* INNER LAYOUT */




/* =========================================================
   LEFT SIDE
========================================================= */













/* =========================================================
   RIGHT SIDE COPY
========================================================= */
















/* =========================================================
   GOLD RULE
========================================================= */




/* reveal the rule when section is in view */



/* =========================================================
   SUBTLE STRUCTURAL DETAIL
========================================================= */




/* =========================================================
   TOP / BOTTOM HAIRLINES
========================================================= */




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




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



/* =========================================================
   HOME IDENTITY — COMPASS AXIS REFINEMENT
========================================================= */




/* slightly tighter overall composition */




/* =========================================================
   LEFT
========================================================= */







/* make first line quieter */




/* make italic line the star */




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










/* =========================================================
   CENTRAL AXIS
========================================================= */

/* vertical line */



/* center diamond */



/* horizontal coordinate line extending right */



/* =========================================================
   GHOSTED COMPASS GEOMETRY
========================================================= */




/* small compass cross inside ghost ring */



/* =========================================================
   GOLD RULE
========================================================= */







/* =========================================================
   BOTTOM HAIRLINE
========================================================= */




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






/* =========================================================
   HOME — WHERE DO YOU NEED HELP?
   THREE-DISCIPLINE NAVIGATOR
========================================================= */




/* =========================================================
   INNER
========================================================= */




/* =========================================================
   INTRO
========================================================= */
















/* =========================================================
   CONNECTED DISCIPLINE SYSTEM
========================================================= */




/* long shared line running through all three */




/* =========================================================
   EACH DISCIPLINE
========================================================= */







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




/* little gold node on the shared line */




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







/* italic promise */




/* supporting detail */




/* =========================================================
   EXPLORE LINK
========================================================= */








/* =========================================================
   GOLD HOVER TRACK
========================================================= */




/* =========================================================
   VERY SUBTLE HOVER GLOW
========================================================= */




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

























/* =========================================================
   SUBTLE BACKGROUND ARCHITECTURE
========================================================= */







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




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



/* =========================================================
   HOME — COMMERCIAL + PUBLIC SECTOR
   SPLIT ENVIRONMENT SECTION
========================================================= */




/* =========================================================
   MAIN SPLIT
========================================================= */




/* =========================================================
   EACH SIDE
========================================================= */




/* =========================================================
   COMMERCIAL SIDE
========================================================= */




/* subtle architecture */




/* =========================================================
   PUBLIC SIDE
========================================================= */




/* faint institutional linework */




/* =========================================================
   NUMBERS
========================================================= */




/* =========================================================
   EYEBROW
========================================================= */




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







/* =========================================================
   LEAD
========================================================= */




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




/* =========================================================
   LINKS
========================================================= */













/* =========================================================
   CENTER AXIS
========================================================= */




/* vertical line */




/* center diamond housing */




/* inner gold diamond */




/* =========================================================
   CENTER HORIZONTAL CONNECTORS
========================================================= */










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










/* =========================================================
   CONNECTING PRINCIPLE
========================================================= */













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




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



/* =========================================================
   HOME ENVIRONMENTS — PREVENT ITALIC HEADING CLIPPING
========================================================= */





/* =========================================================
   HOME DISCIPLINES — ALIGN BOTTOM LINKS
========================================================= */





/* =========================================================
   HOME DISCIPLINES — FINAL VERTICAL ALIGNMENT FIX
   Keeps all 3 Explore links on the same baseline
========================================================= */

/* Each entire column becomes a flex column */



/* Copy area fills all remaining vertical space */



/* Keep all titles in the same title zone */



/* Keep all gold promises in the same zone */



/* Keep description area consistent */



/* Push Explore link to bottom of every column */


/* =========================================================
   HOME DISCIPLINES — OPTICAL TITLE ALIGNMENT
========================================================= */

/* Information Operations is only one line,
   so lift ONLY the visible heading without
   disturbing anything underneath it. */



/* =========================================================
   HOME ENVIRONMENTS — FINAL COLUMN ALIGNMENT
========================================================= */




/* Lock both sides to the same starting point */



/* Same space reserved for the main heading on both sides */



/* Same space reserved for the lead paragraph */



/* Same space reserved for supporting copy */



/* Keep the links aligned at the bottom of the content system */










/* =========================================================
   HOME PHILOSOPHY — MOVING GOLD TEXT GLEAM
========================================================= */



@keyframes homeGoldFlow{
    from{
        transform:translate3d(-1.5px,0,0);
    }

    to{
        transform:translate3d(1.5px,0,0);
    }
}

/* =========================================================
   HOME — THE COMPASS
========================================================= */






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
















/* =========================================================
   CAROUSEL
========================================================= */




/* =========================================================
   TOP CONTROLS
========================================================= */










/* =========================================================
   ARROWS
========================================================= */














/* =========================================================
   VIEWPORT
========================================================= */




/* =========================================================
   TRACK
========================================================= */




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






/* =========================================================
   ISSUE LINK / LAYOUT
========================================================= */






/* =========================================================
   COVER
========================================================= */




/* large faint compass circle */




/* diagonal gold architectural line */




/* =========================================================
   COVER TOP
========================================================= */






/* =========================================================
   COVER CENTER
========================================================= */










/* =========================================================
   COVER BOTTOM
========================================================= */






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




/* hide full editorial copy on peek cards */




/* =========================================================
   DATE
========================================================= */




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




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




/* =========================================================
   READ EDITION
========================================================= */












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




/* =========================================================
   DIFFERENT EDITION GEOMETRY
========================================================= */





















/* =========================================================
   PAGINATION
========================================================= */














/* =========================================================
   VIEW ALL EDITIONS
========================================================= */












/* =========================================================
   RESPONSIVE — TABLET
========================================================= */




/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */



/* =========================================================
   HOME — THE COMPASS TITLE SEAL
========================================================= */







/* =========================================================
   THE COMPASS — JS MEASUREMENT MODE
   Prevents hidden layout measurements from animating
========================================================= */



/* =========================================================
   THE COMPASS — AUGUST COVER / COMPASS ROSE STYLE
========================================================= */




/* =========================================================
   DOUBLE FRAME
========================================================= */






/* =========================================================
   TOP META
========================================================= */






/* =========================================================
   MASTHEAD
========================================================= */
















/* =========================================================
   FEATURE STORY
========================================================= */








/* =========================================================
   COMPASS ROSE ART
========================================================= */




/* second ring */




/* compass needle / cross */




/* =========================================================
   DATE
========================================================= */





/* =========================================================
   THE COMPASS — AUGUST COVER FINAL EDITORIAL LAYOUT
========================================================= */




/* TOP META */



/* MASTHEAD */



/* ornament above title */



/* THE COMPASS */



/* MONTHLY BRIEFING */



/* =========================================================
   FEATURE AREA
========================================================= */




/* 01 / FEATURE */



/* tiny gold underline */



/* FEATURE HEADLINE */



/* =========================================================
   DATE AT BOTTOM
========================================================= */




/* little ornament above date */






/* =========================================================
   KEEP THE NEW COVER CLEAN
========================================================= */



/* =========================================================
   THE COMPASS — SHARED COVER SYSTEM
   JULY / JUNE / MAY / APRIL
========================================================= */




/* =========================================================
   DOUBLE FRAME
========================================================= */






/* =========================================================
   TOP META
========================================================= */






/* =========================================================
   MASTHEAD
========================================================= */
















/* =========================================================
   FEATURE AREA
========================================================= */










/* =========================================================
   DATE
========================================================= */








/* =========================================================
   JULY — INFORMATION FIELD
========================================================= */






/* =========================================================
   JUNE — INTERSECTION
========================================================= */








/* =========================================================
   MAY — ORBITAL
========================================================= */








/* =========================================================
   APRIL — CONCENTRIC / MINIMAL
========================================================= */








/* =========================================================
   KEEP ALL ART BEHIND THE WRITING
========================================================= */




/* =========================================================
   QUIET OLD GENERIC DECORATION
========================================================= */



/* =========================================================
   THE COMPASS — FOOTER SUBSCRIPTION STATES
========================================================= */

/* invisible spam trap */



/* status message */









/* loading */


/* =========================================================
   THE COMPASS — PNG COVER ARTWORK MASTER OVERRIDE
   Illustrator artwork underneath live WordPress typography
   ========================================================= */


/* =========================================================
   COVER SHELL
   ========================================================= */




/* =========================================================
   PNG ARTWORK LAYER
   ========================================================= */




/* Actual Illustrator PNG */




/* =========================================================
   KILL OLD CSS-GENERATED COVER ART
   ========================================================= */




/* Remove old style-specific decorative backgrounds */




/* Quiet old cover pseudo-art */




/* =========================================================
   GOLD FRAME — ABOVE ARTWORK
   ========================================================= */




/* =========================================================
   ALL LIVE WORDPRESS CONTENT ABOVE PNG
   ========================================================= */




/* Individual live elements */




/* =========================================================
   ENSURE ALL FIVE NEW ARTWORKS USE FULL COVER
   ========================================================= */




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



/* =========================================================
   THE COMPASS — FEATURE TYPOGRAPHY REFINEMENT
   ========================================================= */




/* 01 / FEATURE */




/* Small gold divider beneath FEATURE */




/* FEATURE HEADLINE */




/* Remove old extra divider if one exists below headline */



/* =========================================================
   THE COMPASS — BESPOKE COVER TYPESETTING
   Typography fitted around each Illustrator artwork
   ========================================================= */


/* =========================================================
   SHARED TYPOGRAPHY FOUNDATION
   ========================================================= */







/* tiny gold line under 01 / FEATURE */







/* =========================================================
   01 — AUGUST
   HORIZONTAL ROLLED PARCHMENT
   Text stays ABOVE the scroll as much as possible
   ========================================================= */







/* Give August date its own lower-left home */







/* =========================================================
   02 — JULY
   LARGE UNROLLED PARCHMENT ON RIGHT
   Narrow left editorial column
   ========================================================= */










/* =========================================================
   03 — JUNE
   ARCHIVAL LETTER + FOUNTAIN PEN
   Keep feature title entirely in navy territory
   ========================================================= */










/* =========================================================
   04 — MAY
   SLENDER DIAGONAL ROLLED DOCUMENT
   Tightest left-side column
   ========================================================= */










/* =========================================================
   05 — APRIL
   WORLD MAP + NAVIGATOR'S COMPASS
   Text sits ABOVE map in the open navy field
   ========================================================= */










/* =========================================================
   DATE — CONSISTENT ACROSS ALL FIVE
   ========================================================= */




/* =========================================================
   KEEP MASTHEAD ABOVE EVERYTHING
   ========================================================= */




/* =========================================================
   SMALLER SCREENS
   ========================================================= */



/* =========================================================
   THE COMPASS — TYPOGRAPHY FLOW FIX
   Restore masthead + feature structure
   ========================================================= */

/* Keep cover as the original vertical layout */



/* TOP BRAND */



/* MASTHEAD — restore normal flow */



/* FEATURE — IMPORTANT:
   NO ABSOLUTE POSITIONING */



/* DATE — restore bottom anchoring through flex */



/* =========================================================
   AUGUST
   ========================================================= */






/* =========================================================
   JULY
   ========================================================= */






/* =========================================================
   JUNE
   ========================================================= */






/* =========================================================
   MAY
   ========================================================= */






/* =========================================================
   APRIL
   ========================================================= */





/* =========================================================
   THE COMPASS — FINAL TUNING
   AUGUST + APRIL ONLY
   ========================================================= */

/* AUGUST — lift and tighten */





/* APRIL — move title into clean navy */




/* =========================================================
   THE COMPASS — SMOOTH MOTION
   CSS ONLY / SAFE
   ========================================================= */









/* JS uses this class while calculating positions.
   Those calculations should NEVER animate. */


/* =========================================================
   THE COMPASS — FINAL CAROUSEL MOTION
   Fast width handoff + smooth track glide
   ========================================================= */




/* DEFAULT / OUTGOING CARD */




/* ACTIVE CARD */




/* Hidden measurement pass must never animate */



/* =========================================================
   FIX ITALIC LORA DESCENDER CLIPPING
   ========================================================= */



/* =========================================================
   HOME HERO — ITALIC LINE POSITION FIX
   Give the Lora "f" a little more breathing room
   ========================================================= */



/* =========================================================
   CONTACT PAGE — SOCIAL ICONS
   ========================================================= */








/* Bluesky + LinkedIn use filled paths */



/* Hover */



/* LinkedIn — coming soon */


/* =========================================================
   CCG HEADER — ALLOW HERO LINKS UNDER TRANSPARENT AREA
   ========================================================= */

/* Transparent header shell must not block the page underneath */



/* But the actual logo still needs to be clickable */



/* And the hamburger still needs to be clickable */


/* =========================================================
   HOME HERO — LOWER CONTENT TO CLEAR HEADER LOGO
   ========================================================= */



/* =========================================================
   PUBLIC SECTOR HERO — LOWER CONTENT SLIGHTLY
   ========================================================= */



/* =========================================================
   FULLSCREEN NAV — FIT ALL 7 LINKS
   ========================================================= */







/* =========================================================
   MOBILE FOOTER — FIX LOGO / TEXT OVERLAP
   ========================================================= */



/* =========================================================
   HOME HERO — HALF-SCREEN / MID-WIDTH FIX
   ========================================================= */



/* =========================================================
   HOME HERO — MOBILE FINAL SPACING + NAV FIX
   ========================================================= */



/* =========================================================
   HOME HERO — MOBILE NAV FIT ALL 5 ITEMS
   ========================================================= */



/* =========================================================
   HOME HERO — MOBILE SHOW FULL ARTWORK
   ========================================================= */



/* =========================================================
   ABOUT HERO — MOBILE BALANCED ARTWORK
   ========================================================= */





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



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



/* =========================================================
   DIGITAL HERO — MOBILE ROAD STREAM ALIGNMENT
   ========================================================= */



/* =========================================================
   DIGITAL HERO — MOBILE ROAD STREAM
   Shift right + lean toward road
   ========================================================= */



/* =========================================================
   PUBLIC SECTOR HERO — MOBILE IMAGE POSITION + DRIFT
   ========================================================= */





/* =========================================================
   ABOUT FOUNDER — MOBILE STAMP POSITION
   ========================================================= */





/* =========================================================
   ABOUT FOUNDER — MOBILE MOVE WHOLE SECTION DOWN
   ========================================================= */



/* =========================================================
   ABOUT FOUNDER — MOBILE
   Preserve perfect position + restore bottom space
   ========================================================= */



/* =========================================================
   GLOBAL TRUST CARDS — MOBILE
   Stack Privacy / AI / Human cards vertically
   ========================================================= */



/* =========================================================
   INFORMATION OPERATIONS — MOBILE SERVICE EXPLORER
   Restore full service navigation above active panel
   ========================================================= */

@media (max-width:650px){

    .info-service-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
        width:100% !important;
    }

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

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        overflow:visible !important;

        background:#1D2952 !important;
    }

    .info-service-tab{
        display:grid !important;

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

        width:100% !important;
        min-width:0 !important;
        min-height:64px !important;
        height:auto !important;

        padding:14px 18px !important;

        border-right:0 !important;
        border-bottom:
            1px solid
            rgba(244,241,232,.10) !important;

        color:#F4F1E8 !important;
    }

    .info-service-tab:last-child{
        border-bottom:0 !important;
    }

    .info-service-tab-number{
        font-size:14px !important;
    }

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

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

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

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

        padding:30px 20px !important;
    }

}

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



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



/* =========================================================
   PUBLIC SECTOR — MOBILE
   Restore dividers between stacked support items
   ========================================================= */



/* =========================================================
   HOME IDENTITY — SHOW FULL ITALIC DESCENDERS
   ========================================================= */



/* =========================================================
   HOME — COMMERCIAL HEADING
   Keep "growth." on the same italic line
   ========================================================= */



/* =========================================================
   BUSINESS OPERATIONS — STAT BAND SUBHEADINGS
   ========================================================= */



/* =========================================================
   BUSINESS OPS — FOURTH STAT TITLE
   Give "Startups to Fortune 500 Experience at Scale" more room
   ========================================================= */



/* =========================================================
   BUSINESS OPERATIONS HERO — NEW TITLE
   ========================================================= */










/* MOBILE */


/* =========================================================
   CONTRACT HERO — TITLE TREATMENT
   ========================================================= */





/* =========================================================
   DIGITAL TRANSFORMATION READINESS — HERO TITLE
   ========================================================= */











/* =========================================================
   DIGITAL READINESS — ASSESSMENT FLOW LISTS
   ========================================================= */

/* =========================================================
   INFO OPS — LAPTOP FLOW CONVERGENCE
   Pulls the streams into the opening earlier on laptop widths.
   Desktop/monitor and mobile remain unchanged.
   ========================================================= */

@media (min-width:1201px) and (max-width:1500px){

    .flow-particle-1,
    .flow-particle-5,
    .flow-particle-9{
        offset-path:path("M -60 160 C 180 175, 340 215, 500 255 C 610 282, 690 294, 760 292 C 820 290, 860 255, 900 215 C 980 145, 1120 110, 1260 95 C 1500 75, 1740 78, 1980 78") !important;
    }

    .flow-particle-2,
    .flow-particle-6,
    .flow-particle-10{
        offset-path:path("M -60 255 C 180 265, 350 292, 510 310 C 620 322, 700 325, 770 324 C 825 323, 865 300, 905 275 C 990 225, 1120 195, 1260 180 C 1500 158, 1740 160, 1980 160") !important;
    }

    .flow-particle-3,
    .flow-particle-7,
    .flow-particle-11,
    .flow-particle-13{
        offset-path:path("M -60 365 C 220 365, 400 358, 560 352 C 650 349, 720 347, 780 347 C 830 347, 870 346, 910 344 C 1120 341, 1400 340, 1700 340 C 1810 340, 1900 340, 1980 340") !important;
    }

    .flow-particle-4,
    .flow-particle-8,
    .flow-particle-12{
        offset-path:path("M -60 470 C 180 455, 350 420, 510 390 C 620 368, 700 357, 770 356 C 825 355, 865 375, 905 402 C 990 450, 1120 482, 1260 498 C 1500 520, 1740 520, 1980 520") !important;
    }

    .flow-particle-14,
    .flow-particle-15,
    .flow-particle-16{
        offset-path:path("M -60 555 C 180 525, 340 470, 500 415 C 610 378, 690 360, 760 358 C 815 360, 855 375, 900 402 C 990 460, 1120 515, 1260 545 C 1500 590, 1740 592, 1980 594") !important;
    }

}