body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

:root {
    /* Tailwind dynamic color bases (R G B space-separated format) */
    --color-white: 255 255 255;
    --color-white-1: 245 245 245;
    /* #f5f5f5 */
    --color-white-2: 176 176 176;
    /* #b0b0b0 */
    --color-dark: 13 13 13;
    /* #0D0D0D */
    --color-dark-2: 20 20 20;
    /* #141414 */
    --color-dark-3: 26 26 26;
    /* #1a1a1a */

    /* Global Theme Variables */
    --color-bg-primary: #0D0D0D;
    --color-bg-secondary: #141414;
    --color-bg-tertiary: #1a1a1a;

    --color-nav-bg: rgba(13, 13, 13, 0.96);
    --color-nav-text: #ffffff;
    --color-footer-bg: #0D0D0D;

    --bg-primary: #0D0D0D;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-primary: rgba(255, 255, 255, 0.08);

    /* Existing variables */
    --teal: #138C89;
    --teal-dark: #0d6b68;
    --teal-light: #1aada9;
    --gold: #C8A307;
    --gold-light: #d4af22;
    --dark: #0D0D0D;
    --dark-2: #141414;
    --font-head: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
}

html.light-mode {
    /* Swapped Tailwind bases for light mode */
    --color-white: 13 13 13;
    /* White becomes Dark */
    --color-white-1: 20 20 20;
    /* White-1 becomes Dark-2 border logic */
    --color-white-2: 74 74 74;
    /* White-2 becomes a darker grey */
    --color-dark: 255 255 255;
    /* Dark becomes White */
    --color-dark-2: 245 245 245;
    /* Dark-2 becomes #f5f5f5 */
    --color-dark-3: 234 234 234;
    /* #eaeaea */

    /* Swapped Theme Variables */
    --color-bg-primary: #f6f7f8;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #ececec;

    --color-nav-bg: rgba(243, 243, 243, 0.96);
    --color-nav-text: #0D0D0D;
    --color-footer-bg: #e9e9e9;

    --bg-primary: #f6f7f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ececec;

    --color-text-primary: #0D0D0D;
    --color-text-secondary: #4A4A4A;
    --color-text-muted: #6a6a6a;

    --text-primary: #0D0D0D;
    --text-secondary: #4A4A4A;
    --border-primary: rgba(0, 0, 0, 0.08);
    --teal-light: #666;

}

/* Map Existing Custom/Tailwind Classes to Variables explicitly as requested */
.bg-dark {
    background-color: var(--color-bg-primary) !important;
}

.bg-dark-2 {
    background-color: var(--color-bg-secondary) !important;
}

.bg-dark-3 {
    background-color: var(--color-bg-tertiary) !important;
}

.text-white {
    color: var(--color-text-primary) !important;
}

.text-white-2 {
    color: var(--color-text-secondary) !important;
}

.text-white\/60 {
    color: var(--color-text-secondary) !important;
}

.text-white\/40,
.text-white\/35,
.text-white\/30,
.text-white\/20 {
    color: var(--color-text-muted) !important;
}

/* Components Variable Mappings */
nav {
    background-color: var(--color-nav-bg) !important;
    color: var(--color-nav-text) !important;
}

footer.bg-dark {
    background-color: var(--color-footer-bg) !important;
}

