/* ==========================================================================
   1. GLOBAL TYPOGRAPHY OVERRIDES
   ========================================================================== */

/* Overrides the primary body font and text color across the entire site */
body {
    font-family: "Inter", sans-serif !important; 
    color: #212529; /* Deep charcoal for readable body text */
    background-color: #f8f9fa; /* Light background layout */
}

/* Overrides headings to give them a distinct font, weight, and color */
h1, h2, h3, h4, h5, h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
    font-family: "Libre Baskerville", serif !important; 
    color: #1a202c; /* Distinct slate black for headers */
    letter-spacing: 0.03em;
}

h2,
body .h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #FFC74E;
}

h3,
body .h3 {
    font-size: 1.5rem;
    font-weight: 400;
    color: #DBBF94;
}

h4,
body .h4 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #DBBF94;    
}

p {
    font-size: 1rem;
    color: #EFE7D2;
}

/* Desktop Configuration: Structural space expansion overrides */
@media (min-width: 768px) {
    h2,
    body .h2 {
        font-size: 3rem !important;
    }

    h3,
    body .h3 {
        font-size: 1.5rem !important;
    }

    h4,
    body .h4 {
        font-size: 1.3rem !important;   
    }

    p {
        font-size: 1.2rem !important;
    }    
}


/* ==========================================================================
   2. CORE BRAND COLOR OVERRIDES
   ========================================================================== */

/* Overrides Bootstrap's primary text color utility class */
body .text-primary {
    color: #ff5a5f !important; /* Your custom primary brand color */
}

/* Overrides Bootstrap's secondary text color utility class */
body .text-secondary {
    color: #4a5568 !important; /* Your custom secondary brand color */
}

/* Overrides Bootstrap's primary background utility class */
body .bg-primary {
    background-color: #0B3542 !important;
}

/* Overrides Bootstrap's secondary background utility class */
body .bg-secondary {
    background-color: #82A5C0 !important;
}


/* ==========================================================================
   3. BUTTON & INTERACTIVE OVERRIDES
   ========================================================================== */

/* Overrides the default Bootstrap Primary Button states */
body .btn {
    transition: all 0.3s ease-in-out;
}

body .btn-primary {
    background-color: #82A5C0;
    color: #0B3542 !important;
    font-weight: 600;
    border-radius: 0.5rem !important; /* FIXED: Closed syntax space gap */
}

/* Overrides the hover, active, and focus states for the Primary Button */
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active {
    background-color: #9CBFDA !important; 
    color: #0B3542 !important;
    text-decoration: none !important;
    box-shadow: none !important; 
}

/* Overrides the default Bootstrap Secondary Button states */
body .btn-secondary {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #ffffff;
}

body .btn-secondary:hover,
body .btn-secondary:focus,
body .btn-secondary:active {
    background-color: #2d3748 !important;
    border-color: #2d3748 !important;
    color: #ffffff !important;
}

body a.btn {
    font-family: "inter-24pt", sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
}


/* ==========================================================================
   4. NAVIGATION & LINK OVERRIDES
   ========================================================================== */

/* Overrides standard inline text hyperlinks */
body a {
    color: #ff5a5f;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

body a:hover {
    color: #EFE7D2
    text-decoration: underline;
}

/* Overrides Bootstrap Navbar links */
body .navbar .nav-link {
    color: #4a5568;
    font-weight: 500;
}

/* Overrides Bootstrap Navbar link hover and active states */
body .navbar .nav-link:hover,
body .navbar .nav-link.active {
    color: #ff5a5f !important;
}

/* Add these rules into your header style blocks inside custom.css */

/* ==========================================================================
   NAVBAR BRAND LOGO CALIBRATION (INLINE ATTRIBUTE OVERRIDE)
   ========================================================================== */

.navbar-brand img,
.navbar-brand a img,
a.navbar-brand img {
    width: auto !important;
    max-width: 160px !important; /* Adjust this number to change your logo size on the navbar */
    height: 50px !important;    /* Locks the logo to a clean, uniform navbar height */
    display: block !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure your right-side PayPal payment portal icon stays proportional */
.paypal-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    margin-right: 12px;
}

.navbar p {
    margin-bottom: 0px !important;
    font-size: 1rem !important;
}



/* ==========================================================================
   GLOBAL UTILITY: RESPONSIVE BACKDROP ENGINE
   ========================================================================== */

/* This global class handles the responsive desktop/mobile image swap automatically 
   for ANY element you apply it to, anywhere on your website! */
.responsive-parallax-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    
    /* MOBILE-FIRST BASELINE: Looks up the mobile image token by default */
    background-image: var(--bg-mobile);
    background-size: cover;       
    background-position: center center;  
    background-repeat: no-repeat;
}

