/* ==========================================================================
   1. Reset & Root Variables
   ========================================================================== */
@font-face {
    font-family: 'CoolveticaRg';
    src: url('fonts/CoolveticaRg-Regular-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RedHatDisplay';
    src: url('fonts/RedHatDisplay-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-blue: #2361cb;
    --dark-blue: #1c355e;
    --teal-green: #2ca58d;
    --text-color: #333333;
    --white: #ffffff;
    --header-height: 80px;
    --transition-speed: 0.3s;
}

body {
    color: var(--text-color);
    background-color: var(--white);
}

/* ==========================================================================
   2. Header Core & Navigation (Updated Hover & Dropdown Layout Engine)
   ========================================================================== */
.site-header {
    width: 100%;
    height: var(--header-height);
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    position: relative;
    z-index: 1000;
    transition: all var(--transition-speed) ease;
    font-family: 'RedHatDisplay', sans-serif;
}

.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    animation: slideDown 0.4s ease-out;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.header-container {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

.logo-placeholder {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.brand-blue { color: var(--primary-blue); }
.brand-dark-blue { color: var(--primary-blue); margin-left: 2px;}
.white-text { color: var(--white); }

/* Desktop Navigation Row Container */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 100%;
}

/* Individual Navigation Wrap Box */
.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 2px;
}

/* Base Link Typography and Sizing */
.nav-link {
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    font-family: 'RedHatDisplay', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease;
}

/* Base Teal Interactive Accent Underline Tracker */
.nav-underline {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--teal-green);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Active Mouse Hover Actions Context */
.nav-item:hover .nav-link {
    color: var(--primary-blue);
}

.nav-item:hover .nav-underline {
    transform: scaleX(1);
}

/* --- Dropdown Animation Box Matrix Panels --- */
.dropdown-panel {
    position: absolute;
    top: calc(var(--header-height) - 16px);
    left: 0;
    transform: translateY(12px);
    width: max-content;
    min-width: 240px;
    background-color: #3b75d6;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 14px 36px rgba(28, 53, 94, 0.16);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.3s;
    z-index: 1100;
}

/* Horizontal dark teal block line on top of dropdown panels */
.dropdown-teal-top-edge {
    width: 100%;
    height: 4px;
    background-color: var(--teal-green);
}

.dropdown-links-stack {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

/* Dropdown Sub-Item Links Configuration */
.dropdown-link {
    display: block;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'RedHatDisplay', sans-serif;
    color: var(--white);
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Interactive highlight look inside the panel link structures */
.dropdown-link:hover {
    background-color: var(--teal-green);
}

/* Trigger Condition: Reveals dropdown menu dynamically when parent is hovered */
.nav-item.has-dropdown:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn-contact {
    background-color: var(--teal-green);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'RedHatDisplay', sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--transition-speed);
}

.btn-contact:hover {
    background-color: #3b75d6;
}

.video-cta-btn {
    border: 1px solid var(--white);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.lang-switch {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
    font-family: 'RedHatDisplay', sans-serif;
}

/* ==========================================================================
   3. Mobile Menu Toggle & Drawer
   ========================================================================== */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.grid-icon {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 24px;
    height: 24px;
}

.grid-icon span {
    width: 5px;
    height: 5px;
    background-color: var(--dark-blue);
    border-radius: 50%;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background-color: #223e6b;
    z-index: 2000;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-speed) ease-in-out;
}

.mobile-drawer.is-open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.close-drawer {
    background: none;
    border: none;
    color: var(--white);
    font-size: 36px;
    cursor: pointer;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile-link, .mobile-dropdown-trigger {
    background: none;
    border: none;
    text-align: left;
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, padding 0.3s ease;
    padding: 12px 0;
}

.mobile-link:hover, .mobile-dropdown-trigger:hover {
    background-color: var(--teal-green);
    padding: 12px 16px;
}

.mobile-dropdown-trigger .plus {
    font-size: 24px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.mobile-dropdown-content {
    display: none;
    padding-left: 20px;
    margin-top: 10px;
}

.mobile-dropdown.active .mobile-dropdown-content {
    display: block;
}

.mobile-dropdown.active .mobile-dropdown-trigger .plus {
    transform: rotate(45deg);
}

.mobile-sublink {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}

.mobile-sublink:hover {
    color: var(--white);
    background-color: var(--teal-green);
    padding: 10px 16px;
}

.drawer-actions {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lang-switch-mobile {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 16px;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
    z-index: 1500;
    display: none;
}

.drawer-overlay.is-visible {
    display: block;
}

/* ==========================================================================
   4. Video Hero Section
   ========================================================================== */
.video-hero-section {
    position: relative;
    width: 100%;
    height: 600px;
    min-height: 900px;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

.desktop-video {
    display: block;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(1.1);
}

.mobile-video {
    display: none;
    transform: translate(-50%, -50%) scale(1);
}

.video-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0 24px;
    color: var(--white);
    width: 70%;
    margin: 0 auto;
}

.video-hero-content h1 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 55px;
    font-weight: 500;
    margin-bottom: 8px;
    max-width: 800px;
    letter-spacing: 1px;
}

/* ==========================================================================
   4B. About Us Component (Two-Column Graphic Layout Engine)
   ========================================================================== */
.about-hero-section {
    background-color: var(--teal-green);
    color: var(--white);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 478px;
    background-image: url('images/logo/nh-logo-verticle-white-675x1125.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

.about-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--teal-green);
    opacity: 0.85;
    z-index: 1;
}

.about-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Left Column Context (Constrains prose width exactly like your screenshot) */
.about-hero-text {
    flex: 1;
    max-width: 780px;
}

.about-hero-section h1 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.about-hero-section p {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    opacity: 0.9;
    margin-bottom: 20px;
}

.about-hero-text p:last-child {
    margin-bottom: 0;
}

/* Right Column Context (Controls your graphic asset presentation) */
.about-hero-graphic {
    display: none;
}

/* Responsive Overrides within your global Media Framework */
@media (max-width: 992px) {
    .about-hero-section {
        height: auto;
        min-height: 400px;
        padding: 60px 0;
        background-size: 300px;
    }
    .about-hero-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .purpose-container {
        flex-direction: column;
        gap: 40px;
    }
    .purpose-text {
        max-width: 100%;
    }
    .purpose-media-frame {
        max-width: 100%;
    }
}

/* ==========================================================================
   4C. Our Purpose Component (New Injection)
   ========================================================================== */
.purpose-content-section {
    padding: 100px 48px;
    max-width: 1280px;
    margin: 0 auto;
}

.purpose-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.purpose-text {
    flex: 1;
    max-width: 600px;
}

.purpose-content-section h2 {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.purpose-content-section p {
    font-family: 'RedHatDisplay', sans-serif;
    color: #4a5568;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    margin-bottom: 0;
}

.purpose-media-frame {
    flex: 1;
    width: 100%;
    max-width: 300px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(28, 53, 94, 0.06);
}

.purpose-media-frame img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}
/* ==========================================================================
   4D. Our Values Component Grid Engine
   ========================================================================== */
.values-grid-section {
    padding: 100px 48px;
    background-color: var(--white);
    width: 100%;
}

.values-grid-container {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.values-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 60px;
    letter-spacing: 1px;
}

.values-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

.value-card {
    border-radius: 6px;
    padding: 40px 32px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

/* Subtle modern highlight when hovering a card */
.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(28, 53, 94, 0.05);
}

/* Exact screenshot background color matrixing */
.value-card.card-bg-blue {
    background-color: #e1eeff; /* Soft Brand Blue Tint */
}

.value-card.card-bg-green {
    background-color: #d6f2e1; /* Soft Teal/Green Tint */
}

.value-card h3 {
    font-family: 'CoolveticaRg', sans-serif;
    color: #000000;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.value-card p {
    font-family: 'RedHatDisplay', sans-serif;
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

/* --- Responsive Layout Breakpoints for the Values Matrix --- */
@media (max-width: 1024px) {
    .values-grid-section {
        padding: 80px 32px;
    }
    .values-cards-row {
        grid-template-columns: repeat(2, 1fr); /* Snaps cleanly to a 2x2 grid on tablets */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .values-grid-section {
        padding: 60px 24px;
    }
    .values-main-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .values-cards-row {
        grid-template-columns: 1fr; /* Snaps cleanly to vertical full-width stacks on mobile */
        gap: 16px;
    }
    .value-card {
        padding: 32px 24px;
    }
}
/* ==========================================================================
   4E. Our Promise Component Engine (Advanced Morph & Mask Matrix)
   ========================================================================== */
.promise-split-section {
    display: flex;
    width: 100%;
    min-height: 600px;
    background-color: var(--white);
    overflow: hidden;
}

/* --- Layout Distribution Columns --- */
.promise-media-side {
    flex: 1;
    position: relative;
    background-color: #25406c;
    overflow: hidden;
    min-height: 600px;
}

.promise-content-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 10%;
    background-color: var(--white);
}

.promise-text-wrapper {
    max-width: 520px;
}

/* --- Typography Mapping --- */
.promise-text-wrapper h2 {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.promise-text-wrapper p {
    font-family: 'RedHatDisplay', sans-serif;
    color: #4a5568;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    margin-bottom: 20px;
}

.promise-text-wrapper p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Simple Image Swap Animation
   ========================================================================== */
.promise-media-side img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.base-view {
    z-index: 1;
    opacity: 1;
}

.morph-stencil-view {
    z-index: 2;
    opacity: 0;
}

.promise-media-side:hover .base-view {
    opacity: 0;
}

.promise-media-side:hover .morph-stencil-view {
    opacity: 1;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 992px) {
    .promise-split-section {
        flex-direction: column;
    }
    
    .promise-media-side {
        width: 100%;
        height: 450px;
    }
    
    .promise-content-side {
        width: 100%;
        padding: 60px 24px;
    }
}
/* ==========================================================================
   5. The Problem We Solve
   ========================================================================== */
.problem-section {
    position: relative;
    width: 100%;
    background-color: var(--white);
    padding: 100px 0;
}

.problem-sticky-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
}

.problem-left-pane {
    position: sticky;
    top: calc(var(--header-height) + 60px);
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.problem-title {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 50px;
    color: var(--primary-blue);
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1em;
    letter-spacing: 1px;
}

.problem-description {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000814;
    margin-bottom: 20px;
    line-height: 25px;
}

.problem-sub-description {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000814;
    margin-bottom: 20px;
    line-height: 25px;
}

.problem-right-pane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-bottom: 100px;
}

.problem-timeline-line {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 2px;
    height: calc(100% - 160px);
    background-color: #e0e0e0;
    z-index: 1;
}

.problem-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    opacity: 0.25;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.problem-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.problem-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    color: #2ca58d;
    background-color: var(--white);
    transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
    flex-shrink: 0;
}

.problem-card:not([data-step="4"]):hover .problem-icon-wrapper {
    background-color: rgba(44, 165, 141, 0.12);
    transform: scale(1.05);
}

.problem-icon-wrapper.misinformation-black-circle {
    background-color: #000000 !important;
    color: #2ca58d !important;
    border-radius: 50% !important;
}

.problem-card[data-step="4"]:hover .problem-icon-wrapper {
    transform: scale(1.05);
    background-color: rgba(44, 165, 141, 0.12);
}

.problem-svg-icon {
    width: 24px;
    height: 24px;
    stroke-width: 2.2px;
}

.problem-card-content h3 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 26px;
    color: #000000;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.5;
    letter-spacing: 1px;
}

.problem-card-content p {
    font-size: 17px;
    font-family: 'RedHatDisplay', sans-serif;
    color: #000814;
    line-height: 1.5;
    font-weight: 400;
}
/* ==========================================================================
   4F. Our Call To Action Component Engine
   ========================================================================== */
.cta-grid-section {
    padding: 100px 48px;
    background-color: var(--white);
    width: 100%;
}

.cta-grid-container {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.cta-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 60px;
    letter-spacing: 1px;
}

.cta-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.cta-card {
    background-color: var(--white);
    border: 1px solid #eef4fc; /* Very faint light blue border from screenshots */
    border-radius: 8px;
    padding: 60px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

/* Hover lift effect mimicking global site behavior */
.cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(35, 97, 203, 0.06);
}

.cta-icon-box {
    width: 48px;
    height: 48px;
    color: var(--teal-green);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon-box svg {
    width: 100%;
    height: 100%;
}

.cta-card h3 {
    font-family: 'CoolveticaRg', sans-serif;
    color: #000000;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

.cta-card p {
    font-family: 'RedHatDisplay', sans-serif;
    color: #555555;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* --- Responsive Layout Breaks --- */
@media (max-width: 1024px) {
    .cta-grid-section {
        padding: 80px 32px;
    }
    .cta-cards-row {
        gap: 24px;
    }
    .cta-card {
        padding: 40px 24px;
    }
}

@media (max-width: 900px) {
    .cta-cards-row {
        grid-template-columns: 1fr; /* Snaps instantly to vertical full width on mobile viewports */
        gap: 24px;
    }
    .cta-main-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .cta-card {
        padding: 50px 32px;
        max-width: 500px;
        margin: 0 auto; /* Keeps cards centered nicely when in a column layout */
        width: 100%;
    }
}
/* ==========================================================================
   4G. Let's Connect Contact Component Engine
   ========================================================================== */
.connect-form-section {
    padding: 100px 48px;
    background-color: var(--white);
    width: 100%;
}

.connect-form-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
}

/* --- Left Column: Office Styling Info --- */
.office-info-card {
    flex: 1;
    max-width: 320px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.office-icon-frame {
    width: 100px;
    height: 120px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.office-icon-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.office-info-card h3 {
    font-family: 'CoolveticaRg', sans-serif;
    color: #1c355e;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

.office-info-card address {
    font-family: 'RedHatDisplay', sans-serif;
    font-style: normal;
    color: #4a5568;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.office-phone a {
    font-family: 'RedHatDisplay', sans-serif;
    color: #4a5568;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-speed);
}

.office-phone a:hover {
    color: var(--primary-blue);
}

.office-map-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #4a5568;
    margin-top: 24px;
    text-decoration: none;
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}

.office-map-arrow svg {
    width: 16px;
    height: 16px;
}

.office-map-arrow:hover {
    background-color: #f1f5f9;
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* --- Right Column: Input Field Matrix --- */
.contact-form-panel {
    flex: 1.5;
    max-width: 640px;
    width: 100%;
}

.contact-form-panel h2 {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: 0.5px;
}

.native-form-element {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field-group {
    width: 100%;
}

.native-form-element input,
.native-form-element textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    color: var(--text-color);
    background-color: #fdfdfd;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Precise placeholder typography mimicking input labels */
.native-form-element input::placeholder,
.native-form-element textarea::placeholder {
    color: #556275;
    font-weight: 600;
    opacity: 1;
}

.native-form-element input:focus,
.native-form-element textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(35, 97, 203, 0.08);
    background-color: var(--white);
}

.native-form-element textarea {
    resize: vertical;
}

/* Action button overrides mapping directly to site tokens */
.btn-form-submit {
    align-self: flex-start;
    background-color: var(--teal-green);
    color: var(--white);
    border: none;
    padding: 14px 36px;
    border-radius: 4px;
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform 0.1s ease;
}

.btn-form-submit:hover {
    background-color: #238571;
}

.btn-form-submit:active {
    transform: scale(0.98);
}

.btn-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.field-error {
    display: block;
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 13px;
    color: #dc2626;
    margin-top: 4px;
    min-height: 18px;
}

.form-status-message {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 15px;
    margin-top: 16px;
    padding: 0;
    border-radius: 6px;
    text-align: center;
}

.form-status-message.status-success {
    color: #16a34a;
    background-color: #f0fdf4;
    padding: 12px 16px;
    border: 1px solid #bbf7d0;
}

.form-status-message.status-error {
    color: #dc2626;
    background-color: #fef2f2;
    padding: 12px 16px;
    border: 1px solid #fecaca;
}

/* --- Responsive Layout Breakpoints --- */
@media (max-width: 992px) {
    .connect-form-section {
        padding: 60px 24px;
    }
    .connect-form-container {
        flex-direction: column;
        align-items: center;
        gap: 56px;
    }
    .office-info-card {
        max-width: 100%;
    }
    .contact-form-panel {
        max-width: 100%;
    }
    .contact-form-panel h2 {
        font-size: 32px;
        text-align: left;
        margin-bottom: 24px;
    }
    .btn-form-submit {
        width: 100%; /* Expands to full block width for simple touch indexing on mobile screen sizes */
        text-align: center;
    }
}
/* ==========================================================================
   4H. Engagement Challenge Hero Engine (Overlapping Stack Engine)
   ========================================================================== */
.engagement-hero-section {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    background-color: var(--teal-green);
    position: relative;
}

.engagement-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* --- Right Side Background Image --- */
.engagement-media-pane {
    grid-column: 6 / -1; /* Spans from the middle across to the absolute right edge */
    grid-row: 1;
    width: 100%;
    height: 620px; /* Controls structural desktop aspect bounds */
    overflow: hidden;
    z-index: 1;
}

.engagement-media-pane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Left Side Overlapping Content Box --- */
.engagement-content-card {
    grid-column: 1 / 8; /* Forces structural box overlap onto the image layer */
    grid-row: 1;
    background-color: #2b4b7c; /* On-brand deep dark blue layout color */
    color: var(--white);
    padding: 60px 80px;
    z-index: 2;
    margin-left: 0; /* Ensures full bleeding to the left browser wall */
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.08);
}

/* --- Typography Mapping --- */
.engagement-content-card h1 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}

.engagement-content-card p {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    opacity: 0.9;
    margin-bottom: 20px;
}

.engagement-content-card p:nth-last-of-type(1) {
    margin-bottom: 40px; /* Generates breathing space before the action button */
}

/* --- Interactive Action Button State --- */
.btn-engagement-cta {
    display: inline-block;
    background-color: var(--teal-green);
    color: var(--white);
    border: 2px solid transparent;
    padding: 14px 40px;
    border-radius: 4px;
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 12px rgba(44, 165, 141, 0.15);
    transition: background-color var(--transition-speed), border-color var(--transition-speed), transform 0.1s ease;
}

.btn-engagement-cta:hover {
    background-color: #238571;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-engagement-cta:active {
    transform: scale(0.98);
}

/* --- Fluid Structural Responsive Breakpoints --- */
@media (max-width: 1200px) {
    .engagement-content-card {
        grid-column: 1 / 9; /* Widens text card slightly on smaller desktop layouts */
        padding: 50px 60px;
    }
    .engagement-content-card h1 {
        font-size: 36px;
    }
}

@media (max-width: 992px) {
    /* Collapses the grid engine entirely into full-width stacked blocks */
    .engagement-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .engagement-content-card {
        width: 100%;
        order: 1; /* Places the primary blue statement card text at the top */
        padding: 50px 24px;
        box-shadow: none;
    }

    .engagement-content-card h1 {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .engagement-media-pane {
        width: 100%;
        height: 450px; /* Constrains landscape viewport sizing fields on tablets and mobiles */
        order: 2; /* Drops image block below the text card seamlessly */
    }

    .btn-engagement-cta {
        width: 100%; /* Spans full horizontal block boundary for simple touch selection */
        padding: 14px 24px;
    }
}
/* ==========================================================================
   4I. Sticky Video Section Engine
   ========================================================================== */
.sticky-video-section {
    width: 100%;
    position: sticky;
    top: var(--header-height);
    z-index: 1;
    background-color: #3974D3;
}

.video-container {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 992px) {
    .video-container {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .video-container {
        max-width: 100%;
        height: 350px;
    }
}
/* ==========================================================================
   4I. Inner Page Hero Component Engine (Breadcrumb & Fluid Column Matrix)
   ========================================================================== */
.inner-hero-section {
    width: 100%;
    /* Recreates the deep blue to vibrant cyan-blue linear gradient trail across screenshots */
    background: linear-gradient(135deg, #224376 0%, #295ca3 50%, #2e73cc 100%);
    color: var(--white);
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

.inner-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

/* --- Left Column: Context Text Blocks --- */
.inner-hero-content {
    flex: 1.2;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Breadcrumb Row Engine --- */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.breadcrumb-nav a:hover {
    color: var(--white);
}

/* Renders the precise tiny golden/orange separator arrowhead chevron */
.breadcrumb-separator::after {
    content: '>';
    font-size: 11px;
    color: #fca311; /* Golden Accent Token */
    margin-left: 2px;
}

.breadcrumb-current {
    color: var(--white);
    opacity: 0.95;
    font-weight: 400;
}

/* --- Typography Configurations --- */
.inner-hero-content h1 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.inner-hero-content p {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* --- Right Column: Isometric Graphic Frame --- */
.inner-hero-graphic {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.inner-hero-graphic img {
    max-width: 380px; /* Restricts image explosion scaling on massive widescreen layouts */
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* --- Fluid Structural Media Breakpoints --- */
@media (max-width: 1024px) {
    .inner-hero-container {
        gap: 32px;
        padding: 0 32px;
    }
    .inner-hero-content h1 {
        font-size: 38px;
    }
    .inner-hero-graphic img {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .inner-hero-section {
        padding: 60px 0;
    }
    
    /* Collapses the flex line directly to an aligned vertical column stack */
    .inner-hero-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        padding: 0 24px;
    }
    
    .inner-hero-content {
        max-width: 100%;
        width: 100%;
    }
    
    .inner-hero-content h1 {
        font-size: 32px;
        margin-bottom: 18px;
    }
    
    .inner-hero-content p {
        font-size: 16px;
    }
    
    .inner-hero-graphic {
        width: 100%;
        justify-content: center; /* Centers layout artwork on tablet/mobile views */
    }
    
    .inner-hero-graphic img {
        max-width: 280px;
    }
}
/* ==========================================================================
   4J. Our Platform Component Grid Engine
   ========================================================================== */
.platform-features-section {
    padding: 80px 48px;
    background-color: var(--white);
    width: 100%;
}

.platform-features-container {
    max-width: 1440px; /* Allows spacious layout allocation across ultra-widescreens */
    margin: 0 auto;
    text-align: center;
}

.platform-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

/* Base Desktop 5-Column Grid Layout Configuration */
.platform-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}

.feature-metric-card {
    background-color: var(--white);
    border: 2px solid #589f84; /* Teal green border tone directly tracking your screenshot design */
    border-radius: 8px;
    padding: 36px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 160px;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

/* Hover accent feedback */
.feature-metric-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 25px rgba(35, 97, 203, 0.06);
}

.feature-icon-frame {
    width: 32px;
    height: 32px;
    color: var(--teal-green);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-frame svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.75px;
}

.feature-metric-card h3 {
    font-family: 'CoolveticaRg', sans-serif;
    color: #000000;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
}

/* --- Responsive Layout Breakpoints matching your design requirements --- */
@media (max-width: 1200px) {
    .platform-features-section {
        padding: 60px 32px;
    }
    
    /* Snaps to the clean 2-column pattern displayed in screenshot 2 */
    .platform-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .platform-features-section {
        padding: 50px 24px;
    }
    
    .platform-main-title {
        font-size: 32px;
        margin-bottom: 32px;
    }
    
    /* Collapses to safe, readable single full-width stacks on micro mobile viewports */
    .platform-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 400px;
        margin: 0 auto; /* Holds matrix cards centered perfectly on phone screens */
    }
    
    .feature-metric-card {
        padding: 30px 20px;
        min-height: auto;
    }
}
/* ==========================================================================
   4K. Centralize Offerings Component Engine (Asymmetric Layout Grid)
   ========================================================================== */
.centralize-offerings-section {
    padding: 80px 0 0 0; /* Base padding alignment allowing bottom image bleed */
    background-color: var(--white);
    width: 100%;
    overflow: hidden;
}

.centralize-offerings-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: flex-end; /* Locks the medical profile image cleanly to the container base floor */
    justify-content: space-between;
    gap: 40px;
}

/* --- Left Column Structural Rules --- */
.offerings-content-side {
    flex: 1.3;
    max-width: 760px;
    padding-bottom: 80px; /* Maintains balanced vertical padding breathing room */
}

.offerings-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.offerings-sub-intro {
    font-family: 'RedHatDisplay', sans-serif;
    color: #4a5568;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 40px;
}

/* --- The 2x2 Core Cards Matrix Matrix --- */
.offerings-cards-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.offering-matrix-card {
    background-color: var(--white);
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 220px;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.offering-matrix-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(28, 53, 94, 0.06);
}

/* Precise screenshot border color variables assignments */
.offering-matrix-card.border-teal {
    border-color: var(--teal-green);
}

.offering-matrix-card.border-blue {
    border-color: var(--primary-blue);
}

.offering-card-icon {
    width: 40px;
    height: 40px;
    color: var(--teal-green);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offering-card-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.offering-card-text {
    font-family: 'RedHatDisplay', sans-serif;
    color: #555555;
    font-size: 15px;
    line-height: 1.6;
}

/* Bold keyword emphasizes tracking the design mockup formatting exactly */
.offering-card-text strong {
    font-weight: 700;
    color: #000000;
}

/* --- Right Column Media Rules --- */
.offerings-media-side {
    flex: 0.7;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
}

.offerings-media-side img {
    max-width: 420px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   Fluid Structural Breakpoints Configuration
   ========================================================================== */
@media (max-width: 1024px) {
    .centralize-offerings-container {
        padding: 0 32px;
        gap: 24px;
    }
    .offerings-main-title {
        font-size: 36px;
    }
    .offering-matrix-card {
        padding: 30px 20px;
        min-height: 200px;
    }
    .offerings-media-side img {
        max-width: 320px;
    }
}

@media (max-width: 840px) {
    .centralize-offerings-section {
        padding: 60px 0; /* Normalizes layout spaces on smaller displays */
    }

    /* Collapses layout into a single column format stack block */
    .centralize-offerings-container {
        flex-direction: column;
        align-items: center;
        padding: 0 24px;
        gap: 48px;
    }
    
    .offerings-content-side {
        max-width: 100%;
        width: 100%;
        padding-bottom: 0;
    }
    
    .offerings-main-title {
        font-size: 32px;
        text-align: center;
    }
    
    .offerings-sub-intro {
        text-align: center;
        margin-bottom: 32px;
    }
    
    .offerings-media-side {
        width: 100%;
        justify-content: center;
        order: 2; /* Forces image portrait below the matrix card layout logic */
    }
    
    .offerings-media-side img {
        max-width: 340px;
    }
}

@media (max-width: 580px) {
    /* Transitions 2x2 block grid layout safely into single row lines on small smartphone screens */
    .offerings-cards-matrix {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 420px;
        margin: 0 auto;
    }
    
    .offering-matrix-card {
        min-height: auto;
        padding: 36px 24px;
    }
}
/* ==========================================================================
   4L. Backbone Component Engine (5-Second Crossfade Carousel Structure)
   ========================================================================== */
.backbone-section {
    padding: 100px 48px;
    background-color: #05142c; /* Precise midnight dark navy shade from screenshots */
    color: var(--white);
    width: 100%;
    overflow: hidden;
}

.backbone-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- Left Column: Checklist Engine --- */
.backbone-content-side {
    flex: 1.3;
    max-width: 740px;
}

.backbone-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--white);
    font-size: 45px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 36px;
    letter-spacing: 0.5px;
}

.backbone-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.backbone-checklist li {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding-left: 32px; /* Shifts text blocks cleanly away from line boxes */
}

/* Precise orange checked indicator bounding matrix boxes mimicking screenshot vectors */
.backbone-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border: 2px solid #fca311; /* Golden Orange Border Token */
    border-radius: 3px;
    background-color: transparent;
}

/* The actual checkbox internal indicator vector trail overlay */
.backbone-checklist li::after {
    content: '✓';
    position: absolute;
    left: 3px;
    top: -1px;
    font-size: 13px;
    font-weight: 900;
    color: #fca311;
}

/* --- Right Column: Layer Transitions Viewport Window --- */
.backbone-carousel-side {
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backbone-carousel-viewport {
    position: relative;
    width: 320px;
    height: 320px; /* Constrains the strict visual dimensions sandbox */
}

.backbone-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Alpha crossfade configurations */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.8s;
}

/* The Active Flag condition driving the layout engine visibility swaps */
.backbone-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.backbone-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Fluid Responsive Breakdown Media Rules --- */
@media (max-width: 992px) {
    .backbone-section {
        padding: 60px 24px;
    }
    
    /* Collapses split presentation seamlessly into centered vertical layout stacks */
    .backbone-container {
        flex-direction: column;
        gap: 48px;
    }
    
    .backbone-content-side {
        max-width: 100%;
        width: 100%;
    }
    
    .backbone-main-title {
        font-size: 32px;
        text-align: left;
        margin-bottom: 28px;
    }
    
    .backbone-carousel-side {
        width: 100%;
        justify-content: center;
    }
    
    .backbone-carousel-viewport {
        width: 240px;
        height: 240px; /* Trims structural boundary profiles on smaller device frames */
    }
}
/* ==========================================================================
   4M. Questions We Address Component Engine (Scroll Slide Animation)
   ========================================================================== */
.questions-addressed-section {
    padding: 80px 0 0 0; /* Base floor alignment allows portrait asset bottom bleed */
    background-color: var(--white);
    width: 100%;
    overflow: hidden;
}

.questions-section-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: flex-end; /* Snaps the portrait graphic asset flush to the bottom container line */
    justify-content: space-between;
    gap: 48px;
}

/* --- Left Column Structural Rules --- */
.questions-list-side {
    flex: 1.2;
    max-width: 680px;
    padding-bottom: 80px; /* Generates balanced text alignment spacing fields */
}

.questions-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 40px;
    letter-spacing: 0.5px;
}

.scroll-stack-matrix {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ==========================================================================
   Animation Initialization Configurations Matrix
   ========================================================================== */
.scroll-animate-box {
    background-color: var(--white);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    
    /* 1. Setup starting hidden position offset transforms */
    opacity: 0;
    transform: translateX(-60px); /* Pre-loaded position shifted slightly left */
    
    /* 2. Transition rules handling the reveal entry properties */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.6s ease-out,
                box-shadow var(--transition-speed) ease;
    will-change: transform, opacity;
}

/* Interactive standard user hovering feedback state */
.scroll-animate-box:hover {
    box-shadow: 0 8px 24px rgba(35, 97, 203, 0.06);
    transform: translateY(-2px) !important; /* Overrides current track metrics slightly */
}

/* 3. The operational active reveal class triggered by the Intersection Observer JavaScript loop */
.scroll-animate-box.is-revealed {
    opacity: 1;
    transform: translateX(0); /* Snaps cleanly back into normal flow alignments */
}

/* Alternating Border Mappings tracking your screenshots precisely */
.scroll-animate-box.border-blue {
    border-color: var(--primary-blue);
}

.scroll-animate-box.border-teal {
    border-color: var(--teal-green);
}

/* --- Box Internal Element Layouts --- */
.box-icon-container {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-icon-container.text-teal {
    color: var(--teal-green);
}

.box-icon-container svg {
    width: 100%;
    height: 100%;
}

.box-message-text {
    font-family: 'RedHatDisplay', sans-serif;
    color: #444444;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

/* --- Right Column Media Portrait Structural Rules --- */
.questions-media-side {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
}

.questions-media-side img {
    max-width: 460px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   Fluid Adaptive Viewport Breaking Matrix Updates
   ========================================================================== */
@media (max-width: 1024px) {
    .questions-section-container {
        padding: 0 32px;
        gap: 32px;
    }
    .questions-main-title {
        font-size: 36px;
    }
    .questions-media-side img {
        max-width: 360px;
    }
}

@media (max-width: 880px) {
    .questions-addressed-section {
        padding: 60px 0; /* Balanced vertical spaces on compressed displays */
    }

    /* Transition side-by-side presentation columns into fluid vertical stack layouts */
    .questions-section-container {
        flex-direction: column;
        align-items: center;
        padding: 0 24px;
        gap: 48px;
    }
    
    .questions-list-side {
        max-width: 100%;
        width: 100%;
        padding-bottom: 0;
    }
    
    .questions-main-title {
        font-size: 32px;
        text-align: center;
    }
    
    /* 4. Optional optimization override: Drop heavy off-screen offsets on smaller devices for simplified mobile processing performance */
    .scroll-animate-box {
        transform: translateX(-30px); 
        padding: 20px 24px;
    }
    
    .questions-media-side {
        width: 100%;
        justify-content: center;
        order: 2; /* Drops portrait illustration card asset safely down below scrollable lists blocks */
    }
    
    .questions-media-side img {
        max-width: 340px;
    }
}
/* ==========================================================================
   4M. Peace of Mind Bar Component
   ========================================================================== */
.peace-of-mind-banner {
    width: 100%;
    background-color: var(--teal-green); /* Links directly to your teal green brand variable */
    color: #000000; /* Dark contrast text precisely matching the snapshot statement layout */
    padding: 60px 24px;
    text-align: center;
}

.peace-banner-container {
    max-width: 1100px;
    margin: 0 auto;
}

.peace-of-mind-banner p {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* ==========================================================================
   4N. Expert Knowledge & Workflow Component (Dark Blue Checklist Section)
   ========================================================================== */
.expert-knowledge-section {
    padding: 100px 48px;
    background-color: #05142c; /* Matching your dark backbone navy backdrop precisely */
    color: var(--white);
    width: 100%;
}

.expert-knowledge-container {
    max-width: 1280px;
    margin: 0 auto;
    text-align: left;
}

.expert-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--white);
    font-size: 45px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
    max-width: 1020px;
}

.expert-sub-intro {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 1120px;
    margin-bottom: 48px;
}

.workflow-accent-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: #fca311; /* Clean orange accent token title header formatting */
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}

/* --- Workflow Custom Checklist Matrix --- */
.workflow-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1160px;
}

.workflow-checklist li {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding-left: 32px;
}

/* Reuses the unified vector custom checked architecture mapping from previous components */
.workflow-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border: 2px solid #fca311;
    border-radius: 3px;
    background-color: transparent;
}

.workflow-checklist li::after {
    content: '✓';
    position: absolute;
    left: 3px;
    top: -1px;
    font-size: 13px;
    font-weight: 900;
    color: #fca311;
}

/* ==========================================================================
   Fluid Structural Media Framework Overrides
   ========================================================================== */
@media (max-width: 992px) {
    .peace-of-mind-banner {
        padding: 45px 20px;
    }
    .peace-of-mind-banner p {
        font-size: 20px;
        line-height: 1.4;
    }

    .expert-knowledge-section {
        padding: 60px 24px;
    }
    .expert-main-title {
        font-size: 32px;
        line-height: 1.3;
    }
    .expert-sub-intro {
        font-size: 15px;
        margin-bottom: 36px;
    }
    .workflow-accent-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .workflow-checklist {
        gap: 14px;
    }
    .workflow-checklist li {
        font-size: 15px;
    }
}
/* ==========================================================================
   4O. Coaching Benefits Component (Side-by-Side Styled Boxes)
   ========================================================================== */
.coaching-benefits-section {
    padding: 80px 48px;
    background-color: var(--white);
    width: 100%;
}

.coaching-benefits-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: stretch;
}

.benefit-display-card {
    background-color: var(--white);
    border: 2px solid #589f84; /* Precision teal boundary lines tracking layout screenshot */
    border-radius: 12px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
}

.benefit-display-card h2 {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: 0.3px;
}

.benefit-display-card p {
    font-family: 'RedHatDisplay', sans-serif;
    color: #333333;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.benefit-display-card p:last-of-type {
    margin-bottom: 0;
}

.benefit-display-card .complementary-intro {
    font-weight: 700;
    margin-bottom: 24px;
}

/* --- Nested Checklist Core Custom Configuration --- */
.complementary-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.complementary-checklist li {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 15px;
    color: #222222;
    line-height: 1.5;
    position: relative;
    padding-left: 28px;
}

/* Reuses a faint blue inline structural tracking indicator list check */
.complementary-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--primary-blue);
    border-radius: 3px;
}

.complementary-checklist li::after {
    content: '✓';
    position: absolute;
    left: 2.5px;
    top: -2px;
    font-size: 11px;
    font-weight: 900;
    color: var(--primary-blue);
}

/* ==========================================================================
   4P. Conditions Directory Component (Asymmetric Matrix Layout Engine)
   ========================================================================== */
.conditions-directory-section {
    padding: 80px 0 0 0; /* Base floor alignment allows portrait asset bottom bleed */
    background-color: var(--white);
    width: 100%;
    overflow: hidden;
    border-bottom: 4px solid var(--primary-blue); /* Screenshot blueprint color trail base line anchor */
}

.directory-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}

.directory-content-side {
    flex: 1.2;
    padding-bottom: 80px;
}

.directory-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue);
    font-size: 45px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 48px;
    letter-spacing: 0.5px;
}

/* 2-Column Desktop Grid for Directory Entries */
.conditions-vector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 32px;
}

.condition-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.condition-icon {
    width: 24px;
    height: 24px;
    color: var(--teal-green);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.condition-icon svg {
    width: 100%;
    height: 100%;
}

.condition-item h3 {
    font-family: 'CoolveticaRg', sans-serif;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* --- Right Column Layout Photo Architecture --- */
.directory-media-side {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
}

.directory-media-side img {
    max-width: 480px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   Fluid Structural Media Breaks
   ========================================================================== */
@media (max-width: 1024px) {
    .coaching-benefits-section {
        padding: 60px 32px;
    }
    .coaching-benefits-container {
        grid-template-columns: 1fr; /* Collapses into single columns stack fields */
        gap: 24px;
    }
    .benefit-display-card {
        padding: 40px 30px;
    }

    .directory-container {
        padding: 0 32px;
        gap: 32px;
    }
    .directory-main-title {
        font-size: 36px;
        margin-bottom: 36px;
    }
    .conditions-vector-grid {
        column-gap: 24px;
        row-gap: 24px;
    }
    .directory-media-side img {
        max-width: 360px;
    }
}

@media (max-width: 768px) {
    .coaching-benefits-section {
        padding: 50px 24px;
    }
    .benefit-display-card h2 {
        font-size: 26px;
    }

    .conditions-directory-section {
        padding: 60px 0;
    }
    .directory-container {
        flex-direction: column;
        align-items: center;
        padding: 0 24px;
        gap: 48px;
    }
    .directory-content-side {
        max-width: 100%;
        width: 100%;
        padding-bottom: 0;
    }
    .directory-main-title {
        font-size: 32px;
        text-align: center;
    }
    .conditions-vector-grid {
        grid-template-columns: 1fr; /* Snaps list directory items to full width rows lines */
        row-gap: 20px;
    }
    .directory-media-side {
        width: 100%;
        justify-content: center;
        order: 2; /* Drops layout illustration below content listing metrics safely */
    }
    .directory-media-side img {
        max-width: 340px;
    }
}
/* ==========================================================================
   4Q. Assessment Roadmap Component Engine (Progressive Process Layout)
   ========================================================================== */
.assessment-roadmap-section {
    padding: 80px 0 0 0; /* Base floor alignment allows portrait asset bottom bleed */
    background-color: var(--white);
    width: 100%;
    overflow: hidden;
}

.roadmap-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: flex-end; /* Snaps portrait cutout flush to the container base line floor */
    justify-content: space-between;
    gap: 48px;
}

/* --- Left Column Structural Rules --- */
.roadmap-content-side {
    flex: 1.2;
    max-width: 720px;
    padding-bottom: 80px; /* Generates balanced text alignment spacing fields */
}

.roadmap-main-title {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--teal-green); /* Exact green section title token from screenshots */
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 40px;
    letter-spacing: 0.5px;
}

.roadmap-steps-stack {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Generates healthy breathing room between core numbered points */
}

.roadmap-step-block h3 {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--primary-blue); /* Exact prominent blue step header text mapping color */
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}

/* --- Sub-List 1: 2-Column Grid Setup --- */
.roadmap-sub-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    row-gap: 12px;
}

/* --- Sub-List 2: Single Column Stack Setup --- */
.roadmap-vertical-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Global list item target markers configurations layout styling */
.roadmap-sub-grid li,
.roadmap-vertical-list li {
    font-family: 'RedHatDisplay', sans-serif;
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    padding-left: 24px;
}

/* Renders custom targeted bullseye dot vectors precisely matching your screenshots */
.roadmap-sub-grid li::before,
.roadmap-vertical-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--teal-green);
    border-radius: 50%;
    background-color: transparent;
}