html.light-mode {
    /* Swapped Tailwind bases for light mode */
    --color-white: 13 13 13;
    /* White becomes Dark */
    --color-white-1: 20 20 20;
    /* White-1 becomes Dark-2 border logic */
    --color-white-2: 74 74 74;
    /* White-2 becomes a darker grey */
    --color-dark: 255 255 255;
    /* Dark becomes White */
    --color-dark-2: 245 245 245;
    /* Dark-2 becomes #f5f5f5 */
    --color-dark-3: 234 234 234;
    /* #eaeaea */

    /* Swapped Theme Variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eaeaea;
    --text-primary: #0D0D0D;
    --text-secondary: #4A4A4A;
    --border-primary: rgba(0, 0, 0, 0.08);
}

/* Map Existing Custom/Tailwind Classes to Variables explicitly as requested */
.bg-dark {
    background-color: var(--bg-primary) !important;
}

.bg-dark-2 {
    background-color: var(--bg-secondary) !important;
}

.bg-dark-3 {
    background-color: var(--bg-tertiary) !important;
}

.text-white {
    color: var(--text-primary) !important;
}

.text-white-2 {
    color: var(--text-secondary) !important;
}

.image-white {
    filter: brightness(0) invert(1) !important;
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    overflow-x: hidden;
    position: relative;
}


/* .bg-shape {
    height: -webkit-fill-available;
    width: 100vw;
    z-index: 1;

    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
} */






.bg-shape {
    height: -webkit-fill-available;
    width: 100vw;
    z-index: 1;

    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;

    animation: networkPulse 14s ease-in-out infinite,
        networkDrift 60s linear infinite;

    will-change: opacity, background-position, filter;

    /* Override inline background */
    background-image: url("../images/others/bg-shape-light.svg") !important;
}

html.light-mode .bg-shape {
    background-image: url("../images/others/bg-shape-dark.svg") !important;
}


/* subtle node glow */
@keyframes networkPulse {

    0% {
        opacity: 0.45;
        filter: brightness(0.95);
    }

    50% {
        opacity: 0.60;
        filter: brightness(1.1);
    }

    100% {
        opacity: 0.45;
        filter: brightness(0.95);
    }

}


/* extremely slow network movement */
@keyframes networkDrift {

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

    50% {
        background-position: 2% 3%;
    }

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

}







/* ─── Pulse animation (hero eyebrow dot) ─────────────────────── */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.75)
    }
}

.e-dot {
    animation: pulse 2.2s infinite
}

/* ─── Bar chart transition ────────────────────────────────────── */
.bar-fill {
    width: 0%;
}

/* ─── Scroll fade-up ──────────────────────────────────────────── */
.fu {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease
}

.js-ready .fu {
    opacity: 0;
    transform: translateY(20px)
}

.js-ready .fu.vis {
    opacity: 1;
    transform: translateY(0)
}

/* ─── Audit option selected state ────────────────────────────── */
.a-opt.sel {
    border-color: var(--teal) !important;
    background: rgba(19, 140, 137, .12) !important;
    color: #fff !important
}

.a-opt.sel .o-radio,
.a-opt:hover .o-radio {
    border-color: var(--teal) !important;
    background: var(--teal) !important
}

/* ─── Fluid typography (clamp) ───────────────────────────────── */
.hero-h1 {
    font-size: clamp(2.2rem, 5.5vw, 4.8rem)
}

.hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.15rem)
}

.h2-tw {
    font-size: clamp(1.8rem, 3.5vw, 3rem)
}

.h2-txl {
    font-size: clamp(2rem, 4vw, 3.5rem)
}

.case-hl {
    font-size: clamp(1.6rem, 3vw, 2.5rem)
}

.cta-h2 {
    font-size: clamp(2.5rem, 5vw, 3.8rem)
}

.audit-h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.8rem)
}

.founders-h2 {
    font-size: clamp(1.8rem, 3.5vw, 3rem)
}

/* Navbar */
.js-nav-active {
    color: #14b8a6;
    border-bottom: 1px solid #14b8a6;
}

.js-nav-inactive {
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid transparent;
}

/* ─── Mobile nav drawer ───────────────────────────────────────── */
#mobileMenu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--color-nav-bg) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(19, 140, 137, .2);
    z-index: 99;
    padding: 1.25rem 5% 1.5rem;
    flex-direction: column;
    gap: .75rem;
}

#mobileMenu.open {
    display: flex
}

#mobileMenu a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border-primary);
    transition: color .2s;
}

#mobileMenu a:last-child {
    border-bottom: none
}

#mobileMenu a:hover {
    color: #C8A307
}