/* DESKTOP BREAKPOINT */
@media (min-width: 768px) {
    .responsive-parallax-canvas {
        /* WIDESCREEN SWITCH: Swaps to the high-resolution desktop token */
        background-image: var(--bg-desktop);
        will-change: transform; /* Re-engages high-performance rendering paths */
    }  
}


/* ==========================================================================
   5. HERO SECTION BASE ENGINE STYLES
   ========================================================================== */

.hero-section {
    position: relative;
    overflow: hidden; 
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: top !important;
    z-index: 1 !important;
} 

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 0;
    pointer-events: none;
    background-image: var(--bg-mobile);
    background-size: cover;       
    background-position: center center;  
    background-repeat: no-repeat;
}

.hero-section-opacity-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #0B3542;
    z-index: 1!important;
    pointer-events: none;
}

.hero-section-opacity-layer {
    display: none !important;
}

.hero-container-inner {
    position: relative;
    z-index: 2;
}

/* Desktop Configuration: Structural space expansion overrides */
@media (min-width: 768px) {

    .hero-section {
        min-height: 150vh !important; 
        justify-content: space-between !important;
    }
 
    .parallax-bg {
        background-image: var(--bg-desktop);
        will-change: transform;
    }  

    .bg-opacity-layer {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #0B3542;
        z-index: 1;
        pointer-events: none;
    }
}

/* ==========================================================================
   6. COMPANY DESCRIPTION STYLES
   ========================================================================== */

.hero-section-description {
    position: relative;
    overflow: visible !important;
    width: 100%;
    padding-top: 0;
    padding-bottom: 150px;  
    margin-top: -80px;
    z-index: 2 !important;  
}

.lower-parallax-bg {
    display: none;  
}

.description-gap-blocker {
    display: none;
}

.hero-section-description .container {
    position: relative;
    z-index: 2; 
}

.description-section-content {
    position: relative; 
    z-index: 5 !important; 
    margin-top: 0px !important;
    background: transparent !important;
}

.description-img {
    display: flex;
    align-items: center;
    justify-content: center
}


/* Desktop Configuration: Structural space expansion overrides */
@media (min-width: 768px) {

    .description-section-content {
        opacity: 0;
        transform: translate3d(80px, 0, 0);
        will-change: transform, opacity;
        transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s ease-out;
    }
    .description-section-content.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0); 
    }

    .lower-parallax-bg {
        position: absolute;
        top: -120px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 130%; 
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center -145px; 
        z-index: 1 !important;
        pointer-events: none;
        will-change: transform;
        display: block !important;     
    }

    .description-gap-blocker {
        position: absolute;
        top: 400px;
        left: 0;
        right: 0;
        height: 140%; 
        background-color: #0B3542 !important; 
        z-index: 2 !important; 
        pointer-events: none;
        will-change: transform;
        display: block !important;
    }

    .description-img {
        display: block !important;
    }
}

/* ==========================================================================
   7. WHAT WE DO STYLES
   ========================================================================== */

.wwd-section {
    position: relative;
    overflow: visible !important; 
    min-height: 130vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10 !important;
}

.wwd-parallax-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 0;
    background-size: cover;       
    background-position: center top;  
    background-repeat: no-repeat;
    background-image: var(--bg-mobile);
    pointer-events: none;
}

.wwd-bg-opacity-layer {
    display: none !important;
}  

.wwd-container-inner {
    position: relative;
    z-index: 5 !important;
    margin-top: 50px;
    margin-bottom: 180px;
    text-align: center;
    background: transparent !important;
    width: 100% !important;
}

.wwd-icon-container {
    justify-content: center;
    align-items: center;
}

.wwd-section h2 {
    padding-right: 10px;
}

.wwd_icon {
    width: 60px;
    height: 60px;
}

.wwd-bottom-wave-bg {
    display: none;
}

@media (min-width: 768px) {

    .wwd-section {
        min-height: 140vh !important;
    }     
 
    .wwd-parallax-bg {
        background-image: var(--bg-desktop);
        height: 140%;
        will-change: transform;
    }  

    .wwd-bg-opacity-layer {
        display: block !important;
        position: absolute;
        height: 120%; 
        top: -100px;
        left: 0; 
        right: 0; 
        bottom: 0;
        background-color: #0B3542;
        z-index: 1;
        pointer-events: none;
    }

    .wwd-icon-container {
        justify-content: start;
        align-items: start;
    }    

    .wwd-container-inner {
        margin-top: 150px !important;
        margin-bottom: 0px !important;
        text-align: left !important;
        opacity: 0;
        transform: translate3d(80px, 0, 0);
        will-change: transform, opacity;
        /* Matched to your elegant 1.6-second duration easing path */
        transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.6s ease-out;
    }

    .wwd-container-inner.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }  

    .wwd-bottom-wave-bg {
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1020px; 
        width: 100%;
        height: 1080px; 
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center bottom;
        z-index: 10 !important; 
        pointer-events: none;
        will-change: transform;
    }      
}