.roadmap-sub-grid li::after,
.roadmap-vertical-list li::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 7.5px;
    width: 5px;
    height: 5px;
    background-color: var(--teal-green);
    border-radius: 50%;
}

/* --- Right Column Media Portrait Structural Rules --- */
.roadmap-media-side {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
}

.roadmap-media-side img {
    max-width: 440px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   Fluid Adaptive Viewport Breaking Matrix Updates
   ========================================================================== */
@media (max-width: 1024px) {
    .roadmap-container {
        padding: 0 32px;
        gap: 32px;
    }
    .roadmap-main-title {
        font-size: 36px;
    }
    .roadmap-step-block h3 {
        font-size: 21px;
    }
    .roadmap-media-side img {
        max-width: 340px;
    }
}

@media (max-width: 840px) {
    .assessment-roadmap-section {
        padding: 60px 0; /* Normalizes layout spaces on smaller displays */
    }

    /* Transitions side-by-side presentation columns into fluid vertical stack layouts */
    .roadmap-container {
        flex-direction: column;
        align-items: center;
        padding: 0 24px;
        gap: 48px;
    }
    
    .roadmap-content-side {
        max-width: 100%;
        width: 100%;
        padding-bottom: 0;
    }
    
    .roadmap-main-title {
        font-size: 32px;
        text-align: center;
        margin-bottom: 32px;
    }
    
    .roadmap-media-side {
        width: 100%;
        justify-content: center;
        order: 2; /* Forces portrait cutout illustration safely down below content blocks steps */
    }
    
    .roadmap-media-side img {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    /* Transitions 2-column list matrix grid safely into single full width rows lines on smartphones */
    .roadmap-sub-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
}
/* ==========================================================================
   4S. Partner Navigation & Engagement Component (Clean-Room Migration)
   ========================================================================== */
.partner-section {
    width: 100%;
    padding: 100px 48px;
    background-color: var(--white);
    overflow: hidden;
}

.partner-section .container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    position: relative;
}

/* --- Left Column Overlapping Text Component Panel --- */
.partner-section .content-card {
    grid-column: 1 / 9;
    grid-row: 1;
    background-color: #2b4b7c; /* Synchronized with your global engagement deep layout color */
    color: var(--white);
    padding: 60px 80px;
    z-index: 2;
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.06);
}