#mobileMenu .mobile-cta {
    background: var(--teal);
    color: #fff !important;
    padding: .65rem 1.25rem !important;
    border-radius: 4px;
    text-align: center;
    border-bottom: none !important;
    margin-top: .5rem;
    font-weight: 600 !important;
}

#mobileMenu .mobile-cta:hover {
    background: var(--teal-light)
}

/* ─── Hamburger button lines ──────────────────────────────────── */
.burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}

#burgerBtn.open .burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

#burgerBtn.open .burger-line:nth-child(2) {
    opacity: 0
}

#burgerBtn.open .burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

/* ─── Responsive grid overrides ──────────────────────────────── */
@media (max-width: 900px) {

    .dc-grid,
    .eng-grid,
    .diff-grid,
    .case-card-grid,
    .founders-grid {
        grid-template-columns: 1fr !important
    }

    .case-results {
        margin-top: 1.5rem
    }

    .fg-grid {
        grid-template-columns: 1fr 1fr !important
    }
}

@media (max-width: 640px) {
    .fg-grid {
        grid-template-columns: 1fr !important
    }

    .flip-chart-row {
        grid-template-columns: 1fr !important
    }

    .flip-chart-label {
        text-align: left !important;
        margin-bottom: .5rem
    }

    .hero-ctas {
        flex-direction: column
    }

    .intel-flow {
        flex-direction: column;
        align-items: stretch
    }

    .intel-connector {
        transform: rotate(90deg);
        align-self: center
    }
}

#auditForm input:focus {
    border-color: var(--green);
}

/* Text */
.text-justify {
    text-align: justify !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--white);
}

::-webkit-scrollbar-thumb {
    background: var(--green);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}

/* Selection */
::selection {
    color: var(--white);
    background: var(--green);
}

/* Placeholder */
::-webkit-input-placeholder {
    color: inherit;
}

::-moz-placeholder {
    color: inherit;
}

:-ms-input-placeholder {
    color: inherit;
}

:-moz-placeholder {
    color: inherit;
}

/* Contact Forms Submission */
.form-submit-container .loader {
    display: none;
    width: 40px;
    height: 40px;
    margin: 10px auto;
}

.form-submit-container .loader .spinner {
    width: 100%;
    height: 100%;
    border: 4px solid rgba(204, 204, 204, 0.3);
    border-top: 4px solid var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-sizing: border-box;
}

