/* ==========================================================================
   QUARANTINED CAPABILITIES CSS
   ========================================================================== */

body.single-mom_capability {
    background-color: #ffffff !important;
}


/* Layout Workspace Bounds */
body.single-mom_capability .capabilities-master-wrapper {
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: #ffffff;
}

/* 1. Hero Block Elements */
body.single-mom_capability .capabilities-hero h1 {
    color: #002e4b;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 15px;
}

/* 2. Brands Repair Layout Matrix */
body.single-mom_capability .brands-flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
}

body.single-mom_capability .brand-logo-card {
	flex: 1 1 calc(33.333% - 14px); /* Shifted from 25% to force 3-across default */
    max-width: calc(33.333% - 14px);
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
	/* 6/3/26 comment5ed below */
    /* background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px; */
    padding: 10px;
}

body.single-mom_capability .brand-logo-card img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Button baseline alignment for the brand row */
body.single-mom_capability .view-all-brands-btn {
    align-self: flex-end;
    height: fit-content;
    padding: 8px 16px;
}

/* ==========================================================================
   3. REFACTORED QUALITY BANNER INLINE CONTAINER
   ========================================================================== */

   
   /* Navy band sits flush against the process grey band below (no white gap) */
body.single-mom_capability .capabilities-quality-full-bleed {
    margin-bottom: 0 !important;
}

body.single-mom_capability .capabilities-quality-full-bleed {
    background-color: #002e4b; /* Deep Navy */
    /* border-radius: 4px; /* Softens edge alignment inside columns */
    overflow: hidden;
}

/* Horizontal spacing container to create internal border inset */
body.single-mom_capability .quality-internal-padded-container {
    padding: 30px 40px;
}