/* ==========================================================================
   8. SERVICES STYLES (COMPLETELY CLEAN START-OVER BASES)
   ========================================================================== */

.hero-section-services {
    position: relative;
    overflow: visible !important; 
    width: 100%;
    margin-top: 50px;
    padding-top: 50px; 
    padding-bottom: 120px;
    z-index: 12; 
    background: #0B3542 !important;
}

.services-parallax-bg {
    position: absolute;
    top: -120px;
    left: 200px;
    right: 0;
    bottom: 0;
    height: 120%; 
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-position: left top; 
    z-index: 2 !important;
    pointer-events: none;
    will-change: transform;     
}  

.services-top-blocker {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 100% !important; 
    background-color: #0B3542 !important;
    z-index: 1 !important;
    pointer-events: none;
    will-change: transform;
}

.match-height-row {
    display: flex !important;
    flex-wrap: wrap;
}

.match-height-row > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}

.services-grid-card {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    height: 100%; 
    background: transparent !important; 
}

.hero-section-services .container {
    position: relative;
    z-index: 2; 
    margin-top: 0px !important;
}

.services-section-content {
    padding-top: 0px !important; 
    margin-top: 0px !important; 
}

.services-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
}

.services-grid-card .card-header-zone {
    width: 100%;
    display: block;
    min-height: 4.8rem; 
    margin-bottom: 15px;
}

.services-grid-card h3 {
    margin: 0 !important;
    padding: 0 !important;
}

.services-grid-card .card-text-zone {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-height: 6rem; 
    margin-bottom: 25px;
}

.services-grid-card p {
    margin: 0 !important;
    padding: 0 !important;
}

.services-grid-card .card-button-row {
    margin-top: auto !important; /* Final lock to secure button symmetry lines */
    padding-bottom: 10px;
}

@media (min-width: 768px) {

    .services-section-content {
        opacity: 0;
        transform: translate3d(80px, 0, 0);
        will-change: transform, opacity;
        transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.6s ease-out;
    }

    .services-section-content.is-visible {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important; 
    }

}

/* ==========================================================================
   9. BACKGROUND DIVIDER STYLES (COMPLETELY CLEAN START-OVER BASES)
   ========================================================================== */

.homepage-background-section {
    position: relative;
    overflow: visible !important; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10 !important;
}

.background-parallax-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}  

.background-bottom-wave-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1000px; 
    width: 100%;
    height: 1080px; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 10 !important; 
    pointer-events: none;
    will-change: transform;
}

.background-wave-icon {
    position: absolute;
    top: 260px;
    right: 12%;
    width: 200px;
    height: 200px;
    z-index: 12 !important; 
    pointer-events: none;
    will-change: transform;
}

.background-wave-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {

    .homepage-background-section {
        min-height: 100vh;
    }     
 
    .background-parallax-bg {
        background-image: var(--bg-desktop);
        background-size: cover;       
        background-position: center top;  
        background-repeat: no-repeat;
        height: 125%;
        will-change: transform;
    }
}

/* ==========================================================================
   10. CLIENETS STYLES (COMPLETELY CLEAN START-OVER BASES)
   ========================================================================== */

.hero-section-clients {
    position: relative;
    overflow: visible !important; 
    width: 100%;
    margin-top: -80px;
    padding-top: 50px; 
    padding-bottom: 120px;
    z-index: 12; 
    background: #0B3542 !important;    
}   

.clients-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
}

/* DESKTOP CONFIGURATION: Transition States (768px and Wider) */
@media (min-width: 768px) {
    
    .clients-section-content {
        opacity: 0;
        transform: translate3d(80px, 0, 0);
        will-change: transform, opacity;
        transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.6s ease-out;
    }

    .clients-section-content.is-visible {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important; 
    }
}

/* ==========================================================================
   11. NEWS STYLES (COMPLETELY CLEAN START-OVER BASES)
   ========================================================================== */