.form-submit-container .responseMessage {
    display: none;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

.form-submit-container .responseMessage.success {
    color: #28a745;
    background-color: #e6ffed;
}

.form-submit-container .responseMessage.error {
    color: #dc3545;
    background-color: #ffebee;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Hero shapes animations */
@keyframes heroFloat1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-20px, 15px, 0) scale(1.05);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes heroFloat2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(15px, -10px, 0) scale(1.04);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.hero-glow-1 {
    animation: heroFloat1 30s ease-in-out infinite;
}

.hero-glow-2 {
    animation: heroFloat2 30s ease-in-out infinite;
}

/* Footer */
footer {
    z-index: 100;
    background: #0D0D0D;
}

@keyframes networkFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

footer svg {
    animation: networkFloat 12s ease-in-out infinite;
}

/* =========================================================
LIGHT MODE SECTION BACKGROUND STRUCTURE
Only applies when html.light-mode is active
Dark mode remains unchanged
========================================================= */

html.light-mode .section-hero {
    background: #ffffff !important;
}

/* html.light-mode .section-disconnect {
    background: #1E1E1E !important;
} */

/* html.light-mode .section-flip {
    background: #F6F6F3 !important;
} */

html.light-mode .section-intelligence {
    background: #138C89 !important;
}

/* html.light-mode .section-diff {
    background: #ffffff !important;
} */

/* html.light-mode .section-method {
    background: #F6F6F3 !important;
} */

/* html.light-mode .section-case {
    background: #ffffff !important;
} */

/* html.light-mode .section-beliefs {
    background: #F6F6F3 !important;
} */

html.light-mode .section-founders {
    background: #138C89 !important;
}

/* html.light-mode .section-insights {
    background: #ffffff !important;
} */

/* html.light-mode .section-method {
    background: #F6F6F3 !important;
} */

/* html.light-mode .section-security {
    background: #1E1E1E !important;
} */

/* html.light-mode #decision-readiness-check {
    background: #F6F6F3 !important;
} */

html.light-mode footer {
    background: #1E1E1E !important;
}



/* =====================================================
LIGHT MODE — PERFORMANCE DISCONNECT SECTION
===================================================== */
.section-disconnect h2,
.section-disconnect p,
.section-disconnect li {
    color: inherit;
}

.disconnect-card.marketing {
    background: #ffffff !important;
    color: #111 !important;
}

.disconnect-card.marketing p,
.disconnect-card.marketing li {
    color: rgba(0, 0, 0, 0.7) !important;
}

.disconnect-card.marketing li {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.disconnect-card.marketing h3 {
    color: #000 !important;
}

.disconnect-card.sales {
    background: #1AADA9 !important;
    color: #ffffff !important;
}

.disconnect-card.sales p,
.disconnect-card.sales li {
    color: rgba(255, 255, 255, 0.85) !important;
}

.disconnect-card.sales li {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.disconnect-card.sales h3 {
    color: #ffffff !important;
}

.disconnect-card.operations {
    background: #C8A307 !important;
    color: #111 !important;
}

.disconnect-card.operations p,
.disconnect-card.operations li {
    color: rgba(0, 0, 0, 0.8) !important;
}

.disconnect-card.operations li {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.disconnect-card.operations h3 {
    color: #111 !important;
}

/* html.light-mode .section-disconnect {
    background: #ffffff !important;
} */

html.light-mode .section-disconnect h2 {
    color: #000 !important;
}

html.light-mode .section-disconnect>div>p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* html:not(.light-mode) .section-disconnect {
    background: #0b0f14 !important;
} */

html:not(.light-mode) .section-disconnect h2 {
    color: #ffffff !important;
}

html:not(.light-mode) .section-disconnect>div>p {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* html.light-mode .section-disconnect {
    background: #ffffff !important;
}

html.light-mode .section-disconnect h2,
html.light-mode .section-disconnect h3,
html.light-mode .section-disconnect p,
html.light-mode .section-disconnect li {
    color: #000000 !important;
}

html.light-mode .section-disconnect p {
    color: rgba(0, 0, 0, 0.70) !important;
}

html.light-mode .section-disconnect .dc-grid p {
    color: rgba(0, 0, 0, 0.40) !important;
}

html.light-mode .section-disconnect li {
    color: rgba(0, 0, 0, 0.70) !important;
}

html.light-mode .section-disconnect li {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.disconnect-card p {
    color: rgba(0, 0, 0, 0.70) !important;
}

.disconnect-card.marketing {
    background: rgba(255, 255, 255, 1) !important;
}

.disconnect-card.sales {
    background: rgba(26, 173, 169, 1) !important;
}

.disconnect-card.operations {
    background: rgba(200, 163, 7, 1) !important;
}

html.light-mode .disconnect-card.marketing {
    background: rgba(255, 255, 255, 1) !important;
}

html.light-mode .disconnect-card.sales {
    background: rgba(26, 173, 169, 1) !important;
}

html.light-mode .disconnect-card.operations {
    background: rgba(200, 163, 7, 1) !important;
}

html.light-mode .disconnect-card.marketing h3 {
    color: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    padding-bottom: 10px;
}

html.light-mode .disconnect-card.sales h3 {
    color: #138C89 !important;
    border-bottom: 1px solid rgba(26, 173, 169, 1);
    padding-bottom: 10px;
}

html.light-mode .disconnect-card.operations h3 {
    color: #C8A307 !important;
    border-bottom: 1px solid rgba(200, 163, 7, 1);
    padding-bottom: 10px;
} */

/* ============================================
LIGHT MODE — FLIP THE RATIO SECTION
============================================ */

/* html.light-mode .section-flip {
    background: #F6F6F3 !important;
} */

.section-flip .flip-bars-trigger {
    background: #1a1a1a !important;
    padding: 3em;
    border-radius: 8px;
}

html.light-mode .section-flip .flip-bars-trigger {
    background: #eaeaea !important;
}

html.light-mode .section-flip .flip-chart-label {
    color: #3d3d3d !important;
}

html.light-mode .section-flip .bar-fill.bg-white\/\[0\.14\] {
    background: #c9c6c1 !important;
    color: #666 !important;
}

html.light-mode .section-flip .bar-fill.bg-teal {
    background: #1e8c85 !important;
    color: #ffffff !important;
}

html.light-mode .section-flip .bar-fill.bg-gold {
    background: #c8a307 !important;
    color: #000 !important;
}


/* ============================================
LIGHT MODE — INTELLIGENCE LAYER SECTION
============================================ */

html.light-mode .section-intelligence {
    background: #138C89 !important;
}

html.light-mode .section-intelligence h2 {
    color: #ffffff !important;
}

html.light-mode .section-intelligence p {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.light-mode .section-intelligence .intel-flow>.intelligence-card-div {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.section-intelligence .intel-flow>.intelligence-card-div.intelligence-card-div-highlight {
    background: rgba(200, 163, 7, 0.15) !important;
    border: 2px solid #C8A307 !important;
}

html.light-mode .section-intelligence .intel-flow>.intelligence-card-div.intelligence-card-div-highlight {
    background: rgba(200, 163, 7, 0.15) !important;
    border: 2px solid #C8A307 !important;
}

html.light-mode .section-intelligence .intel-flow>.intelligence-card-div.intelligence-card-div-highlight div.font-head {
    color: #C8A307 !important;
}

html.light-mode .section-intelligence .intel-flow>.intelligence-card-div div {
    color: rgba(255, 255, 255, 0.65) !important;
}

html.light-mode .section-intelligence .border-gold {
    border-color: #C8A307 !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

html.light-mode .section-intelligence h4,
html.light-mode .section-intelligence .font-head {
    color: #ffffff !important;
}

html.light-mode .section-intelligence svg line {
    stroke: #C8A307 !important;
}

html.light-mode .section-intelligence svg polygon {
    fill: #C8A307 !important;
}

html.light-mode .section-intelligence a {
    background: #ffffff !important;
    color: #0D0D0D !important;
    border: none !important;
}


/* ============================================
LIGHT MODE — WHY SQUADERA IS DIFFERENT
============================================ */

/* html.light-mode .section-diff {
    background: #ffffff !important;
} */

html.light-mode .section-diff h2 {
    color: #1A1A1A !important;
}

html.light-mode .section-diff p {
    color: #5f5f5f !important;
}

html.light-mode .section-diff .diff-grid {
    background: #F6F6F3 !important;
    border: 1px solid #e5e5e5 !important;
}

html.light-mode .section-diff .diff-grid>div:first-child {
    background: #F6F6F3 !important;
}

html.light-mode .section-diff .diff-grid>div:last-child {
    background: #ffffff !important;
    border-left: 2px solid #138C89 !important;
}

html.light-mode .section-diff .diff-grid p {
    color: #6a6a6a !important;
}

html.light-mode .section-diff .diff-grid div {
    color: #5f5f5f !important;
}

html.light-mode .section-diff .diff-grid span {
    background: #f6f6f3 !important;
    border: 1px solid #E2E2DC;
    color: #7a7a72 !important;
}

html.light-mode .section-diff .bg-teal.check-icon {
    background: #138C89 !important;
    color: #ffffff !important;
}

.section-diff .section-diff-left-box {
    background: #1a1a1a !important;
}

.section-diff .section-diff-right-box {
    background: rgba(19, 140, 137, 0.7) !important;
}

/* ============================================
LIGHT MODE — SECTION METHOD
============================================ */
.section-method .section-method-comparison {
    background: #1a1a1a !important;
}

html.light-mode .section-method .section-method-comparison {
    background: #eaeaea !important;
}

/* ============================================
LIGHT MODE — SECURITY SECTION
============================================ */

/* html.light-mode .section-security {
    background: #F6F6F3 !important;
} */

html.light-mode .section-security h2 {
    color: #1A1A1A !important;
}

html.light-mode .section-security>div>p {
    color: #5F5F5F !important;
}

html.light-mode .section-security .grid>div {
    background: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
}

html.light-mode .section-security h3 {
    color: #1A1A1A !important;
}

html.light-mode .section-security .grid p {
    color: #6A6A6A !important;
}

html.light-mode .section-security .absolute {
    opacity: 0.04 !important;
}


/* ============================================
LIGHT MODE — CASE STUDY SECTION
============================================ */

/* html.light-mode .section-case {
    background: #ffffff !important;
} */

html.light-mode .section-case .case-card-grid {
    background: #ffffff !important;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.06) !important;
}

.section-case .case-card-grid {
    background: #1a1a1a !important;
}

html.light-mode .section-case h2 {
    color: #1A1A1A !important;
}

html.light-mode .section-case p {
    color: #5F5F5F !important;
}

html.light-mode .section-case .text-gold {
    color: #c8a307 !important;
}

html.light-mode .section-case .text-white\/\[0\.38\] {
    color: #6A6A6A !important;
}

html.light-mode .section-case .case-results {
    background: #ffffff !important;
    border: 1px solid #E5E5E5 !important;
}

html.light-mode .section-case .case-results .text-gold {
    color: #c8a307 !important;
}

html.light-mode .section-case .case-results .h-px {
    background: #E5E5E5 !important;
}

/* ============================================
LIGHT MODE — CASE STUDY PAGE
Scoped to main.main-case-study
============================================ */

html.light-mode main.main-case-study {
    background: #ffffff;
    color: #1A1A1A;
}

html.light-mode main.main-case-study .bg-dark,
html.light-mode main.main-case-study .bg-gradient-to-br {
    background: #f8f8f8 !important;
}

html.light-mode main.main-case-study h1,
html.light-mode main.main-case-study h2,
html.light-mode main.main-case-study h3 {
    color: #1A1A1A;
}

html.light-mode main.main-case-study p {
    color: #5F5F5F;
}

html.light-mode main.main-case-study .text-white {
    color: #1A1A1A;
}

html.light-mode main.main-case-study .text-white\/80 {
    color: #fff;
}

html.light-mode main.main-case-study .text-white\/60 {
    color: #fff;
}

html.light-mode main.main-case-study .text-white\/50 {
    color: #7A7A7A;
}

html.light-mode main.main-case-study .text-white\/40 {
    color: #8A8A8A;
}

html.light-mode main.main-case-study .the-transformation-img,
html.light-mode main.main-case-study .strategic-outcome-img {
    background: #eaeaea !important;
    position: relative;
    z-index: 100;
}

html.light-mode main.main-case-study .bg-dark-3 {
    background: #ffffff;
    border: 1px solid #E5E5E5;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

html.light-mode main.main-case-study .text-white-2 {
    color: #5F5F5F;
}

html.light-mode main.main-case-study .text-grey-dark {
    color: #6A6A6A;
}

html.light-mode main.main-case-study .text-dark {
    color: #1A1A1A;
}

html.light-mode main.main-case-study .text-dark-3 {
    color: #5F5F5F;
}

html.light-mode main.main-case-study .text-gold {
    color: #c8a307;
}

html.light-mode main.main-case-study .text-teal {
    color: #138C89;
}

html.light-mode main.main-case-study .text-teal-light {
    color: #138C89;
}

html.light-mode main.main-case-study .bg-teal\/10 {
    background: #F3FAF9;
    border: 1px solid #D6ECEA;
}

html.light-mode main.main-case-study .border-teal\/30 {
    border-color: #D6ECEA;
}

html.light-mode main.main-case-study .bg-white {
    background: #ffffff;
    border: 1px solid #E5E5E5;
}

html.light-mode main.main-case-study .bg-white-1 {
    background: #ffffff;
}

html.light-mode main.main-case-study .bg-teal\/10 {
    background: #F3FAF9;
}


html.light-mode main.main-case-study .section-cta,
html.light-mode main.main-case-study .border-t {
    border-color: #E5E5E5;
}

html.light-mode main.main-case-study .bg-gold {
    background: #c8a307;
    color: #1A1A1A;
}

html.light-mode main.main-case-study .bg-gold:hover {
    background: #d6b21b;
}


/* ============================================
LIGHT MODE — BELIEFS SECTION
============================================ */

/* html.light-mode .section-beliefs {
    background: #F6F6F3 !important;
} */

html.light-mode .section-beliefs h2 {
    color: #1A1A1A !important;
}

html.light-mode .section-beliefs .grid>div {
    background: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
}

html.light-mode .section-beliefs p {
    color: #5F5F5F !important;
}

html.light-mode .section-beliefs span {
    color: #ffffff !important;
    background: #138C89 !important;
    padding: 4px;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.how-we-think-cards div {
    background: #1A1A1A !important;
}

/* ============================================
LIGHT MODE — FOUNDERS SECTION
============================================ */

html.light-mode .section-founders {
    background: #138C89 !important;
}

html.light-mode .section-founders h2 {
    color: #ffffff !important;
}

html.light-mode .section-founders .text-gold {
    color: #C8A307 !important;
}

html.light-mode .section-founders .bg-black\/20 {
    background: rgba(0, 0, 0, 0.15) !important;
}

html.light-mode .section-founders .founders-grid>div {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

html.light-mode .section-founders .founders-dot-seprator {
    background: rgba(255, 255, 255, 0.2) !important;
}

html.light-mode .section-founders p {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.light-mode .section-founders .text-white\/\[0\.42\] {
    color: rgba(255, 255, 255, 0.65) !important;
}

html.light-mode .section-founders span.span-desc {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}


/* ============================================
LIGHT MODE — INSIGHTS SECTION
============================================ */

/* html.light-mode .section-insights {
    background: #FFFFFF !important;
} */

html.light-mode .section-insights h2 {
    color: #1A1A1A !important;
}

html.light-mode .section-insights>div>p {
    color: #5F5F5F !important;
}

html.light-mode .section-insights article {
    background: #ffffff !important;
    border: 1px solid #E5E5E5 !important;
}

.section-insights article {
    background: #1a1a1a !important;
}

html.light-mode .section-insights article:hover {
    border-color: #138C89 !important;
    box-shadow: 0 8px 32px rgba(19, 140, 137, 0.09) !important;
    transition: all 0.5s ease;
}

html.light-mode .section-insights article p:first-child {
    color: #138C89 !important;
}

html.light-mode .section-insights h3 {
    color: #1A1A1A !important;
}

html.light-mode .section-insights article p {
    color: #6A6A6A !important;
}

html.light-mode .section-insights a {
    color: #138C89 !important;
    border-color: #138C89 !important;
}

html.light-mode .main-insights a.insights-gtm-audit-btn {
    color: #fff !important;
}

html.light-mode .main-insights a.insights-linkedin-share-btn {
    color: #0077B5;
    border: 1px solid #0077B5;
    background: #fff;
    transition: all 0.3s ease-in;
}

html.light-mode .main-insights a.insights-linkedin-share-btn:hover {
    color: #fff;
    background: #0077B5;
}


/* ============================================
LIGHT MODE — CTA BAND
============================================ */

html.light-mode .section-cta-band {
    background: #C8A307 !important;
}

html.light-mode .section-cta-band .cta-h2 {
    color: #1A1A1A !important;
}

html.light-mode .section-cta-band p {
    color: #3A3A3A !important;
}

html.light-mode .section-cta-band p:first-child {
    color: rgba(0, 0, 0, 0.55) !important;
}

html.light-mode .section-cta-band a.index-audit-btn {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
}


/* =================================================
LIGHT MODE — Readiness Check AUDIT
================================================= */

html.light-mode #decision-readiness-check {
    background: #F6F6F3 !important;
}

#decision-readiness-check #auditWrap {
    background: #1a1a1a !important;
}

html.light-mode #decision-readiness-check #auditWrap {
    background: #eaeaea !important;
}

html.light-mode #decision-readiness-check h2 {
    color: #1A1A1A !important;
}

html.light-mode #decision-readiness-check>div>div>p {
    color: #5F5F5F !important;
}

html.light-mode #auditWrap {
    background: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
}

html.light-mode #decision-readiness-check .bg-white\/\[0\.07\] {
    background: #E5E5E5 !important;
}

html.light-mode #pText {
    color: #6A6A6A !important;
}

html.light-mode #aQ {
    color: #1A1A1A !important;
}

html.light-mode .a-opt {
    background: #F8F8F8 !important;
    border: 1px solid #E5E5E5 !important;
    color: #5F5F5F !important;
}

html.light-mode .a-opt:hover {
    background: #EEF6F6 !important;
    border-color: #138C89 !important;
}

html.light-mode .a-opt.sel {
    background: #E6F4F3 !important;
    border-color: #138C89 !important;
    color: #1A1A1A !important;
}

html.light-mode .o-radio {
    border-color: #CFCFCF !important;
}

html.light-mode #decision-readiness-check .border-white\/\[0\.06\] {
    border-color: #E5E5E5 !important;
}

html.light-mode #aBack {
    color: #6A6A6A !important;
}

html.light-mode #aNext {
    background: #138C89 !important;
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

#aNext {
    background: #138C89 !important;
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

html.light-mode #decision-readiness-check input,
html.light-mode #decision-readiness-check select {
    background: #F8F8F8 !important;
    border: 1px solid #E5E5E5 !important;
    color: #1A1A1A !important;
}

html.light-mode #decision-readiness-check h3 {
    color: #1A1A1A !important;
}