/* Red Eyebrow Palette Shift */
body.single-mom_capability .quality-eyebrow-red {
    color: #d2232a;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Typography Overrides inside the Dark Strip */
body.single-mom_capability .capabilities-quality-full-bleed h2 {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.25;
}

body.single-mom_capability .quality-section-body-text p {
    color: #ffffff !important;
    font-size: 1.07rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 0;
}

/* Video Side-by-Side Horizontal Matrix Layout */
body.single-mom_capability .quality-media-flex-row {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

body.single-mom_capability .quality-media-flex-row .video-frame-container {
    flex: 1;
    /* max-width: 50%; */
}

body.single-mom_capability .video-frame-container iframe {
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 4px;
}

/* 4. Repair Process Grid Step Component Rules */
body.single-mom_capability .process-header img {
    max-width: 80px;
    height: auto;
}

body.single-mom_capability .process-step-card {
    background-color: #ffffff; /* stays white on the grey band */
    /* border-top: 4px solid #0066a4; */
    /* border-radius: 4px; */
    padding: 20px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.single-mom_capability .process-step-card .step-count {
    font-family: 'Roboto Condensed', sans-serif;
    color: #0066a4;
    font-weight: 400;
    /* text-transform: uppercase; */
    font-size: 1.25rem;
    display: block;
    margin-bottom: 5px;
}

body.single-mom_capability .process-step-card h3 {
    font-size: 1.5rem;
    color: #002e4b;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Step boxes: equal horizontal + vertical spacing via flex gap
   (mirrors the brands grid; gap matches the cards' original 1rem mb-3). */
body.single-mom_capability .process-steps-matrix {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-left: 0;  /* reset the Bootstrap row negative gutters so the cards line up with the header above */
    margin-right: 0;
}

body.single-mom_capability .process-steps-matrix .process-step-card {
    flex: 1 1 calc((100% - 2rem) / 3); /* 3 across, minus the 2 gaps between them */
    max-width: calc((100% - 2rem) / 3);
    margin-bottom: 0; /* gap handles vertical spacing now */
}

@media (max-width: 767.98px) {
    body.single-mom_capability .process-steps-matrix .process-step-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Center text column blends into the full-bleed grey band below */
.process-text-bg {
  background-color: transparent;
}

/* ==========================================================================
   SECTION 4: FULL-BLEED GREY BAND BEHIND THE PROCESS SECTION
   Grey spans edge-to-edge (same #f5f5f5 + ::before bleed as the hero);
   step cards stay white. Body has overflow-x: hidden to crop the -100vw bleed.
   ========================================================================== */
body.single-mom_capability .capabilities-process {
    position: relative;
    z-index: 1;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

body.single-mom_capability .capabilities-process::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    background-color: #f5f5f5;
    z-index: -1;
}

/* ==========================================================================
   MOBILE SCALING STACK BREAKPOINTS
   ========================================================================== */
@media screen and (max-width: 991px) {
    body.single-mom_capability .brand-logo-card {
        flex: 1 1 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }
}

@media screen and (max-width: 575px) {
    body.single-mom_capability .brand-logo-card {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
        height: 70px;
    }
    body.single-mom_capability .capabilities-hero h1 {
        font-size: 2rem;
    }
}




/* ==========================================================================
   HERO HEADER ADDITIONS (BREADCRUMBS & EYEBROW TEXT)
   ========================================================================== */

/* Breadcrumb Layout Strip */
/* ==========================================================================
   UN-HIDE GLOBAL BREADCRUMBS
   ========================================================================== */
body.single-mom_capability .breadcrumbSection {
    display: inline-block !important;
    border-bottom: none;
    white-space: nowrap;   /* keep the whole trail on one line so it stays on the grey hero strip */
    background: transparent;
}

/* Crumb item colors: only true links are blue; the parent label and the
   current page read as muted navy (matching the rest of the breadcrumb). */
body.single-mom_capability .breadcrumbSection a {
    color: #0066a4;
}
body.single-mom_capability .breadcrumbSection .breadcrumb-parent,
body.single-mom_capability .breadcrumbSection .breadcrumb-current {
    display: inline;            /* override global `span.current { display:block }` */
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;    /* kill the global white box */
    color: #002136 !important;  /* match the other crumbs (navy) */
    font-weight: 400;
}

/* Red Eyebrow Segment */
body.single-mom_capability .capabilities-eyebrow-red {
    display: block;
    color: #d2232a; /* Corporate Red Palette Match */
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 2px;
}

/* ==========================================================================
   SECTION 1: HERO BACKGROUND, WATERMARK & FULL-BLEED ENGINE
   ========================================================================== */

/* 1. Bulletproof Header Clearance */
/* Clears the fixed header for BOTH columns at once, matching the original
   layout's breadcrumb position per breakpoint (theme header height + the old
   hero's top padding: 24px <992px, 48px >=992px). The hero ::before reads the
   same --hero-clearance variable (inherited) so the grey full-bleed stays in sync. */
body.single-mom_capability .capabilities-master-wrapper {
    margin-top: 0 !important;
    --hero-clearance: 169px; /* <768px:  145px header + 24px */
    padding-top: var(--hero-clearance) !important;
    padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
    body.single-mom_capability .capabilities-master-wrapper { --hero-clearance: 176px; } /* 152px header + 24px */
}
@media screen and (min-width: 992px) {
    body.single-mom_capability .capabilities-master-wrapper { --hero-clearance: 200px; } /* 152px header + 48px */
}
@media screen and (min-width: 1400px) {
    body.single-mom_capability .capabilities-master-wrapper { --hero-clearance: 218px; } /* 170px header + 48px */
}

/* 1b. Cancel the global `main { margin-top: 145–170px }` header-clearance rule.
   That margin only applies to the <main> (hero) column, not the <aside> sidebar,
   so it pushes the hero down and leaves the sidebar floating high. Header
   clearance is already handled by the wrapper's padding-top above. */
body.single-mom_capability main.capabilities-main-content {
    margin-top: 0 !important;
}

/* 2. Base Hero Container */
body.single-mom_capability .capabilities-hero {
    background-color: transparent;

    /* Small nudge so the breadcrumb/heading sits at the original's height.
       Affects ONLY this column (sidebar is anchored to the wrapper, not the hero)
       and does NOT move the hero box, so the grey ::before still bleeds behind the header. */
    padding-top: 10px !important;
    padding-bottom: 40px;
    
    position: relative;
    z-index: 1; 
}

/* 3. The Full-Bleed Grey Background */
body.single-mom_capability .capabilities-hero::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--hero-clearance)); /* Covers the wrapper's padding-top exactly (inherited variable) */
    bottom: 0;
    left: -100vw;  
    right: -100vw; 
    background-color: #f5f5f5; 
    z-index: -2; 
}

/* 4. The Insignia Watermark */
body.single-mom_capability .capabilities-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -100px; /* Widened frame to prevent cropping */
    background-image: var(--wpr-bg-9b28d013-ffd2-4fca-a746-e93de327569b); 
    background-position: left bottom; 
    background-repeat: no-repeat;
    background-size: 500px !important; 
    z-index: -1; 
    pointer-events: none; 
}

/* ==========================================================================
   LAYOUT UTILITIES (FULL-BLEED SUPPORT)
   ========================================================================== */
body.single-mom_capability .relative-row {
    position: relative;
}

body.single-mom_capability .capabilities-sidebar {
    z-index: 2;
}

/* Crops the -100vw overflow from the grey background */
body.single-mom_capability {
    overflow-x: hidden;
}

/* ==========================================================================
   UNIFIED INTRO TEXT STYLING (HERO & BRANDS)
   ========================================================================== */

body.single-mom_capability .hero-intro,
body.single-mom_capability .hero-intro p,
body.single-mom_capability .brands-section-intro,
body.single-mom_capability .brands-section-intro p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #333333;
    font-weight: 400;
}

body.single-mom_capability .brands-section-intro p {
    margin-top: 15px;
    margin-bottom: 0;
}

/* ==========================================================================
   SIDEBAR DESKTOP ALIGNMENT (MAXIMUM SPECIFICITY OVERRIDE)
   ========================================================================== */
@media screen and (min-width: 992px) {
    
    /* 1. Target the outer <aside> wrapper with high specificity */
    body.single-mom_capability div.capabilities-master-wrapper aside.capabilities-sidebar {
        padding-top: 0 !important;
        margin-top: 0 !important; /* Align form-box top flush with the breadcrumb/hero top (hero padding-top is 0) */
    }

    /* 2. Target the inner form box to completely crush legacy floating/pulling */
    body.single-mom_capability div.capabilities-master-wrapper aside.capabilities-sidebar div.sidebarWrap.sidebarFormWrap {
        position: relative !important;
        top: 0 !important; 
        bottom: auto !important;
        transform: none !important;
        margin-top: 0 !important; 
        margin-bottom: 0 !important;
    }
}


/* ==========================================================================
   MOBILE & TABLET RESPONSIVE RESET (991px and below)
   ========================================================================== */
@media screen and (max-width: 991px) {
    
    body.single-mom_capability .capabilities-sidebar {
        padding-top: 0 !important;
        /* Removes the 160px desktop drop entirely so it doesn't look broken on mobile */
        margin-top: 40px !important; 
    }
    
    body.single-mom_capability .sticky-form-card {
        /* Kill the sticky behavior on mobile screens so it scrolls naturally */
        position: relative !important;
        top: 0 !important;
    }
}




body.single-mom_capability .hero-intro > :last-child,
body.single-mom_capability .brands-section-intro > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   SECTION 2.5: EXTRA INFO WYSIWYG WRAPPER
   ========================================================================== */
.capabilities-extra-info {
    position: relative;
    width: 100%;
}

.capabilities-extra-info .wysiwyg-content-block {
    font-size: 1rem;
    line-height: 1.65;
    color: #333333; /* Adjust to match parent theme body text color */
}

/* Ensure standard Gutenberg/WYSIWYG layout spacing within the column */
.capabilities-extra-info .wysiwyg-content-block p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.capabilities-extra-info .wysiwyg-content-block p:last-child {
    margin-bottom: 0;
}

/* Fix for any ad-hoc bullet points or ordered lists they throw in */
.capabilities-extra-info .wysiwyg-content-block ul,
.capabilities-extra-info .wysiwyg-content-block ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.capabilities-extra-info .wysiwyg-content-block li {
    margin-bottom: 0.5rem;
}

/* Responsive spacing sanity check */
@media (max-width: 991.98px) {
    .capabilities-extra-info {
        margin-top: 2.5rem !important;
        margin-bottom: 2.5rem !important;
    }
}


/* ==========================================================================
   SECTION 4: ROCESS HEADER ROW 
   ========================================================================== */

.process-designer-header {
    background-color: transparent;
}

/* Clear any weird legacy h2 margins or defaults within this specific block */
.process-designer-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #002e4b !important; /* deep navy match */
}

/* Ensure the red process eyebrow handles its spacing exactly like the hero */
.process-designer-header .process-eyebrow-red {
    color: #d2232a;
    font-size: 1.15rem;
    /* font-weight: 600; /
    letter-spacing: -0.01em;
}

/* Forces the hardware context image wrapper to fluidly */
.process-context-image-wrap {
    display: inline-block;
    width: 100%;
}

.process-context-image-wrap img {
    max-height: 200px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    /* If mobile view kicks in, center the texts and give the image space */
    .process-designer-header {
        text-align: center;
    }
    .process-context-image-wrap {
        margin-top: 1.5rem;
    }
}


/* ==========================================================================
   NO RED LINE BUTTON UTILITY CLASSES
   ========================================================================== */
.no-red-line:before {
    display: none !important;
}


/* ==========================================================================
   KILL LEGACY GLOBAL SIDEBAR SHADOWS
   ========================================================================== */
/* body.single-mom_capability .capabilities-sidebar .sidebarWrap,
body.single-mom_capability .capabilities-sidebar .sidebarFormWrap {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
} */