.homepage-news-section {
    position: relative;
    overflow: hidden !important; 
    width: 100%;
    margin-top: -50px;
    padding-top: 100px; 
    padding-bottom: 80px !important; 
    min-height: 100vh;
    background: #0B3542 !important;   
    background: #0B3542 !important;       
    z-index: 12 !important;        
}   

.news-parallax-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 14 !important; 
    pointer-events: none;
    will-change: transform;    
}

.content-group {
    position: relative !important;
    z-index: 15 !important;
}

.homepage-news-section h2 {
    padding-right: 10px;
}

.news-icon {
    width: 80px;
    height: 80px;
}

.homepage-news-section .match-height-row {
    margin-bottom: 0px !important;
}

.news-grid-card {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    height: 100%; 
    background: #EFE7D2 !important; 
    border: #82A5C0 solid 2px;
    border-radius: 0.5rem !important;
}

.news-grid-card .image-zone {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 250px;
    width: 100%;
}

.news-grid-card .card-header-zone {
    width: 100%;
    display: block;
    min-height: 6.5rem; 
    margin-bottom: 15px;
}

.news-grid-card .card-header-zone h4 {
    color:#333333;
}

.news-grid-card .card-text-zone {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-height: 14rem;
    margin-bottom: 25px;
}

.news-grid-card .card-text-zone p {
    color: #333333;
}

.news-grid-card .card-button-row {
    margin-top: auto !important; 
    padding-bottom: 10px;
}

/* Desktop Configuration: Maps your Customizer CSS variable to your element canvas */
@media (min-width: 768px) {
    .news-parallax-bg {
        background-image: var(--bg-desktop);
        background-size: cover;       
        background-position: center bottom;  
        background-repeat: no-repeat;
    }  

    .content-group {
        opacity: 0;
        transform: translate3d(80px, 0, 0); /* <-- Change -80px to 80px */
        will-change: transform, opacity;
        transition: transform 1.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.6s ease-out;
    }

    .content-group.is-visible {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important; 
    }  
}


/* ==========================================================================
   12. CORE SITE FOOTER STYLES (UNIFIED FILL BACKGROUND)
   ========================================================================== */
footer,
.site-footer,
#colophon {
    margin-top: 0px !important;
    background-color: #0B3542 !important; 
    position: relative !important;
    z-index: 15 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.site-info,
.site-info a {
    color: #EFE7D2 !important;
    font-size: 0.95rem;
    text-decoration: none;
}
.site-info a:hover {
	color: #FFC74E !important;
}

/* ==========================================================================
   13. INSIDE PAGE BLOCK PATTERNS (PARENT HOOK STYLING ENGINE)
   ========================================================================== */

/* --------------------------------================-----------------
   A. MASTER HERO HEADER ELEMENTS (.skagit-inside-header-shell)
   ----------------------------------------------------------------- */
.skagit-inside-header-shell,
.skagit-inside-header-shell .wp-block-cover {
    position: relative !important;
    width: 100% !important;
    min-height: 45vh !important; 
    overflow: visible !important; /* CRITICAL: Permits bottom wave to bleed past floor line */
    background-size: cover !important;
    background-position: center center !important;
    z-index: 10 !important;
}

.skagit-inside-header-shell .wp-block-cover {
    padding-top: 120px !important; /* Mobile-first padding clearance buffers */
    padding-bottom: 120px !important;
}