.partner-section .heading {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.partner-section .description {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    opacity: 0.95;
}

.partner-section .description strong {
    font-weight: 700;
    color: var(--white);
}

/* --- Right Column Media Frame --- */
.partner-section .image-wrapper {
    grid-column: 7 / -1; /* Pure landscape distribution offset grid */
    grid-row: 1;
    width: 100%;
    height: 520px;
    overflow: hidden;
    z-index: 1;
    border-radius: 4px;
}

.partner-section .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Fluid Responsive Breakdown Context Matrix --- */
@media (max-width: 1200px) {
    .partner-section .content-card {
        grid-column: 1 / 9;
        padding: 50px 60px;
    }
    .partner-section .heading {
        font-size: 36px;
    }
}

@media (max-width: 992px) {
    .partner-section {
        padding: 60px 24px;
    }

    /* Collapses fluid layout tracks completely into linear column blocks */
    .partner-section .container {
        display: flex;
        flex-direction: column;
    }

    .partner-section .content-card {
        width: 100%;
        padding: 50px 24px;
        box-shadow: none;
    }

    .partner-section .heading {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .partner-section .image-wrapper {
        width: 100%;
        height: 400px;
        margin-top: 0; /* Bleeds seamlessly directly underneath the card panel blocks */
    }
}
/* ==========================================================================
   4S. Value Statement & Core Integration Offerings Block
   ========================================================================== */
.offerings-value-section {
    width: 100%;
    padding: 80px 48px;
    background-color: var(--white);
}

.offerings-value-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Top Quote Statement Configuration --- */
.value-quote-wrapper {
    text-align: center;
    margin-bottom: 60px;
    width: 100%;
}

.value-quote {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 24px;
    font-weight: 500;
    font-style: italic;
    color: #000000;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* --- Cards Container Matrix Row --- */
.value-cards-row {
    display: flex;
    gap: 32px;
    align-items: stretch;
    width: 100%;
}

.value-promo-card {
    flex: 1;
    border-radius: 12px;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

/* Exact on-brand tint codes referenced from early components blocks */
.promo-card-green {
    background-color: #d6f2e1; /* Soft Green Blend Tint */
}

.promo-card-blue {
    background-color: #e1eeff; /* Soft Blue Blend Tint */
}

/* --- Card Typography Maps --- */
.promo-heading {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 24px;
    letter-spacing: -0.2px;
}

.promo-heading.text-black {
    font-family: 'CoolveticaRg', sans-serif;
    color: #000000;
    font-weight: 500;
}

.promo-heading.text-blue {
    font-family: 'RedHatDisplay', sans-serif;
    color: #2361cb; /* Matches your --primary-blue token color scale */
    font-weight: 700;
}

.promo-description {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #000000;
}

/* ==========================================================================
   Fluid Structural Media Framework Overrides
   ========================================================================== */
@media (max-width: 1024px) {
    .offerings-value-section {
        padding: 60px 32px;
    }
    .value-quote {
        font-size: 20px;
    }
    .value-promo-card {
        padding: 40px 32px;
    }
    .promo-heading {
        font-size: 24px;
        margin-bottom: 18px;
    }
}

@media (max-width: 768px) {
    .offerings-value-section {
        padding: 50px 24px;
    }
    .value-quote-wrapper {
        margin-bottom: 40px;
    }
    .value-quote {
        font-size: 22px; /* Amplified scale factor matching mobile presentation layout */
        line-height: 1.35;
    }
    
    /* Collapses layout rows into clean full-width stacked matrix lines */
    .value-cards-row {
        flex-direction: column;
        gap: 24px;
    }
    
    .value-promo-card {
        padding: 36px 24px;
        width: 100%;
    }
}
/* ==========================================================================
   4R. Health Metric Highlight Banner Component
   ========================================================================== */
.metric-highlight-banner {
    width: 100%;
    background-color: #05142c; /* Exact midnight dark navy colorway from your screenshots */
    color: var(--white);
    padding: 80px 24px;
    text-align: center;
}

.metric-banner-container {
    max-width: 1160px;
    margin: 0 auto;
}

.metric-highlight-banner p {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.2px;
}

/* Precise orange number formatting with clean spacing layout metrics */
.metric-accent-number {
    color: #fca311; /* Exact golden orange brand variable token */
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

/* Recreates the solid orange horizontal line bounds running underneath the number ticker */
.metric-accent-number::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fca311;
}

/* Forces the secondary call-to-action statement sentence block onto its own row line on desktop viewports */
.metric-break-line {
    display: block;
    margin-top: 6px;
    font-weight: 600;
}

/* ==========================================================================
   Fluid Structural Media Breaks
   ========================================================================== */
@media (max-width: 992px) {
    .metric-highlight-banner {
        padding: 60px 20px;
    }
    
    .metric-highlight-banner p {
        font-size: 22px;
        line-height: 1.4;
    }
}

@media (max-width: 560px) {
    .metric-highlight-banner {
        padding: 50px 16px;
    }
    
    .metric-highlight-banner p {
        font-size: 18px;
    }
    
    .metric-break-line {
        margin-top: 12px;
    }
}
  .privacy-policy-section {
        padding: 100px 24px;
        background-color: var(--white);
        width: 100%;
    }
    .privacy-policy-container {
        max-width: 900px; /* Constrains line length for optimal document legibility */
        margin: 0 auto;
    }
    .privacy-header {
        margin-bottom: 48px;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 32px;
    }
    .privacy-header h1 {
        font-family: 'CoolveticaRg', sans-serif;
        color: var(--primary-blue);
        font-size: 42px;
        font-weight: 500;
        margin-bottom: 20px;
    }
    .privacy-header p {
        font-family: 'RedHatDisplay', sans-serif;
        font-size: 16px;
        line-height: 1.65;
        color: #4a5568;
    }
    .privacy-body-stack {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .privacy-clause-block h2 {
        font-family: 'CoolveticaRg', sans-serif;
        color: var(--primary-blue);
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 16px;
        letter-spacing: 0.3px;
    }
    .privacy-clause-block p {
        font-family: 'RedHatDisplay', sans-serif;
        font-size: 15px;
        line-height: 1.6;
        color: #333333;
        margin-bottom: 16px;
    }
    .privacy-clause-block p:last-of-type {
        margin-bottom: 0;
    }
    .privacy-bullet-list {
        margin: 0 0 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .privacy-bullet-list li {
        font-family: 'RedHatDisplay', sans-serif;
        font-size: 15px;
        line-height: 1.55;
        color: #333333;
    }
    .officer-contact-card {
        margin-top: 20px;
        padding: 24px;
        background-color: #f8fafc;
        border-left: 4px solid var(--primary-blue);
        border-radius: 0 8px 8px 0;
    }
    .officer-address {
        font-family: 'RedHatDisplay', sans-serif;
        font-style: normal;
        font-size: 15px;
        line-height: 1.6;
        color: #4a5568;
    }
    .privacy-email-link {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        transition: color var(--transition-speed) ease;
    }
    .privacy-email-link:hover {
        color: var(--teal-green);
    }
    
    /* Responsive Tuning */
    @media (max-width: 768px) {
        .privacy-policy-section { padding: 60px 16px; }
        .privacy-header h1 { font-size: 32px; }
        .privacy-clause-block h2 { font-size: 20px; }
    }
/* ==========================================================================
   6. How We Solve Them (3D Carousel)
   ========================================================================== */
.solve-section {
    padding: 100px 0;
    background-color: #f8fafd;
    overflow: hidden;
}

.centered-intro {
    font-family: 'CoolveticaRg', sans-serif;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    position: relative;
    z-index: 10;
}

.centered-intro h2 {
    font-size: 50px;
    color: var(--primary-blue);
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.solve-sub-intro {
    font-family: 'RedHatDisplay', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #4a5568;
    letter-spacing: 0.1px;
    line-height: 25px;
}

.solve-sub-intro strong {
    font-weight: bold;
    font-family: inherit;
}

.carousel-viewport {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 480px;
    position: relative;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.carousel-slide {
    position: absolute;
    width: 520px;
    height: 420px;
    top: 50%;
    left: 50%;
    margin-top: -210px;
    margin-left: -260px;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
                z-index 0.7s step-end;
}

.slide-inner {
    width: 100%;
    height: 100%;
    background-color: #315184;
    border-radius: 4px;
    padding: 48px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 20px 40px rgba(28, 53, 94, 0.15);
    transition: background-color 0.3s ease;
}

.carousel-slide.active .slide-inner {
    background-color: #2e4d7e;
}

.carousel-slide.position-left {
    transform: translateX(-360px) translateZ(-150px) rotateY(20deg) scale(0.9);
    opacity: 0.45;
    z-index: 2;
    pointer-events: none;
}

.carousel-slide.position-center {
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

.carousel-slide.position-right {
    transform: translateX(360px) translateZ(-150px) rotateY(-20deg) scale(0.9);
    opacity: 0.45;
    z-index: 2;
    pointer-events: none;
}

.slide-icon-box {
    margin-bottom: 24px;
    color: var(--teal-green);
}

.carousel-svg-icon {
    width: 40px;
    height: 40px;
}

.slide-inner h3 {
    font-family: 'CoolveticaRg', sans-serif;
    font-style: normal;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 18px;
    line-height: 33px;
    letter-spacing: 1;
}

.slide-inner p.default-desc {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 380px;
}

.expanded-content {
    font-family: 'CoolveticaRg', sans-serif;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                margin-top 0.4s ease;
}

.expanded-content p {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-arrow-action {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
}

.arrow-text {
    font-family: 'CoolveticaRg', sans-serif;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.carousel-slide.position-center:hover .expanded-content {
    max-height: 120px;
    opacity: 1;
    margin-top: 16px;
}

.carousel-slide.position-center:hover .arrow-text {
    max-width: 150px;
    opacity: 1;
}

.carousel-slide.position-center:hover .card-arrow {
    transform: translateX(4px);
}

.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.carousel-arrow-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #000000;
    cursor: pointer;
    padding: 8px 16px;
    transition: transform 0.2s, color 0.2s;
    margin: 0;
}

.carousel-arrow-btn:hover {
    color: var(--primary-blue);
    transform: scale(1.15);
}

/* ==========================================================================
   7. Stats & Metrics Block
   ========================================================================== */
.stats-bar.alternate-bg, .stats-bar.blue-background {
    background-color: var(--white);
    padding: 100px 0;
    width: 100%;
}

.stats-bar.blue-background .stats-bar-content {
    display: flex;
    justify-content: center;
}

.stats-bar.blue-background .stats-cards-wrapper {
    justify-content: center;
}

.stats-bar-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

.stats-cards-wrapper {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

.metric-box {
    font-family: 'RedHatDisplay', sans-serif !important;
    font-weight: 700;
    font-size: 55px;
    letter-spacing: 1px;
    line-height: 55px;
    background-color: var(--white);
    border: 1px solid #e2f2ff;
    border-radius: 12px;
    padding: 50px 40px;
    width: 260px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: 
        0 4px 14px rgba(28, 53, 94, 0.05),
        0 12px 36px rgba(35, 133, 203, 0.16); 
}

.metric-box:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(28, 53, 94, 0.07),
        0 16px 42px rgba(35, 133, 203, 0.22);
}

.metric-icon-container {
    color: var(--teal-green);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-svg {
    width: 48px;
    height: 48px;
}

.metric-number-wrapper {
    font-size: 56px;
    font-weight: 700;
    color: #000000;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.metric-label {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 1.4;
}

.stats-message-wrapper {
    padding-left: 20px;
}

.stats-main-text {
    font-size: 26px;
    font-weight: 600;
    color: #314d7f;
    line-height: 30px;
    letter-spacing: 0.1px;
    max-width: 540px;
}
/* ==========================================================================
   4S. Services Grid Component
   ========================================================================== */
.services-grid-section {
    padding: 100px 48px;
    background-color: var(--white);
    width: 100%;
    position: relative;
    z-index: 2;
}

.services-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two-column grid for desktop */
    column-gap: 80px;
    row-gap: 60px;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.service-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    color: var(--teal-green); /* Matching your primary brand accent */
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.service-title {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    line-height: 1.3;
}

.service-description {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 24px;
}

.service-link-arrow {
    color: #000000;
    transition: transform var(--transition-speed) ease, color var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.service-link-arrow:hover {
    color: var(--primary-blue);
    transform: translateX(5px);
}

/* --- Responsive Layout Breaks (As seen in Screenshot 2026-05-29 at 1.59.49 PM.png) --- */
@media (max-width: 992px) {
    .services-grid-section {
        padding: 60px 24px;
    }

    .services-container {
        grid-template-columns: 1fr; /* Stack vertically for mobile and tablet */
        row-gap: 48px;
    }

    .service-title {
        font-size: 22px;
    }
}
/* ==========================================================================
   8. How We've Helped Members
   ========================================================================== */
.helped-section {
    padding: 100px 0;
    background-color: var(--white);
    width: 100%;
}

.helped-section-title {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-blue);
    text-align: center;
    margin-bottom: 60px;
}

.story-asymmetric-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 240px;
    gap: 32px;
    grid-template-areas: 
        "largeleft topright"
        "largeleft bottomright";
}

.story-card.large-left   { grid-area: largeleft; height: 512px; }
.story-card.top-right    { grid-area: topright; }
.story-card.bottom-right { grid-area: bottomright; }

.story-card {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.story-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.story-overlay-card {
    font-family: 'RedHatDisplay', sans-serif;
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.96);
    padding: 32px;
    margin-left: 24px;
    width: 82%;
    max-width: 440px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    opacity: 0;
    transform: translateX(-40px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.story-card.top-right .story-overlay-card {
    max-width: 480px;
    width: 85%;
}

.story-overlay-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 12px;
}

.story-overlay-card p {
    font-size: 14px;
    color: #444444;
    line-height: 1.5;
    margin-bottom: 16px;
}

.story-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #333333;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.story-arrow-link:hover { color: var(--primary-blue); }
.story-btn-text { font-size: 13px; font-weight: 600; }

.story-card:hover .story-image-bg { transform: scale(1.06); }
.story-card:hover .story-overlay-card { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   9. We Connect People With Care (Odometer Rails)
   ========================================================================== */
.connect-section {
    padding: 120px 0;
    background-color: var(--white);
    width: 100%;
    overflow: hidden;
}

.connect-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.connect-text-column {
    font-family: 'RedHatDisplay', sans-serif;
    flex: 1;
    max-width: 580px;
}

.connect-text-column h2 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.2;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}

.connect-intro-p { font-size: 16px; color: #222222; line-height: 1.6; margin-bottom: 24px; }
.connect-body-p { font-size: 15px; color: #4a5568; line-height: 1.6; margin-bottom: 24px; }
.connect-result-box { margin-bottom: 32px; }
.connect-result-box .result-label { display: block; font-size: 15px; color: #4a5568; margin-bottom: 4px; }
.connect-result-box p { font-size: 16px; color: #111111; line-height: 1.4; }
.connect-btn { padding: 14px 32px; font-size: 15px; }

.connect-visual-column {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.main-image-wrapper {
    position: relative;
    width: 480px;
    height: 480px;
}

.hikers-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.overlapping-badges {
    position: absolute;
    bottom: -30px;
    left: -100px;
    display: flex;
    gap: 16px;
    z-index: 5;
}

.slide-up-badge {
    width: 200px;
    height: 130px;
    border-radius: 6px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.badge-blue { background-color: #3b75d6; }
.badge-teal { background-color: #36a380; }

.badge-layout {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    height: 52px;
    margin-bottom: 4px;
}

.odometer-container {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 60px;
    overflow: hidden;
    height: 52px;
    position: relative;
    display: inline-block;
}

.odometer-reel {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.odometer-reel span {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 60px;
    height: 52px;
    display: block;
    color: var(--white);
}

.badge-constant {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 60px;
    color: var(--white);
    display: inline-block;
    margin-left: 2px;
}

.badge-label {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
    opacity: 0.9;
    color: var(--white);
    white-space: nowrap;
}

/* ==========================================================================
   10. Global Utility Elements (Go To Top)
   ========================================================================== */
.go-to-top {
    position: fixed;
    bottom: 40px;
    right: 48px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #333333;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

.go-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.go-to-top:hover { color: var(--primary-blue); }
.go-to-top .arrow-up { transform: rotate(90deg); font-size: 14px; margin-bottom: 4px; }

/* ==========================================================================
   11. Unified Responsive Media Queries Context
   ========================================================================== */
@media (max-width: 1200px) {
    /* Fluid Adaptation for injected segments */
    .about-hero-section, .purpose-content-section {
        padding: 80px 32px;
    }
    .about-hero-section h1, .purpose-content-section h2 {
        font-size: 40px;
    }
}

@media (max-width: 1024px) {
    .stats-bar-container {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        padding: 0 32px;
    }
    .stats-cards-wrapper { justify-content: center; }
    .stats-message-wrapper { padding-left: 0; text-align: center; display: flex; justify-content: center; }
    .stats-main-text { max-width: 100%; }
    
    .connect-container { gap: 40px; padding: 0 32px; }
    .main-image-wrapper { width: 400px; height: 400px; }
    .overlapping-badges { left: -60px; }
    .slide-up-badge { width: 170px; height: 120px; padding: 16px; }
    .badge-layout, .odometer-container, .odometer-reel span, .badge-constant { height: 44px; line-height: 44px; font-size: 38px; }
}

@media (max-width: 992px) {
    .desktop-nav, .header-actions, .desktop-video { display: none; }
    .mobile-menu-toggle, .mobile-video { display: block; }
    .video-hero-content h1 { font-size: 32px; }
    .video-hero-content { align-items: flex-start; justify-content: flex-end; text-align: left; padding-bottom: 60px; width: 90%; }
    .video-hero-section { height: 550px; min-height: 550px; }

    .problem-sticky-container { grid-template-columns: 1fr; gap: 50px; padding: 0 24px; }
    .problem-left-pane { position: relative; top: 0; }
    .problem-title { font-size: 32px; }
    .problem-right-pane { gap: 40px; padding-bottom: 40px; }
    .problem-card { opacity: 1; transform: none; }
    .problem-timeline-line { display: none; }

    .story-asymmetric-grid { display: flex; flex-direction: column; gap: 24px; padding: 0 24px; }
    .story-card.large-left, .story-card.top-right, .story-card.bottom-right { height: 340px; }
    .story-overlay-card { opacity: 1 !important; transform: translateX(0) !important; margin: 0 auto; width: 90%; max-width: 100%; padding: 24px; }
    .story-card.top-right .story-overlay-card { width: 90%; }
}

@media (max-width: 920px) {
    .connect-container { flex-direction: column; align-items: stretch; gap: 60px; }
    .connect-text-column { max-width: 100%; }
    .connect-visual-column { justify-content: center; padding-bottom: 120px; }
    .main-image-wrapper { width: 100%; max-width: 500px; height: 420px; }
    .overlapping-badges { left: 5%; bottom: -80px; width: 90%; }
    .slide-up-badge { flex: 1; }
}

@media (max-width: 768px) {
    /* Responsive breakpoints for injected segments */
    .about-hero-section, .purpose-content-section {
        padding: 60px 24px;
    }
    .about-hero-section h1, .purpose-content-section h2 {
        font-size: 32px;
    }
    .about-hero-section p, .purpose-content-section p {
        font-size: 16px;
        margin-bottom: 32px;
    }
    .about-hero-section::after {
        width: 280px;
        height: 280px;
        right: -40px;
    }

    .solve-section { padding: 60px 0; overflow: visible; }
    .centered-intro { margin-bottom: 100px; }
    .carousel-viewport { height: auto; min-height: auto; perspective: none; position: relative; width: 100%; max-width: 100%; z-index: 1; margin-top: 30px; display: flex; justify-content: center; align-items: flex-start; }
    .carousel-container { position: relative; width: 100%; height: auto; overflow: visible; display: flex; justify-content: center; }
    .carousel-slide { position: relative !important; width: 90%; height: auto; margin: 0 !important; top: auto !important; left: auto !important; transform: none !important; opacity: 0 !important; pointer-events: none !important; display: none !important; transition: opacity 0.5s ease; text-align: left; }
    .carousel-slide.position-center { opacity: 1 !important; pointer-events: auto !important; display: block !important; }
    .slide-inner { padding: 32px 24px 8px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .slide-icon-box { display: block; margin-bottom: 24px; }
    .slide-inner h3 { display: block; margin-bottom: 18px; }
    .default-desc { display: block; }
    .carousel-controls { display: flex; margin-top: 0; }
    .expanded-content { max-height: none; opacity: 1; margin-top: 8px; }
    .arrow-text { max-width: none; opacity: 1; }
}

@media (max-width: 640px) {
    .stats-bar.alternate-bg, .stats-bar.blue-background { padding: 60px 0; }
    .stats-bar.blue-background .stats-bar-content { padding: 0 24px; }
    .stats-cards-wrapper { flex-direction: column; align-items: center; width: 100%; gap: 20px; }
    .metric-box, .stats-bar.blue-background .metric-box { width: 100%; max-width: 100%; padding: 40px 20px; }
    .stats-main-text { font-size: 20px; line-height: 1.5; text-align: center; }
}

@media (max-width: 480px) {
    .connect-text-column h2 { font-size: 32px; }
    .overlapping-badges { flex-direction: column; bottom: -150px; left: 0; width: 100%; gap: 12px; }
    .slide-up-badge { width: 100%; height: 100px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 20px; }
    .badge-num-clip { margin-bottom: 0; height: auto; }
    .connect-visual-column { padding-bottom: 180px; }
}

/* ==========================================================================
   12. Final CTA Section Styles
   ========================================================================== */
.final-cta-section {
    position: relative;
    width: 100%;
    background-color: var(--white);
    padding: 140px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-abstract-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 850px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

.cta-logo-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    opacity: 0.19;
}

.cta-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-container h2 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    color: var(--primary-blue);
    line-height: 55px;
    margin-bottom: 24px;
    letter-spacing: 1.7px;
    max-width: 820px;
}

.cta-container p {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 21px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 640px;
}

.btn-cta-teal {
    background-color: var(--teal-green);
    color: var(--white);
    padding: 14px 40px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(44, 165, 141, 0.15);
    transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}

.btn-cta-teal:hover {
    background-color: #238571;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(44, 165, 141, 0.25);
}

@media (max-width: 768px) {
    .final-cta-section { padding: 90px 0; }
    .cta-abstract-shape { max-width: 90%; }
    .cta-container h2 { font-size: 28px; line-height: 1.3; margin-bottom: 20px; padding: 0 12px; }
    .cta-container p { font-size: 15px; line-height: 1.5; margin-bottom: 32px; padding: 0 8px; }
    .btn-cta-teal { width: 100%; max-width: 280px; padding: 14px 24px; text-align: center; }
}

/* ==========================================================================
   13. Responsive Main Footer Section
   ========================================================================== */
.main-footer {
    width: 100%;
    background-color: #223e6b;
    color: var(--white);
    padding: 80px 0 0 0;
    position: relative;
    z-index: 100;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.brand-info-col {
    max-width: 360px;
}

.footer-logo {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.footer-logo img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.brand-description {
    font-family: 'RedHatDisplay', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.footer-col h3 {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 28px;
    color: var(--white);
    letter-spacing: 0.3px;
}

.footer-nav {
    font-family: 'RedHatDisplay', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav a {
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--white);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer-nav a:hover {
    color: var(--teal-green);
}

.office-col {
    max-width: 240px;
}

.address-text {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.phone-text {
    font-family: 'CoolveticaRg', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.phone-text a {
    font-family: 'CoolveticaRg', sans-serif;
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
}

.social-icon-row {
    display: flex;
    gap: 12px;
}

.social-circle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white);
    color: #223e6b;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    text-decoration: none;
}

.footer-icon-svg {
    width: 20px;
    height: 20px;
}

.social-circle-btn:hover {
    background-color: var(--teal-green);
    color: var(--white);
    transform: translateY(-2px);
}

.footer-bottom-bar {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 80px;
    padding: 30px 0;
}

.bottom-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

.footer-bottom-bar p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   14. Adaptive Mobile Framework Adjustments
   ========================================================================== */
@media (max-width: 992px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        padding: 0 32px;
    }
    .brand-info-col, .office-col { max-width: 100%; }
    .footer-col h3 { margin-bottom: 18px; }
    .footer-bottom-bar { margin-top: 60px; }
    .bottom-container { padding: 0 32px; }
}

@media (max-width: 480px) {
    .main-footer { padding: 60px 0 0 0; }
    .footer-container { gap: 40px; padding: 0 24px; }
    .bottom-container { padding: 0 24px; }
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-logo {
    max-width: 300px;
    height: auto;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}