/* ============================================
LIGHT MODE — NAVBAR
============================================ */

html.light-mode nav {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E5E5 !important;
}

html.light-mode nav a {
    color: #7a7a72 !important;
    transition: color .2s ease;
}

html.light-mode nav a:hover {
    color: #138C89 !important;
}

html.light-mode nav .audit-nav-link {
    background: #138C89 !important;
    color: #FFFFFF !important;
}

html.light-mode nav .audit-nav-link:hover {
    background: #1aada9 !important;
    color: #FFFFFF !important;
}

html.light-mode nav #burgerBtn .burger-line {
    background: #000 !important;
}

/* ============================================
LIGHT MODE — FOOTER
============================================ */

html.light-mode footer {
    background: #1E1E1E !important;
}

html.light-mode footer .footer-logo {
    filter: brightness(0) invert(1);
}

html.light-mode footer h3,
html.light-mode footer strong {
    color: rgba(255, 255, 255, 0.38) !important;
}

html.light-mode footer p {
    color: rgba(255, 255, 255, 0.38) !important;
}

html.light-mode footer h4 {
    color: #fff !important;
}

html.light-mode footer a {
    color: rgba(255, 255, 255, 0.38) !important;
    transition: color .2s ease;
}

html.light-mode footer a:hover {
    color: #138C89 !important;
}

html.light-mode footer hr,
html.light-mode footer .border-t {
    border-color: #2A2A2A !important;
}

html.light-mode footer .text-white\/\[0\.28\],
html.light-mode footer small {
    color: rgba(255, 255, 255, 0.38) !important;
}

html.light-mode footer .bg-teal {
    background: #138C89 !important;
}


/* .article-content p,
.article-content p span,
.article-content ol,
.article-content ul,
.article-content pre,
.article-content blockquote,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #fff !important;
} */