/* FIX: RE-ACTIVATES THE DARK CONTRAST OVERLAY SCRIM LAYER FOR COVERS */
.skagit-inside-header-shell .wp-block-cover__background,
.skagit-inside-services-shell .wp-block-cover__background {
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* THE MOBILE-FIRST RESPONSIVE HERO IMAGE BACKDROP OVERRIDE */
@media (max-width: 767px) {
    .skagit-inside-header-shell .wp-block-cover {
        /* Automatically applies your pre-tinted mobile background asset on phones */
        background-image: url('../images/Homepage_MissionVision_mobile_op.png') !important;
    }
    .skagit-inside-header-shell .wp-block-cover__background {
        display: none !important; /* Suppresses the code scrim on phones since it's pre-tinted */
    }
}

/* TYPOGRAPHY RENDER ENGINE CALIBRATIONS (MOBILE) */
.skagit-inside-header-shell h1,
.skagit-inside-header-shell .wp-block-heading {
    color: #FFC74E !important; /* Your signature gold branding color token */
    font-size: 2.25rem !important; 
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
}

.skagit-inside-header-shell p {
    color: #EFE7D2 !important; /* Light cream contrast text path */
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
}

/* --------------------------------================-----------------
   B. SERVICES OVERLAY CARD ELEMENTS (.skagit-inside-services-shell)
   ----------------------------------------------------------------- */
.skagit-inside-services-shell,
.skagit-inside-services-shell .wp-block-cover {
    position: relative !important;
    width: 100% !important;
    min-height: 60vh !important; 
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    z-index: 10 !important;
    margin-bottom: 60px !important; /* vertical separation spacing between rows */
}

.skagit-inside-services-shell .wp-block-cover {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* SHAPES THE INNER 85% CREAM CARD LAYOUT CONTAINER BOX NATIVELY */
.skagit-inside-services-shell .wp-block-cover__inner-container > .wp-block-group {
    width: 95% !important; /* Mobile-first fallback width */
    max-width: 1400px !important;
    background-color: #EFE7D2 !important; /* Signature cream backdrop color */
    border: #82A5C0 solid 2px;
    border-radius: 0.75rem !important;
    color: #0B3542 !important;
    padding: 2.5rem !important;
    z-index: 5 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.skagit-inside-services-shell h2 {
    color: #0B3542 !important;
    font-size: 2rem; 
    margin-bottom: 35px;
    font-weight: 700;
}

.skagit-inside-services-shell h4 {
    color: #0B3542 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
}

.skagit-inside-services-shell p.card-body-text,
.skagit-inside-services-shell .wp-block-column p {
    color: #333333 !important;
    line-height: 1.8 !important;
    font-size: 0.95rem !important;
}

/* --------------------------------================-----------------
   C. ABOUT US MODULE ELEMENTS (.skagit-inside-about-shell)
   ----------------------------------------------------------------- */
.skagit-inside-about-shell .wp-block-group {
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
}

/* BORDER OVER PRIMARY DARK BLUE CONTENT SYSTEM */
.skagit-inside-about-shell .container > .wp-block-group {
    background-color: transparent !important;
    border: 2px solid #82A5C0 !important; /* Blue border directly overlays your backdrop background-color */
    border-radius: 0.5rem !important;
    max-width: 1200px !important;
    padding: 2rem !important;
    margin: 0 auto 40px auto !important; 
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.skagit-inside-about-shell h3 {
    color: #FFFFFF !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.skagit-inside-about-shell p {
    color: #EFE7D2 !important; /* Light cream bio text contrast path */
    line-height: 1.75 !important;
}

/* BIOGRAPHY TEAM PROFILE AVATAR THUMBNAIL BADGE LAYER */
.skagit-inside-about-shell figure.wp-block-image img {
    border: 3px solid #FFC74E !important; /* Highlight gold circle outline rings avatar badge */
    background-color: #0B3542 !important;
    padding: 5px !important;
    border-radius: 50% !important; /* Locks bio crop into a perfect circular seal badge layout shape */
    width: 100% !important;
    max-width: 200px !important; 
    height: 200px !important;
    object-fit: cover !important; /* Stops skewing or stretching of user photo file uploads */
    margin: 0 auto !important;
    display: block !important;
}


/* ==========================================================================
   DESKTOP BREAKPOINT OVERRIDES (768px and Wider Screen Displays)
   ========================================================================== */
@media (min-width: 768px) {
    
    .skagit-inside-header-shell .wp-block-cover {
        padding-top: 140px !important;
        padding-bottom: 160px !important;
    }

    /* THE DESKTOP-ONLY DOWNWARD SCROLLING PARALLAX WAVE INJECTOR
       By attaching this element completely inside the desktop media query block,
       the wave layout remains perfectly hidden from mobile phones to support your mobile image files! */
    .skagit-inside-header-shell::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -145px !important; /* Anchored flat to slide flush behind incoming row content cards */
        width: 100% !important;
        height: 300px !important; 
        background-image: url('../images/SkagitCPAG_pgBrkGrphc_left_1920_new.png') !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center bottom !important;
        z-index: 12 !important; 
        pointer-events: none !important;
        will-change: transform !important;
        transform: var(--wave-transform, translate3d(0, -145px, 0)) !important;
    }

    /* Widescreen alignment calibration: pull layout elements back flush right */
    .skagit-inside-header-shell h1,
    .skagit-inside-header-shell .wp-block-heading {
        font-size: 3.5rem !important; 
        text-align: right !important;
    }

    .skagit-inside-header-shell p {
        font-size: 1.35rem !important;
        text-align: right !important;
    }
    
    /* Clamp card overlay to a strict 85% width framework on large laptop monitor widths */
    .skagit-inside-services-shell .wp-block-cover__inner-container > .wp-block-group {
        width: 85% !important; 
    }
    
    .skagit-inside-services-shell h2 {
        font-size: 2.5rem !important;
    }
}